@indico-data/design-system 1.0.58 → 2.0.1

package/lib/index.css

@@ -0,0 +1,3491 @@
+@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
+:root {
+  --pf-font-family-base: "Mulish", sans-serif;
+  --pf-font-size-base: 1rem;
+  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
+  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
+  --pf-font-size-h3: var(--pf-font-size-base);
+  --pf-font-size-h4: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-h5: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-body: var(--pf-font-size-base);
+  --pf-font-size-body2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-caption: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-subtitle: var(--pf-font-size-base);
+  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-button: var(--pf-font-size-base);
+  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-weight-thin: 100;
+  --pf-font-weight-light: 300;
+  --pf-font-weight-regular: 400;
+  --pf-font-weight-medium: 500;
+  --pf-font-weight-bold: 700;
+  --pf-font-weight-heavy: 900;
+}
+
+:root [data-theme=light],
+:root {
+  --pf-primary-color: #6833d0;
+  --pf-primary-color-100: #f0ebfa;
+  --pf-primary-color-200: #d5c6f2;
+  --pf-primary-color-300: #baa1e9;
+  --pf-primary-color-400: #8c64db;
+  --pf-primary-color-500: #6833d0;
+  --pf-primary-color-600: #5e2ebb;
+  --pf-primary-color-700: #5329a6;
+  --pf-primary-color-800: #492492;
+  --pf-primary-color-900: #3e1f7d;
+  --pf-secondary-color: #0070f5;
+  --pf-secondary-color-100: #dceafd;
+  --pf-secondary-color-200: #b3d4fc;
+  --pf-secondary-color-300: #7ab5fa;
+  --pf-secondary-color-400: #4797f5;
+  --pf-secondary-color-500: #0070f5;
+  --pf-secondary-color-600: #0067e1;
+  --pf-secondary-color-700: #005ac4;
+  --pf-secondary-color-800: #004eac;
+  --pf-secondary-color-900: #004393;
+  --pf-gray-color: #444444;
+  --pf-gray-color-100: #eeeeee;
+  --pf-gray-color-200: #d0d0d0;
+  --pf-gray-color-300: #a9a9a9;
+  --pf-gray-color-400: #737373;
+  --pf-gray-color-500: #444444;
+  --pf-gray-color-600: #373737;
+  --pf-gray-color-700: #2c2c2c;
+  --pf-gray-color-800: #1f1f1f;
+  --pf-gray-color-900: #141414;
+  --pf-green-color: #008a00;
+  --pf-green-color-100: #d6ecd6;
+  --pf-green-color-200: #99d099;
+  --pf-green-color-300: #66b966;
+  --pf-green-color-400: #33a133;
+  --pf-green-color-500: #008a00;
+  --pf-green-color-600: #007c00;
+  --pf-green-color-700: #006e00;
+  --pf-green-color-800: #006100;
+  --pf-green-color-900: #005300;
+  --pf-orange-color: #ffa424;
+  --pf-orange-color-100: #ffdfb2;
+  --pf-orange-color-200: #ffd292;
+  --pf-orange-color-300: #ffc471;
+  --pf-orange-color-400: #ffb650;
+  --pf-orange-color-500: #ffa424;
+  --pf-orange-color-600: #f29c22;
+  --pf-orange-color-700: #e69420;
+  --pf-orange-color-800: #cc831d;
+  --pf-orange-color-900: #b37319;
+  --pf-red-color: #e72326;
+  --pf-red-color-100: #ffd6d6;
+  --pf-red-color-200: #f49ea0;
+  --pf-red-color-300: #ef696b;
+  --pf-red-color-400: #eb4649;
+  --pf-red-color-500: #e72326;
+  --pf-red-color-600: #d52023;
+  --pf-red-color-700: #c21d20;
+  --pf-red-color-800: #b01b1d;
+  --pf-red-color-900: #9d181a;
+  --pf-white-color: #ffffff;
+  --pf-error-color: var(--pf-red-color);
+  --pf-success-color: var(--pf-green-color);
+  --pf-warning-color: var(--pf-orange-color);
+  --pf-info-color: var(--pf-gray-color);
+  --pf-link-color: var(--pf-secondary-color);
+  --pf-link-hover-color: var(--pf-secondary-color-400);
+}
+
+:root [data-theme=dark] {
+  --pf-primary-color: #27374D;
+  --pf-primary-color-100: #E2E4E8;
+  --pf-primary-color-200: #B6BAC1;
+  --pf-primary-color-300: #898F9A;
+  --pf-primary-color-400: #5D6573;
+  --pf-primary-color-500: #27374D;
+  --pf-primary-color-600: #202C3A;
+  --pf-primary-color-700: #192228;
+  --pf-primary-color-800: #131816;
+  --pf-primary-color-900: #0D0E0E;
+  --pf-secondary-color: #526D82;
+  --pf-secondary-color-100: #E6E9EB;
+  --pf-secondary-color-200: #C0C7CD;
+  --pf-secondary-color-300: #99A5AF;
+  --pf-secondary-color-400: #738491;
+  --pf-secondary-color-500: #526D82;
+  --pf-secondary-color-600: #3F5866;
+  --pf-secondary-color-700: #2C434A;
+  --pf-secondary-color-800: #1A2E2E;
+  --pf-secondary-color-900: #071919;
+  --pf-gray-color: #DDE6ED;
+  --pf-gray-color-100: #F7F9FA;
+  --pf-gray-color-200: #EAF2F5;
+  --pf-gray-color-300: #DDE6ED;
+  --pf-gray-color-400: #D1DAE5;
+  --pf-gray-color-500: #C4CFDD;
+  --pf-gray-color-600: #B7C3D5;
+  --pf-gray-color-700: #AAB8CD;
+  --pf-gray-color-800: #9DACB5;
+  --pf-gray-color-900: #90A19D;
+  --pf-green-color: #82DD55;
+  --pf-green-color-100: #F0FFF2;
+  --pf-green-color-200: #E1FFD5;
+  --pf-green-color-300: #D2FFB8;
+  --pf-green-color-400: #C3FF9B;
+  --pf-green-color-500: #82DD55;
+  --pf-green-color-600: #6FC94A;
+  --pf-green-color-700: #5CB53F;
+  --pf-green-color-800: #4AA134;
+  --pf-green-color-900: #388D29;
+  --pf-orange-color: #EDB95E;
+  --pf-orange-color-100: #FFF7E6;
+  --pf-orange-color-200: #FFEDCC;
+  --pf-orange-color-300: #FFE4B2;
+  --pf-orange-color-400: #FFDA99;
+  --pf-orange-color-500: #EDB95E;
+  --pf-orange-color-600: #DAA54D;
+  --pf-orange-color-700: #C7913D;
+  --pf-orange-color-800: #B47D2D;
+  --pf-orange-color-900: #A1691D;
+  --pf-red-color: #E23636;
+  --pf-red-color-100: #FDECEC;
+  --pf-red-color-200: #FBD1D1;
+  --pf-red-color-300: #F9B6B6;
+  --pf-red-color-400: #F79B9B;
+  --pf-red-color-500: #E23636;
+  --pf-red-color-600: #C72F2F;
+  --pf-red-color-700: #AC2828;
+  --pf-red-color-800: #912121;
+  --pf-red-color-900: #761A1A;
+  --pf-error-color: var(--pf-red-color);
+  --pf-success-color: var(--pf-green-color);
+  --pf-warning-color: var(--pf-orange-color);
+  --pf-info-color: var(--pf-gray-color);
+}
+
+:root {
+  --pf-border-thin: thin;
+  --pf-border-sm: 1px;
+  --pf-border-md: 2px;
+  --pf-border-lg: 4px;
+  --pf-border-xl: 8px;
+  --pf-rounded: 4px;
+  --pf-rounded-0: 0px;
+  --pf-rounded-sm: 2px;
+  --pf-rounded-md: 4px;
+  --pf-rounded-lg: 8px;
+  --pf-rounded-xl: 24px;
+  --pf-rounded-pill: 9999px;
+  --pf-rounded-circle: 50%;
+  --pf-rounded-shaped: 24px 0;
+}
+
+:root {
+  --pf-padding-0: 0;
+  --pf-padding-1: 4px;
+  --pf-padding-2: 8px;
+  --pf-padding-3: 12px;
+  --pf-padding-4: 16px;
+  --pf-padding-5: 20px;
+  --pf-padding-6: 24px;
+  --pf-padding-7: 28px;
+  --pf-padding-8: 32px;
+  --pf-padding-9: 36px;
+  --pf-padding-10: 40px;
+  --pf-padding-11: 44px;
+  --pf-padding-12: 48px;
+  --pf-padding-13: 52px;
+  --pf-padding-14: 56px;
+  --pf-padding-15: 60px;
+  --pf-padding-16: 64px;
+}
+
+:root {
+  --pf-margin-auto: auto;
+  --pf-margin-0: 0;
+  --pf-margin-1: 4px;
+  --pf-margin-2: 8px;
+  --pf-margin-3: 12px;
+  --pf-margin-4: 16px;
+  --pf-margin-5: 20px;
+  --pf-margin-6: 24px;
+  --pf-margin-7: 28px;
+  --pf-margin-8: 32px;
+  --pf-margin-9: 36px;
+  --pf-margin-10: 40px;
+  --pf-margin-11: 44px;
+  --pf-margin-12: 48px;
+  --pf-margin-13: 52px;
+  --pf-margin-14: 56px;
+  --pf-margin-15: 60px;
+  --pf-margin-16: 64px;
+  --pf-negative-margin-1: -4px;
+  --pf-negative-margin-2: -8px;
+  --pf-negative-margin-3: -12px;
+  --pf-negative-margin-4: -16px;
+  --pf-negative-margin-5: -20px;
+  --pf-negative-margin-6: -24px;
+  --pf-negative-margin-7: -28px;
+  --pf-negative-margin-8: -32px;
+  --pf-negative-margin-9: -36px;
+  --pf-negative-margin-10: -40px;
+  --pf-negative-margin-11: -44px;
+  --pf-negative-margin-12: -48px;
+  --pf-negative-margin-13: -52px;
+  --pf-negative-margin-14: -56px;
+  --pf-negative-margin-15: -60px;
+  --pf-negative-margin-16: -64px;
+}
+
+.pf__drawer__wrapper {
+  color: #444444;
+  background-color: white;
+  box-sizing: border-box;
+  height: 100vh;
+  padding: 30px 4px 10px 4px;
+  transition: width 0.2s ease-in-out;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  width: 100%;
+}
+.pf__drawer__wrapper .pf__drawer__header__logo-text {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+}
+.pf__drawer__wrapper a:link {
+  color: #444444;
+}
+.pf__drawer__wrapper a {
+  color: #444444;
+  text-decoration: none;
+}
+.pf__drawer__wrapper .pf__drawer__header {
+  margin-bottom: 30px;
+  color: black;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  white-space: nowrap;
+}
+.pf__drawer__wrapper .pf__drawer__header .pf__drawer__header__text {
+  overflow: hidden;
+  transition: opacity 0.2s ease-in-out;
+}
+.pf__drawer__wrapper .pf__drawer__header span {
+  display: flex;
+  align-items: center;
+}
+.pf__drawer__wrapper .pf__drawer__header p {
+  font-size: 20px;
+  margin: 0 0 0 12px;
+}
+.pf__drawer__wrapper .pf__drawer__content {
+  height: calc(100% - 42px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 10px;
+}
+
+:root [data-theme=light],
+:root {
+  --pf-button-font-weight-bold: var(--pf-font-weight-bold);
+  --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
+  --pf-button-background-primary-color: var(--pf-primary-color);
+  --pf-button-disabled-primary-color: var(--pf-primary-color-300);
+  --pf-button-focus-primary-color: var(--pf-primary-color-900);
+  --pf-button-hover-primary-color: var(--pf-primary-color-400);
+  --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
+  --pf-button-primary-color: var(--pf-primary-color);
+  --pf-button-primary-text-color: var(--pf-white-color);
+  --pf-button-background-secondary-color: var(--pf-secondary-color);
+  --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
+  --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
+  --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
+  --pf-button-secondary-color: var(--pf-secondary-color);
+  --pf-button-secondary-text-color: var(--pf-white-color);
+  --pf-button-background-error-color: var(--pf-error-color);
+  --pf-button-disabled-error-color: var(--pf-red-color-300);
+  --pf-button-focus-error-color: var(--pf-red-color-900);
+  --pf-button-hover-error-color: var(--pf-red-color-400);
+  --pf-button-error-color: var(--pf-error-color);
+  --pf-button-error-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-error-color: var(--pf-red-color-100);
+  --pf-button-background-success-color: var(--pf-success-color);
+  --pf-button-disabled-success-color: var(--pf-green-color-300);
+  --pf-button-focus-success-color: var(--pf-green-color-900);
+  --pf-button-hover-success-color: var(--pf-green-color-400);
+  --pf-button-success-color: var(--pf-success-color);
+  --pf-button-success-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-success-color: var(--pf-green-color-100);
+  --pf-button-background-warning-color: var(--pf-warning-color);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
+  --pf-button-focus-warning-color: var(--pf-orange-color-900);
+  --pf-button-hover-warning-color: var(--pf-orange-color-400);
+  --pf-button-warning-color: var(--pf-warning-color);
+  --pf-button-warning-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
+  --pf-button-background-info-color: var(--pf-info-color);
+  --pf-button-disabled-info-color: var(--pf-gray-color-300);
+  --pf-button-focus-info-color: var(--pf-gray-color-900);
+  --pf-button-hover-info-color: var(--pf-gray-color-400);
+  --pf-button-info-color: var(--pf-info-color);
+  --pf-button-info-text-color: var(--pf-white-color);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+  --pf-button-gray-color: var(--pf-gray-color);
+  --pf-button-gray-disabled-color: var(--pf-gray-color-400);
+  --pf-button-outline-background-color: var(--pf-white-color);
+  --pf-button-rounded: var(--pf-rounded);
+}
+
+.btn {
+  display: inline-flex;
+  padding: var(--pf-padding-0) var(--pf-padding-3);
+  font-family: var(--pf-font-family-base);
+  align-items: center;
+  border-radius: var(--pf-button-rounded);
+  border-width: 1px;
+  border-style: solid;
+  font-weight: var(--pf-button-font-weight-bold);
+  cursor: pointer;
+}
+.btn:disabled {
+  cursor: not-allowed;
+}
+
+.btn--sm {
+  height: 28px;
+  padding-left: var(--pf-padding-2);
+  padding-right: var(--pf-padding-2);
+  font-size: var(--pf-font-size-body2);
+}
+
+.btn--md {
+  height: 36px;
+  padding-left: var(--pf-padding-3);
+  padding-right: var(--pf-padding-3);
+  font-size: var(--pf-font-size-body);
+}
+
+.btn--lg {
+  height: 40px;
+  padding-left: var(--pf-padding-4);
+  padding-right: var(--pf-padding-4);
+  font-size: var(--pf-font-size-h2);
+}
+
+.btn--primary {
+  background: var(--pf-button-primary-color);
+  color: var(--pf-button-primary-text-color);
+  border-color: var(--pf-button-primary-color);
+}
+.btn--primary:hover {
+  border-color: var(--pf-button-hover-primary-color);
+  background: var(--pf-button-hover-primary-color);
+}
+.btn--primary:focus {
+  border-color: var(--pf-button-focus-primary-color);
+  background: var(--pf-button-focus-primary-color);
+}
+.btn--primary:disabled {
+  background: var(--pf-button-disabled-primary-color);
+  border-color: var(--pf-button-disabled-primary-color);
+}
+.btn--primary.btn--outline {
+  color: var(--pf-button-primary-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--primary.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-primary-color);
+  border-color: var(--pf-button-hover-primary-color);
+}
+.btn--primary.btn--outline:focus {
+  border-color: var(--pf-button-focus-primary-color);
+  background-color: var(--pf-button-outline-hover-primary-color);
+  color: var(--pf-button-focus-primary-color);
+}
+.btn--primary.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-primary-color);
+  color: var(--pf-button-disabled-primary-color);
+}
+.btn--primary.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-primary-color);
+  color: var(--pf-button-disabled-primary-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--secondary {
+  background: var(--pf-button-secondary-color);
+  color: var(--pf-button-secondary-text-color);
+  border-color: var(--pf-button-secondary-color);
+}
+.btn--secondary:hover {
+  border-color: var(--pf-button-hover-secondary-color);
+  background: var(--pf-button-hover-secondary-color);
+}
+.btn--secondary:focus {
+  border-color: var(--pf-button-focus-secondary-color);
+  background: var(--pf-button-focus-secondary-color);
+}
+.btn--secondary:disabled {
+  background: var(--pf-button-disabled-secondary-color);
+  border-color: var(--pf-button-disabled-secondary-color);
+}
+.btn--secondary.btn--outline {
+  color: var(--pf-button-secondary-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--secondary.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-secondary-color);
+  border-color: var(--pf-button-hover-secondary-color);
+}
+.btn--secondary.btn--outline:focus {
+  border-color: var(--pf-button-focus-secondary-color);
+  background-color: var(--pf-button-outline-hover-secondary-color);
+  color: var(--pf-button-focus-secondary-color);
+}
+.btn--secondary.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-secondary-color);
+  color: var(--pf-button-disabled-secondary-color);
+}
+.btn--secondary.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-secondary-color);
+  color: var(--pf-button-disabled-secondary-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--info {
+  background: var(--pf-button-info-color);
+  color: var(--pf-button-info-text-color);
+  border-color: var(--pf-button-info-color);
+}
+.btn--info:hover {
+  border-color: var(--pf-button-hover-info-color);
+  background: var(--pf-button-hover-info-color);
+}
+.btn--info:focus {
+  border-color: var(--pf-button-focus-info-color);
+  background: var(--pf-button-focus-info-color);
+}
+.btn--info:disabled {
+  background: var(--pf-button-disabled-info-color);
+  border-color: var(--pf-button-disabled-info-color);
+}
+.btn--info.btn--outline {
+  color: var(--pf-button-info-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--info.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-info-color);
+  border-color: var(--pf-button-hover-info-color);
+}
+.btn--info.btn--outline:focus {
+  border-color: var(--pf-button-focus-info-color);
+  background-color: var(--pf-button-outline-hover-info-color);
+  color: var(--pf-button-focus-info-color);
+}
+.btn--info.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-info-color);
+  color: var(--pf-button-disabled-info-color);
+}
+.btn--info.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-info-color);
+  color: var(--pf-button-disabled-info-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--error {
+  background: var(--pf-button-error-color);
+  color: var(--pf-button-error-text-color);
+  border-color: var(--pf-button-error-color);
+}
+.btn--error:hover {
+  border-color: var(--pf-button-hover-error-color);
+  background: var(--pf-button-hover-error-color);
+}
+.btn--error:focus {
+  border-color: var(--pf-button-focus-error-color);
+  background: var(--pf-button-focus-error-color);
+}
+.btn--error:disabled {
+  background: var(--pf-button-disabled-error-color);
+  border-color: var(--pf-button-disabled-error-color);
+}
+.btn--error.btn--outline {
+  color: var(--pf-button-error-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--error.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-error-color);
+  border-color: var(--pf-button-hover-error-color);
+}
+.btn--error.btn--outline:focus {
+  border-color: var(--pf-button-focus-error-color);
+  background-color: var(--pf-button-outline-hover-error-color);
+  color: var(--pf-button-focus-error-color);
+}
+.btn--error.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-error-color);
+  color: var(--pf-button-disabled-error-color);
+}
+.btn--error.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-error-color);
+  color: var(--pf-button-disabled-error-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--success {
+  background: var(--pf-button-success-color);
+  color: var(--pf-button-success-text-color);
+  border-color: var(--pf-button-success-color);
+}
+.btn--success:hover {
+  border-color: var(--pf-button-hover-success-color);
+  background: var(--pf-button-hover-success-color);
+}
+.btn--success:focus {
+  border-color: var(--pf-button-focus-success-color);
+  background: var(--pf-button-focus-success-color);
+}
+.btn--success:disabled {
+  background: var(--pf-button-disabled-success-color);
+  border-color: var(--pf-button-disabled-success-color);
+}
+.btn--success.btn--outline {
+  color: var(--pf-button-success-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--success.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-success-color);
+  border-color: var(--pf-button-hover-success-color);
+}
+.btn--success.btn--outline:focus {
+  border-color: var(--pf-button-focus-success-color);
+  background-color: var(--pf-button-outline-hover-success-color);
+  color: var(--pf-button-focus-success-color);
+}
+.btn--success.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-success-color);
+  color: var(--pf-button-disabled-success-color);
+}
+.btn--success.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-success-color);
+  color: var(--pf-button-disabled-success-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--warning {
+  background: var(--pf-button-warning-color);
+  color: var(--pf-button-warning-text-color);
+  border-color: var(--pf-button-warning-color);
+}
+.btn--warning:hover {
+  border-color: var(--pf-button-hover-warning-color);
+  background: var(--pf-button-hover-warning-color);
+}
+.btn--warning:focus {
+  border-color: var(--pf-button-focus-warning-color);
+  background: var(--pf-button-focus-warning-color);
+}
+.btn--warning:disabled {
+  background: var(--pf-button-disabled-warning-color);
+  border-color: var(--pf-button-disabled-warning-color);
+}
+.btn--warning.btn--outline {
+  color: var(--pf-button-warning-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+.btn--warning.btn--outline:hover {
+  background-color: var(--pf-button-outline-hover-warning-color);
+  border-color: var(--pf-button-hover-warning-color);
+}
+.btn--warning.btn--outline:focus {
+  border-color: var(--pf-button-focus-warning-color);
+  background-color: var(--pf-button-outline-hover-warning-color);
+  color: var(--pf-button-focus-warning-color);
+}
+.btn--warning.btn--outline:disabled {
+  border-color: var(--pf-button-disabled-warning-color);
+  color: var(--pf-button-disabled-warning-color);
+}
+.btn--warning.btn--outline:disabled:hover {
+  border-color: var(--pf-button-disabled-warning-color);
+  color: var(--pf-button-disabled-warning-color);
+  background-color: var(--pf-button-outline-background-color);
+}
+
+.btn--text {
+  background-color: transparent;
+  border: solid 1px transparent;
+  color: var(--pf-link-color);
+  font-weight: var(--pf-button-font-weight-regular);
+}
+.btn--text:hover {
+  background-color: transparent;
+  border: solid 1px transparent;
+  text-decoration: underline;
+}
+.btn--text:focus {
+  background-color: transparent;
+  border: solid 1px transparent;
+  color: var(--pf-link-hover-color);
+}
+.btn--text:disabled {
+  color: var(--pf-button-gray-disabled-color);
+}
+.btn--text:disabled:hover {
+  color: var(--pf-button-gray-disabled-color);
+}
+
+.btn--solid {
+  color: var(--pf-white-color);
+}
+
+.btn--primary.btn--text,
+.btn--secondary.btn--text,
+.btn--info.btn--text,
+.btn--error.btn--text,
+.btn--success.btn--text,
+.btn--warning.btn--text {
+  border: solid 1px transparent;
+  font-weight: var(--pf-button-font-weight-regular);
+}
+.btn--primary.btn--text:hover:disabled,
+.btn--secondary.btn--text:hover:disabled,
+.btn--info.btn--text:hover:disabled,
+.btn--error.btn--text:hover:disabled,
+.btn--success.btn--text:hover:disabled,
+.btn--warning.btn--text:hover:disabled {
+  background-color: transparent;
+}
+.btn--primary.btn--text:disabled,
+.btn--secondary.btn--text:disabled,
+.btn--info.btn--text:disabled,
+.btn--error.btn--text:disabled,
+.btn--success.btn--text:disabled,
+.btn--warning.btn--text:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--pf-button-gray-disabled-color);
+}
+
+.btn--primary.btn--text {
+  color: var(--pf-button-primary-color);
+  background: transparent;
+}
+.btn--primary.btn--text:hover {
+  background: transparent;
+  color: var(--pf-button-primary-color);
+}
+.btn--primary.btn--text:disabled {
+  color: var(--pf-button-gray-disabled-color);
+}
+.btn--primary.btn--text:disabled:hover {
+  color: var(--pf-button-gray-disabled-color);
+}
+
+.btn--secondary.btn--text {
+  background: transparent;
+  color: var(--pf-button-secondary-color);
+}
+.btn--secondary.btn--text:hover {
+  background: transparent;
+  color: var(--pf-button-secondary-color);
+}
+.btn--secondary.btn--text:disabled {
+  color: var(--pf-button-gray-disabled-color);
+}
+.btn--secondary.btn--text:disabled:hover {
+  color: var(--pf-button-gray-disabled-color);
+}
+
+.btn--info.btn--text {
+  background: transparent;
+  color: var(--pf-button-info-color);
+}
+.btn--info.btn--text:hover {
+  background: transparent;
+  color: var(--pf-button-info-color);
+}
+.btn--info.btn--text:disabled {
+  color: var(--pf-button-gray-disabled-color);
+}
+.btn--info.btn--text:disabled:hover {
+  color: var(--pf-button-gray-disabled-color);
+}
+
+.btn--outline {
+  background-color: var(--pf-button-outline-background-color);
+}
+
+:root {
+  --pf-font-family-base: "Mulish", sans-serif;
+  --pf-font-size-base: 1rem;
+  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
+  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
+  --pf-font-size-h3: var(--pf-font-size-base);
+  --pf-font-size-h4: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-h5: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-body: var(--pf-font-size-base);
+  --pf-font-size-body2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-caption: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-subtitle: var(--pf-font-size-base);
+  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-button: var(--pf-font-size-base);
+  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-weight-thin: 100;
+  --pf-font-weight-light: 300;
+  --pf-font-weight-regular: 400;
+  --pf-font-weight-medium: 500;
+  --pf-font-weight-bold: 700;
+  --pf-font-weight-heavy: 900;
+}
+
+html {
+  font-size: var(--pf-font-size-base);
+  font-family: var(--pf-font-family-base);
+}
+
+h1,
+.text-h1 {
+  font-size: var(--pf-font-size-h1);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+  font-weight: var(--pf-font-weight-bold);
+}
+
+h2,
+.text-h2 {
+  font-size: var(--pf-font-size-h2);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+  font-weight: var(--pf-font-weight-bold);
+}
+
+h3,
+.text-h3 {
+  font-size: var(--pf-font-size-h3);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+  font-weight: var(--pf-font-weight-bold);
+}
+
+h4,
+.text-h4 {
+  font-size: var(--pf-font-size-h4);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+  font-weight: var(--pf-font-weight-bold);
+}
+
+h5,
+.text-h5 {
+  font-size: var(--pf-font-size-h5);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+  font-weight: var(--pf-font-weight-bold);
+}
+
+p,
+.text-p {
+  font-size: var(--pf-font-size-body);
+  font-family: var(--pf-font-family-base);
+  margin: 0;
+  padding: 0;
+}
+
+.subtitle {
+  font-size: var(--pf-font-size-subtitle);
+}
+
+.subtitle-2 {
+  font-size: var(--pf-font-size-subtitle2);
+}
+
+.text-body {
+  font-size: var(--pf-font-size-body);
+}
+
+.text-body-2 {
+  font-size: var(--pf-font-size-body2);
+}
+
+.text-caption {
+  font-size: var(--pf-font-size-caption);
+}
+
+.text-overline {
+  font-size: var(--pf-font-size-overine);
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-decoration--none {
+  text-decoration: none;
+}
+
+.text-decoration--underline {
+  text-decoration: underline;
+}
+
+.text-decoration--line-through {
+  text-decoration: line-through;
+}
+
+.text-decoration--overline {
+  text-decoration: overline;
+}
+
+.text-weight--thin {
+  font-weight: var(--pf-font-weight-thin);
+}
+
+.text-weight--light {
+  font-weight: var(--pf-font-weight-light);
+}
+
+.text-weight--regular {
+  font-weight: var(--pf-font-weight-regular);
+}
+
+.text-weight--medium {
+  font-weight: var(--pf-font-weight-medium);
+}
+
+.text-weight--bold {
+  font-weight: var(--pf-font-weight-bold);
+}
+
+.text-weight--heavy {
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.text-align--left {
+  text-align: left;
+}
+
+.text-align--center {
+  text-align: center;
+}
+
+.text-align--right {
+  text-align: right;
+}
+
+.text-opacity--0 {
+  opacity: 0;
+}
+
+.text-opacity--5 {
+  opacity: 0.05;
+}
+
+.text-opacity--10 {
+  opacity: 0.1;
+}
+
+.text-opacity--15 {
+  opacity: 0.15;
+}
+
+.text-opacity--20 {
+  opacity: 0.2;
+}
+
+.text-opacity--25 {
+  opacity: 0.25;
+}
+
+.text-opacity--30 {
+  opacity: 0.3;
+}
+
+.text-opacity--35 {
+  opacity: 0.35;
+}
+
+.text-opacity--40 {
+  opacity: 0.4;
+}
+
+.text-opacity--45 {
+  opacity: 0.45;
+}
+
+.text-opacity--50 {
+  opacity: 0.5;
+}
+
+.text-opacity--55 {
+  opacity: 0.55;
+}
+
+.text-opacity--60 {
+  opacity: 0.6;
+}
+
+.text-opacity--65 {
+  opacity: 0.65;
+}
+
+.text-opacity--70 {
+  opacity: 0.7;
+}
+
+.text-opacity--75 {
+  opacity: 0.75;
+}
+
+.text-opacity--80 {
+  opacity: 0.8;
+}
+
+.text-opacity--85 {
+  opacity: 0.85;
+}
+
+.text-opacity--90 {
+  opacity: 0.9;
+}
+
+.text-opacity--95 {
+  opacity: 0.95;
+}
+
+.text-opacity--100 {
+  opacity: 1;
+}
+
+.text-break--word {
+  overflow-wrap: break-word;
+}
+
+.color-primary {
+  color: var(--pf-primary-color);
+}
+
+.bg-primary {
+  background-color: var(--pf-primary-color);
+}
+
+.color-primary-100 {
+  color: var(--pf-primary-color-100);
+}
+
+.bg-primary-100 {
+  background-color: var(--pf-primary-color-100);
+}
+
+.color-primary-200 {
+  color: var(--pf-primary-color-200);
+}
+
+.bg-primary-200 {
+  background-color: var(--pf-primary-color-200);
+}
+
+.color-primary-300 {
+  color: var(--pf-primary-color-300);
+}
+
+.bg-primary-300 {
+  background-color: var(--pf-primary-color-300);
+}
+
+.color-primary-400 {
+  color: var(--pf-primary-color-400);
+}
+
+.bg-primary-400 {
+  background-color: var(--pf-primary-color-400);
+}
+
+.color-primary-500 {
+  color: var(--pf-primary-color-500);
+}
+
+.bg-primary-500 {
+  background-color: var(--pf-primary-color-500);
+}
+
+.color-primary-600 {
+  color: var(--pf-primary-color-600);
+}
+
+.bg-primary-600 {
+  background-color: var(--pf-primary-color-600);
+}
+
+.color-primary-700 {
+  color: var(--pf-primary-color-700);
+}
+
+.bg-primary-700 {
+  background-color: var(--pf-primary-color-700);
+}
+
+.color-primary-800 {
+  color: var(--pf-primary-color-800);
+}
+
+.bg-primary-800 {
+  background-color: var(--pf-primary-color-800);
+}
+
+.color-primary-900 {
+  color: var(--pf-primary-color-900);
+}
+
+.bg-primary-900 {
+  background-color: var(--pf-primary-color-900);
+}
+
+.color-secondary {
+  color: var(--pf-secondary-color);
+}
+
+.bg-secondary {
+  background-color: var(--pf-secondary-color);
+}
+
+.color-secondary-100 {
+  color: var(--pf-secondary-color-100);
+}
+
+.bg-secondary-100 {
+  background-color: var(--pf-secondary-color-100);
+}
+
+.color-secondary-200 {
+  color: var(--pf-secondary-color-200);
+}
+
+.bg-secondary-200 {
+  background-color: var(--pf-secondary-color-200);
+}
+
+.color-secondary-300 {
+  color: var(--pf-secondary-color-300);
+}
+
+.bg-secondary-300 {
+  background-color: var(--pf-secondary-color-300);
+}
+
+.color-secondary-400 {
+  color: var(--pf-secondary-color-400);
+}
+
+.bg-secondary-400 {
+  background-color: var(--pf-secondary-color-400);
+}
+
+.color-secondary-500 {
+  color: var(--pf-secondary-color-500);
+}
+
+.bg-secondary-500 {
+  background-color: var(--pf-secondary-color-500);
+}
+
+.color-secondary-600 {
+  color: var(--pf-secondary-color-600);
+}
+
+.bg-secondary-600 {
+  background-color: var(--pf-secondary-color-600);
+}
+
+.color-secondary-700 {
+  color: var(--pf-secondary-color-700);
+}
+
+.bg-secondary-700 {
+  background-color: var(--pf-secondary-color-700);
+}
+
+.color-secondary-800 {
+  color: var(--pf-secondary-color-800);
+}
+
+.bg-secondary-800 {
+  background-color: var(--pf-secondary-color-800);
+}
+
+.color-secondary-900 {
+  color: var(--pf-secondary-color-900);
+}
+
+.bg-secondary-900 {
+  background-color: var(--pf-secondary-color-900);
+}
+
+.color-gray {
+  color: var(--pf-gray-color);
+}
+
+.bg-gray {
+  background-color: var(--pf-gray-color);
+}
+
+.color-gray-100 {
+  color: var(--pf-gray-color-100);
+}
+
+.bg-gray-100 {
+  background-color: var(--pf-gray-color-100);
+}
+
+.color-gray-200 {
+  color: var(--pf-gray-color-200);
+}
+
+.bg-gray-200 {
+  background-color: var(--pf-gray-color-200);
+}
+
+.color-gray-300 {
+  color: var(--pf-gray-color-300);
+}
+
+.bg-gray-300 {
+  background-color: var(--pf-gray-color-300);
+}
+
+.color-gray-400 {
+  color: var(--pf-gray-color-400);
+}
+
+.bg-gray-400 {
+  background-color: var(--pf-gray-color-400);
+}
+
+.color-gray-500 {
+  color: var(--pf-gray-color-500);
+}
+
+.bg-gray-500 {
+  background-color: var(--pf-gray-color-500);
+}
+
+.color-gray-600 {
+  color: var(--pf-gray-color-600);
+}
+
+.bg-gray-600 {
+  background-color: var(--pf-gray-color-600);
+}
+
+.color-gray-700 {
+  color: var(--pf-gray-color-700);
+}
+
+.bg-gray-700 {
+  background-color: var(--pf-gray-color-700);
+}
+
+.color-gray-800 {
+  color: var(--pf-gray-color-800);
+}
+
+.bg-gray-800 {
+  background-color: var(--pf-gray-color-800);
+}
+
+.color-gray-900 {
+  color: var(--pf-gray-color-900);
+}
+
+.bg-gray-900 {
+  background-color: var(--pf-gray-color-900);
+}
+
+.color-green {
+  color: var(--pf-green-color);
+}
+
+.bg-green {
+  background-color: var(--pf-green-color);
+}
+
+.color-green-100 {
+  color: var(--pf-green-color-100);
+}
+
+.bg-green-100 {
+  background-color: var(--pf-green-color-100);
+}
+
+.color-green-200 {
+  color: var(--pf-green-color-200);
+}
+
+.bg-green-200 {
+  background-color: var(--pf-green-color-200);
+}
+
+.color-green-300 {
+  color: var(--pf-green-color-300);
+}
+
+.bg-green-300 {
+  background-color: var(--pf-green-color-300);
+}
+
+.color-green-400 {
+  color: var(--pf-green-color-400);
+}
+
+.bg-green-400 {
+  background-color: var(--pf-green-color-400);
+}
+
+.color-green-500 {
+  color: var(--pf-green-color-500);
+}
+
+.bg-green-500 {
+  background-color: var(--pf-green-color-500);
+}
+
+.color-green-600 {
+  color: var(--pf-green-color-600);
+}
+
+.bg-green-600 {
+  background-color: var(--pf-green-color-600);
+}
+
+.color-green-700 {
+  color: var(--pf-green-color-700);
+}
+
+.bg-green-700 {
+  background-color: var(--pf-green-color-700);
+}
+
+.color-green-800 {
+  color: var(--pf-green-color-800);
+}
+
+.bg-green-800 {
+  background-color: var(--pf-green-color-800);
+}
+
+.color-green-900 {
+  color: var(--pf-green-color-900);
+}
+
+.bg-green-900 {
+  background-color: var(--pf-green-color-900);
+}
+
+.color-orange {
+  color: var(--pf-orange-color);
+}
+
+.bg-orange {
+  background-color: var(--pf-orange-color);
+}
+
+.color-orange-100 {
+  color: var(--pf-orange-color-100);
+}
+
+.bg-orange-100 {
+  background-color: var(--pf-orange-color-100);
+}
+
+.color-orange-200 {
+  color: var(--pf-orange-color-200);
+}
+
+.bg-orange-200 {
+  background-color: var(--pf-orange-color-200);
+}
+
+.color-orange-300 {
+  color: var(--pf-orange-color-300);
+}
+
+.bg-orange-300 {
+  background-color: var(--pf-orange-color-300);
+}
+
+.color-orange-400 {
+  color: var(--pf-orange-color-400);
+}
+
+.bg-orange-400 {
+  background-color: var(--pf-orange-color-400);
+}
+
+.color-orange-500 {
+  color: var(--pf-orange-color-500);
+}
+
+.bg-orange-500 {
+  background-color: var(--pf-orange-color-500);
+}
+
+.color-orange-600 {
+  color: var(--pf-orange-color-600);
+}
+
+.bg-orange-600 {
+  background-color: var(--pf-orange-color-600);
+}
+
+.color-orange-700 {
+  color: var(--pf-orange-color-700);
+}
+
+.bg-orange-700 {
+  background-color: var(--pf-orange-color-700);
+}
+
+.color-orange-800 {
+  color: var(--pf-orange-color-800);
+}
+
+.bg-orange-800 {
+  background-color: var(--pf-orange-color-800);
+}
+
+.color-orange-900 {
+  color: var(--pf-orange-color-900);
+}
+
+.bg-orange-900 {
+  background-color: var(--pf-orange-color-900);
+}
+
+.color-red {
+  color: var(--pf-red-color);
+}
+
+.bg-red {
+  background-color: var(--pf-red-color);
+}
+
+.color-red-100 {
+  color: var(--pf-red-color-100);
+}
+
+.bg-red-100 {
+  background-color: var(--pf-red-color-100);
+}
+
+.color-red-200 {
+  color: var(--pf-red-color-200);
+}
+
+.bg-red-200 {
+  background-color: var(--pf-red-color-200);
+}
+
+.color-red-300 {
+  color: var(--pf-red-color-300);
+}
+
+.bg-red-300 {
+  background-color: var(--pf-red-color-300);
+}
+
+.color-red-400 {
+  color: var(--pf-red-color-400);
+}
+
+.bg-red-400 {
+  background-color: var(--pf-red-color-400);
+}
+
+.color-red-500 {
+  color: var(--pf-red-color-500);
+}
+
+.bg-red-500 {
+  background-color: var(--pf-red-color-500);
+}
+
+.color-red-600 {
+  color: var(--pf-red-color-600);
+}
+
+.bg-red-600 {
+  background-color: var(--pf-red-color-600);
+}
+
+.color-red-700 {
+  color: var(--pf-red-color-700);
+}
+
+.bg-red-700 {
+  background-color: var(--pf-red-color-700);
+}
+
+.color-red-800 {
+  color: var(--pf-red-color-800);
+}
+
+.bg-red-800 {
+  background-color: var(--pf-red-color-800);
+}
+
+.color-red-900 {
+  color: var(--pf-red-color-900);
+}
+
+.bg-red-900 {
+  background-color: var(--pf-red-color-900);
+}
+
+.border {
+  border: solid 1px;
+}
+
+.border-thin {
+  border-style: solid;
+  border-width: var(--pf-border-thin);
+}
+
+.border-t-thin {
+  border-style: solid;
+  border-top-width: var(--pf-border-thin);
+}
+
+.border-b-thin {
+  border-style: solid;
+  border-bottom-width: var(--pf-border-thin);
+}
+
+.border-l-thin {
+  border-style: solid;
+  border-left-width: var(--pf-border-thin);
+}
+
+.border-r-thin {
+  border-style: solid;
+  border-right-width: var(--pf-border-thin);
+}
+
+.border-sm {
+  border-style: solid;
+  border-width: var(--pf-border-sm);
+}
+
+.border-t-sm {
+  border-style: solid;
+  border-top-width: var(--pf-border-sm);
+}
+
+.border-b-sm {
+  border-style: solid;
+  border-bottom-width: var(--pf-border-sm);
+}
+
+.border-l-sm {
+  border-style: solid;
+  border-left-width: var(--pf-border-sm);
+}
+
+.border-r-sm {
+  border-style: solid;
+  border-right-width: var(--pf-border-sm);
+}
+
+.border-md {
+  border-style: solid;
+  border-width: var(--pf-border-md);
+}
+
+.border-t-md {
+  border-style: solid;
+  border-top-width: var(--pf-border-md);
+}
+
+.border-b-md {
+  border-style: solid;
+  border-bottom-width: var(--pf-border-md);
+}
+
+.border-l-md {
+  border-style: solid;
+  border-left-width: var(--pf-border-md);
+}
+
+.border-r-md {
+  border-style: solid;
+  border-right-width: var(--pf-border-md);
+}
+
+.border-lg {
+  border-style: solid;
+  border-width: var(--pf-border-lg);
+}
+
+.border-t-lg {
+  border-style: solid;
+  border-top-width: var(--pf-border-lg);
+}
+
+.border-b-lg {
+  border-style: solid;
+  border-bottom-width: var(--pf-border-lg);
+}
+
+.border-l-lg {
+  border-style: solid;
+  border-left-width: var(--pf-border-lg);
+}
+
+.border-r-lg {
+  border-style: solid;
+  border-right-width: var(--pf-border-lg);
+}
+
+.border-0 {
+  border-style: solid;
+  border-width: 0;
+}
+
+.border-t-0 {
+  border-style: solid;
+  border-top-width: 0;
+}
+
+.border-b-0 {
+  border-style: solid;
+  border-bottom-width: 0;
+}
+
+.border-l-0 {
+  border-style: solid;
+  border-left-width: 0;
+}
+
+.border-r-0 {
+  border-style: solid;
+  border-right-width: 0;
+}
+
+.border-xl {
+  border-style: solid;
+  border-width: var(--pf-border-xl);
+}
+
+.border-t-xl {
+  border-style: solid;
+  border-top-width: var(--pf-border-xl);
+}
+
+.border-b-xl {
+  border-style: solid;
+  border-bottom-width: var(--pf-border-xl);
+}
+
+.border-l-xl {
+  border-style: solid;
+  border-left-width: var(--pf-border-xl);
+}
+
+.border-r-xl {
+  border-style: solid;
+  border-right-width: var(--pf-border-xl);
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-dotted {
+  border-style: dotted;
+}
+
+.border-double {
+  border-style: double;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-primary {
+  border-color: var(--pf-primary-color);
+}
+
+.border-primary-100 {
+  border-color: var(--pf-primary-color-100);
+}
+
+.border-primary-200 {
+  border-color: var(--pf-primary-color-200);
+}
+
+.border-primary-300 {
+  border-color: var(--pf-primary-color-300);
+}
+
+.border-primary-400 {
+  border-color: var(--pf-primary-color-400);
+}
+
+.border-primary-500 {
+  border-color: var(--pf-primary-color-500);
+}
+
+.border-primary-600 {
+  border-color: var(--pf-primary-color-600);
+}
+
+.border-primary-700 {
+  border-color: var(--pf-primary-color-700);
+}
+
+.border-primary-800 {
+  border-color: var(--pf-primary-color-800);
+}
+
+.border-primary-900 {
+  border-color: var(--pf-primary-color-900);
+}
+
+.border-secondary {
+  border-color: var(--pf-secondary-color);
+}
+
+.border-secondary-100 {
+  border-color: var(--pf-secondary-color-100);
+}
+
+.border-secondary-200 {
+  border-color: var(--pf-secondary-color-200);
+}
+
+.border-secondary-300 {
+  border-color: var(--pf-secondary-color-300);
+}
+
+.border-secondary-400 {
+  border-color: var(--pf-secondary-color-400);
+}
+
+.border-secondary-500 {
+  border-color: var(--pf-secondary-color-500);
+}
+
+.border-secondary-600 {
+  border-color: var(--pf-secondary-color-600);
+}
+
+.border-secondary-700 {
+  border-color: var(--pf-secondary-color-700);
+}
+
+.border-secondary-800 {
+  border-color: var(--pf-secondary-color-800);
+}
+
+.border-secondary-900 {
+  border-color: var(--pf-secondary-color-900);
+}
+
+.border-gray {
+  border-color: var(--pf-gray-color);
+}
+
+.border-gray-100 {
+  border-color: var(--pf-gray-color-100);
+}
+
+.border-gray-200 {
+  border-color: var(--pf-gray-color-200);
+}
+
+.border-gray-300 {
+  border-color: var(--pf-gray-color-300);
+}
+
+.border-gray-400 {
+  border-color: var(--pf-gray-color-400);
+}
+
+.border-gray-500 {
+  border-color: var(--pf-gray-color-500);
+}
+
+.border-gray-600 {
+  border-color: var(--pf-gray-color-600);
+}
+
+.border-gray-700 {
+  border-color: var(--pf-gray-color-700);
+}
+
+.border-gray-800 {
+  border-color: var(--pf-gray-color-800);
+}
+
+.border-gray-900 {
+  border-color: var(--pf-gray-color-900);
+}
+
+.border-green {
+  border-color: var(--pf-green-color);
+}
+
+.border-green-100 {
+  border-color: var(--pf-green-color-100);
+}
+
+.border-green-200 {
+  border-color: var(--pf-green-color-200);
+}
+
+.border-green-300 {
+  border-color: var(--pf-green-color-300);
+}
+
+.border-green-400 {
+  border-color: var(--pf-green-color-400);
+}
+
+.border-green-500 {
+  border-color: var(--pf-green-color-500);
+}
+
+.border-green-600 {
+  border-color: var(--pf-green-color-600);
+}
+
+.border-green-700 {
+  border-color: var(--pf-green-color-700);
+}
+
+.border-green-800 {
+  border-color: var(--pf-green-color-800);
+}
+
+.border-green-900 {
+  border-color: var(--pf-green-color-900);
+}
+
+.border-orange {
+  border-color: var(--pf-orange-color);
+}
+
+.border-orange-100 {
+  border-color: var(--pf-orange-color-100);
+}
+
+.border-orange-200 {
+  border-color: var(--pf-orange-color-200);
+}
+
+.border-orange-300 {
+  border-color: var(--pf-orange-color-300);
+}
+
+.border-orange-400 {
+  border-color: var(--pf-orange-color-400);
+}
+
+.border-orange-500 {
+  border-color: var(--pf-orange-color-500);
+}
+
+.border-orange-600 {
+  border-color: var(--pf-orange-color-600);
+}
+
+.border-orange-700 {
+  border-color: var(--pf-orange-color-700);
+}
+
+.border-orange-800 {
+  border-color: var(--pf-orange-color-800);
+}
+
+.border-orange-900 {
+  border-color: var(--pf-orange-color-900);
+}
+
+.border-red {
+  border-color: var(--pf-red-color);
+}
+
+.border-red-100 {
+  border-color: var(--pf-red-color-100);
+}
+
+.border-red-200 {
+  border-color: var(--pf-red-color-200);
+}
+
+.border-red-300 {
+  border-color: var(--pf-red-color-300);
+}
+
+.border-red-400 {
+  border-color: var(--pf-red-color-400);
+}
+
+.border-red-500 {
+  border-color: var(--pf-red-color-500);
+}
+
+.border-red-600 {
+  border-color: var(--pf-red-color-600);
+}
+
+.border-red-700 {
+  border-color: var(--pf-red-color-700);
+}
+
+.border-red-800 {
+  border-color: var(--pf-red-color-800);
+}
+
+.border-red-900 {
+  border-color: var(--pf-red-color-900);
+}
+
+.rounded {
+  border-radius: var(--pf-rounded);
+}
+
+.rounded-0 {
+  border-radius: var(--pf-rounded-0);
+}
+
+.rounded-sm {
+  border-radius: var(--pf-rounded-sm);
+}
+
+.rounded-lg {
+  border-radius: var(--pf-rounded-md);
+}
+
+.rounded-md {
+  border-radius: var(--pf-rounded-lg);
+}
+
+.rounded-xl {
+  border-radius: var(--pf-rounded-xl);
+}
+
+.rounded-pill {
+  border-radius: var(--pf-rounded-pill);
+}
+
+.rounded-circle {
+  border-radius: var(--pf-rounded-circle);
+}
+
+.rounded-shaped {
+  border-radius: var(--pf-rounded-shaped);
+}
+
+.pa-0 {
+  padding: var(--pf-padding-0);
+}
+
+.pa-1 {
+  padding: var(--pf-padding-1);
+}
+
+.pa-2 {
+  padding: var(--pf-padding-2);
+}
+
+.pa-3 {
+  padding: var(--pf-padding-3);
+}
+
+.pa-4 {
+  padding: var(--pf-padding-4);
+}
+
+.pa-5 {
+  padding: var(--pf-padding-5);
+}
+
+.pa-6 {
+  padding: var(--pf-padding-6);
+}
+
+.pa-7 {
+  padding: var(--pf-padding-7);
+}
+
+.pa-8 {
+  padding: var(--pf-padding-8);
+}
+
+.pa-9 {
+  padding: var(--pf-padding-9);
+}
+
+.pa-10 {
+  padding: var(--pf-padding-10);
+}
+
+.pa-11 {
+  padding: var(--pf-padding-11);
+}
+
+.pa-12 {
+  padding: var(--pf-padding-12);
+}
+
+.pa-13 {
+  padding: var(--pf-padding-13);
+}
+
+.pa-14 {
+  padding: var(--pf-padding-14);
+}
+
+.pa-15 {
+  padding: var(--pf-padding-15);
+}
+
+.pa-16 {
+  padding: var(--pf-padding-16);
+}
+
+.px-0 {
+  padding-left: var(--pf-padding-0);
+  padding-right: var(--pf-padding-0);
+}
+
+.px-1 {
+  padding-left: var(--pf-padding-1);
+  padding-right: var(--pf-padding-1);
+}
+
+.px-2 {
+  padding-left: var(--pf-padding-2);
+  padding-right: var(--pf-padding-2);
+}
+
+.px-3 {
+  padding-left: var(--pf-padding-3);
+  padding-right: var(--pf-padding-3);
+}
+
+.px-4 {
+  padding-left: var(--pf-padding-4);
+  padding-right: var(--pf-padding-4);
+}
+
+.px-5 {
+  padding-left: var(--pf-padding-5);
+  padding-right: var(--pf-padding-5);
+}
+
+.px-6 {
+  padding-left: var(--pf-padding-6);
+  padding-right: var(--pf-padding-6);
+}
+
+.px-7 {
+  padding-left: var(--pf-padding-7);
+  padding-right: var(--pf-padding-7);
+}
+
+.px-8 {
+  padding-left: var(--pf-padding-8);
+  padding-right: var(--pf-padding-8);
+}
+
+.px-9 {
+  padding-left: var(--pf-padding-9);
+  padding-right: var(--pf-padding-9);
+}
+
+.px-10 {
+  padding-left: var(--pf-padding-10);
+  padding-right: var(--pf-padding-10);
+}
+
+.px-11 {
+  padding-left: var(--pf-padding-11);
+  padding-right: var(--pf-padding-11);
+}
+
+.px-12 {
+  padding-left: var(--pf-padding-12);
+  padding-right: var(--pf-padding-12);
+}
+
+.px-13 {
+  padding-left: var(--pf-padding-13);
+  padding-right: var(--pf-padding-13);
+}
+
+.px-14 {
+  padding-left: var(--pf-padding-14);
+  padding-right: var(--pf-padding-14);
+}
+
+.px-15 {
+  padding-left: var(--pf-padding-15);
+  padding-right: var(--pf-padding-15);
+}
+
+.px-16 {
+  padding-left: var(--pf-padding-16);
+  padding-right: var(--pf-padding-16);
+}
+
+.py-0 {
+  padding-top: var(--pf-padding-0);
+  padding-bottom: var(--pf-padding-0);
+}
+
+.py-1 {
+  padding-top: var(--pf-padding-1);
+  padding-bottom: var(--pf-padding-1);
+}
+
+.py-2 {
+  padding-top: var(--pf-padding-2);
+  padding-bottom: var(--pf-padding-2);
+}
+
+.py-3 {
+  padding-top: var(--pf-padding-3);
+  padding-bottom: var(--pf-padding-3);
+}
+
+.py-4 {
+  padding-top: var(--pf-padding-4);
+  padding-bottom: var(--pf-padding-4);
+}
+
+.py-5 {
+  padding-top: var(--pf-padding-5);
+  padding-bottom: var(--pf-padding-5);
+}
+
+.py-6 {
+  padding-top: var(--pf-padding-6);
+  padding-bottom: var(--pf-padding-6);
+}
+
+.py-7 {
+  padding-top: var(--pf-padding-7);
+  padding-bottom: var(--pf-padding-7);
+}
+
+.py-8 {
+  padding-top: var(--pf-padding-8);
+  padding-bottom: var(--pf-padding-8);
+}
+
+.py-9 {
+  padding-top: var(--pf-padding-9);
+  padding-bottom: var(--pf-padding-9);
+}
+
+.py-10 {
+  padding-top: var(--pf-padding-10);
+  padding-bottom: var(--pf-padding-10);
+}
+
+.py-11 {
+  padding-top: var(--pf-padding-11);
+  padding-bottom: var(--pf-padding-11);
+}
+
+.py-12 {
+  padding-top: var(--pf-padding-12);
+  padding-bottom: var(--pf-padding-12);
+}
+
+.py-13 {
+  padding-top: var(--pf-padding-13);
+  padding-bottom: var(--pf-padding-13);
+}
+
+.py-14 {
+  padding-top: var(--pf-padding-14);
+  padding-bottom: var(--pf-padding-14);
+}
+
+.py-15 {
+  padding-top: var(--pf-padding-15);
+  padding-bottom: var(--pf-padding-15);
+}
+
+.py-16 {
+  padding-top: var(--pf-padding-16);
+  padding-bottom: var(--pf-padding-16);
+}
+
+.pl-0 {
+  padding-left: var(--pf-padding-0);
+}
+
+.pl-1 {
+  padding-left: var(--pf-padding-1);
+}
+
+.pl-2 {
+  padding-left: var(--pf-padding-2);
+}
+
+.pl-3 {
+  padding-left: var(--pf-padding-3);
+}
+
+.pl-4 {
+  padding-left: var(--pf-padding-4);
+}
+
+.pl-5 {
+  padding-left: var(--pf-padding-5);
+}
+
+.pl-6 {
+  padding-left: var(--pf-padding-6);
+}
+
+.pl-7 {
+  padding-left: var(--pf-padding-7);
+}
+
+.pl-8 {
+  padding-left: var(--pf-padding-8);
+}
+
+.pl-9 {
+  padding-left: var(--pf-padding-9);
+}
+
+.pl-10 {
+  padding-left: var(--pf-padding-10);
+}
+
+.pl-11 {
+  padding-left: var(--pf-padding-11);
+}
+
+.pl-12 {
+  padding-left: var(--pf-padding-12);
+}
+
+.pl-13 {
+  padding-left: var(--pf-padding-13);
+}
+
+.pl-14 {
+  padding-left: var(--pf-padding-14);
+}
+
+.pl-15 {
+  padding-left: var(--pf-padding-15);
+}
+
+.pl-16 {
+  padding-left: var(--pf-padding-16);
+}
+
+.pr-0 {
+  padding-right: var(--pf-padding-0);
+}
+
+.pr-1 {
+  padding-right: var(--pf-padding-1);
+}
+
+.pr-2 {
+  padding-right: var(--pf-padding-2);
+}
+
+.pr-3 {
+  padding-right: var(--pf-padding-3);
+}
+
+.pr-4 {
+  padding-right: var(--pf-padding-4);
+}
+
+.pr-5 {
+  padding-right: var(--pf-padding-5);
+}
+
+.pr-6 {
+  padding-right: var(--pf-padding-6);
+}
+
+.pr-7 {
+  padding-right: var(--pf-padding-7);
+}
+
+.pr-8 {
+  padding-right: var(--pf-padding-8);
+}
+
+.pr-9 {
+  padding-right: var(--pf-padding-9);
+}
+
+.pr-10 {
+  padding-right: var(--pf-padding-10);
+}
+
+.pr-11 {
+  padding-right: var(--pf-padding-11);
+}
+
+.pr-12 {
+  padding-right: var(--pf-padding-12);
+}
+
+.pr-13 {
+  padding-right: var(--pf-padding-13);
+}
+
+.pr-14 {
+  padding-right: var(--pf-padding-14);
+}
+
+.pr-15 {
+  padding-right: var(--pf-padding-15);
+}
+
+.pr-16 {
+  padding-right: var(--pf-padding-16);
+}
+
+.pb-0 {
+  padding-bottom: var(--pf-padding-0);
+}
+
+.pb-1 {
+  padding-bottom: var(--pf-padding-1);
+}
+
+.pb-2 {
+  padding-bottom: var(--pf-padding-2);
+}
+
+.pb-3 {
+  padding-bottom: var(--pf-padding-3);
+}
+
+.pb-4 {
+  padding-bottom: var(--pf-padding-4);
+}
+
+.pb-5 {
+  padding-bottom: var(--pf-padding-5);
+}
+
+.pb-6 {
+  padding-bottom: var(--pf-padding-6);
+}
+
+.pb-7 {
+  padding-bottom: var(--pf-padding-7);
+}
+
+.pb-8 {
+  padding-bottom: var(--pf-padding-8);
+}
+
+.pb-9 {
+  padding-bottom: var(--pf-padding-9);
+}
+
+.pb-10 {
+  padding-bottom: var(--pf-padding-10);
+}
+
+.pb-11 {
+  padding-bottom: var(--pf-padding-11);
+}
+
+.pb-12 {
+  padding-bottom: var(--pf-padding-12);
+}
+
+.pb-13 {
+  padding-bottom: var(--pf-padding-13);
+}
+
+.pb-14 {
+  padding-bottom: var(--pf-padding-14);
+}
+
+.pb-15 {
+  padding-bottom: var(--pf-padding-15);
+}
+
+.pb-16 {
+  padding-bottom: var(--pf-padding-16);
+}
+
+.pt-0 {
+  padding-top: var(--pf-padding-0);
+}
+
+.pt-1 {
+  padding-top: var(--pf-padding-1);
+}
+
+.pt-2 {
+  padding-top: var(--pf-padding-2);
+}
+
+.pt-3 {
+  padding-top: var(--pf-padding-3);
+}
+
+.pt-4 {
+  padding-top: var(--pf-padding-4);
+}
+
+.pt-5 {
+  padding-top: var(--pf-padding-5);
+}
+
+.pt-6 {
+  padding-top: var(--pf-padding-6);
+}
+
+.pt-7 {
+  padding-top: var(--pf-padding-7);
+}
+
+.pt-8 {
+  padding-top: var(--pf-padding-8);
+}
+
+.pt-9 {
+  padding-top: var(--pf-padding-9);
+}
+
+.pt-10 {
+  padding-top: var(--pf-padding-10);
+}
+
+.pt-11 {
+  padding-top: var(--pf-padding-11);
+}
+
+.pt-12 {
+  padding-top: var(--pf-padding-12);
+}
+
+.pt-13 {
+  padding-top: var(--pf-padding-13);
+}
+
+.pt-14 {
+  padding-top: var(--pf-padding-14);
+}
+
+.pt-15 {
+  padding-top: var(--pf-padding-15);
+}
+
+.pt-16 {
+  padding-top: var(--pf-padding-16);
+}
+
+.ma-auto {
+  margin: var(--pf-margin-auto);
+}
+
+.ma-0 {
+  margin: var(--pf-margin-0);
+}
+
+.ma-1 {
+  margin: var(--pf-margin-1);
+}
+
+.ma-2 {
+  margin: var(--pf-margin-2);
+}
+
+.ma-3 {
+  margin: var(--pf-margin-3);
+}
+
+.ma-4 {
+  margin: var(--pf-margin-4);
+}
+
+.ma-5 {
+  margin: var(--pf-margin-5);
+}
+
+.ma-6 {
+  margin: var(--pf-margin-6);
+}
+
+.ma-7 {
+  margin: var(--pf-margin-7);
+}
+
+.ma-8 {
+  margin: var(--pf-margin-8);
+}
+
+.ma-9 {
+  margin: var(--pf-margin-9);
+}
+
+.ma-10 {
+  margin: var(--pf-margin-10);
+}
+
+.ma-11 {
+  margin: var(--pf-margin-11);
+}
+
+.ma-12 {
+  margin: var(--pf-margin-12);
+}
+
+.ma-13 {
+  margin: var(--pf-margin-13);
+}
+
+.ma-14 {
+  margin: var(--pf-margin-14);
+}
+
+.ma-15 {
+  margin: var(--pf-margin-15);
+}
+
+.ma-16 {
+  margin: var(--pf-margin-16);
+}
+
+.ma-n1 {
+  margin: var(--pf-negative-margin-1);
+}
+
+.ma-n2 {
+  margin: var(--pf-negative-margin-2);
+}
+
+.ma-n3 {
+  margin: var(--pf-negative-margin-3);
+}
+
+.ma-n4 {
+  margin: var(--pf-negative-margin-4);
+}
+
+.ma-n5 {
+  margin: var(--pf-negative-margin-5);
+}
+
+.ma-n6 {
+  margin: var(--pf-negative-margin-6);
+}
+
+.ma-n7 {
+  margin: var(--pf-negative-margin-7);
+}
+
+.ma-n8 {
+  margin: var(--pf-negative-margin-8);
+}
+
+.ma-n9 {
+  margin: var(--pf-negative-margin-9);
+}
+
+.ma-n10 {
+  margin: var(--pf-negative-margin-10);
+}
+
+.ma-n11 {
+  margin: var(--pf-negative-margin-11);
+}
+
+.ma-n12 {
+  margin: var(--pf-negative-margin-12);
+}
+
+.ma-n13 {
+  margin: var(--pf-negative-margin-13);
+}
+
+.ma-n14 {
+  margin: var(--pf-negative-margin-14);
+}
+
+.ma-n15 {
+  margin: var(--pf-negative-margin-15);
+}
+
+.ma-n16 {
+  margin: var(--pf-negative-margin-16);
+}
+
+.mx-auto {
+  margin-left: var(--pf-margin-auto);
+  margin-right: var(--pf-margin-auto);
+}
+
+.mx-0 {
+  margin-left: var(--pf-margin-0);
+  margin-right: var(--pf-margin-0);
+}
+
+.mx-1 {
+  margin-left: var(--pf-margin-1);
+  margin-right: var(--pf-margin-1);
+}
+
+.mx-2 {
+  margin-left: var(--pf-margin-2);
+  margin-right: var(--pf-margin-2);
+}
+
+.mx-3 {
+  margin-left: var(--pf-margin-3);
+  margin-right: var(--pf-margin-3);
+}
+
+.mx-4 {
+  margin-left: var(--pf-margin-4);
+  margin-right: var(--pf-margin-4);
+}
+
+.mx-5 {
+  margin-left: var(--pf-margin-5);
+  margin-right: var(--pf-margin-5);
+}
+
+.mx-6 {
+  margin-left: var(--pf-margin-6);
+  margin-right: var(--pf-margin-6);
+}
+
+.mx-7 {
+  margin-left: var(--pf-margin-7);
+  margin-right: var(--pf-margin-7);
+}
+
+.mx-8 {
+  margin-left: var(--pf-margin-8);
+  margin-right: var(--pf-margin-8);
+}
+
+.mx-9 {
+  margin-left: var(--pf-margin-9);
+  margin-right: var(--pf-margin-9);
+}
+
+.mx-10 {
+  margin-left: var(--pf-margin-10);
+  margin-right: var(--pf-margin-10);
+}
+
+.mx-11 {
+  margin-left: var(--pf-margin-11);
+  margin-right: var(--pf-margin-11);
+}
+
+.mx-12 {
+  margin-left: var(--pf-margin-12);
+  margin-right: var(--pf-margin-12);
+}
+
+.mx-13 {
+  margin-left: var(--pf-margin-13);
+  margin-right: var(--pf-margin-13);
+}
+
+.mx-14 {
+  margin-left: var(--pf-margin-14);
+  margin-right: var(--pf-margin-14);
+}
+
+.mx-15 {
+  margin-left: var(--pf-margin-15);
+  margin-right: var(--pf-margin-15);
+}
+
+.mx-16 {
+  margin-left: var(--pf-margin-16);
+  margin-right: var(--pf-margin-16);
+}
+
+.mx-n1 {
+  margin-left: var(--pf-negative-margin-1);
+  margin-right: var(--pf-negative-margin-1);
+}
+
+.mx-n2 {
+  margin-left: var(--pf-negative-margin-2);
+  margin-right: var(--pf-negative-margin-2);
+}
+
+.mx-n3 {
+  margin-left: var(--pf-negative-margin-3);
+  margin-right: var(--pf-negative-margin-3);
+}
+
+.mx-n4 {
+  margin-left: var(--pf-negative-margin-4);
+  margin-right: var(--pf-negative-margin-4);
+}
+
+.mx-n5 {
+  margin-left: var(--pf-negative-margin-5);
+  margin-right: var(--pf-negative-margin-5);
+}
+
+.mx-n6 {
+  margin-left: var(--pf-negative-margin-6);
+  margin-right: var(--pf-negative-margin-6);
+}
+
+.mx-n7 {
+  margin-left: var(--pf-negative-margin-7);
+  margin-right: var(--pf-negative-margin-7);
+}
+
+.mx-n8 {
+  margin-left: var(--pf-negative-margin-8);
+  margin-right: var(--pf-negative-margin-8);
+}
+
+.mx-n9 {
+  margin-left: var(--pf-negative-margin-9);
+  margin-right: var(--pf-negative-margin-9);
+}
+
+.mx-n10 {
+  margin-left: var(--pf-negative-margin-10);
+  margin-right: var(--pf-negative-margin-10);
+}
+
+.mx-n11 {
+  margin-left: var(--pf-negative-margin-11);
+  margin-right: var(--pf-negative-margin-11);
+}
+
+.mx-n12 {
+  margin-left: var(--pf-negative-margin-12);
+  margin-right: var(--pf-negative-margin-12);
+}
+
+.mx-n13 {
+  margin-left: var(--pf-negative-margin-13);
+  margin-right: var(--pf-negative-margin-13);
+}
+
+.mx-n14 {
+  margin-left: var(--pf-negative-margin-14);
+  margin-right: var(--pf-negative-margin-14);
+}
+
+.mx-n15 {
+  margin-left: var(--pf-negative-margin-15);
+  margin-right: var(--pf-negative-margin-15);
+}
+
+.mx-n16 {
+  margin-left: var(--pf-negative-margin-16);
+  margin-right: var(--pf-negative-margin-16);
+}
+
+.my-auto {
+  margin-top: var(--pf-margin-auto);
+  margin-bottom: var(--pf-margin-auto);
+}
+
+.my-0 {
+  margin-top: var(--pf-margin-0);
+  margin-bottom: var(--pf-margin-0);
+}
+
+.my-1 {
+  margin-top: var(--pf-margin-1);
+  margin-bottom: var(--pf-margin-1);
+}
+
+.my-2 {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+}
+
+.my-3 {
+  margin-top: var(--pf-margin-3);
+  margin-bottom: var(--pf-margin-3);
+}
+
+.my-4 {
+  margin-top: var(--pf-margin-4);
+  margin-bottom: var(--pf-margin-4);
+}
+
+.my-5 {
+  margin-top: var(--pf-margin-5);
+  margin-bottom: var(--pf-margin-5);
+}
+
+.my-6 {
+  margin-top: var(--pf-margin-6);
+  margin-bottom: var(--pf-margin-6);
+}
+
+.my-7 {
+  margin-top: var(--pf-margin-7);
+  margin-bottom: var(--pf-margin-7);
+}
+
+.my-8 {
+  margin-top: var(--pf-margin-8);
+  margin-bottom: var(--pf-margin-8);
+}
+
+.my-9 {
+  margin-top: var(--pf-margin-9);
+  margin-bottom: var(--pf-margin-9);
+}
+
+.my-10 {
+  margin-top: var(--pf-margin-10);
+  margin-bottom: var(--pf-margin-10);
+}
+
+.my-11 {
+  margin-top: var(--pf-margin-11);
+  margin-bottom: var(--pf-margin-11);
+}
+
+.my-12 {
+  margin-top: var(--pf-margin-12);
+  margin-bottom: var(--pf-margin-12);
+}
+
+.my-13 {
+  margin-top: var(--pf-margin-13);
+  margin-bottom: var(--pf-margin-13);
+}
+
+.my-14 {
+  margin-top: var(--pf-margin-14);
+  margin-bottom: var(--pf-margin-14);
+}
+
+.my-15 {
+  margin-top: var(--pf-margin-15);
+  margin-bottom: var(--pf-margin-15);
+}
+
+.my-16 {
+  margin-top: var(--pf-margin-16);
+  margin-bottom: var(--pf-margin-16);
+}
+
+.my-n1 {
+  margin-top: var(--pf-negative-margin-1);
+  margin-bottom: var(--pf-negative-margin-1);
+}
+
+.my-n2 {
+  margin-top: var(--pf-negative-margin-2);
+  margin-bottom: var(--pf-negative-margin-2);
+}
+
+.my-n3 {
+  margin-top: var(--pf-negative-margin-3);
+  margin-bottom: var(--pf-negative-margin-3);
+}
+
+.my-n4 {
+  margin-top: var(--pf-negative-margin-4);
+  margin-bottom: var(--pf-negative-margin-4);
+}
+
+.my-n5 {
+  margin-top: var(--pf-negative-margin-5);
+  margin-bottom: var(--pf-negative-margin-5);
+}
+
+.my-n6 {
+  margin-top: var(--pf-negative-margin-6);
+  margin-bottom: var(--pf-negative-margin-6);
+}
+
+.my-n7 {
+  margin-top: var(--pf-negative-margin-7);
+  margin-bottom: var(--pf-negative-margin-7);
+}
+
+.my-n8 {
+  margin-top: var(--pf-negative-margin-8);
+  margin-bottom: var(--pf-negative-margin-8);
+}
+
+.my-n9 {
+  margin-top: var(--pf-negative-margin-9);
+  margin-bottom: var(--pf-negative-margin-9);
+}
+
+.my-n10 {
+  margin-top: var(--pf-negative-margin-10);
+  margin-bottom: var(--pf-negative-margin-10);
+}
+
+.my-n11 {
+  margin-top: var(--pf-negative-margin-11);
+  margin-bottom: var(--pf-negative-margin-11);
+}
+
+.my-n12 {
+  margin-top: var(--pf-negative-margin-12);
+  margin-bottom: var(--pf-negative-margin-12);
+}
+
+.my-n13 {
+  margin-top: var(--pf-negative-margin-13);
+  margin-bottom: var(--pf-negative-margin-13);
+}
+
+.my-n14 {
+  margin-top: var(--pf-negative-margin-14);
+  margin-bottom: var(--pf-negative-margin-14);
+}
+
+.my-n15 {
+  margin-top: var(--pf-negative-margin-15);
+  margin-bottom: var(--pf-negative-margin-15);
+}
+
+.my-n16 {
+  margin-top: var(--pf-negative-margin-16);
+  margin-bottom: var(--pf-negative-margin-16);
+}
+
+.ml-auto {
+  margin-left: var(--pf-margin-auto);
+}
+
+.ml-0 {
+  margin-left: var(--pf-margin-0);
+}
+
+.ml-1 {
+  margin-left: var(--pf-margin-1);
+}
+
+.ml-2 {
+  margin-left: var(--pf-margin-2);
+}
+
+.ml-3 {
+  margin-left: var(--pf-margin-3);
+}
+
+.ml-4 {
+  margin-left: var(--pf-margin-4);
+}
+
+.ml-5 {
+  margin-left: var(--pf-margin-5);
+}
+
+.ml-6 {
+  margin-left: var(--pf-margin-6);
+}
+
+.ml-7 {
+  margin-left: var(--pf-margin-7);
+}
+
+.ml-8 {
+  margin-left: var(--pf-margin-8);
+}
+
+.ml-9 {
+  margin-left: var(--pf-margin-9);
+}
+
+.ml-10 {
+  margin-left: var(--pf-margin-10);
+}
+
+.ml-11 {
+  margin-left: var(--pf-margin-11);
+}
+
+.ml-12 {
+  margin-left: var(--pf-margin-12);
+}
+
+.ml-13 {
+  margin-left: var(--pf-margin-13);
+}
+
+.ml-14 {
+  margin-left: var(--pf-margin-14);
+}
+
+.ml-15 {
+  margin-left: var(--pf-margin-15);
+}
+
+.ml-16 {
+  margin-left: var(--pf-margin-16);
+}
+
+.ml-n1 {
+  margin-left: var(--pf-negative-margin-1);
+}
+
+.ml-n2 {
+  margin-left: var(--pf-negative-margin-2);
+}
+
+.ml-n3 {
+  margin-left: var(--pf-negative-margin-3);
+}
+
+.ml-n4 {
+  margin-left: var(--pf-negative-margin-4);
+}
+
+.ml-n5 {
+  margin-left: var(--pf-negative-margin-5);
+}
+
+.ml-n6 {
+  margin-left: var(--pf-negative-margin-6);
+}
+
+.ml-n7 {
+  margin-left: var(--pf-negative-margin-7);
+}
+
+.ml-n8 {
+  margin-left: var(--pf-negative-margin-8);
+}
+
+.ml-n9 {
+  margin-left: var(--pf-negative-margin-9);
+}
+
+.ml-n10 {
+  margin-left: var(--pf-negative-margin-10);
+}
+
+.ml-n11 {
+  margin-left: var(--pf-negative-margin-11);
+}
+
+.ml-n12 {
+  margin-left: var(--pf-negative-margin-12);
+}
+
+.ml-n13 {
+  margin-left: var(--pf-negative-margin-13);
+}
+
+.ml-n14 {
+  margin-left: var(--pf-negative-margin-14);
+}
+
+.ml-n15 {
+  margin-left: var(--pf-negative-margin-15);
+}
+
+.ml-n16 {
+  margin-left: var(--pf-negative-margin-16);
+}
+
+.mr-auto {
+  margin-right: var(--pf-margin-auto);
+}
+
+.mr-0 {
+  margin-right: var(--pf-margin-0);
+}
+
+.mr-1 {
+  margin-right: var(--pf-margin-1);
+}
+
+.mr-2 {
+  margin-right: var(--pf-margin-2);
+}
+
+.mr-3 {
+  margin-right: var(--pf-margin-3);
+}
+
+.mr-4 {
+  margin-right: var(--pf-margin-4);
+}
+
+.mr-5 {
+  margin-right: var(--pf-margin-5);
+}
+
+.mr-6 {
+  margin-right: var(--pf-margin-6);
+}
+
+.mr-7 {
+  margin-right: var(--pf-margin-7);
+}
+
+.mr-8 {
+  margin-right: var(--pf-margin-8);
+}
+
+.mr-9 {
+  margin-right: var(--pf-margin-9);
+}
+
+.mr-10 {
+  margin-right: var(--pf-margin-10);
+}
+
+.mr-11 {
+  margin-right: var(--pf-margin-11);
+}
+
+.mr-12 {
+  margin-right: var(--pf-margin-12);
+}
+
+.mr-13 {
+  margin-right: var(--pf-margin-13);
+}
+
+.mr-14 {
+  margin-right: var(--pf-margin-14);
+}
+
+.mr-15 {
+  margin-right: var(--pf-margin-15);
+}
+
+.mr-16 {
+  margin-right: var(--pf-margin-16);
+}
+
+.mr-n1 {
+  margin-right: var(--pf-negative-margin-1);
+}
+
+.mr-n2 {
+  margin-right: var(--pf-negative-margin-2);
+}
+
+.mr-n3 {
+  margin-right: var(--pf-negative-margin-3);
+}
+
+.mr-n4 {
+  margin-right: var(--pf-negative-margin-4);
+}
+
+.mr-n5 {
+  margin-right: var(--pf-negative-margin-5);
+}
+
+.mr-n6 {
+  margin-right: var(--pf-negative-margin-6);
+}
+
+.mr-n7 {
+  margin-right: var(--pf-negative-margin-7);
+}
+
+.mr-n8 {
+  margin-right: var(--pf-negative-margin-8);
+}
+
+.mr-n9 {
+  margin-right: var(--pf-negative-margin-9);
+}
+
+.mr-n10 {
+  margin-right: var(--pf-negative-margin-10);
+}
+
+.mr-n11 {
+  margin-right: var(--pf-negative-margin-11);
+}
+
+.mr-n12 {
+  margin-right: var(--pf-negative-margin-12);
+}
+
+.mr-n13 {
+  margin-right: var(--pf-negative-margin-13);
+}
+
+.mr-n14 {
+  margin-right: var(--pf-negative-margin-14);
+}
+
+.mr-n15 {
+  margin-right: var(--pf-negative-margin-15);
+}
+
+.mr-n16 {
+  margin-right: var(--pf-negative-margin-16);
+}
+
+.mb-auto {
+  margin-bottom: var(--pf-margin-auto);
+}
+
+.mb-0 {
+  margin-bottom: var(--pf-margin-0);
+}
+
+.mb-1 {
+  margin-bottom: var(--pf-margin-1);
+}
+
+.mb-2 {
+  margin-bottom: var(--pf-margin-2);
+}
+
+.mb-3 {
+  margin-bottom: var(--pf-margin-3);
+}
+
+.mb-4 {
+  margin-bottom: var(--pf-margin-4);
+}
+
+.mb-5 {
+  margin-bottom: var(--pf-margin-5);
+}
+
+.mb-6 {
+  margin-bottom: var(--pf-margin-6);
+}
+
+.mb-7 {
+  margin-bottom: var(--pf-margin-7);
+}
+
+.mb-8 {
+  margin-bottom: var(--pf-margin-8);
+}
+
+.mb-9 {
+  margin-bottom: var(--pf-margin-9);
+}
+
+.mb-10 {
+  margin-bottom: var(--pf-margin-10);
+}
+
+.mb-11 {
+  margin-bottom: var(--pf-margin-11);
+}
+
+.mb-12 {
+  margin-bottom: var(--pf-margin-12);
+}
+
+.mb-13 {
+  margin-bottom: var(--pf-margin-13);
+}
+
+.mb-14 {
+  margin-bottom: var(--pf-margin-14);
+}
+
+.mb-15 {
+  margin-bottom: var(--pf-margin-15);
+}
+
+.mb-16 {
+  margin-bottom: var(--pf-margin-16);
+}
+
+.mb-n1 {
+  margin-bottom: var(--pf-negative-margin-1);
+}
+
+.mb-n2 {
+  margin-bottom: var(--pf-negative-margin-2);
+}
+
+.mb-n3 {
+  margin-bottom: var(--pf-negative-margin-3);
+}
+
+.mb-n4 {
+  margin-bottom: var(--pf-negative-margin-4);
+}
+
+.mb-n5 {
+  margin-bottom: var(--pf-negative-margin-5);
+}
+
+.mb-n6 {
+  margin-bottom: var(--pf-negative-margin-6);
+}
+
+.mb-n7 {
+  margin-bottom: var(--pf-negative-margin-7);
+}
+
+.mb-n8 {
+  margin-bottom: var(--pf-negative-margin-8);
+}
+
+.mb-n9 {
+  margin-bottom: var(--pf-negative-margin-9);
+}
+
+.mb-n10 {
+  margin-bottom: var(--pf-negative-margin-10);
+}
+
+.mb-n11 {
+  margin-bottom: var(--pf-negative-margin-11);
+}
+
+.mb-n12 {
+  margin-bottom: var(--pf-negative-margin-12);
+}
+
+.mb-n13 {
+  margin-bottom: var(--pf-negative-margin-13);
+}
+
+.mb-n14 {
+  margin-bottom: var(--pf-negative-margin-14);
+}
+
+.mb-n15 {
+  margin-bottom: var(--pf-negative-margin-15);
+}
+
+.mb-n16 {
+  margin-bottom: var(--pf-negative-margin-16);
+}
+
+.mt-auto {
+  margin-top: var(--pf-margin-auto);
+}
+
+.mt-0 {
+  margin-top: var(--pf-margin-0);
+}
+
+.mt-1 {
+  margin-top: var(--pf-margin-1);
+}
+
+.mt-2 {
+  margin-top: var(--pf-margin-2);
+}
+
+.mt-3 {
+  margin-top: var(--pf-margin-3);
+}
+
+.mt-4 {
+  margin-top: var(--pf-margin-4);
+}
+
+.mt-5 {
+  margin-top: var(--pf-margin-5);
+}
+
+.mt-6 {
+  margin-top: var(--pf-margin-6);
+}
+
+.mt-7 {
+  margin-top: var(--pf-margin-7);
+}
+
+.mt-8 {
+  margin-top: var(--pf-margin-8);
+}
+
+.mt-9 {
+  margin-top: var(--pf-margin-9);
+}
+
+.mt-10 {
+  margin-top: var(--pf-margin-10);
+}
+
+.mt-11 {
+  margin-top: var(--pf-margin-11);
+}
+
+.mt-12 {
+  margin-top: var(--pf-margin-12);
+}
+
+.mt-13 {
+  margin-top: var(--pf-margin-13);
+}
+
+.mt-14 {
+  margin-top: var(--pf-margin-14);
+}
+
+.mt-15 {
+  margin-top: var(--pf-margin-15);
+}
+
+.mt-16 {
+  margin-top: var(--pf-margin-16);
+}
+
+.mt-n1 {
+  margin-top: var(--pf-negative-margin-1);
+}
+
+.mt-n2 {
+  margin-top: var(--pf-negative-margin-2);
+}
+
+.mt-n3 {
+  margin-top: var(--pf-negative-margin-3);
+}
+
+.mt-n4 {
+  margin-top: var(--pf-negative-margin-4);
+}
+
+.mt-n5 {
+  margin-top: var(--pf-negative-margin-5);
+}
+
+.mt-n6 {
+  margin-top: var(--pf-negative-margin-6);
+}
+
+.mt-n7 {
+  margin-top: var(--pf-negative-margin-7);
+}
+
+.mt-n8 {
+  margin-top: var(--pf-negative-margin-8);
+}
+
+.mt-n9 {
+  margin-top: var(--pf-negative-margin-9);
+}
+
+.mt-n10 {
+  margin-top: var(--pf-negative-margin-10);
+}
+
+.mt-n11 {
+  margin-top: var(--pf-negative-margin-11);
+}
+
+.mt-n12 {
+  margin-top: var(--pf-negative-margin-12);
+}
+
+.mt-n13 {
+  margin-top: var(--pf-negative-margin-13);
+}
+
+.mt-n14 {
+  margin-top: var(--pf-negative-margin-14);
+}
+
+.mt-n15 {
+  margin-top: var(--pf-negative-margin-15);
+}
+
+.mt-n16 {
+  margin-top: var(--pf-negative-margin-16);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+.pf__drawer__wrapper {
+  color: #444444;
+  background-color: white;
+  box-sizing: border-box;
+  height: 100vh;
+  padding: 30px 4px 10px 4px;
+  transition: width 0.2s ease-in-out;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  width: 100%;
+}
+.pf__drawer__wrapper .pf__drawer__header__logo-text {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+}
+.pf__drawer__wrapper a:link {
+  color: #444444;
+}
+.pf__drawer__wrapper a {
+  color: #444444;
+  text-decoration: none;
+}
+.pf__drawer__wrapper .pf__drawer__header {
+  margin-bottom: 30px;
+  color: black;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  white-space: nowrap;
+}
+.pf__drawer__wrapper .pf__drawer__header .pf__drawer__header__text {
+  overflow: hidden;
+  transition: opacity 0.2s ease-in-out;
+}
+.pf__drawer__wrapper .pf__drawer__header span {
+  display: flex;
+  align-items: center;
+}
+.pf__drawer__wrapper .pf__drawer__header p {
+  font-size: 20px;
+  margin: 0 0 0 12px;
+}
+.pf__drawer__wrapper .pf__drawer__content {
+  height: calc(100% - 42px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 10px;
+}