/* Bundle Hash: 65581695 */
:root { --gravity-bundle-hash: "65581695"; }

/**
 * Gravity UI Bundle for Production - Auto-generated
 * Generated: 2026-01-29T20:39:02.371Z
 * Source: /home/runner/_work/ModularTesting/ModularTesting/docs/specifications/UI/gravity-ui
 *
 * DO NOT EDIT THIS FILE DIRECTLY
 * Edit source files in docs/specifications/UI/gravity-ui/
 */


/* ========================================
 * foundation/mixins.css
 * ======================================== */

/*
 * Gravity UI 2.0 CSS Mixins & Utility Functions
 * 
 * Reusable mixins and functions for common patterns
 * Uses CSS custom properties for dynamic behavior
 */

/* ================================
 * RESPONSIVE BREAKPOINT MIXINS
 * ================================ */

/* 
 * Responsive breakpoint system based on Page 9 specifications
 * Phone: 351-591px, Tablet: 727-983px, Desktop: 1079px+
 */

/* Phone only styles */
@media (max-width: 590px) {
  .phone-only {
    display: block;
  }
  
  .hide-on-phone {
    display: none;
  }
}

/* Tablet and up */
@media (min-width: 591px) {
  .phone-only {
    display: none;
  }
  
  .tablet-up {
    display: block;
  }
}

/* Tablet only styles */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet-only {
    display: block;
  }
  
  .hide-on-tablet {
    display: none;
  }
}

/* Desktop and up */
@media (min-width: 1079px) {
  .tablet-only {
    display: none;
  }
  
  .desktop-up {
    display: block;
  }
  
  .hide-on-desktop {
    display: none;
  }
}

/* ================================
 * BUTTON MIXINS
 * ================================ */

/* Base button styles - used by all button variants */
.gravity-button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--gravity-border-width-thin) solid transparent;
  border-radius: var(--gravity-border-radius-sm);
  font-family: var(--gravity-font-family-primary);
  font-weight: var(--gravity-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  min-height: var(--gravity-button-height-md);
  min-width: var(--gravity-button-min-width-md);
  padding: var(--gravity-button-padding-y) var(--gravity-button-padding-x);
  font-size: var(--gravity-font-size-body);
  line-height: 1;
}

/* Button hover effect - shadow only (no position movement) */
.gravity-button-hover-effect {
  box-shadow: var(--gravity-shadow-md);
}

/* Button active/pressed state */
.gravity-button-pressed {
  box-shadow: var(--gravity-shadow-sm);
}

/* Button disabled state */
.gravity-button-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small button variant */
.gravity-button-small {
  min-height: var(--gravity-button-height-sm);
  min-width: var(--gravity-button-min-width-sm);
  padding: calc(var(--gravity-button-padding-y) * 0.75) calc(var(--gravity-button-padding-x) * 0.75);
  font-size: var(--gravity-font-size-small);
}

/* Large button variant */
.gravity-button-large {
  min-height: var(--gravity-button-height-lg);
  padding: calc(var(--gravity-button-padding-y) * 1.25) calc(var(--gravity-button-padding-x) * 1.25);
  font-size: var(--gravity-font-size-body-large);
}

/* ================================
 * FORM INPUT MIXINS
 * ================================ */

/* Base form input styles */
.gravity-input-base {
  display: block;
  width: 100%;
  height: var(--gravity-form-element-height);
  padding: var(--gravity-form-element-padding-y) var(--gravity-form-element-padding-x);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body);
  line-height: var(--gravity-line-height-normal);
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-primary);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-sm);
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
}

/* Input focus state */
.gravity-input-focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px rgba(15, 111, 138, 0.1);
}

/* Input error state */
.gravity-input-error {
  border-color: var(--gravity-border-error);
  box-shadow: 0 0 0 2px rgba(197, 80, 75, 0.1);
}

/* Input success state */
.gravity-input-success {
  border-color: var(--gravity-border-success);
  box-shadow: 0 0 0 2px rgba(0, 166, 81, 0.1);
}

/* Input disabled state */
.gravity-input-disabled {
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ================================
 * CARD MIXINS
 * ================================ */

/* Base card styles */
.gravity-card-base {
  background-color: var(--gravity-bg-primary);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
  border-radius: var(--gravity-card-border-radius);
  box-shadow: var(--gravity-card-shadow);
  overflow: hidden;
  transition: box-shadow var(--gravity-transition-normal);
}

/* Card hover effect - shadow only (no position movement) */
.gravity-card-hover {
  box-shadow: var(--gravity-card-shadow-hover);
}

/* Card header styles */
.gravity-card-header {
  padding: var(--gravity-card-padding);
  border-bottom: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
  background-color: var(--gravity-bg-secondary);
}

/* Card body styles */
.gravity-card-body {
  padding: var(--gravity-card-padding);
}

/* Card footer styles */
.gravity-card-footer {
  padding: var(--gravity-card-padding);
  border-top: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
  background-color: var(--gravity-bg-secondary);
}

/* ================================
 * ICON MIXINS
 * ================================ */

/* Base icon styles */
.gravity-icon-base {
  display: inline-block;
  width: var(--gravity-icon-size-md);
  height: var(--gravity-icon-size-md);
  fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Small icon variant */
.gravity-icon-small {
  width: var(--gravity-icon-size-sm);
  height: var(--gravity-icon-size-sm);
}

/* Icon interactive states */
.gravity-icon-interactive {
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
  border-radius: 50%;
  padding: var(--gravity-space-1);
}

/* Icon hover state */
.gravity-icon-hover {
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-icon-color-hover);
}

/* Icon active state */
.gravity-icon-active {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

/* Icon focus state */
.gravity-icon-focus {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* ================================
 * LAYOUT MIXINS
 * ================================ */

/* Flexbox center alignment */
.gravity-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flexbox space between */
.gravity-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Flexbox column layout */
.gravity-flex-column {
  display: flex;
  flex-direction: column;
}

/* Grid center alignment */
.gravity-grid-center {
  display: grid;
  place-items: center;
}

/* Absolute center positioning */
.gravity-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full width and height */
.gravity-full-size {
  width: 100%;
  height: 100%;
}

/* Aspect ratio containers */
.gravity-aspect-square {
  aspect-ratio: 1;
}

.gravity-aspect-video {
  aspect-ratio: 16 / 9;
}

.gravity-aspect-photo {
  aspect-ratio: 4 / 3;
}

/* ================================
 * TEXT MIXINS
 * ================================ */

/* Text truncation */
.gravity-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line text truncation */
.gravity-text-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Text selection styling */
.gravity-text-selection {
  user-select: all;
}

.gravity-text-no-selection {
  user-select: none;
}

/* ================================
 * ANIMATION MIXINS
 * ================================ */

/* Fade in animation */
.gravity-fade-in {
  animation: gravity-fadeIn var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

@keyframes gravity-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide up animation */
.gravity-slide-up {
  animation: gravity-slideUp var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

@keyframes gravity-slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in animation */
.gravity-scale-in {
  animation: gravity-scaleIn var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

@keyframes gravity-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse animation */
.gravity-pulse {
  animation: gravity-pulse 2s infinite;
}

@keyframes gravity-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Loading spinner */
.gravity-spinner {
  animation: gravity-spin 1s linear infinite;
}

@keyframes gravity-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ================================
 * FOCUS MANAGEMENT MIXINS
 * ================================ */

/* Focus trap for modals and dialogs */
.gravity-focus-trap {
  position: relative;
}

.gravity-focus-trap::before,
.gravity-focus-trap::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Keyboard navigation indicators */
.gravity-keyboard-nav {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* ================================
 * ACCESSIBILITY MIXINS
 * ================================ */

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .gravity-high-contrast {
    border: 2px solid currentColor;
  }
  
  .gravity-high-contrast-bg {
    background-color: var(--gravity-bg-primary);
    color: var(--gravity-text-primary);
  }
}

/* Reduced motion alternatives */
@media (prefers-reduced-motion: reduce) {
  .gravity-motion-reduce {
    animation: none;
    transition: none;
  }
}

/* ================================
 * UTILITY COMBINATIONS
 * ================================ */

/* Common component patterns */
.gravity-interactive-element {
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
  border-radius: var(--gravity-border-radius-sm);
}

.gravity-interactive-element:hover {
  background-color: var(--gravity-bg-muted);
}

.gravity-interactive-element:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Status indicator pattern */
.gravity-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-2);
  padding: var(--gravity-space-1) var(--gravity-space-3);
  border-radius: var(--gravity-border-radius-full);
  font-size: var(--gravity-font-size-small);
  font-weight: var(--gravity-font-weight-semibold);
}

/* Loading state pattern */
.gravity-loading-state {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.gravity-loading-state::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--gravity-border-primary);
  border-top-color: var(--gravity-brand-primary);
  border-radius: 50%;
  animation: gravity-spin 1s linear infinite;
}

/* ========================================
 * foundation/pearson-tokens.css
 * ======================================== */

/**
 * Do not edit directly
 * Version: v3.3.1
 * Generated on Thu, 11 Dec 2025 20:47:28 GMT
 */
:root {
  --master-tokens-version: 'v3.3.1';
  --font--letter-spacing-negative-sm: -0.4px;
  --font--line-height-2xl: 32px;
  --font--line-height-2xs: 16px;
  --font--line-height-3xl: 36px;
  --font--line-height-3xs: 14px;
  --font--line-height-4xl: 40px;
  --font--line-height-5xl: 48px;
  --font--line-height-6xl: 56px;
  --font--line-height-7xl: 64px;
  --font--line-height-8xl: 72px;
  --font--line-height-base: 24px;
  --font--line-height-lg: 26px;
  --font--line-height-sm: 22px;
  --font--line-height-xl: 28px;
  --font--line-height-xs: 20px;
  --font--size-2xl: 24px;
  --font--size-3xl: 28px;
  --font--size-4xl: 32px;
  --font--size-5xl: 40px;
  --font--size-6xl: 48px;
  --font--size-7xl: 56px;
  --font--size-8xl: 64px;
  --font--size-base: 16px;
  --font--size-lg: 18px;
  --font--size-sm: 14px;
  --font--size-xl: 20px;
  --font--size-xs: 12px;
  --font--weight-medium: 500;
  --font--weight-regular: 400;
  --font--weight-semibold: 600;
  --space--responsive-unit: 4px;
  --space--responsive-xr-half: 2px;
  --space--responsive-xr0: 0px;
  --space--responsive-xr1-half: 6px;
  --space--responsive-xr10: 40px;
  --space--responsive-xr11: 44px;
  --space--responsive-xr12: 48px;
  --space--responsive-xr13: 52px;
  --space--responsive-xr14: 56px;
  --space--responsive-xr15: 60px;
  --space--responsive-xr16: 64px;
  --space--responsive-xr17: 68px;
  --space--responsive-xr18: 72px;
  --space--responsive-xr19: 76px;
  --space--responsive-xr1: 4px;
  --space--responsive-xr20: 80px;
  --space--responsive-xr21: 84px;
  --space--responsive-xr22: 88px;
  --space--responsive-xr23: 92px;
  --space--responsive-xr24: 96px;
  --space--responsive-xr25: 100px;
  --space--responsive-xr26: 104px;
  --space--responsive-xr27: 108px;
  --space--responsive-xr28: 112px;
  --space--responsive-xr29: 116px;
  --space--responsive-xr2: 8px;
  --space--responsive-xr30: 120px;
  --space--responsive-xr31: 124px;
  --space--responsive-xr32: 128px;
  --space--responsive-xr33: 132px;
  --space--responsive-xr34: 136px;
  --space--responsive-xr35: 140px;
  --space--responsive-xr36: 144px;
  --space--responsive-xr37: 148px;
  --space--responsive-xr38: 152px;
  --space--responsive-xr39: 156px;
  --space--responsive-xr3: 12px;
  --space--responsive-xr40: 160px;
  --space--responsive-xr41: 164px;
  --space--responsive-xr42: 168px;
  --space--responsive-xr43: 172px;
  --space--responsive-xr44: 176px;
  --space--responsive-xr45: 180px;
  --space--responsive-xr46: 184px;
  --space--responsive-xr47: 188px;
  --space--responsive-xr48: 192px;
  --space--responsive-xr49: 196px;
  --space--responsive-xr4: 16px;
  --space--responsive-xr50: 200px;
  --space--responsive-xr5: 20px;
  --space--responsive-xr6: 24px;
  --space--responsive-xr7: 28px;
  --space--responsive-xr8: 32px;
  --space--responsive-xr9: 36px;
  --space--unit: 4px;
  --space--x-half: 2px;
  --space--x0: 0px;
  --space--x1-half: 6px;
  --space--x10: 40px;
  --space--x11: 44px;
  --space--x12: 48px;
  --space--x13: 52px;
  --space--x14: 56px;
  --space--x15: 60px;
  --space--x16: 64px;
  --space--x17: 68px;
  --space--x18: 72px;
  --space--x19: 76px;
  --space--x1: 4px;
  --space--x20: 80px;
  --space--x21: 84px;
  --space--x22: 88px;
  --space--x23: 92px;
  --space--x24: 96px;
  --space--x25: 100px;
  --space--x26: 104px;
  --space--x27: 108px;
  --space--x28: 112px;
  --space--x29: 116px;
  --space--x2: 8px;
  --space--x30: 120px;
  --space--x31: 124px;
  --space--x32: 128px;
  --space--x33: 132px;
  --space--x34: 136px;
  --space--x35: 140px;
  --space--x36: 144px;
  --space--x37: 148px;
  --space--x38: 152px;
  --space--x39: 156px;
  --space--x3: 12px;
  --space--x40: 160px;
  --space--x41: 164px;
  --space--x42: 168px;
  --space--x43: 172px;
  --space--x44: 176px;
  --space--x45: 180px;
  --space--x46: 184px;
  --space--x47: 188px;
  --space--x48: 192px;
  --space--x49: 196px;
  --space--x4: 16px;
  --space--x50: 200px;
  --space--x5: 20px;
  --space--x6: 24px;
  --space--x7: 28px;
  --space--x8: 32px;
  --space--x9: 36px;
  --color--accent-01-background: #ffe7e5ff;
  --color--accent-01-base: #ff362aff;
  --color--accent-01-icon: #b20900ff;
  --color--accent-01-inverse-background: #ff0066ff;
  --color--accent-01-inverse-base: #ff0066ff;
  --color--accent-01-inverse-icon: #ff0066ff;
  --color--accent-01-inverse-text: #ff0066ff;
  --color--accent-01-text: #b20900ff;
  --color--accent-02-background: #ffebd6ff;
  --color--accent-02-base: #ea7600ff;
  --color--accent-02-icon: #793c00ff;
  --color--accent-02-inverse-background: #ff0066ff;
  --color--accent-02-inverse-base: #ff0066ff;
  --color--accent-02-inverse-icon: #ff0066ff;
  --color--accent-02-inverse-text: #ff0066ff;
  --color--accent-02-text: #793c00ff;
  --color--accent-03-background: #fffbebff;
  --color--accent-03-base: #ffce00ff;
  --color--accent-03-icon: #806700ff;
  --color--accent-03-inverse-background: #ff0066ff;
  --color--accent-03-inverse-base: #ff0066ff;
  --color--accent-03-inverse-icon: #ff0066ff;
  --color--accent-03-inverse-text: #ff0066ff;
  --color--accent-03-text: #806700ff;
  --color--accent-04-background: #ebf9f0ff;
  --color--accent-04-base: #00b057ff;
  --color--accent-04-icon: #006632ff;
  --color--accent-04-inverse-background: #ff0066ff;
  --color--accent-04-inverse-base: #ff0066ff;
  --color--accent-04-inverse-icon: #ff0066ff;
  --color--accent-04-inverse-text: #ff0066ff;
  --color--accent-04-text: #006632ff;
  --color--accent-05-background: #eefcfcff;
  --color--accent-05-base: #56e2e1ff;
  --color--accent-05-icon: #0b4141ff;
  --color--accent-05-inverse-background: #ff0066ff;
  --color--accent-05-inverse-base: #ff0066ff;
  --color--accent-05-inverse-icon: #ff0066ff;
  --color--accent-05-inverse-text: #ff0066ff;
  --color--accent-05-text: #0b4141ff;
  --color--accent-06-background: #ebf5ffff;
  --color--accent-06-base: #2392fbff;
  --color--accent-06-icon: #045cafff;
  --color--accent-06-inverse-background: #ff0066ff;
  --color--accent-06-inverse-base: #ff0066ff;
  --color--accent-06-inverse-icon: #ff0066ff;
  --color--accent-06-inverse-text: #ff0066ff;
  --color--accent-06-text: #045cafff;
  --color--accent-07-background: #fceefbff;
  --color--accent-07-base: #df41cfff;
  --color--accent-07-icon: #991a8dff;
  --color--accent-07-inverse-background: #ff0066ff;
  --color--accent-07-inverse-base: #ff0066ff;
  --color--accent-07-inverse-icon: #ff0066ff;
  --color--accent-07-inverse-text: #ff0066ff;
  --color--accent-07-text: #991a8dff;
  --color--accent-08-background: #d3dff0ff;
  --color--accent-08-base: #a8dce8ff;
  --color--accent-08-icon: #047a9cff;
  --color--accent-08-inverse-background: #ff0066ff;
  --color--accent-08-inverse-base: #ff0066ff;
  --color--accent-08-inverse-icon: #ff0066ff;
  --color--accent-08-inverse-text: #ff0066ff;
  --color--accent-08-text: #047a9cff;
  --color--accent-09-background: #e9fafdff;
  --color--accent-09-base: #047a9cff;
  --color--accent-09-icon: #047a9cff;
  --color--accent-09-inverse-background: #ff0066ff;
  --color--accent-09-inverse-base: #ff0066ff;
  --color--accent-09-inverse-icon: #ff0066ff;
  --color--accent-09-inverse-text: #ff0066ff;
  --color--accent-09-text: #047a9cff;
  --color--accent-10-background: #d1d1d1ff;
  --color--accent-10-base: #5d5d5dff;
  --color--accent-10-icon: #2e2e2eff;
  --color--accent-10-inverse-background: #d1d1d1ff;
  --color--accent-10-inverse-base: #5d5d5dff;
  --color--accent-10-inverse-icon: #2e2e2eff;
  --color--accent-10-inverse-text: #2e2e2eff;
  --color--accent-10-text: #2e2e2eff;
  --color--accent-white-to-black: #ffffffff;
  --color--elevation-alpha-04: #001a3f0d;
  --color--elevation-alpha-08: #001a3f1a;
  --color--elevation-alpha-12: #001a3f26;
  --color--feedback-default-background: #f6f6fbff;
  --color--feedback-default-button-active: #047a9c26;
  --color--feedback-default-button-default: #ffffff00;
  --color--feedback-default-button-hover: #001a3f26;
  --color--feedback-default-button-icon: #001a3fff;
  --color--feedback-default-button-inverse-active: #ff0066ff;
  --color--feedback-default-button-inverse-default: #ff0066ff;
  --color--feedback-default-button-inverse-hover: #ff0066ff;
  --color--feedback-default-button-inverse-icon: #ff0066ff;
  --color--feedback-default-button-inverse-text: #ff0066ff;
  --color--feedback-default-button-text: #001a3fff;
  --color--feedback-default-icon-alt: #464646ff;
  --color--feedback-default-icon: #171717ff;
  --color--feedback-default-inverse-background: #ff0066ff;
  --color--feedback-default-inverse-icon-alt: #ff0066ff;
  --color--feedback-default-inverse-icon: #ff0066ff;
  --color--feedback-default-inverse-text-alt: #ff0066ff;
  --color--feedback-default-inverse-text: #ff0066ff;
  --color--feedback-default-text-alt: #464646ff;
  --color--feedback-default-text: #171717ff;
  --color--feedback-info-accent: #0576e1ff;
  --color--feedback-info-active: #87c4fdff;
  --color--feedback-info-border: #0576e1ff;
  --color--feedback-info-button-active: #55abfcff;
  --color--feedback-info-button-default: #ffffff00;
  --color--feedback-info-button-hover: #87c4fdff;
  --color--feedback-info-button-icon: #045cafff;
  --color--feedback-info-button-inverse-active: #ff0066ff;
  --color--feedback-info-button-inverse-default: #ff0066ff;
  --color--feedback-info-button-inverse-hover: #ff0066ff;
  --color--feedback-info-button-inverse-icon: #ff0066ff;
  --color--feedback-info-button-inverse-text: #ff0066ff;
  --color--feedback-info-button-text: #045cafff;
  --color--feedback-info-default-dynamic: #ebf5ffff;
  --color--feedback-info-default: #ebf5ffff;
  --color--feedback-info-hover: #b9dcfeff;
  --color--feedback-info-icon: #045cafff;
  --color--feedback-info-inverse-accent: #ff0066ff;
  --color--feedback-info-inverse-active: #ff0066ff;
  --color--feedback-info-inverse-border: #ff0066ff;
  --color--feedback-info-inverse-default-dynamic: #ff0066ff;
  --color--feedback-info-inverse-default: #ff0066ff;
  --color--feedback-info-inverse-hover: #ff0066ff;
  --color--feedback-info-inverse-icon: #ff0066ff;
  --color--feedback-info-inverse-text: #ff0066ff;
  --color--feedback-info-text: #045cafff;
  --color--feedback-negative-accent: #ff362aff;
  --color--feedback-negative-active: #ffcfccff;
  --color--feedback-negative-border: #ff362aff;
  --color--feedback-negative-button-active: #ffcfccff;
  --color--feedback-negative-button-default: #ffffff00;
  --color--feedback-negative-button-hover: #ffe7e5ff;
  --color--feedback-negative-button-icon: #b20900ff;
  --color--feedback-negative-button-inverse-active: #ff0066ff;
  --color--feedback-negative-button-inverse-default: #ff0066ff;
  --color--feedback-negative-button-inverse-hover: #ff0066ff;
  --color--feedback-negative-button-inverse-icon: #ff0066ff;
  --color--feedback-negative-button-inverse-text: #ff0066ff;
  --color--feedback-negative-button-text: #b20900ff;
  --color--feedback-negative-default-dynamic: #ffe7e5ff;
  --color--feedback-negative-default: #ffe7e5ff;
  --color--feedback-negative-hover: #ffcfccff;
  --color--feedback-negative-icon: #b20900ff;
  --color--feedback-negative-inverse-accent: #ff362aff;
  --color--feedback-negative-inverse-active: #ffcfccff;
  --color--feedback-negative-inverse-border: #ff362aff;
  --color--feedback-negative-inverse-default-dynamic: #ffe7e5ff;
  --color--feedback-negative-inverse-default: #ffe7e5ff;
  --color--feedback-negative-inverse-hover: #ffcfccff;
  --color--feedback-negative-inverse-icon: #b20900ff;
  --color--feedback-negative-inverse-text: #b20900ff;
  --color--feedback-negative-text: #b20900ff;
  --color--feedback-positive-accent: #00b057ff;
  --color--feedback-positive-border: #00b057ff;
  --color--feedback-positive-button-active: #c4eed2ff;
  --color--feedback-positive-button-default: #ffffff00;
  --color--feedback-positive-button-hover: #ebf9f0ff;
  --color--feedback-positive-button-icon: #006632ff;
  --color--feedback-positive-button-inverse-active: #ff0066ff;
  --color--feedback-positive-button-inverse-default: #ff0066ff;
  --color--feedback-positive-button-inverse-hover: #ff0066ff;
  --color--feedback-positive-button-inverse-icon: #ff0066ff;
  --color--feedback-positive-button-inverse-text: #ff0066ff;
  --color--feedback-positive-button-text: #006632ff;
  --color--feedback-positive-default-dynamic: #ebf9f0ff;
  --color--feedback-positive-default: #ebf9f0ff;
  --color--feedback-positive-hover: #c4eed2ff;
  --color--feedback-positive-icon: #006632ff;
  --color--feedback-positive-inverse-accent: #ff0066ff;
  --color--feedback-positive-inverse-border: #ff0066ff;
  --color--feedback-positive-inverse-default-dynamic: #ff0066ff;
  --color--feedback-positive-inverse-default: #ff0066ff;
  --color--feedback-positive-inverse-hover: #ff0066ff;
  --color--feedback-positive-inverse-icon: #ff0066ff;
  --color--feedback-positive-inverse-pressed: #ff0066ff;
  --color--feedback-positive-inverse-text: #ff0066ff;
  --color--feedback-positive-pressed: #c4eed2ff;
  --color--feedback-positive-text: #006632ff;
  --color--feedback-warning-accent: #ea7600ff;
  --color--feedback-warning-active: #ffb870ff;
  --color--feedback-warning-border: #ea7600ff;
  --color--feedback-warning-button-active: #ffd1a3ff;
  --color--feedback-warning-button-default: #ffffff00;
  --color--feedback-warning-button-hover: #ffebd6ff;
  --color--feedback-warning-button-icon: #a15100ff;
  --color--feedback-warning-button-inverse-active: #ff0066ff;
  --color--feedback-warning-button-inverse-default: #ff0066ff;
  --color--feedback-warning-button-inverse-hover: #ff0066ff;
  --color--feedback-warning-button-inverse-icon: #ff0066ff;
  --color--feedback-warning-button-inverse-text: #ff0066ff;
  --color--feedback-warning-button-text: #a15100ff;
  --color--feedback-warning-default-dynamic: #ffebd6ff;
  --color--feedback-warning-default: #ffebd6ff;
  --color--feedback-warning-hover: #ffd1a3ff;
  --color--feedback-warning-icon: #a15100ff;
  --color--feedback-warning-inverse-accent: #ff0066ff;
  --color--feedback-warning-inverse-active: #ff0066ff;
  --color--feedback-warning-inverse-border: #ff0066ff;
  --color--feedback-warning-inverse-default-dynamic: #ff0066ff;
  --color--feedback-warning-inverse-default: #ff0066ff;
  --color--feedback-warning-inverse-hover: #ff0066ff;
  --color--feedback-warning-inverse-icon: #ff0066ff;
  --color--feedback-warning-inverse-text: #ff0066ff;
  --color--feedback-warning-text: #a15100ff;
  --color--icon-brand-01: #001a3fff;
  --color--icon-brand-02: #047a9cff;
  --color--icon-brand-03: #a8dce8ff;
  --color--icon-brand-04: #d3dff0ff;
  --color--icon-inverse-brand-01: #ff0066ff;
  --color--icon-inverse-brand-02: #ff0066ff;
  --color--icon-inverse-brand-03: #ff0066ff;
  --color--icon-inverse-brand-04: #ff0066ff;
  --color--icon-inverse-primary: #ffffffff;
  --color--icon-inverse-secondary: #d1d1d1ff;
  --color--icon-inverse-tertiary: #a2a2a2ff;
  --color--icon-primary: #171717ff;
  --color--icon-secondary: #464646ff;
  --color--icon-tertiary: #5d5d5dff;
  --color--interactive-action-active: #ea7600ff;
  --color--interactive-action-default: #ffce00ff;
  --color--interactive-action-hover: #ff9e3dff;
  --color--interactive-action-icon: #000000ff;
  --color--interactive-action-text: #000000ff;
  --color--interactive-border-active: #035c7cff;
  --color--interactive-border-default: #047a9cff;
  --color--interactive-border-disabled: #b9b9b9ff;
  --color--interactive-border-focus: #2392fbff;
  --color--interactive-border-hover: #56afc6ff;
  --color--interactive-border-inverse-active: #ff0066ff;
  --color--interactive-border-inverse-default: #ff0066ff;
  --color--interactive-border-inverse-disabled: #ff0066ff;
  --color--interactive-border-inverse-focus: #ff0066ff;
  --color--interactive-border-inverse-hover: #ff0066ff;
  --color--interactive-border-muted-active: #001a3f66;
  --color--interactive-border-muted-default: #001a3f59;
  --color--interactive-border-muted-disabled: #b9b9b9ff;
  --color--interactive-border-muted-focus: #2392fbff;
  --color--interactive-border-muted-hover: #001a3f59;
  --color--interactive-border-muted-inverse-active: #ff0066ff;
  --color--interactive-border-muted-inverse-default: #ff0066ff;
  --color--interactive-border-muted-inverse-disabled: #ff0066ff;
  --color--interactive-border-muted-inverse-focus: #ff0066ff;
  --color--interactive-border-muted-inverse-hover: #ff0066ff;
  --color--interactive-destructive-active: #800600ff;
  --color--interactive-destructive-default: #e50b00ff;
  --color--interactive-destructive-hover: #b20900ff;
  --color--interactive-destructive-icon: #ffffffff;
  --color--interactive-destructive-text: #ffffffff;
  --color--interactive-disabled-background: #d1d1d1ff;
  --color--interactive-disabled-border: #b9b9b9ff;
  --color--interactive-disabled-icon: #8b8b8bff;
  --color--interactive-disabled-inverse-background: #d1d1d1ff;
  --color--interactive-disabled-inverse-border: #747474ff;
  --color--interactive-disabled-inverse-icon: #747474ff;
  --color--interactive-disabled-inverse-text: #747474ff;
  --color--interactive-disabled-text: #8b8b8bff;
  --color--interactive-field-active: #d3dff0ff;
  --color--interactive-field-default: #ffffffff;
  --color--interactive-field-hover: #d3dff0ff;
  --color--interactive-field-icon: #2e2e2eff;
  --color--interactive-field-inverse-active: #ff0066ff;
  --color--interactive-field-inverse-default: #ff0066ff;
  --color--interactive-field-inverse-hover: #ff0066ff;
  --color--interactive-field-inverse-icon: #ff0066ff;
  --color--interactive-field-inverse-selected: #ff0066ff;
  --color--interactive-field-inverse-selection: #ff0066ff;
  --color--interactive-field-inverse-text: #ff0066ff;
  --color--interactive-field-selected: #ffffffff;
  --color--interactive-field-selection: #047a9cff;
  --color--interactive-field-text: #2e2e2eff;
  --color--interactive-overlay: #001a3f66;
  --color--interactive-primary-active: #0f203fff;
  --color--interactive-primary-default: #047a9cff;
  --color--interactive-primary-hover: #035c7cff;
  --color--interactive-primary-icon: #ffffffff;
  --color--interactive-primary-inverse-active: #047a9c26;
  --color--interactive-primary-inverse-default: #ffffffff;
  --color--interactive-primary-inverse-hover: #001a3f26;
  --color--interactive-primary-inverse-icon: #ffffffff;
  --color--interactive-primary-inverse-text: #ffffffff;
  --color--interactive-primary-text: #ffffffff;
  --color--interactive-quaternary-active: #047a9c26;
  --color--interactive-quaternary-default: #ffffffff;
  --color--interactive-quaternary-hover: #001a3f26;
  --color--interactive-quaternary-inverse-active: #ff0066ff;
  --color--interactive-quaternary-inverse-default: #ff0066ff;
  --color--interactive-quaternary-inverse-hover: #ff0066ff;
  --color--interactive-quaternary-inverse-selection: #ff0066ff;
  --color--interactive-quaternary-selection: #047a9cff;
  --color--interactive-scrollbar-background: #047a9c26;
  --color--interactive-scrollbar-foreground: #047a9cff;
  --color--interactive-scrollbar-inverse-background: #ff0066ff;
  --color--interactive-scrollbar-inverse-foreground: #ff0066ff;
  --color--interactive-secondary-active: #047a9c59;
  --color--interactive-secondary-default: #001a3fff;
  --color--interactive-secondary-hover: #047a9c26;
  --color--interactive-secondary-icon: #001a3fff;
  --color--interactive-secondary-inverse-active: #ffffff59;
  --color--interactive-secondary-inverse-default: #ffffffff;
  --color--interactive-secondary-inverse-hover: #ffffff33;
  --color--interactive-secondary-inverse-icon: #ffffffff;
  --color--interactive-secondary-inverse-text: #ffffffff;
  --color--interactive-secondary-text: #001a3fff;
  --color--interactive-shadow-default: #047a9c26;
  --color--interactive-shadow-error: #ffcfccff;
  --color--interactive-shadow-inverse-default: #ff0066ff;
  --color--interactive-shadow-inverse-error: #ff0066ff;
  --color--interactive-shadow-inverse-success: #ff0066ff;
  --color--interactive-shadow-success: #c4eed2ff;
  --color--interactive-skeleton: #001a3f26;
  --color--interactive-tertiary-active: #001a3f59;
  --color--interactive-tertiary-default: #ffffff00;
  --color--interactive-tertiary-hover: #001a3f26;
  --color--interactive-tertiary-icon: #001a3fff;
  --color--interactive-tertiary-inverse-active: #ffffff66;
  --color--interactive-tertiary-inverse-default: #ffffff00;
  --color--interactive-tertiary-inverse-hover: #ffffff33;
  --color--interactive-tertiary-inverse-icon: #ffffffff;
  --color--interactive-tertiary-inverse-text: #ffffffff;
  --color--interactive-tertiary-text: #001a3fff;
  --color--link-active: #02274bff;
  --color--link-brand-active: #0f203fff;
  --color--link-brand-default: #047a9cff;
  --color--link-brand-hover: #001a3fff;
  --color--link-brand-inverse-active: #ff0066ff;
  --color--link-brand-inverse-default: #ff0066ff;
  --color--link-brand-inverse-hover: #ff0066ff;
  --color--link-brand-inverse-visited: #ff0066ff;
  --color--link-brand-visited: #047a9cff;
  --color--link-default: #0576e1ff;
  --color--link-focus: #2392fbff;
  --color--link-hover: #034787ff;
  --color--link-inverse-active: #d0f0f7ff;
  --color--link-inverse-default: #ffffffff;
  --color--link-inverse-focus: #2392fbff;
  --color--link-inverse-hover: #a8dce8ff;
  --color--link-inverse-visited: #d0f0f7ff;
  --color--link-visited: #c421b5ff;
  --color--non-interactive-background-brand-01: #001a3fff;
  --color--non-interactive-background-brand-02: #047a9cff;
  --color--non-interactive-background-brand-03: #a8dce8ff;
  --color--non-interactive-background-brand-04: #d3dff0ff;
  --color--non-interactive-background-inverse-brand-01: #ff0066ff;
  --color--non-interactive-background-inverse-brand-02: #ff0066ff;
  --color--non-interactive-background-inverse-brand-03: #ff0066ff;
  --color--non-interactive-background-inverse-brand-04: #ff0066ff;
  --color--non-interactive-background-inverse-primary: #000000ff;
  --color--non-interactive-background-inverse-quaternary: #000000ff;
  --color--non-interactive-background-inverse-secondary: #000000ff;
  --color--non-interactive-background-inverse-tertiary: #000000ff;
  --color--non-interactive-background-primary: #ffffffff;
  --color--non-interactive-background-quaternary: #d3dff0ff;
  --color--non-interactive-background-secondary: #e6f0f7ff;
  --color--non-interactive-background-tertiary: #dde8f3ff;
  --color--non-interactive-border-inverse-muted: #ff0066ff;
  --color--non-interactive-border-inverse-regular: #ff0066ff;
  --color--non-interactive-border-inverse-strong: #ff0066ff;
  --color--non-interactive-border-muted: #001a3f26;
  --color--non-interactive-border-regular: #001a3f59;
  --color--non-interactive-border-strong: #001a3f66;
  --color--text-brand-01: #001a3fff;
  --color--text-brand-02: #047a9cff;
  --color--text-brand-03: #80c6d8ff;
  --color--text-brand-04: #d3dff0ff;
  --color--text-inverse-brand-01: #ff0066ff;
  --color--text-inverse-brand-02: #ff0066ff;
  --color--text-inverse-brand-03: #ff0066ff;
  --color--text-inverse-brand-04: #ff0066ff;
  --color--text-inverse-primary: #e8e8e8ff;
  --color--text-inverse-secondary: #b9b9b9ff;
  --color--text-inverse-tertiary: #a2a2a2ff;
  --color--text-primary: #171717ff;
  --color--text-secondary: #464646ff;
  --color--text-tertiary: #5d5d5dff;
  --color--visualization-01-01: #e9fafdff;
  --color--visualization-01-02: #d0f0f7ff;
  --color--visualization-01-03: #a8dce8ff;
  --color--visualization-01-04: #80c6d8ff;
  --color--visualization-01-05: #3097b3ff;
  --color--visualization-01-06: #047a9cff;
  --color--visualization-01-07: #035c7cff;
  --color--visualization-01-08: #002f3bff;
  --color--visualization-02-01: #fceefbff;
  --color--visualization-02-02: #f9dcf6ff;
  --color--visualization-02-03: #f5c2f0ff;
  --color--visualization-02-04: #efa0e7ff;
  --color--visualization-02-05: #df41cfff;
  --color--visualization-02-06: #c421b5ff;
  --color--visualization-02-07: #991a8dff;
  --color--visualization-02-08: #6d1364ff;
  --color--visualization-02-09: #410b3cff;
  --color--visualization-03-01: #eefcfcff;
  --color--visualization-03-02: #dcf9f9ff;
  --color--visualization-03-03: #cbf6f5ff;
  --color--visualization-03-04: #b3f2f1ff;
  --color--visualization-03-05: #56e2e1ff;
  --color--visualization-03-06: #42bdbcff;
  --color--visualization-03-07: #339897ff;
  --color--visualization-03-08: #227777ff;
  --color--visualization-03-09: #0b4141ff;
  --color--visualization-04-01: #fffbebff;
  --color--visualization-04-02: #fff4c7ff;
  --color--visualization-04-03: #ffeda3ff;
  --color--visualization-04-04: #ffe67fff;
  --color--visualization-04-05: #ffce00ff;
  --color--visualization-04-06: #e6b900ff;
  --color--visualization-04-07: #b28f00ff;
  --color--visualization-04-08: #806700ff;
  --color--visualization-04-09: #4d3d00ff;
  --color--visualization-pattern-dark: #001a3f26;
  --color--visualization-pattern-light: #ffffff66;
  --effect--elevation-level-1-0: 0px 2px 1px -1px #0d004d26;
  --effect--elevation-level-1-1: 0px 1px 1px 0px #0d004d1a;
  --effect--elevation-level-1-2: 0px 1px 3px 0px #0d004d0d;
  --effect--elevation-level-2-0: 0px 3px 5px -1px #0d004d26;
  --effect--elevation-level-2-1: 0px 5px 8px 0px #0d004d1a;
  --effect--elevation-level-2-2: 0px 1px 14px 0px #0d004d0d;
  --effect--elevation-level-3-0: 0px 5px 6px -3px #0d004d26;
  --effect--elevation-level-3-1: 0px 9px 12px 1px #0d004d1a;
  --effect--elevation-level-3-2: 0px 3px 16px 2px #0d004d0d;
  --effect--elevation-level-4-0: 0px 7px 8px -4px #0d004d26;
  --effect--elevation-level-4-1: 0px 13px 19px 2px #0d004d1a;
  --effect--elevation-level-4-2: 0px 5px 24px 4px #0d004d0d;
  --effect--elevation-level-5-0: 0px 8px 11px -5px #0d004d26;
  --effect--elevation-level-5-1: 0px 17px 26px 2px #0d004d1a;
  --effect--elevation-level-5-2: 0px 6px 32px 5px #0d004d0d;
  --effect--elevation-level-6-0: 0px 10px 13px -6px #0d004d26;
  --effect--elevation-level-6-1: 0px 21px 33px 3px #0d004d1a;
  --effect--elevation-level-6-2: 0px 8px 40px 7px #0d004d0d;
  --effect--input-shadow-hover-error: 0px 0px 0px 4px #ffcfccff;
  --effect--input-shadow-hover-success: 0px 0px 0px 4px #c4eed2ff;
  --effect--input-shadow-hover: 0px 0px 0px 4px #512eab26;
  --border--radius-circular: 1000px;
  --border--radius-unit: 4px;
  --border--radius-x10: 40px;
  --border--radius-x11: 44px;
  --border--radius-x12: 48px;
  --border--radius-x1: 4px;
  --border--radius-x2: 8px;
  --border--radius-x3: 12px;
  --border--radius-x4: 16px;
  --border--radius-x5: 20px;
  --border--radius-x6: 24px;
  --border--radius-x7: 28px;
  --border--radius-x8: 32px;
  --border--radius-x9: 36px;
  --border--size-focus: 3px;
  --border--size-thick: 2px;
  --border--size-thin: 1px;
  --font--family-primary: "Plus Jakarta Sans", Helvetica, Verdana, sans-serif;
  --textstyle--body-bold: normal var(--font--weight-semibold) var(--font--size-base)/var(--font--line-height-base) var(--font--family-primary);
  --textstyle--body-extra-small-bold: normal var(--font--weight-semibold) var(--font--size-xs)/var(--font--line-height-xs) var(--font--family-primary);
  --textstyle--body-extra-small: normal var(--font--weight-regular) var(--font--size-xs)/var(--font--line-height-xs) var(--font--family-primary);
  --textstyle--body-large-bold: normal var(--font--weight-semibold) var(--font--size-lg)/var(--font--line-height-xl) var(--font--family-primary);
  --textstyle--body-large: normal var(--font--weight-regular) var(--font--size-lg)/var(--font--line-height-xl) var(--font--family-primary);
  --textstyle--body-regular: normal var(--font--weight-regular) var(--font--size-base)/var(--font--line-height-base) var(--font--family-primary);
  --textstyle--body-small-bold: normal var(--font--weight-semibold) var(--font--size-sm)/var(--font--line-height-sm) var(--font--family-primary);
  --textstyle--body-small: normal var(--font--weight-regular) var(--font--size-sm)/var(--font--line-height-sm) var(--font--family-primary);
  --textstyle--display-display-1: normal var(--font--weight-medium) var(--font--size-8xl)/var(--font--line-height-8xl) var(--font--family-primary);
  --textstyle--display-display-2: normal var(--font--weight-medium) var(--font--size-7xl)/var(--font--line-height-7xl) var(--font--family-primary);
  --textstyle--display-display-3: normal var(--font--weight-medium) var(--font--size-6xl)/var(--font--line-height-6xl) var(--font--family-primary);
  --textstyle--heading-h1: normal var(--font--weight-medium) var(--font--size-6xl)/var(--font--line-height-6xl) var(--font--family-primary);
  --textstyle--heading-h2: normal var(--font--weight-medium) var(--font--size-5xl)/var(--font--line-height-5xl) var(--font--family-primary);
  --textstyle--heading-h3: normal var(--font--weight-medium) var(--font--size-4xl)/var(--font--line-height-4xl) var(--font--family-primary);
  --textstyle--heading-h4: normal var(--font--weight-medium) var(--font--size-3xl)/var(--font--line-height-3xl) var(--font--family-primary);
  --textstyle--heading-h5: normal var(--font--weight-medium) var(--font--size-2xl)/var(--font--line-height-2xl) var(--font--family-primary);
  --textstyle--heading-h6: normal var(--font--weight-medium) var(--font--size-xl)/var(--font--line-height-xl) var(--font--family-primary);
  --textstyle--label-bold: normal var(--font--weight-semibold) var(--font--size-base)/var(--font--line-height-xs) var(--font--family-primary);
  --textstyle--label-extra-small-bold: normal var(--font--weight-semibold) var(--font--size-xs)/var(--font--line-height-3xs) var(--font--family-primary);
  --textstyle--label-extra-small: normal var(--font--weight-medium) var(--font--size-xs)/var(--font--line-height-3xs) var(--font--family-primary);
  --textstyle--label-large-bold: normal var(--font--weight-semibold) var(--font--size-lg)/var(--font--line-height-sm) var(--font--family-primary);
  --textstyle--label-large: normal var(--font--weight-medium) var(--font--size-lg)/var(--font--line-height-sm) var(--font--family-primary);
  --textstyle--label-regular: normal var(--font--weight-medium) var(--font--size-base)/var(--font--line-height-xs) var(--font--family-primary);
  --textstyle--label-small-bold: normal var(--font--weight-semibold) var(--font--size-sm)/var(--font--line-height-2xs) var(--font--family-primary);
  --textstyle--label-small: normal var(--font--weight-medium) var(--font--size-sm)/var(--font--line-height-2xs) var(--font--family-primary);
}
/* Tablet */
@media (max-width: 1279px) and (min-width: 768px) {
  :root {
    --font--letter-spacing-negative-sm: -0.4px;
    --font--line-height-2xl: 29px;
    --font--line-height-2xs: 16px;
    --font--line-height-3xl: 34px;
    --font--line-height-3xs: 14px;
    --font--line-height-4xl: 35px;
    --font--line-height-5xl: 41px;
    --font--line-height-6xl: 47px;
    --font--line-height-7xl: 55px;
    --font--line-height-8xl: 63px;
    --font--line-height-base: 24px;
    --font--line-height-lg: 26px;
    --font--line-height-sm: 22px;
    --font--line-height-xl: 28px;
    --font--line-height-xs: 20px;
    --font--size-2xl: 24px;
    --font--size-3xl: 26px;
    --font--size-4xl: 28px;
    --font--size-5xl: 34px;
    --font--size-6xl: 40px;
    --font--size-7xl: 48px;
    --font--size-8xl: 56px;
    --font--size-base: 16px;
    --font--size-lg: 18px;
    --font--size-sm: 14px;
    --font--size-xl: 20px;
    --font--size-xs: 12px;
    --font--weight-medium: 500;
    --font--weight-regular: 400;
    --font--weight-semibold: 600;
    --space--responsive-unit: 4px;
    --space--responsive-xr-half: 2px;
    --space--responsive-xr0: 0px;
    --space--responsive-xr1-half: 4px;
    --space--responsive-xr10: 36px;
    --space--responsive-xr11: 40px;
    --space--responsive-xr12: 44px;
    --space--responsive-xr13: 48px;
    --space--responsive-xr14: 52px;
    --space--responsive-xr15: 56px;
    --space--responsive-xr16: 60px;
    --space--responsive-xr17: 64px;
    --space--responsive-xr18: 68px;
    --space--responsive-xr19: 72px;
    --space--responsive-xr1: 2px;
    --space--responsive-xr20: 76px;
    --space--responsive-xr21: 80px;
    --space--responsive-xr22: 84px;
    --space--responsive-xr23: 88px;
    --space--responsive-xr24: 92px;
    --space--responsive-xr25: 96px;
    --space--responsive-xr26: 100px;
    --space--responsive-xr27: 104px;
    --space--responsive-xr28: 108px;
    --space--responsive-xr29: 112px;
    --space--responsive-xr2: 4px;
    --space--responsive-xr30: 116px;
    --space--responsive-xr31: 120px;
    --space--responsive-xr32: 124px;
    --space--responsive-xr33: 128px;
    --space--responsive-xr34: 132px;
    --space--responsive-xr35: 136px;
    --space--responsive-xr36: 140px;
    --space--responsive-xr37: 144px;
    --space--responsive-xr38: 148px;
    --space--responsive-xr39: 152px;
    --space--responsive-xr3: 8px;
    --space--responsive-xr40: 156px;
    --space--responsive-xr41: 160px;
    --space--responsive-xr42: 164px;
    --space--responsive-xr43: 168px;
    --space--responsive-xr44: 172px;
    --space--responsive-xr45: 176px;
    --space--responsive-xr46: 180px;
    --space--responsive-xr47: 184px;
    --space--responsive-xr48: 188px;
    --space--responsive-xr49: 192px;
    --space--responsive-xr4: 12px;
    --space--responsive-xr50: 196px;
    --space--responsive-xr5: 16px;
    --space--responsive-xr6: 20px;
    --space--responsive-xr7: 24px;
    --space--responsive-xr8: 28px;
    --space--responsive-xr9: 32px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  :root {
    --font--letter-spacing-negative-sm: -0.4px;
    --font--line-height-2xl: 27px;
    --font--line-height-2xs: 16px;
    --font--line-height-3xl: 28px;
    --font--line-height-3xs: 14px;
    --font--line-height-4xl: 30px;
    --font--line-height-5xl: 34px;
    --font--line-height-6xl: 37px;
    --font--line-height-7xl: 41px;
    --font--line-height-8xl: 45px;
    --font--line-height-base: 24px;
    --font--line-height-lg: 26px;
    --font--line-height-sm: 22px;
    --font--line-height-xl: 25px;
    --font--line-height-xs: 20px;
    --font--size-2xl: 20px;
    --font--size-3xl: 22px;
    --font--size-4xl: 24px;
    --font--size-5xl: 28px;
    --font--size-6xl: 32px;
    --font--size-7xl: 36px;
    --font--size-8xl: 40px;
    --font--size-base: 16px;
    --font--size-lg: 18px;
    --font--size-sm: 14px;
    --font--size-xl: 18px;
    --font--size-xs: 12px;
    --font--weight-medium: 500;
    --font--weight-regular: 400;
    --font--weight-semibold: 600;
    --space--responsive-unit: 4px;
    --space--responsive-xr-half: 2px;
    --space--responsive-xr0: 0px;
    --space--responsive-xr1-half: 2px;
    --space--responsive-xr10: 32px;
    --space--responsive-xr11: 36px;
    --space--responsive-xr12: 40px;
    --space--responsive-xr13: 44px;
    --space--responsive-xr14: 48px;
    --space--responsive-xr15: 52px;
    --space--responsive-xr16: 56px;
    --space--responsive-xr17: 60px;
    --space--responsive-xr18: 64px;
    --space--responsive-xr19: 68px;
    --space--responsive-xr1: 2px;
    --space--responsive-xr20: 72px;
    --space--responsive-xr21: 76px;
    --space--responsive-xr22: 80px;
    --space--responsive-xr23: 84px;
    --space--responsive-xr24: 88px;
    --space--responsive-xr25: 92px;
    --space--responsive-xr26: 96px;
    --space--responsive-xr27: 100px;
    --space--responsive-xr28: 104px;
    --space--responsive-xr29: 108px;
    --space--responsive-xr2: 2px;
    --space--responsive-xr30: 112px;
    --space--responsive-xr31: 116px;
    --space--responsive-xr32: 120px;
    --space--responsive-xr33: 124px;
    --space--responsive-xr34: 128px;
    --space--responsive-xr35: 132px;
    --space--responsive-xr36: 136px;
    --space--responsive-xr37: 140px;
    --space--responsive-xr38: 144px;
    --space--responsive-xr39: 148px;
    --space--responsive-xr3: 4px;
    --space--responsive-xr40: 152px;
    --space--responsive-xr41: 156px;
    --space--responsive-xr42: 160px;
    --space--responsive-xr43: 164px;
    --space--responsive-xr44: 168px;
    --space--responsive-xr45: 172px;
    --space--responsive-xr46: 176px;
    --space--responsive-xr47: 180px;
    --space--responsive-xr48: 184px;
    --space--responsive-xr49: 188px;
    --space--responsive-xr4: 8px;
    --space--responsive-xr50: 192px;
    --space--responsive-xr5: 12px;
    --space--responsive-xr6: 16px;
    --space--responsive-xr7: 20px;
    --space--responsive-xr8: 24px;
    --space--responsive-xr9: 28px;
  }
}

/* ========================================
 * foundation/reset.css
 * ======================================== */

/*
 * Gravity UI 2.0 CSS Reset & Base Styles
 * 
 * Modern CSS reset with accessibility features and base styles
 * Based on modern-normalize and accessibility best practices
 */

/* ================================
 * MODERN CSS RESET
 * ================================ */

/* Hide DevExpress Blazor resource elements that incorrectly take up space */
dxbl-resource-script,
dxbl-resource-style {
  display: none !important;
}

/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent iOS font size adjust after orientation change */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  font-family: var(--gravity-font-family-primary);
  /* Use font-size: 0 to hide stray text nodes from third-party components */
  font-size: 0;
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset font-size for all direct body children */
body > * {
  font-size: var(--gravity-font-size-body);
}

/* Make media easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Correct the inability to style clickable types in iOS and Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/* Remove the inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Restore the focus styles unset by the previous rule */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Correct the cursor style of increment and decrement buttons in Safari */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* Correct the odd appearance in Chrome and Safari */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* Remove the inner padding in Chrome and Safari on macOS */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Correct the inability to style clickable types in iOS and Safari */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Remove the border on images inside links in IE 10 */
img {
  border-style: none;
}

/* Change the fill color to match the text color in all browsers */
svg:not([fill]) {
  fill: currentColor;
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

/* Improve text rendering */
body {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/* Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Improve focus visibility */
:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Hide focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure interactive elements have adequate target size */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button {
  min-height: 44px;
  min-width: 44px;
}

/* Touch target size for clickable labels (checkboxes, radios, switches)
   Note: Does NOT apply to form field labels (text inputs, selects, etc.)
   Those labels are non-interactive and should not have minimum dimensions */
input[type="checkbox"] + label,
input[type="radio"] + label,
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  min-height: 44px;
  min-width: 44px;
}

/* Improve link accessibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--gravity-text-link);
}

a:not([class]):hover,
a:not([class]):focus {
  text-decoration: none;
  color: var(--gravity-text-link-hover);
}

/* ================================
 * TYPOGRAPHY IMPROVEMENTS
 * ================================ */

/* Prevent orphans and improve text flow */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-wrap: break-word;
  hyphens: auto;
}

/* Improve heading spacing */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--gravity-line-height-tight);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

/* Reset list styles */
ul,
ol {
  list-style: none;
}

/* Improve blockquote styling */
blockquote {
  padding-left: var(--gravity-space-4);
  border-left: 4px solid var(--gravity-border-primary);
  font-style: italic;
  color: var(--gravity-text-secondary);
}

/* Improve code styling */
code,
pre,
samp {
  font-family: var(--gravity-font-family-code);
  font-size: 0.875em;
}

code {
  padding: var(--gravity-space-1) var(--gravity-space-2);
  background-color: var(--gravity-bg-muted);
  border-radius: var(--gravity-border-radius-sm);
  color: var(--gravity-text-primary);
}

pre {
  padding: var(--gravity-space-4);
  background-color: var(--gravity-bg-muted);
  border-radius: var(--gravity-border-radius-md);
  overflow-x: auto;
  line-height: var(--gravity-line-height-normal);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ================================
 * TABLE IMPROVEMENTS
 * ================================ */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--gravity-space-2) var(--gravity-space-3);
  border-bottom: 1px solid var(--gravity-border-secondary);
}

th {
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-secondary);
}

/* ================================
 * FORM IMPROVEMENTS
 * ================================ */

/* Improve fieldset styling */
fieldset {
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-md);
  padding: var(--gravity-space-4);
  margin: 0;
}

legend {
  padding: 0 var(--gravity-space-2);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

/* Basic input styling */
input,
textarea,
select {
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-sm);
  padding: var(--gravity-space-2) var(--gravity-space-3);
  background-color: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
  transition: border-color var(--gravity-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px rgba(15, 111, 138, 0.1);
}

/* Improve placeholder styling */
::placeholder {
  color: var(--gravity-text-muted);
  opacity: 1;
}

/* ================================
 * UTILITY CLASSES
 * ================================ */

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--gravity-bg-inverse);
  color: var(--gravity-text-inverse);
  padding: var(--gravity-space-2) var(--gravity-space-4);
  border-radius: var(--gravity-border-radius-md);
  text-decoration: none;
  z-index: var(--gravity-z-modal);
  transition: top var(--gravity-transition-fast);
}

.skip-link:focus {
  top: 6px;
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  :root {
    --gravity-border-primary: var(--gravity-color-black);
    --gravity-border-secondary: var(--gravity-color-gray-800);
    --gravity-text-muted: var(--gravity-color-gray-800);
  }
  
  [data-theme="dark"] {
    --gravity-border-primary: var(--gravity-color-white);
    --gravity-border-secondary: var(--gravity-color-gray-300);
    --gravity-text-muted: var(--gravity-color-gray-300);
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
    break-inside: avoid;
  }
  
  p,
  blockquote {
    break-inside: avoid;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    break-inside: avoid;
  }
  
  @page {
    margin: 0.5in;
  }
}

/* ========================================
 * foundation/tokens.css
 * ======================================== */

/**
 * Gravity UI 2.0 Design Tokens
 *
 * CSS Custom Properties mapped to Pearson Design System tokens
 * Pearson tokens are loaded from pearson-tokens.css (auto-generated from Figma)
 *
 * @version 2.1.0
 * @source Pearson Gravity UI Design System v3.3.1
 */

/* ========================================
 * CSS PROPERTY DECLARATIONS
 * Enhanced type safety and better dev tools support
 * ======================================== */

@property --gravity-brand-primary {
  syntax: '<color>';
  initial-value: #047a9c;
  inherits: false;
}

@property --gravity-brand-secondary {
  syntax: '<color>';
  initial-value: #001a3f;
  inherits: false;
}

@property --gravity-brand-accent {
  syntax: '<color>';
  initial-value: #ffce00;
  inherits: false;
}

@property --gravity-space-base {
  syntax: '<length>';
  initial-value: 4px;
  inherits: false;
}

@property --gravity-font-size-base {
  syntax: '<length>';
  initial-value: 16px;
  inherits: false;
}

:root {
  /* ========================================
   * COLOR TOKENS
   * Mapped to Pearson Design System tokens
   * ======================================== */

  /* Primary Palette - From Pearson Brand Colors */
  --gravity-primary-navy: var(--color--text-brand-01);
  --gravity-primary-navy-rgb: 0, 26, 63;
  --gravity-primary-teal: var(--color--interactive-primary-default);
  --gravity-primary-teal-rgb: 4, 122, 156;
  --gravity-primary-cyan: var(--color--interactive-primary-hover);
  --gravity-primary-cyan-rgb: 3, 92, 124;

  /* Secondary Palette - From Pearson Feedback/Action Colors */
  --gravity-secondary-yellow: var(--color--interactive-action-default);
  --gravity-secondary-yellow-rgb: 255, 206, 0;
  --gravity-secondary-orange: var(--color--feedback-warning-accent);
  --gravity-secondary-orange-rgb: 234, 118, 0;
  --gravity-secondary-red: var(--color--feedback-negative-accent);
  --gravity-secondary-red-rgb: 255, 54, 42;
  --gravity-secondary-green: var(--color--feedback-positive-accent);
  --gravity-secondary-green-rgb: 0, 176, 87;

  /* Grayscale Palette - From Pearson Text/Background Colors */
  --gravity-gray-1000: #000000;
  --gravity-gray-900: var(--color--text-primary);
  --gravity-gray-800: var(--color--text-secondary);
  --gravity-gray-700: var(--color--text-tertiary);
  --gravity-gray-600: var(--color--non-interactive-border-regular);
  --gravity-gray-500: var(--color--non-interactive-border-muted);
  --gravity-gray-400: var(--color--non-interactive-background-quaternary);
  --gravity-gray-300: var(--color--non-interactive-background-tertiary);
  --gravity-gray-200: var(--color--non-interactive-background-secondary);
  --gravity-gray-100: var(--color--non-interactive-background-secondary);
  --gravity-gray-50: #fcfcfc;
  --gravity-white: var(--color--non-interactive-background-primary);

  /* ========================================
   * TYPOGRAPHY TOKENS
   * From Pearson Typography System
   * ======================================== */

  /* Font Family Stack - Pearson Plus Jakarta Sans */
  --gravity-font-family: var(--font--family-primary);

  /* Font Weights - From Pearson */
  --gravity-font-weight-regular: var(--font--weight-regular);
  --gravity-font-weight-medium: var(--font--weight-medium);
  --gravity-font-weight-semibold: var(--font--weight-semibold);

  /* Font Sizes - Mapped to Pearson Scale */
  --gravity-font-size-h1: var(--font--size-6xl);
  --gravity-font-size-h2: var(--font--size-5xl);
  --gravity-font-size-h3: var(--font--size-4xl);
  --gravity-font-size-h4: var(--font--size-3xl);
  --gravity-font-size-h5: var(--font--size-2xl);
  --gravity-font-size-h6: var(--font--size-xl);
  --gravity-font-size-body-large: var(--font--size-lg);
  --gravity-font-size-body: var(--font--size-base);
  --gravity-font-size-small: var(--font--size-sm);
  --gravity-font-size-caption: var(--font--size-xs);

  /* Line Heights - From Pearson */
  --gravity-line-height-h1: var(--font--line-height-6xl);
  --gravity-line-height-h2: var(--font--line-height-5xl);
  --gravity-line-height-h3: var(--font--line-height-4xl);
  --gravity-line-height-h4: var(--font--line-height-3xl);
  --gravity-line-height-h5: var(--font--line-height-2xl);
  --gravity-line-height-h6: var(--font--line-height-xl);
  --gravity-line-height-body-large: var(--font--line-height-lg);
  --gravity-line-height-body: var(--font--line-height-base);
  --gravity-line-height-body-multi: var(--font--line-height-base);
  --gravity-line-height-body-sm: var(--font--line-height-sm);
  --gravity-line-height-body-sm-multi: var(--font--line-height-sm);
  --gravity-line-height-caption: var(--font--line-height-xs);

  /* Semantic Line Heights */
  --gravity-line-height-tight: 1.25;
  --gravity-line-height-normal: 1.5;
  --gravity-line-height-relaxed: 1.75;

  /* ========================================
   * SPACING TOKENS
   * Based on Pearson 4px unit system
   * ======================================== */

  /* Base Scale - Mapped to Pearson --space--x* tokens */
  --gravity-space-1: var(--space--x2);    /* 8px */
  --gravity-space-2: var(--space--x4);    /* 16px */
  --gravity-space-3: var(--space--x6);    /* 24px */
  --gravity-space-4: var(--space--x8);    /* 32px */
  --gravity-space-5: var(--space--x10);   /* 40px */
  --gravity-space-6: var(--space--x12);   /* 48px */
  --gravity-space-7: var(--space--x14);   /* 56px */
  --gravity-space-8: var(--space--x16);   /* 64px */
  --gravity-space-9: var(--space--x18);   /* 72px */
  --gravity-space-10: var(--space--x20);  /* 80px */
  --gravity-space-11: var(--space--x22);  /* 88px */
  --gravity-space-12: var(--space--x24);  /* 96px */
  --gravity-space-16: var(--space--x8);   /* 32px (legacy alias) */
  --gravity-space-20: var(--space--x40);  /* 160px */
  --gravity-space-24: var(--space--x48);  /* 192px */
  --gravity-space-32: 256px;
  --gravity-space-40: 320px;
  --gravity-space-48: 384px;
  --gravity-space-64: 512px;

  /* Fine Scale - Using Pearson units */
  --gravity-space-xs: var(--space--x1);       /* 4px */
  --gravity-space-sm: var(--space--x3);       /* 12px */
  --gravity-space-md: var(--space--x5);       /* 20px */
  --gravity-space-lg: var(--space--x7);       /* 28px */
  --gravity-space-xl: var(--space--x9);       /* 36px */
  --gravity-space-2xl: var(--space--x11);     /* 44px */

  /* ========================================
   * BORDER RADIUS TOKENS
   * Mapped to Pearson border radius system
   * ======================================== */

  --gravity-radius-none: 0;
  --gravity-radius-sm: var(--border--radius-x1);       /* 4px */
  --gravity-radius-default: var(--border--radius-x1);  /* 4px */
  --gravity-radius-md: var(--border--radius-x2);       /* 8px */
  --gravity-radius-lg: var(--border--radius-x3);       /* 12px */
  --gravity-radius-xl: var(--border--radius-x4);       /* 16px */
  --gravity-radius-2xl: var(--border--radius-x6);      /* 24px */
  --gravity-radius-3xl: var(--border--radius-x8);      /* 32px */
  --gravity-radius-full: var(--border--radius-circular); /* 1000px */

  /* ========================================
   * SHADOW TOKENS
   * Mapped to Pearson elevation system
   * ======================================== */

  --gravity-shadow-none: none;
  --gravity-shadow-xs: var(--effect--elevation-level-1-0), var(--effect--elevation-level-1-1), var(--effect--elevation-level-1-2);
  --gravity-shadow-sm: var(--effect--elevation-level-1-0), var(--effect--elevation-level-1-1), var(--effect--elevation-level-1-2);
  --gravity-shadow-md: var(--effect--elevation-level-2-0), var(--effect--elevation-level-2-1), var(--effect--elevation-level-2-2);
  --gravity-shadow-lg: var(--effect--elevation-level-3-0), var(--effect--elevation-level-3-1), var(--effect--elevation-level-3-2);
  --gravity-shadow-xl: var(--effect--elevation-level-4-0), var(--effect--elevation-level-4-1), var(--effect--elevation-level-4-2);
  --gravity-shadow-2xl: var(--effect--elevation-level-5-0), var(--effect--elevation-level-5-1), var(--effect--elevation-level-5-2);
  --gravity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Input shadows from Pearson */
  --gravity-shadow-input-hover: var(--effect--input-shadow-hover);
  --gravity-shadow-input-error: var(--effect--input-shadow-hover-error);
  --gravity-shadow-input-success: var(--effect--input-shadow-hover-success);

  /* ========================================
   * ANIMATION TOKENS
   * Consistent timing and easing
   * ======================================== */

  /* Durations */
  --gravity-duration-instant: 0ms;
  --gravity-duration-fast: 150ms;
  --gravity-duration-normal: 200ms;
  --gravity-duration-slow: 300ms;
  --gravity-duration-slower: 500ms;

  /* Easing Functions */
  --gravity-ease-linear: linear;
  --gravity-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --gravity-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gravity-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gravity-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
   * GRID TOKENS
   * Responsive breakpoints and layout
   * ======================================== */

  /* Breakpoints */
  --gravity-breakpoint-phone-sm: 351px;
  --gravity-breakpoint-phone-md: 399px;
  --gravity-breakpoint-phone-lg: 447px;
  --gravity-breakpoint-phone-xl: 591px;
  --gravity-breakpoint-tablet-sm: 727px;
  --gravity-breakpoint-tablet-md: 887px;
  --gravity-breakpoint-tablet-lg: 983px;
  --gravity-breakpoint-desktop-sm: 1079px;
  --gravity-breakpoint-desktop-md: 1175px;
  --gravity-breakpoint-desktop-lg: 1280px;

  /* Grid Properties */
  --gravity-grid-columns-phone: 4;
  --gravity-grid-columns-tablet: 8;
  --gravity-grid-columns-tablet-lg: 12;
  --gravity-grid-columns-desktop: 12;

  /* Gutters */
  --gravity-grid-gutter-phone: 16px;
  --gravity-grid-gutter-tablet: 16px;
  --gravity-grid-gutter-tablet-lg: 24px;
  --gravity-grid-gutter-desktop: 24px;

  /* Max Content Widths */
  --gravity-content-width-phone-sm: 272px;
  --gravity-content-width-phone-md: 336px;
  --gravity-content-width-phone-lg: 368px;
  --gravity-content-width-phone-xl: 432px;
  --gravity-content-width-tablet-sm: 560px;
  --gravity-content-width-tablet-md: 680px;
  --gravity-content-width-tablet-lg: 840px;
  --gravity-content-width-desktop-sm: 936px;
  --gravity-content-width-desktop-md: 1032px;
  --gravity-content-width-desktop-lg: 1128px;

  /* ========================================
   * COMPONENT TOKENS
   * Component-specific measurements
   * ======================================== */

  /* Button Tokens */
  --gravity-button-height-sm: 32px;
  --gravity-button-height-md: 36px;
  --gravity-button-height-lg: 39px;
  --gravity-button-padding-x: 24px;
  --gravity-button-padding-y: 0px;
  --gravity-button-min-width-sm: 128px;
  --gravity-button-min-width-md: 152px;
  --gravity-button-min-width-lg: 152px;
  --gravity-button-radius: var(--border--radius-circular);

  /* Button Color Tokens - Using Pearson Interactive Colors */
  --gravity-button-primary: var(--color--interactive-primary-default);
  --gravity-button-primary-hover: var(--color--interactive-primary-hover);
  --gravity-button-primary-active: var(--color--interactive-primary-active);
  --gravity-button-primary-text: var(--color--interactive-primary-text);
  --gravity-button-attention: var(--color--interactive-action-default);
  --gravity-button-attention-hover: var(--color--interactive-action-hover);
  --gravity-button-success: var(--color--feedback-positive-accent);
  --gravity-button-danger: var(--color--interactive-destructive-default);
  --gravity-button-danger-hover: var(--color--interactive-destructive-hover);
  --gravity-button-default-border: var(--color--interactive-border-default);
  --gravity-button-default-hover-bg: var(--color--interactive-tertiary-hover);
  --gravity-button-disabled-bg: var(--color--interactive-disabled-background);
  --gravity-button-disabled-text: var(--color--interactive-disabled-text);
  --gravity-button-disabled-border: var(--color--interactive-disabled-border);

  /* Dark Background Button Tokens */
  --gravity-button-primary-dark-bg: var(--color--interactive-primary-inverse-default);
  --gravity-button-primary-dark-hover: var(--color--interactive-primary-inverse-hover);
  --gravity-button-default-dark-hover-bg: var(--color--interactive-tertiary-inverse-hover);

  /* Icon Tokens */
  --gravity-icon-size-sm: 16px;
  --gravity-icon-size-default: 18px;
  --gravity-icon-size-lg: 24px;
  --gravity-icon-size-xl: 32px;

  /* Form Tokens */
  --gravity-input-height: 36px;
  --gravity-input-padding-x: 12px;
  --gravity-input-padding-y: 9px;
  --gravity-input-radius: var(--border--radius-x1);
  --gravity-input-border-width: var(--border--size-thin);
  --gravity-input-font-size: var(--font--size-sm);
  --gravity-input-line-height: var(--font--line-height-2xs);
  --gravity-input-border-color: var(--color--interactive-border-default);
  --gravity-input-border-focus: var(--color--interactive-border-focus);
  --gravity-input-bg: var(--color--interactive-field-default);
  --gravity-input-bg-hover: var(--color--interactive-field-hover);
  --gravity-input-text: var(--color--interactive-field-text);

  /* Form Element Tokens */
  --gravity-form-element-height: 36px;
  --gravity-form-element-padding-x: 12px;
  --gravity-form-element-padding-y: 9px;
  --gravity-form-label-margin-bottom: 4px;
  --gravity-form-label-font-size: var(--font--size-xs);
  --gravity-form-label-line-height: var(--font--line-height-3xs);
  --gravity-form-label-color: var(--color--text-secondary);
  --gravity-form-label-font-weight: var(--font--weight-regular);

  /* Form Disabled State */
  --gravity-input-disabled-bg: var(--color--interactive-disabled-background);
  --gravity-input-disabled-border: var(--color--interactive-disabled-border);
  --gravity-input-disabled-text: var(--color--interactive-disabled-text);

  /* Form Error State */
  --gravity-input-error-color: var(--color--feedback-negative-text);
  --gravity-input-error-border: var(--color--feedback-negative-border);
  --gravity-input-error-bg: var(--color--feedback-negative-default);

  /* Textarea Tokens */
  --gravity-textarea-min-height: 84px;

  /* Helper/Info Text */
  --gravity-form-helper-font-size: var(--font--size-xs);
  --gravity-form-helper-line-height: var(--font--line-height-3xs);
  --gravity-form-helper-color: var(--color--text-primary);

  /* Z-Index Scale */
  --gravity-z-base: 0;
  --gravity-z-dropdown: 1000;
  --gravity-z-sticky: 1020;
  --gravity-z-fixed: 1030;
  --gravity-z-modal-backdrop: 1040;
  --gravity-z-modal: 1050;
  --gravity-z-popover: 1060;
  --gravity-z-tooltip: 1070;
  --gravity-z-toast: 1080;
  --gravity-z-notification: 1090;
  --gravity-z-max: 2147483647;

  /* ========================================
   * FEEDBACK/STATE TOKENS
   * Semantic colors for feedback states
   * ======================================== */

  /* Success */
  --gravity-feedback-success-bg: var(--color--feedback-positive-default);
  --gravity-feedback-success-text: var(--color--feedback-positive-text);
  --gravity-feedback-success-icon: var(--color--feedback-positive-icon);
  --gravity-feedback-success-border: var(--color--feedback-positive-border);

  /* Warning */
  --gravity-feedback-warning-bg: var(--color--feedback-warning-default);
  --gravity-feedback-warning-text: var(--color--feedback-warning-text);
  --gravity-feedback-warning-icon: var(--color--feedback-warning-icon);
  --gravity-feedback-warning-border: var(--color--feedback-warning-border);

  /* Error/Negative */
  --gravity-feedback-error-bg: var(--color--feedback-negative-default);
  --gravity-feedback-error-text: var(--color--feedback-negative-text);
  --gravity-feedback-error-icon: var(--color--feedback-negative-icon);
  --gravity-feedback-error-border: var(--color--feedback-negative-border);

  /* Info */
  --gravity-feedback-info-bg: var(--color--feedback-info-default);
  --gravity-feedback-info-text: var(--color--feedback-info-text);
  --gravity-feedback-info-icon: var(--color--feedback-info-icon);
  --gravity-feedback-info-border: var(--color--feedback-info-border);

  /* ========================================
   * LINK TOKENS
   * Link colors from Pearson
   * ======================================== */

  --gravity-link-default: var(--color--link-default);
  --gravity-link-hover: var(--color--link-hover);
  --gravity-link-active: var(--color--link-active);
  --gravity-link-visited: var(--color--link-visited);
  --gravity-link-focus: var(--color--link-focus);

  /* Brand Link variant */
  --gravity-link-brand-default: var(--color--link-brand-default);
  --gravity-link-brand-hover: var(--color--link-brand-hover);
  --gravity-link-brand-active: var(--color--link-brand-active);

  /* ========================================
   * ACCENT COLORS
   * 10 accent colors from Pearson for charts/badges
   * ======================================== */

  --gravity-accent-01: var(--color--accent-01-base);
  --gravity-accent-01-bg: var(--color--accent-01-background);
  --gravity-accent-01-text: var(--color--accent-01-text);
  --gravity-accent-02: var(--color--accent-02-base);
  --gravity-accent-02-bg: var(--color--accent-02-background);
  --gravity-accent-02-text: var(--color--accent-02-text);
  --gravity-accent-03: var(--color--accent-03-base);
  --gravity-accent-03-bg: var(--color--accent-03-background);
  --gravity-accent-03-text: var(--color--accent-03-text);
  --gravity-accent-04: var(--color--accent-04-base);
  --gravity-accent-04-bg: var(--color--accent-04-background);
  --gravity-accent-04-text: var(--color--accent-04-text);
  --gravity-accent-05: var(--color--accent-05-base);
  --gravity-accent-05-bg: var(--color--accent-05-background);
  --gravity-accent-05-text: var(--color--accent-05-text);
  --gravity-accent-06: var(--color--accent-06-base);
  --gravity-accent-06-bg: var(--color--accent-06-background);
  --gravity-accent-06-text: var(--color--accent-06-text);
  --gravity-accent-07: var(--color--accent-07-base);
  --gravity-accent-07-bg: var(--color--accent-07-background);
  --gravity-accent-07-text: var(--color--accent-07-text);
  --gravity-accent-08: var(--color--accent-08-base);
  --gravity-accent-08-bg: var(--color--accent-08-background);
  --gravity-accent-08-text: var(--color--accent-08-text);
  --gravity-accent-09: var(--color--accent-09-base);
  --gravity-accent-09-bg: var(--color--accent-09-background);
  --gravity-accent-09-text: var(--color--accent-09-text);
  --gravity-accent-10: var(--color--accent-10-base);
  --gravity-accent-10-bg: var(--color--accent-10-background);
  --gravity-accent-10-text: var(--color--accent-10-text);

  /* ========================================
   * VISUALIZATION COLORS
   * For charts and data visualization
   * ======================================== */

  --gravity-viz-01: var(--color--visualization-01-06);
  --gravity-viz-02: var(--color--visualization-02-06);
  --gravity-viz-03: var(--color--visualization-03-06);
  --gravity-viz-04: var(--color--visualization-04-06);
}

/* ========================================
 * foundation/variables.css
 * ======================================== */

/*
 * Gravity UI 2.0 CSS Variables System
 * 
 * CSS Custom Properties for all design tokens with semantic assignments
 * Supports white-label theming and dark mode switching
 * Based on Pearson Gravity UI 2.0 Design System
 * Hot reload test - change #3 (testing fixed server config)
 */

:root {
  /* ================================
   * COLOR SYSTEM VARIABLES
   * ================================ */
  
  /* Primary Palette Variables */
  --gravity-color-primary-navy: var(--gravity-primary-navy);
  --gravity-color-primary-teal: var(--gravity-primary-teal);
  --gravity-color-primary-cyan: var(--gravity-primary-cyan);
  
  /* Secondary Palette Variables */
  --gravity-color-secondary-yellow: var(--gravity-secondary-yellow);
  --gravity-color-secondary-orange: var(--gravity-secondary-orange);
  --gravity-color-secondary-red: var(--gravity-secondary-red);
  --gravity-color-secondary-green: var(--gravity-secondary-green);
  --gravity-color-secondary-purple: #9333ea;
  --gravity-color-secondary-pink: #ec4899;
  
  /* PEG-Specific Colors (ModularTesting) */
  --gravity-color-peg-red: #dc2626;
  --gravity-color-peg-orange: #ea580c;
  --gravity-color-peg-blue: #2563eb;
  --gravity-color-peg-green: #16a34a;
  --gravity-color-peg-yellow: #eab308;
  
  /* Grayscale Variables */
  --gravity-color-gray-100: var(--gravity-gray-100);
  --gravity-color-gray-200: var(--gravity-gray-200);
  --gravity-color-gray-300: var(--gravity-gray-300);
  --gravity-color-gray-400: var(--gravity-gray-400);
  --gravity-color-gray-500: var(--gravity-gray-500);
  --gravity-color-gray-600: var(--gravity-gray-600);
  --gravity-color-gray-700: var(--gravity-gray-700);
  --gravity-color-gray-800: var(--gravity-gray-800);
  --gravity-color-gray-900: var(--gravity-gray-900);
  --gravity-color-black: var(--gravity-gray-1000);
  --gravity-color-white: var(--gravity-white);
  
  /* ================================
   * SEMANTIC COLOR ASSIGNMENTS
   * ================================ */
  
  /* Brand Colors (White-label Override Points) */
  --gravity-brand-primary: var(--gravity-color-primary-teal);
  --gravity-brand-secondary: var(--gravity-color-primary-navy);
  --gravity-brand-accent: var(--gravity-color-secondary-yellow);
  
  /* Brand Color RGB Channels for Advanced Mixing */
  --gravity-brand-primary-rgb: var(--gravity-primary-teal-rgb);
  --gravity-brand-secondary-rgb: var(--gravity-primary-navy-rgb);
  --gravity-brand-accent-rgb: var(--gravity-secondary-yellow-rgb);
  
  /* Text Colors */
  --gravity-text-primary: var(--gravity-color-gray-900);
  --gravity-text-secondary: var(--gravity-color-gray-700);
  --gravity-text-muted: var(--gravity-color-gray-800);  /* #6A7070 - readable on light backgrounds */
  --gravity-text-inverse: var(--gravity-color-white);
  --gravity-text-link: var(--gravity-brand-primary);
  --gravity-text-link-hover: var(--gravity-color-primary-cyan);
  
  /* Background Colors */
  --gravity-bg-primary: var(--gravity-color-white);
  --gravity-bg-secondary: var(--gravity-color-gray-100);
  --gravity-bg-muted: var(--gravity-color-gray-200);
  --gravity-bg-inverse: var(--gravity-color-gray-900);
  --gravity-bg-overlay: rgba(var(--gravity-primary-navy-rgb), 0.75);
  
  /* ================================
   * ADVANCED COLOR UTILITIES
   * Using modern CSS color functions
   * ================================ */
  
  /* Brand color variations */
  --gravity-brand-primary-light: color-mix(in srgb, var(--gravity-brand-primary) 80%, white);
  --gravity-brand-primary-dark: color-mix(in srgb, var(--gravity-brand-primary) 80%, black);
  --gravity-brand-primary-alpha-10: rgba(var(--gravity-brand-primary-rgb), 0.1);
  --gravity-brand-primary-alpha-20: rgba(var(--gravity-brand-primary-rgb), 0.2);
  --gravity-brand-primary-alpha-50: rgba(var(--gravity-brand-primary-rgb), 0.5);
  
  /* State color variations */
  --gravity-state-success-light: color-mix(in srgb, var(--gravity-state-success) 80%, white);
  --gravity-state-success-dark: color-mix(in srgb, var(--gravity-state-success) 80%, black);
  --gravity-state-warning-light: color-mix(in srgb, var(--gravity-state-warning) 80%, white);
  --gravity-state-warning-dark: color-mix(in srgb, var(--gravity-state-warning) 80%, black);
  --gravity-state-error-light: color-mix(in srgb, var(--gravity-state-error) 80%, white);
  --gravity-state-error-dark: color-mix(in srgb, var(--gravity-state-error) 80%, black);
  --gravity-state-info-light: color-mix(in srgb, var(--gravity-state-info) 80%, white);
  --gravity-state-info-dark: color-mix(in srgb, var(--gravity-state-info) 80%, black);
  
  /* Border Colors */
  --gravity-border-primary: var(--gravity-color-gray-300);
  --gravity-border-secondary: var(--gravity-color-gray-200);
  --gravity-border-color: var(--gravity-border-primary);
  --gravity-border-focus: var(--gravity-brand-primary);
  --gravity-border-error: var(--gravity-color-secondary-red);
  --gravity-border-success: var(--gravity-color-secondary-green);
  
  /* State Colors */
  --gravity-state-success: var(--gravity-color-secondary-green);
  --gravity-state-warning: var(--gravity-color-secondary-yellow);
  --gravity-state-error: var(--gravity-color-secondary-red);
  --gravity-state-info: var(--gravity-color-primary-cyan);
  
  /* ================================
   * TABLE SPECIFIC VARIABLES
   * ================================ */
  
  /* Table Colors */
  --gravity-table-header-bg: var(--gravity-color-gray-100);
  --gravity-table-header-text: var(--gravity-color-gray-800);
  --gravity-table-header-border: var(--gravity-color-gray-300);
  --gravity-table-row-bg: var(--gravity-color-white);
  --gravity-table-row-bg-alt: var(--gravity-color-gray-50);
  --gravity-table-row-hover: var(--gravity-bg-muted);
  --gravity-table-row-selected: rgba(var(--gravity-brand-primary-rgb), 0.1);
  --gravity-table-cell-border: var(--gravity-color-gray-200);
  --gravity-table-sort-icon: var(--gravity-color-gray-500);
  --gravity-table-sort-icon-active: var(--gravity-brand-primary);
  
  /* Badge Colors */
  --gravity-badge-success-bg: rgba(var(--gravity-secondary-green-rgb), 0.1);
  --gravity-badge-success-text: var(--gravity-color-secondary-green);
  --gravity-badge-warning-bg: rgba(var(--gravity-secondary-yellow-rgb), 0.1);
  --gravity-badge-warning-text: var(--gravity-color-secondary-orange);
  --gravity-badge-error-bg: rgba(var(--gravity-secondary-red-rgb), 0.1);
  --gravity-badge-error-text: var(--gravity-color-secondary-red);
  --gravity-badge-info-bg: rgba(var(--gravity-primary-cyan-rgb), 0.1);
  --gravity-badge-info-text: var(--gravity-color-primary-cyan);
  --gravity-badge-default-bg: var(--gravity-color-gray-200);
  --gravity-badge-default-text: var(--gravity-color-gray-700);
  
  /* Search & Filter Colors */
  --gravity-search-bg: var(--gravity-color-white);
  --gravity-search-border: var(--gravity-color-gray-300);
  --gravity-search-focus-border: var(--gravity-brand-primary);
  --gravity-search-icon: var(--gravity-color-gray-500);
  --gravity-filter-chip-bg: var(--gravity-color-gray-100);
  --gravity-filter-chip-text: var(--gravity-color-gray-800);
  --gravity-filter-chip-remove: var(--gravity-color-gray-600);

  /* ================================
   * TYPOGRAPHY VARIABLES
   * ================================ */
  
  /* Font Families */
  --gravity-font-family-primary: var(--gravity-font-family);
  --gravity-font-family-code: "SF Mono", Monaco, "Inconsolata", "Roboto Mono", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  
  /* Typography token aliases for semantic usage */
  
  /* ================================
   * SPACING VARIABLES
   * ================================ */
  
  /* Spacing scale aliases - reference tokens.css values */
  
  /* Component Spacing */
  --gravity-component-padding-sm: var(--gravity-space-2);
  --gravity-component-padding-md: var(--gravity-space-4);
  --gravity-component-padding-lg: var(--gravity-space-6);
  --gravity-component-margin-sm: var(--gravity-space-2);
  --gravity-component-margin-md: var(--gravity-space-4);
  --gravity-component-margin-lg: var(--gravity-space-6);
  
  /* ================================
   * LAYOUT VARIABLES
   * ================================ */
  
  /* Grid System - reference tokens.css values */
  
  /* Container Max Widths (semantic overrides) */
  --gravity-container-phone: 100%;
  --gravity-container-tablet: 768px;
  --gravity-container-desktop: 1200px;
  
  /* ================================
   * BORDER & RADIUS VARIABLES
   * ================================ */
  
  --gravity-border-width-thin: var(--gravity-input-border-width);
  --gravity-border-width-thick: 2px;
  
  --gravity-border-radius-sm: var(--gravity-radius-sm);
  --gravity-border-radius-md: var(--gravity-radius-md);
  --gravity-border-radius-lg: var(--gravity-radius-lg);
  --gravity-border-radius-xl: var(--gravity-radius-xl);
  --gravity-border-radius-full: var(--gravity-radius-full);
  
  /* ================================
   * SHADOW VARIABLES
   * ================================ */
  
  /* Shadow Variables - semantic aliases */
  --gravity-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --gravity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --gravity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --gravity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --gravity-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  
  /* ================================
   * ANIMATION VARIABLES
   * ================================ */
  
  --gravity-transition-fast: var(--gravity-duration-fast);
  --gravity-transition-normal: var(--gravity-duration-normal);
  --gravity-transition-slow: var(--gravity-duration-slow);
  
  --gravity-easing-ease: var(--gravity-ease-linear);
  --gravity-easing-ease-in: var(--gravity-ease-in);
  --gravity-easing-ease-out: var(--gravity-ease-out);
  --gravity-easing-ease-in-out: var(--gravity-ease-in-out);
  
  /* ================================
   * ICON VARIABLES
   * ================================ */
  
  --gravity-icon-size-sm: 16px;
  --gravity-icon-size-md: 18px;
  
  /* Icon Colors */
  --gravity-icon-color-inactive: var(--gravity-color-gray-900);
  --gravity-icon-color-active: var(--gravity-brand-primary);
  --gravity-icon-color-hover: var(--gravity-color-primary-cyan);
  --gravity-icon-color-focus: var(--gravity-brand-primary);
  --gravity-icon-color-pressed: var(--gravity-color-primary-navy);

  /* ================================
   * FOCUS RING VARIABLES
   * ================================ */

  --gravity-focus-ring-color: var(--gravity-brand-primary);
  --gravity-focus-ring-color-rgb: var(--gravity-brand-primary-rgb);
  --gravity-focus-ring-width: 2px;
  --gravity-focus-ring-offset: 2px;
  --gravity-focus-ring-shadow: 0 0 0 var(--gravity-focus-ring-width) rgba(var(--gravity-focus-ring-color-rgb), 0.5);

  /* ================================
   * PLACEHOLDER VARIABLES
   * ================================ */

  --gravity-placeholder-color: var(--gravity-color-gray-500);
  --gravity-placeholder-color-light: var(--gravity-color-gray-400);
  --gravity-placeholder-color-dark: var(--gravity-color-gray-600);

  /* ================================
   * COMPONENT-SPECIFIC VARIABLES
   * ================================ */
  
  /* Button Variables - Figma Specs */
  --gravity-button-height-sm: 32px;
  --gravity-button-height-md: 36px;
  --gravity-button-height-lg: 39px;
  --gravity-button-height-xl: 48px;
  --gravity-button-min-width-sm: 128px;
  --gravity-button-min-width-md: 152px;
  --gravity-button-min-width-lg: 152px;
  --gravity-button-padding-x: 24px;
  --gravity-button-padding-y: 0px;
  
  /* Form Variables */
  --gravity-form-element-height: 40px;
  --gravity-form-element-padding-x: var(--gravity-space-3);
  --gravity-form-element-padding-y: var(--gravity-space-2);
  --gravity-form-label-margin-bottom: var(--gravity-space-1);
  
  /* Card Variables - Figma Specs */
  --gravity-card-padding: var(--gravity-space-2);
  --gravity-card-border-radius: var(--gravity-border-radius-lg);  /* 8px per Figma */
  --gravity-card-shadow: 0px 7px 8px rgba(0, 0, 0, 0.05), 0px 5px 22px rgba(0, 0, 0, 0.03);  /* Figma dual shadow */
  --gravity-card-shadow-hover: 0px 10px 12px rgba(0, 0, 0, 0.08), 0px 8px 28px rgba(0, 0, 0, 0.05);  /* Enhanced for hover */
  
  /* Modal Variables */
  --gravity-modal-backdrop: rgba(0, 0, 0, 0.5);
  --gravity-modal-max-width: 90vw;
  --gravity-modal-max-height: 90vh;
  --gravity-modal-border-radius: var(--gravity-border-radius-lg);
  
  /* Table Variables */
  --gravity-table-border-color: var(--gravity-border-secondary);
  --gravity-table-header-bg: var(--gravity-bg-secondary);
  --gravity-table-row-hover-bg: var(--gravity-bg-muted);
  --gravity-table-cell-padding: var(--gravity-space-3);
  
  /* Navigation Variables */
  --gravity-header-height: 70px;
  --gravity-sidebar-width: 250px;
  --gravity-nav-item-padding: 0.75rem 1.5rem;
  --gravity-footer-column-min-width: 200px;
  --gravity-bg-base: #fafafa;
  --gravity-bg-dark: #1f2937;
  --gravity-bg-hover: var(--gravity-bg-muted);
  --gravity-text-inverse: #f3f4f6;
  --gravity-text-inverse-secondary: #9ca3af;
  --gravity-text-tertiary: var(--gravity-color-gray-400);
  --gravity-border-dark: var(--gravity-color-gray-700);

  /* Brand hover and active states */
  --gravity-brand-primary-hover: var(--gravity-brand-primary-dark);
  --gravity-brand-primary-active: var(--gravity-brand-primary-dark);

  /* State color aliases */
  --gravity-success: var(--gravity-state-success);
  --gravity-warning: var(--gravity-state-warning);
  --gravity-danger: var(--gravity-state-error);
  --gravity-info: var(--gravity-state-info);

  /* Typography aliases for DevExpress compatibility */
  --gravity-font-family: var(--gravity-font-family-primary);
  --gravity-font-size-body: var(--gravity-font-size-base);
  --gravity-font-size-h3: var(--gravity-font-size-xl);
  --gravity-font-size-h4: var(--gravity-font-size-lg);
  --gravity-font-size-small: var(--gravity-font-size-sm);
  --gravity-font-weight-medium: 500;
  --gravity-font-weight-semibold: 600;

  /* Spacing aliases - REMOVED: These were incorrectly overriding tokens.css values
   * tokens.css defines the proper spacing scale:
   * --gravity-space-1: 8px, --gravity-space-2: 16px, --gravity-space-3: 24px, etc.
   * --gravity-space-sm: 12px, --gravity-space-md: 20px, --gravity-space-lg: 28px, etc.
   */

  /* Animation aliases */
  --gravity-transition-base: all 0.2s ease-in-out;
  --gravity-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gravity-radius-sm: 0.25rem;
  --gravity-radius-md: 0.375rem;
  --gravity-radius-lg: 0.5rem;
  --gravity-radius-full: 9999px;
  --gravity-bg-tertiary: var(--gravity-color-gray-200);
  --gravity-color-warning: #f59e0b;
  --gravity-color-error: #ef4444;
  --gravity-color-success: var(--gravity-color-secondary-green);
  --gravity-color-primary: var(--gravity-brand-primary);
  --gravity-color-primary-light: #dbeafe;

  /* ================================
   * CHART/DATA VISUALIZATION COLORS
   * Domain-specific colors for charts and graphs
   * ================================ */

  --gravity-chart-primary: #3b82f6;    /* data series 1 - blue */
  --gravity-chart-success: #10b981;    /* positive values - green */
  --gravity-chart-warning: #f59e0b;    /* caution values - amber */
  --gravity-chart-danger: #ef4444;     /* negative values - red */
  --gravity-chart-info: #6366f1;       /* data series 2 - indigo */

  /* ================================
   * Z-INDEX SYSTEM
   * ================================ */
  
  --gravity-z-dropdown: 1000;
  --gravity-z-sticky: 1020;
  --gravity-z-fixed: 1030;
  --gravity-z-modal-backdrop: 1040;
  --gravity-z-modal: 1050;
  --gravity-z-popover: 1060;
  --gravity-z-tooltip: 1070;
  --gravity-z-toast: 1080;
}

/* ================================
 * WHITE-LABEL THEME OVERRIDES
 * ================================
 * 
 * Schools can override these variables to customize the theme:
 * 
 * :root {
 *   --gravity-brand-primary: #your-primary-color;
 *   --gravity-brand-secondary: #your-secondary-color;
 *   --gravity-brand-accent: #your-accent-color;
 * }
 * 
 * All components will automatically inherit these colors.
 */

/* ================================
 * DARK THEME OVERRIDES
 * ================================
 * 
 * Applied via data-theme="dark" on html element
 */

[data-theme="dark"] {
  /* Text Colors (Inverted) */
  --gravity-text-primary: var(--gravity-color-white);
  --gravity-text-secondary: var(--gravity-color-gray-300);
  --gravity-text-muted: var(--gravity-color-gray-800);  /* #6A7070 - readable on light backgrounds */
  --gravity-text-inverse: var(--gravity-color-gray-900);
  
  /* Background Colors (Inverted) */
  --gravity-bg-primary: var(--gravity-color-gray-900);
  --gravity-bg-secondary: var(--gravity-color-gray-800);
  --gravity-bg-muted: var(--gravity-color-gray-700);
  --gravity-bg-inverse: var(--gravity-color-white);
  --gravity-bg-overlay: rgba(0, 0, 0, 0.75);
  
  /* Border Colors (Adjusted) */
  --gravity-border-primary: var(--gravity-color-gray-600);
  --gravity-border-secondary: var(--gravity-color-gray-700);
  
  /* Icon Colors (Adjusted) */
  --gravity-icon-color-inactive: var(--gravity-color-gray-400);
  --gravity-icon-color-active: var(--gravity-color-primary-cyan);
  --gravity-icon-color-hover: var(--gravity-color-primary-teal);
  
  /* Component Adjustments */
  --gravity-table-header-bg: var(--gravity-color-gray-800);
  --gravity-table-row-hover-bg: var(--gravity-color-gray-700);
  --gravity-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --gravity-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* ================================
 * REDUCED MOTION SUPPORT
 * ================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --gravity-transition-fast: none;
    --gravity-transition-normal: none;
    --gravity-transition-slow: none;
  }
}

/* ========================================
 * gravity-ui.css
 * ======================================== */

/*
 * Gravity UI 2.0 CSS Framework
 * 
 * Main entry point - imports all framework components
 * Based on Pearson Gravity UI 2.0 Design System
 * 
 * Version: 1.0.0
 * Author: Claude Code
 * License: MIT
 */

/* ================================
 * FOUNDATION LAYER
 * ================================ */

/* Pearson Gravity Design System tokens - MUST load first */
/* Design tokens - colors, typography, spacing (references Pearson tokens) */
/* CSS custom properties system */
/* Modern CSS reset + accessibility */
/* Reusable mixins and utility patterns */
/* ================================
 * TYPOGRAPHY SYSTEM
 * ================================ */

/* Font loading and font face declarations */
/* H1-H6 heading system */
/* Body text variants and paragraph styling */
/* Text utility classes */
/* ================================
 * LAYOUT SYSTEM
 * ================================ */

/* Responsive grid system */
/* Container utilities and max-widths */
/* Margin and padding utilities */
/* ================================
 * COMPONENT LIBRARY
 * ================================ */

/* Button system with all variants */
/* Form system with inputs, labels, validation */
/* Card system with headers, bodies, footers */
/* Alert system for notifications and messages */
/* Table system with sorting, filtering, and responsive behavior */
/* Badge system for status indicators and labels */
/* Chip/tag components */
/* Color indicator components */
/* Search and filter components for tables and lists */
/* Navigation system with header, sidebar, menu, footer, and layout */
/* Modal and Tooltip components */
/* ================================
 * TESTING INTERFACE COMPONENTS
 * ================================ */

/* Student testing interface system */
/* Scenario and case study navigation */
/* ================================
 * QUESTION COMPONENTS
 * ================================ */

/* Core question display and answer components */
/* Individual question type components */
/* ================================
 * ICON SYSTEM
 * ================================ */

/* Complete icon system with 297 icons in 3 sizes */
/* ================================
 * THEME SYSTEM
 * ================================ */

/* Light theme (default) */
/* Dark theme support */
/* White-label theme template */
/* ================================
 * UTILITIES
 * ================================ */

/* Color utility classes */
/* Display and visibility utilities */
/* Flexbox layout utilities */
/* Positioning utilities */
/* Sizing utilities */
/* Effects utilities (borders, shadows, gaps) */
/* State utilities (hover, focus, disabled) */
/* Animation and transition utilities */
/* Responsive and special utilities */
/* Overflow utilities */
/* ================================
 * FRAMEWORK INFO
 * ================================ */

/*! 
 * Gravity UI 2.0 CSS Framework
 * Implementation of Pearson's Gravity UI 2.0 Design System
 * 
 * Features:
 * - Complete design token system
 * - Responsive grid (4/8/12 columns)
 * - Typography system (Source Sans 3)
 * - Component library
 * - Dark mode support
 * - White-label theming
 * - Modern CSS practices
 * - WCAG 2.1 AA accessibility
 * 
 * Browser Support:
 * - Chrome 88+
 * - Firefox 85+
 * - Safari 14+
 * - Edge 88+
 * 
 * Usage:
 * <link rel="stylesheet" href="gravity-ui.css">
 * 
 * Optional theme switching:
 * <html data-theme="dark">
 * 
 * White-label customization:
 * :root {
 *   --gravity-brand-primary: #your-color;
 *   --gravity-brand-secondary: #your-color;
 *   --gravity-brand-accent: #your-color;
 * }
 */

/* ========================================
 * typography/body.css
 * ======================================== */

/*
 * Gravity UI 2.0 Body Text System
 * 
 * Body text variants based on Page 4 specifications
 * 16px (20px single, 24px multi), 14px (18px single, 20px multi), 12px metadata
 */

/* ================================
 * BASE BODY TEXT STYLES
 * ================================ */

/* Default body text - 16px with flexible line height */
body,
.gravity-text-body {
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body);
  font-weight: var(--gravity-font-weight-regular);
  line-height: var(--gravity-line-height-normal);
  color: var(--gravity-text-primary);
}

/* ================================
 * BODY TEXT SIZE VARIANTS
 * ================================ */

/* Large body text - 18px */
.gravity-text-large,
.gravity-text-body-large {
  font-size: var(--gravity-font-size-body-large);
  line-height: var(--gravity-line-height-normal);
}

/* Default body text - 16px (explicit class) */
.gravity-text-base {
  font-size: var(--gravity-font-size-body);
  line-height: var(--gravity-line-height-normal);
}

/* Small text - 14px */
.gravity-text-small {
  font-size: var(--gravity-font-size-small);
  line-height: 1.428; /* 20px line height for 14px font (multi-line) */
}

/* Caption/metadata text - 12px */
.gravity-text-caption {
  font-size: var(--gravity-font-size-caption);
  line-height: var(--gravity-line-height-tight);
}

/* Extra small text - 11px */
.gravity-text-xs {
  font-size: 0.6875rem; /* 11px */
  line-height: 1.454; /* 16px line height */
}

/* ================================
 * LINE HEIGHT VARIANTS (Page 4 Specs)
 * ================================ */

/* Single line spacing - for headlines and short text */
.gravity-text-line-single {
  line-height: 1.25; /* 20px for 16px, 18px for 14px */
}

/* Multi-line spacing - for paragraphs and longer text */
.gravity-text-line-multi {
  line-height: 1.5; /* 24px for 16px, 20px for 14px */
}

/* Tight line height - for condensed text */
.gravity-text-line-tight {
  line-height: var(--gravity-line-height-tight);
}

/* Normal line height - balanced for readability */
.gravity-text-line-normal {
  line-height: var(--gravity-line-height-normal);
}

/* Relaxed line height - for better readability */
.gravity-text-line-relaxed {
  line-height: var(--gravity-line-height-relaxed);
}

/* ================================
 * TEXT WEIGHT VARIANTS
 * ================================ */

/* Regular weight (default) */
.gravity-text-regular {
  font-weight: var(--gravity-font-weight-regular);
}

/* Semibold weight - for emphasis */
.gravity-text-semibold {
  font-weight: var(--gravity-font-weight-semibold);
}

/* Legacy support */
.gravity-text-normal {
  font-weight: var(--gravity-font-weight-regular);
}

.gravity-text-bold {
  font-weight: var(--gravity-font-weight-semibold);
}

/* ================================
 * TEXT STYLE VARIANTS
 * ================================ */

/* Italic text */
.gravity-text-italic {
  font-style: italic;
}

/* Normal style (non-italic) */
.gravity-text-normal-style {
  font-style: normal;
}

/* Underlined text */
.gravity-text-underline {
  text-decoration: underline;
}

/* Strike-through text */
.gravity-text-strikethrough {
  text-decoration: line-through;
}

/* No text decoration */
.gravity-text-no-decoration {
  text-decoration: none;
}

/* ================================
 * PARAGRAPH STYLING
 * ================================ */

/* Default paragraph spacing */
p,
.gravity-paragraph {
  margin-bottom: var(--gravity-space-4);
  line-height: var(--gravity-line-height-relaxed);
}

/* Last paragraph in a container should have no bottom margin */
p:last-child,
.gravity-paragraph:last-child {
  margin-bottom: 0;
}

/* Compact paragraph spacing */
.gravity-paragraph-compact {
  margin-bottom: var(--gravity-space-2);
}

/* Spacious paragraph spacing */
.gravity-paragraph-spacious {
  margin-bottom: var(--gravity-space-6);
}

/* Lead paragraph - larger, attention-grabbing intro text */
.gravity-paragraph-lead {
  font-size: var(--gravity-font-size-body-large);
  line-height: var(--gravity-line-height-relaxed);
  color: var(--gravity-text-secondary);
  margin-bottom: var(--gravity-space-6);
}

/* ================================
 * LIST STYLING
 * ================================ */

/* Ordered and unordered lists */
ul,
ol {
  margin: var(--gravity-space-4) 0;
  padding-left: var(--gravity-space-6);
}

ul li,
ol li {
  margin-bottom: var(--gravity-space-2);
  line-height: var(--gravity-line-height-normal);
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
  margin: var(--gravity-space-2) 0;
}

/* Custom styled lists */
.gravity-list-none {
  list-style: none;
  padding-left: 0;
}

.gravity-list-disc {
  list-style-type: disc;
}

.gravity-list-decimal {
  list-style-type: decimal;
}

/* Compact list spacing */
.gravity-list-compact li {
  margin-bottom: var(--gravity-space-1);
}

/* Spacious list spacing */
.gravity-list-spacious li {
  margin-bottom: var(--gravity-space-3);
}

/* ================================
 * SPECIAL TEXT ELEMENTS
 * ================================ */

/* Strong emphasis */
strong,
.gravity-text-strong {
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

/* Emphasis */
em,
.gravity-text-emphasis {
  font-style: italic;
}

/* Mark/highlight text */
mark,
.gravity-text-mark {
  background-color: var(--gravity-color-secondary-yellow);
  color: var(--gravity-color-gray-900);
  padding: 0.125em 0.25em;
  border-radius: var(--gravity-border-radius-sm);
}

/* Keyboard input */
kbd,
.gravity-text-kbd {
  font-family: var(--gravity-font-family-mono);
  font-size: 0.875em;
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-text-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-sm);
  padding: 0.125em 0.375em;
  box-shadow: inset 0 -1px 0 var(--gravity-border-primary);
}

/* Abbreviations */
abbr,
.gravity-text-abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* ================================
 * QUOTE STYLING
 * ================================ */

/* Blockquotes */
blockquote,
.gravity-blockquote {
  margin: var(--gravity-space-6) 0;
  padding: var(--gravity-space-4) var(--gravity-space-6);
  border-left: 4px solid var(--gravity-brand-primary);
  background-color: var(--gravity-bg-secondary);
  font-style: italic;
  color: var(--gravity-text-secondary);
  border-radius: 0 var(--gravity-border-radius-md) var(--gravity-border-radius-md) 0;
}

blockquote p:last-child,
.gravity-blockquote p:last-child {
  margin-bottom: 0;
}

/* Inline quotes */
q,
.gravity-text-quote {
  font-style: italic;
}

/* Quote attribution */
.gravity-quote-attribution {
  font-style: normal;
  font-size: var(--gravity-font-size-small);
  color: var(--gravity-text-muted);
  margin-top: var(--gravity-space-2);
}

.gravity-quote-attribution::before {
  content: "";
}

/* ================================
 * RESPONSIVE TEXT SCALING
 * ================================ */

/* Tablet adjustments */
@media (min-width: 591px) and (max-width: 1078px) {
  .gravity-text-large {
    font-size: calc(var(--gravity-font-size-body-large) * 0.95);
  }
  
  .gravity-paragraph-lead {
    font-size: calc(var(--gravity-font-size-body-large) * 0.95);
  }
}

/* Phone adjustments */
@media (max-width: 590px) {
  body,
  .gravity-text-body,
  .gravity-text-base {
    font-size: max(var(--gravity-font-size-body), 14px);
  }
  
  .gravity-text-large {
    font-size: calc(var(--gravity-font-size-body-large) * 0.9);
  }
  
  .gravity-paragraph-lead {
    font-size: var(--gravity-font-size-body);
    margin-bottom: var(--gravity-space-4);
  }
  
  /* Reduce paragraph spacing on mobile */
  p,
  .gravity-paragraph {
    margin-bottom: var(--gravity-space-3);
  }
  
  /* Adjust list padding for smaller screens */
  ul,
  ol {
    padding-left: var(--gravity-space-4);
  }
  
  /* Reduce blockquote padding */
  blockquote,
  .gravity-blockquote {
    margin: var(--gravity-space-4) 0;
    padding: var(--gravity-space-3) var(--gravity-space-4);
  }
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
  .gravity-text-muted,
  .gravity-text-secondary {
    color: var(--gravity-text-primary);
  }
  
  mark,
  .gravity-text-mark {
    background-color: yellow;
    color: black;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] {
  mark,
  .gravity-text-mark {
    background-color: rgba(246, 200, 66, 0.3);
    color: var(--gravity-color-white);
  }
  
  kbd,
  .gravity-text-kbd {
    background-color: var(--gravity-color-gray-700);
    border-color: var(--gravity-color-gray-600);
    box-shadow: inset 0 -1px 0 var(--gravity-color-gray-600);
  }
  
  blockquote,
  .gravity-blockquote {
    background-color: var(--gravity-color-gray-800);
    border-left-color: var(--gravity-brand-primary);
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  body,
  .gravity-text-body {
    font-size: 11pt;
    line-height: 1.4;
    color: black;
  }
  
  .gravity-text-large { font-size: 12pt; }
  .gravity-text-small { font-size: 10pt; }
  .gravity-text-caption { font-size: 9pt; }
  
  /* Ensure good contrast in print */
  .gravity-text-muted,
  .gravity-text-secondary {
    color: #333;
  }
  
  /* Remove background colors for print */
  mark,
  .gravity-text-mark,
  blockquote,
  .gravity-blockquote {
    background: none;
    border: 1px solid #ccc;
  }
  
  /* Improve link visibility in print */
  .gravity-text-link {
    color: black;
    text-decoration: underline;
  }
}

/* ================================
 * READING EXPERIENCE ENHANCEMENTS
 * ================================ */

/* Better text rendering for long-form content */
.gravity-text-reading {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  word-wrap: break-word;
}

/* Optimize for readability */
.gravity-text-readable {
  max-width: 65ch; /* Optimal line length for reading */
  line-height: var(--gravity-line-height-relaxed);
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Drop cap for special articles */
.gravity-text-drop-cap::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.9;
  margin: 0.1em 0.1em 0 0;
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-brand-primary);
}

/* ========================================
 * typography/fonts.css
 * ======================================== */

/*
 * Gravity UI 2.0 Font Loading & Font Face Declarations
 * 
 * Source Sans 3 font loading with performance optimizations
 * Based on Page 4 typography specifications
 */

/* ================================
 * FONT FACE DECLARATIONS
 * ================================ */

/* Google Fonts Import - Proper way to load web fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap');

/* ================================
 * FONT STACK DEFINITIONS
 * ================================ */

/*
 * Primary font stack based on Page 4 specifications:
 * "Source Sans 3", "Pearson Sans", "Work Sans", sans-serif
 * 
 * Fallback order:
 * 1. Source Sans 3 (Primary, loaded via Google Fonts)
 * 2. Pearson Sans (If available locally)
 * 3. Work Sans (Backup web font)
 * 4. System sans-serif fonts
 */

:root {
  --gravity-font-family-primary: 
    "Source Sans 3",
    "Pearson Sans",
    "Work Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  
  /* Monospace stack for code elements */
  --gravity-font-family-mono:
    "SF Mono",
    Monaco,
    "Inconsolata",
    "Roboto Mono",
    "Source Code Pro",
    Menlo,
    Consolas,
    "DejaVu Sans Mono",
    monospace;
}

/* ================================
 * FONT OPTIMIZATION
 * ================================ */

/* Preload critical fonts for performance */
/* Note: In HTML, add these link tags in the <head> section:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
*/

/* Font rendering optimizations */
body {
  font-family: var(--gravity-font-family-primary);
  font-weight: var(--gravity-font-weight-regular);
  font-size: var(--gravity-font-size-body);
  line-height: var(--gravity-line-height-normal);
  
  /* Improve font rendering across browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/* ================================
 * FONT LOADING STATES
 * ================================ */

/* While fonts are loading, use system fonts */
.fonts-loading {
  font-family: 
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* Once fonts are loaded, transition smoothly */
.fonts-loaded {
  font-family: var(--gravity-font-family-primary);
  transition: font-family var(--gravity-transition-fast);
}

/* ================================
 * FONT WEIGHT UTILITIES
 * ================================ */

/* Based on Page 4 specifications: Regular (400) and Semibold (600) */
.gravity-font-regular {
  font-weight: var(--gravity-font-weight-regular);
}

.gravity-font-semibold {
  font-weight: var(--gravity-font-weight-semibold);
}

/* Legacy support for common weight names */
.gravity-font-normal {
  font-weight: var(--gravity-font-weight-regular);
}

.gravity-font-bold {
  font-weight: var(--gravity-font-weight-semibold);
}

/* ================================
 * FONT STYLE UTILITIES
 * ================================ */

.gravity-font-italic {
  font-style: italic;
}

.gravity-font-normal-style {
  font-style: normal;
}

/* ================================
 * FONT VARIANT UTILITIES
 * ================================ */

/* Small caps for special text */
.gravity-font-small-caps {
  font-variant: small-caps;
  font-feature-settings: "smcp" 1;
}

/* Tabular numbers for data tables */
.gravity-font-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Proportional numbers for regular text */
.gravity-font-proportional {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "pnum" 1;
}

/* ================================
 * RESPONSIVE FONT SCALING
 * ================================ */

/* Base font size scales slightly on larger screens */
@media (min-width: 1079px) {
  body {
    font-size: calc(var(--gravity-font-size-body) * 1.05);
  }
}

/* Ensure minimum font size on very small screens */
@media (max-width: 320px) {
  body {
    font-size: max(var(--gravity-font-size-body), 14px);
  }
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

/* Respect user's font size preferences */
@media (prefers-reduced-motion: no-preference) {
  body {
    transition: font-size var(--gravity-transition-normal);
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  body {
    font-weight: var(--gravity-font-weight-semibold);
    text-shadow: none;
  }
}

/* Increase font weight for better readability in dark mode */
[data-theme="dark"] body {
  font-weight: 450; /* Slightly heavier than regular for dark backgrounds */
  letter-spacing: 0.01em; /* Slight letter spacing for readability */
}

/* ================================
 * FONT FEATURE SUPPORT
 * ================================ */

/* Enable advanced typography features when available */
.gravity-advanced-typography {
  font-feature-settings: 
    "kern" 1,     /* Kerning */
    "liga" 1,     /* Ligatures */
    "calt" 1,     /* Contextual alternates */
    "zero" 1,     /* Slashed zero */
    "ss01" 1;     /* Stylistic set 1 */
}

/* Disable ligatures for code and input fields */
code,
pre,
input,
textarea,
.gravity-no-ligatures {
  font-feature-settings: "liga" 0, "calt" 0;
  font-variant-ligatures: none;
}

/* ================================
 * PRINT FONT OPTIMIZATION
 * ================================ */

@media print {
  body {
    font-family: 
      "Times New Roman",
      "Liberation Serif",
      "DejaVu Serif",
      serif;
    font-size: 11pt;
    line-height: 1.4;
    color: black;
  }
  
  /* Use serif fonts for better print readability */
  h1, h2, h3, h4, h5, h6 {
    font-family: 
      "Times New Roman",
      "Liberation Serif", 
      "DejaVu Serif",
      serif;
    font-weight: bold;
  }
}

/* ================================
 * FONT LOADING ERROR HANDLING
 * ================================ */

/* Fallback if Google Fonts fails to load */
@supports not (font-display: swap) {
  body {
    font-family: 
      "Helvetica Neue",
      Arial,
      sans-serif;
  }
}

/* Network-aware font loading */
@media (prefers-reduced-data: reduce) {
  /* Skip web fonts on slow connections */
  body {
    font-family: 
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
  }
}

/* ================================
 * INTERACTIVE TYPOGRAPHY SECTION SUPPORT
 * ================================ */

/* Additional CSS custom properties for interactive controls */
:root {
  /* Interactive typography scaling */
  --gravity-typography-scale: 1.0;
  --gravity-line-height-scale: 1.5;
  
  /* Dynamic font sizes (computed) */
  --gravity-font-size-xs-computed: calc(var(--gravity-font-size-xs) * var(--gravity-typography-scale));
  --gravity-font-size-sm-computed: calc(var(--gravity-font-size-sm) * var(--gravity-typography-scale));
  --gravity-font-size-base-computed: calc(var(--gravity-font-size-base) * var(--gravity-typography-scale));
  --gravity-font-size-lg-computed: calc(var(--gravity-font-size-lg) * var(--gravity-typography-scale));
  --gravity-font-size-xl-computed: calc(var(--gravity-font-size-xl) * var(--gravity-typography-scale));
  --gravity-font-size-2xl-computed: calc(var(--gravity-font-size-2xl) * var(--gravity-typography-scale));
  
  /* Interactive font weight */
  --gravity-font-weight-interactive: var(--gravity-font-weight-regular);
  
  /* Typography feature flags */
  --gravity-ligatures: "liga" 1;
  --gravity-kerning: "kern" 1;
  --gravity-tabular-nums: "pnum" 1; /* Default to proportional */
}

/* Typography showcase utilities for live editing */
.typography-interactive {
  font-family: var(--gravity-font-family-primary);
  font-weight: var(--gravity-font-weight-interactive);
  font-feature-settings: 
    var(--gravity-ligatures, "liga" 1),
    var(--gravity-kerning, "kern" 1),
    var(--gravity-tabular-nums, "pnum" 1);
  transition: 
    font-size var(--gravity-transition-fast, 0.2s ease),
    font-weight var(--gravity-transition-fast, 0.2s ease),
    line-height var(--gravity-transition-fast, 0.2s ease);
}

/* Interactive heading sizes */
.typography-interactive h1 {
  font-size: var(--gravity-font-size-2xl-computed);
  line-height: calc(1.2 * var(--gravity-line-height-scale));
}

.typography-interactive h2 {
  font-size: var(--gravity-font-size-xl-computed);
  line-height: calc(1.3 * var(--gravity-line-height-scale));
}

.typography-interactive h3 {
  font-size: var(--gravity-font-size-lg-computed);
  line-height: calc(1.4 * var(--gravity-line-height-scale));
}

.typography-interactive h4 {
  font-size: var(--gravity-font-size-base-computed);
  line-height: calc(1.4 * var(--gravity-line-height-scale));
}

/* Interactive body text */
.typography-interactive p {
  font-size: var(--gravity-font-size-base-computed);
  line-height: calc(1.6 * var(--gravity-line-height-scale));
}

.typography-interactive .text-lg {
  font-size: var(--gravity-font-size-lg-computed);
  line-height: calc(1.6 * var(--gravity-line-height-scale));
}

.typography-interactive .text-sm {
  font-size: var(--gravity-font-size-sm-computed);
  line-height: calc(1.5 * var(--gravity-line-height-scale));
}

/* Feature toggle classes for interactive section */
.ligatures-enabled {
  --gravity-ligatures: "liga" 1;
}

.ligatures-disabled {
  --gravity-ligatures: "liga" 0;
}

.kerning-enabled {
  --gravity-kerning: "kern" 1;
}

.kerning-disabled {
  --gravity-kerning: "kern" 0;
}

.tabular-numbers-enabled {
  --gravity-tabular-nums: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.tabular-numbers-disabled {
  --gravity-tabular-nums: "pnum" 1;
  font-variant-numeric: proportional-nums;
}

/* Theme-aware typography adjustments */
[data-theme="dark"] .typography-interactive {
  font-weight: calc(var(--gravity-font-weight-interactive) + 50); /* Slightly heavier in dark mode */
  letter-spacing: 0.01em;
}

/* ================================
 * TYPOGRAPHY SECTION DEMO STYLES
 * ================================ */

/* Typography section-specific utilities */
.gravity-demo-text {
  font-family: var(--gravity-font-family-primary);
  color: var(--gravity-text-primary);
  margin-bottom: 1rem;
}

.gravity-demo-heading {
  font-family: var(--gravity-font-family-primary);
  color: var(--gravity-text-primary);
  font-weight: var(--gravity-font-weight-semibold);
  margin-bottom: 0.75rem;
}

/* Live preview container */
.typography-preview {
  padding: 2rem;
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: 8px;
  margin: 1rem 0;
  transition: all var(--gravity-transition-normal, 0.3s ease);
}

[data-theme="dark"] .typography-preview {
  background: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-secondary);
}

/* Feature demonstration styles */
.feature-showcase {
  font-size: 18px;
  line-height: 1.6;
  padding: 1rem;
  background: var(--gravity-bg-secondary);
  border-radius: 4px;
  margin: 0.5rem 0;
}

/* Typography controls styling */
.typography-control {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.typography-control label {
  font-weight: var(--gravity-font-weight-semibold);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-secondary);
}

/* Accessibility enhancements for interactive elements */
@media (prefers-reduced-motion: reduce) {
  .typography-interactive,
  .typography-preview {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .typography-interactive {
    font-weight: var(--gravity-font-weight-semibold);
    text-shadow: none;
  }
  
  .typography-preview {
    border-width: 2px;
  }
}

/* ========================================
 * typography/headings.css
 * ======================================== */

/*
 * Gravity UI 2.0 Heading System
 * 
 * H1-H6 typography system based on exact Page 4 specifications
 * 24px/28px, 20px/26px, 18px/24px with semantic utility classes
 */

/* ================================
 * HEADING FUNDAMENTALS
 * ================================ */

/* Base heading styles - applied to all headings */
h1, h2, h3, h4, h5, h6,
.gravity-h1, .gravity-h2, .gravity-h3, .gravity-h4, .gravity-h5, .gravity-h6 {
  font-family: var(--gravity-font-family-primary);
  font-weight: var(--gravity-font-weight-semibold);
  line-height: var(--gravity-line-height-tight);
  color: var(--gravity-text-primary);
  margin: 0;
  letter-spacing: -0.01em; /* Slight negative letter spacing for headings */
}

/* ================================
 * HEADING HIERARCHY (Page 4 Specifications)
 * ================================ */

/* H1 - Largest heading (24px/28px) */
h1, .gravity-h1 {
  font-size: var(--gravity-font-size-h1);
  line-height: var(--gravity-line-height-h1);
  margin-bottom: var(--gravity-space-6);
}

/* H2 - Major section heading (20px/26px) */
h2, .gravity-h2 {
  font-size: var(--gravity-font-size-h2);
  line-height: var(--gravity-line-height-h2);
  margin-bottom: var(--gravity-space-5);
}

/* H3 - Subsection heading (18px/24px) */
h3, .gravity-h3 {
  font-size: var(--gravity-font-size-h3);
  line-height: var(--gravity-line-height-h3);
  margin-bottom: var(--gravity-space-4);
}

/* H4 - Minor heading (16px/22px) */
h4, .gravity-h4 {
  font-size: var(--gravity-font-size-h4);
  line-height: var(--gravity-line-height-h4);
  margin-bottom: var(--gravity-space-3);
}

/* H5 - Small heading (14px/20px) */
h5, .gravity-h5 {
  font-size: var(--gravity-font-size-h5);
  line-height: var(--gravity-line-height-h5);
  margin-bottom: var(--gravity-space-3);
}

/* H6 - Smallest heading (12px/18px) */
h6, .gravity-h6 {
  font-size: var(--gravity-font-size-h6);
  line-height: var(--gravity-line-height-h6);
  margin-bottom: var(--gravity-space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gravity-text-secondary);
}

/* ================================
 * HEADING VARIANTS
 * ================================ */

/* Display heading - Extra large for hero sections */
.gravity-heading-display {
  font-size: clamp(2rem, 5vw, 3rem); /* Responsive 32px-48px */
  line-height: 1.1;
  font-weight: var(--gravity-font-weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--gravity-space-8);
}

/* Subtitle - Pairs with main headings */
.gravity-heading-subtitle {
  font-size: var(--gravity-font-size-body-large);
  line-height: var(--gravity-line-height-normal);
  font-weight: var(--gravity-font-weight-regular);
  color: var(--gravity-text-secondary);
  margin-bottom: var(--gravity-space-4);
}

/* Eyebrow heading - Small text above main heading */
.gravity-heading-eyebrow {
  font-size: var(--gravity-font-size-small);
  line-height: var(--gravity-line-height-tight);
  font-weight: var(--gravity-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gravity-brand-primary);
  margin-bottom: var(--gravity-space-2);
}

/* ================================
 * HEADING SPACING UTILITIES
 * ================================ */

/* No bottom margin - for custom spacing */
.gravity-heading-no-margin {
  margin-bottom: 0;
}

/* Extra bottom margin */
.gravity-heading-margin-large {
  margin-bottom: var(--gravity-space-8);
}

/* Small bottom margin */
.gravity-heading-margin-small {
  margin-bottom: var(--gravity-space-2);
}

/* ================================
 * HEADING COLOR VARIANTS
 * ================================ */

/* Primary brand color */
.gravity-heading-primary {
  color: var(--gravity-brand-primary);
}

/* Secondary text color */
.gravity-heading-secondary {
  color: var(--gravity-text-secondary);
}

/* Muted text color */
.gravity-heading-muted {
  color: var(--gravity-text-muted);
}

/* Inverse color for dark backgrounds */
.gravity-heading-inverse {
  color: var(--gravity-text-inverse);
}

/* Success color */
.gravity-heading-success {
  color: var(--gravity-state-success);
}

/* Warning color */
.gravity-heading-warning {
  color: var(--gravity-state-warning);
}

/* Error color */
.gravity-heading-error {
  color: var(--gravity-state-error);
}

/* ================================
 * HEADING WEIGHT VARIANTS
 * ================================ */

/* Regular weight override */
.gravity-heading-regular {
  font-weight: var(--gravity-font-weight-regular);
}

/* Semibold weight (default, but explicit) */
.gravity-heading-semibold {
  font-weight: var(--gravity-font-weight-semibold);
}

/* ================================
 * RESPONSIVE HEADING ADJUSTMENTS
 * ================================ */

/* Tablet adjustments */
@media (min-width: 591px) and (max-width: 1078px) {
  h1, .gravity-h1 {
    font-size: calc(var(--gravity-font-size-h1) * 0.95);
  }
  
  .gravity-heading-display {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
}

/* Phone adjustments - smaller sizes for mobile */
@media (max-width: 590px) {
  h1, .gravity-h1 {
    font-size: calc(var(--gravity-font-size-h1) * 0.9);
    line-height: 1.2;
  }
  
  h2, .gravity-h2 {
    font-size: calc(var(--gravity-font-size-h2) * 0.95);
  }
  
  .gravity-heading-display {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.15;
  }
  
  /* Reduce margins on mobile */
  h1, .gravity-h1 { margin-bottom: var(--gravity-space-4); }
  h2, .gravity-h2 { margin-bottom: var(--gravity-space-3); }
  h3, .gravity-h3 { margin-bottom: var(--gravity-space-3); }
}

/* ================================
 * HEADING GROUPING PATTERNS
 * ================================ */

/* When headings are grouped together */
h1 + h2,
h1 + .gravity-heading-subtitle,
h2 + h3,
h3 + h4,
.gravity-h1 + .gravity-h2,
.gravity-h1 + .gravity-heading-subtitle,
.gravity-h2 + .gravity-h3,
.gravity-h3 + .gravity-h4 {
  margin-top: calc(var(--gravity-space-4) * -0.5);
}

/* Eyebrow + heading pattern */
.gravity-heading-eyebrow + h1,
.gravity-heading-eyebrow + h2,
.gravity-heading-eyebrow + h3,
.gravity-heading-eyebrow + .gravity-h1,
.gravity-heading-eyebrow + .gravity-h2,
.gravity-heading-eyebrow + .gravity-h3 {
  margin-top: 0;
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

/* Improve contrast in high contrast mode */
@media (prefers-contrast: high) {
  h1, h2, h3, h4, h5, h6,
  .gravity-h1, .gravity-h2, .gravity-h3, .gravity-h4, .gravity-h5, .gravity-h6 {
    color: var(--gravity-text-primary);
    font-weight: var(--gravity-font-weight-semibold);
  }
  
  .gravity-heading-muted,
  .gravity-heading-secondary {
    color: var(--gravity-text-primary);
  }
}

/* Dark theme adjustments */
[data-theme="dark"] {
  h1, h2, h3, h4, h5, h6,
  .gravity-h1, .gravity-h2, .gravity-h3, .gravity-h4, .gravity-h5, .gravity-h6 {
    font-weight: 500; /* Slightly lighter weight for dark backgrounds */
  }
}

/* ================================
 * HEADING LINK STYLES
 * ================================ */

/* Links within headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.gravity-h1 a, .gravity-h2 a, .gravity-h3 a, .gravity-h4 a, .gravity-h5 a, .gravity-h6 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--gravity-transition-fast);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.gravity-h1 a:hover, .gravity-h2 a:hover, .gravity-h3 a:hover, .gravity-h4 a:hover, .gravity-h5 a:hover, .gravity-h6 a:hover {
  color: var(--gravity-brand-primary);
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  h1, h2, h3, h4, h5, h6,
  .gravity-h1, .gravity-h2, .gravity-h3, .gravity-h4, .gravity-h5, .gravity-h6 {
    color: black;
    break-after: avoid;
    break-inside: avoid;
  }
  
  h1, .gravity-h1 { font-size: 18pt; }
  h2, .gravity-h2 { font-size: 16pt; }
  h3, .gravity-h3 { font-size: 14pt; }
  h4, .gravity-h4 { font-size: 12pt; }
  h5, .gravity-h5 { font-size: 11pt; }
  h6, .gravity-h6 { font-size: 10pt; }
  
  .gravity-heading-display {
    font-size: 24pt;
  }
}

/* ================================
 * HEADING ANIMATIONS
 * ================================ */

/* Subtle fade in for headings when they appear */
@media (prefers-reduced-motion: no-preference) {
  h1, h2, h3, h4, h5, h6,
  .gravity-h1, .gravity-h2, .gravity-h3, .gravity-h4, .gravity-h5, .gravity-h6 {
    animation: gravity-heading-appear 0.6s ease-out;
  }
}

@keyframes gravity-heading-appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================
 * SPECIAL USE CASES
 * ================================ */

/* Heading with icon */
.gravity-heading-with-icon {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-2);
}

.gravity-heading-with-icon .gravity-icon {
  flex-shrink: 0;
}

/* Heading with badge/tag */
.gravity-heading-with-badge {
  display: flex;
  align-items: baseline;
  gap: var(--gravity-space-3);
  flex-wrap: wrap;
}

/* Truncated heading */
.gravity-heading-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multiline truncated heading */
.gravity-heading-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
 * typography/utilities.css
 * ======================================== */

/*
 * Gravity UI 2.0 Typography Utilities
 * 
 * Comprehensive text utility classes for alignment, spacing, and presentation
 * Follows modern utility-first CSS patterns while maintaining design system consistency
 */

/* ================================
 * FONT WEIGHT UTILITIES
 * ================================ */

.gravity-font-thin { font-weight: 100; }
.gravity-font-light { font-weight: 300; }
.gravity-font-normal { font-weight: 400; }
.gravity-font-medium { font-weight: 500; }
.gravity-font-semibold { font-weight: 600; }
.gravity-font-bold { font-weight: 700; }
.gravity-font-extrabold { font-weight: 800; }
.gravity-font-black { font-weight: 900; }

/* Semantic aliases */
.gravity-text-sm { font-size: var(--gravity-font-size-small); }
.gravity-text-md { font-size: var(--gravity-font-size-body); }
.gravity-text-lg { font-size: var(--gravity-font-size-body-large); }

/* ================================
 * TEXT ALIGNMENT UTILITIES
 * ================================ */

.gravity-text-left {
  text-align: left;
}

.gravity-text-center {
  text-align: center;
}

.gravity-text-right {
  text-align: right;
}

.gravity-text-justify {
  text-align: justify;
}

/* Responsive text alignment */
@media (max-width: 590px) {
  .gravity-text-left-mobile {
    text-align: left;
  }
  
  .gravity-text-center-mobile {
    text-align: center;
  }
  
  .gravity-text-right-mobile {
    text-align: right;
  }
}

@media (min-width: 591px) {
  .gravity-text-left-tablet-up {
    text-align: left;
  }
  
  .gravity-text-center-tablet-up {
    text-align: center;
  }
  
  .gravity-text-right-tablet-up {
    text-align: right;
  }
}

@media (min-width: 1079px) {
  .gravity-text-left-desktop {
    text-align: left;
  }
  
  .gravity-text-center-desktop {
    text-align: center;
  }
  
  .gravity-text-right-desktop {
    text-align: right;
  }
}

/* ================================
 * TEXT TRANSFORMATION UTILITIES
 * ================================ */

.gravity-text-uppercase {
  text-transform: uppercase;
}

.gravity-text-lowercase {
  text-transform: lowercase;
}

.gravity-text-capitalize {
  text-transform: capitalize;
}

.gravity-text-normal-case {
  text-transform: none;
}

/* ================================
 * FONT SIZE UTILITIES
 * ================================ */

.gravity-text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
}

.gravity-text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}

.gravity-text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}

.gravity-text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.gravity-text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.gravity-text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
}

.gravity-text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}

.gravity-text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
}

/* ================================
 * FONT WEIGHT UTILITIES
 * ================================ */

.gravity-font-thin {
  font-weight: 100;
}

.gravity-font-extralight {
  font-weight: 200;
}

.gravity-font-light {
  font-weight: 300;
}

.gravity-font-normal {
  font-weight: 400;
}

.gravity-font-medium {
  font-weight: 500;
}

.gravity-font-semibold {
  font-weight: 600;
}

.gravity-font-bold {
  font-weight: 700;
}

.gravity-font-extrabold {
  font-weight: 800;
}

.gravity-font-black {
  font-weight: 900;
}

/* ================================
 * LINE HEIGHT UTILITIES
 * ================================ */

.gravity-leading-none {
  line-height: 1;
}

.gravity-leading-tight {
  line-height: 1.25;
}

.gravity-leading-snug {
  line-height: 1.375;
}

.gravity-leading-normal {
  line-height: 1.5;
}

.gravity-leading-relaxed {
  line-height: 1.625;
}

.gravity-leading-loose {
  line-height: 2;
}

/* Specific line heights for design system */
.gravity-leading-single {
  line-height: 1.25; /* Single line from Page 4 */
}

.gravity-leading-multi {
  line-height: 1.5; /* Multi-line from Page 4 */
}

/* ================================
 * LETTER SPACING UTILITIES
 * ================================ */

.gravity-tracking-tighter {
  letter-spacing: -0.05em;
}

.gravity-tracking-tight {
  letter-spacing: -0.025em;
}

.gravity-tracking-normal {
  letter-spacing: 0;
}

.gravity-tracking-wide {
  letter-spacing: 0.025em;
}

.gravity-tracking-wider {
  letter-spacing: 0.05em;
}

.gravity-tracking-widest {
  letter-spacing: 0.1em;
}

/* ================================
 * TEXT DECORATION UTILITIES
 * ================================ */

.gravity-underline {
  text-decoration: underline;
}

.gravity-overline {
  text-decoration: overline;
}

.gravity-line-through {
  text-decoration: line-through;
}

.gravity-no-underline {
  text-decoration: none;
}

/* Decoration styles */
.gravity-decoration-solid {
  text-decoration-style: solid;
}

.gravity-decoration-double {
  text-decoration-style: double;
}

.gravity-decoration-dotted {
  text-decoration-style: dotted;
}

.gravity-decoration-dashed {
  text-decoration-style: dashed;
}

.gravity-decoration-wavy {
  text-decoration-style: wavy;
}

/* Decoration thickness */
.gravity-decoration-auto {
  text-decoration-thickness: auto;
}

.gravity-decoration-from-font {
  text-decoration-thickness: from-font;
}

.gravity-decoration-0 {
  text-decoration-thickness: 0;
}

.gravity-decoration-1 {
  text-decoration-thickness: 1px;
}

.gravity-decoration-2 {
  text-decoration-thickness: 2px;
}

.gravity-decoration-4 {
  text-decoration-thickness: 4px;
}

.gravity-decoration-8 {
  text-decoration-thickness: 8px;
}

/* ================================
 * TEXT OVERFLOW UTILITIES
 * ================================ */

.gravity-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-text-ellipsis {
  text-overflow: ellipsis;
}

.gravity-text-clip {
  text-overflow: clip;
}

/* Multi-line truncation */
.gravity-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gravity-line-clamp-none {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* ================================
 * WHITE SPACE UTILITIES
 * ================================ */

.gravity-whitespace-normal {
  white-space: normal;
}

.gravity-whitespace-nowrap {
  white-space: nowrap;
}

.gravity-whitespace-pre {
  white-space: pre;
}

.gravity-whitespace-pre-line {
  white-space: pre-line;
}

.gravity-whitespace-pre-wrap {
  white-space: pre-wrap;
}

.gravity-whitespace-break-spaces {
  white-space: break-spaces;
}

/* ================================
 * WORD BREAK UTILITIES
 * ================================ */

.gravity-break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.gravity-break-words {
  overflow-wrap: break-word;
}

.gravity-break-all {
  word-break: break-all;
}

.gravity-break-keep {
  word-break: keep-all;
}

/* ================================
 * HYPHENS UTILITIES
 * ================================ */

.gravity-hyphens-none {
  hyphens: none;
}

.gravity-hyphens-manual {
  hyphens: manual;
}

.gravity-hyphens-auto {
  hyphens: auto;
}

/* ================================
 * TEXT SELECTION UTILITIES
 * ================================ */

.gravity-select-none {
  user-select: none;
}

.gravity-select-text {
  user-select: text;
}

.gravity-select-all {
  user-select: all;
}

.gravity-select-auto {
  user-select: auto;
}

/* ================================
 * FONT STYLE UTILITIES
 * ================================ */

.gravity-italic {
  font-style: italic;
}

.gravity-not-italic {
  font-style: normal;
}

/* ================================
 * FONT VARIANT UTILITIES
 * ================================ */

.gravity-normal-nums {
  font-variant-numeric: normal;
}

.gravity-ordinal {
  font-variant-numeric: ordinal;
}

.gravity-slashed-zero {
  font-variant-numeric: slashed-zero;
}

.gravity-lining-nums {
  font-variant-numeric: lining-nums;
}

.gravity-oldstyle-nums {
  font-variant-numeric: oldstyle-nums;
}

.gravity-proportional-nums {
  font-variant-numeric: proportional-nums;
}

.gravity-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.gravity-diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}

.gravity-stacked-fractions {
  font-variant-numeric: stacked-fractions;
}

/* ================================
 * TEXT INDENTATION UTILITIES
 * ================================ */

.gravity-indent-0 {
  text-indent: 0;
}

.gravity-indent-px {
  text-indent: 1px;
}

.gravity-indent-0-5 {
  text-indent: 0.125rem;
}

.gravity-indent-1 {
  text-indent: 0.25rem;
}

.gravity-indent-1-5 {
  text-indent: 0.375rem;
}

.gravity-indent-2 {
  text-indent: 0.5rem;
}

.gravity-indent-2-5 {
  text-indent: 0.625rem;
}

.gravity-indent-3 {
  text-indent: 0.75rem;
}

.gravity-indent-3-5 {
  text-indent: 0.875rem;
}

.gravity-indent-4 {
  text-indent: 1rem;
}

.gravity-indent-5 {
  text-indent: 1.25rem;
}

.gravity-indent-6 {
  text-indent: 1.5rem;
}

.gravity-indent-8 {
  text-indent: 2rem;
}

.gravity-indent-10 {
  text-indent: 2.5rem;
}

.gravity-indent-12 {
  text-indent: 3rem;
}

.gravity-indent-16 {
  text-indent: 4rem;
}

.gravity-indent-20 {
  text-indent: 5rem;
}

.gravity-indent-24 {
  text-indent: 6rem;
}

.gravity-indent-32 {
  text-indent: 8rem;
}

.gravity-indent-40 {
  text-indent: 10rem;
}

.gravity-indent-48 {
  text-indent: 12rem;
}

.gravity-indent-56 {
  text-indent: 14rem;
}

.gravity-indent-64 {
  text-indent: 16rem;
}

/* ================================
 * VERTICAL ALIGNMENT UTILITIES
 * ================================ */

.gravity-align-baseline {
  vertical-align: baseline;
}

.gravity-align-top {
  vertical-align: top;
}

.gravity-align-middle {
  vertical-align: middle;
}

.gravity-align-bottom {
  vertical-align: bottom;
}

.gravity-align-text-top {
  vertical-align: text-top;
}

.gravity-align-text-bottom {
  vertical-align: text-bottom;
}

.gravity-align-sub {
  vertical-align: sub;
}

.gravity-align-super {
  vertical-align: super;
}

/* ================================
 * CONTENT UTILITIES
 * ================================ */

.gravity-content-none {
  content: none;
}

/* Common content values */
.gravity-content-before-arrow::before {
  content: "";
}

.gravity-content-after-arrow::after {
  content: "";
}

.gravity-content-before-bullet::before {
  content: "";
}

.gravity-content-after-bullet::after {
  content: "";
}

.gravity-content-before-dash::before {
  content: "";
}

.gravity-content-after-dash::after {
  content: "";
}

/* ================================
 * LIST STYLE UTILITIES
 * ================================ */

.gravity-list-none {
  list-style-type: none;
}

.gravity-list-disc {
  list-style-type: disc;
}

.gravity-list-decimal {
  list-style-type: decimal;
}

.gravity-list-decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

.gravity-list-lower-roman {
  list-style-type: lower-roman;
}

.gravity-list-upper-roman {
  list-style-type: upper-roman;
}

.gravity-list-lower-alpha {
  list-style-type: lower-alpha;
}

.gravity-list-upper-alpha {
  list-style-type: upper-alpha;
}

/* List position */
.gravity-list-inside {
  list-style-position: inside;
}

.gravity-list-outside {
  list-style-position: outside;
}

/* ================================
 * PERFORMANCE UTILITIES
 * ================================ */

/* Force GPU acceleration for smooth text animations */
.gravity-text-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

/* Optimize font rendering */
.gravity-text-crisp {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Disable font smoothing */
.gravity-text-pixel {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ================================
 * RESPONSIVE UTILITIES
 * ================================ */

/* Phone-specific utilities */
@media (max-width: 590px) {
  .gravity-text-xs-mobile { font-size: 0.75rem; }
  .gravity-text-sm-mobile { font-size: 0.875rem; }
  .gravity-text-base-mobile { font-size: 1rem; }
  .gravity-text-lg-mobile { font-size: 1.125rem; }
  .gravity-text-xl-mobile { font-size: 1.25rem; }
  
  .gravity-truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .gravity-text-center-mobile {
    text-align: center;
  }
}

/* Tablet-specific utilities */
@media (min-width: 591px) and (max-width: 1078px) {
  .gravity-text-xs-tablet { font-size: 0.75rem; }
  .gravity-text-sm-tablet { font-size: 0.875rem; }
  .gravity-text-base-tablet { font-size: 1rem; }
  .gravity-text-lg-tablet { font-size: 1.125rem; }
  .gravity-text-xl-tablet { font-size: 1.25rem; }
}

/* Desktop-specific utilities */
@media (min-width: 1079px) {
  .gravity-text-xs-desktop { font-size: 0.75rem; }
  .gravity-text-sm-desktop { font-size: 0.875rem; }
  .gravity-text-base-desktop { font-size: 1rem; }
  .gravity-text-lg-desktop { font-size: 1.125rem; }
  .gravity-text-xl-desktop { font-size: 1.25rem; }
  .gravity-text-2xl-desktop { font-size: 1.5rem; }
  .gravity-text-3xl-desktop { font-size: 1.875rem; }
  .gravity-text-4xl-desktop { font-size: 2.25rem; }
}

/* ================================
 * PRINT UTILITIES
 * ================================ */

@media print {
  .gravity-print-hidden {
    display: none;
  }
  
  .gravity-print-visible {
    display: block;
  }
  
  /* Optimize fonts for print */
  .gravity-print-text {
    color: black;
    font-size: 11pt;
    line-height: 1.4;
  }
}

/* ========================================
 * layout/container.css
 * ======================================== */

/*
 * Gravity UI 2.0 Container System
 * 
 * Container utilities with max-widths per device from Page 9 specifications
 * Provides fluid and fixed-width containers for different breakpoints
 */

/* ================================
 * BASE CONTAINER
 * ================================ */

.gravity-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* ================================
 * RESPONSIVE CONTAINER MAX-WIDTHS
 * ================================ */

/* Phone: No max-width, full fluid */
@media (max-width: 590px) {
  .gravity-container {
    max-width: none;
    padding-left: var(--gravity-space-4);
    padding-right: var(--gravity-space-4);
  }
}

/* Tablet: 8/12 column container */
@media (min-width: 591px) and (max-width: 1078px) {
  .gravity-container {
    max-width: var(--gravity-container-tablet);
    padding-left: var(--gravity-space-6);
    padding-right: var(--gravity-space-6);
  }
}

/* Desktop: 12 column container */
@media (min-width: 1079px) {
  .gravity-container {
    max-width: var(--gravity-container-desktop);
    padding-left: var(--gravity-space-8);
    padding-right: var(--gravity-space-8);
  }
}

/* ================================
 * CONTAINER VARIANTS
 * ================================ */

/* Fluid container - always full width */
.gravity-container-fluid {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* Small container - phone optimized */
.gravity-container-sm {
  width: 100%;
  max-width: var(--gravity-container-phone);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* Medium container - tablet optimized */
.gravity-container-md {
  width: 100%;
  max-width: var(--gravity-container-tablet);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-6);
  padding-right: var(--gravity-space-6);
}

/* Large container - desktop optimized */
.gravity-container-lg {
  width: 100%;
  max-width: var(--gravity-container-desktop);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-8);
  padding-right: var(--gravity-space-8);
}

/* Extra large container - wide screens */
.gravity-container-xl {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-8);
  padding-right: var(--gravity-space-8);
}

/* Full width container - edge to edge */
.gravity-container-full {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ================================
 * CONTENT WIDTH UTILITIES
 * ================================ */

/* Prose container for readable text */
.gravity-container-prose {
  width: 100%;
  max-width: 65ch; /* Optimal reading width */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* Narrow container for forms and focused content */
.gravity-container-narrow {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* Wide container for dashboards and data */
.gravity-container-wide {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-6);
  padding-right: var(--gravity-space-6);
}

/* Auth container for login/register pages - centered, fills available height */
.gravity-container-auth {
  width: 100%;
  max-width: 480px;  /* Wider to accommodate login cards */
  min-height: calc(100vh - 60px);  /* Account for header height */
  flex: 1;  /* Fill remaining space in flex layouts */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  /* Center card horizontally */
}

/* Viewport container - full viewport height */
.gravity-container-viewport {
  width: 100%;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gravity-space-4);
  padding-right: var(--gravity-space-4);
}

/* ================================
 * SECTION CONTAINERS
 * ================================ */

/* Section with background and padding */
.gravity-section {
  width: 100%;
  padding-top: var(--gravity-space-16);
  padding-bottom: var(--gravity-space-16);
}

.gravity-section-sm {
  padding-top: var(--gravity-space-8);
  padding-bottom: var(--gravity-space-8);
}

.gravity-section-md {
  padding-top: var(--gravity-space-12);
  padding-bottom: var(--gravity-space-12);
}

.gravity-section-lg {
  padding-top: var(--gravity-space-20);
  padding-bottom: var(--gravity-space-20);
}

.gravity-section-xl {
  padding-top: var(--gravity-space-24);
  padding-bottom: var(--gravity-space-24);
}

/* ================================
 * RESPONSIVE SECTION PADDING
 * ================================ */

@media (max-width: 590px) {
  .gravity-section {
    padding-top: var(--gravity-space-12);
    padding-bottom: var(--gravity-space-12);
  }
  
  .gravity-section-sm {
    padding-top: var(--gravity-space-6);
    padding-bottom: var(--gravity-space-6);
  }
  
  .gravity-section-lg {
    padding-top: var(--gravity-space-16);
    padding-bottom: var(--gravity-space-16);
  }
  
  .gravity-section-xl {
    padding-top: var(--gravity-space-20);
    padding-bottom: var(--gravity-space-20);
  }
}

/* ================================
 * CONTAINER MODIFIERS
 * ================================ */

/* No horizontal padding */
.gravity-container-no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Reduced horizontal padding */
.gravity-container-padding-sm {
  padding-left: var(--gravity-space-2);
  padding-right: var(--gravity-space-2);
}

/* Increased horizontal padding */
.gravity-container-padding-lg {
  padding-left: var(--gravity-space-8);
  padding-right: var(--gravity-space-8);
}

/* ================================
 * CONSTRAINED WIDTHS
 * ================================ */

/* Specific width constraints */
.gravity-w-screen {
  width: 100vw;
}

.gravity-w-full {
  width: 100%;
}

.gravity-w-auto {
  width: auto;
}

.gravity-w-fit {
  width: fit-content;
}

.gravity-w-min {
  width: min-content;
}

.gravity-w-max {
  width: max-content;
}

/* Fixed widths */
.gravity-w-xs { width: 20rem; }    /* 320px */
.gravity-w-sm { width: 24rem; }    /* 384px */
.gravity-w-md { width: 28rem; }    /* 448px */
.gravity-w-lg { width: 32rem; }    /* 512px */
.gravity-w-xl { width: 36rem; }    /* 576px */
.gravity-w-2xl { width: 42rem; }   /* 672px */
.gravity-w-3xl { width: 48rem; }   /* 768px */
.gravity-w-4xl { width: 56rem; }   /* 896px */
.gravity-w-5xl { width: 64rem; }   /* 1024px */
.gravity-w-6xl { width: 72rem; }   /* 1152px */
.gravity-w-7xl { width: 80rem; }   /* 1280px */

/* Max widths */
.gravity-max-w-none { max-width: none; }
.gravity-max-w-xs { max-width: 20rem; }
.gravity-max-w-sm { max-width: 24rem; }
.gravity-max-w-md { max-width: 28rem; }
.gravity-max-w-lg { max-width: 32rem; }
.gravity-max-w-xl { max-width: 36rem; }
.gravity-max-w-2xl { max-width: 42rem; }
.gravity-max-w-3xl { max-width: 48rem; }
.gravity-max-w-4xl { max-width: 56rem; }
.gravity-max-w-5xl { max-width: 64rem; }
.gravity-max-w-6xl { max-width: 72rem; }
.gravity-max-w-7xl { max-width: 80rem; }
.gravity-max-w-full { max-width: 100%; }
.gravity-max-w-min { max-width: min-content; }
.gravity-max-w-max { max-width: max-content; }
.gravity-max-w-fit { max-width: fit-content; }
.gravity-max-w-prose { max-width: 65ch; }
.gravity-max-w-screen-sm { max-width: 640px; }
.gravity-max-w-screen-md { max-width: 768px; }
.gravity-max-w-screen-lg { max-width: 1024px; }
.gravity-max-w-screen-xl { max-width: 1280px; }
.gravity-max-w-screen-2xl { max-width: 1536px; }

/* Min widths */
.gravity-min-w-0 { min-width: 0; }
.gravity-min-w-full { min-width: 100%; }
.gravity-min-w-min { min-width: min-content; }
.gravity-min-w-max { min-width: max-content; }
.gravity-min-w-fit { min-width: fit-content; }

/* ================================
 * HEIGHT UTILITIES
 * ================================ */

.gravity-h-auto { height: auto; }
.gravity-h-full { height: 100%; }
.gravity-h-screen { height: 100vh; }
.gravity-h-min { height: min-content; }
.gravity-h-max { height: max-content; }
.gravity-h-fit { height: fit-content; }

/* Fixed heights */
.gravity-h-0 { height: 0; }
.gravity-h-px { height: 1px; }
.gravity-h-0-5 { height: 0.125rem; }
.gravity-h-1 { height: 0.25rem; }
.gravity-h-1-5 { height: 0.375rem; }
.gravity-h-2 { height: 0.5rem; }
.gravity-h-2-5 { height: 0.625rem; }
.gravity-h-3 { height: 0.75rem; }
.gravity-h-3-5 { height: 0.875rem; }
.gravity-h-4 { height: 1rem; }
.gravity-h-5 { height: 1.25rem; }
.gravity-h-6 { height: 1.5rem; }
.gravity-h-7 { height: 1.75rem; }
.gravity-h-8 { height: 2rem; }
.gravity-h-9 { height: 2.25rem; }
.gravity-h-10 { height: 2.5rem; }
.gravity-h-11 { height: 2.75rem; }
.gravity-h-12 { height: 3rem; }
.gravity-h-14 { height: 3.5rem; }
.gravity-h-16 { height: 4rem; }
.gravity-h-20 { height: 5rem; }
.gravity-h-24 { height: 6rem; }
.gravity-h-28 { height: 7rem; }
.gravity-h-32 { height: 8rem; }
.gravity-h-36 { height: 9rem; }
.gravity-h-40 { height: 10rem; }
.gravity-h-44 { height: 11rem; }
.gravity-h-48 { height: 12rem; }
.gravity-h-52 { height: 13rem; }
.gravity-h-56 { height: 14rem; }
.gravity-h-60 { height: 15rem; }
.gravity-h-64 { height: 16rem; }
.gravity-h-72 { height: 18rem; }
.gravity-h-80 { height: 20rem; }
.gravity-h-96 { height: 24rem; }

/* Max heights */
.gravity-max-h-0 { max-height: 0; }
.gravity-max-h-px { max-height: 1px; }
.gravity-max-h-0-5 { max-height: 0.125rem; }
.gravity-max-h-1 { max-height: 0.25rem; }
.gravity-max-h-1-5 { max-height: 0.375rem; }
.gravity-max-h-2 { max-height: 0.5rem; }
.gravity-max-h-2-5 { max-height: 0.625rem; }
.gravity-max-h-3 { max-height: 0.75rem; }
.gravity-max-h-3-5 { max-height: 0.875rem; }
.gravity-max-h-4 { max-height: 1rem; }
.gravity-max-h-5 { max-height: 1.25rem; }
.gravity-max-h-6 { max-height: 1.5rem; }
.gravity-max-h-7 { max-height: 1.75rem; }
.gravity-max-h-8 { max-height: 2rem; }
.gravity-max-h-9 { max-height: 2.25rem; }
.gravity-max-h-10 { max-height: 2.5rem; }
.gravity-max-h-11 { max-height: 2.75rem; }
.gravity-max-h-12 { max-height: 3rem; }
.gravity-max-h-14 { max-height: 3.5rem; }
.gravity-max-h-16 { max-height: 4rem; }
.gravity-max-h-20 { max-height: 5rem; }
.gravity-max-h-24 { max-height: 6rem; }
.gravity-max-h-28 { max-height: 7rem; }
.gravity-max-h-32 { max-height: 8rem; }
.gravity-max-h-36 { max-height: 9rem; }
.gravity-max-h-40 { max-height: 10rem; }
.gravity-max-h-44 { max-height: 11rem; }
.gravity-max-h-48 { max-height: 12rem; }
.gravity-max-h-52 { max-height: 13rem; }
.gravity-max-h-56 { max-height: 14rem; }
.gravity-max-h-60 { max-height: 15rem; }
.gravity-max-h-64 { max-height: 16rem; }
.gravity-max-h-72 { max-height: 18rem; }
.gravity-max-h-80 { max-height: 20rem; }
.gravity-max-h-96 { max-height: 24rem; }
.gravity-max-h-none { max-height: none; }
.gravity-max-h-full { max-height: 100%; }
.gravity-max-h-screen { max-height: 100vh; }
.gravity-max-h-min { max-height: min-content; }
.gravity-max-h-max { max-height: max-content; }
.gravity-max-h-fit { max-height: fit-content; }

/* Min heights */
.gravity-min-h-0 { min-height: 0; }
.gravity-min-h-full { min-height: 100%; }
.gravity-min-h-screen { min-height: 100vh; }
.gravity-min-h-min { min-height: min-content; }
.gravity-min-h-max { min-height: max-content; }
.gravity-min-h-fit { min-height: fit-content; }

/* ================================
 * PRINT OPTIMIZATIONS
 * ================================ */

@media print {
  .gravity-container,
  .gravity-container-sm,
  .gravity-container-md,
  .gravity-container-lg {
    max-width: none;
    padding-left: 0.5in;
    padding-right: 0.5in;
  }

  .gravity-section,
  .gravity-section-sm,
  .gravity-section-md,
  .gravity-section-lg,
  .gravity-section-xl {
    padding-top: 0.25in;
    padding-bottom: 0.25in;
    break-inside: avoid;
  }
}

/* ================================
 * CONTENT WRAPPER COMPONENT
 * ================================ */

.gravity-content-wrapper {
  width: 100%;
  flex: 1;  /* Fill available space in flex layouts */
  display: flex;
  flex-direction: column;
}

.gravity-content-wrapper__inner {
  padding: var(--gravity-space-4);
  flex: 1;  /* Fill available space */
  display: flex;
  flex-direction: column;
}

.gravity-content-wrapper--table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gravity-content-wrapper--card {
  background-color: var(--gravity-bg-primary);
  border-radius: var(--gravity-border-radius-lg);
  box-shadow: var(--gravity-shadow-md);
}

.gravity-content-wrapper--flat {
  background-color: transparent;
}

.gravity-content-wrapper__inner--no-padding {
  padding: 0;
}

.gravity-content-wrapper__inner--padding-sm {
  padding: var(--gravity-space-2);
}

.gravity-content-wrapper__inner--padding-lg {
  padding: var(--gravity-space-8);
}

/* ================================
 * STACK COMPONENT
 * ================================ */

.gravity-stack {
  display: flex;
}

.gravity-flex-row {
  flex-direction: row;
}

.gravity-flex-column {
  flex-direction: column;
}

.gravity-flex-wrap {
  flex-wrap: wrap;
}

.gravity-items-start {
  align-items: flex-start;
}

.gravity-items-center {
  align-items: center;
}

.gravity-items-end {
  align-items: flex-end;
}

.gravity-justify-start {
  justify-content: flex-start;
}

.gravity-justify-center {
  justify-content: center;
}

.gravity-justify-end {
  justify-content: flex-end;
}

.gravity-justify-between {
  justify-content: space-between;
}

.gravity-justify-around {
  justify-content: space-around;
}

.gravity-justify-evenly {
  justify-content: space-evenly;
}

/* ================================
 * CONTAINER HEIGHT CONSTRAINTS
 * ================================ */

/* Height constraint with scrollable overflow */
.gravity-container-height-sm {
  max-height: 15rem;  /* 240px */
  overflow-y: auto;
}

.gravity-container-height-md {
  max-height: 30rem;  /* 480px */
  overflow-y: auto;
}

.gravity-container-height-lg {
  max-height: 45rem;  /* 720px */
  overflow-y: auto;
}

.gravity-container-height-xl {
  max-height: 60rem;  /* 960px */
  overflow-y: auto;
}

.gravity-container-height-half {
  max-height: 50vh;
  overflow-y: auto;
}

/* ========================================
 * layout/grid.css
 * ======================================== */

/*
 * Gravity UI 2.0 Grid System
 * 
 * Responsive grid system based on exact Page 9 specifications:
 * - Phone: 351-591px, 4 columns, 16px gutters
 * - Tablet: 727-983px, 8/12 columns, 16/24px gutters  
 * - Desktop: 1079px+, 12 columns, 24px gutters
 */

/* ================================
 * GRID CONTAINER
 * ================================ */

.gravity-grid {
  display: grid;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gravity-space-4); /* Base padding */
}

/* CSS Grid implementation with automatic columns */
.gravity-grid-auto {
  display: grid;
  gap: var(--gravity-grid-gutter-phone);
  grid-template-columns: repeat(var(--gravity-grid-columns-phone), 1fr);
}

/* Flexbox fallback for better browser support */
.gravity-grid-flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gravity-grid-gutter-phone) / -2);
}

.gravity-grid-flex > * {
  padding: 0 calc(var(--gravity-grid-gutter-phone) / 2);
}

/* ================================
 * PHONE GRID (351-591px, 4 columns, 16px gutters)
 * ================================ */

@media (max-width: 590px) {
  .gravity-grid-auto {
    gap: var(--gravity-grid-gutter-phone);
    grid-template-columns: repeat(var(--gravity-grid-columns-phone), 1fr);
  }
  
  .gravity-grid-flex {
    margin: 0 calc(var(--gravity-grid-gutter-phone) / -2);
  }
  
  .gravity-grid-flex > * {
    padding: 0 calc(var(--gravity-grid-gutter-phone) / 2);
  }
  
  /* Phone column utilities */
  .gravity-col-phone-1 { grid-column: span 1; width: 25%; }
  .gravity-col-phone-2 { grid-column: span 2; width: 50%; }
  .gravity-col-phone-3 { grid-column: span 3; width: 75%; }
  .gravity-col-phone-4 { grid-column: span 4; width: 100%; }
  .gravity-col-phone-full { grid-column: 1 / -1; width: 100%; }
  
  /* Phone offset utilities */
  .gravity-col-start-phone-1 { grid-column-start: 1; }
  .gravity-col-start-phone-2 { grid-column-start: 2; }
  .gravity-col-start-phone-3 { grid-column-start: 3; }
  .gravity-col-start-phone-4 { grid-column-start: 4; }
  
  .gravity-col-end-phone-1 { grid-column-end: 1; }
  .gravity-col-end-phone-2 { grid-column-end: 2; }
  .gravity-col-end-phone-3 { grid-column-end: 3; }
  .gravity-col-end-phone-4 { grid-column-end: 4; }
  .gravity-col-end-phone-5 { grid-column-end: 5; }
}

/* ================================
 * TABLET GRID (591-1078px, 8/12 columns, 16/24px gutters)
 * ================================ */

@media (min-width: 591px) and (max-width: 1078px) {
  .gravity-grid-auto {
    gap: var(--gravity-grid-gutter-tablet);
    grid-template-columns: repeat(var(--gravity-grid-columns-tablet), 1fr);
  }
  
  .gravity-grid-flex {
    margin: 0 calc(var(--gravity-grid-gutter-tablet) / -2);
  }
  
  .gravity-grid-flex > * {
    padding: 0 calc(var(--gravity-grid-gutter-tablet) / 2);
  }
  
  /* Tablet 8-column system */
  .gravity-col-tablet-1 { grid-column: span 1; width: 12.5%; }
  .gravity-col-tablet-2 { grid-column: span 2; width: 25%; }
  .gravity-col-tablet-3 { grid-column: span 3; width: 37.5%; }
  .gravity-col-tablet-4 { grid-column: span 4; width: 50%; }
  .gravity-col-tablet-5 { grid-column: span 5; width: 62.5%; }
  .gravity-col-tablet-6 { grid-column: span 6; width: 75%; }
  .gravity-col-tablet-7 { grid-column: span 7; width: 87.5%; }
  .gravity-col-tablet-8 { grid-column: span 8; width: 100%; }
  .gravity-col-tablet-full { grid-column: 1 / -1; width: 100%; }
  
  /* Tablet 12-column alternative (when using 12-col mode) */
  .gravity-grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  
  .gravity-col-tablet-12-1 { grid-column: span 1; width: 8.333%; }
  .gravity-col-tablet-12-2 { grid-column: span 2; width: 16.667%; }
  .gravity-col-tablet-12-3 { grid-column: span 3; width: 25%; }
  .gravity-col-tablet-12-4 { grid-column: span 4; width: 33.333%; }
  .gravity-col-tablet-12-5 { grid-column: span 5; width: 41.667%; }
  .gravity-col-tablet-12-6 { grid-column: span 6; width: 50%; }
  .gravity-col-tablet-12-7 { grid-column: span 7; width: 58.333%; }
  .gravity-col-tablet-12-8 { grid-column: span 8; width: 66.667%; }
  .gravity-col-tablet-12-9 { grid-column: span 9; width: 75%; }
  .gravity-col-tablet-12-10 { grid-column: span 10; width: 83.333%; }
  .gravity-col-tablet-12-11 { grid-column: span 11; width: 91.667%; }
  .gravity-col-tablet-12-12 { grid-column: span 12; width: 100%; }
  
  /* Tablet start positions */
  .gravity-col-start-tablet-1 { grid-column-start: 1; }
  .gravity-col-start-tablet-2 { grid-column-start: 2; }
  .gravity-col-start-tablet-3 { grid-column-start: 3; }
  .gravity-col-start-tablet-4 { grid-column-start: 4; }
  .gravity-col-start-tablet-5 { grid-column-start: 5; }
  .gravity-col-start-tablet-6 { grid-column-start: 6; }
  .gravity-col-start-tablet-7 { grid-column-start: 7; }
  .gravity-col-start-tablet-8 { grid-column-start: 8; }
  .gravity-col-start-tablet-9 { grid-column-start: 9; }
}

/* ================================
 * DESKTOP GRID (1079px+, 12 columns, 24px gutters)
 * ================================ */

@media (min-width: 1079px) {
  .gravity-grid-auto {
    gap: var(--gravity-grid-gutter-desktop);
    grid-template-columns: repeat(var(--gravity-grid-columns-desktop), 1fr);
  }
  
  .gravity-grid-flex {
    margin: 0 calc(var(--gravity-grid-gutter-desktop) / -2);
  }
  
  .gravity-grid-flex > * {
    padding: 0 calc(var(--gravity-grid-gutter-desktop) / 2);
  }
  
  /* Desktop 12-column system */
  .gravity-col-desktop-1 { grid-column: span 1; width: 8.333%; }
  .gravity-col-desktop-2 { grid-column: span 2; width: 16.667%; }
  .gravity-col-desktop-3 { grid-column: span 3; width: 25%; }
  .gravity-col-desktop-4 { grid-column: span 4; width: 33.333%; }
  .gravity-col-desktop-5 { grid-column: span 5; width: 41.667%; }
  .gravity-col-desktop-6 { grid-column: span 6; width: 50%; }
  .gravity-col-desktop-7 { grid-column: span 7; width: 58.333%; }
  .gravity-col-desktop-8 { grid-column: span 8; width: 66.667%; }
  .gravity-col-desktop-9 { grid-column: span 9; width: 75%; }
  .gravity-col-desktop-10 { grid-column: span 10; width: 83.333%; }
  .gravity-col-desktop-11 { grid-column: span 11; width: 91.667%; }
  .gravity-col-desktop-12 { grid-column: span 12; width: 100%; }
  .gravity-col-desktop-full { grid-column: 1 / -1; width: 100%; }
  
  /* Desktop start positions */
  .gravity-col-start-desktop-1 { grid-column-start: 1; }
  .gravity-col-start-desktop-2 { grid-column-start: 2; }
  .gravity-col-start-desktop-3 { grid-column-start: 3; }
  .gravity-col-start-desktop-4 { grid-column-start: 4; }
  .gravity-col-start-desktop-5 { grid-column-start: 5; }
  .gravity-col-start-desktop-6 { grid-column-start: 6; }
  .gravity-col-start-desktop-7 { grid-column-start: 7; }
  .gravity-col-start-desktop-8 { grid-column-start: 8; }
  .gravity-col-start-desktop-9 { grid-column-start: 9; }
  .gravity-col-start-desktop-10 { grid-column-start: 10; }
  .gravity-col-start-desktop-11 { grid-column-start: 11; }
  .gravity-col-start-desktop-12 { grid-column-start: 12; }
  
  /* Desktop end positions */
  .gravity-col-end-desktop-1 { grid-column-end: 1; }
  .gravity-col-end-desktop-2 { grid-column-end: 2; }
  .gravity-col-end-desktop-3 { grid-column-end: 3; }
  .gravity-col-end-desktop-4 { grid-column-end: 4; }
  .gravity-col-end-desktop-5 { grid-column-end: 5; }
  .gravity-col-end-desktop-6 { grid-column-end: 6; }
  .gravity-col-end-desktop-7 { grid-column-end: 7; }
  .gravity-col-end-desktop-8 { grid-column-end: 8; }
  .gravity-col-end-desktop-9 { grid-column-end: 9; }
  .gravity-col-end-desktop-10 { grid-column-end: 10; }
  .gravity-col-end-desktop-11 { grid-column-end: 11; }
  .gravity-col-end-desktop-12 { grid-column-end: 12; }
  .gravity-col-end-desktop-13 { grid-column-end: 13; }
}

/* ================================
 * UNIVERSAL COLUMN UTILITIES
 * ================================ */

/* Auto-sized columns */
.gravity-col-auto {
  grid-column: auto;
  width: auto;
}

/* Span utilities that work across breakpoints */
.gravity-col-span-1 { grid-column: span 1; }
.gravity-col-span-2 { grid-column: span 2; }
.gravity-col-span-3 { grid-column: span 3; }
.gravity-col-span-4 { grid-column: span 4; }
.gravity-col-span-5 { grid-column: span 5; }
.gravity-col-span-6 { grid-column: span 6; }
.gravity-col-span-7 { grid-column: span 7; }
.gravity-col-span-8 { grid-column: span 8; }
.gravity-col-span-9 { grid-column: span 9; }
.gravity-col-span-10 { grid-column: span 10; }
.gravity-col-span-11 { grid-column: span 11; }
.gravity-col-span-12 { grid-column: span 12; }
.gravity-col-span-full { grid-column: 1 / -1; }

/* ================================
 * ROW UTILITIES
 * ================================ */

.gravity-row-auto {
  grid-row: auto;
}

.gravity-row-span-1 { grid-row: span 1; }
.gravity-row-span-2 { grid-row: span 2; }
.gravity-row-span-3 { grid-row: span 3; }
.gravity-row-span-4 { grid-row: span 4; }
.gravity-row-span-5 { grid-row: span 5; }
.gravity-row-span-6 { grid-row: span 6; }
.gravity-row-span-full { grid-row: 1 / -1; }

.gravity-row-start-1 { grid-row-start: 1; }
.gravity-row-start-2 { grid-row-start: 2; }
.gravity-row-start-3 { grid-row-start: 3; }
.gravity-row-start-4 { grid-row-start: 4; }
.gravity-row-start-5 { grid-row-start: 5; }
.gravity-row-start-6 { grid-row-start: 6; }
.gravity-row-start-7 { grid-row-start: 7; }
.gravity-row-start-auto { grid-row-start: auto; }

.gravity-row-end-1 { grid-row-end: 1; }
.gravity-row-end-2 { grid-row-end: 2; }
.gravity-row-end-3 { grid-row-end: 3; }
.gravity-row-end-4 { grid-row-end: 4; }
.gravity-row-end-5 { grid-row-end: 5; }
.gravity-row-end-6 { grid-row-end: 6; }
.gravity-row-end-7 { grid-row-end: 7; }
.gravity-row-end-auto { grid-row-end: auto; }

/* ================================
 * GAP UTILITIES
 * ================================ */

.gravity-gap-0 { gap: 0; }
.gravity-gap-px { gap: 1px; }
.gravity-gap-0-5 { gap: 0.125rem; }
.gravity-gap-1 { gap: 0.25rem; }
.gravity-gap-1-5 { gap: 0.375rem; }
.gravity-gap-2 { gap: 0.5rem; }
.gravity-gap-2-5 { gap: 0.625rem; }
.gravity-gap-3 { gap: 0.75rem; }
.gravity-gap-3-5 { gap: 0.875rem; }
.gravity-gap-4 { gap: 1rem; }
.gravity-gap-5 { gap: 1.25rem; }
.gravity-gap-6 { gap: 1.5rem; }
.gravity-gap-7 { gap: 1.75rem; }
.gravity-gap-8 { gap: 2rem; }
.gravity-gap-9 { gap: 2.25rem; }
.gravity-gap-10 { gap: 2.5rem; }
.gravity-gap-11 { gap: 2.75rem; }
.gravity-gap-12 { gap: 3rem; }
.gravity-gap-14 { gap: 3.5rem; }
.gravity-gap-16 { gap: 4rem; }
.gravity-gap-20 { gap: 5rem; }
.gravity-gap-24 { gap: 6rem; }
.gravity-gap-28 { gap: 7rem; }
.gravity-gap-32 { gap: 8rem; }
.gravity-gap-36 { gap: 9rem; }
.gravity-gap-40 { gap: 10rem; }
.gravity-gap-44 { gap: 11rem; }
.gravity-gap-48 { gap: 12rem; }
.gravity-gap-52 { gap: 13rem; }
.gravity-gap-56 { gap: 14rem; }
.gravity-gap-60 { gap: 15rem; }
.gravity-gap-64 { gap: 16rem; }
.gravity-gap-72 { gap: 18rem; }
.gravity-gap-80 { gap: 20rem; }
.gravity-gap-96 { gap: 24rem; }

/* Row gap utilities */
.gravity-gap-y-0 { row-gap: 0; }
.gravity-gap-y-px { row-gap: 1px; }
.gravity-gap-y-0-5 { row-gap: 0.125rem; }
.gravity-gap-y-1 { row-gap: 0.25rem; }
.gravity-gap-y-1-5 { row-gap: 0.375rem; }
.gravity-gap-y-2 { row-gap: 0.5rem; }
.gravity-gap-y-2-5 { row-gap: 0.625rem; }
.gravity-gap-y-3 { row-gap: 0.75rem; }
.gravity-gap-y-3-5 { row-gap: 0.875rem; }
.gravity-gap-y-4 { row-gap: 1rem; }
.gravity-gap-y-5 { row-gap: 1.25rem; }
.gravity-gap-y-6 { row-gap: 1.5rem; }
.gravity-gap-y-8 { row-gap: 2rem; }
.gravity-gap-y-10 { row-gap: 2.5rem; }
.gravity-gap-y-12 { row-gap: 3rem; }
.gravity-gap-y-16 { row-gap: 4rem; }
.gravity-gap-y-20 { row-gap: 5rem; }
.gravity-gap-y-24 { row-gap: 6rem; }

/* Column gap utilities */
.gravity-gap-x-0 { column-gap: 0; }
.gravity-gap-x-px { column-gap: 1px; }
.gravity-gap-x-0-5 { column-gap: 0.125rem; }
.gravity-gap-x-1 { column-gap: 0.25rem; }
.gravity-gap-x-1-5 { column-gap: 0.375rem; }
.gravity-gap-x-2 { column-gap: 0.5rem; }
.gravity-gap-x-2-5 { column-gap: 0.625rem; }
.gravity-gap-x-3 { column-gap: 0.75rem; }
.gravity-gap-x-3-5 { column-gap: 0.875rem; }
.gravity-gap-x-4 { column-gap: 1rem; }
.gravity-gap-x-5 { column-gap: 1.25rem; }
.gravity-gap-x-6 { column-gap: 1.5rem; }
.gravity-gap-x-8 { column-gap: 2rem; }
.gravity-gap-x-10 { column-gap: 2.5rem; }
.gravity-gap-x-12 { column-gap: 3rem; }
.gravity-gap-x-16 { column-gap: 4rem; }
.gravity-gap-x-20 { column-gap: 5rem; }
.gravity-gap-x-24 { column-gap: 6rem; }

/* ================================
 * GRID TEMPLATE UTILITIES
 * ================================ */

.gravity-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gravity-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gravity-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gravity-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gravity-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gravity-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gravity-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gravity-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gravity-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.gravity-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.gravity-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.gravity-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gravity-grid-cols-none { grid-template-columns: none; }

/* Responsive grid columns - Medium screens (768px+) */
@media (min-width: 768px) {
  .gravity-grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .gravity-grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gravity-grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gravity-grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gravity-grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gravity-grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gravity-grid-cols-md-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .gravity-grid-cols-md-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .gravity-grid-cols-md-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .gravity-grid-cols-md-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .gravity-grid-cols-md-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .gravity-grid-cols-md-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Responsive grid columns - Large screens (1024px+) */
@media (min-width: 1024px) {
  .gravity-grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .gravity-grid-cols-lg-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.gravity-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.gravity-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gravity-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.gravity-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.gravity-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.gravity-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.gravity-grid-rows-none { grid-template-rows: none; }

/* ================================
 * GRID FLOW UTILITIES
 * ================================ */

.gravity-grid-flow-row { grid-auto-flow: row; }
.gravity-grid-flow-col { grid-auto-flow: column; }
.gravity-grid-flow-dense { grid-auto-flow: dense; }
.gravity-grid-flow-row-dense { grid-auto-flow: row dense; }
.gravity-grid-flow-col-dense { grid-auto-flow: column dense; }

/* ================================
 * AUTO GRID UTILITIES
 * ================================ */

.gravity-auto-cols-auto { grid-auto-columns: auto; }
.gravity-auto-cols-min { grid-auto-columns: min-content; }
.gravity-auto-cols-max { grid-auto-columns: max-content; }
.gravity-auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

.gravity-auto-rows-auto { grid-auto-rows: auto; }
.gravity-auto-rows-min { grid-auto-rows: min-content; }
.gravity-auto-rows-max { grid-auto-rows: max-content; }
.gravity-auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* ================================
 * GRID ITEM UTILITIES
 * ================================ */

.gravity-justify-self-auto { justify-self: auto; }
.gravity-justify-self-start { justify-self: start; }
.gravity-justify-self-end { justify-self: end; }
.gravity-justify-self-center { justify-self: center; }
.gravity-justify-self-stretch { justify-self: stretch; }

.gravity-align-self-auto { align-self: auto; }
.gravity-align-self-start { align-self: start; }
.gravity-align-self-end { align-self: end; }
.gravity-align-self-center { align-self: center; }
.gravity-align-self-stretch { align-self: stretch; }

.gravity-place-self-auto { place-self: auto; }
.gravity-place-self-start { place-self: start; }
.gravity-place-self-end { place-self: end; }
.gravity-place-self-center { place-self: center; }
.gravity-place-self-stretch { place-self: stretch; }

/* ================================
 * LEGACY FLEXBOX GRID SUPPORT
 * ================================ */

/* For older browsers that don't support CSS Grid */
@supports not (display: grid) {
  .gravity-grid-auto,
  .gravity-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .gravity-grid-auto > *,
  .gravity-grid > * {
    flex: 1;
    min-width: 0;
  }
  
  /* Fallback column widths */
  .gravity-col-span-1 { flex: 0 0 8.333%; }
  .gravity-col-span-2 { flex: 0 0 16.667%; }
  .gravity-col-span-3 { flex: 0 0 25%; }
  .gravity-col-span-4 { flex: 0 0 33.333%; }
  .gravity-col-span-6 { flex: 0 0 50%; }
  .gravity-col-span-8 { flex: 0 0 66.667%; }
  .gravity-col-span-9 { flex: 0 0 75%; }
  .gravity-col-span-12,
  .gravity-col-span-full { flex: 0 0 100%; }
}

/* ========================================
 * layout/spacing.css
 * ======================================== */

/*
 * Gravity UI 2.0 Spacing System
 * 
 * Margin and padding utilities based on 8px scale with 4px fine adjustments
 * Provides comprehensive spacing control for layouts and components
 */

/* ================================
 * MARGIN UTILITIES
 * ================================ */

/* All sides margin */
.gravity-m-0 { margin: 0; }
.gravity-m-px { margin: 1px; }
.gravity-m-0-5 { margin: var(--gravity-space-1); }
.gravity-m-1 { margin: var(--gravity-space-2); }
.gravity-m-1-5 { margin: var(--gravity-space-3); }
.gravity-m-2 { margin: var(--gravity-space-4); }
.gravity-m-2-5 { margin: var(--gravity-space-5); }
.gravity-m-3 { margin: var(--gravity-space-6); }
.gravity-m-3-5 { margin: 0.875rem; }
.gravity-m-4 { margin: var(--gravity-space-8); }
.gravity-m-5 { margin: var(--gravity-space-10); }
.gravity-m-6 { margin: var(--gravity-space-12); }
.gravity-m-7 { margin: 1.75rem; }
.gravity-m-8 { margin: var(--gravity-space-16); }
.gravity-m-9 { margin: 2.25rem; }
.gravity-m-10 { margin: var(--gravity-space-20); }
.gravity-m-11 { margin: 2.75rem; }
.gravity-m-12 { margin: var(--gravity-space-24); }
.gravity-m-14 { margin: 3.5rem; }
.gravity-m-16 { margin: var(--gravity-space-32); }
.gravity-m-20 { margin: var(--gravity-space-40); }
.gravity-m-24 { margin: var(--gravity-space-48); }
.gravity-m-28 { margin: 7rem; }
.gravity-m-32 { margin: var(--gravity-space-64); }
.gravity-m-36 { margin: 9rem; }
.gravity-m-40 { margin: 10rem; }
.gravity-m-44 { margin: 11rem; }
.gravity-m-48 { margin: 12rem; }
.gravity-m-52 { margin: 13rem; }
.gravity-m-56 { margin: 14rem; }
.gravity-m-60 { margin: 15rem; }
.gravity-m-64 { margin: 16rem; }
.gravity-m-72 { margin: 18rem; }
.gravity-m-80 { margin: 20rem; }
.gravity-m-96 { margin: 24rem; }
.gravity-m-auto { margin: auto; }

/* Horizontal margin (left and right) */
.gravity-mx-0 { margin-left: 0; margin-right: 0; }
.gravity-mx-px { margin-left: 1px; margin-right: 1px; }
.gravity-mx-0-5 { margin-left: var(--gravity-space-1); margin-right: var(--gravity-space-1); }
.gravity-mx-1 { margin-left: var(--gravity-space-2); margin-right: var(--gravity-space-2); }
.gravity-mx-1-5 { margin-left: var(--gravity-space-3); margin-right: var(--gravity-space-3); }
.gravity-mx-2 { margin-left: var(--gravity-space-4); margin-right: var(--gravity-space-4); }
.gravity-mx-2-5 { margin-left: var(--gravity-space-5); margin-right: var(--gravity-space-5); }
.gravity-mx-3 { margin-left: var(--gravity-space-6); margin-right: var(--gravity-space-6); }
.gravity-mx-3-5 { margin-left: 0.875rem; margin-right: 0.875rem; }
.gravity-mx-4 { margin-left: var(--gravity-space-8); margin-right: var(--gravity-space-8); }
.gravity-mx-5 { margin-left: var(--gravity-space-10); margin-right: var(--gravity-space-10); }
.gravity-mx-6 { margin-left: var(--gravity-space-12); margin-right: var(--gravity-space-12); }
.gravity-mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; }
.gravity-mx-8 { margin-left: var(--gravity-space-16); margin-right: var(--gravity-space-16); }
.gravity-mx-9 { margin-left: 2.25rem; margin-right: 2.25rem; }
.gravity-mx-10 { margin-left: var(--gravity-space-20); margin-right: var(--gravity-space-20); }
.gravity-mx-11 { margin-left: 2.75rem; margin-right: 2.75rem; }
.gravity-mx-12 { margin-left: var(--gravity-space-24); margin-right: var(--gravity-space-24); }
.gravity-mx-14 { margin-left: 3.5rem; margin-right: 3.5rem; }
.gravity-mx-16 { margin-left: var(--gravity-space-32); margin-right: var(--gravity-space-32); }
.gravity-mx-20 { margin-left: var(--gravity-space-40); margin-right: var(--gravity-space-40); }
.gravity-mx-24 { margin-left: var(--gravity-space-48); margin-right: var(--gravity-space-48); }
.gravity-mx-28 { margin-left: 7rem; margin-right: 7rem; }
.gravity-mx-32 { margin-left: var(--gravity-space-64); margin-right: var(--gravity-space-64); }
.gravity-mx-36 { margin-left: 9rem; margin-right: 9rem; }
.gravity-mx-40 { margin-left: 10rem; margin-right: 10rem; }
.gravity-mx-44 { margin-left: 11rem; margin-right: 11rem; }
.gravity-mx-48 { margin-left: 12rem; margin-right: 12rem; }
.gravity-mx-52 { margin-left: 13rem; margin-right: 13rem; }
.gravity-mx-56 { margin-left: 14rem; margin-right: 14rem; }
.gravity-mx-60 { margin-left: 15rem; margin-right: 15rem; }
.gravity-mx-64 { margin-left: 16rem; margin-right: 16rem; }
.gravity-mx-72 { margin-left: 18rem; margin-right: 18rem; }
.gravity-mx-80 { margin-left: 20rem; margin-right: 20rem; }
.gravity-mx-96 { margin-left: 24rem; margin-right: 24rem; }
.gravity-mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical margin (top and bottom) */
.gravity-my-0 { margin-top: 0; margin-bottom: 0; }
.gravity-my-px { margin-top: 1px; margin-bottom: 1px; }
.gravity-my-0-5 { margin-top: var(--gravity-space-1); margin-bottom: var(--gravity-space-1); }
.gravity-my-1 { margin-top: var(--gravity-space-2); margin-bottom: var(--gravity-space-2); }
.gravity-my-1-5 { margin-top: var(--gravity-space-3); margin-bottom: var(--gravity-space-3); }
.gravity-my-2 { margin-top: var(--gravity-space-4); margin-bottom: var(--gravity-space-4); }
.gravity-my-2-5 { margin-top: var(--gravity-space-5); margin-bottom: var(--gravity-space-5); }
.gravity-my-3 { margin-top: var(--gravity-space-6); margin-bottom: var(--gravity-space-6); }
.gravity-my-3-5 { margin-top: 0.875rem; margin-bottom: 0.875rem; }
.gravity-my-4 { margin-top: var(--gravity-space-8); margin-bottom: var(--gravity-space-8); }
.gravity-my-5 { margin-top: var(--gravity-space-10); margin-bottom: var(--gravity-space-10); }
.gravity-my-6 { margin-top: var(--gravity-space-12); margin-bottom: var(--gravity-space-12); }
.gravity-my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.gravity-my-8 { margin-top: var(--gravity-space-16); margin-bottom: var(--gravity-space-16); }
.gravity-my-9 { margin-top: 2.25rem; margin-bottom: 2.25rem; }
.gravity-my-10 { margin-top: var(--gravity-space-20); margin-bottom: var(--gravity-space-20); }
.gravity-my-11 { margin-top: 2.75rem; margin-bottom: 2.75rem; }
.gravity-my-12 { margin-top: var(--gravity-space-24); margin-bottom: var(--gravity-space-24); }
.gravity-my-14 { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.gravity-my-16 { margin-top: var(--gravity-space-32); margin-bottom: var(--gravity-space-32); }
.gravity-my-20 { margin-top: var(--gravity-space-40); margin-bottom: var(--gravity-space-40); }
.gravity-my-24 { margin-top: var(--gravity-space-48); margin-bottom: var(--gravity-space-48); }
.gravity-my-28 { margin-top: 7rem; margin-bottom: 7rem; }
.gravity-my-32 { margin-top: var(--gravity-space-64); margin-bottom: var(--gravity-space-64); }
.gravity-my-36 { margin-top: 9rem; margin-bottom: 9rem; }
.gravity-my-40 { margin-top: 10rem; margin-bottom: 10rem; }
.gravity-my-44 { margin-top: 11rem; margin-bottom: 11rem; }
.gravity-my-48 { margin-top: 12rem; margin-bottom: 12rem; }
.gravity-my-52 { margin-top: 13rem; margin-bottom: 13rem; }
.gravity-my-56 { margin-top: 14rem; margin-bottom: 14rem; }
.gravity-my-60 { margin-top: 15rem; margin-bottom: 15rem; }
.gravity-my-64 { margin-top: 16rem; margin-bottom: 16rem; }
.gravity-my-72 { margin-top: 18rem; margin-bottom: 18rem; }
.gravity-my-80 { margin-top: 20rem; margin-bottom: 20rem; }
.gravity-my-96 { margin-top: 24rem; margin-bottom: 24rem; }
.gravity-my-auto { margin-top: auto; margin-bottom: auto; }

/* Individual margin sides */
.gravity-mt-0 { margin-top: 0; }
.gravity-mt-px { margin-top: 1px; }
.gravity-mt-0-5 { margin-top: var(--gravity-space-1); }
.gravity-mt-1 { margin-top: var(--gravity-space-2); }
.gravity-mt-1-5 { margin-top: var(--gravity-space-3); }
.gravity-mt-2 { margin-top: var(--gravity-space-4); }
.gravity-mt-2-5 { margin-top: var(--gravity-space-5); }
.gravity-mt-3 { margin-top: var(--gravity-space-6); }
.gravity-mt-3-5 { margin-top: 0.875rem; }
.gravity-mt-4 { margin-top: var(--gravity-space-8); }
.gravity-mt-5 { margin-top: var(--gravity-space-10); }
.gravity-mt-6 { margin-top: var(--gravity-space-12); }
.gravity-mt-7 { margin-top: 1.75rem; }
.gravity-mt-8 { margin-top: var(--gravity-space-16); }
.gravity-mt-9 { margin-top: 2.25rem; }
.gravity-mt-10 { margin-top: var(--gravity-space-20); }
.gravity-mt-11 { margin-top: 2.75rem; }
.gravity-mt-12 { margin-top: var(--gravity-space-24); }
.gravity-mt-14 { margin-top: 3.5rem; }
.gravity-mt-16 { margin-top: var(--gravity-space-32); }
.gravity-mt-20 { margin-top: var(--gravity-space-40); }
.gravity-mt-24 { margin-top: var(--gravity-space-48); }
.gravity-mt-28 { margin-top: 7rem; }
.gravity-mt-32 { margin-top: var(--gravity-space-64); }
.gravity-mt-36 { margin-top: 9rem; }
.gravity-mt-40 { margin-top: 10rem; }
.gravity-mt-44 { margin-top: 11rem; }
.gravity-mt-48 { margin-top: 12rem; }
.gravity-mt-52 { margin-top: 13rem; }
.gravity-mt-56 { margin-top: 14rem; }
.gravity-mt-60 { margin-top: 15rem; }
.gravity-mt-64 { margin-top: 16rem; }
.gravity-mt-72 { margin-top: 18rem; }
.gravity-mt-80 { margin-top: 20rem; }
.gravity-mt-96 { margin-top: 24rem; }
.gravity-mt-auto { margin-top: auto; }

.gravity-mr-0 { margin-right: 0; }
.gravity-mr-px { margin-right: 1px; }
.gravity-mr-0-5 { margin-right: var(--gravity-space-1); }
.gravity-mr-1 { margin-right: var(--gravity-space-2); }
.gravity-mr-1-5 { margin-right: var(--gravity-space-3); }
.gravity-mr-2 { margin-right: var(--gravity-space-4); }
.gravity-mr-2-5 { margin-right: var(--gravity-space-5); }
.gravity-mr-3 { margin-right: var(--gravity-space-6); }
.gravity-mr-3-5 { margin-right: 0.875rem; }
.gravity-mr-4 { margin-right: var(--gravity-space-8); }
.gravity-mr-5 { margin-right: var(--gravity-space-10); }
.gravity-mr-6 { margin-right: var(--gravity-space-12); }
.gravity-mr-7 { margin-right: 1.75rem; }
.gravity-mr-8 { margin-right: var(--gravity-space-16); }
.gravity-mr-9 { margin-right: 2.25rem; }
.gravity-mr-10 { margin-right: var(--gravity-space-20); }
.gravity-mr-11 { margin-right: 2.75rem; }
.gravity-mr-12 { margin-right: var(--gravity-space-24); }
.gravity-mr-14 { margin-right: 3.5rem; }
.gravity-mr-16 { margin-right: var(--gravity-space-32); }
.gravity-mr-20 { margin-right: var(--gravity-space-40); }
.gravity-mr-24 { margin-right: var(--gravity-space-48); }
.gravity-mr-28 { margin-right: 7rem; }
.gravity-mr-32 { margin-right: var(--gravity-space-64); }
.gravity-mr-36 { margin-right: 9rem; }
.gravity-mr-40 { margin-right: 10rem; }
.gravity-mr-44 { margin-right: 11rem; }
.gravity-mr-48 { margin-right: 12rem; }
.gravity-mr-52 { margin-right: 13rem; }
.gravity-mr-56 { margin-right: 14rem; }
.gravity-mr-60 { margin-right: 15rem; }
.gravity-mr-64 { margin-right: 16rem; }
.gravity-mr-72 { margin-right: 18rem; }
.gravity-mr-80 { margin-right: 20rem; }
.gravity-mr-96 { margin-right: 24rem; }
.gravity-mr-auto { margin-right: auto; }

.gravity-mb-0 { margin-bottom: 0; }
.gravity-mb-px { margin-bottom: 1px; }
.gravity-mb-0-5 { margin-bottom: var(--gravity-space-1); }
.gravity-mb-1 { margin-bottom: var(--gravity-space-2); }
.gravity-mb-1-5 { margin-bottom: var(--gravity-space-3); }
.gravity-mb-2 { margin-bottom: var(--gravity-space-4); }
.gravity-mb-2-5 { margin-bottom: var(--gravity-space-5); }
.gravity-mb-3 { margin-bottom: var(--gravity-space-6); }
.gravity-mb-3-5 { margin-bottom: 0.875rem; }
.gravity-mb-4 { margin-bottom: var(--gravity-space-8); }
.gravity-mb-5 { margin-bottom: var(--gravity-space-10); }
.gravity-mb-6 { margin-bottom: var(--gravity-space-12); }
.gravity-mb-7 { margin-bottom: 1.75rem; }
.gravity-mb-8 { margin-bottom: var(--gravity-space-16); }
.gravity-mb-9 { margin-bottom: 2.25rem; }
.gravity-mb-10 { margin-bottom: var(--gravity-space-20); }
.gravity-mb-11 { margin-bottom: 2.75rem; }
.gravity-mb-12 { margin-bottom: var(--gravity-space-24); }
.gravity-mb-14 { margin-bottom: 3.5rem; }
.gravity-mb-16 { margin-bottom: var(--gravity-space-32); }
.gravity-mb-20 { margin-bottom: var(--gravity-space-40); }
.gravity-mb-24 { margin-bottom: var(--gravity-space-48); }
.gravity-mb-28 { margin-bottom: 7rem; }
.gravity-mb-32 { margin-bottom: var(--gravity-space-64); }
.gravity-mb-36 { margin-bottom: 9rem; }
.gravity-mb-40 { margin-bottom: 10rem; }
.gravity-mb-44 { margin-bottom: 11rem; }
.gravity-mb-48 { margin-bottom: 12rem; }
.gravity-mb-52 { margin-bottom: 13rem; }
.gravity-mb-56 { margin-bottom: 14rem; }
.gravity-mb-60 { margin-bottom: 15rem; }
.gravity-mb-64 { margin-bottom: 16rem; }
.gravity-mb-72 { margin-bottom: 18rem; }
.gravity-mb-80 { margin-bottom: 20rem; }
.gravity-mb-96 { margin-bottom: 24rem; }
.gravity-mb-auto { margin-bottom: auto; }

.gravity-ml-0 { margin-left: 0; }
.gravity-ml-px { margin-left: 1px; }
.gravity-ml-0-5 { margin-left: var(--gravity-space-1); }
.gravity-ml-1 { margin-left: var(--gravity-space-2); }
.gravity-ml-1-5 { margin-left: var(--gravity-space-3); }
.gravity-ml-2 { margin-left: var(--gravity-space-4); }
.gravity-ml-2-5 { margin-left: var(--gravity-space-5); }
.gravity-ml-3 { margin-left: var(--gravity-space-6); }
.gravity-ml-3-5 { margin-left: 0.875rem; }
.gravity-ml-4 { margin-left: var(--gravity-space-8); }
.gravity-ml-5 { margin-left: var(--gravity-space-10); }
.gravity-ml-6 { margin-left: var(--gravity-space-12); }
.gravity-ml-7 { margin-left: 1.75rem; }
.gravity-ml-8 { margin-left: var(--gravity-space-16); }
.gravity-ml-9 { margin-left: 2.25rem; }
.gravity-ml-10 { margin-left: var(--gravity-space-20); }
.gravity-ml-11 { margin-left: 2.75rem; }
.gravity-ml-12 { margin-left: var(--gravity-space-24); }
.gravity-ml-14 { margin-left: 3.5rem; }
.gravity-ml-16 { margin-left: var(--gravity-space-32); }
.gravity-ml-20 { margin-left: var(--gravity-space-40); }
.gravity-ml-24 { margin-left: var(--gravity-space-48); }
.gravity-ml-28 { margin-left: 7rem; }
.gravity-ml-32 { margin-left: var(--gravity-space-64); }
.gravity-ml-36 { margin-left: 9rem; }
.gravity-ml-40 { margin-left: 10rem; }
.gravity-ml-44 { margin-left: 11rem; }
.gravity-ml-48 { margin-left: 12rem; }
.gravity-ml-52 { margin-left: 13rem; }
.gravity-ml-56 { margin-left: 14rem; }
.gravity-ml-60 { margin-left: 15rem; }
.gravity-ml-64 { margin-left: 16rem; }
.gravity-ml-72 { margin-left: 18rem; }
.gravity-ml-80 { margin-left: 20rem; }
.gravity-ml-96 { margin-left: 24rem; }
.gravity-ml-auto { margin-left: auto; }

/* ================================
 * PADDING UTILITIES
 * ================================ */

/* All sides padding */
.gravity-p-0 { padding: 0; }
.gravity-p-px { padding: 1px; }
.gravity-p-0-5 { padding: var(--gravity-space-1); }
.gravity-p-1 { padding: var(--gravity-space-2); }
.gravity-p-1-5 { padding: var(--gravity-space-3); }
.gravity-p-2 { padding: var(--gravity-space-4); }
.gravity-p-2-5 { padding: var(--gravity-space-5); }
.gravity-p-3 { padding: var(--gravity-space-6); }
.gravity-p-3-5 { padding: 0.875rem; }
.gravity-p-4 { padding: var(--gravity-space-8); }
.gravity-p-5 { padding: var(--gravity-space-10); }
.gravity-p-6 { padding: var(--gravity-space-12); }
.gravity-p-7 { padding: 1.75rem; }
.gravity-p-8 { padding: var(--gravity-space-16); }
.gravity-p-9 { padding: 2.25rem; }
.gravity-p-10 { padding: var(--gravity-space-20); }
.gravity-p-11 { padding: 2.75rem; }
.gravity-p-12 { padding: var(--gravity-space-24); }
.gravity-p-14 { padding: 3.5rem; }
.gravity-p-16 { padding: var(--gravity-space-32); }
.gravity-p-20 { padding: var(--gravity-space-40); }
.gravity-p-24 { padding: var(--gravity-space-48); }
.gravity-p-28 { padding: 7rem; }
.gravity-p-32 { padding: var(--gravity-space-64); }
.gravity-p-36 { padding: 9rem; }
.gravity-p-40 { padding: 10rem; }
.gravity-p-44 { padding: 11rem; }
.gravity-p-48 { padding: 12rem; }
.gravity-p-52 { padding: 13rem; }
.gravity-p-56 { padding: 14rem; }
.gravity-p-60 { padding: 15rem; }
.gravity-p-64 { padding: 16rem; }
.gravity-p-72 { padding: 18rem; }
.gravity-p-80 { padding: 20rem; }
.gravity-p-96 { padding: 24rem; }

/* Horizontal padding (left and right) */
.gravity-px-0 { padding-left: 0; padding-right: 0; }
.gravity-px-px { padding-left: 1px; padding-right: 1px; }
.gravity-px-0-5 { padding-left: var(--gravity-space-1); padding-right: var(--gravity-space-1); }
.gravity-px-1 { padding-left: var(--gravity-space-2); padding-right: var(--gravity-space-2); }
.gravity-px-1-5 { padding-left: var(--gravity-space-3); padding-right: var(--gravity-space-3); }
.gravity-px-2 { padding-left: var(--gravity-space-4); padding-right: var(--gravity-space-4); }
.gravity-px-2-5 { padding-left: var(--gravity-space-5); padding-right: var(--gravity-space-5); }
.gravity-px-3 { padding-left: var(--gravity-space-6); padding-right: var(--gravity-space-6); }
.gravity-px-3-5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.gravity-px-4 { padding-left: var(--gravity-space-8); padding-right: var(--gravity-space-8); }
.gravity-px-5 { padding-left: var(--gravity-space-10); padding-right: var(--gravity-space-10); }
.gravity-px-6 { padding-left: var(--gravity-space-12); padding-right: var(--gravity-space-12); }
.gravity-px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.gravity-px-8 { padding-left: var(--gravity-space-16); padding-right: var(--gravity-space-16); }
.gravity-px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.gravity-px-10 { padding-left: var(--gravity-space-20); padding-right: var(--gravity-space-20); }
.gravity-px-11 { padding-left: 2.75rem; padding-right: 2.75rem; }
.gravity-px-12 { padding-left: var(--gravity-space-24); padding-right: var(--gravity-space-24); }
.gravity-px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
.gravity-px-16 { padding-left: var(--gravity-space-32); padding-right: var(--gravity-space-32); }
.gravity-px-20 { padding-left: var(--gravity-space-40); padding-right: var(--gravity-space-40); }
.gravity-px-24 { padding-left: var(--gravity-space-48); padding-right: var(--gravity-space-48); }
.gravity-px-28 { padding-left: 7rem; padding-right: 7rem; }
.gravity-px-32 { padding-left: var(--gravity-space-64); padding-right: var(--gravity-space-64); }
.gravity-px-36 { padding-left: 9rem; padding-right: 9rem; }
.gravity-px-40 { padding-left: 10rem; padding-right: 10rem; }
.gravity-px-44 { padding-left: 11rem; padding-right: 11rem; }
.gravity-px-48 { padding-left: 12rem; padding-right: 12rem; }
.gravity-px-52 { padding-left: 13rem; padding-right: 13rem; }
.gravity-px-56 { padding-left: 14rem; padding-right: 14rem; }
.gravity-px-60 { padding-left: 15rem; padding-right: 15rem; }
.gravity-px-64 { padding-left: 16rem; padding-right: 16rem; }
.gravity-px-72 { padding-left: 18rem; padding-right: 18rem; }
.gravity-px-80 { padding-left: 20rem; padding-right: 20rem; }
.gravity-px-96 { padding-left: 24rem; padding-right: 24rem; }

/* Vertical padding (top and bottom) */
.gravity-py-0 { padding-top: 0; padding-bottom: 0; }
.gravity-py-px { padding-top: 1px; padding-bottom: 1px; }
.gravity-py-0-5 { padding-top: var(--gravity-space-1); padding-bottom: var(--gravity-space-1); }
.gravity-py-1 { padding-top: var(--gravity-space-2); padding-bottom: var(--gravity-space-2); }
.gravity-py-1-5 { padding-top: var(--gravity-space-3); padding-bottom: var(--gravity-space-3); }
.gravity-py-2 { padding-top: var(--gravity-space-4); padding-bottom: var(--gravity-space-4); }
.gravity-py-2-5 { padding-top: var(--gravity-space-5); padding-bottom: var(--gravity-space-5); }
.gravity-py-3 { padding-top: var(--gravity-space-6); padding-bottom: var(--gravity-space-6); }
.gravity-py-3-5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.gravity-py-4 { padding-top: var(--gravity-space-8); padding-bottom: var(--gravity-space-8); }
.gravity-py-5 { padding-top: var(--gravity-space-10); padding-bottom: var(--gravity-space-10); }
.gravity-py-6 { padding-top: var(--gravity-space-12); padding-bottom: var(--gravity-space-12); }
.gravity-py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.gravity-py-8 { padding-top: var(--gravity-space-16); padding-bottom: var(--gravity-space-16); }
.gravity-py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.gravity-py-10 { padding-top: var(--gravity-space-20); padding-bottom: var(--gravity-space-20); }
.gravity-py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.gravity-py-12 { padding-top: var(--gravity-space-24); padding-bottom: var(--gravity-space-24); }
.gravity-py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.gravity-py-16 { padding-top: var(--gravity-space-32); padding-bottom: var(--gravity-space-32); }
.gravity-py-20 { padding-top: var(--gravity-space-40); padding-bottom: var(--gravity-space-40); }
.gravity-py-24 { padding-top: var(--gravity-space-48); padding-bottom: var(--gravity-space-48); }
.gravity-py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.gravity-py-32 { padding-top: var(--gravity-space-64); padding-bottom: var(--gravity-space-64); }
.gravity-py-36 { padding-top: 9rem; padding-bottom: 9rem; }
.gravity-py-40 { padding-top: 10rem; padding-bottom: 10rem; }
.gravity-py-44 { padding-top: 11rem; padding-bottom: 11rem; }
.gravity-py-48 { padding-top: 12rem; padding-bottom: 12rem; }
.gravity-py-52 { padding-top: 13rem; padding-bottom: 13rem; }
.gravity-py-56 { padding-top: 14rem; padding-bottom: 14rem; }
.gravity-py-60 { padding-top: 15rem; padding-bottom: 15rem; }
.gravity-py-64 { padding-top: 16rem; padding-bottom: 16rem; }
.gravity-py-72 { padding-top: 18rem; padding-bottom: 18rem; }
.gravity-py-80 { padding-top: 20rem; padding-bottom: 20rem; }
.gravity-py-96 { padding-top: 24rem; padding-bottom: 24rem; }

/* Individual padding sides */
.gravity-pt-0 { padding-top: 0; }
.gravity-pt-px { padding-top: 1px; }
.gravity-pt-0-5 { padding-top: var(--gravity-space-1); }
.gravity-pt-1 { padding-top: var(--gravity-space-2); }
.gravity-pt-1-5 { padding-top: var(--gravity-space-3); }
.gravity-pt-2 { padding-top: var(--gravity-space-4); }
.gravity-pt-2-5 { padding-top: var(--gravity-space-5); }
.gravity-pt-3 { padding-top: var(--gravity-space-6); }
.gravity-pt-3-5 { padding-top: 0.875rem; }
.gravity-pt-4 { padding-top: var(--gravity-space-8); }
.gravity-pt-5 { padding-top: var(--gravity-space-10); }
.gravity-pt-6 { padding-top: var(--gravity-space-12); }
.gravity-pt-7 { padding-top: 1.75rem; }
.gravity-pt-8 { padding-top: var(--gravity-space-16); }
.gravity-pt-9 { padding-top: 2.25rem; }
.gravity-pt-10 { padding-top: var(--gravity-space-20); }
.gravity-pt-11 { padding-top: 2.75rem; }
.gravity-pt-12 { padding-top: var(--gravity-space-24); }
.gravity-pt-14 { padding-top: 3.5rem; }
.gravity-pt-16 { padding-top: var(--gravity-space-32); }
.gravity-pt-20 { padding-top: var(--gravity-space-40); }
.gravity-pt-24 { padding-top: var(--gravity-space-48); }
.gravity-pt-28 { padding-top: 7rem; }
.gravity-pt-32 { padding-top: var(--gravity-space-64); }
.gravity-pt-36 { padding-top: 9rem; }
.gravity-pt-40 { padding-top: 10rem; }
.gravity-pt-44 { padding-top: 11rem; }
.gravity-pt-48 { padding-top: 12rem; }
.gravity-pt-52 { padding-top: 13rem; }
.gravity-pt-56 { padding-top: 14rem; }
.gravity-pt-60 { padding-top: 15rem; }
.gravity-pt-64 { padding-top: 16rem; }
.gravity-pt-72 { padding-top: 18rem; }
.gravity-pt-80 { padding-top: 20rem; }
.gravity-pt-96 { padding-top: 24rem; }

.gravity-pr-0 { padding-right: 0; }
.gravity-pr-px { padding-right: 1px; }
.gravity-pr-0-5 { padding-right: var(--gravity-space-1); }
.gravity-pr-1 { padding-right: var(--gravity-space-2); }
.gravity-pr-1-5 { padding-right: var(--gravity-space-3); }
.gravity-pr-2 { padding-right: var(--gravity-space-4); }
.gravity-pr-2-5 { padding-right: var(--gravity-space-5); }
.gravity-pr-3 { padding-right: var(--gravity-space-6); }
.gravity-pr-3-5 { padding-right: 0.875rem; }
.gravity-pr-4 { padding-right: var(--gravity-space-8); }
.gravity-pr-5 { padding-right: var(--gravity-space-10); }
.gravity-pr-6 { padding-right: var(--gravity-space-12); }
.gravity-pr-7 { padding-right: 1.75rem; }
.gravity-pr-8 { padding-right: var(--gravity-space-16); }
.gravity-pr-9 { padding-right: 2.25rem; }
.gravity-pr-10 { padding-right: var(--gravity-space-20); }
.gravity-pr-11 { padding-right: 2.75rem; }
.gravity-pr-12 { padding-right: var(--gravity-space-24); }
.gravity-pr-14 { padding-right: 3.5rem; }
.gravity-pr-16 { padding-right: var(--gravity-space-32); }
.gravity-pr-20 { padding-right: var(--gravity-space-40); }
.gravity-pr-24 { padding-right: var(--gravity-space-48); }
.gravity-pr-28 { padding-right: 7rem; }
.gravity-pr-32 { padding-right: var(--gravity-space-64); }
.gravity-pr-36 { padding-right: 9rem; }
.gravity-pr-40 { padding-right: 10rem; }
.gravity-pr-44 { padding-right: 11rem; }
.gravity-pr-48 { padding-right: 12rem; }
.gravity-pr-52 { padding-right: 13rem; }
.gravity-pr-56 { padding-right: 14rem; }
.gravity-pr-60 { padding-right: 15rem; }
.gravity-pr-64 { padding-right: 16rem; }
.gravity-pr-72 { padding-right: 18rem; }
.gravity-pr-80 { padding-right: 20rem; }
.gravity-pr-96 { padding-right: 24rem; }

.gravity-pb-0 { padding-bottom: 0; }
.gravity-pb-px { padding-bottom: 1px; }
.gravity-pb-0-5 { padding-bottom: var(--gravity-space-1); }
.gravity-pb-1 { padding-bottom: var(--gravity-space-2); }
.gravity-pb-1-5 { padding-bottom: var(--gravity-space-3); }
.gravity-pb-2 { padding-bottom: var(--gravity-space-4); }
.gravity-pb-2-5 { padding-bottom: var(--gravity-space-5); }
.gravity-pb-3 { padding-bottom: var(--gravity-space-6); }
.gravity-pb-3-5 { padding-bottom: 0.875rem; }
.gravity-pb-4 { padding-bottom: var(--gravity-space-8); }
.gravity-pb-5 { padding-bottom: var(--gravity-space-10); }
.gravity-pb-6 { padding-bottom: var(--gravity-space-12); }
.gravity-pb-7 { padding-bottom: 1.75rem; }
.gravity-pb-8 { padding-bottom: var(--gravity-space-16); }
.gravity-pb-9 { padding-bottom: 2.25rem; }
.gravity-pb-10 { padding-bottom: var(--gravity-space-20); }
.gravity-pb-11 { padding-bottom: 2.75rem; }
.gravity-pb-12 { padding-bottom: var(--gravity-space-24); }
.gravity-pb-14 { padding-bottom: 3.5rem; }
.gravity-pb-16 { padding-bottom: var(--gravity-space-32); }
.gravity-pb-20 { padding-bottom: var(--gravity-space-40); }
.gravity-pb-24 { padding-bottom: var(--gravity-space-48); }
.gravity-pb-28 { padding-bottom: 7rem; }
.gravity-pb-32 { padding-bottom: var(--gravity-space-64); }
.gravity-pb-36 { padding-bottom: 9rem; }
.gravity-pb-40 { padding-bottom: 10rem; }
.gravity-pb-44 { padding-bottom: 11rem; }
.gravity-pb-48 { padding-bottom: 12rem; }
.gravity-pb-52 { padding-bottom: 13rem; }
.gravity-pb-56 { padding-bottom: 14rem; }
.gravity-pb-60 { padding-bottom: 15rem; }
.gravity-pb-64 { padding-bottom: 16rem; }
.gravity-pb-72 { padding-bottom: 18rem; }
.gravity-pb-80 { padding-bottom: 20rem; }
.gravity-pb-96 { padding-bottom: 24rem; }

.gravity-pl-0 { padding-left: 0; }
.gravity-pl-px { padding-left: 1px; }
.gravity-pl-0-5 { padding-left: var(--gravity-space-1); }
.gravity-pl-1 { padding-left: var(--gravity-space-2); }
.gravity-pl-1-5 { padding-left: var(--gravity-space-3); }
.gravity-pl-2 { padding-left: var(--gravity-space-4); }
.gravity-pl-2-5 { padding-left: var(--gravity-space-5); }
.gravity-pl-3 { padding-left: var(--gravity-space-6); }
.gravity-pl-3-5 { padding-left: 0.875rem; }
.gravity-pl-4 { padding-left: var(--gravity-space-8); }
.gravity-pl-5 { padding-left: var(--gravity-space-10); }
.gravity-pl-6 { padding-left: var(--gravity-space-12); }
.gravity-pl-7 { padding-left: 1.75rem; }
.gravity-pl-8 { padding-left: var(--gravity-space-16); }
.gravity-pl-9 { padding-left: 2.25rem; }
.gravity-pl-10 { padding-left: var(--gravity-space-20); }
.gravity-pl-11 { padding-left: 2.75rem; }
.gravity-pl-12 { padding-left: var(--gravity-space-24); }
.gravity-pl-14 { padding-left: 3.5rem; }
.gravity-pl-16 { padding-left: var(--gravity-space-32); }
.gravity-pl-20 { padding-left: var(--gravity-space-40); }
.gravity-pl-24 { padding-left: var(--gravity-space-48); }
.gravity-pl-28 { padding-left: 7rem; }
.gravity-pl-32 { padding-left: var(--gravity-space-64); }
.gravity-pl-36 { padding-left: 9rem; }
.gravity-pl-40 { padding-left: 10rem; }
.gravity-pl-44 { padding-left: 11rem; }
.gravity-pl-48 { padding-left: 12rem; }
.gravity-pl-52 { padding-left: 13rem; }
.gravity-pl-56 { padding-left: 14rem; }
.gravity-pl-60 { padding-left: 15rem; }
.gravity-pl-64 { padding-left: 16rem; }
.gravity-pl-72 { padding-left: 18rem; }
.gravity-pl-80 { padding-left: 20rem; }
.gravity-pl-96 { padding-left: 24rem; }

/* ================================
 * NEGATIVE MARGINS
 * ================================ */

.gravity--m-0-5 { margin: calc(var(--gravity-space-1) * -1); }
.gravity--m-1 { margin: calc(var(--gravity-space-2) * -1); }
.gravity--m-1-5 { margin: calc(var(--gravity-space-3) * -1); }
.gravity--m-2 { margin: calc(var(--gravity-space-4) * -1); }
.gravity--m-2-5 { margin: calc(var(--gravity-space-5) * -1); }
.gravity--m-3 { margin: calc(var(--gravity-space-6) * -1); }
.gravity--m-3-5 { margin: -0.875rem; }
.gravity--m-4 { margin: calc(var(--gravity-space-8) * -1); }
.gravity--m-5 { margin: calc(var(--gravity-space-10) * -1); }
.gravity--m-6 { margin: calc(var(--gravity-space-12) * -1); }
.gravity--m-7 { margin: -1.75rem; }
.gravity--m-8 { margin: calc(var(--gravity-space-16) * -1); }
.gravity--m-9 { margin: -2.25rem; }
.gravity--m-10 { margin: calc(var(--gravity-space-20) * -1); }
.gravity--m-11 { margin: -2.75rem; }
.gravity--m-12 { margin: calc(var(--gravity-space-24) * -1); }
.gravity--m-14 { margin: -3.5rem; }
.gravity--m-16 { margin: calc(var(--gravity-space-32) * -1); }
.gravity--m-20 { margin: calc(var(--gravity-space-40) * -1); }
.gravity--m-24 { margin: calc(var(--gravity-space-48) * -1); }
.gravity--m-28 { margin: -7rem; }
.gravity--m-32 { margin: calc(var(--gravity-space-64) * -1); }
.gravity--m-36 { margin: -9rem; }
.gravity--m-40 { margin: -10rem; }
.gravity--m-44 { margin: -11rem; }
.gravity--m-48 { margin: -12rem; }
.gravity--m-52 { margin: -13rem; }
.gravity--m-56 { margin: -14rem; }
.gravity--m-60 { margin: -15rem; }
.gravity--m-64 { margin: -16rem; }
.gravity--m-72 { margin: -18rem; }
.gravity--m-80 { margin: -20rem; }
.gravity--m-96 { margin: -24rem; }

/* Negative horizontal margins */
.gravity--mx-0-5 { margin-left: calc(var(--gravity-space-1) * -1); margin-right: calc(var(--gravity-space-1) * -1); }
.gravity--mx-1 { margin-left: calc(var(--gravity-space-2) * -1); margin-right: calc(var(--gravity-space-2) * -1); }
.gravity--mx-1-5 { margin-left: calc(var(--gravity-space-3) * -1); margin-right: calc(var(--gravity-space-3) * -1); }
.gravity--mx-2 { margin-left: calc(var(--gravity-space-4) * -1); margin-right: calc(var(--gravity-space-4) * -1); }
.gravity--mx-2-5 { margin-left: calc(var(--gravity-space-5) * -1); margin-right: calc(var(--gravity-space-5) * -1); }
.gravity--mx-3 { margin-left: calc(var(--gravity-space-6) * -1); margin-right: calc(var(--gravity-space-6) * -1); }
.gravity--mx-3-5 { margin-left: -0.875rem; margin-right: -0.875rem; }
.gravity--mx-4 { margin-left: calc(var(--gravity-space-8) * -1); margin-right: calc(var(--gravity-space-8) * -1); }
.gravity--mx-5 { margin-left: calc(var(--gravity-space-10) * -1); margin-right: calc(var(--gravity-space-10) * -1); }
.gravity--mx-6 { margin-left: calc(var(--gravity-space-12) * -1); margin-right: calc(var(--gravity-space-12) * -1); }
.gravity--mx-7 { margin-left: -1.75rem; margin-right: -1.75rem; }
.gravity--mx-8 { margin-left: calc(var(--gravity-space-16) * -1); margin-right: calc(var(--gravity-space-16) * -1); }
.gravity--mx-9 { margin-left: -2.25rem; margin-right: -2.25rem; }
.gravity--mx-10 { margin-left: calc(var(--gravity-space-20) * -1); margin-right: calc(var(--gravity-space-20) * -1); }
.gravity--mx-11 { margin-left: -2.75rem; margin-right: -2.75rem; }
.gravity--mx-12 { margin-left: calc(var(--gravity-space-24) * -1); margin-right: calc(var(--gravity-space-24) * -1); }
.gravity--mx-14 { margin-left: -3.5rem; margin-right: -3.5rem; }
.gravity--mx-16 { margin-left: calc(var(--gravity-space-32) * -1); margin-right: calc(var(--gravity-space-32) * -1); }
.gravity--mx-20 { margin-left: calc(var(--gravity-space-40) * -1); margin-right: calc(var(--gravity-space-40) * -1); }
.gravity--mx-24 { margin-left: calc(var(--gravity-space-48) * -1); margin-right: calc(var(--gravity-space-48) * -1); }
.gravity--mx-28 { margin-left: -7rem; margin-right: -7rem; }
.gravity--mx-32 { margin-left: calc(var(--gravity-space-64) * -1); margin-right: calc(var(--gravity-space-64) * -1); }
.gravity--mx-36 { margin-left: -9rem; margin-right: -9rem; }
.gravity--mx-40 { margin-left: -10rem; margin-right: -10rem; }
.gravity--mx-44 { margin-left: -11rem; margin-right: -11rem; }
.gravity--mx-48 { margin-left: -12rem; margin-right: -12rem; }
.gravity--mx-52 { margin-left: -13rem; margin-right: -13rem; }
.gravity--mx-56 { margin-left: -14rem; margin-right: -14rem; }
.gravity--mx-60 { margin-left: -15rem; margin-right: -15rem; }
.gravity--mx-64 { margin-left: -16rem; margin-right: -16rem; }
.gravity--mx-72 { margin-left: -18rem; margin-right: -18rem; }
.gravity--mx-80 { margin-left: -20rem; margin-right: -20rem; }
.gravity--mx-96 { margin-left: -24rem; margin-right: -24rem; }

/* Negative vertical margins */
.gravity--my-0-5 { margin-top: calc(var(--gravity-space-1) * -1); margin-bottom: calc(var(--gravity-space-1) * -1); }
.gravity--my-1 { margin-top: calc(var(--gravity-space-2) * -1); margin-bottom: calc(var(--gravity-space-2) * -1); }
.gravity--my-1-5 { margin-top: calc(var(--gravity-space-3) * -1); margin-bottom: calc(var(--gravity-space-3) * -1); }
.gravity--my-2 { margin-top: calc(var(--gravity-space-4) * -1); margin-bottom: calc(var(--gravity-space-4) * -1); }
.gravity--my-2-5 { margin-top: calc(var(--gravity-space-5) * -1); margin-bottom: calc(var(--gravity-space-5) * -1); }
.gravity--my-3 { margin-top: calc(var(--gravity-space-6) * -1); margin-bottom: calc(var(--gravity-space-6) * -1); }
.gravity--my-3-5 { margin-top: -0.875rem; margin-bottom: -0.875rem; }
.gravity--my-4 { margin-top: calc(var(--gravity-space-8) * -1); margin-bottom: calc(var(--gravity-space-8) * -1); }
.gravity--my-5 { margin-top: calc(var(--gravity-space-10) * -1); margin-bottom: calc(var(--gravity-space-10) * -1); }
.gravity--my-6 { margin-top: calc(var(--gravity-space-12) * -1); margin-bottom: calc(var(--gravity-space-12) * -1); }
.gravity--my-7 { margin-top: -1.75rem; margin-bottom: -1.75rem; }
.gravity--my-8 { margin-top: calc(var(--gravity-space-16) * -1); margin-bottom: calc(var(--gravity-space-16) * -1); }
.gravity--my-9 { margin-top: -2.25rem; margin-bottom: -2.25rem; }
.gravity--my-10 { margin-top: calc(var(--gravity-space-20) * -1); margin-bottom: calc(var(--gravity-space-20) * -1); }
.gravity--my-11 { margin-top: -2.75rem; margin-bottom: -2.75rem; }
.gravity--my-12 { margin-top: calc(var(--gravity-space-24) * -1); margin-bottom: calc(var(--gravity-space-24) * -1); }
.gravity--my-14 { margin-top: -3.5rem; margin-bottom: -3.5rem; }
.gravity--my-16 { margin-top: calc(var(--gravity-space-32) * -1); margin-bottom: calc(var(--gravity-space-32) * -1); }
.gravity--my-20 { margin-top: calc(var(--gravity-space-40) * -1); margin-bottom: calc(var(--gravity-space-40) * -1); }
.gravity--my-24 { margin-top: calc(var(--gravity-space-48) * -1); margin-bottom: calc(var(--gravity-space-48) * -1); }
.gravity--my-28 { margin-top: -7rem; margin-bottom: -7rem; }
.gravity--my-32 { margin-top: calc(var(--gravity-space-64) * -1); margin-bottom: calc(var(--gravity-space-64) * -1); }
.gravity--my-36 { margin-top: -9rem; margin-bottom: -9rem; }
.gravity--my-40 { margin-top: -10rem; margin-bottom: -10rem; }
.gravity--my-44 { margin-top: -11rem; margin-bottom: -11rem; }
.gravity--my-48 { margin-top: -12rem; margin-bottom: -12rem; }
.gravity--my-52 { margin-top: -13rem; margin-bottom: -13rem; }
.gravity--my-56 { margin-top: -14rem; margin-bottom: -14rem; }
.gravity--my-60 { margin-top: -15rem; margin-bottom: -15rem; }
.gravity--my-64 { margin-top: -16rem; margin-bottom: -16rem; }
.gravity--my-72 { margin-top: -18rem; margin-bottom: -18rem; }
.gravity--my-80 { margin-top: -20rem; margin-bottom: -20rem; }
.gravity--my-96 { margin-top: -24rem; margin-bottom: -24rem; }

/* Individual negative margins */
.gravity--mt-0-5 { margin-top: calc(var(--gravity-space-1) * -1); }
.gravity--mt-1 { margin-top: calc(var(--gravity-space-2) * -1); }
.gravity--mt-1-5 { margin-top: calc(var(--gravity-space-3) * -1); }
.gravity--mt-2 { margin-top: calc(var(--gravity-space-4) * -1); }
.gravity--mt-2-5 { margin-top: calc(var(--gravity-space-5) * -1); }
.gravity--mt-3 { margin-top: calc(var(--gravity-space-6) * -1); }
.gravity--mt-3-5 { margin-top: -0.875rem; }
.gravity--mt-4 { margin-top: calc(var(--gravity-space-8) * -1); }
.gravity--mt-5 { margin-top: calc(var(--gravity-space-10) * -1); }
.gravity--mt-6 { margin-top: calc(var(--gravity-space-12) * -1); }
.gravity--mt-7 { margin-top: -1.75rem; }
.gravity--mt-8 { margin-top: calc(var(--gravity-space-16) * -1); }
.gravity--mt-9 { margin-top: -2.25rem; }
.gravity--mt-10 { margin-top: calc(var(--gravity-space-20) * -1); }
.gravity--mt-11 { margin-top: -2.75rem; }
.gravity--mt-12 { margin-top: calc(var(--gravity-space-24) * -1); }
.gravity--mt-14 { margin-top: -3.5rem; }
.gravity--mt-16 { margin-top: calc(var(--gravity-space-32) * -1); }
.gravity--mt-20 { margin-top: calc(var(--gravity-space-40) * -1); }
.gravity--mt-24 { margin-top: calc(var(--gravity-space-48) * -1); }
.gravity--mt-28 { margin-top: -7rem; }
.gravity--mt-32 { margin-top: calc(var(--gravity-space-64) * -1); }
.gravity--mt-36 { margin-top: -9rem; }
.gravity--mt-40 { margin-top: -10rem; }
.gravity--mt-44 { margin-top: -11rem; }
.gravity--mt-48 { margin-top: -12rem; }
.gravity--mt-52 { margin-top: -13rem; }
.gravity--mt-56 { margin-top: -14rem; }
.gravity--mt-60 { margin-top: -15rem; }
.gravity--mt-64 { margin-top: -16rem; }
.gravity--mt-72 { margin-top: -18rem; }
.gravity--mt-80 { margin-top: -20rem; }
.gravity--mt-96 { margin-top: -24rem; }

.gravity--mr-0-5 { margin-right: calc(var(--gravity-space-1) * -1); }
.gravity--mr-1 { margin-right: calc(var(--gravity-space-2) * -1); }
.gravity--mr-1-5 { margin-right: calc(var(--gravity-space-3) * -1); }
.gravity--mr-2 { margin-right: calc(var(--gravity-space-4) * -1); }
.gravity--mr-2-5 { margin-right: calc(var(--gravity-space-5) * -1); }
.gravity--mr-3 { margin-right: calc(var(--gravity-space-6) * -1); }
.gravity--mr-3-5 { margin-right: -0.875rem; }
.gravity--mr-4 { margin-right: calc(var(--gravity-space-8) * -1); }
.gravity--mr-5 { margin-right: calc(var(--gravity-space-10) * -1); }
.gravity--mr-6 { margin-right: calc(var(--gravity-space-12) * -1); }
.gravity--mr-7 { margin-right: -1.75rem; }
.gravity--mr-8 { margin-right: calc(var(--gravity-space-16) * -1); }
.gravity--mr-9 { margin-right: -2.25rem; }
.gravity--mr-10 { margin-right: calc(var(--gravity-space-20) * -1); }
.gravity--mr-11 { margin-right: -2.75rem; }
.gravity--mr-12 { margin-right: calc(var(--gravity-space-24) * -1); }
.gravity--mr-14 { margin-right: -3.5rem; }
.gravity--mr-16 { margin-right: calc(var(--gravity-space-32) * -1); }
.gravity--mr-20 { margin-right: calc(var(--gravity-space-40) * -1); }
.gravity--mr-24 { margin-right: calc(var(--gravity-space-48) * -1); }
.gravity--mr-28 { margin-right: -7rem; }
.gravity--mr-32 { margin-right: calc(var(--gravity-space-64) * -1); }
.gravity--mr-36 { margin-right: -9rem; }
.gravity--mr-40 { margin-right: -10rem; }
.gravity--mr-44 { margin-right: -11rem; }
.gravity--mr-48 { margin-right: -12rem; }
.gravity--mr-52 { margin-right: -13rem; }
.gravity--mr-56 { margin-right: -14rem; }
.gravity--mr-60 { margin-right: -15rem; }
.gravity--mr-64 { margin-right: -16rem; }
.gravity--mr-72 { margin-right: -18rem; }
.gravity--mr-80 { margin-right: -20rem; }
.gravity--mr-96 { margin-right: -24rem; }

.gravity--mb-0-5 { margin-bottom: calc(var(--gravity-space-1) * -1); }
.gravity--mb-1 { margin-bottom: calc(var(--gravity-space-2) * -1); }
.gravity--mb-1-5 { margin-bottom: calc(var(--gravity-space-3) * -1); }
.gravity--mb-2 { margin-bottom: calc(var(--gravity-space-4) * -1); }
.gravity--mb-2-5 { margin-bottom: calc(var(--gravity-space-5) * -1); }
.gravity--mb-3 { margin-bottom: calc(var(--gravity-space-6) * -1); }
.gravity--mb-3-5 { margin-bottom: -0.875rem; }
.gravity--mb-4 { margin-bottom: calc(var(--gravity-space-8) * -1); }
.gravity--mb-5 { margin-bottom: calc(var(--gravity-space-10) * -1); }
.gravity--mb-6 { margin-bottom: calc(var(--gravity-space-12) * -1); }
.gravity--mb-7 { margin-bottom: -1.75rem; }
.gravity--mb-8 { margin-bottom: calc(var(--gravity-space-16) * -1); }
.gravity--mb-9 { margin-bottom: -2.25rem; }
.gravity--mb-10 { margin-bottom: calc(var(--gravity-space-20) * -1); }
.gravity--mb-11 { margin-bottom: -2.75rem; }
.gravity--mb-12 { margin-bottom: calc(var(--gravity-space-24) * -1); }
.gravity--mb-14 { margin-bottom: -3.5rem; }
.gravity--mb-16 { margin-bottom: calc(var(--gravity-space-32) * -1); }
.gravity--mb-20 { margin-bottom: calc(var(--gravity-space-40) * -1); }
.gravity--mb-24 { margin-bottom: calc(var(--gravity-space-48) * -1); }
.gravity--mb-28 { margin-bottom: -7rem; }
.gravity--mb-32 { margin-bottom: calc(var(--gravity-space-64) * -1); }
.gravity--mb-36 { margin-bottom: -9rem; }
.gravity--mb-40 { margin-bottom: -10rem; }
.gravity--mb-44 { margin-bottom: -11rem; }
.gravity--mb-48 { margin-bottom: -12rem; }
.gravity--mb-52 { margin-bottom: -13rem; }
.gravity--mb-56 { margin-bottom: -14rem; }
.gravity--mb-60 { margin-bottom: -15rem; }
.gravity--mb-64 { margin-bottom: -16rem; }
.gravity--mb-72 { margin-bottom: -18rem; }
.gravity--mb-80 { margin-bottom: -20rem; }
.gravity--mb-96 { margin-bottom: -24rem; }

.gravity--ml-0-5 { margin-left: calc(var(--gravity-space-1) * -1); }
.gravity--ml-1 { margin-left: calc(var(--gravity-space-2) * -1); }
.gravity--ml-1-5 { margin-left: calc(var(--gravity-space-3) * -1); }
.gravity--ml-2 { margin-left: calc(var(--gravity-space-4) * -1); }
.gravity--ml-2-5 { margin-left: calc(var(--gravity-space-5) * -1); }
.gravity--ml-3 { margin-left: calc(var(--gravity-space-6) * -1); }
.gravity--ml-3-5 { margin-left: -0.875rem; }
.gravity--ml-4 { margin-left: calc(var(--gravity-space-8) * -1); }
.gravity--ml-5 { margin-left: calc(var(--gravity-space-10) * -1); }
.gravity--ml-6 { margin-left: calc(var(--gravity-space-12) * -1); }
.gravity--ml-7 { margin-left: -1.75rem; }
.gravity--ml-8 { margin-left: calc(var(--gravity-space-16) * -1); }
.gravity--ml-9 { margin-left: -2.25rem; }
.gravity--ml-10 { margin-left: calc(var(--gravity-space-20) * -1); }
.gravity--ml-11 { margin-left: -2.75rem; }
.gravity--ml-12 { margin-left: calc(var(--gravity-space-24) * -1); }
.gravity--ml-14 { margin-left: -3.5rem; }
.gravity--ml-16 { margin-left: calc(var(--gravity-space-32) * -1); }
.gravity--ml-20 { margin-left: calc(var(--gravity-space-40) * -1); }
.gravity--ml-24 { margin-left: calc(var(--gravity-space-48) * -1); }
.gravity--ml-28 { margin-left: -7rem; }
.gravity--ml-32 { margin-left: calc(var(--gravity-space-64) * -1); }
.gravity--ml-36 { margin-left: -9rem; }
.gravity--ml-40 { margin-left: -10rem; }
.gravity--ml-44 { margin-left: -11rem; }
.gravity--ml-48 { margin-left: -12rem; }
.gravity--ml-52 { margin-left: -13rem; }
.gravity--ml-56 { margin-left: -14rem; }
.gravity--ml-60 { margin-left: -15rem; }
.gravity--ml-64 { margin-left: -16rem; }
.gravity--ml-72 { margin-left: -18rem; }
.gravity--ml-80 { margin-left: -20rem; }
.gravity--ml-96 { margin-left: -24rem; }

/* ================================
 * SPACE BETWEEN UTILITIES
 * ================================ */

.gravity-space-y-0 > * + * { margin-top: 0; }
.gravity-space-y-0-5 > * + * { margin-top: var(--gravity-space-1); }
.gravity-space-y-1 > * + * { margin-top: var(--gravity-space-2); }
.gravity-space-y-1-5 > * + * { margin-top: var(--gravity-space-3); }
.gravity-space-y-2 > * + * { margin-top: var(--gravity-space-4); }
.gravity-space-y-2-5 > * + * { margin-top: var(--gravity-space-5); }
.gravity-space-y-3 > * + * { margin-top: var(--gravity-space-6); }
.gravity-space-y-3-5 > * + * { margin-top: 0.875rem; }
.gravity-space-y-4 > * + * { margin-top: var(--gravity-space-8); }
.gravity-space-y-5 > * + * { margin-top: var(--gravity-space-10); }
.gravity-space-y-6 > * + * { margin-top: var(--gravity-space-12); }
.gravity-space-y-7 > * + * { margin-top: 1.75rem; }
.gravity-space-y-8 > * + * { margin-top: var(--gravity-space-16); }
.gravity-space-y-9 > * + * { margin-top: 2.25rem; }
.gravity-space-y-10 > * + * { margin-top: var(--gravity-space-20); }
.gravity-space-y-11 > * + * { margin-top: 2.75rem; }
.gravity-space-y-12 > * + * { margin-top: var(--gravity-space-24); }
.gravity-space-y-14 > * + * { margin-top: 3.5rem; }
.gravity-space-y-16 > * + * { margin-top: var(--gravity-space-32); }
.gravity-space-y-20 > * + * { margin-top: var(--gravity-space-40); }
.gravity-space-y-24 > * + * { margin-top: var(--gravity-space-48); }
.gravity-space-y-28 > * + * { margin-top: 7rem; }
.gravity-space-y-32 > * + * { margin-top: var(--gravity-space-64); }
.gravity-space-y-36 > * + * { margin-top: 9rem; }
.gravity-space-y-40 > * + * { margin-top: 10rem; }
.gravity-space-y-44 > * + * { margin-top: 11rem; }
.gravity-space-y-48 > * + * { margin-top: 12rem; }
.gravity-space-y-52 > * + * { margin-top: 13rem; }
.gravity-space-y-56 > * + * { margin-top: 14rem; }
.gravity-space-y-60 > * + * { margin-top: 15rem; }
.gravity-space-y-64 > * + * { margin-top: 16rem; }
.gravity-space-y-72 > * + * { margin-top: 18rem; }
.gravity-space-y-80 > * + * { margin-top: 20rem; }
.gravity-space-y-96 > * + * { margin-top: 24rem; }

.gravity-space-x-0 > * + * { margin-left: 0; }
.gravity-space-x-0-5 > * + * { margin-left: var(--gravity-space-1); }
.gravity-space-x-1 > * + * { margin-left: var(--gravity-space-2); }
.gravity-space-x-1-5 > * + * { margin-left: var(--gravity-space-3); }
.gravity-space-x-2 > * + * { margin-left: var(--gravity-space-4); }
.gravity-space-x-2-5 > * + * { margin-left: var(--gravity-space-5); }
.gravity-space-x-3 > * + * { margin-left: var(--gravity-space-6); }
.gravity-space-x-3-5 > * + * { margin-left: 0.875rem; }
.gravity-space-x-4 > * + * { margin-left: var(--gravity-space-8); }
.gravity-space-x-5 > * + * { margin-left: var(--gravity-space-10); }
.gravity-space-x-6 > * + * { margin-left: var(--gravity-space-12); }
.gravity-space-x-7 > * + * { margin-left: 1.75rem; }
.gravity-space-x-8 > * + * { margin-left: var(--gravity-space-16); }
.gravity-space-x-9 > * + * { margin-left: 2.25rem; }
.gravity-space-x-10 > * + * { margin-left: var(--gravity-space-20); }
.gravity-space-x-11 > * + * { margin-left: 2.75rem; }
.gravity-space-x-12 > * + * { margin-left: var(--gravity-space-24); }
.gravity-space-x-14 > * + * { margin-left: 3.5rem; }
.gravity-space-x-16 > * + * { margin-left: var(--gravity-space-32); }
.gravity-space-x-20 > * + * { margin-left: var(--gravity-space-40); }
.gravity-space-x-24 > * + * { margin-left: var(--gravity-space-48); }
.gravity-space-x-28 > * + * { margin-left: 7rem; }
.gravity-space-x-32 > * + * { margin-left: var(--gravity-space-64); }
.gravity-space-x-36 > * + * { margin-left: 9rem; }
.gravity-space-x-40 > * + * { margin-left: 10rem; }
.gravity-space-x-44 > * + * { margin-left: 11rem; }
.gravity-space-x-48 > * + * { margin-left: 12rem; }
.gravity-space-x-52 > * + * { margin-left: 13rem; }
.gravity-space-x-56 > * + * { margin-left: 14rem; }
.gravity-space-x-60 > * + * { margin-left: 15rem; }
.gravity-space-x-64 > * + * { margin-left: 16rem; }
.gravity-space-x-72 > * + * { margin-left: 18rem; }
.gravity-space-x-80 > * + * { margin-left: 20rem; }
.gravity-space-x-96 > * + * { margin-left: 24rem; }

/* Reverse space between (useful for RTL layouts) */
.gravity-space-y-reverse > * + * {
  margin-top: 0;
  margin-bottom: calc(var(--gravity-space-4) * -1);
}

.gravity-space-x-reverse > * + * {
  margin-left: 0;
  margin-right: calc(var(--gravity-space-4) * -1);
}

/* ========================================
 * components/accordion.css
 * ======================================== */

/*
 * Gravity UI 2.0 Accordion Component
 * 
 * Expandable/collapsible content panels with headers, icons, and smooth animations
 * Supports both standard and bordered variants with keyboard navigation
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * ACCORDION CONTAINER
 * ================================ */

.gravity-accordion {
  border-radius: var(--gravity-radius-lg);
  overflow: hidden;
}

.gravity-accordion-item {
  border-bottom: 1px solid var(--gravity-border-primary);
}

.gravity-accordion-item:last-child {
  border-bottom: none;
}

.gravity-accordion-item-bordered {
  border: 1px solid var(--gravity-border-primary);
  margin-bottom: 0.5rem;
  border-radius: var(--gravity-radius-md);
}

/* ================================
 * ACCORDION HEADERS
 * ================================ */

.gravity-accordion-header {
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gravity-bg-primary);
  border: none;
  cursor: pointer;
  transition: background-color var(--gravity-transition-fast);
  text-align: left;
}

.gravity-accordion-header:hover:not(:disabled) {
  background-color: var(--gravity-bg-secondary);
}

.gravity-accordion-header:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gravity-accordion-header-expanded {
  background-color: var(--gravity-bg-secondary);
}

.gravity-accordion-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

/* ================================
 * HEADER CONTENT ELEMENTS
 * ================================ */

.gravity-accordion-title {
  font-weight: 500;
  color: var(--gravity-text-primary);
}

.gravity-accordion-subtitle {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
  margin-left: auto;
}

.gravity-accordion-badge {
  padding: 0.125rem 0.5rem;
  background: var(--gravity-badge-info-bg);
  color: var(--gravity-badge-info-text);
  border-radius: var(--gravity-radius-sm);
  font-size: 0.75rem;
}

.gravity-accordion-chevron {
  transition: transform var(--gravity-transition-fast);
  color: var(--gravity-text-secondary);
}

.gravity-accordion-chevron-expanded {
  transform: rotate(180deg);
}

/* ================================
 * ACCORDION CONTENT
 * ================================ */

.gravity-accordion-content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.gravity-accordion-content-collapsed {
  max-height: 0;
}

.gravity-accordion-content-expanded {
  max-height: 1000px;
}

.gravity-accordion-content-inner {
  padding: 1rem;
  background: var(--gravity-bg-primary);
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-accordion-header {
    background: var(--gravity-bg-primary);
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-accordion-header-expanded {
    background: var(--gravity-bg-secondary);
  }

  :root:not([data-theme]) .gravity-accordion-content-inner {
    background: var(--gravity-bg-primary);
  }

  :root:not([data-theme]) .gravity-accordion-title {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-accordion-item-bordered {
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-accordion-item {
    border-color: var(--gravity-border-primary);
  }
}

/* ========================================
 * components/alerts.css
 * ======================================== */

/*
 * Gravity UI 2.0 Alert System
 * 
 * Alert components for success, warning, error, and info states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * BASE ALERT STYLES
 * ================================ */

.gravity-alert {
  position: relative;
  padding: var(--gravity-space-4);
  border: var(--gravity-border-width-thin) solid transparent;
  border-radius: var(--gravity-border-radius-sm);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body);
  line-height: var(--gravity-line-height-normal);
  margin-bottom: var(--gravity-space-4);
}

.gravity-alert:last-child {
  margin-bottom: 0;
}

/* ================================
 * ALERT VARIANTS
 * ================================ */

/* Success Alert */
.gravity-alert-success {
  background-color: color-mix(in srgb, var(--gravity-state-success) 10%, transparent);
  border-color: var(--gravity-state-success);
  color: color-mix(in srgb, var(--gravity-state-success) 80%, black);
}

/* Warning Alert */
.gravity-alert-warning {
  background-color: color-mix(in srgb, var(--gravity-state-warning) 10%, transparent);
  border-color: var(--gravity-state-warning);
  color: color-mix(in srgb, var(--gravity-state-warning) 80%, black);
}

/* Error Alert */
.gravity-alert-error {
  background-color: color-mix(in srgb, var(--gravity-state-error) 10%, transparent);
  border-color: var(--gravity-state-error);
  color: color-mix(in srgb, var(--gravity-state-error) 80%, black);
}

/* Info Alert */
.gravity-alert-info {
  background-color: color-mix(in srgb, var(--gravity-state-info) 10%, transparent);
  border-color: var(--gravity-state-info);
  color: color-mix(in srgb, var(--gravity-state-info) 80%, black);
}

/* Primary Alert */
.gravity-alert-primary {
  background-color: color-mix(in srgb, var(--gravity-brand-primary) 10%, transparent);
  border-color: var(--gravity-brand-primary);
  color: color-mix(in srgb, var(--gravity-brand-primary) 80%, black);
}

/* ================================
 * ALERT CONTENT
 * ================================ */

.gravity-alert-title {
  margin: 0 0 var(--gravity-space-2) 0;
  font-size: var(--gravity-font-size-h5);
  font-weight: var(--gravity-font-weight-semibold);
  line-height: var(--gravity-line-height-tight);
  color: inherit;
}

.gravity-alert-description {
  margin: 0;
  color: inherit;
}

.gravity-alert-title + .gravity-alert-description {
  margin-top: var(--gravity-space-1);
}

/* ================================
 * ALERT WITH ICON
 * ================================ */

.gravity-alert-with-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--gravity-space-3);
}

.gravity-alert-icon {
  flex-shrink: 0;
  width: var(--gravity-icon-size-md);
  height: var(--gravity-icon-size-md);
  margin-top: 2px; /* Optical alignment with text */
}

.gravity-alert-content {
  flex: 1;
  min-width: 0;
}

/* ================================
 * ALERT ACTIONS
 * ================================ */

.gravity-alert-actions {
  margin-top: var(--gravity-space-3);
  display: flex;
  gap: var(--gravity-space-2);
  align-items: center;
  flex-wrap: wrap;
}

.gravity-alert-action {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-small);
  font-weight: var(--gravity-font-weight-semibold);
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  transition: opacity var(--gravity-transition-fast);
}

.gravity-alert-action:hover {
  opacity: 0.8;
}

.gravity-alert-action:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ================================
 * DISMISSIBLE ALERTS
 * ================================ */

.gravity-alert-dismissible {
  padding-right: calc(var(--gravity-space-4) + var(--gravity-space-8));
}

.gravity-alert-dismiss {
  position: absolute;
  top: var(--gravity-space-2);
  right: var(--gravity-space-2);
  width: var(--gravity-space-6);
  height: var(--gravity-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--gravity-border-radius-sm);
  cursor: pointer;
  transition: background-color var(--gravity-transition-fast);
  color: inherit;
  opacity: 0.7;
}

.gravity-alert-dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.gravity-alert-dismiss:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}

.gravity-alert-dismiss-icon {
  width: 16px;
  height: 16px;
}

/* ================================
 * ALERT SIZES
 * ================================ */

/* Small Alert */
.gravity-alert-sm {
  padding: var(--gravity-space-3);
  font-size: var(--gravity-font-size-small);
}

.gravity-alert-sm .gravity-alert-title {
  font-size: var(--gravity-font-size-body);
  margin-bottom: var(--gravity-space-1);
}

.gravity-alert-sm.gravity-alert-dismissible {
  padding-right: calc(var(--gravity-space-3) + var(--gravity-space-6));
}

.gravity-alert-sm .gravity-alert-dismiss {
  width: var(--gravity-space-5);
  height: var(--gravity-space-5);
  top: var(--gravity-space-1);
  right: var(--gravity-space-1);
}

/* Large Alert */
.gravity-alert-lg {
  padding: var(--gravity-space-6);
  font-size: var(--gravity-font-size-body-large);
}

.gravity-alert-lg .gravity-alert-title {
  font-size: var(--gravity-font-size-h4);
  margin-bottom: var(--gravity-space-3);
}

.gravity-alert-lg.gravity-alert-dismissible {
  padding-right: calc(var(--gravity-space-6) + var(--gravity-space-10));
}

.gravity-alert-lg .gravity-alert-dismiss {
  width: var(--gravity-space-8);
  height: var(--gravity-space-8);
  top: var(--gravity-space-3);
  right: var(--gravity-space-3);
}

/* ================================
 * ALERT STYLES
 * ================================ */

/* Outlined Alert */
.gravity-alert-outlined {
  background-color: transparent;
  border-width: var(--gravity-border-width-thick);
}

.gravity-alert-outlined.gravity-alert-success {
  color: var(--gravity-state-success);
}

.gravity-alert-outlined.gravity-alert-warning {
  color: color-mix(in srgb, var(--gravity-state-warning) 80%, black);
}

.gravity-alert-outlined.gravity-alert-error {
  color: var(--gravity-state-error);
}

.gravity-alert-outlined.gravity-alert-info {
  color: var(--gravity-state-info);
}

.gravity-alert-outlined.gravity-alert-primary {
  color: var(--gravity-brand-primary);
}

/* Filled Alert */
.gravity-alert-filled {
  color: var(--gravity-color-white);
}

.gravity-alert-filled.gravity-alert-success {
  background-color: var(--gravity-state-success);
  border-color: var(--gravity-state-success);
}

.gravity-alert-filled.gravity-alert-warning {
  background-color: var(--gravity-state-warning);
  border-color: var(--gravity-state-warning);
  color: var(--gravity-color-gray-900);
}

.gravity-alert-filled.gravity-alert-error {
  background-color: var(--gravity-state-error);
  border-color: var(--gravity-state-error);
}

.gravity-alert-filled.gravity-alert-info {
  background-color: var(--gravity-state-info);
  border-color: var(--gravity-state-info);
}

.gravity-alert-filled.gravity-alert-primary {
  background-color: var(--gravity-brand-primary);
  border-color: var(--gravity-brand-primary);
}

/* ================================
 * TOAST ALERTS
 * ================================ */

.gravity-toast {
  position: relative;
  z-index: var(--gravity-z-toast);
  max-width: 400px;
  min-width: 300px;
  box-shadow: var(--gravity-shadow-lg);
  margin-bottom: 0;
}

/* Toast variants with solid backgrounds for visibility */
.gravity-toast.gravity-alert-info {
  background-color: var(--gravity-state-info);
  color: var(--gravity-color-white);
  border-color: var(--gravity-state-info);
}

.gravity-toast.gravity-alert-success {
  background-color: var(--gravity-state-success);
  color: var(--gravity-color-white);
  border-color: var(--gravity-state-success);
}

.gravity-toast.gravity-alert-warning {
  background-color: var(--gravity-state-warning);
  color: var(--gravity-color-gray-900);
  border-color: var(--gravity-state-warning);
}

.gravity-toast.gravity-alert-error {
  background-color: var(--gravity-state-error);
  color: var(--gravity-color-white);
  border-color: var(--gravity-state-error);
}

.gravity-toast-container {
  position: fixed;
  z-index: var(--gravity-z-toast);
  pointer-events: none;
}

.gravity-toast-container .gravity-toast {
  pointer-events: auto;
  margin-bottom: var(--gravity-space-3);
}

/* Toast positions */
.gravity-toast-top-right {
  top: 80px; /* Below the theme toggle */
  right: var(--gravity-space-4);
}

.gravity-toast-top-left {
  top: var(--gravity-space-4);
  left: var(--gravity-space-4);
}

.gravity-toast-bottom-right {
  bottom: var(--gravity-space-4);
  right: var(--gravity-space-4);
}

.gravity-toast-bottom-left {
  bottom: var(--gravity-space-4);
  left: var(--gravity-space-4);
}

.gravity-toast-top-center {
  top: var(--gravity-space-4);
  left: 50%;
  transform: translateX(-50%);
}

.gravity-toast-bottom-center {
  bottom: var(--gravity-space-4);
  left: 50%;
  transform: translateX(-50%);
}

/* ================================
 * ALERT ANIMATIONS
 * ================================ */

.gravity-alert-enter {
  animation: gravity-alert-slide-in var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

.gravity-alert-exit {
  animation: gravity-alert-slide-out var(--gravity-transition-normal) var(--gravity-easing-ease-in);
}

@keyframes gravity-alert-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gravity-alert-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Toast specific animations */
.gravity-toast-enter {
  animation: gravity-toast-slide-in var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

.gravity-toast-exit {
  animation: gravity-toast-slide-out var(--gravity-transition-normal) var(--gravity-easing-ease-in);
}

@keyframes gravity-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gravity-toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Left side toast animations */
.gravity-toast-left-enter {
  animation: gravity-toast-left-slide-in var(--gravity-transition-normal) var(--gravity-easing-ease-out);
}

.gravity-toast-left-exit {
  animation: gravity-toast-left-slide-out var(--gravity-transition-normal) var(--gravity-easing-ease-in);
}

@keyframes gravity-toast-left-slide-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gravity-toast-left-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* ================================
 * RESPONSIVE ADJUSTMENTS
 * ================================ */

@media (max-width: 590px) {
  .gravity-toast {
    left: var(--gravity-space-4) !important;
    right: var(--gravity-space-4) !important;
    max-width: none;
    min-width: 0;
    transform: none !important;
  }
  
  .gravity-alert-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gravity-space-2);
  }
  
  .gravity-alert-action {
    text-align: center;
    padding: var(--gravity-space-2);
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--gravity-border-radius-sm);
    text-decoration: none;
  }
}

/* ================================
 * DARK MODE ADJUSTMENTS
 * ================================ */

[data-theme="dark"] .gravity-alert-dismiss:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .gravity-alert-action {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

@media (prefers-contrast: high) {
  .gravity-alert {
    border-width: 2px;
  }
  
  .gravity-alert-dismiss:focus,
  .gravity-alert-action:focus {
    outline-width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gravity-alert-enter,
  .gravity-alert-exit,
  .gravity-toast-enter,
  .gravity-toast-exit,
  .gravity-toast-left-enter,
  .gravity-toast-left-exit {
    animation: gravity-fade-in var(--gravity-transition-fast) var(--gravity-easing-ease-out);
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  .gravity-alert {
    background: white !important;
    border: 2px solid black !important;
    color: black !important;
    break-inside: avoid;
  }
  
  .gravity-toast {
    position: static !important;
    box-shadow: none !important;
    max-width: none !important;
    margin: var(--gravity-space-4) 0 !important;
  }
  
  .gravity-alert-dismiss {
    display: none !important;
  }
}

/* ========================================
 * components/audio-player.css
 * ======================================== */

/* ====================================
 * GRAVITY UI - AUDIO PLAYER COMPONENT
 * ====================================
 * Main audio player container with flexible layout system
 * Supports embedded and floating placement modes
 */

/* ====================================
 * MAIN CONTAINER
 * ==================================== */

.gravity-audio-player {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-3);
  
  /* Visual Design */
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-lg);
  box-shadow: var(--gravity-shadow-medium);
  
  /* Layout */
  padding: var(--gravity-space-4);
  font-family: var(--gravity-font-sans);
  
  /* Responsive Base */
  width: 100%;
  max-width: 520px;
  
  /* Transitions */
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.gravity-audio-player:hover {
  box-shadow: var(--gravity-shadow-large);
  border-color: var(--gravity-border-interactive);
}

/* ====================================
 * PLACEMENT VARIANTS
 * ==================================== */

/* Embedded: Inline with content */
.gravity-audio-player[data-placement="embedded"] {
  position: relative;
  margin: var(--gravity-space-4) 0;
}

/* Floating: Fixed position overlay */
.gravity-audio-player[data-placement="floating"] {
  position: fixed;
  bottom: var(--gravity-space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--gravity-z-overlay);
  backdrop-filter: blur(10px);
  box-shadow: var(--gravity-shadow-xl);
}

/* ====================================
 * SIZE VARIANTS
 * ==================================== */

.gravity-audio-player[data-size="compact"] {
  padding: var(--gravity-space-3);
  gap: var(--gravity-space-2);
  max-width: 400px;
}

.gravity-audio-player[data-size="standard"] {
  padding: var(--gravity-space-4);
  gap: var(--gravity-space-3);
  max-width: 520px;
}

.gravity-audio-player[data-size="expanded"] {
  padding: var(--gravity-space-5);
  gap: var(--gravity-space-4);
  max-width: 640px;
}

/* ====================================
 * STATE VARIANTS
 * ==================================== */

.gravity-audio-player[data-state="loading"] {
  opacity: 0.8;
  pointer-events: none;
}

.gravity-audio-player[data-state="error"] {
  border-color: var(--gravity-color-error);
  background: var(--gravity-bg-error-subtle);
}

.gravity-audio-player[data-state="disabled"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ====================================
 * INTERNAL LAYOUT
 * ==================================== */

.gravity-audio-controls {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-3);
  flex-wrap: wrap;
}

.gravity-audio-info {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-1);
}

/* ====================================
 * CONTROL BUTTON BASE STYLES
 * ==================================== */

.gravity-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Interactive */
  background: var(--gravity-bg-secondary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-md);
  cursor: pointer;
  
  /* Typography */
  color: var(--gravity-text-primary);
  font-family: inherit;
  font-size: var(--gravity-font-size-sm);
  
  /* Layout */
  min-width: 40px;
  height: 40px;
  padding: var(--gravity-space-2);
  
  /* Transitions */
  transition: all 0.2s ease;
}

.gravity-audio-btn:hover:not(:disabled) {
  background: var(--gravity-bg-hover);
  border-color: var(--gravity-border-interactive);
}

.gravity-audio-btn:active:not(:disabled) {
  background: var(--gravity-bg-pressed);
}

.gravity-audio-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.gravity-audio-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
  border-color: var(--gravity-border-focus);
}

/* ====================================
 * PRIMARY ACTION BUTTON
 * ==================================== */

.gravity-audio-btn-primary {
  background: var(--gravity-color-primary);
  border-color: var(--gravity-color-primary);
  color: var(--gravity-text-inverse);
  
  /* Larger for emphasis */
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
}

.gravity-audio-btn-primary:hover:not(:disabled) {
  background: var(--gravity-color-primary-hover);
  border-color: var(--gravity-color-primary-hover);
  filter: brightness(0.95);
}

.gravity-audio-btn-primary[data-state="loading"] {
  background: var(--gravity-color-muted);
  border-color: var(--gravity-color-muted);
  animation: gravity-pulse 1.5s ease-in-out infinite;
}

@keyframes gravity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ====================================
 * THEME SUPPORT
 * ==================================== */

[data-theme="dark"] .gravity-audio-player {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-primary);
  box-shadow: var(--gravity-shadow-dark-medium);
}

[data-theme="dark"] .gravity-audio-player:hover {
  box-shadow: var(--gravity-shadow-dark-large);
  border-color: var(--gravity-border-interactive);
}

[data-theme="dark"] .gravity-audio-player[data-placement="floating"] {
  backdrop-filter: blur(10px);
  background: rgba(var(--gravity-bg-primary-rgb), 0.95);
}

/* ====================================
 * RESPONSIVE DESIGN
 * ==================================== */

/* Tablet */
@media (max-width: 768px) {
  .gravity-audio-player {
    padding: var(--gravity-space-3);
    max-width: 100%;
  }
  
  .gravity-audio-player[data-placement="floating"] {
    bottom: var(--gravity-space-3);
    left: var(--gravity-space-3);
    right: var(--gravity-space-3);
    transform: none;
    width: auto;
  }
  
  .gravity-audio-controls {
    gap: var(--gravity-space-2);
  }
  
  .gravity-audio-btn {
    min-width: 36px;
    height: 36px;
  }
  
  .gravity-audio-btn-primary {
    min-width: 44px;
    height: 44px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .gravity-audio-player {
    padding: var(--gravity-space-2);
    gap: var(--gravity-space-2);
  }
  
  .gravity-audio-controls {
    gap: var(--gravity-space-1);
  }
  
  .gravity-audio-btn {
    min-width: 32px;
    height: 32px;
    padding: var(--gravity-space-1);
  }
  
  .gravity-audio-btn-primary {
    min-width: 40px;
    height: 40px;
  }
  
  /* Hide advanced controls on mobile to save space */
  .gravity-audio-player[data-mobile-simplified="true"] .gravity-speed-control,
  .gravity-audio-player[data-mobile-simplified="true"] .gravity-volume-control {
    display: none;
  }
}

/* ====================================
 * ACCESSIBILITY & VISIBILITY
 * ==================================== */

/* Hide player when not visible */
.gravity-audio-player.gravity-hidden,
.gravity-audio-player[aria-hidden="true"],
.gravity-audio-player-container[aria-hidden="true"] {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .gravity-audio-player {
    border-width: 2px;
  }
  
  .gravity-audio-btn {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .gravity-audio-player,
  .gravity-audio-btn {
    transition: none;
  }
  
  .gravity-audio-btn:hover:not(:disabled) {
    transform: none;
  }
  
  .gravity-audio-btn-primary[data-state="loading"] {
    animation: none;
  }
}

/* Focus indicators for keyboard navigation */
.gravity-audio-player:focus-within {
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
}

/* ========================================
 * components/auth-form-layout.css
 * ======================================== */

/* ============================================
   AuthFormLayout Component
   ============================================

   Centered card layout for authentication flows with:
   - Full viewport centered layout
   - Optional logo/branding
   - Form heading and subtitle
   - Error/success message alerts
   - EditForm integration with validation
   - Primary action button
   - Secondary links
   - Loading states
   - Responsive design

   Used for: Login, Register, Password Reset, 2FA, etc.
   ============================================ */

/* Full Viewport Layout */
.auth-form-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-secondary, #f9fafb);
  padding: var(--spacing-4, 16px);
}

/* Form Container Card */
.auth-form-layout__container {
  width: 100%;
  background: var(--color-background-primary, #ffffff);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-8, 32px);
}

/* Logo Section */
.auth-form-layout__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-6, 24px);
}

.auth-form-layout__logo-image {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.auth-form-layout__logo-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #007bff);
  border-radius: var(--radius-full, 9999px);
  color: #ffffff;
  font-size: 24px;
}

/* Header Section */
.auth-form-layout__header {
  text-align: center;
  margin-bottom: var(--spacing-6, 24px);
}

.auth-form-layout__title {
  font-size: var(--font-size-2xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--spacing-2, 8px) 0;
  line-height: 1.2;
}

.auth-form-layout__subtitle {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* Alert Messages */
.auth-form-layout__alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 8px);
  padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--spacing-4, 16px);
  font-size: var(--font-size-sm, 14px);
  line-height: 1.5;
}

.auth-form-layout__alert i {
  flex-shrink: 0;
  font-size: 18px;
}

.auth-form-layout__alert--error {
  background: var(--color-error-bg, #fef2f2);
  border: 1px solid var(--color-error-border, #fecaca);
  color: var(--color-error-text, #991b1b);
}

.auth-form-layout__alert--error i {
  color: var(--color-error, #dc2626);
}

.auth-form-layout__alert--success {
  background: var(--color-success-bg, #f0fdf4);
  border: 1px solid var(--color-success-border, #bbf7d0);
  color: var(--color-success-text, #166534);
}

.auth-form-layout__alert--success i {
  color: var(--color-success, #16a34a);
}

/* Form Section */
.auth-form-layout__form {
  margin: 0;
}

/* Validation Summary */
.auth-form-layout__validation-summary {
  background: var(--color-error-bg, #fef2f2);
  border: 1px solid var(--color-error-border, #fecaca);
  color: var(--color-error-text, #991b1b);
  padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--spacing-4, 16px);
  font-size: var(--font-size-sm, 14px);
}

.auth-form-layout__validation-summary ul {
  margin: 0;
  padding-left: var(--spacing-4, 16px);
}

/* Form Fields */
.auth-form-layout__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 16px);
  margin-bottom: var(--spacing-6, 24px);
}

/* Primary Action Button Container */
.auth-form-layout__primary-action {
  margin-bottom: var(--spacing-4, 16px);
}

/* Secondary Links */
.auth-form-layout__secondary-links {
  text-align: center;
  font-size: var(--font-size-sm, 14px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2, 8px);
  padding-top: var(--spacing-4, 16px);
  border-top: 1px solid var(--color-border-primary, #e5e7eb);
}

.auth-form-layout__secondary-links a {
  color: var(--color-primary, #007bff);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
  transition: color 0.2s ease;
}

.auth-form-layout__secondary-links a:hover {
  color: var(--color-primary-hover, #0056b3);
  text-decoration: underline;
}

/* Footer Content */
.auth-form-layout__footer {
  margin-top: var(--spacing-6, 24px);
  padding-top: var(--spacing-4, 16px);
  border-top: 1px solid var(--color-border-primary, #e5e7eb);
  text-align: center;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-tertiary, #9ca3af);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Mobile: Reduce padding */
@media (max-width: 640px) {
  .auth-form-layout {
    padding: var(--spacing-2, 8px);
  }

  .auth-form-layout__container {
    padding: var(--spacing-6, 24px);
    max-width: 100% !important;
  }

  .auth-form-layout__title {
    font-size: var(--font-size-xl, 20px);
  }

  .auth-form-layout__logo-image {
    max-height: 40px;
  }

  .auth-form-layout__logo-placeholder {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* Print: Simple layout */
@media print {
  .auth-form-layout {
    min-height: auto;
    background: #ffffff;
    padding: 0;
  }

  .auth-form-layout__container {
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }

  .auth-form-layout__secondary-links,
  .auth-form-layout__footer {
    display: none;
  }
}

/* ========================================
 * components/badges.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Badges Component Styles
 * 
 * Status badges, role indicators, notification badges
 * Used in tables, lists, and UI elements
 */

/* ================================
 * BASE BADGE STYLES
 * ================================ */

.gravity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: var(--gravity-font-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  transition: all var(--gravity-transition-fast);
}

.gravity-badge-icon {
  margin-right: 4px;
  font-size: 10px;
}

/* ================================
 * BADGE VARIANTS
 * ================================ */

/* Success Badge */
.gravity-badge-success {
  background-color: var(--gravity-badge-success-bg);
  color: var(--gravity-badge-success-text);
}

.gravity-badge-success:hover {
  background-color: color-mix(in srgb, var(--gravity-badge-success-bg) 80%, black);
}

/* Warning Badge */
.gravity-badge-warning {
  background-color: var(--gravity-badge-warning-bg);
  color: var(--gravity-badge-warning-text);
}

.gravity-badge-warning:hover {
  background-color: color-mix(in srgb, var(--gravity-badge-warning-bg) 80%, black);
}

/* Error/Danger Badge */
.gravity-badge-error,
.gravity-badge-danger {
  background-color: var(--gravity-badge-error-bg);
  color: var(--gravity-badge-error-text);
}

.gravity-badge-error:hover,
.gravity-badge-danger:hover {
  background-color: color-mix(in srgb, var(--gravity-badge-error-bg) 80%, black);
}

/* Info Badge */
.gravity-badge-info {
  background-color: var(--gravity-badge-info-bg);
  color: var(--gravity-badge-info-text);
}

.gravity-badge-info:hover {
  background-color: color-mix(in srgb, var(--gravity-badge-info-bg) 80%, black);
}

/* Default/Neutral Badge */
.gravity-badge-default,
.gravity-badge-neutral {
  background-color: var(--gravity-badge-default-bg);
  color: var(--gravity-badge-default-text);
}

.gravity-badge-default:hover,
.gravity-badge-neutral:hover {
  background-color: color-mix(in srgb, var(--gravity-badge-default-bg) 80%, black);
}

/* Primary Badge */
.gravity-badge-primary {
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.1);
  color: var(--gravity-brand-primary);
}

.gravity-badge-primary:hover {
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.2);
}

/* ================================
 * BADGE SIZES
 * ================================ */

.gravity-badge-sm {
  padding: 1px 8px;
  font-size: 11px;
}

.gravity-badge-lg {
  padding: 4px 12px;
  font-size: 14px;
}

/* ================================
 * STATUS BADGES (With Icons)
 * ================================ */

.gravity-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Active Status */
.gravity-badge-active {
  background-color: var(--gravity-badge-success-bg);
  color: var(--gravity-badge-success-text);
}


/* Pending/Invited Status */
.gravity-badge-pending,
.gravity-badge-invited {
  background-color: var(--gravity-badge-warning-bg);
  color: var(--gravity-badge-warning-text);
}


/* Inactive Status */
.gravity-badge-inactive {
  background-color: var(--gravity-badge-default-bg);
  color: var(--gravity-badge-default-text);
}


/* ================================
 * NOTIFICATION BADGES
 * ================================ */

.gravity-badge-notification {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: var(--gravity-font-weight-bold);
  line-height: 18px;
  text-align: center;
  background-color: var(--gravity-color-secondary-red);
  color: var(--gravity-text-inverse);
  box-shadow: 0 0 0 2px var(--gravity-bg-primary);
}

.gravity-badge-notification.gravity-badge-dot {
  min-width: 8px;
  height: 8px;
  padding: 0;
}

/* ================================
 * BADGE GROUPS
 * ================================ */

.gravity-badge-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ================================
 * BADGE WITH REMOVE BUTTON
 * ================================ */

.gravity-badge-removable {
  padding-right: 4px;
}

.gravity-badge-remove {
  margin-left: 6px;
  padding: 2px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--gravity-transition-fast);
}

.gravity-badge-remove:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.gravity-badge-remove::after {
  content: '';
  font-size: 16px;
  line-height: 1;
}

/* ================================
 * BADGE PILLS (Alternative Style)
 * ================================ */

.gravity-badge-pill {
  border-radius: var(--gravity-radius-sm);
  padding: 4px 8px;
}

/* ================================
 * BADGE WITH BORDERS
 * ================================ */

.gravity-badge-outlined {
  background-color: transparent;
  border: 1px solid currentColor;
}

.gravity-badge-outlined.gravity-badge-success {
  color: var(--gravity-badge-success-text);
  border-color: var(--gravity-badge-success-text);
}

.gravity-badge-outlined.gravity-badge-warning {
  color: var(--gravity-badge-warning-text);
  border-color: var(--gravity-badge-warning-text);
}

.gravity-badge-outlined.gravity-badge-error {
  color: var(--gravity-badge-error-text);
  border-color: var(--gravity-badge-error-text);
}

.gravity-badge-outlined.gravity-badge-info {
  color: var(--gravity-badge-info-text);
  border-color: var(--gravity-badge-info-text);
}

.gravity-badge-outlined:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* ================================
 * ANIMATED BADGES
 * ================================ */

.gravity-badge-pulse {
  animation: gravity-pulse 2s infinite;
}

@keyframes gravity-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--gravity-brand-primary-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(var(--gravity-brand-primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--gravity-brand-primary-rgb), 0);
  }
}

/* Blinking Badge for Urgent Notifications */
.gravity-badge-blink {
  animation: gravity-blink 1s infinite;
}

@keyframes gravity-blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.5;
  }
}

/* ================================
 * ROLE BADGE EXTENSIONS
 * ================================ */

/* Role badge size variants */
.gravity-role-badge.badge-sm {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.gravity-role-badge.badge-lg {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

/* Layout variations for badge containers */
.gravity-role-badges.vertical {
  flex-direction: column;
  align-items: flex-start;
}

.gravity-role-badges.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, max-content));
  gap: 4px;
}

/* Badge groups with custom gaps */
.gravity-role-badges.gap-tight {
  gap: 2px;
}

.gravity-role-badges.gap-normal {
  gap: 4px;
}

.gravity-role-badges.gap-loose {
  gap: 8px;
}

/* Overflow badge for truncated lists */
.gravity-role-badge.overflow {
  background-color: var(--gravity-color-gray-500);
  color: var(--gravity-text-inverse);
  font-size: 11px;
  padding: 0 6px;
  width: auto;
  min-width: 28px;
}

/* Status-specific badge variants (mapping to role colors) */
.gravity-role-badge.status-active {
  background-color: var(--gravity-color-secondary-green);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.status-pending,
.gravity-role-badge.status-invited {
  background-color: var(--gravity-color-secondary-orange);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.status-inactive {
  background-color: var(--gravity-color-gray-400);
  color: var(--gravity-color-gray-600);
}

/* Permission badge variants */
.gravity-role-badge.permission-read {
  background-color: var(--gravity-color-gray-500);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.permission-write {
  background-color: var(--gravity-color-secondary-orange);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.permission-execute {
  background-color: var(--gravity-color-secondary-red);
  color: var(--gravity-text-inverse);
}

/* Achievement badge variants with emoji support */
.gravity-role-badge.achievement {
  font-size: 16px;
  width: 32px;
  height: 32px;
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.1);
  border: 1px solid var(--gravity-brand-primary);
}

/* Hover effects for interactive badges */
.gravity-role-badge[title]:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
  cursor: help;
}

/* Badge pulse animation (reusing the keyframe) */
.gravity-role-badge.pulse {
  animation: gravity-pulse 2s infinite;
}

/* ========================================
 * components/breadcrumb.css
 * ======================================== */

/*
 * Gravity UI 2.0 Breadcrumb Component
 * 
 * Navigation breadcrumb trails with icons, separators, and overflow handling
 * Supports clickable links, current page state, and responsive behavior
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * BREADCRUMB CONTAINER
 * ================================ */

.gravity-breadcrumb {
  padding: 0.5rem 0;
}

.gravity-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gravity-breadcrumb-item {
  display: flex;
  align-items: center;
}

/* ================================
 * BREADCRUMB LINKS AND TEXT
 * ================================ */

.gravity-breadcrumb-link {
  color: var(--gravity-text-link);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--gravity-radius-sm);
  transition: background-color var(--gravity-transition-fast);
}

.gravity-breadcrumb-link:hover {
  background-color: var(--gravity-brand-primary-alpha-10);
}

.gravity-breadcrumb-text {
  color: var(--gravity-text-primary);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
}

/* ================================
 * SEPARATORS AND ICONS
 * ================================ */

.gravity-breadcrumb-separator {
  color: var(--gravity-text-muted);
  margin: 0 0.25rem;
}

.gravity-breadcrumb-icon {
  margin-right: 0.25rem;
}

/* ================================
 * OVERFLOW HANDLING
 * ================================ */

.gravity-breadcrumb-overflow {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--gravity-text-secondary);
  cursor: pointer;
  border-radius: var(--gravity-radius-sm);
}

.gravity-breadcrumb-overflow:hover {
  background-color: var(--gravity-bg-muted);
}

/* ================================
 * DARK MODE SUPPORT
 * Uses [data-theme="dark"] selector consistent with foundation
 * Colors are now inherited from CSS variables which auto-switch
 * ================================ */

/* Dark mode is now handled by CSS variables in foundation/variables.css
 * No explicit overrides needed here since all colors use variables.
 * The following is a fallback for systems using prefers-color-scheme
 * without the data-theme attribute set.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-breadcrumb-link {
    color: var(--gravity-text-link);
  }

  :root:not([data-theme]) .gravity-breadcrumb-link:hover {
    background-color: var(--gravity-brand-primary-alpha-20);
  }

  :root:not([data-theme]) .gravity-breadcrumb-text {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-breadcrumb-separator {
    color: var(--gravity-text-muted);
  }

  :root:not([data-theme]) .gravity-breadcrumb-overflow {
    color: var(--gravity-text-secondary);
  }

  :root:not([data-theme]) .gravity-breadcrumb-overflow:hover {
    background-color: var(--gravity-bg-muted);
  }
}

/* ========================================
 * components/buttons.css
 * ======================================== */

/*
 * Gravity UI 2.0 Button System
 *
 * Complete button implementation based on exact Figma specifications:
 * - Variants: Default, Primary, Attention, Disabled
 * - States: Normal, Hover
 * - Sizes: Small (32px), Medium (36px), Large (39px)
 * - Dark Background variants for each
 *
 * All buttons use: padding 0px 24px, border-radius 40px (full pill)
 */

/* ================================
 * BASE BUTTON STYLES
 * ================================ */

.gravity-btn {
  /* Layout - Figma: display flex, flex-direction row, align-items center */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  /* Sizing - Default to Medium (36px height, 152px min-width) */
  /* Override accessibility min-height: 44px from reset.css */
  height: var(--gravity-button-height-md);
  min-height: var(--gravity-button-height-md);
  min-width: var(--gravity-button-min-width-md);

  /* Padding - Figma: 0px 24px for ALL sizes */
  padding: var(--gravity-button-padding-y) var(--gravity-button-padding-x);

  /* Border - Figma: 40px radius (full pill) */
  border: 1px solid transparent;
  border-radius: var(--gravity-button-radius);

  /* Typography */
  font-family: var(--gravity-font-family-primary);
  font-weight: var(--gravity-font-weight-semibold);
  font-size: var(--gravity-font-size-body);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  /* Behavior */
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  position: relative;
  outline: none;
  box-sizing: border-box;

  /* Transitions */
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;

  /* Icon spacing */
  gap: 0.5rem;

  /* Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.gravity-btn:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Button icon alignment */
.gravity-btn .gravity-icon {
  flex-shrink: 0;
  margin: 0;
  background-color: currentColor;
}

/* ================================
 * BUTTON SIZES (Figma Specs)
 * ================================ */

/* Small: 128px min-width, 32px height */
.gravity-btn-sm {
  height: var(--gravity-button-height-sm);
  min-height: var(--gravity-button-height-sm);
  min-width: var(--gravity-button-min-width-sm);
  font-size: var(--gravity-font-size-small);
}

/* Medium: 152px min-width, 36px height (default) */
.gravity-btn-md {
  height: var(--gravity-button-height-md);
  min-height: var(--gravity-button-height-md);
  min-width: var(--gravity-button-min-width-md);
  font-size: var(--gravity-font-size-body);
}

/* Large: 152px min-width, 39px height */
.gravity-btn-lg {
  height: var(--gravity-button-height-lg);
  min-height: var(--gravity-button-height-lg);
  min-width: var(--gravity-button-min-width-lg);
  font-size: var(--gravity-font-size-body-large);
}

/* ================================
 * PRIMARY BUTTON (Figma Specs)
 * Basic: #005D83 | Hover: #047A9C
 * ================================ */

.gravity-btn-primary {
  background-color: var(--gravity-button-primary);
  color: var(--gravity-color-white);
  border-color: transparent;
}

.gravity-btn-primary:hover {
  background-color: var(--gravity-button-primary-hover);
}

.gravity-btn-primary:active {
  background-color: var(--gravity-button-primary);
}

/* Primary - Dark Background */
.gravity-btn-primary.gravity-btn-dark-bg,
[data-theme="dark"] .gravity-btn-primary {
  background-color: var(--gravity-button-primary-dark-bg);
  color: var(--gravity-color-gray-900);
}

.gravity-btn-primary.gravity-btn-dark-bg:hover,
[data-theme="dark"] .gravity-btn-primary:hover {
  background-color: var(--gravity-button-primary-dark-hover);
}

/* ================================
 * ATTENTION BUTTON (Figma Specs)
 * Basic: #FFCB4E | Hover: #FFE15C
 * ================================ */

.gravity-btn-attention {
  background-color: var(--gravity-button-attention);
  color: var(--gravity-color-gray-900);
  border-color: transparent;
}

.gravity-btn-attention:hover {
  background-color: var(--gravity-button-attention-hover);
}

.gravity-btn-attention:active {
  background-color: var(--gravity-button-attention);
}

/* ================================
 * DEFAULT BUTTON (Figma Specs)
 * Basic: transparent + #6A7070 border
 * Hover: rgba(217,217,217,0.3) + same border
 * ================================ */

.gravity-btn-default {
  background-color: transparent;
  color: var(--gravity-text-primary);
  border-color: var(--gravity-button-default-border);
}

.gravity-btn-default:hover {
  background-color: var(--gravity-button-default-hover-bg);
}

.gravity-btn-default:active {
  background-color: transparent;
}

/* Default - Dark Background */
.gravity-btn-default.gravity-btn-dark-bg,
[data-theme="dark"] .gravity-btn-default {
  background-color: transparent;
  color: var(--gravity-color-white);
  border-color: var(--gravity-color-white);
}

.gravity-btn-default.gravity-btn-dark-bg:hover,
[data-theme="dark"] .gravity-btn-default:hover {
  background-color: var(--gravity-button-default-dark-hover-bg);
}

/* ================================
 * SECONDARY BUTTON
 * Outline style using primary color
 * ================================ */

.gravity-btn-secondary {
  background-color: transparent;
  color: var(--gravity-button-primary);
  border-color: var(--gravity-button-primary);
}

.gravity-btn-secondary:hover {
  background-color: var(--gravity-button-primary);
  color: var(--gravity-color-white);
}

.gravity-btn-secondary:active {
  background-color: var(--gravity-button-primary-hover);
  border-color: var(--gravity-button-primary-hover);
}

/* ================================
 * SUCCESS BUTTON
 * ================================ */

.gravity-btn-success {
  background-color: var(--gravity-button-success);
  color: var(--gravity-color-white);
  border-color: transparent;
}

.gravity-btn-success:hover {
  background-color: color-mix(in srgb, var(--gravity-button-success) 85%, black);
}

.gravity-btn-success:active {
  background-color: color-mix(in srgb, var(--gravity-button-success) 70%, black);
}

/* ================================
 * DANGER BUTTON
 * ================================ */

.gravity-btn-danger {
  background-color: var(--gravity-button-danger);
  color: var(--gravity-color-white);
  border-color: transparent;
}

.gravity-btn-danger:hover {
  background-color: color-mix(in srgb, var(--gravity-button-danger) 85%, black);
}

.gravity-btn-danger:active {
  background-color: color-mix(in srgb, var(--gravity-button-danger) 70%, black);
}

/* ================================
 * DISABLED STATE (Figma Specs)
 * Background: rgba(217, 217, 217, 0.6)
 * ================================ */

.gravity-btn:disabled,
.gravity-btn-disabled {
  background-color: var(--gravity-button-disabled-bg) !important;
  color: var(--gravity-color-gray-700) !important;
  border-color: transparent !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================
 * LOADING STATE
 * ================================ */

.gravity-btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.gravity-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gravity-spin 0.75s linear infinite;
}

/* Restore color for spinner visibility */
.gravity-btn-loading.gravity-btn-primary::after {
  border-color: var(--gravity-color-white);
  border-right-color: transparent;
}

.gravity-btn-loading.gravity-btn-attention::after {
  border-color: var(--gravity-color-gray-900);
  border-right-color: transparent;
}

.gravity-btn-loading.gravity-btn-default::after {
  border-color: var(--gravity-text-primary);
  border-right-color: transparent;
}

/* ================================
 * GHOST BUTTON
 * Minimal styling, no background
 * ================================ */

.gravity-btn-ghost {
  background-color: transparent;
  color: var(--gravity-text-secondary);
  border-color: transparent;
}

.gravity-btn-ghost:hover {
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-text-primary);
}

.gravity-btn-ghost:active {
  background-color: var(--gravity-bg-secondary);
}

/* ================================
 * BUTTON GROUPS
 * ================================ */

.gravity-btn-group {
  display: inline-flex;
  border-radius: var(--gravity-button-radius);
}

.gravity-btn-group .gravity-btn {
  border-radius: 0;
  border-right-width: 0;
  min-width: auto;
}

.gravity-btn-group .gravity-btn:first-child {
  border-top-left-radius: var(--gravity-button-radius);
  border-bottom-left-radius: var(--gravity-button-radius);
}

.gravity-btn-group .gravity-btn:last-child {
  border-top-right-radius: var(--gravity-button-radius);
  border-bottom-right-radius: var(--gravity-button-radius);
  border-right-width: 1px;
}

/* ================================
 * ICON-ONLY BUTTONS
 * ================================ */

.gravity-btn-icon {
  min-width: var(--gravity-button-height-md);
  width: var(--gravity-button-height-md);
  padding: 0;
  justify-content: center;
}

.gravity-btn-icon.gravity-btn-sm {
  min-width: var(--gravity-button-height-sm);
  width: var(--gravity-button-height-sm);
}

.gravity-btn-icon.gravity-btn-lg {
  min-width: var(--gravity-button-height-lg);
  width: var(--gravity-button-height-lg);
}

/* ================================
 * ICON-ONLY BUTTONS
 * Circular buttons containing only an icon
 * ================================ */

.gravity-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gravity-radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  outline: none;
}

.gravity-icon-button:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Icon Button Sizes */
.gravity-icon-button-sm {
  width: 28px;
  height: 28px;
  padding: 0.25rem;
}

.gravity-icon-button-md {
  width: 36px;
  height: 36px;
  padding: 0.5rem;
}

.gravity-icon-button-lg {
  width: 44px;
  height: 44px;
  padding: 0.75rem;
}

/* Ghost Variant (default) - transparent background */
.gravity-icon-button-ghost {
  color: var(--gravity-text-secondary);
}

.gravity-icon-button-ghost:hover {
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-muted);
}

/* Contained Variant - solid background */
.gravity-icon-button-contained {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

.gravity-icon-button-contained:hover {
  background-color: var(--gravity-brand-primary-hover);
}

/* Outlined Variant - bordered */
.gravity-icon-button-outlined {
  border: 1px solid var(--gravity-border-primary);
  background-color: var(--gravity-bg-primary);
  color: var(--gravity-text-secondary);
}

.gravity-icon-button-outlined:hover {
  background-color: var(--gravity-bg-muted);
}

/* Disabled State */
.gravity-icon-button:disabled,
.gravity-icon-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================
 * UTILITY CLASSES
 * ================================ */

/* Full-width button */
.gravity-btn-block {
  display: flex;
  width: 100%;
  min-width: 100%;
}

/* Remove all button styling */
.gravity-btn-unstyled {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  min-width: auto;
  min-height: auto;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  border-radius: 0;
}

/* ================================
 * ANIMATIONS
 * ================================ */

@keyframes gravity-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================================
 * ACCESSIBILITY
 * ================================ */

@media (prefers-contrast: high) {
  .gravity-btn {
    border-width: 2px;
  }

  .gravity-btn-primary,
  .gravity-btn-success,
  .gravity-btn-danger {
    border-color: currentColor;
  }

  .gravity-btn:focus-visible {
    outline-width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gravity-btn {
    transition: none;
  }

  .gravity-btn-loading::after {
    animation: none;
  }
}

/* ================================
 * RESPONSIVE
 * ================================ */

@media (max-width: 590px) {
  .gravity-btn {
    min-width: auto;
  }

  .gravity-btn-mobile-full {
    width: 100%;
    min-width: 100%;
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  .gravity-btn {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }
}

/* ========================================
 * components/cards.css
 * ======================================== */

/*
 * Gravity UI 2.0 Card System
 * 
 * Card components with headers, bodies, footers, and various states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * BASE CARD STYLES
 * ================================ */

.gravity-card {
  display: flex;
  flex-direction: column;
  background-color: var(--gravity-bg-primary);
  border: none;  /* Figma: no border, shadow provides definition */
  border-radius: var(--gravity-card-border-radius);
  box-shadow: var(--gravity-card-shadow);
  overflow: hidden;
  position: relative;
}

/* No default hover on .gravity-card - use .gravity-card-interactive for hover effects */

/* ================================
 * CARD SECTIONS
 * ================================ */

.gravity-card-header {
  padding: var(--gravity-card-padding);
  background-color: var(--gravity-bg-secondary);
  border-bottom: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
}

.gravity-card-body {
  padding: var(--gravity-card-padding);
  flex: 1;
}

.gravity-card-footer {
  padding: var(--gravity-card-padding);
  background-color: var(--gravity-bg-secondary);
  border-top: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
  margin-top: auto;
}

/* ================================
 * CARD HEADER VARIANTS
 * ================================ */

.gravity-card-header-primary {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
  border-bottom-color: var(--gravity-brand-primary);
}

.gravity-card-header-secondary {
  background-color: var(--gravity-brand-secondary);
  color: var(--gravity-color-white);
  border-bottom-color: var(--gravity-brand-secondary);
}

.gravity-card-header-transparent {
  background-color: transparent;
  border-bottom: none;
}

/* ================================
 * CARD TITLE AND SUBTITLE
 * ================================ */

.gravity-card-title {
  margin: 0 0 var(--gravity-space-2) 0;
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-h4);
  font-weight: var(--gravity-font-weight-semibold);
  line-height: var(--gravity-line-height-tight);
  color: var(--gravity-text-primary);
}

.gravity-card-header-primary .gravity-card-title,
.gravity-card-header-secondary .gravity-card-title {
  color: inherit;
}

.gravity-card-subtitle {
  margin: 0;
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-small);
  font-weight: var(--gravity-font-weight-regular);
  line-height: var(--gravity-line-height-normal);
  color: var(--gravity-text-secondary);
}

.gravity-card-header-primary .gravity-card-subtitle,
.gravity-card-header-secondary .gravity-card-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* ================================
 * CARD CONTENT ELEMENTS
 * ================================ */

.gravity-card-text {
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body);
  line-height: var(--gravity-line-height-normal);
  color: var(--gravity-text-primary);
  margin: 0 0 var(--gravity-space-3) 0;
}

.gravity-card-text:last-child {
  margin-bottom: 0;
}

.gravity-card-link {
  color: var(--gravity-brand-primary);
  text-decoration: none;
  font-weight: var(--gravity-font-weight-semibold);
  transition: color var(--gravity-transition-fast);
}

.gravity-card-link:hover {
  color: var(--gravity-text-link-hover);
  text-decoration: underline;
}

/* ================================
 * CARD VARIANTS
 * ================================ */

/* Elevated card */
.gravity-card-elevated {
  box-shadow: var(--gravity-shadow-lg);
  border: none;
}

.gravity-card-elevated:hover {
  box-shadow: var(--gravity-shadow-xl);
}

/* Outlined card */
.gravity-card-outlined {
  border: 2px solid var(--gravity-border-primary);
  box-shadow: none;
}

.gravity-card-outlined:hover {
  border-color: var(--gravity-brand-primary);
  box-shadow: var(--gravity-shadow-sm);
}

/* Suppress card hover when containing drop zones (slots) to avoid visual confusion */
.gravity-card-outlined:has(.slot):hover {
  border-color: var(--gravity-border-primary);
  box-shadow: none;
}

/* Flat card */
.gravity-card-flat {
  box-shadow: none;
  border: none;
  background-color: transparent;
}

.gravity-card-flat:hover {
  background-color: var(--gravity-bg-secondary);
  transform: none;
}

/* Interactive card - adds hover/active states with border feedback */
.gravity-card-interactive {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
}

.gravity-card-interactive:hover {
  border-color: var(--gravity-brand-primary);
  box-shadow: var(--gravity-shadow-lg);
}

.gravity-card-interactive:active {
  border-color: var(--gravity-brand-primary-dark, var(--gravity-brand-primary));
  box-shadow: var(--gravity-shadow-md);
}

.gravity-card-interactive:focus {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Outlined interactive cards - preserve light border when not hovered */
.gravity-card-outlined.gravity-card-interactive {
  border-color: var(--gravity-border-secondary);
}

.gravity-card-outlined.gravity-card-interactive:hover {
  border-color: var(--gravity-brand-primary);
  box-shadow: none;
}

/* ================================
 * CARD STATES
 * ================================ */

/* Success state */
.gravity-card-success {
  border-left: 4px solid var(--gravity-state-success);
}

.gravity-card-success .gravity-card-header {
  background-color: color-mix(in srgb, var(--gravity-state-success) 10%, var(--gravity-bg-secondary));
}

/* Warning state */
.gravity-card-warning {
  border-left: 4px solid var(--gravity-state-warning);
}

.gravity-card-warning .gravity-card-header {
  background-color: color-mix(in srgb, var(--gravity-state-warning) 10%, var(--gravity-bg-secondary));
}

/* Error state */
.gravity-card-error {
  border-left: 4px solid var(--gravity-state-error);
}

.gravity-card-error .gravity-card-header {
  background-color: color-mix(in srgb, var(--gravity-state-error) 10%, var(--gravity-bg-secondary));
}

/* Info state */
.gravity-card-info {
  border-left: 4px solid var(--gravity-state-info);
}

.gravity-card-info .gravity-card-header {
  background-color: color-mix(in srgb, var(--gravity-state-info) 10%, var(--gravity-bg-secondary));
}

/* ================================
 * CARD SIZES
 * ================================ */

/* Compact card */
.gravity-card-compact .gravity-card-header,
.gravity-card-compact .gravity-card-body,
.gravity-card-compact .gravity-card-footer {
  padding: var(--gravity-space-3);
}

/* Large card */
.gravity-card-large .gravity-card-header,
.gravity-card-large .gravity-card-body,
.gravity-card-large .gravity-card-footer {
  padding: var(--gravity-space-8);
}

/* ================================
 * CARD IMAGE
 * ================================ */

.gravity-card-image {
  width: 100%;
  height: auto;
  display: block;
}

.gravity-card-image-top {
  border-top-left-radius: var(--gravity-card-border-radius);
  border-top-right-radius: var(--gravity-card-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.gravity-card-image-bottom {
  border-bottom-left-radius: var(--gravity-card-border-radius);
  border-bottom-right-radius: var(--gravity-card-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Card with fixed image height */
.gravity-card-image-fixed {
  height: 200px;
  object-fit: cover;
}

.gravity-card-image-overlay {
  position: relative;
}

.gravity-card-image-overlay .gravity-card-image-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: var(--gravity-space-4);
}

/* ================================
 * CARD ACTIONS
 * ================================ */

.gravity-card-actions {
  padding: var(--gravity-space-4);
  display: flex;
  gap: var(--gravity-space-2);
  align-items: center;
  justify-content: flex-start;
  border-top: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
}

.gravity-card-actions-center {
  justify-content: center;
}

.gravity-card-actions-end {
  justify-content: flex-end;
}

.gravity-card-actions-between {
  justify-content: space-between;
}

/* ================================
 * CARD GROUPS
 * ================================ */

.gravity-card-group {
  display: flex;
  flex-direction: column;
}

.gravity-card-group .gravity-card {
  margin-bottom: -1px;
  border-radius: 0;
}

.gravity-card-group .gravity-card:first-child {
  border-top-left-radius: var(--gravity-card-border-radius);
  border-top-right-radius: var(--gravity-card-border-radius);
}

.gravity-card-group .gravity-card:last-child {
  border-bottom-left-radius: var(--gravity-card-border-radius);
  border-bottom-right-radius: var(--gravity-card-border-radius);
  margin-bottom: 0;
}

.gravity-card-group .gravity-card:only-child {
  border-radius: var(--gravity-card-border-radius);
}

/* Horizontal card group */
.gravity-card-group-horizontal {
  flex-direction: row;
}

.gravity-card-group-horizontal .gravity-card {
  margin-right: -1px;
  margin-bottom: 0;
}

.gravity-card-group-horizontal .gravity-card:first-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--gravity-card-border-radius);
}

.gravity-card-group-horizontal .gravity-card:last-child {
  border-top-left-radius: 0;
  border-bottom-right-radius: var(--gravity-card-border-radius);
  margin-right: 0;
}

/* ================================
 * CARD GRID
 * ================================ */

.gravity-card-grid {
  display: grid;
  gap: var(--gravity-space-4);
  grid-template-columns: 1fr;
}

.gravity-card-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gravity-card-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gravity-card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ================================
 * RESPONSIVE ADJUSTMENTS
 * ================================ */

@media (max-width: 590px) {
  .gravity-card-grid-2,
  .gravity-card-grid-3,
  .gravity-card-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .gravity-card-group-horizontal {
    flex-direction: column;
  }
  
  .gravity-card-group-horizontal .gravity-card {
    margin-right: 0;
    margin-bottom: -1px;
  }
  
  .gravity-card-group-horizontal .gravity-card:first-child {
    border-top-right-radius: var(--gravity-card-border-radius);
    border-bottom-left-radius: 0;
  }
  
  .gravity-card-group-horizontal .gravity-card:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: var(--gravity-card-border-radius);
    border-bottom-right-radius: var(--gravity-card-border-radius);
    margin-bottom: 0;
  }
  
  .gravity-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .gravity-card-actions .gravity-btn {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 591px) and (max-width: 1078px) {
  .gravity-card-grid-3,
  .gravity-card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1079px) {
  .gravity-card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ================================
 * DARK MODE ADJUSTMENTS
 * ================================ */

[data-theme="dark"] .gravity-card {
  background-color: var(--gravity-bg-primary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .gravity-card-header,
[data-theme="dark"] .gravity-card-footer {
  background-color: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .gravity-card-actions {
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .gravity-card-flat:hover {
  background-color: var(--gravity-bg-secondary);
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

@media (prefers-contrast: high) {
  .gravity-card {
    border-width: 2px;
  }
  
  .gravity-card-interactive:focus {
    outline-width: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gravity-card,
  .gravity-card-interactive {
    transition: none;
  }
  
  .gravity-card:hover,
  .gravity-card-interactive:hover {
    transform: none;
  }
}

/* ================================
 * ADMIN DASHBOARD SPECIFIC STYLES
 * ================================ */

/* Page Container */
.gravity-page-container {
  padding: var(--gravity-space-6);
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--gravity-bg-light);
}

.gravity-section-spacing {
  margin-top: var(--gravity-space-8);
}

/* Hero Card */
.gravity-hero-card {
  background: linear-gradient(135deg, var(--gravity-color-red-600) 0%, var(--gravity-color-red-700) 100%);
  border-radius: var(--gravity-border-radius-lg);
  padding: var(--gravity-space-4);
  box-shadow: var(--gravity-shadow-lg);
  border: none;
}

.gravity-hero-card h1 {
  font-size: var(--gravity-font-size-3xl);
  font-weight: var(--gravity-font-weight-bold);
  margin: 0 0 var(--gravity-space-3) 0;
  color: var(--gravity-color-white);
}

.gravity-hero-card p {
  font-size: var(--gravity-font-size-lg);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Card Headers */
.gravity-card-header-content {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-3);
  padding: var(--gravity-space-2) 0;
}

/* Icon Containers */
.gravity-icon-container {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gravity-border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gravity-font-size-lg);
}

.gravity-icon-container-lg {
  width: 3rem;
  height: 3rem;
  border-radius: var(--gravity-border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gravity-font-size-xl);
}

/* Tool List */
.gravity-tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-4);
}

.gravity-tool-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gravity-space-3);
  padding: var(--gravity-space-4);
  background-color: var(--gravity-bg-secondary);
  border-radius: var(--gravity-border-radius-md);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-light);
  transition: all var(--gravity-transition-fast);
}

.gravity-tool-item:hover {
  background-color: var(--gravity-bg-hover);
  box-shadow: var(--gravity-shadow-sm);
}

.gravity-tool-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gravity-font-size-base);
  flex-shrink: 0;
}

.gravity-tool-content {
  flex: 1;
}

.gravity-tool-title {
  font-weight: var(--gravity-font-weight-semibold);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  margin-bottom: var(--gravity-space-1);
}

.gravity-tool-description {
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-text-secondary);
  line-height: var(--gravity-line-height-relaxed);
}

/* Metrics Grid */
.gravity-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gravity-space-4);
}

/* Management Grid */
.gravity-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gravity-space-6);
}

/* Card Content */
.gravity-card-description {
  padding: var(--gravity-space-2) 0;
}

.gravity-card-description p {
  color: var(--gravity-text-secondary);
  line-height: var(--gravity-line-height-relaxed);
  margin: 0;
}

/* Card Footers */
.gravity-card-footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--gravity-space-2) 0;
}

.gravity-card-footer-actions {
  padding: var(--gravity-space-2) 0;
}

.gravity-button-full {
  width: 100%;
  justify-content: center;
}

/* ================================
 * RESPONSIVE DESIGN FOR ADMIN DASHBOARD
 * ================================ */

@media (max-width: 768px) {
  .gravity-page-container {
    padding: var(--gravity-space-4);
  }

  .gravity-hero-card {
    padding: var(--gravity-space-3);
  }

  .gravity-hero-card h1 {
    font-size: var(--gravity-font-size-2xl);
  }

  .gravity-hero-card p {
    font-size: var(--gravity-font-size-base);
  }

  .gravity-management-grid {
    grid-template-columns: 1fr;
  }

  .gravity-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gravity-space-3);
  }
}

@media (max-width: 480px) {
  .gravity-section-spacing {
    margin-top: var(--gravity-space-6);
  }

  .gravity-hero-card {
    padding: var(--gravity-space-3);
  }

  .gravity-hero-card .flex {
    flex-direction: column;
    text-align: center;
    gap: var(--gravity-space-4);
  }

  .gravity-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  .gravity-card {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .gravity-card-header,
  .gravity-card-footer {
    background: #f5f5f5 !important;
    border-color: black !important;
  }
}

/* ================================
 * CARD ROW COMPONENT
 * ================================ */

.gravity-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gravity-space-3);
  width: 100%;
}

.gravity-card-row--header {
  padding-bottom: var(--gravity-space-2);
}

.gravity-card-row--footer {
  padding-top: var(--gravity-space-2);
}

.gravity-card-row--center {
  justify-content: center;
}

.gravity-card-row--start {
  justify-content: flex-start;
}

.gravity-card-row--end {
  justify-content: flex-end;
}

.gravity-card-row__content {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-1);
  flex: 1;
  min-width: 0;
}

.gravity-card-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gravity-space-1);
  text-align: right;
  flex-shrink: 0;
}

.gravity-card-row__actions {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-2);
  flex-shrink: 0;
}

/* ================================
 * CARD TITLE SIZES
 * ================================ */

.gravity-card-title--sm {
  font-size: var(--gravity-font-size-sm);
}

.gravity-card-title--lg {
  font-size: var(--gravity-font-size-xl);
}

/* ================================
 * CARD DESCRIPTION VARIANTS
 * ================================ */

.gravity-card-description--subtitle {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-muted);
  margin: 0;
}

/* ================================
 * CARD DETAILS (DEFINITION LIST)
 * ================================ */

.gravity-card-details {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-2);
  margin: var(--gravity-space-3) 0 0 0;
}

.gravity-card-details--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gravity-space-4);
}

.gravity-card-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gravity-space-2);
}

.gravity-card-details--inline .gravity-card-detail-item {
  flex-direction: column;
  gap: var(--gravity-space-1);
}

.gravity-card-detail-item__label {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-muted);
  font-weight: var(--gravity-font-weight-regular);
}

.gravity-card-detail-item__value {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  margin: 0;
}

.gravity-card-detail-item__value--strong {
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

.gravity-card-detail-item__value--muted {
  color: var(--gravity-text-muted);
}

.gravity-card-detail-item__value--emphasis {
  color: var(--gravity-brand-primary);
  font-weight: var(--gravity-font-weight-semibold);
}

/* ========================================
 * components/chips.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Chips Component Styles
 *
 * Chip/tag components for displaying compact information
 */

/* ================================
 * BASE CHIP STYLES
 * ================================ */

.gravity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-1);
  padding: var(--gravity-space-1) var(--gravity-space-3);
  border-radius: 9999px;
  font-size: var(--gravity-font-size-sm);
  font-weight: var(--gravity-font-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  transition: all var(--gravity-transition-fast);
}

/* ================================
 * CHIP VARIANTS
 * Using Pearson feedback tokens for proper contrast
 * ================================ */

.gravity-chip-default {
  background-color: var(--color--non-interactive-background-secondary, #e6f0f7);
  color: var(--color--text-primary, #171717);
}

.gravity-chip-primary {
  background-color: var(--color--accent-09-background, #e9fafd);
  color: var(--color--accent-09-text, #047a9c);
}

.gravity-chip-success {
  /* Pearson positive/success feedback - green */
  background-color: var(--color--feedback-positive-default, #ebf9f0);
  color: var(--color--feedback-positive-text, #006632);
}

.gravity-chip-warning {
  /* Pearson warning feedback - orange (not yellow, for contrast) */
  background-color: var(--color--feedback-warning-default, #ffebd6);
  color: var(--color--feedback-warning-text, #a15100);
}

.gravity-chip-error {
  /* Pearson negative/error feedback - red */
  background-color: var(--color--feedback-negative-default, #ffe7e5);
  color: var(--color--feedback-negative-text, #b20900);
}

.gravity-chip-info {
  /* Pearson info feedback - blue */
  background-color: var(--color--feedback-info-default, #ebf5ff);
  color: var(--color--feedback-info-text, #045caf);
}

.gravity-chip-outlined {
  background-color: transparent;
  color: var(--color--text-secondary, #464646);
  border: 1px solid var(--color--non-interactive-border-regular, #001a3f59);
}

/* ================================
 * CHIP SIZES
 * ================================ */

.gravity-chip-sm {
  padding: 1px var(--gravity-space-2);
  font-size: var(--gravity-font-size-xs);
}

.gravity-chip-lg {
  padding: var(--gravity-space-2) var(--gravity-space-4);
  font-size: var(--gravity-font-size-base);
}

/* ================================
 * CHIP WITH DELETE BUTTON
 * ================================ */

.gravity-chip-deletable {
  padding-right: var(--gravity-space-1);
}

.gravity-chip-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--gravity-space-1);
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--gravity-transition-fast);
}

.gravity-chip-delete:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* ================================
 * CHIP ICON
 * ================================ */

.gravity-chip-icon {
  display: flex;
  align-items: center;
  font-size: 14px;
}

/* ========================================
 * components/color-indicator.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Color Indicator Component Styles
 *
 * Status dots, color swatches, and indicator elements
 */

/* ================================
 * BASE COLOR INDICATOR STYLES
 * ================================ */

.gravity-color-indicator {
  display: inline-block;
  flex-shrink: 0;
}

/* ================================
 * SPACER COMPONENT
 * ================================ */

.gravity-spacer {
  /* Base spacer - no default styling, relies on inline styles or flex classes */
  display: block;
}

/* ========================================
 * components/content-creator/answer-builder.css
 * ======================================== */

/* =============================================================================
   ANSWER BUILDER COMPONENT STYLES
   Content Creator answer/option builder patterns
   Using Gravity UI design tokens
   ============================================================================= */

/* ===========================================
   SHARED BUILDER PATTERNS
   Common patterns used across all builder types
   =========================================== */

/* Builder Header - flex layout with actions */
.gravity-builder-header {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-2);
    flex-wrap: wrap;
}

.gravity-builder-actions {
    margin-left: auto;
}

/* Help Text Section */
.gravity-builder-help {
    margin-bottom: var(--gravity-space-4);
}

/* Answer/Option List Container */
.gravity-builder-list {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-builder-list-compact {
    gap: var(--gravity-space-3);
}

/* ===========================================
   ANSWER ITEM COMPONENT
   Individual answer/option card
   =========================================== */

.gravity-answer-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gravity-space-4);
    padding: var(--gravity-space-4);
    border: 1px solid var(--gravity-border-default);
    border-radius: var(--gravity-radius-md);
    background: var(--gravity-bg-subtle);
    transition: all 0.2s ease;
}

.gravity-answer-item-compact {
    padding: var(--gravity-space-3);
    gap: var(--gravity-space-3);
}

/* Correct Answer State */
.gravity-answer-item-correct {
    border-color: var(--gravity-success-default);
    background: var(--gravity-success-subtle);
}

/* ===========================================
   ANSWER NUMBER/BADGE
   Circular badge showing position or letter
   =========================================== */

.gravity-answer-badge {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gravity-primary-subtle);
    color: var(--gravity-primary-default);
    border-radius: 50%;
    font-weight: 600;
    flex-shrink: 0;
}

.gravity-answer-badge-primary {
    background: var(--gravity-primary-default);
    color: var(--gravity-text-on-primary);
}

.gravity-answer-badge-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Answer Label Row */
.gravity-answer-label {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-2);
    margin-bottom: var(--gravity-space-2);
}

.gravity-answer-letter {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--gravity-text-secondary);
}

/* ===========================================
   ANSWER CONTROLS
   Action buttons, selectors, arrows
   =========================================== */

.gravity-answer-selector {
    padding-top: var(--gravity-space-2);
}

.gravity-answer-actions {
    flex-shrink: 0;
    padding-top: var(--gravity-space-2);
}

/* ===========================================
   ORDER RESPONSE SPECIFIC
   Reorder arrows and controls
   =========================================== */

.gravity-order-arrows {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-1);
    flex-shrink: 0;
}

/* ===========================================
   BUILDER SUMMARY
   Summary section at bottom of builders
   =========================================== */

.gravity-builder-summary {
    margin-top: var(--gravity-space-4);
    padding-top: var(--gravity-space-4);
    border-top: 1px solid var(--gravity-border-default);
}

/* ===========================================
   LEGACY CLASS MAPPINGS
   For backward compatibility with existing markup
   =========================================== */

/* Fill-in-the-Blank Builder */
.fill-blank-builder .builder-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fill-blank-builder .builder-actions { margin-left: auto; }
.fill-blank-builder .fill-blank-help { margin-bottom: 1rem; }
.fill-blank-builder .answer-list { display: flex; flex-direction: column; gap: 0.75rem; }
.fill-blank-builder .answer-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1px solid var(--gravity-border-default); border-radius: var(--gravity-radius-md); background: var(--gravity-bg-subtle); }
.fill-blank-builder .answer-number { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--gravity-primary-subtle); color: var(--gravity-primary-default); border-radius: 50%; font-weight: 600; flex-shrink: 0; }
.fill-blank-builder .answer-content { flex: 1; }
.fill-blank-builder .answer-actions { flex-shrink: 0; }

/* Single Answer Builder */
.single-answer-builder .builder-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.single-answer-builder .builder-actions { margin-left: auto; }
.single-answer-builder .answer-list { display: flex; flex-direction: column; gap: 1rem; }
.single-answer-builder .answer-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--gravity-border-default); border-radius: var(--gravity-radius-md); background: var(--gravity-bg-subtle); transition: all 0.2s ease; }
.single-answer-builder .answer-item.answer-correct { border-color: var(--gravity-success-default); background: var(--gravity-success-subtle); }
.single-answer-builder .answer-selector { padding-top: 0.5rem; }
.single-answer-builder .answer-content { flex: 1; }
.single-answer-builder .answer-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.single-answer-builder .answer-letter { font-weight: 600; font-size: 1.1rem; color: var(--gravity-text-secondary); }
.single-answer-builder .answer-actions { padding-top: 0.5rem; }

/* Multiple Answer Builder */
.multiple-answer-builder .builder-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.multiple-answer-builder .builder-actions { margin-left: auto; }
.multiple-answer-builder .answer-list { display: flex; flex-direction: column; gap: 1rem; }
.multiple-answer-builder .answer-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid var(--gravity-border-default); border-radius: var(--gravity-radius-md); background: var(--gravity-bg-subtle); transition: all 0.2s ease; }
.multiple-answer-builder .answer-item.answer-correct { border-color: var(--gravity-success-default); background: var(--gravity-success-subtle); }
.multiple-answer-builder .answer-selector { padding-top: 0.5rem; }
.multiple-answer-builder .answer-content { flex: 1; }
.multiple-answer-builder .answer-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.multiple-answer-builder .answer-letter { font-weight: 600; font-size: 1.1rem; color: var(--gravity-text-secondary); }
.multiple-answer-builder .answer-actions { padding-top: 0.5rem; }
.multiple-answer-builder .answer-summary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gravity-border-default); }

/* Order Response Builder */
.order-response-builder .builder-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.order-response-builder .builder-actions { margin-left: auto; }
.order-response-builder .order-help { margin-bottom: 1rem; }
.order-response-builder .order-list { display: flex; flex-direction: column; gap: 0.75rem; }
.order-response-builder .order-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border: 1px solid var(--gravity-border-default); border-radius: var(--gravity-radius-md); background: var(--gravity-bg-subtle); }
.order-response-builder .order-number { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--gravity-primary-default); color: var(--gravity-text-on-primary); border-radius: 50%; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.order-response-builder .order-arrows { display: flex; flex-direction: column; gap: 0.25rem; flex-shrink: 0; }
.order-response-builder .order-content { flex: 1; }
.order-response-builder .order-actions { flex-shrink: 0; padding-top: 0.5rem; }

/* ========================================
 * components/date-picker.css
 * ======================================== */

/*
 * Gravity UI Date Picker Component
 *
 * Date picker input with calendar dropdown functionality
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * DATE PICKER STYLES
 * ================================ */

.gravity-datepicker-wrapper {
  position: relative;
}

.gravity-datepicker-input {
  width: 100%;
  padding-right: 2.5rem;
}

.gravity-datepicker-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s ease;
}

.gravity-datepicker-toggle:hover {
  color: #374151;
}

.gravity-datepicker-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  min-width: 280px;
}

.gravity-calendar {
  width: 100%;
}

.gravity-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.gravity-calendar-nav {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  border-radius: 0.25rem;
}

.gravity-calendar-nav:hover {
  background: #f3f4f6;
}

.gravity-calendar-title {
  display: flex;
  gap: 0.5rem;
  font-weight: 600;
}

.gravity-calendar-month-select,
.gravity-calendar-year-select {
  padding: 0.25rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
}

.gravity-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.gravity-calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  padding: 0.25rem;
}

.gravity-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.gravity-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.gravity-calendar-day:hover:not(:disabled) {
  background: #f3f4f6;
}

.gravity-calendar-day-other-month {
  color: #d1d5db;
}

.gravity-calendar-day-today {
  font-weight: 600;
  border-color: #3b82f6;
}

.gravity-calendar-day-selected {
  background: #3b82f6;
  color: white;
}

.gravity-calendar-day-selected:hover {
  background: #2563eb;
}

.gravity-calendar-day-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gravity-calendar-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.gravity-calendar-today-button {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gravity-calendar-today-button:hover {
  background: #2563eb;
}

/* Dark mode support for date picker */
@media (prefers-color-scheme: dark) {
  .gravity-datepicker-dropdown,
  .gravity-calendar {
    background: #1f2937;
    border-color: #4b5563;
  }

  .gravity-calendar-nav,
  .gravity-calendar-day {
    color: #f3f4f6;
  }
}

/* ========================================
 * components/difficulty-indicator.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Difficulty Indicator Component Styles
 *
 * Semantic color-coded difficulty indicators for educational content.
 * Uses HSL-based color mapping with intensity modifiers.
 */

/* ================================
 * BASE COMPONENT
 * ================================ */

.gravity-difficulty-indicator {
  display: inline-block;
  padding: var(--gravity-space-xs) var(--gravity-space-sm);
  border-radius: var(--gravity-radius-sm);
  font-weight: var(--gravity-font-weight-medium);
  text-align: center;
  min-width: 2rem;
}

/* ================================
 * INTENSITY LEVELS
 * Affects opacity/saturation of the colors
 * ================================ */

.gravity-difficulty-intensity-low {
  --difficulty-opacity: 0.5;
}

.gravity-difficulty-intensity-medium {
  --difficulty-opacity: 0.75;
}

.gravity-difficulty-intensity-high {
  --difficulty-opacity: 1;
}

/* ================================
 * DIFFICULTY LEVELS
 * Maps to semantic colors with intensity
 * ================================ */

/* Very Easy (green tones) */
.gravity-difficulty-very-easy {
  background-color: hsla(120, 70%, 45%, var(--difficulty-opacity, 1));
  color: white;
}

/* Easy (yellow-green tones) */
.gravity-difficulty-easy {
  background-color: hsla(90, 70%, 45%, var(--difficulty-opacity, 1));
  color: white;
}

/* Moderate (yellow tones) */
.gravity-difficulty-moderate {
  background-color: hsla(60, 70%, 45%, var(--difficulty-opacity, 1));
  color: var(--gravity-text-primary);
}

/* Hard (orange tones) */
.gravity-difficulty-hard {
  background-color: hsla(30, 70%, 45%, var(--difficulty-opacity, 1));
  color: white;
}

/* Very Hard (red tones) */
.gravity-difficulty-very-hard {
  background-color: hsla(0, 70%, 45%, var(--difficulty-opacity, 1));
  color: white;
}

/* ========================================
 * components/divider.css
 * ======================================== */

/* ================================
 * DIVIDER COMPONENT
 * Semantic divider/separator with optional centered label
 * ================================ */

/* Base divider styles */
.gravity-divider {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--gravity-text-muted, #6c757d);
}

/* Horizontal orientation (default) */
.gravity-divider-horizontal {
  flex-direction: row;
}

.gravity-divider-horizontal:not(.gravity-divider-with-label) {
  border: none;
  border-top: 1px solid var(--gravity-border-color, #dee2e6);
  height: 0;
}

/* Vertical orientation */
.gravity-divider-vertical {
  flex-direction: column;
  height: 100%;
  width: auto;
  min-height: 1rem;
  border-left: 1px solid var(--gravity-border-color, #dee2e6);
}

/* Variant: Default */
.gravity-divider-default {
  --divider-color: var(--gravity-border-color, #dee2e6);
}

/* Variant: Subtle */
.gravity-divider-subtle {
  --divider-color: var(--gravity-border-subtle, #e9ecef);
}

/* Variant: Strong */
.gravity-divider-strong {
  --divider-color: var(--gravity-border-strong, #adb5bd);
}

/* Variant: Dashed */
.gravity-divider-dashed {
  border-style: dashed;
}

/* Variant: Dotted */
.gravity-divider-dotted {
  border-style: dotted;
}

/* Spacing variants */
.gravity-divider-spacing-none {
  margin-top: 0;
  margin-bottom: 0;
}

.gravity-divider-spacing-sm {
  margin-top: var(--gravity-space-2, 0.5rem);
  margin-bottom: var(--gravity-space-2, 0.5rem);
}

.gravity-divider-spacing-md {
  margin-top: var(--gravity-space-4, 1rem);
  margin-bottom: var(--gravity-space-4, 1rem);
}

.gravity-divider-spacing-lg {
  margin-top: var(--gravity-space-6, 1.5rem);
  margin-bottom: var(--gravity-space-6, 1.5rem);
}

.gravity-divider-spacing-xl {
  margin-top: var(--gravity-space-8, 2rem);
  margin-bottom: var(--gravity-space-8, 2rem);
}

/* Thickness variants */
.gravity-divider-thin {
  border-width: 1px;
}

.gravity-divider-thick {
  border-width: 2px;
}

/* Divider with label (centered text) */
.gravity-divider-with-label {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-3, 0.75rem);
  border: none;
}

.gravity-divider-with-label .gravity-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--divider-color, var(--gravity-border-color, #dee2e6));
}

.gravity-divider-with-label .gravity-divider-label {
  flex-shrink: 0;
  font-size: var(--gravity-text-sm, 0.875rem);
  color: var(--gravity-text-muted, #6c757d);
  text-transform: lowercase;
  font-weight: 400;
}

/* Dark theme support */
[data-theme="dark"] .gravity-divider,
.dark .gravity-divider {
  --divider-color: var(--gravity-border-color-dark, #495057);
  color: var(--gravity-text-muted-dark, #adb5bd);
}

[data-theme="dark"] .gravity-divider-with-label .gravity-divider-line,
.dark .gravity-divider-with-label .gravity-divider-line {
  background-color: var(--gravity-border-color-dark, #495057);
}

[data-theme="dark"] .gravity-divider-with-label .gravity-divider-label,
.dark .gravity-divider-with-label .gravity-divider-label {
  color: var(--gravity-text-muted-dark, #adb5bd);
}

/* ========================================
 * components/document-section.css
 * ======================================== */

/* ============================================
   DocumentSection Component
   ============================================

   Semantic component for structured document content:
   - Legal documents, Terms of Service, Privacy Policies
   - Numbered sections with consistent styling
   - Section dividers between sections
   - Proper document hierarchy (h2 section titles)

   Usage:
   <GravityDocumentSection SectionNumber="1" Title="Introduction">
       <GravityText>Content here...</GravityText>
   </GravityDocumentSection>
   ============================================ */

/* Base Section Container */
.gravity-document-section {
  padding-bottom: var(--spacing-6, 24px);
}

.gravity-document-section--with-divider {
  border-bottom: 1px solid var(--color-border-secondary, #e5e7eb);
  margin-bottom: var(--spacing-6, 24px);
}

/* Section Title */
.gravity-document-section__title {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #111827);
  margin: 0 0 var(--spacing-3, 12px) 0;
  line-height: 1.4;
}

/* Section Number Prefix */
.gravity-document-section__number {
  color: var(--color-primary, #2563eb);
  font-weight: var(--font-weight-bold, 700);
  margin-right: var(--spacing-2, 8px);
}

/* Section Content */
.gravity-document-section__content {
  color: var(--color-text-secondary, #374151);
  line-height: 1.6;
}

/* Indented content when section is numbered */
.gravity-document-section__content--indented {
  margin-left: var(--spacing-6, 24px);
}

/* Content spacing - paragraphs */
.gravity-document-section__content > p,
.gravity-document-section__content > .gravity-text {
  margin-bottom: var(--spacing-3, 12px);
}

.gravity-document-section__content > p:last-child,
.gravity-document-section__content > .gravity-text:last-child {
  margin-bottom: 0;
}

/* Content spacing - lists */
.gravity-document-section__content > ul,
.gravity-document-section__content > ol,
.gravity-document-section__content > .gravity-list {
  margin-top: var(--spacing-2, 8px);
  margin-bottom: var(--spacing-3, 12px);
  padding-left: var(--spacing-6, 24px);
}

.gravity-document-section__content ul,
.gravity-document-section__content ol {
  list-style-position: outside;
}

.gravity-document-section__content ul {
  list-style-type: disc;
}

.gravity-document-section__content ol {
  list-style-type: decimal;
}

.gravity-document-section__content li {
  margin-bottom: var(--spacing-2, 8px);
  padding-left: var(--spacing-1, 4px);
}

.gravity-document-section__content li:last-child {
  margin-bottom: 0;
}

/* Strong/emphasis text in content */
.gravity-document-section__content strong {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #111827);
}

/* ============================================
   Dark Theme Support
   ============================================ */

[data-theme="dark"] .gravity-document-section--with-divider {
  border-bottom-color: var(--color-border-dark, #374151);
}

[data-theme="dark"] .gravity-document-section__title {
  color: var(--color-text-primary-dark, #f9fafb);
}

[data-theme="dark"] .gravity-document-section__number {
  color: var(--color-primary-light, #60a5fa);
}

[data-theme="dark"] .gravity-document-section__content {
  color: var(--color-text-secondary-dark, #d1d5db);
}

[data-theme="dark"] .gravity-document-section__content strong {
  color: var(--color-text-primary-dark, #f9fafb);
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Mobile: Reduce spacing */
@media (max-width: 640px) {
  .gravity-document-section {
    padding-bottom: var(--spacing-4, 16px);
  }

  .gravity-document-section--with-divider {
    margin-bottom: var(--spacing-4, 16px);
  }

  .gravity-document-section__title {
    font-size: var(--font-size-lg, 18px);
  }

  .gravity-document-section__content--indented {
    margin-left: var(--spacing-4, 16px);
  }
}

/* Print: Ensure proper formatting */
@media print {
  .gravity-document-section--with-divider {
    border-bottom-color: #ccc;
  }

  .gravity-document-section__number {
    color: #000;
  }
}

/* ========================================
 * components/dropdown-menu.css
 * ======================================== */

/*
 * Gravity UI 2.0 Dropdown Menu Component
 * 
 * Context menus and dropdown actions with positioning, keyboard navigation
 * Includes dividers, headers, icons, shortcuts, and danger states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * DROPDOWN CONTAINER
 * ================================ */

.gravity-dropdown-menu {
  position: relative;
  display: inline-block;
}

.gravity-dropdown-trigger {
  display: inline-block;
}

.gravity-dropdown-chevron {
  margin-left: 0.5rem;
  transition: transform 0.2s;
}

.gravity-dropdown-chevron-open {
  transform: rotate(180deg);
}

/* ================================
 * DROPDOWN OVERLAY AND POSITIONING
 * ================================ */

.gravity-dropdown-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.gravity-dropdown-menu-content {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.gravity-dropdown-menu-bottom-left {
  top: 100%;
  left: 0;
}

.gravity-dropdown-menu-bottom-right {
  top: 100%;
  right: 0;
}

.gravity-dropdown-menu-top-left {
  bottom: 100%;
  left: 0;
}

.gravity-dropdown-menu-top-right {
  bottom: 100%;
  right: 0;
}

/* ================================
 * DROPDOWN ITEMS
 * ================================ */

.gravity-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.gravity-dropdown-item:hover:not(:disabled) {
  background-color: #f3f4f6;
}

.gravity-dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-dropdown-item-focused {
  background-color: #eff6ff;
}

.gravity-dropdown-item-danger {
  color: #dc2626;
}

.gravity-dropdown-item-danger:hover {
  background-color: #fee2e2;
}

/* ================================
 * ITEM CONTENT ELEMENTS
 * ================================ */

.gravity-dropdown-item-icon {
  margin-right: 0.75rem;
  width: 1rem;
  color: #6b7280;
}

.gravity-dropdown-item-text {
  flex: 1;
}

.gravity-dropdown-item-shortcut {
  margin-left: 2rem;
  font-size: 0.75rem;
  color: #9ca3af;
}

.gravity-dropdown-item-badge {
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  background: #ef4444;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.75rem;
}

/* ================================
 * DIVIDERS AND HEADERS
 * ================================ */

.gravity-dropdown-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0.5rem 0;
}

.gravity-dropdown-header {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}

/* ================================
 * DARK MODE SUPPORT
 * ================================ */

@media (prefers-color-scheme: dark) {
  .gravity-dropdown-menu-content {
    background: #1f2937;
    border-color: #4b5563;
  }
  
  .gravity-dropdown-item {
    color: #f3f4f6;
  }
  
  .gravity-dropdown-item:hover:not(:disabled) {
    background-color: #374151;
  }
  
  .gravity-dropdown-item-focused {
    background-color: #1e3a8a;
  }
  
  .gravity-dropdown-item-danger {
    color: #f87171;
  }
  
  .gravity-dropdown-item-danger:hover {
    background-color: #7f1d1d;
  }
  
  .gravity-dropdown-divider {
    background: #4b5563;
  }
  
  .gravity-dropdown-header {
    color: #9ca3af;
  }
  
  .gravity-dropdown-item-icon {
    color: #9ca3af;
  }
  
  .gravity-dropdown-item-shortcut {
    color: #6b7280;
  }
}

/* ========================================
 * components/file-upload.css
 * ======================================== */

/*
 * Gravity UI 2.0 File Upload Component
 * 
 * File upload system with drag and drop functionality
 * Includes dropzone, file previews, progress indicators, and upload states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * FILE UPLOAD DROPZONE
 * ================================ */

.gravity-file-upload-dropzone {
  border: 2px dashed var(--gravity-border-primary);
  border-radius: var(--gravity-radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
  background-color: var(--gravity-bg-secondary);
}

.gravity-file-upload-dropzone:hover {
  border-color: var(--gravity-brand-primary);
  background-color: var(--gravity-brand-primary-alpha-10);
}

.gravity-file-upload-dropzone-active {
  border-color: var(--gravity-brand-primary);
  background-color: var(--gravity-brand-primary-alpha-10);
}

.gravity-file-upload-icon {
  color: var(--gravity-text-muted);
  margin-bottom: 1rem;
}

.gravity-file-upload-primary {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gravity-text-primary);
  margin-bottom: 0.25rem;
}

.gravity-file-upload-secondary {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
}

/* ================================
 * FILE LIST AND ITEMS
 * ================================ */

.gravity-file-upload-list {
  margin-top: 1rem;
  space-y: 0.5rem;
}

.gravity-file-upload-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  margin-bottom: 0.5rem;
}

.gravity-file-upload-item-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gravity-text-secondary);
}

.gravity-file-upload-preview {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
}

.gravity-file-upload-item-info {
  flex: 1;
  margin-left: 0.75rem;
  min-width: 0;
}

.gravity-file-upload-item-name {
  font-weight: 500;
  color: var(--gravity-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-file-upload-item-meta {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
  display: flex;
  gap: 1rem;
}

/* ================================
 * PROGRESS INDICATORS
 * ================================ */

.gravity-file-upload-progress {
  margin-top: 0.5rem;
  height: 0.25rem;
  background: var(--gravity-bg-muted);
  border-radius: 0.125rem;
  overflow: hidden;
}

.gravity-file-upload-progress-bar {
  height: 100%;
  background: var(--gravity-brand-primary);
  transition: width var(--gravity-transition-normal);
}

/* ================================
 * ACTIONS AND CONTROLS
 * ================================ */

.gravity-file-upload-item-remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--gravity-text-secondary);
  cursor: pointer;
  border-radius: var(--gravity-radius-sm);
}

.gravity-file-upload-item-remove:hover {
  color: var(--gravity-state-error);
  background: var(--gravity-state-error-light);
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-file-upload-dropzone {
    background-color: var(--gravity-bg-secondary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-file-upload-dropzone:hover {
    background-color: var(--gravity-brand-primary-alpha-20);
    border-color: var(--gravity-brand-primary);
  }

  :root:not([data-theme]) .gravity-file-upload-item {
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-file-upload-item-name {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-file-upload-primary {
    color: var(--gravity-text-primary);
  }
}

/* ========================================
 * components/form-modal.css
 * ======================================== */

/**
 * FormModal Component Styles
 *
 * Specialized modal for form dialogs with integrated validation,
 * loading states, and consistent form field layout.
 *
 * Features:
 * - EditForm integration with validation
 * - Validation summary display
 * - Form field spacing and alignment
 * - Disabled state during submission
 * - Responsive sizing
 */

/* ==========================================================================
   Form Modal Container
   ========================================================================== */

.form-modal {
    /* Inherits gravity-modal base styles */
}

/* Form-specific body styling */
.form-modal .gravity-modal-body {
    padding: 0; /* Reset padding - form sections handle their own */
}

/* ==========================================================================
   Validation Summary
   ========================================================================== */

.form-modal-validation-summary {
    padding: var(--gravity-spacing-4);
    padding-bottom: 0;
}

.form-modal-validation-summary .gravity-alert {
    margin-bottom: var(--gravity-spacing-4);
}

.form-modal-validation-summary .validation-errors {
    list-style: none;
    padding: 0;
    margin: var(--gravity-spacing-2) 0 0 0;
}

.form-modal-validation-summary .validation-errors li {
    padding: var(--gravity-spacing-1) 0;
    color: var(--gravity-color-danger-dark);
}

/* ==========================================================================
   Form Fields Container
   ========================================================================== */

.form-modal-fields {
    padding: var(--gravity-spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--gravity-spacing-4);
}

/* Disabled state during submission */
.form-modal-fields[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
}

/* Form layout items spacing */
.form-modal-fields > .gravity-form-layout-item,
.form-modal-fields > .form-group {
    margin-bottom: 0; /* Gap handles spacing */
}

/* ==========================================================================
   Footer Buttons
   ========================================================================== */

.form-modal .gravity-modal-footer {
    border-top: 1px solid var(--gravity-color-border-light);
    padding: var(--gravity-spacing-4);
    background-color: var(--gravity-color-background-subtle);
}

.form-modal .gravity-modal-footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--gravity-spacing-3);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Backdrop loading state - prevent interaction */
.form-modal.gravity-modal-loading ~ .gravity-modal-backdrop-loading {
    cursor: wait;
}

/* Disable close button during submission */
.form-modal.gravity-modal-loading .gravity-modal-close {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/* Small form modals (simple forms, 1-3 fields) */
.form-modal.gravity-modal-sm {
    max-width: 400px;
}

.form-modal.gravity-modal-sm .form-modal-fields {
    padding: var(--gravity-spacing-3);
    gap: var(--gravity-spacing-3);
}

/* Medium form modals (standard forms, 4-8 fields) */
.form-modal.gravity-modal-md {
    max-width: 500px;
}

/* Large form modals (complex forms, 9-15 fields) */
.form-modal.gravity-modal-lg {
    max-width: 700px;
}

.form-modal.gravity-modal-lg .form-modal-fields {
    padding: var(--gravity-spacing-5);
    gap: var(--gravity-spacing-4);
}

/* Extra large form modals (very complex forms, 15+ fields or multi-column layouts) */
.form-modal.gravity-modal-xl {
    max-width: 900px;
}

.form-modal.gravity-modal-xl .form-modal-fields {
    padding: var(--gravity-spacing-6);
    gap: var(--gravity-spacing-5);
}

/* Support multi-column layouts in XL modals */
.form-modal.gravity-modal-xl .form-modal-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gravity-spacing-4);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Mobile adjustments */
@media (max-width: 640px) {
    .form-modal.gravity-modal-lg,
    .form-modal.gravity-modal-xl {
        max-width: 95vw; /* Nearly full width on mobile */
        margin: var(--gravity-spacing-2);
    }

    /* Reduce padding on mobile */
    .form-modal-fields {
        padding: var(--gravity-spacing-3);
        gap: var(--gravity-spacing-3);
    }

    .form-modal .gravity-modal-footer {
        padding: var(--gravity-spacing-3);
    }

    /* Stack footer buttons on very small screens */
    .form-modal .gravity-modal-footer-buttons {
        flex-direction: column-reverse; /* Cancel on top, Submit on bottom */
    }

    .form-modal .gravity-modal-footer-buttons > button,
    .form-modal .gravity-modal-footer-buttons > .gravity-button {
        width: 100%;
    }

    /* Single column for XL grids on mobile */
    .form-modal.gravity-modal-xl .form-modal-fields-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .form-modal.gravity-modal-xl {
        max-width: 90vw;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible states for keyboard navigation */
.form-modal-fields:focus-within {
    /* Form is active, no special styling needed - fields handle their own focus */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-modal .gravity-modal-footer {
        border-top-width: 2px;
    }

    .form-modal-validation-summary .gravity-alert {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .form-modal-fields[aria-disabled="true"] {
        transition: none;
    }
}

/* ==========================================================================
   Dark Mode Support (Future)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .form-modal .gravity-modal-footer {
        background-color: var(--gravity-color-background-dark-subtle, #1a1a1a);
        border-top-color: var(--gravity-color-border-dark, #404040);
    }

    .form-modal-validation-summary .validation-errors li {
        color: var(--gravity-color-danger-light, #ff6b6b);
    }
}

/* ========================================
 * components/forms.css
 * ======================================== */

/*
 * Gravity UI 2.0 Form System
 *
 * Complete form implementation with input fields, labels, validation states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * BASE FORM STYLES
 * ================================ */

.gravity-form {
  width: 100%;
}

.gravity-form-group {
  margin-bottom: var(--gravity-space-1);
}

.gravity-form-group:last-child {
  margin-bottom: 0;
}

/* ================================
 * LABEL STYLES - Figma Specs
 * ================================ */

.gravity-label {
  display: block;
  margin-bottom: var(--gravity-form-label-margin-bottom, 4px);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-form-label-font-size, 12px);
  font-weight: var(--gravity-form-label-font-weight, 400);
  color: var(--gravity-form-label-color, #6A7070);
  line-height: var(--gravity-form-label-line-height, 16px);
}

.gravity-label-inline {
  display: inline-block;
  margin-right: var(--gravity-space-2);
  margin-bottom: 0;
}

.gravity-label-required::after {
  content: " *";
  color: var(--gravity-state-error);
}

/* ================================
 * INPUT BASE STYLES - Figma Specs
 * ================================ */

.gravity-input {
  display: block;
  width: 100%;
  height: var(--gravity-form-element-height, 36px);
  padding: var(--gravity-form-element-padding-y, 9px) var(--gravity-form-element-padding-x, 12px);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-input-font-size, 14px);
  line-height: var(--gravity-input-line-height, 18px);
  color: var(--gravity-text-primary, #252525);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  border: var(--gravity-border-width-thin, 1px) solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}

.gravity-input::placeholder {
  color: var(--gravity-text-muted);
  opacity: 1;
}

.gravity-input:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-focus) 20%, transparent);
}

.gravity-input:hover:not(:focus):not(:disabled) {
  border-color: var(--gravity-border-focus);
}

/* ================================
 * INPUT VARIANTS
 * ================================ */

/* Small input */
.gravity-input-sm {
  height: calc(var(--gravity-form-element-height) * 0.875);
  padding: calc(var(--gravity-form-element-padding-y) * 0.75) calc(var(--gravity-form-element-padding-x) * 0.875);
  font-size: var(--gravity-font-size-small);
}

/* Large input */
.gravity-input-lg {
  height: calc(var(--gravity-form-element-height) * 1.25);
  padding: calc(var(--gravity-form-element-padding-y) * 1.25) calc(var(--gravity-form-element-padding-x) * 1.125);
  font-size: var(--gravity-font-size-body-large);
}

/* ================================
 * INPUT STATES
 * ================================ */

/* Success state */
.gravity-input-success {
  border-color: var(--gravity-border-success);
}

.gravity-input-success:focus {
  border-color: var(--gravity-border-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-success) 20%, transparent);
}

/* Error state - Figma Specs */
.gravity-input-error {
  border-color: var(--gravity-input-error-border, #D0021B);
}

.gravity-input-error:focus {
  border-color: var(--gravity-input-error-border, #D0021B);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-input-error-border, #D0021B) 20%, transparent);
}

/* Disabled state - Figma Specs */
.gravity-input:disabled {
  background-color: var(--gravity-input-disabled-bg, #E9E9E9);
  color: var(--gravity-input-disabled-text, #C7C7C7);
  border-color: var(--gravity-input-disabled-border, #C7C7C7);
  cursor: not-allowed;
}

/* ================================
 * TEXTAREA - Figma Specs
 * ================================ */

.gravity-textarea {
  display: block;
  width: 100%;
  min-height: var(--gravity-textarea-min-height, 84px);
  padding: 8px var(--gravity-form-element-padding-x, 12px);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-input-font-size, 14px);
  line-height: var(--gravity-input-line-height, 18px);
  color: var(--gravity-text-primary, #252525);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  border: var(--gravity-border-width-thin, 1px) solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}

.gravity-textarea::placeholder {
  color: var(--gravity-text-muted);
  opacity: 1;
}

.gravity-textarea:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-focus) 20%, transparent);
}

.gravity-textarea:disabled {
  background-color: var(--gravity-input-disabled-bg, #E9E9E9);
  color: var(--gravity-input-disabled-text, #C7C7C7);
  border-color: var(--gravity-input-disabled-border, #C7C7C7);
  cursor: not-allowed;
  resize: none;
}

/* ================================
 * SELECT DROPDOWN - Figma Specs
 * ================================ */

select.gravity-select {
  display: block;
  width: 100%;
  height: var(--gravity-form-element-height, 36px);
  /* Use 8px vertical padding to fit 18px line-height in 36px height with border-box */
  /* Math: 36px - 2px border - 16px padding = 18px content area = line-height */
  padding: 8px var(--gravity-form-element-padding-x, 12px);
  padding-right: 34px;
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-input-font-size, 14px);
  font-weight: 400;
  line-height: var(--gravity-input-line-height, 18px);
  color: var(--gravity-text-primary, #252525);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  border: var(--gravity-border-width-thin, 1px) solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
  box-sizing: border-box;
  /* Custom dropdown arrow - Figma Specs */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236A7070' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 8px 5px;
}

/* Higher specificity override to ensure text visibility */
.theme-toggle select.gravity-select {
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-primary);
  font-weight: 600;
}

/* Ensure select text visibility across browsers */
.gravity-select option {
  color: var(--gravity-text-primary);
  background-color: var(--gravity-bg-primary);
}

.gravity-select:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-focus) 20%, transparent);
}

.gravity-select:disabled {
  background-color: var(--gravity-input-disabled-bg, #E9E9E9);
  color: var(--gravity-input-disabled-text, #C7C7C7);
  border-color: var(--gravity-input-disabled-border, #C7C7C7);
  cursor: not-allowed;
  /* Disabled arrow color - Figma Specs */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23C7C7C7' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
}

/* ================================
 * CHECKBOX AND RADIO
 * ================================ */

.gravity-checkbox,
.gravity-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.gravity-checkbox input[type="checkbox"],
.gravity-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gravity-checkbox-indicator,
.gravity-radio-indicator {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid var(--gravity-input-border-color, #6A7070);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  transition: all var(--gravity-transition-fast);
  flex-shrink: 0;
}

.gravity-checkbox-indicator {
  border-radius: 4px;
}

.gravity-radio-indicator {
  border-radius: 50%;
}

.gravity-checkbox input[type="checkbox"]:checked + .gravity-checkbox-indicator {
  background-color: var(--gravity-brand-primary, #047A9C);
  border-color: var(--gravity-brand-primary, #047A9C);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
  background-size: 12px 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.gravity-radio input[type="radio"]:checked + .gravity-radio-indicator {
  background-color: var(--gravity-brand-primary);
  border-color: var(--gravity-brand-primary);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 8px 8px;
  background-position: center;
  background-repeat: no-repeat;
}

.gravity-checkbox input[type="checkbox"]:focus + .gravity-checkbox-indicator,
.gravity-radio input[type="radio"]:focus + .gravity-radio-indicator {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

.gravity-checkbox input[type="checkbox"]:disabled + .gravity-checkbox-indicator,
.gravity-radio input[type="radio"]:disabled + .gravity-radio-indicator {
  background-color: var(--gravity-input-disabled-bg, #E9E9E9);
  border-color: var(--gravity-input-disabled-border, #C7C7C7);
  cursor: not-allowed;
}

/* Disabled + Checked state - Figma Specs: gray checkmark */
.gravity-checkbox input[type="checkbox"]:disabled:checked + .gravity-checkbox-indicator {
  background-color: var(--gravity-input-disabled-bg, #E9E9E9);
  border-color: var(--gravity-input-disabled-border, #C7C7C7);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23C7C7C7' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e");
}

.gravity-checkbox-label,
.gravity-radio-label {
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body);
  color: var(--gravity-text-primary);
  line-height: var(--gravity-line-height-normal);
  cursor: pointer;
}

/* Checkbox component specific styles - Figma Specs */
.gravity-checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gravity-input-border-color, #6A7070);
  border-radius: 4px;
  background: var(--gravity-bg-primary, #FFFFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.gravity-checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* Option text - Figma Specs: 14px/18px */
.gravity-checkbox-text {
  font-size: 14px;
  line-height: 18px;
  color: var(--gravity-text-primary, #252525);
  font-weight: 400;
}

/* Disabled text - Figma Specs: gray color */
.gravity-checkbox-disabled .gravity-checkbox-text {
  color: var(--gravity-input-disabled-text, #6A7070);
}

/* ================================
 * FORM VALIDATION MESSAGES - Figma Specs
 * ================================ */

.gravity-form-feedback {
  display: block;
  margin-top: var(--gravity-space-1, 4px);
  font-size: var(--gravity-form-helper-font-size, 12px);
  line-height: var(--gravity-form-helper-line-height, 16px);
}

.gravity-form-feedback-success {
  color: var(--gravity-state-success);
}

.gravity-form-feedback-error {
  color: var(--gravity-input-error-color, #D0021B);
}

.gravity-form-feedback-info {
  color: var(--gravity-form-helper-color, #252525);
}

/* Additional validation classes for component compatibility - Figma Specs */
.gravity-form-validation {
  display: block;
  margin-top: var(--gravity-space-1, 4px);
  font-size: var(--gravity-form-helper-font-size, 12px);
  line-height: var(--gravity-form-helper-line-height, 16px);
}

.gravity-form-validation-success {
  color: var(--gravity-color-success);
}

.gravity-form-validation-error {
  color: var(--gravity-input-error-color, #D0021B);
}

.gravity-form-help {
  display: block;
  margin-top: var(--gravity-space-1, 4px);
  color: var(--gravity-form-helper-color, #252525);
  font-size: var(--gravity-form-helper-font-size, 12px);
  line-height: var(--gravity-form-helper-line-height, 16px);
}

.gravity-required {
  color: var(--gravity-color-danger);
  margin-left: var(--gravity-space-1);
}

/* ================================
 * VALIDATION WRAPPER - Figma Pattern
 * Icon to left of validation text, below input
 * ================================ */

.gravity-form-validation-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: var(--gravity-space-1, 4px);
}

.gravity-validation-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.gravity-form-validation-text {
  font-size: var(--gravity-form-helper-font-size, 12px);
  line-height: var(--gravity-form-helper-line-height, 16px);
}

.gravity-form-validation-error .gravity-form-validation-text {
  color: var(--gravity-input-error-color, #D0021B);
}

.gravity-form-validation-success .gravity-form-validation-text {
  color: var(--gravity-color-success);
}

/* ================================
 * INPUT GROUPS
 * ================================ */

.gravity-input-group {
  display: flex;
  width: 100%;
}

.gravity-input-group .gravity-input {
  flex: 1;
  position: relative;
  z-index: 2;
}

.gravity-input-group .gravity-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.gravity-input-group .gravity-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.gravity-input-group .gravity-input:focus {
  z-index: 3;
}

.gravity-input-group-prepend,
.gravity-input-group-append {
  display: flex;
  align-items: center;
  padding: var(--gravity-form-element-padding-y) var(--gravity-form-element-padding-x);
  font-size: var(--gravity-font-size-body);
  color: var(--gravity-text-secondary);
  background-color: var(--gravity-bg-muted);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-primary);
  white-space: nowrap;
}

.gravity-input-group-prepend {
  border-right: 0;
  border-top-left-radius: var(--gravity-border-radius-sm);
  border-bottom-left-radius: var(--gravity-border-radius-sm);
}

.gravity-input-group-append {
  border-left: 0;
  border-top-right-radius: var(--gravity-border-radius-sm);
  border-bottom-right-radius: var(--gravity-border-radius-sm);
}

/* Input wrapper and icon support (for component compatibility) */
.gravity-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.gravity-input-icon {
  position: absolute;
  right: var(--gravity-space-2);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.gravity-input-icon-success {
  color: var(--gravity-color-success);
}

.gravity-input-icon-error {
  color: var(--gravity-color-danger);
}

/* ================================
 * FORM LAYOUTS
 * ================================ */

.gravity-form-horizontal {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gravity-space-4);
  align-items: start;
}

.gravity-form-horizontal .gravity-label {
  margin-bottom: 0;
  padding-top: calc(var(--gravity-form-element-padding-y) + var(--gravity-border-width-thin));
}

.gravity-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gravity-space-4);
  align-items: center;
}

.gravity-form-inline .gravity-form-group {
  margin-bottom: 0;
}

.gravity-form-inline .gravity-label {
  margin-bottom: 0;
  margin-right: var(--gravity-space-2);
}

/* ================================
 * RESPONSIVE ADJUSTMENTS
 * ================================ */

@media (max-width: 590px) {
  .gravity-form-horizontal {
    grid-template-columns: 1fr;
    gap: var(--gravity-space-2);
  }

  .gravity-form-horizontal .gravity-label {
    padding-top: 0;
    margin-bottom: var(--gravity-space-1);
  }

  .gravity-form-inline {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gravity-space-3);
  }

  .gravity-form-inline .gravity-label {
    margin-right: 0;
    margin-bottom: var(--gravity-space-1);
  }
}

/* ================================
 * FORM LAYOUT CONTAINERS
 * Layout containers for structured forms
 * ================================ */

.gravity-form-layout {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.gravity-form-section {
  margin-bottom: var(--gravity-space-6);
  padding: var(--gravity-space-4);
  background: var(--gravity-bg-primary);
  border-radius: var(--gravity-border-radius-md);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-secondary);
}

.gravity-form-section:last-child {
  margin-bottom: 0;
}

.gravity-form-results-section {
  margin-top: var(--gravity-space-4);
  padding: var(--gravity-space-4);
  background: var(--gravity-bg-secondary);
  border-radius: var(--gravity-border-radius-md);
  border: var(--gravity-border-width-thin) solid var(--gravity-border-primary);
}

/* Section headers */
.gravity-form-section h3,
.gravity-form-results-section h3 {
  margin: 0 0 var(--gravity-space-3) 0;
  font-size: var(--gravity-font-size-lg);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

/* Grid layout support for form items */
.gravity-form-section .grid {
  display: grid;
  gap: var(--gravity-space-3);
}

.gravity-form-section .grid.grid-cols-1 {
  grid-template-columns: 1fr;
}

.gravity-form-section .grid.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .gravity-form-section .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ================================
 * DARK MODE ADJUSTMENTS
 * ================================ */

[data-theme="dark"] .gravity-input,
[data-theme="dark"] .gravity-textarea,
[data-theme="dark"] .gravity-select {
  background-color: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-primary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .gravity-input:disabled,
[data-theme="dark"] .gravity-textarea:disabled,
[data-theme="dark"] .gravity-select:disabled {
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-text-muted);
}

[data-theme="dark"] .gravity-checkbox-indicator,
[data-theme="dark"] .gravity-radio-indicator {
  background-color: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .gravity-input-group-prepend,
[data-theme="dark"] .gravity-input-group-append {
  background-color: var(--gravity-bg-muted);
  border-color: var(--gravity-border-primary);
  color: var(--gravity-text-secondary);
}

/* ================================
 * ACCESSIBILITY IMPROVEMENTS
 * ================================ */

@media (prefers-contrast: high) {
  .gravity-input,
  .gravity-textarea,
  .gravity-select,
  .gravity-checkbox-indicator,
  .gravity-radio-indicator {
    border-width: 2px;
  }

  .gravity-input:focus,
  .gravity-textarea:focus,
  .gravity-select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gravity-border-focus) 30%, transparent);
  }
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  .gravity-input,
  .gravity-textarea,
  .gravity-select {
    background: white !important;
    border: 1px solid black !important;
    color: black !important;
  }

  .gravity-checkbox-indicator,
  .gravity-radio-indicator {
    border: 1px solid black !important;
    background: white !important;
  }
}

/* ================================
 * RADIO BUTTON STYLES (EXTENDED)
 * ================================ */

.gravity-radio-vertical {
  flex-direction: column;
}

.gravity-radio-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.gravity-radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.gravity-radio-item.gravity-radio-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gravity-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ================================
 * GRAVITY CHECKBOX COMPONENT STYLES
 * Complete styling for GravityCheckBox component
 * Layout: Label (top) → Checkbox+Text (middle) → Help/Error (bottom)
 *
 * Figma States:
 * - Unselected: bg #FFFFFF, border #6A7070
 * - Selected: bg #047A9C, border #047A9C, icon white
 * - Disabled Unselected: bg #E9E9E9, border #C7C7C7
 * - Disabled Selected: bg #E9E9E9, border #C7C7C7, icon #C7C7C7
 * ================================ */

/* Wrapper - contains entire checkbox field - Figma Specs */
.gravity-checkbox-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--gravity-space-3);
}

/* Inline mode - for use in horizontal layouts where margin would break alignment */
.gravity-checkbox-wrapper.gravity-checkbox-inline {
  margin-bottom: 0;
  align-self: center;
}

/* Field label - above checkbox - Figma Specs: 12px/16px #6A7070 */
.gravity-checkbox-field-label {
  display: block;
  margin-bottom: var(--gravity-form-label-margin-bottom, 4px);
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-form-label-font-size, 12px);
  font-weight: var(--gravity-form-label-font-weight, 400);
  line-height: var(--gravity-form-label-line-height, 16px);
  color: var(--gravity-form-label-color, #6A7070);
}

/* Clickable label wrapping checkbox + text - inline row */
.gravity-checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

/* Disabled label - visual indication only, input[disabled] handles interaction */
.gravity-checkbox-label.gravity-checkbox-disabled {
  cursor: not-allowed;
}

/* Ensure disabled checkbox box always has correct styling */
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-box {
  background-color: #E9E9E9 !important;
  border-color: #C7C7C7 !important;
}

/* Disabled + unchecked state */
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-box:not(.gravity-checkbox-checked) {
  background-color: #E9E9E9;
  border-color: #C7C7C7;
}

/* Disabled + checked state */
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-box.gravity-checkbox-checked {
  background-color: #E9E9E9 !important;
  border-color: #C7C7C7 !important;
}

/* Disabled checkmark icon is gray */
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-icon {
  color: #C7C7C7;
}

.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-icon svg,
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-icon path {
  fill: #C7C7C7;
}

/* Checkbox box (visual checkbox) - Figma Specs: 20x20px, 2px border #6A7070, 4px radius */
.gravity-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #6A7070;
  border-radius: 4px;
  background-color: #FFFFFF;
  transition: all var(--gravity-transition-fast, 0.15s ease);
  position: relative;
  box-sizing: border-box;
}

/* Size variants - Updated for Figma (default is now 20px) */
.gravity-checkbox-sm {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.gravity-checkbox-md {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.gravity-checkbox-lg {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Color variants - define checkbox color for checked state */
.gravity-checkbox-primary {
  --checkbox-color: #047A9C;
}

.gravity-checkbox-success {
  --checkbox-color: var(--gravity-state-success, #038238);
}

.gravity-checkbox-warning {
  --checkbox-color: var(--gravity-state-warning, #E59400);
}

.gravity-checkbox-danger {
  --checkbox-color: var(--gravity-state-error, #D0021B);
}

.gravity-checkbox-info {
  --checkbox-color: var(--gravity-state-info, #1977D4);
}

/* Checked state - Figma Specs: bg #047A9C, border #047A9C */
.gravity-checkbox-checked {
  background-color: var(--checkbox-color, #047A9C);
  border-color: var(--checkbox-color, #047A9C);
}

/* Focus state - visible focus ring */
.gravity-checkbox-input:focus + .gravity-checkbox-box {
  outline: 2px solid var(--gravity-border-focus, #0B73DA);
  outline-offset: 2px;
}

/* Hover state - only when not disabled */
.gravity-checkbox-label:not(.gravity-checkbox-disabled):hover .gravity-checkbox-box:not(.gravity-checkbox-disabled-state) {
  border-color: var(--checkbox-color, #047A9C);
}

/* Disabled state - Figma Specs: bg #E9E9E9, border #C7C7C7 */
.gravity-checkbox-disabled-state {
  background-color: #E9E9E9 !important;
  border-color: #C7C7C7 !important;
  cursor: not-allowed;
}

/* Error state - red border */
.gravity-checkbox-error-state {
  border-color: #D0021B !important;
}

/* Checkbox icon container - Figma Specs: 12x10px icon centered */
.gravity-checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 10px;
  color: #FFFFFF;
}

/* Override icon color via SVG fill for white checkmark */
.gravity-checkbox-icon svg,
.gravity-checkbox-icon path {
  fill: currentColor;
}

/* Disabled + Checked icon - Figma Specs: icon #C7C7C7 */
.gravity-checkbox-disabled-state .gravity-checkbox-icon,
.gravity-checkbox-disabled-state .gravity-checkbox-icon svg,
.gravity-checkbox-disabled-state .gravity-checkbox-icon path {
  color: #C7C7C7;
  fill: #C7C7C7;
}

/* Text label - Figma Specs: 14px/18px #252525 */
.gravity-checkbox-text {
  font-family: var(--gravity-font-family-primary, 'Open Sans', sans-serif);
  font-size: 14px;
  line-height: 18px;
  color: #252525;
  font-weight: 400;
}

/* Disabled text - Figma Specs: #6A7070 */
.gravity-checkbox-label.gravity-checkbox-disabled .gravity-checkbox-text {
  color: #6A7070;
}

/* Content slot */
.gravity-checkbox-content {
  font-family: var(--gravity-font-family-primary, 'Open Sans', sans-serif);
  font-size: 14px;
  line-height: 18px;
  color: #252525;
}

/* Help text (Informational text) - Figma Specs: 12px/16px #252525, below checkbox */
.gravity-checkbox-help {
  display: block;
  margin-top: 12px;
  font-family: var(--gravity-font-family-primary, 'Open Sans', sans-serif);
  font-size: 12px;
  line-height: 16px;
  color: #252525;
}

/* Error message - Figma Specs: 12px/16px #D0021B with warning icon */
.gravity-checkbox-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 12px;
  font-family: var(--gravity-font-family-primary, 'Open Sans', sans-serif);
  font-size: 12px;
  line-height: 16px;
  color: #D0021B;
}

/* Validation wrapper for checkbox - icon + text */
.gravity-checkbox-validation-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 12px;
}

.gravity-checkbox-validation-wrapper .gravity-validation-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.gravity-checkbox-validation-wrapper .gravity-form-validation-text {
  font-family: var(--gravity-font-family-primary, 'Open Sans', sans-serif);
  font-size: 12px;
  line-height: 16px;
  color: #D0021B;
}

/* Required indicator */
.gravity-checkbox-text .gravity-required-indicator {
  color: var(--gravity-input-error-color, #D0021B);
  margin-left: 2px;
  font-weight: 600;
}

.gravity-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.gravity-radio-button {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gravity-border-primary);
  border-radius: 50%;
  transition: all var(--gravity-transition-fast);
}

.gravity-radio-button-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gravity-brand-primary);
  transition: transform var(--gravity-transition-fast);
}

.gravity-radio-input:checked + .gravity-radio-label .gravity-radio-button {
  border-color: var(--gravity-brand-primary);
}

.gravity-radio-input:checked + .gravity-radio-label .gravity-radio-button-inner {
  transform: translate(-50%, -50%) scale(1);
}

.gravity-radio-input:focus + .gravity-radio-label .gravity-radio-button {
  box-shadow: var(--gravity-focus-ring-shadow);
}

.gravity-radio-input:disabled + .gravity-radio-label {
  cursor: not-allowed;
  opacity: 0.5;
}

.gravity-radio-text {
  color: var(--gravity-text-primary);
  font-size: 0.875rem;
}

/* ================================
 * TEXTAREA STYLES (EXTENDED)
 * ================================ */

.gravity-textarea-wrapper {
  position: relative;
}

.gravity-textarea-small {
  padding: 0.5rem;
  font-size: 0.75rem;
}

.gravity-textarea-large {
  padding: 1rem;
  font-size: 1rem;
}

.gravity-textarea-disabled {
  background: var(--gravity-bg-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

.gravity-textarea-readonly {
  background: var(--gravity-bg-secondary);
  cursor: default;
}

.gravity-textarea-error {
  border-color: var(--gravity-state-error);
}

.gravity-textarea-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--gravity-secondary-red-rgb), 0.1);
}

.gravity-textarea-no-resize {
  resize: none;
}

.gravity-character-count {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--gravity-text-secondary);
  background: rgba(var(--gravity-white-rgb, 255, 255, 255), 0.9);
  padding: 0.125rem 0.375rem;
  border-radius: var(--gravity-radius-sm);
}

.gravity-character-count-exceeded {
  color: var(--gravity-state-error);
  font-weight: 600;
}

.gravity-textarea-loading {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--gravity-text-secondary);
}

.gravity-textarea-resize-handle {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  color: var(--gravity-text-muted);
  cursor: ns-resize;
  font-size: 0.75rem;
}

/* ================================
 * NUMBER INPUT STYLES (EXTENDED)
 * ================================ */

.gravity-number-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.gravity-number-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  font-size: 0.875rem;
  transition: all var(--gravity-transition-fast);
  background: var(--gravity-bg-primary);
}

.gravity-number-input:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: var(--gravity-focus-ring-shadow);
}

/* Hide spinner buttons for number inputs */
.gravity-number-input[type="number"]::-webkit-inner-spin-button,
.gravity-number-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gravity-number-input[type="number"] {
  -moz-appearance: textfield;
}

.gravity-number-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: var(--gravity-bg-muted);
  border: 1px solid var(--gravity-border-primary);
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
  color: var(--gravity-text-primary);
}

.gravity-number-button:hover:not(:disabled) {
  background: var(--gravity-bg-secondary);
}

.gravity-number-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-number-button-group {
  display: flex;
  flex-direction: column;
  margin-left: -1px;
}

.gravity-number-button-group .gravity-number-button {
  border-radius: 0;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
}

.gravity-number-button-group .gravity-number-button:first-child {
  border-top-right-radius: 0.375rem;
}

.gravity-number-button-group .gravity-number-button:last-child {
  border-bottom-right-radius: 0.375rem;
  margin-top: -1px;
}

.gravity-number-button-decrement {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right: none;
}

.gravity-number-input-with-buttons .gravity-number-input {
  border-radius: 0;
}

.gravity-number-prefix,
.gravity-number-suffix {
  padding: 0.625rem 0.75rem;
  background: var(--gravity-bg-secondary);
  border: 1px solid var(--gravity-border-primary);
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
}

.gravity-number-prefix {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right: none;
}

.gravity-number-suffix {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-left: none;
}

.gravity-number-loading {
  position: absolute;
  right: 0.75rem;
  color: var(--gravity-text-secondary);
}

/* ================================
 * DATE PICKER STYLES (EXTENDED)
 * ================================ */

.gravity-datepicker-wrapper {
  position: relative;
}

.gravity-datepicker-input {
  width: 100%;
  padding-right: 2.5rem;
}

.gravity-datepicker-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--gravity-text-secondary);
  transition: color var(--gravity-transition-fast);
}

.gravity-datepicker-toggle:hover {
  color: var(--gravity-text-primary);
}

.gravity-datepicker-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: var(--gravity-z-dropdown);
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-lg);
  box-shadow: var(--gravity-shadow-lg);
  padding: 1rem;
  min-width: 280px;
}

.gravity-calendar {
  width: 100%;
}

.gravity-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.gravity-calendar-nav {
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--gravity-text-primary);
  transition: all var(--gravity-transition-fast);
  border-radius: var(--gravity-radius-sm);
}

.gravity-calendar-nav:hover {
  background: var(--gravity-bg-muted);
}

.gravity-calendar-title {
  display: flex;
  gap: 0.5rem;
  font-weight: 600;
}

.gravity-calendar-month-select,
.gravity-calendar-year-select {
  padding: 0.25rem;
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
  font-size: 0.875rem;
  background: var(--gravity-bg-primary);
  cursor: pointer;
}

.gravity-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.gravity-calendar-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gravity-text-secondary);
  padding: 0.25rem;
}

.gravity-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.gravity-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--gravity-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all var(--gravity-transition-fast);
}

.gravity-calendar-day:hover:not(:disabled) {
  background: var(--gravity-bg-muted);
}

.gravity-calendar-day-other-month {
  color: var(--gravity-text-muted);
}

.gravity-calendar-day-today {
  font-weight: 600;
  border-color: var(--gravity-brand-primary);
}

.gravity-calendar-day-selected {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

.gravity-calendar-day-selected:hover {
  background: var(--gravity-brand-primary-dark);
}

.gravity-calendar-day-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gravity-calendar-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gravity-border-primary);
  text-align: center;
}

.gravity-calendar-today-button {
  padding: 0.5rem 1rem;
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
  border: none;
  border-radius: var(--gravity-radius-md);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--gravity-transition-fast);
}

.gravity-calendar-today-button:hover {
  background: var(--gravity-brand-primary-dark);
}

/* ================================
 * TABS STYLES (EXTENDED)
 * ================================ */

.gravity-tabs {
  width: 100%;
}

.gravity-tabs-horizontal .gravity-tabs-header {
  border-bottom: 1px solid var(--gravity-border-primary);
  margin-bottom: 1.5rem;
}

.gravity-tabs-vertical {
  display: flex;
  gap: 1.5rem;
}

.gravity-tabs-vertical .gravity-tabs-header {
  border-right: 1px solid var(--gravity-border-primary);
  padding-right: 1.5rem;
  min-width: 200px;
}

.gravity-tabs-vertical .gravity-tabs-nav {
  flex-direction: column;
}

.gravity-tabs-nav {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.gravity-tabs-centered .gravity-tabs-nav {
  justify-content: center;
}

.gravity-tabs-right .gravity-tabs-nav {
  justify-content: flex-end;
}

.gravity-tab-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
  transition: all var(--gravity-transition-fast);
  white-space: nowrap;
}

.gravity-tab-button:hover:not(:disabled) {
  color: var(--gravity-text-primary);
}

.gravity-tab-button.gravity-tab-active {
  color: var(--gravity-brand-primary);
  font-weight: 600;
}

.gravity-tabs-horizontal .gravity-tab-button.gravity-tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gravity-brand-primary);
}

.gravity-tabs-vertical .gravity-tab-button.gravity-tab-active::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gravity-brand-primary);
}

.gravity-tab-button.gravity-tab-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-tab-icon {
  font-size: 1rem;
}

.gravity-tab-badge {
  padding: 0.125rem 0.375rem;
  background: var(--gravity-state-error);
  color: var(--gravity-color-white);
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.25rem;
  text-align: center;
}

.gravity-tabs-content {
  flex: 1;
}

.gravity-tab-panel {
  animation: fadeIn 0.3s ease;
}

.gravity-tab-panel[hidden] {
  display: none;
}

.gravity-tab-panel-active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================
 * EXTENDED DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-radio-button {
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-radio-text,
  :root:not([data-theme]) .gravity-textarea,
  :root:not([data-theme]) .gravity-number-input,
  :root:not([data-theme]) .gravity-datepicker-input {
    background: var(--gravity-bg-secondary);
    color: var(--gravity-text-primary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-number-button {
    background: var(--gravity-bg-muted);
    border-color: var(--gravity-border-primary);
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-datepicker-dropdown,
  :root:not([data-theme]) .gravity-calendar {
    background: var(--gravity-bg-secondary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-calendar-nav,
  :root:not([data-theme]) .gravity-calendar-day {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-tab-button {
    color: var(--gravity-text-muted);
  }

  :root:not([data-theme]) .gravity-tab-button:hover:not(:disabled) {
    color: var(--gravity-text-secondary);
  }
}

/* ================================
 * FORM LAYOUT ENHANCEMENTS
 * ================================ */

.gravity-form-field {
  margin-bottom: var(--gravity-space-4);
}

.gravity-form-row {
  display: flex;
  gap: var(--gravity-space-4);
  margin-bottom: var(--gravity-space-4);
}

.gravity-form-row > * {
  flex: 1;
}

.gravity-form-description {
  font-size: var(--gravity-font-size-small);
  color: var(--gravity-text-muted);
  margin-bottom: var(--gravity-space-3);
  line-height: var(--gravity-line-height-relaxed);
}

/* Enhanced Input Styling - Figma Specs */
.gravity-form-field .gravity-input,
.gravity-form-field .gravity-textarea,
.gravity-form-field .gravity-select {
  width: 100%;
  height: var(--gravity-form-element-height, 36px);
  padding: var(--gravity-form-element-padding-y, 9px) var(--gravity-form-element-padding-x, 12px);
  font-size: var(--gravity-input-font-size, 14px);
  line-height: var(--gravity-input-line-height, 18px);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  border: 1px solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  transition: all var(--gravity-transition-fast);
  box-sizing: border-box;
}

.gravity-form-field .gravity-textarea {
  height: auto;
  min-height: var(--gravity-textarea-min-height, 84px);
}

/* Fix select vertical padding to prevent text clipping */
/* Select elements need less vertical padding due to browser rendering differences */
.gravity-form-field .gravity-select {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Ensure proper height for all form inputs - Figma Specs */
.gravity-form-field input[type="text"],
.gravity-form-field input[type="email"],
.gravity-form-field input[type="password"],
.gravity-form-field input[type="number"] {
  height: var(--gravity-form-element-height, 36px);
  padding: var(--gravity-form-element-padding-y, 9px) var(--gravity-form-element-padding-x, 12px);
  font-size: var(--gravity-input-font-size, 14px);
  line-height: var(--gravity-input-line-height, 18px);
  border: 1px solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  box-sizing: border-box;
}

.gravity-form-field .gravity-input:focus,
.gravity-form-field .gravity-textarea:focus,
.gravity-form-field .gravity-select:focus,
.gravity-form-field input[type="text"]:focus,
.gravity-form-field input[type="email"]:focus,
.gravity-form-field input[type="password"]:focus,
.gravity-form-field input[type="number"]:focus {
  outline: none;
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-focus) 20%, transparent);
}

/* Checkbox Field Styling */
.gravity-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--gravity-space-2);
  padding: 12px;
  background-color: var(--gravity-bg-secondary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  transition: all var(--gravity-transition-fast);
  margin-bottom: var(--gravity-space-3);
}

.gravity-checkbox-field:hover {
  background-color: var(--gravity-bg-muted);
  border-color: var(--gravity-border-secondary);
}

/* Helper text styling - Figma Specs */
.gravity-form-field .gravity-helper-text {
  display: block;
  margin-top: 4px;
  font-size: var(--gravity-form-helper-font-size, 12px);
  line-height: var(--gravity-form-helper-line-height, 16px);
  color: var(--gravity-form-helper-color, #252525);
}

/* Label styling within form fields - Figma Specs */
.gravity-form-field .gravity-label {
  display: block;
  margin-bottom: var(--gravity-form-label-margin-bottom, 4px);
  font-size: var(--gravity-form-label-font-size, 12px);
  font-weight: var(--gravity-form-label-font-weight, 400);
  line-height: var(--gravity-form-label-line-height, 16px);
  color: var(--gravity-form-label-color, #6A7070);
}

/* Modal-specific form styling */
.gravity-modal .gravity-form-field {
  margin-bottom: 20px;
}

.gravity-modal .gravity-form-field:last-child {
  margin-bottom: 0;
}

/* Select Field Enhancement */
.gravity-select-field {
  position: relative;
  margin-bottom: var(--gravity-space-4);
}

/* Additional styling for textarea in forms - Figma Specs */
.gravity-form-field textarea {
  min-height: var(--gravity-textarea-min-height, 84px);
  padding: 8px var(--gravity-form-element-padding-x, 12px);
  font-size: var(--gravity-input-font-size, 14px);
  line-height: var(--gravity-input-line-height, 18px);
  border: 1px solid var(--gravity-input-border-color, #6A7070);
  border-radius: var(--gravity-input-radius, 4px);
  background-color: var(--gravity-bg-primary, #FFFFFF);
  resize: vertical;
  box-sizing: border-box;
}

.gravity-select-field .gravity-select {
  appearance: none;
  padding-right: calc(var(--gravity-form-element-padding-x) * 3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236A7070' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 8px 5px;
}

/* Disabled select arrow - Figma Specs */
.gravity-select-field .gravity-select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23C7C7C7' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
}

/* Error state for select - Figma Specs */
.gravity-select-error,
select.gravity-select.gravity-select-error {
  border-color: var(--gravity-input-error-border, #D0021B);
}

.gravity-select-error:focus,
select.gravity-select.gravity-select-error:focus {
  border-color: var(--gravity-input-error-border, #D0021B);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-input-error-border, #D0021B) 20%, transparent);
}

/* ================================
 * SLIDER / RANGE INPUT
 * ================================ */

.gravity-slider {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-1, 4px);
  width: 100%;
}

.gravity-slider-label {
  display: block;
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-form-label-font-size, 12px);
  font-weight: var(--gravity-form-label-font-weight, 400);
  color: var(--gravity-form-label-color, #6A7070);
  line-height: var(--gravity-form-label-line-height, 16px);
}

.gravity-slider-track-container {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-2, 8px);
}

.gravity-slider-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--gravity-border-primary, #E0E0E0);
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--gravity-transition-fast);
}

.gravity-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gravity-brand-primary, #047A9C);
  border-radius: 50%;
  border: 2px solid var(--gravity-bg-primary, #FFFFFF);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: grab;
  transition: transform var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
}

.gravity-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.gravity-slider-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.gravity-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gravity-brand-primary, #047A9C);
  border-radius: 50%;
  border: 2px solid var(--gravity-bg-primary, #FFFFFF);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  cursor: grab;
  transition: transform var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
}

.gravity-slider-input::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.gravity-slider-input::-moz-range-track {
  height: 6px;
  background: var(--gravity-border-primary, #E0E0E0);
  border-radius: 3px;
}

.gravity-slider-input:focus {
  outline: none;
}

.gravity-slider-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gravity-brand-primary) 30%, transparent);
}

.gravity-slider-input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gravity-brand-primary) 30%, transparent);
}

.gravity-slider-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.gravity-slider-input:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  background: var(--gravity-input-disabled-bg, #C7C7C7);
}

.gravity-slider-input:disabled::-moz-range-thumb {
  cursor: not-allowed;
  background: var(--gravity-input-disabled-bg, #C7C7C7);
}

.gravity-slider-bound {
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-small, 12px);
  color: var(--gravity-text-secondary, #6A7070);
  min-width: 2ch;
  text-align: center;
}

.gravity-slider-value {
  font-family: var(--gravity-font-family-primary);
  font-size: var(--gravity-font-size-body, 14px);
  font-weight: 500;
  color: var(--gravity-text-primary, #252525);
  text-align: center;
}

/* Compact mode - for toolbars and inline usage */
.gravity-slider--compact {
  flex-direction: row;
  align-items: center;
  gap: var(--gravity-space-2, 8px);
  width: auto;
}

.gravity-slider--compact .gravity-slider-track-container {
  min-width: 100px;
}

.gravity-slider--compact .gravity-slider-input {
  height: 4px;
}

.gravity-slider--compact .gravity-slider-input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}

.gravity-slider--compact .gravity-slider-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
}

/* ========================================
 * components/fullscreen-wrapper.css
 * ======================================== */

/**
 * Gravity Fullscreen Wrapper
 *
 * Atomic component for fullscreen mode support.
 * When active, expands to fill the entire viewport with appropriate styling.
 */

.gravity-fullscreen-wrapper {
  /* Default: normal flow container */
  display: block;
}

.gravity-fullscreen-wrapper--active {
  /* Fullscreen mode: fixed position covering entire viewport */
  position: fixed;
  inset: 0;
  z-index: var(--gravity-z-index-fullscreen, 1000);
  background-color: var(--gravity-color-background-primary, #ffffff);
  overflow: auto;

  /* Ensure content is properly padded */
  padding: 0;
}

/* Inner content wrapper for fullscreen mode */
.gravity-fullscreen-wrapper--active > * {
  /* Allow content to scroll naturally */
  max-height: 100%;
}

/* Optional: Sticky header support within fullscreen mode */
.gravity-fullscreen-wrapper--active .gravity-fullscreen-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(to right, var(--gravity-color-background-primary, #ffffff), var(--gravity-color-background-secondary, #f9fafb));
  border-bottom: 1px solid var(--gravity-color-border-light, #e5e7eb);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(4px);
  padding: var(--gravity-spacing-3, 0.75rem) var(--gravity-spacing-4, 1rem);
}

/* Content area within fullscreen */
.gravity-fullscreen-wrapper--active .gravity-fullscreen-content {
  padding: var(--gravity-spacing-2, 0.5rem) var(--gravity-spacing-4, 1rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Responsive adjustments */
@media (min-width: 640px) {
  .gravity-fullscreen-wrapper--active .gravity-fullscreen-header {
    padding: var(--gravity-spacing-3, 0.75rem) var(--gravity-spacing-6, 1.5rem);
  }

  .gravity-fullscreen-wrapper--active .gravity-fullscreen-content {
    padding: var(--gravity-spacing-2, 0.5rem) var(--gravity-spacing-4, 1rem);
  }
}

@media (min-width: 1024px) {
  .gravity-fullscreen-wrapper--active .gravity-fullscreen-header {
    padding: var(--gravity-spacing-3, 0.75rem) var(--gravity-spacing-6, 1.5rem);
  }

  .gravity-fullscreen-wrapper--active .gravity-fullscreen-content {
    padding: var(--gravity-spacing-2, 0.5rem) var(--gravity-spacing-6, 1.5rem);
  }
}

/* ========================================
 * components/list.css
 * ======================================== */

/*
 * Gravity UI 2.0 List Component
 *
 * Semantic list styling for ordered and unordered lists.
 */

/* ================================
 * BASE LIST STYLES
 * ================================ */

.gravity-list {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

.gravity-list li {
  padding: var(--gravity-spacing-1) 0;
}

/* ================================
 * VARIANT STYLES
 * ================================ */

.gravity-list-none {
  list-style-type: none;
  padding-left: 0;
}

.gravity-list-bulleted {
  list-style-type: disc;
  padding-left: var(--gravity-spacing-4);
}

.gravity-list-numbered {
  list-style-type: decimal;
  padding-left: var(--gravity-spacing-4);
}

.gravity-list-checkmark {
  list-style-type: none;
  padding-left: var(--gravity-spacing-4);
}

.gravity-list-checkmark li::before {
  content: "\2713";
  color: var(--gravity-color-success-500);
  margin-right: var(--gravity-spacing-2);
}

/* ================================
 * GAP VARIANTS
 * ================================ */

.gravity-list-gap-none li {
  padding: 0;
}

.gravity-list-gap-sm li {
  padding: var(--gravity-spacing-0-5) 0;
}

.gravity-list-gap-lg li {
  padding: var(--gravity-spacing-2) 0;
}

/* ========================================
 * components/media-controls.css
 * ======================================== */

/* ============================================
 * GRAVITY UI - MEDIA CONTROLS COMPONENT
 * ============================================
 * Speed control, info display, and additional media controls
 * Supports dropdowns, metadata display, and auxiliary functions
 */

/* ====================================
 * SPEED CONTROL CONTAINER
 * ==================================== */

.gravity-speed-container {
  position: relative;
  display: flex;
  align-items: center;
}

.gravity-speed-btn {
  /* Extends base .gravity-audio-btn styles */
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
  min-width: 60px;
  justify-content: center;
  padding: var(--gravity-space-2) var(--gravity-space-3);
}

.gravity-speed-label {
  font-size: var(--gravity-font-size-xs);
  font-weight: var(--gravity-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.gravity-speed-icon {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-secondary);
}

/* ====================================
 * SPEED DROPDOWN
 * ==================================== */

.gravity-speed-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--gravity-space-2);
  
  /* Visual */
  background: var(--gravity-bg-elevated);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-border-radius-md);
  box-shadow: var(--gravity-shadow-large);
  
  /* Layout */
  padding: var(--gravity-space-2);
  min-width: 80px;
  z-index: var(--gravity-z-dropdown);
  
  /* Animation */
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gravity-speed-dropdown[data-visible="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

.gravity-speed-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gravity-bg-elevated);
}

/* ====================================
 * SPEED OPTIONS
 * ==================================== */

.gravity-speed-options {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-0-5);
}

.gravity-speed-option {
  background: none;
  border: none;
  padding: var(--gravity-space-2) var(--gravity-space-3);
  border-radius: var(--gravity-border-radius-sm);
  cursor: pointer;
  
  /* Typography */
  font-size: var(--gravity-font-size-sm);
  font-weight: var(--gravity-font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--gravity-text-primary);
  text-align: center;
  
  /* Interaction */
  transition: all 0.15s ease;
}

.gravity-speed-option:hover {
  background: var(--gravity-bg-hover);
}

.gravity-speed-option:active {
  background: var(--gravity-bg-pressed);
  transform: scale(0.98);
}

.gravity-speed-option[data-active="true"] {
  background: var(--gravity-color-primary);
  color: var(--gravity-text-inverse);
}

.gravity-speed-option[data-active="true"]:hover {
  background: var(--gravity-color-primary-hover);
}

/* ====================================
 * AUDIO INFO DISPLAY
 * ==================================== */

.gravity-audio-info {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-1);
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.gravity-audio-title {
  font-size: var(--gravity-font-size-sm);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  line-height: 1.3;
  
  /* Text overflow handling */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-audio-description {
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-text-secondary);
  line-height: 1.4;
  
  /* Text overflow handling */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-audio-metadata {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-2);
  font-size: var(--gravity-font-size-2xs);
  color: var(--gravity-text-tertiary);
}

.gravity-audio-icon {
  flex-shrink: 0;
  color: var(--gravity-color-primary);
  font-size: var(--gravity-font-size-sm);
}

/* ====================================
 * ADDITIONAL CONTROL BUTTONS
 * ==================================== */

.gravity-close-btn {
  /* Extends base .gravity-audio-btn styles */
  color: var(--gravity-text-secondary);
}

.gravity-close-btn:hover:not(:disabled) {
  color: var(--gravity-text-inverse);
  background: var(--gravity-color-error);
  border-color: var(--gravity-color-error);
}

.gravity-drag-handle {
  /* Extends base .gravity-audio-btn styles */
  color: var(--gravity-text-tertiary);
  cursor: move;
  padding: var(--gravity-space-2);
  user-select: none;
}

.gravity-drag-handle:hover:not(:disabled) {
  color: var(--gravity-text-secondary);
  background: var(--gravity-bg-hover);
}

.gravity-drag-handle:active {
  cursor: grabbing;
  background: var(--gravity-bg-pressed);
}

.gravity-autoplay-container {
  display: flex;
  align-items: center;
}

.gravity-autoplay-label {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
  cursor: pointer;
  
  /* Typography */
  font-size: var(--gravity-font-size-xs);
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-primary);
  
  /* Visual */
  padding: var(--gravity-space-1-5) var(--gravity-space-2);
  border-radius: var(--gravity-border-radius-sm);
  transition: background-color 0.2s ease;
  user-select: none;
}

.gravity-autoplay-label:hover {
  background: var(--gravity-bg-hover);
}

.gravity-autoplay-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--gravity-color-primary);
  cursor: pointer;
}

.gravity-autoplay-text {
  font-size: var(--gravity-font-size-2xs);
  font-weight: var(--gravity-font-weight-semibold);
  white-space: nowrap;
}

/* ====================================
 * STATE INDICATORS
 * ==================================== */

.gravity-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 var(--gravity-space-1);
}

.gravity-loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--gravity-bg-tertiary);
  border-top-color: var(--gravity-color-primary);
  border-radius: 50%;
  animation: gravity-spin 1s linear infinite;
}

@keyframes gravity-spin {
  to {
    transform: rotate(360deg);
  }
}

.gravity-error-indicator {
  color: var(--gravity-color-error);
  font-size: var(--gravity-font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
}

.gravity-connection-status {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
  font-size: var(--gravity-font-size-2xs);
  color: var(--gravity-text-tertiary);
}

.gravity-connection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gravity-color-success);
  
  /* Pulse animation for active connection */
  animation: gravity-connection-pulse 2s ease-in-out infinite;
}

.gravity-connection-dot[data-status="error"] {
  background: var(--gravity-color-error);
}

.gravity-connection-dot[data-status="warning"] {
  background: var(--gravity-color-warning);
}

@keyframes gravity-connection-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ====================================
 * SIZE VARIANTS
 * ==================================== */

.gravity-speed-container[data-size="compact"] .gravity-speed-btn {
  min-width: 50px;
  padding: var(--gravity-space-1-5) var(--gravity-space-2);
}

.gravity-speed-container[data-size="compact"] .gravity-speed-dropdown {
  min-width: 70px;
}

.gravity-audio-info[data-size="compact"] .gravity-audio-title {
  font-size: var(--gravity-font-size-xs);
}

.gravity-audio-info[data-size="compact"] .gravity-audio-description {
  font-size: var(--gravity-font-size-2xs);
}

/* ====================================
 * RESPONSIVE DESIGN
 * ==================================== */

/* Tablet */
@media (max-width: 768px) {
  .gravity-speed-dropdown {
    /* Adjust position for smaller screens */
    left: auto;
    right: 0;
    transform: none;
  }
  
  .gravity-speed-dropdown::after {
    left: auto;
    right: 16px;
    transform: none;
  }
  
  .gravity-audio-info {
    gap: 2px;
  }
  
  .gravity-autoplay-text {
    display: none; /* Hide text, keep checkbox */
  }
}

/* Mobile */
@media (max-width: 480px) {
  .gravity-speed-container,
  .gravity-autoplay-container {
    /* Often hidden on mobile to save space */
    display: none;
  }
  
  .gravity-speed-container[data-mobile-visible="true"],
  .gravity-autoplay-container[data-mobile-visible="true"] {
    display: flex;
  }
  
  .gravity-audio-info {
    /* Prioritize info display on mobile */
    flex: 1;
    min-width: 0;
  }
  
  .gravity-audio-description,
  .gravity-audio-metadata {
    display: none; /* Hide secondary info */
  }
  
  .gravity-drag-handle {
    display: none; /* No dragging on mobile */
  }
}

/* ====================================
 * THEME SUPPORT
 * ==================================== */

[data-theme="dark"] .gravity-speed-dropdown {
  background: var(--gravity-bg-elevated);
  border-color: var(--gravity-border-primary);
  box-shadow: var(--gravity-shadow-dark-large);
}

[data-theme="dark"] .gravity-speed-dropdown::after {
  border-top-color: var(--gravity-bg-elevated);
}

[data-theme="dark"] .gravity-loading-spinner {
  border-color: var(--gravity-bg-tertiary);
  border-top-color: var(--gravity-color-primary);
}

/* ====================================
 * ACCESSIBILITY
 * ==================================== */

.gravity-speed-dropdown[role="menu"] {
  /* ARIA menu support */
}

.gravity-speed-option[role="menuitem"] {
  /* ARIA menuitem support */
}

.gravity-autoplay-label[aria-describedby] {
  /* Screen reader description support */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .gravity-speed-dropdown {
    border-width: 2px;
  }
  
  .gravity-loading-spinner {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gravity-speed-dropdown {
    transition: none;
  }
  
  .gravity-loading-spinner {
    animation: none;
  }
  
  .gravity-connection-dot {
    animation: none;
    opacity: 1;
  }
  
  .gravity-speed-option:active {
    transform: none;
  }
}

/* ====================================
 * KEYBOARD NAVIGATION
 * ==================================== */

.gravity-speed-dropdown[data-keyboard-visible="true"] .gravity-speed-option:focus {
  background: var(--gravity-bg-hover);
  outline: none;
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
}

.gravity-autoplay-label:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
  border-radius: var(--gravity-border-radius-sm);
}

/* ====================================
 * TOUCH OPTIMIZATIONS
 * ==================================== */

@media (pointer: coarse) {
  .gravity-speed-option {
    /* Larger touch targets */
    padding: var(--gravity-space-3);
  }
  
  .gravity-autoplay-label {
    /* Larger touch target */
    padding: var(--gravity-space-2) var(--gravity-space-3);
  }
  
  .gravity-drag-handle {
    /* Hide drag handle on touch devices */
    display: none;
  }
}

/* ========================================
 * components/metric-cards.css
 * ======================================== */

/**
 * Gravity UI Metric Cards Component
 * Professional dashboard metric cards with variant-based styling
 * NO Tailwind or external framework dependencies
 */

/* ========================================
   Base Metric Card Structure
======================================== */

.gravity-metric-card {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-radius-lg);
    border: 1px solid var(--gravity-border-light);
    position: relative;
    transition: all var(--gravity-transition-normal);
}

.gravity-metric-card:hover {
    box-shadow: var(--gravity-shadow-lg);
}

.gravity-metric-card.clickable {
    cursor: pointer;
}

.gravity-metric-card.clickable:hover {
    border-color: var(--gravity-border-focus);
}

/* ========================================
   Icon Container Styling
======================================== */

.gravity-metric-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}

.gravity-metric-icon-container.size-sm {
    width: 2.5rem;
    height: 2.5rem;
}

.gravity-metric-icon-container.size-md {
    width: 3rem;
    height: 3rem;
}

.gravity-metric-icon-container.size-lg {
    width: 4rem;
    height: 4rem;
}

.gravity-metric-icon {
    color: var(--gravity-color-white);
    z-index: 1;
    position: relative;
}

/* Ensure GravityIcon components inside metric containers are white for contrast */
/* Icons use CSS mask technique, so background-color controls the icon color */
.gravity-metric-icon-container .gravity-icon {
    background-color: var(--gravity-color-white);
}

.gravity-metric-icon.size-sm {
    font-size: 1rem;
}

.gravity-metric-icon.size-md {
    font-size: 1.25rem;
}

.gravity-metric-icon.size-lg {
    font-size: 1.5rem;
}

/* ========================================
   Content Container
======================================== */

.gravity-metric-content {
    margin-left: 1rem;
    flex: 1;
    min-width: 0;
}

.gravity-metric-label {
    font-size: 0.875rem;
    color: var(--gravity-text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.gravity-metric-value-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.gravity-metric-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gravity-text-primary);
    line-height: 1.2;
}

.gravity-metric-value.size-sm {
    font-size: 1.25rem;
}

.gravity-metric-value.size-lg {
    font-size: 2rem;
}

.gravity-metric-value.size-xl {
    font-size: 2.5rem;
}

/* ========================================
   Trend Indicators
======================================== */

.gravity-metric-trend {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    gap: 0.25rem;
}

.gravity-metric-trend.positive {
    color: var(--gravity-success);
}

.gravity-metric-trend.negative {
    color: var(--gravity-danger);
}

.gravity-metric-trend.neutral {
    color: var(--gravity-text-secondary);
}

/* ========================================
   Variant Background Gradients
======================================== */

/* Primary Variants */
.gravity-metric-gradient-primary,
.gravity-metric-gradient-blue {
    background: linear-gradient(135deg, var(--gravity-brand-primary) 0%, var(--gravity-brand-primary-dark) 100%);
}

.gravity-metric-gradient-success,
.gravity-metric-gradient-green {
    background: linear-gradient(135deg, var(--gravity-state-success) 0%, var(--gravity-state-success-dark) 100%);
}

.gravity-metric-gradient-warning,
.gravity-metric-gradient-orange {
    background: linear-gradient(135deg, var(--gravity-state-warning) 0%, var(--gravity-state-warning-dark) 100%);
}

.gravity-metric-gradient-danger,
.gravity-metric-gradient-red {
    background: linear-gradient(135deg, var(--gravity-state-error) 0%, var(--gravity-state-error-dark) 100%);
}

/* Extended Color Variants */
.gravity-metric-gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.gravity-metric-gradient-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.gravity-metric-gradient-pink {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.gravity-metric-gradient-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
}

.gravity-metric-gradient-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.gravity-metric-gradient-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gravity-metric-gradient-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gravity-metric-gradient-lime {
    background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
}

.gravity-metric-gradient-rose {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}

.gravity-metric-gradient-violet {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Secondary/Muted Variants */
.gravity-metric-gradient-secondary {
    background: linear-gradient(135deg, var(--gravity-text-secondary) 0%, var(--gravity-color-gray-600) 100%);
}

.gravity-metric-gradient-info {
    background: linear-gradient(135deg, var(--gravity-state-info) 0%, var(--gravity-state-info-dark) 100%);
}

.gravity-metric-gradient-light {
    background: linear-gradient(135deg, var(--gravity-color-gray-100) 0%, var(--gravity-color-gray-200) 100%);
}

.gravity-metric-gradient-dark {
    background: linear-gradient(135deg, var(--gravity-color-gray-700) 0%, var(--gravity-color-gray-800) 100%);
}

/* ========================================
   Shadow Utilities
======================================== */

.gravity-metric-shadow-sm {
    box-shadow: var(--gravity-shadow-sm);
}

.gravity-metric-shadow {
    box-shadow: var(--gravity-shadow-md);
}

.gravity-metric-shadow-lg {
    box-shadow: var(--gravity-shadow-lg);
}

.gravity-metric-shadow-xl {
    box-shadow: var(--gravity-shadow-xl);
}

/* ========================================
   Hover States
======================================== */

.gravity-metric-card:hover .gravity-metric-icon-container {
    transform: scale(1.05);
}

.gravity-metric-card.clickable:hover {
    box-shadow: var(--gravity-shadow-xl);
}

/* Hover effects for different gradients */
.gravity-metric-card:hover .gravity-metric-gradient-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.gravity-metric-card:hover .gravity-metric-gradient-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.gravity-metric-card:hover .gravity-metric-gradient-teal {
    background: linear-gradient(135deg, #0f766e 0%, #0d5858 100%);
}

.gravity-metric-card:hover .gravity-metric-gradient-orange {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

.gravity-metric-card:hover .gravity-metric-gradient-indigo {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

/* ========================================
   Loading States
======================================== */

.gravity-metric-card.loading {
    opacity: 0.7;
    pointer-events: none;
}

.gravity-metric-card.loading .gravity-metric-value {
    background: linear-gradient(90deg, var(--gravity-color-gray-100) 25%, var(--gravity-color-gray-200) 50%, var(--gravity-color-gray-100) 75%);
    background-size: 200% 100%;
    animation: gravity-metric-loading 1.5s infinite;
    color: transparent;
}

@keyframes gravity-metric-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   Responsive Design
======================================== */

@media (max-width: 768px) {
    .gravity-metric-card {
        padding: 1rem;
    }

    .gravity-metric-content {
        margin-left: 0.75rem;
    }

    .gravity-metric-value {
        font-size: 1.25rem;
    }

    .gravity-metric-icon-container.size-lg {
        width: 3rem;
        height: 3rem;
    }
}

/* ========================================
   Accessibility
======================================== */

.gravity-metric-card:focus {
    outline: var(--gravity-focus-ring-width) solid var(--gravity-focus-ring-color);
    outline-offset: var(--gravity-focus-ring-offset);
}

/* ========================================
   Dark Mode Support
======================================== */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gravity-metric-card {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
    }

    :root:not([data-theme]) .gravity-metric-label {
        color: var(--gravity-text-secondary);
    }

    :root:not([data-theme]) .gravity-metric-value {
        color: var(--gravity-text-primary);
    }

    :root:not([data-theme]) .gravity-metric-card.loading .gravity-metric-value {
        background: linear-gradient(90deg, var(--gravity-color-gray-700) 25%, var(--gravity-color-gray-600) 50%, var(--gravity-color-gray-700) 75%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gravity-metric-card,
    .gravity-metric-icon-container {
        transition: none;
    }

    .gravity-metric-card:hover {
        transform: none;
    }
}

/* ========================================
 * components/metrics-grid.css
 * ======================================== */

/**
 * Gravity UI MetricsGrid Component
 * Semantic component for displaying dashboard metrics in responsive grid layout
 * Part of Phase 1 GUI conversion - replaces Tailwind utility patterns
 *
 * Component: MetricsGrid.razor (src/GravityUI.Components/)
 * Harness: MetricsGridHarness.razor (src/MegaLab/Harnesses/L1_CoreControls/)
 *
 * NO Tailwind or external framework dependencies
 */

/* ========================================
   Base Grid Structure
======================================== */

.metrics-grid {
    display: grid;
    width: 100%;
    gap: var(--metrics-grid-gap, var(--gravity-space-6, 1.5rem));
}

/* ========================================
   Column Layouts - Mobile-First Responsive
======================================== */

/* Mobile (default): 1 column for all grid types */
.metrics-grid.cols-1,
.metrics-grid.cols-2,
.metrics-grid.cols-3,
.metrics-grid.cols-4 {
    grid-template-columns: 1fr;
}

/* Tablet (768px+): 2 columns for 2/3/4+ metrics */
@media (min-width: 768px) {
    .metrics-grid.cols-2,
    .metrics-grid.cols-3,
    .metrics-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (1024px+): Full column count based on metric count */
@media (min-width: 1024px) {
    .metrics-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .metrics-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .metrics-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   Density Variants
======================================== */

/* Compact: Tighter spacing for data-dense dashboards */
.metrics-grid.density-compact {
    --metrics-grid-gap: var(--gravity-space-3, 0.75rem);
}

/* Comfortable (default): Balanced spacing for most use cases */
.metrics-grid.density-comfortable {
    --metrics-grid-gap: var(--gravity-space-6, 1.5rem);
}

/* Spacious: Generous spacing for executive dashboards */
.metrics-grid.density-spacious {
    --metrics-grid-gap: var(--gravity-space-8, 2rem);
}

/* ========================================
   Empty State
======================================== */

.metrics-grid-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gravity-space-12, 3rem) var(--gravity-space-6, 1.5rem);
    text-align: center;
    color: var(--gravity-text-muted, var(--gravity-color-text-muted, #6b7280));
    background-color: var(--gravity-bg-surface, var(--gravity-color-bg-surface, #f9fafb));
    border-radius: var(--gravity-border-radius-lg, 0.5rem);
    border: 1px dashed var(--gravity-border-light, var(--gravity-color-border-light, #e5e7eb));
}

.metrics-grid-empty-text {
    margin-top: var(--gravity-space-4, 1rem);
    font-size: var(--gravity-text-base, 1rem);
    font-weight: 500;
}

/* ========================================
   Responsive Adjustments
======================================== */

/* Small screens (640px and below): Reduce spacing */
@media (max-width: 640px) {
    .metrics-grid {
        gap: var(--gravity-space-4, 1rem);
    }

    .metrics-grid.density-spacious {
        --metrics-grid-gap: var(--gravity-space-6, 1.5rem);
    }

    .metrics-grid-empty {
        padding: var(--gravity-space-8, 2rem) var(--gravity-space-4, 1rem);
    }
}

/* ========================================
   Print Styles
======================================== */

@media print {
    /* Limit to 2 columns max for better printing */
    .metrics-grid.cols-3,
    .metrics-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reduce spacing for compact printing */
    .metrics-grid {
        gap: var(--gravity-space-4, 1rem);
    }

    /* Hide empty state in print */
    .metrics-grid-empty {
        display: none;
    }
}

/* ========================================
   Accessibility
======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .metrics-grid,
    .metrics-grid * {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .metrics-grid-empty {
        border-width: 2px;
        border-color: currentColor;
    }
}

/* ========================================
 * components/modals.css
 * ======================================== */

/* ================================
 * GRAVITY UI - MODAL COMPONENTS
 * ================================
 * Modal dialog system with backdrop overlay
 * Maintains width constraints while allowing harness to flow
 */

/* Modal Backdrop - Fixed overlay */
.gravity-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gravity-modal-backdrop);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

/* Modal Container - Constrained width */
.gravity-modal {
  position: relative;
  width: 90vw;
  max-width: var(--gravity-modal-max-width);
  max-height: var(--gravity-modal-max-height);
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-modal-border-radius);
  box-shadow: var(--gravity-shadow-large);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modal Size Variants */
.gravity-modal[data-size="small"] {
  max-width: 400px;
}

.gravity-modal[data-size="medium"] {
  max-width: 600px;
}

.gravity-modal[data-size="large"] {
  max-width: 800px;
}

.gravity-modal[data-size="extra-large"] {
  max-width: 1140px;
}

.gravity-modal[data-size="fullscreen"] {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
}

/* Modal Header */
.gravity-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gravity-space-4);
  border-bottom: 1px solid var(--gravity-border-secondary);
  background: var(--gravity-bg-secondary);
}

.gravity-modal-title {
  margin: 0;
  font-size: var(--gravity-font-size-heading-h3);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

.gravity-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--gravity-border-radius-sm);
  color: var(--gravity-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gravity-modal-close:hover {
  background: var(--gravity-bg-muted);
  color: var(--gravity-text-primary);
}

.gravity-modal-close:focus {
  outline: none;
  background: var(--gravity-bg-muted);
  box-shadow: 0 0 0 2px var(--gravity-border-focus);
}

/* Modal Body */
.gravity-modal-body {
  flex: 1;
  padding: var(--gravity-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Modal Footer */
.gravity-modal-footer {
  padding: var(--gravity-space-4);
  border-top: 1px solid var(--gravity-border-secondary);
  background: var(--gravity-bg-secondary);
}

.gravity-modal-footer-buttons {
  display: flex;
  gap: var(--gravity-space-3);
  justify-content: flex-end;
}


/* Animation */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gravity-modal {
  animation: modal-fade-in 0.15s ease-out;
}

/* Dark Theme Support */
[data-theme="dark"] .gravity-modal {
  background: var(--gravity-modal-bg);
  border-color: var(--gravity-modal-border);
}

[data-theme="dark"] .gravity-modal-header,
[data-theme="dark"] .gravity-modal-footer {
  background: rgba(255, 255, 255, 0.02);
}

/* Responsive Design */
@media (max-width: 640px) {
  .gravity-modal {
    width: 95vw;
    margin: var(--gravity-space-4);
  }
  
  .gravity-modal[data-size="fullscreen"] {
    margin: 0;
  }
  
  .gravity-modal-body,
  .gravity-modal-header,
  .gravity-modal-footer {
    padding: var(--gravity-space-3);
  }
}

/* ========================================
 * components/navigation.css
 * ======================================== */

/*
 * Gravity UI 2.0 Navigation System
 * 
 * Complete navigation component library including:
 * - Header with responsive menu and user controls
 * - Sidebar with collapsible navigation
 * - Navigation menu with grouped items
 * - Footer with multi-column layout
 * - Layout system for full-page orchestration
 * 
 * Dependencies:
 * - foundation/variables.css (CSS custom properties)
 * - foundation/tokens.css (design tokens)
 * 
 * Browser Support:
 * - Chrome 88+, Firefox 85+, Safari 14+, Edge 88+
 */

/* ================================
 * HEADER COMPONENT
 * Top navigation bar with branding and controls
 * ================================ */

/* Base Header Styles */
.gravity-header {
  background: var(--gravity-bg-primary);
  border-bottom: 1px solid var(--gravity-border-secondary);
  height: var(--gravity-header-height, 70px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: var(--gravity-z-dropdown);
}

/* Fixed Header Variant */
.gravity-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Fixed Header Content Offset
 * When header is fixed, sibling content needs padding-top to prevent
 * content from being hidden under the header.
 */
.gravity-header-fixed ~ .gravity-stack {
  padding-top: var(--gravity-header-height, 70px);
}

/* Header Container */
.gravity-header-container {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header Sections */
.gravity-header-left,
.gravity-header-center,
.gravity-header-right {
  display: flex;
  align-items: center;
  flex: 1;
}

.gravity-header-left {
  justify-content: flex-start;
}

.gravity-header-center {
  justify-content: center;
}

.gravity-header-right {
  justify-content: flex-end;
}

/* Header Branding */
.gravity-header-logo {
  max-height: 40px;
  width: auto;
}

.gravity-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gravity-text-primary);
}

/* Remove focus outline from page titles (focused by FocusOnNavigate for accessibility) */
.gravity-header-title:focus {
  outline: none;
}

/* Header Container */
.gravity-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gravity-space-md);
}

/* Header Left Section */
.gravity-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Header Icon Container */
.gravity-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--gravity-radius-sm);
  background-color: var(--gravity-bg-subtle);
}

/* Header Title Wrapper */
.gravity-header-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Header Actions */
.gravity-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Menu Toggle Button (Hamburger) */
.gravity-menu-toggle {
  appearance: none;
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.gravity-menu-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--gravity-text-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animated Hamburger States */
.gravity-menu-toggle.open .gravity-menu-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.gravity-menu-toggle.open .gravity-menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.gravity-menu-toggle.open .gravity-menu-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* User Menu */
.gravity-header-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.gravity-header-user-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: var(--gravity-radius-md);
  transition: background-color 0.2s;
}

.gravity-header-user-button:hover {
  background-color: var(--gravity-bg-secondary);
}

.gravity-header-username {
  font-size: 0.875rem;
  color: var(--gravity-text-primary);
}

/* User Dropdown Menu */
.gravity-header-user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-secondary);
  border-radius: var(--gravity-radius-lg);
  box-shadow: var(--gravity-shadow-lg);
  min-width: 200px;
  z-index: var(--gravity-z-sticky);
}

.gravity-header-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--gravity-text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.875rem;
}

.gravity-header-menu-item:hover {
  background-color: var(--gravity-bg-secondary);
}

.gravity-header-menu-divider {
  margin: 0.25rem 0;
  border: none;
  border-top: 1px solid var(--gravity-border-secondary);
}

/* Impersonation Indicator */
.gravity-header-impersonation {
  color: var(--gravity-color-warning);
  text-decoration: none;
  padding: 0.25rem;
  transition: color 0.2s;
}

.gravity-header-impersonation:hover {
  color: var(--gravity-color-error);
}

.gravity-header-separator {
  color: var(--gravity-text-secondary);
  margin: 0 0.5rem;
}

/* Header Border Accent */
.gravity-header-border {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gravity-color-primary);
}

/* ================================
 * SIDEBAR COMPONENT
 * Collapsible side navigation panel
 * ================================ */

/* Sidebar Container */
.gravity-sidebar {
  position: relative;
  height: 100%;
}

/* Sidebar Panel */
.gravity-sidebar-panel {
  position: relative;
  height: 100%;
  width: var(--gravity-sidebar-width, 250px);
  background: var(--gravity-bg-primary);
  border-right: 1px solid var(--gravity-border-secondary);
  transition: width 0.3s ease, margin-left 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Left Sidebar Positioning */
.gravity-sidebar-left .gravity-sidebar-panel {
  margin-left: 0;
}

.gravity-sidebar-left .gravity-sidebar-panel.closed {
  width: 0;
  margin-left: calc(-1 * var(--gravity-sidebar-width, -250px));
  overflow: hidden;
}

/* Right Sidebar Positioning */
.gravity-sidebar-right .gravity-sidebar-panel {
  margin-right: 0;
  border-right: none;
  border-left: 1px solid var(--gravity-border-secondary);
}

.gravity-sidebar-right .gravity-sidebar-panel.closed {
  width: 0;
  margin-right: calc(-1 * var(--gravity-sidebar-width, -250px));
  overflow: hidden;
}

/* Sidebar Header */
.gravity-sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--gravity-border-secondary);
  display: none;
  align-items: center;
  justify-content: space-between;
}

/* Sidebar Branding */
.gravity-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gravity-sidebar-brand-icon,
.gravity-sidebar-brand-emoji {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gravity-color-primary);
  color: white;
  border-radius: var(--gravity-radius-lg);
  font-size: 1rem;
}

.gravity-sidebar-brand-emoji {
  background: transparent;
  font-size: 1.5rem;
}

.gravity-sidebar-brand-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gravity-text-primary);
}

/* Sidebar Content Area */
.gravity-sidebar-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

/* Sidebar Footer */
.gravity-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--gravity-border-secondary);
}

/* Sidebar Close Button */
.gravity-sidebar-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--gravity-text-secondary);
  transition: color 0.2s;
}

.gravity-sidebar-close:hover {
  color: var(--gravity-text-primary);
}

/* ================================
 * NAVIGATION MENU COMPONENT
 * Hierarchical navigation menu system
 * ================================ */

/* Navigation Menu Container */
.gravity-nav-menu {
  width: 100%;
}

/* Navigation Groups */
.gravity-nav-group {
  margin-bottom: 1.5rem;
}

.gravity-nav-group.first {
  margin-top: 0;
}

/* Group Header */
.gravity-nav-group-header {
  padding: 0 1.5rem;
  margin-bottom: 0.5rem;
}

.gravity-nav-group-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gravity-text-secondary);
}

/* Group Items Container */
.gravity-nav-group-items {
  display: flex;
  flex-direction: column;
}

/* Navigation Items */
.gravity-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--gravity-nav-item-padding, 0.75rem 1.5rem);
  color: var(--gravity-text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  font-size: 0.875rem;
  position: relative;
}

.gravity-nav-item:hover {
  background-color: var(--gravity-bg-secondary);
}

/* Active Navigation Item */
.gravity-nav-item-active,
.gravity-nav-item.active {
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.1);
  color: var(--gravity-color-primary);
  border-right: 3px solid var(--gravity-color-primary);
}

/* Disabled Navigation Item */
.gravity-nav-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Navigation Item Icon */
.gravity-nav-item-icon {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gravity-text-secondary);
}

.gravity-nav-item-active .gravity-nav-item-icon {
  color: var(--gravity-color-primary);
}

/* Navigation Item Text */
.gravity-nav-item-text {
  flex: 1;
}

/* Navigation Item Badge */
.gravity-nav-item-badge {
  padding: 0.125rem 0.375rem;
  background: var(--gravity-bg-tertiary);
  color: var(--gravity-text-primary);
  border-radius: var(--gravity-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Navigation Item New Indicator */
.gravity-nav-item-new {
  padding: 0.125rem 0.375rem;
  background: var(--gravity-color-success);
  color: white;
  border-radius: var(--gravity-radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Compact Navigation Mode */
.gravity-nav-compact .gravity-nav-item {
  justify-content: center;
  padding: 0.75rem;
}

.gravity-nav-compact .gravity-nav-item-text,
.gravity-nav-compact .gravity-nav-group-title {
  display: none;
}

/* ================================
 * FOOTER COMPONENT
 * Multi-section footer with links and info
 * ================================ */

/* Footer Container */
.gravity-footer {
  background: var(--gravity-bg-primary);
  border-top: 1px solid var(--gravity-border-secondary);
  margin-top: auto;
}

/* Dark Footer Variant */
.gravity-footer-dark {
  background: var(--gravity-bg-dark, #1f2937);
  color: var(--gravity-text-inverse);
}

.gravity-footer-dark .gravity-footer-link,
.gravity-footer-dark .gravity-footer-copyright,
.gravity-footer-dark .gravity-footer-legal-link {
  color: var(--gravity-text-inverse-secondary, #9ca3af);
}

.gravity-footer-dark .gravity-footer-link:hover,
.gravity-footer-dark .gravity-footer-legal-link:hover {
  color: var(--gravity-text-inverse);
}

/* Footer Content Container */
.gravity-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Footer Top Section */
.gravity-footer-top {
  padding: 2rem 0;
  border-bottom: 1px solid var(--gravity-border-secondary);
}

/* Footer Main Section */
.gravity-footer-main {
  padding: 3rem 0;
}

/* Footer Column Grid */
.gravity-footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--gravity-footer-column-min-width, 200px), 1fr));
  gap: 2rem;
}

/* Footer Column Title */
.gravity-footer-column-title {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gravity-text-secondary);
}

/* Footer Links List */
.gravity-footer-column-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gravity-footer-column-links li {
  margin-bottom: 0.5rem;
}

/* Footer Link */
.gravity-footer-link {
  color: var(--gravity-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gravity-footer-link:hover {
  color: var(--gravity-color-primary);
}

/* Footer Bottom Section */
.gravity-footer-bottom {
  padding: 1.5rem 0;
  border-top: 1px solid var(--gravity-border-secondary);
}

.gravity-footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Footer Copyright */
.gravity-footer-copyright {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
}

/* Footer Version */
.gravity-footer-version {
  font-size: 0.75rem;
  color: var(--gravity-text-tertiary);
}

/* Footer Legal Links */
.gravity-footer-legal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gravity-footer-legal-link {
  color: var(--gravity-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.gravity-footer-legal-link:hover {
  color: var(--gravity-color-primary);
}

/* Footer Social Links */
.gravity-footer-social {
  display: flex;
  gap: 1rem;
}

.gravity-footer-social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gravity-bg-secondary);
  border-radius: var(--gravity-radius-full);
  color: var(--gravity-text-secondary);
  transition: background-color 0.2s, color 0.2s;
}

.gravity-footer-social-link:hover {
  background: var(--gravity-color-primary);
  color: white;
}

/* Sticky Footer Variant */
.gravity-footer-sticky {
  position: sticky;
  bottom: 0;
}

/* ================================
 * LAYOUT SYSTEM
 * Full-page layout orchestration
 * ================================ */

/* Main Layout Container */
.gravity-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gravity-bg-base, #fafafa);
}

/* Layout Body (Sidebar + Main Content) */
.gravity-layout-body {
  display: flex;
  flex: 1;
  position: relative;
  min-height: calc(100vh - var(--gravity-header-height, 70px));
}

/* Fixed Header Adjustment */
.gravity-layout-fixed-header .gravity-layout-body {
  padding-top: var(--gravity-header-height, 70px);
}

/* Main Content Area */
.gravity-layout-main {
  flex: 1;
  overflow-x: hidden;
  min-width: 0; /* Allow flexbox to shrink properly */
}

/* Content Padding */
.gravity-layout-content {
  padding: 2rem;
}

/* Sidebar Positioning in Layout */
.gravity-layout-sidebar-left .gravity-sidebar {
  order: -1; /* Ensure sidebar comes before main content */
}

.gravity-layout-sidebar-right .gravity-sidebar {
  order: 1; /* Ensure sidebar comes after main content */
}

/* ================================
 * RESPONSIVE BEHAVIOR
 * Mobile and tablet adjustments
 * ================================ */

@media (max-width: 768px) {
  /* Header Mobile Adjustments */
  .gravity-header-container {
    padding: 0 1rem;
  }
  
  .gravity-header-center {
    flex: 0;
  }
  
  /* Sidebar Mobile Behavior */
  .gravity-sidebar-panel {
    width: 280px;
    position: fixed !important;
    top: var(--gravity-header-height, 70px);
    z-index: 999;
    height: calc(100vh - var(--gravity-header-height, 70px));
  }
  
  .gravity-sidebar-left .gravity-sidebar-panel.closed {
    transform: translateX(-100%);
    margin-left: 0;
    width: 280px;
  }
  
  .gravity-sidebar-right .gravity-sidebar-panel.closed {
    transform: translateX(100%);
    margin-right: 0;
    width: 280px;
  }
  
  /* Footer Mobile Adjustments */
  .gravity-footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .gravity-footer-columns {
    grid-template-columns: 1fr;
  }
  
  /* Layout Content Mobile Padding */
  .gravity-layout-content {
    padding: 1rem;
  }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .gravity-sidebar-panel {
    width: 220px;
  }
  
  .gravity-footer-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================
 * ACCESSIBILITY FEATURES
 * Keyboard navigation and screen reader support
 * ================================ */

/* Focus Visible States */
.gravity-nav-item:focus-visible,
.gravity-header-user-button:focus-visible,
.gravity-menu-toggle:focus-visible,
.gravity-sidebar-close:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Skip to Content Link */
.gravity-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gravity-color-primary);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 10000;
  border-radius: var(--gravity-radius-md);
}

.gravity-skip-link:focus {
  top: 0.5rem;
  left: 0.5rem;
}

/* ================================
 * DARK MODE SUPPORT
 * Automatic dark mode adjustments
 * ================================ */

[data-theme="dark"] .gravity-header,
[data-theme="dark"] .gravity-sidebar-panel {
  background: var(--gravity-bg-dark);
  border-color: var(--gravity-border-dark);
}

[data-theme="dark"] .gravity-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .gravity-nav-item-active,
[data-theme="dark"] .gravity-nav-item.active {
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.2);
}

[data-theme="dark"] .gravity-footer {
  background: var(--gravity-bg-dark);
  border-color: var(--gravity-border-dark);
}

/* ================================
 * NAVY THEME SUPPORT
 * Pearson-style dark navy header theme
 * ================================ */

.gravity-header-navy {
  background: var(--gravity-primary-navy, #1B365D) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gravity-header-navy .gravity-header-title,
.gravity-header-navy .gravity-header-username,
.gravity-header-navy .gravity-header-signin,
.gravity-header-navy .gravity-header-signup,
.gravity-header-navy .gravity-header-signout-link {
  color: white;
}

.gravity-header-navy .gravity-header-user-button {
  color: white;
}

.gravity-header-navy .gravity-header-user-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.gravity-header-navy .gravity-header-menu-item {
  color: var(--gravity-text-primary);
}

.gravity-header-navy .gravity-header-separator {
  color: rgba(255, 255, 255, 0.6);
}

.gravity-header-navy .gravity-icon {
  background-color: white !important;
}

.gravity-header-navy .gravity-header-signin .gravity-icon,
.gravity-header-navy .gravity-header-user-button .gravity-icon,
.gravity-header-navy .gravity-header-dropdown-icon {
  background-color: white !important;
}

.gravity-header-navy .gravity-menu-toggle-bar {
  background-color: white;
}

/* ================================
 * ANIMATION UTILITIES
 * Smooth transitions and animations
 * ================================ */

/* Slide In/Out Animations */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Apply Animations */
.gravity-sidebar-panel.animating {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

.gravity-sidebar-left .gravity-sidebar-panel.opening {
  animation-name: slideInLeft;
}

.gravity-sidebar-left .gravity-sidebar-panel.closing {
  animation-name: slideOutLeft;
}

.gravity-sidebar-right .gravity-sidebar-panel.opening {
  animation-name: slideInRight;
}

.gravity-sidebar-right .gravity-sidebar-panel.closing {
  animation-name: slideOutRight;
}

/* ========================================
 * components/number-input.css
 * ======================================== */

/*
 * Gravity UI Number Input Component
 *
 * Number input with increment/decrement controls and prefix/suffix support
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * NUMBER INPUT STYLES
 * ================================ */

.gravity-number-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.gravity-number-input {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background: white;
}

.gravity-number-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Hide spinner buttons for number inputs */
.gravity-number-input[type="number"]::-webkit-inner-spin-button,
.gravity-number-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gravity-number-input[type="number"] {
  -moz-appearance: textfield;
}

.gravity-number-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #374151;
}

.gravity-number-button:hover:not(:disabled) {
  background: #e5e7eb;
}

.gravity-number-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-number-button-group {
  display: flex;
  flex-direction: column;
  margin-left: -1px;
}

.gravity-number-button-group .gravity-number-button {
  border-radius: 0;
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
}

.gravity-number-button-group .gravity-number-button:first-child {
  border-top-right-radius: 0.375rem;
}

.gravity-number-button-group .gravity-number-button:last-child {
  border-bottom-right-radius: 0.375rem;
  margin-top: -1px;
}

.gravity-number-button-decrement {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right: none;
}

.gravity-number-input-with-buttons .gravity-number-input {
  border-radius: 0;
}

.gravity-number-prefix,
.gravity-number-suffix {
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  color: #6b7280;
}

.gravity-number-prefix {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  border-right: none;
}

.gravity-number-suffix {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border-left: none;
}

.gravity-number-loading {
  position: absolute;
  right: 0.75rem;
  color: #6b7280;
}

/* Dark mode support for number input */
@media (prefers-color-scheme: dark) {
  .gravity-number-input {
    background: #1f2937;
    color: #f3f4f6;
    border-color: #4b5563;
  }

  .gravity-number-button {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
}

/* ========================================
 * components/overlay.css
 * ======================================== */

/* =============================================================================
   GRAVITY OVERLAY
   Atomic component for modal/loading overlays
   ============================================================================= */

.gravity-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gravity-z-index-overlay, 40);
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.15s ease;
}

.gravity-overlay--centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
 * components/page-section.css
 * ======================================== */

/* ============================================
   PageSection Component
   ============================================

   Semantic component for collapsible page sections with:
   - Collapsible/expandable behavior (details/summary)
   - Section icons and titles
   - Action buttons in header
   - Loading states with spinner
   - Empty states with message/icon
   - Density variants (Compact, Comfortable, Spacious)

   Foundation component for DetailPageLayout pattern.
   ============================================ */

/* Base Section Container */
.gravity-page-section {
  background: var(--color-background-primary, #ffffff);
  border: 1px solid var(--color-border-primary, #e5e7eb);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.gravity-page-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Non-collapsible variant */
.gravity-page-section--non-collapsible {
  /* Same styling as base, just no details/summary behavior */
}

/* Section Header */
.gravity-page-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4, 16px) var(--spacing-6, 24px);
  background: var(--color-background-secondary, #f9fafb);
  border-bottom: 1px solid var(--color-border-primary, #e5e7eb);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

details.gravity-page-section summary.gravity-page-section__header {
  list-style: none; /* Remove default disclosure triangle */
}

details.gravity-page-section summary.gravity-page-section__header::-webkit-details-marker {
  display: none; /* Remove webkit default marker */
}

details.gravity-page-section summary.gravity-page-section__header:hover {
  background: var(--color-background-tertiary, #f3f4f6);
}

.gravity-page-section--non-collapsible .gravity-page-section__header {
  cursor: default;
}

.gravity-page-section--non-collapsible .gravity-page-section__header:hover {
  background: var(--color-background-secondary, #f9fafb);
}

/* Header Content (icon + title) */
.gravity-page-section__header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-3, 12px);
  flex: 1;
}

.gravity-page-section__icon {
  font-size: 20px;
  color: var(--color-text-secondary, #6b7280);
  flex-shrink: 0;
}

.gravity-page-section__title {
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #111827);
  margin: 0;
  line-height: 1.4;
}

/* Section Actions (buttons in header) */
.gravity-page-section__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 8px);
  margin-left: var(--spacing-4, 16px);
}

/* Chevron (collapse indicator) */
.gravity-page-section__chevron {
  font-size: 16px;
  color: var(--color-text-tertiary, #9ca3af);
  margin-left: var(--spacing-2, 8px);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

details[open].gravity-page-section .gravity-page-section__chevron {
  transform: rotate(180deg);
}

.gravity-page-section--non-collapsible .gravity-page-section__chevron {
  display: none;
}

/* Section Content */
.gravity-page-section__content {
  padding: var(--spacing-6, 24px);
}

/* Loading State */
.gravity-page-section__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12, 48px) 0;
  gap: var(--spacing-4, 16px);
}

.gravity-page-section__loading-text {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary, #6b7280);
  margin: 0;
}

/* Empty State */
.gravity-page-section__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12, 48px) 0;
  gap: var(--spacing-3, 12px);
}

.gravity-page-section__empty-icon {
  font-size: 48px;
  color: var(--color-text-tertiary, #9ca3af);
  opacity: 0.5;
}

.gravity-page-section__empty-text {
  font-size: var(--font-size-base, 16px);
  color: var(--color-text-secondary, #6b7280);
  margin: 0;
  text-align: center;
}

/* ============================================
   Density Variants
   ============================================ */

/* Compact - Minimal spacing */
.gravity-page-section--compact .gravity-page-section__header {
  padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
}

.gravity-page-section--compact .gravity-page-section__content {
  padding: var(--spacing-4, 16px);
}

.gravity-page-section--compact .gravity-page-section__title {
  font-size: var(--font-size-base, 16px);
}

.gravity-page-section--compact .gravity-page-section__icon {
  font-size: 18px;
}

.gravity-page-section--compact .gravity-page-section__loading,
.gravity-page-section--compact .gravity-page-section__empty {
  padding: var(--spacing-8, 32px) 0;
}

/* Comfortable - Default spacing (already defined in base) */

/* Spacious - Maximum spacing */
.gravity-page-section--spacious .gravity-page-section__header {
  padding: var(--spacing-6, 24px) var(--spacing-8, 32px);
}

.gravity-page-section--spacious .gravity-page-section__content {
  padding: var(--spacing-8, 32px);
}

.gravity-page-section--spacious .gravity-page-section__title {
  font-size: var(--font-size-xl, 20px);
}

.gravity-page-section--spacious .gravity-page-section__icon {
  font-size: 24px;
}

.gravity-page-section--spacious .gravity-page-section__loading,
.gravity-page-section--spacious .gravity-page-section__empty {
  padding: var(--spacing-16, 64px) 0;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Mobile: Reduce padding */
@media (max-width: 640px) {
  .gravity-page-section__header {
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
  }

  .gravity-page-section__content {
    padding: var(--spacing-4, 16px);
  }

  .gravity-page-section__title {
    font-size: var(--font-size-base, 16px);
  }

  .gravity-page-section__actions {
    gap: var(--spacing-1, 4px);
  }

  /* Hide action button text on mobile, show only icons */
  .gravity-page-section__actions .gravity-button__text {
    display: none;
  }

  .gravity-page-section--spacious .gravity-page-section__header {
    padding: var(--spacing-4, 16px) var(--spacing-6, 24px);
  }

  .gravity-page-section--spacious .gravity-page-section__content {
    padding: var(--spacing-6, 24px);
  }
}

/* Print: Expand all sections, remove interactions */
@media print {
  details.gravity-page-section {
    display: block;
  }

  details.gravity-page-section summary.gravity-page-section__header {
    cursor: default;
  }

  .gravity-page-section__chevron {
    display: none;
  }

  .gravity-page-section__actions {
    display: none;
  }
}

/* ========================================
 * components/progress-controls.css
 * ======================================== */

/* ==========================================
 * GRAVITY UI - PROGRESS CONTROLS COMPONENT
 * ==========================================
 * Progress bar, time display, and seek functionality
 * Supports click-to-seek and hover interactions
 */

/* ====================================
 * PROGRESS CONTAINER
 * ==================================== */

.gravity-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-1);
  cursor: pointer;
  min-width: 0; /* Prevent flex overflow */
}

.gravity-progress-container:focus-visible {
  outline: none;
  border-radius: var(--gravity-border-radius-sm);
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
}

/* ====================================
 * PROGRESS BAR
 * ==================================== */

.gravity-progress-bar {
  position: relative;
  height: 6px;
  background: var(--gravity-bg-tertiary);
  border-radius: var(--gravity-border-radius-full);
  overflow: hidden;
  transition: height 0.2s ease;
}

.gravity-progress-container:hover .gravity-progress-bar {
  height: 8px;
}

/* Progress fill (indicates played portion) */
.gravity-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--gravity-color-primary);
  border-radius: var(--gravity-border-radius-full);
  transition: width 0.1s linear;
  min-width: 2px; /* Minimum visible width */
}

/* Buffered/loaded progress (optional) */
.gravity-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--gravity-color-muted);
  border-radius: var(--gravity-border-radius-full);
  opacity: 0.5;
  transition: width 0.3s ease;
}

/* ====================================
 * PROGRESS HANDLE (SCRUB INDICATOR)
 * ==================================== */

.gravity-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /* Visual */
  width: 14px;
  height: 14px;
  background: var(--gravity-color-primary);
  border: 2px solid var(--gravity-bg-primary);
  border-radius: 50%;
  box-shadow: var(--gravity-shadow-small);
  
  /* Interaction */
  cursor: grab;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.1s ease;
  z-index: 1;
}

.gravity-progress-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.1);
}

.gravity-progress-container:hover .gravity-progress-handle {
  opacity: 1;
}

.gravity-progress-container:focus .gravity-progress-handle,
.gravity-progress-container:focus-visible .gravity-progress-handle {
  opacity: 1;
}

/* ====================================
 * TIME DISPLAY
 * ==================================== */

.gravity-time-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.gravity-time-current,
.gravity-time-duration {
  min-width: 32px; /* Prevent layout shift */
  text-align: center;
}

.gravity-time-separator {
  color: var(--gravity-text-tertiary);
  margin: 0 var(--gravity-space-1);
}

/* Optional time remaining display */
.gravity-time-remaining {
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-text-tertiary);
}

/* ====================================
 * PROGRESS VARIANTS
 * ==================================== */

/* Compact variant - smaller height and handle */
.gravity-progress-container[data-size="compact"] .gravity-progress-bar {
  height: 4px;
}

.gravity-progress-container[data-size="compact"]:hover .gravity-progress-bar {
  height: 6px;
}

.gravity-progress-container[data-size="compact"] .gravity-progress-handle {
  width: 12px;
  height: 12px;
}

.gravity-progress-container[data-size="compact"] .gravity-time-display {
  font-size: var(--gravity-font-size-2xs);
}

/* Large variant - bigger for touch interfaces */
.gravity-progress-container[data-size="large"] .gravity-progress-bar {
  height: 8px;
}

.gravity-progress-container[data-size="large"]:hover .gravity-progress-bar {
  height: 10px;
}

.gravity-progress-container[data-size="large"] .gravity-progress-handle {
  width: 16px;
  height: 16px;
}

/* ====================================
 * STATE VARIANTS
 * ==================================== */

.gravity-progress-container[data-state="loading"] {
  pointer-events: none;
}

.gravity-progress-container[data-state="loading"] .gravity-progress-bar {
  background: var(--gravity-bg-muted);
}

.gravity-progress-container[data-state="loading"] .gravity-progress-fill {
  background: var(--gravity-color-muted);
  animation: gravity-progress-loading 1.5s ease-in-out infinite;
}

@keyframes gravity-progress-loading {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

.gravity-progress-container[data-state="error"] .gravity-progress-bar {
  background: var(--gravity-bg-error-subtle);
}

.gravity-progress-container[data-state="error"] .gravity-progress-fill {
  background: var(--gravity-color-error);
}

.gravity-progress-container[data-state="disabled"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ====================================
 * SEEK PREVIEW (HOVER TOOLTIP)
 * ==================================== */

.gravity-seek-preview {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: var(--gravity-space-2);
  
  /* Visual */
  background: var(--gravity-bg-overlay);
  color: var(--gravity-text-inverse);
  padding: var(--gravity-space-1) var(--gravity-space-2);
  border-radius: var(--gravity-border-radius-sm);
  font-size: var(--gravity-font-size-xs);
  font-variant-numeric: tabular-nums;
  
  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: var(--gravity-z-tooltip);
}

.gravity-seek-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gravity-bg-overlay);
}

.gravity-progress-container:hover .gravity-seek-preview {
  opacity: 1;
}

/* ====================================
 * ACCESSIBILITY
 * ==================================== */

.gravity-progress-container[aria-label] {
  /* Screenreader support for progress information */
}

.gravity-progress-container[role="slider"] {
  /* ARIA slider role for keyboard navigation */
}

/* Keyboard navigation focus */
.gravity-progress-container:focus-visible .gravity-progress-bar {
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
}

/* ====================================
 * RESPONSIVE DESIGN
 * ==================================== */

/* Tablet */
@media (max-width: 768px) {
  .gravity-progress-bar {
    height: 8px; /* Larger touch target */
  }
  
  .gravity-progress-container:hover .gravity-progress-bar {
    height: 10px;
  }
  
  .gravity-progress-handle {
    width: 16px;
    height: 16px;
    opacity: 1; /* Always visible on touch */
  }
  
  .gravity-time-display {
    font-size: var(--gravity-font-size-xs);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .gravity-progress-container {
    gap: var(--gravity-space-0-5);
  }
  
  .gravity-progress-bar {
    height: 10px; /* Even larger for mobile */
  }
  
  .gravity-progress-handle {
    width: 18px;
    height: 18px;
  }
  
  .gravity-time-display {
    font-size: var(--gravity-font-size-2xs);
  }
  
  /* Hide separator on very small screens */
  .gravity-time-separator {
    display: none;
  }
  
  /* Stack time display vertically if needed */
  .gravity-time-display[data-layout="stacked"] {
    flex-direction: column;
    gap: 2px;
  }
}

/* ====================================
 * THEME SUPPORT
 * ==================================== */

[data-theme="dark"] .gravity-progress-bar {
  background: var(--gravity-bg-tertiary);
}

[data-theme="dark"] .gravity-progress-handle {
  border-color: var(--gravity-bg-primary);
  box-shadow: var(--gravity-shadow-dark-small);
}

[data-theme="dark"] .gravity-seek-preview {
  background: var(--gravity-bg-overlay);
  color: var(--gravity-text-inverse);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .gravity-progress-bar {
    border: 1px solid var(--gravity-border-primary);
  }
  
  .gravity-progress-handle {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gravity-progress-fill,
  .gravity-progress-handle,
  .gravity-seek-preview {
    transition: none;
  }
  
  .gravity-progress-container[data-state="loading"] .gravity-progress-fill {
    animation: none;
  }
}

/* ====================================
 * TOUCH OPTIMIZATIONS
 * ==================================== */

@media (pointer: coarse) {
  .gravity-progress-container {
    /* Increase touch target area */
    padding: var(--gravity-space-2) 0;
  }
  
  .gravity-progress-handle {
    /* Always visible on touch devices */
    opacity: 1;
  }
  
  .gravity-seek-preview {
    /* Hide on touch to avoid interference */
    display: none;
  }
}

/* ========================================
 * components/progress.css
 * ======================================== */

/*
 * Gravity UI Progress Indicator System
 * 
 * Complete progress indication implementation with multiple variants:
 * - Linear Progress: Track and fill with striped pattern and indeterminate animation
 * - Circular Progress: SVG-based circular progress indicators
 * - Steps Progress: Wizard-style step indicators with connectors
 * - Sizes: Small (0.25rem), Medium (0.5rem), Large (1rem)
 * - Colors: Primary, Success, Warning, Danger variants
 * - Labels: Top, bottom, inside, and center positioning
 * - Dark Mode: Automatic color adaptation for dark themes
 */

/* ================================
 * BASE PROGRESS CONTAINER
 * ================================ */

.gravity-progress {
  position: relative;
  width: 100%;
}

/* ================================
 * SIZE VARIANTS
 * ================================ */

.gravity-progress-small { --progress-height: 0.25rem; }
.gravity-progress-medium { --progress-height: 0.5rem; }
.gravity-progress-large { --progress-height: 1rem; }

/* ================================
 * LINEAR PROGRESS
 * ================================ */

.gravity-progress-linear .gravity-progress-container {
  position: relative;
  width: 100%;
  height: var(--progress-height);
}

.gravity-progress-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--gravity-bg-muted);
  border-radius: 9999px;
  overflow: hidden;
}

.gravity-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--gravity-brand-primary);
  border-radius: 9999px;
  transition: width var(--gravity-transition-normal);
}

/* ================================
 * STRIPED PATTERN
 * ================================ */

.gravity-progress-stripes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 1rem 0; }
}

/* ================================
 * INDETERMINATE ANIMATION
 * ================================ */

.gravity-progress-indeterminate .gravity-progress-fill {
  width: 30% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* ================================
 * CIRCULAR PROGRESS
 * ================================ */

.gravity-progress-circular {
  position: relative;
  display: inline-block;
}

.gravity-progress-circular .gravity-progress-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.gravity-progress-small.gravity-progress-circular .gravity-progress-container {
  width: 40px;
  height: 40px;
}

.gravity-progress-large.gravity-progress-circular .gravity-progress-container {
  width: 150px;
  height: 150px;
}

.gravity-progress-circular-track {
  stroke: var(--gravity-bg-muted);
}

.gravity-progress-circular-fill {
  stroke: var(--gravity-brand-primary);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--gravity-transition-normal);
}

.gravity-progress-circular svg {
  width: 100%;
  height: 100%;
}

/* ================================
 * STEPS PROGRESS
 * ================================ */

.gravity-progress-steps {
  display: flex;
  align-items: center;
  width: 100%;
}

.gravity-progress-step {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gravity-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--gravity-transition-normal);
  flex-shrink: 0;
}

.gravity-progress-step-completed {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

.gravity-progress-step-active {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
  box-shadow: var(--gravity-focus-ring-shadow);
}

.gravity-progress-step-number {
  font-size: 0.75rem;
  font-weight: 600;
}

.gravity-progress-step-connector {
  flex: 1;
  height: 2px;
  background: var(--gravity-bg-muted);
  margin: 0 0.5rem;
}

.gravity-progress-step-connector-completed {
  background: var(--gravity-brand-primary);
}

/* ================================
 * LABELS
 * ================================ */

.gravity-progress-label {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
  font-weight: 500;
}

.gravity-progress-label-top {
  margin-bottom: 0.5rem;
}

.gravity-progress-label-bottom {
  margin-top: 0.5rem;
}

.gravity-progress-label-inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gravity-color-white);
  font-size: 0.75rem;
  white-space: nowrap;
}

.gravity-progress-label-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gravity-text-primary);
}

/* ================================
 * HELPER TEXT
 * ================================ */

.gravity-progress-helper {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gravity-text-muted);
}

/* ================================
 * COLOR VARIANTS
 * ================================ */

.gravity-progress-primary .gravity-progress-fill,
.gravity-progress-primary .gravity-progress-circular-fill,
.gravity-progress-primary .gravity-progress-step-completed {
  background: var(--gravity-brand-primary);
  stroke: var(--gravity-brand-primary);
}

.gravity-progress-success .gravity-progress-fill,
.gravity-progress-success .gravity-progress-circular-fill,
.gravity-progress-success .gravity-progress-step-completed {
  background: var(--gravity-state-success);
  stroke: var(--gravity-state-success);
}

.gravity-progress-warning .gravity-progress-fill,
.gravity-progress-warning .gravity-progress-circular-fill,
.gravity-progress-warning .gravity-progress-step-completed {
  background: var(--gravity-state-warning);
  stroke: var(--gravity-state-warning);
}

.gravity-progress-danger .gravity-progress-fill,
.gravity-progress-danger .gravity-progress-circular-fill,
.gravity-progress-danger .gravity-progress-step-completed {
  background: var(--gravity-state-error);
  stroke: var(--gravity-state-error);
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-progress-track,
  :root:not([data-theme]) .gravity-progress-circular-track {
    background: var(--gravity-bg-muted);
    stroke: var(--gravity-bg-muted);
  }

  :root:not([data-theme]) .gravity-progress-step {
    background: var(--gravity-bg-muted);
  }

  :root:not([data-theme]) .gravity-progress-step-connector {
    background: var(--gravity-bg-muted);
  }

  :root:not([data-theme]) .gravity-progress-label {
    color: var(--gravity-text-secondary);
  }

  :root:not([data-theme]) .gravity-progress-label-center {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-progress-helper {
    color: var(--gravity-text-muted);
  }
}

/* ========================================
 * components/questions/drag-drop.css
 * ======================================== */

/* DRAG DROP COMPONENT STYLES
   =========================================== */

.gravity-drag-drop {
    margin: 16px 0;
}

.gravity-dragdrop-container {
    width: 100%;
    outline: none;
}

.gravity-dragdrop-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 400px;
}

.gravity-answers-panel,
.gravity-options-panel {
    border: 2px solid var(--gravity-border-primary);
    border-radius: 12px;
    padding: 16px;
    background: var(--gravity-bg-primary);
}

.gravity-panel-header h4 {
    margin: 0 0 8px 0;
    color: var(--gravity-text-primary);
    font-size: 18px;
    font-weight: 600;
}

.gravity-panel-header p {
    margin: 0 0 16px 0;
    color: var(--gravity-text-primary-secondary);
    font-size: 14px;
}

.gravity-answers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gravity-options-grid {
    display: grid;
    gap: 12px;
}

/* Draggable Answer Styles */
.gravity-draggable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 8px;
    background: var(--gravity-bg-primary);
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.gravity-draggable:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 2px 8px var(--gravity-color-black);
}

.gravity-draggable.gravity-drag-selected {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-alpha);
    box-shadow: 0 0 0 3px var(--gravity-brand-primary-alpha);
}

.gravity-draggable.gravity-dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: rotate(5deg);
}

/* Default Variant Draggable Item (used by GravityDraggableItem) */
.gravity-draggable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 8px;
    background: var(--gravity-bg-primary);
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.gravity-draggable-item:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 2px 8px var(--gravity-color-black);
}

.gravity-draggable-item.gravity-drag-selected {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-alpha);
    box-shadow: 0 0 0 3px var(--gravity-brand-primary-alpha);
}

.gravity-draggable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: rotate(5deg);
}

.gravity-draggable-item.gravity-draggable-placed {
    background: var(--gravity-state-success-alpha);
    border-color: var(--gravity-state-success);
    cursor: default;
}

.gravity-draggable-item.gravity-draggable-placed:hover {
    transform: none;
    box-shadow: none;
}

.gravity-answer-text {
    flex: 1;
    line-height: 1.4;
}

.gravity-drag-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 2px solid var(--gravity-border-primary-muted);
    border-radius: 8px;
    background: var(--gravity-bg-primary-variant);
    color: var(--gravity-text-primary-secondary);
    font-size: 14px;
}

.gravity-answer-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gravity-brand-primary);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.gravity-clear-button {
    background: var(--gravity-state-error);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.gravity-clear-button:hover {
    background: var(--gravity-state-error-dark);
    transform: scale(1.1);
}

/* Drop Zone Styles */
.gravity-drop-zone {
    width: 100%;
    border: 2px dashed var(--gravity-border-primary);
    border-radius: 8px;
    padding: 12px;
    background: var(--gravity-bg-primary);
    transition: all 0.2s ease;
    min-height: 80px;
    box-sizing: border-box;
}

.gravity-drop-zone-empty {
    border-style: dashed;
    background: var(--gravity-bg-primary);
}

.gravity-drop-zone-filled {
    border-style: solid;
    border-color: var(--gravity-state-success);
    background: var(--gravity-state-success-alpha);
}

.gravity-drop-zone-hover,
.gravity-drop-zone.drag-over {
    border-color: var(--gravity-brand-primary) !important;
    background: var(--gravity-brand-primary-alpha) !important;
    /* Keep dashed style, just darker color */
}

/* Compact variant for single-item slots (e.g., sequence questions) */
.gravity-drop-zone-compact {
    min-height: auto;
    padding: 8px 12px;
}

.gravity-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gravity-border-primary);
}

.gravity-option-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gravity-brand-secondary);
    color: white;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.gravity-option-content {
    flex: 1;
    font-weight: 500;
    color: var(--gravity-text-primary);
}

.gravity-drop-area {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gravity-drop-placeholder {
    color: var(--gravity-text-primary-secondary);
    font-style: italic;
    font-size: 13px;
}

.gravity-dropped-answer {
    width: 100%;
}

/* Ghost Element for Drag */
.gravity-drag-ghost {
    pointer-events: none;
    z-index: 9999;
    opacity: 0.8;
    box-shadow: 0 8px 32px var(--gravity-color-black);
}

/* ===========================================
   CLOZE DROP ZONE STYLES
   Inline drop zones for fill-in-the-blank style questions
   =========================================== */

.gravity-cloze-drop-zone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    min-height: 36px;
    padding: 4px 12px;
    border: 2px dashed var(--gravity-border-primary);
    border-radius: 6px;
    background: var(--gravity-bg-secondary);
    vertical-align: middle;
    transition: all 0.2s ease;
}

.gravity-cloze-drop-zone:empty::after,
.gravity-cloze-drop-zone:not(:has(.gravity-draggable-answer))::after {
    content: '';
    display: inline-block;
    min-width: 60px;
}

/* Drag-over state (JavaScript adds .drag-over class during drag operations) */
.gravity-cloze-drop-zone.drag-over {
    border-color: var(--gravity-brand-primary);
    border-style: solid;
    background: var(--gravity-brand-primary-alpha);
}

/* When answer is placed */
.gravity-cloze-drop-zone.filled,
.gravity-cloze-drop-zone:has(.gravity-draggable-answer) {
    border-style: solid;
    border-color: var(--gravity-state-success);
    background: var(--gravity-state-success-alpha);
    min-width: auto;
}

/* Answer Reset Button (Default variant - transparent style) */
.gravity-answer-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--gravity-border-radius-sm);
    color: var(--gravity-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.gravity-answer-reset:hover {
    color: var(--gravity-state-error);
    background: var(--gravity-state-error-alpha);
}

.gravity-answer-reset .gravity-icon {
    font-size: 14px;
}

/* Responsive Design for Drag Drop */
@media (max-width: 768px) {
    .gravity-dragdrop-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .gravity-answers-panel,
    .gravity-options-panel {
        padding: 12px;
    }
    
    .gravity-draggable,
    .gravity-drag-disabled {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .gravity-drop-zone {
        min-height: 60px;
        padding: 8px;
    }
}

/* ========================================
 * components/questions/fill-blank.css
 * ======================================== */

/* ===========================================
   FILL IN THE BLANK COMPONENT STYLES
   =========================================== */

.gravity-fill-blank {
    margin: 16px 0;
}

.gravity-fill-blank-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
}

.gravity-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.gravity-text-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--gravity-font-family-primary);
    background: var(--gravity-bg-primary);
    color: var(--gravity-text-primary);
    transition: all 0.2s ease;
    outline: none;
}

.gravity-text-input:focus {
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 0 0 3px var(--gravity-brand-primary-alpha);
}

.gravity-text-input.gravity-input-focused {
    border-color: var(--gravity-brand-primary);
}

.gravity-input-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gravity-brand-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
    border-radius: 0 0 8px 8px;
}

.gravity-input-underline.gravity-underline-active {
    transform: scaleX(1);
}

.gravity-answer-preview {
    padding: 12px 16px;
    background: var(--gravity-bg-primary-variant);
    border: 1px solid var(--gravity-border-primary);
    border-radius: 8px;
    font-size: 14px;
}

.gravity-preview-label {
    font-weight: 600;
    color: var(--gravity-text-primary-secondary);
    margin-right: 8px;
}

.gravity-preview-text {
    color: var(--gravity-text-primary);
    font-family: monospace;
    background: var(--gravity-bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--gravity-border-primary);
}

.gravity-loading {
    padding: 24px;
    text-align: center;
    color: var(--gravity-text-primary-secondary);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gravity-fill-blank-container {
        max-width: 100%;
    }
    
    .gravity-text-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 10px 14px;
    }
}

/* ========================================
 * components/questions/matrix.css
 * ======================================== */

/* ===========================================
   MULTIPLE ANSWER SELECT N COMPONENT STYLES
   =========================================== */

.gravity-multiple-answer-select-n {
    margin: 16px 0;
}

.gravity-options-matrix-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gravity-matrix-instructions {
    padding: 12px 16px;
    background: var(--gravity-bg-primary-variant);
    border: 1px solid var(--gravity-border-primary);
    border-radius: 8px;
}

.gravity-instruction-text {
    margin: 0;
    color: var(--gravity-text-primary);
    font-size: 14px;
    line-height: 1.4;
}

.gravity-matrix-table-container {
    overflow-x: auto;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 12px;
    background: var(--gravity-bg-primary);
}

.gravity-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.gravity-matrix-table th,
.gravity-matrix-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--gravity-border-primary);
    border-right: 1px solid var(--gravity-border-primary);
    background: var(--gravity-bg-primary);
}

.gravity-matrix-table th:last-child,
.gravity-matrix-table td:last-child {
    border-right: none;
}

.gravity-matrix-table tbody tr:last-child th,
.gravity-matrix-table tbody tr:last-child td {
    border-bottom: none;
}

.gravity-matrix-corner {
    background: var(--gravity-bg-primary-variant);
    border-right: 2px solid var(--gravity-border-primary);
    border-bottom: 2px solid var(--gravity-border-primary);
}

.gravity-matrix-header {
    background: var(--gravity-bg-primary-variant);
    border-bottom: 2px solid var(--gravity-border-primary);
    font-weight: 600;
    color: var(--gravity-text-primary);
}

.gravity-option-content {
    line-height: 1.3;
    font-size: 13px;
}

.gravity-matrix-row {
    transition: all 0.2s ease;
}

.gravity-matrix-row:hover {
    background: var(--gravity-brand-primary-alpha);
}

.gravity-matrix-row-header {
    background: var(--gravity-bg-primary-variant);
    border-right: 2px solid var(--gravity-border-primary);
    text-align: left;
    font-weight: 500;
    min-width: 200px;
}

.gravity-matrix-cell {
    background: var(--gravity-bg-primary);
    transition: all 0.2s ease;
    position: relative;
}

.gravity-matrix-cell:hover {
    background: var(--gravity-brand-primary-alpha);
}

.gravity-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.gravity-matrix-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gravity-checkbox-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gravity-checkbox-custom {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 6px;
    background: var(--gravity-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.gravity-checkbox-custom:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 0 0 2px var(--gravity-brand-primary-alpha);
}

.gravity-checkbox-custom.gravity-checkbox-checked {
    background: var(--gravity-brand-primary);
    border-color: var(--gravity-brand-primary);
    color: white;
}

.gravity-check-icon {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

/* Selection Summary */
.gravity-selection-summary {
    padding: 16px;
    background: var(--gravity-bg-primary-variant);
    border: 1px solid var(--gravity-border-primary);
    border-radius: 8px;
    margin-top: 16px;
}

.gravity-selection-summary h5 {
    margin: 0 0 12px 0;
    color: var(--gravity-text-primary);
    font-size: 16px;
    font-weight: 600;
}

.gravity-summary-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gravity-summary-item {
    padding: 8px 12px;
    background: var(--gravity-bg-primary);
    border: 1px solid var(--gravity-border-primary);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
}

.gravity-summary-item strong {
    color: var(--gravity-brand-primary);
}

/* Animation for checked state */
.gravity-checkbox-checked {
    animation: checkboxCheck 0.2s ease-out;
}

@keyframes checkboxCheck {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive Design for Matrix */
@media (max-width: 768px) {
    .gravity-matrix-table th,
    .gravity-matrix-table td {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .gravity-matrix-row-header {
        min-width: 150px;
    }
    
    .gravity-option-content,
    .gravity-answer-content {
        font-size: 12px;
    }
    
    .gravity-checkbox-custom {
        width: 20px;
        height: 20px;
    }
    
    .gravity-check-icon {
        width: 14px;
        height: 14px;
    }
    
    .gravity-selection-summary {
        padding: 12px;
    }
    
    .gravity-summary-item {
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .gravity-matrix-table-container {
        font-size: 12px;
    }
    
    .gravity-matrix-table th,
    .gravity-matrix-table td {
        padding: 6px 8px;
    }
    
    .gravity-matrix-row-header {
        min-width: 120px;
    }
    
    .gravity-checkbox-custom {
        width: 18px;
        height: 18px;
    }
    
    .gravity-check-icon {
        width: 12px;
        height: 12px;
    }
}

/* ========================================
 * components/questions/multiple-choice.css
 * ======================================== */

/* =================================
   ENHANCED QUESTION COMPONENT STYLES
   ================================= */

/* Radio Button Styling for Multiple Choice */
.gravity-radio-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

.gravity-radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
}

.gravity-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 50%;
    background: var(--gravity-bg-primary);
    position: relative;
    transition: all var(--gravity-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gravity-radio-custom:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: var(--gravity-focus-ring-shadow);
}

.gravity-radio-selected {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary);
}

.gravity-radio-dot {
    width: 8px;
    height: 8px;
    background: var(--gravity-color-white);
    border-radius: 50%;
    animation: radioAppear 0.2s ease;
}

/* Enhanced Instruction Banner Styling */
.gravity-banner-freeform {
    background: linear-gradient(135deg, var(--gravity-state-success-light) 0%, var(--gravity-color-green-100, #dcfce7) 100%);
    border-color: var(--gravity-color-green-300, #86efac);
}

.gravity-banner-freeform .gravity-banner-content {
    color: var(--gravity-state-success-dark);
}

.gravity-banner-grouping {
    background: linear-gradient(135deg, var(--gravity-color-purple-50, #fdf4ff) 0%, var(--gravity-color-purple-100, #f3e8ff) 100%);
    border-color: var(--gravity-color-purple-300, #c4b5fd);
}

.gravity-banner-grouping .gravity-banner-content {
    color: var(--gravity-color-purple-600, #7c3aed);
}

.gravity-banner-cloze {
    background: linear-gradient(135deg, var(--gravity-color-orange-50, #fff7ed) 0%, var(--gravity-color-orange-200, #fed7aa) 100%);
    border-color: var(--gravity-color-orange-300, #fdba74);
}

.gravity-banner-cloze .gravity-banner-content {
    color: var(--gravity-state-warning-dark);
}

.gravity-banner-dragdrop {
    background: linear-gradient(135deg, var(--gravity-color-gray-50) 0%, var(--gravity-color-gray-200) 100%);
    border-color: var(--gravity-color-gray-300);
}

.gravity-banner-dragdrop .gravity-banner-content {
    color: var(--gravity-color-gray-600);
}

/* Free Form Text Area Styling */
.gravity-freeform-container {
    margin: 16px 0;
}

.gravity-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: var(--gravity-radius-md);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    background: var(--gravity-bg-primary);
    resize: vertical;
    transition: all var(--gravity-transition-fast);
}

.gravity-textarea:focus {
    outline: none;
    border-color: var(--gravity-brand-primary);
    box-shadow: var(--gravity-focus-ring-shadow);
}

.gravity-textarea-focused {
    border-color: var(--gravity-brand-primary);
    box-shadow: var(--gravity-focus-ring-shadow);
}

/* Grouping Component Grid Layout */
.gravity-grouping-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gravity-grouping-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: start;
    padding: 16px;
    background: var(--gravity-bg-secondary);
    border-radius: var(--gravity-radius-md);
    border: 1px solid var(--gravity-border-primary);
}

.gravity-grouping-label {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-radius-sm);
    border: 1px solid var(--gravity-border-primary);
    font-weight: 500;
}

.gravity-grouping-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Dropdown Cloze Styling */
.gravity-cloze-content {
    line-height: 2;
    font-size: 16px;
    margin-bottom: 20px;
}

.gravity-dropdown-wrapper {
    display: inline-block;
    position: relative;
    margin: 0 4px;
    vertical-align: baseline;
}

.gravity-dropdown-cloze {
    padding: 8px 32px 8px 12px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: var(--gravity-radius-sm);
    background: var(--gravity-bg-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--gravity-transition-fast);
    min-width: 120px;
    appearance: none;
}

.gravity-dropdown-success {
    border-color: var(--gravity-state-success);
    color: var(--gravity-state-success-dark);
    background: var(--gravity-state-success-light);
}

.gravity-dropdown-warning {
    border-color: var(--gravity-state-warning);
    color: var(--gravity-state-warning-dark);
}

/* Drag Drop Cloze Styling */
.gravity-dragdrop-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.gravity-drop-zone {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 4px;
    border: 2px dashed var(--gravity-border-secondary);
    border-radius: var(--gravity-radius-md);
    min-width: 120px;
    min-height: 40px;
    position: relative;
    transition: all var(--gravity-transition-fast);
}

.gravity-answer-bank {
    background: var(--gravity-bg-primary);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-radius-md);
    padding: 16px;
    max-height: 600px;
    overflow-y: auto;
}

.gravity-draggable-answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gravity-bg-primary);
    border: 2px solid var(--gravity-border-primary);
    border-radius: var(--gravity-radius-sm);
    cursor: grab;
    transition: all var(--gravity-transition-fast);
    font-size: 14px;
}

.gravity-draggable-answer:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: var(--gravity-shadow-sm);
}

.gravity-answer-placed {
    background: var(--gravity-state-success-light);
    border-color: var(--gravity-state-success);
}

/* Animations */
@keyframes radioAppear {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .gravity-grouping-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gravity-dragdrop-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gravity-dropdown-cloze {
        min-width: 100px;
        font-size: 13px;
    }
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .gravity-radio-custom {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
    }

    :root:not([data-theme]) .gravity-textarea {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
        color: var(--gravity-text-primary);
    }

    :root:not([data-theme]) .gravity-grouping-row {
        background: var(--gravity-bg-secondary);
        border-color: var(--gravity-border-primary);
    }

    :root:not([data-theme]) .gravity-grouping-label {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
    }

    :root:not([data-theme]) .gravity-dropdown-cloze {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
        color: var(--gravity-text-primary);
    }

    :root:not([data-theme]) .gravity-answer-bank {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
    }

    :root:not([data-theme]) .gravity-draggable-answer {
        background: var(--gravity-bg-primary);
        border-color: var(--gravity-border-primary);
        color: var(--gravity-text-primary);
    }
}

/* ========================================
 * components/questions/order-response.css
 * ======================================== */

/* ===========================================
   ORDER RESPONSE COMPONENT STYLES
   =========================================== */

.gravity-order-response {
    margin: 16px 0;
}

.gravity-order-container {
    width: 100%;
    outline: none;
}

.gravity-order-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 400px;
}

.gravity-sequence-panel {
    border: 2px solid var(--gravity-border-primary);
    border-radius: 12px;
    padding: 16px;
    background: var(--gravity-bg-primary);
}

.gravity-sequence-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
}

.gravity-sequence-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    background: var(--gravity-bg-primary);
    border: 1px solid var(--gravity-border-primary);
    transition: all 0.2s ease;
}

.gravity-sequence-item:hover {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-alpha);
}

.gravity-position-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gravity-brand-secondary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.gravity-ordered-answer {
    flex: 1;
}

.gravity-sequence-connector {
    width: 2px;
    height: 20px;
    background: var(--gravity-border-primary);
    margin: 4px 0;
    border-radius: 1px;
}

.gravity-insert-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 2px dashed var(--gravity-border-primary-muted);
    border-radius: 8px;
    background: var(--gravity-bg-primary-variant);
    transition: all 0.2s ease;
    margin: 4px 0;
}

.gravity-insert-zone:hover,
.gravity-insert-zone.gravity-insert-active {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-alpha);
    border-style: solid;
}

.gravity-insert-indicator {
    color: var(--gravity-text-primary-secondary);
    font-size: 13px;
    font-style: italic;
    padding: 8px 16px;
    text-align: center;
}

.gravity-insert-zone.gravity-insert-active .gravity-insert-indicator {
    color: var(--gravity-brand-primary);
    font-weight: 600;
    font-style: normal;
}

.gravity-empty-sequence {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 2px dashed var(--gravity-border-primary);
    border-radius: 12px;
    background: var(--gravity-bg-primary);
    margin: 16px 0;
}

.gravity-empty-sequence .gravity-insert-indicator {
    font-size: 16px;
    color: var(--gravity-text-primary-secondary);
}

.gravity-empty-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--gravity-text-primary-secondary);
    font-style: italic;
    text-align: center;
    border: 1px dashed var(--gravity-border-primary);
    border-radius: 8px;
    background: var(--gravity-bg-primary-variant);
}

/* Animation for sequence items */
.gravity-sequence-item {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced visual feedback for ordering */
.gravity-insert-zone.gravity-insert-active {
    transform: scaleY(1.2);
    box-shadow: 0 0 0 2px var(--gravity-brand-primary-alpha);
}

.gravity-sequence-item.gravity-reordering {
    transform: scale(0.95);
    opacity: 0.7;
}

/* Responsive Design for Order Response */
@media (max-width: 768px) {
    .gravity-order-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .gravity-sequence-panel {
        padding: 12px;
    }
    
    .gravity-sequence-item {
        padding: 6px;
        gap: 8px;
    }
    
    .gravity-position-indicator {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .gravity-insert-zone {
        min-height: 32px;
        margin: 2px 0;
    }
    
    .gravity-insert-indicator {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ========================================
 * components/questions/question-display.css
 * ======================================== */

/* Question UI Components */
.gravity-question-ui {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

/* Question Number Decorative Lines */
.gravity-question-number-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gravity-border-secondary) 50%, transparent 100%);
}

/* ===========================================
   ANTI-CHEAT WATERMARK OVERLAY
   Applied via data-watermark attribute on GravityStack
   Uses ::after overlay with positive z-index to show THROUGH all content
   =========================================== */

[data-watermark] {
    position: relative;
}

/* Watermark overlay - sits ON TOP of all content but allows interaction */
[data-watermark]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/watermarks/testing-light);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
    z-index: 100; /* High z-index to overlay content */
    pointer-events: none; /* Allow clicks through to controls underneath */
    opacity: 0.35; /* Visible watermark while maintaining readability */
}

:root.theme-light [data-watermark]::after {
    background: url(/watermarks/testing-light);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
}

:root.theme-dark [data-watermark]::after {
    background: url(/watermarks/testing-dark);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
}

/* Legacy class-based watermark selector - uses same overlay approach */
.gravity-question-watermark {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
    position: relative;
}

.gravity-question-watermark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/watermarks/testing-light);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
    z-index: 100;
    pointer-events: none;
    opacity: 0.35;
}

:root.theme-light .gravity-question-watermark::after {
    background: url(/watermarks/testing-light);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
}

:root.theme-dark .gravity-question-watermark::after {
    background: url(/watermarks/testing-dark);
    background-repeat: repeat;
    background-size: 200px 50px;
    background-attachment: local;
}

.gravity-question-text-section {
    flex-shrink: 0;
}

.gravity-question-card-standard,
.gravity-question-card-embedded {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
}

.gravity-question-card-embedded {
    background: rgba(var(--gravity-brand-primary-rgb), 0.05);
    border-color: rgba(var(--gravity-brand-primary-rgb), 0.2);
}

.gravity-question-content {
    color: var(--gravity-text-primary);
    line-height: 1.6;
}

.gravity-question-text {
    font-size: var(--gravity-font-size-lg);
}

/* Question Image */
.gravity-question-image-section {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    background: linear-gradient(135deg, var(--gravity-bg-primary-variant) 0%, var(--gravity-bg-primary) 100%);
    flex-shrink: 0;
}

.gravity-question-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gravity-space-2);
}

.gravity-question-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gravity-question-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--gravity-border-radius-lg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-question-image:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.gravity-question-image-caption {
    text-align: center;
    font-size: var(--gravity-font-size-xs);
    color: var(--gravity-text-primary-variant);
    background: var(--gravity-bg-primary-variant);
    padding: var(--gravity-space-1) var(--gravity-space-2);
    border-radius: var(--gravity-border-radius-full);
}

/* Answer Section */
.gravity-answer-section {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    background: rgba(var(--gravity-bg-primary), 0.7);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gravity-answer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gravity-space-8);
    color: var(--gravity-text-primary-variant);
    text-align: center;
}

/* Multiple Choice Answer Options */
.gravity-answer-options {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-2);
}

.gravity-answer-option {
    position: relative;
}

.gravity-answer-option-label {
    display: flex;
    align-items: flex-start;
    gap: var(--gravity-space-4);
    padding: var(--gravity-space-4);
    border-radius: var(--gravity-border-radius-lg);
    border: 2px solid var(--gravity-border-primary-variant);
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    background: var(--gravity-bg-primary);
}

.gravity-answer-option-label:hover {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-bg-primary-variant);
}

.gravity-answer-option-selected {
    border-color: var(--gravity-brand-primary) !important;
    background: rgba(var(--gravity-brand-primary-rgb), 0.05) !important;
}

/* Radio Button Styling */
.gravity-radio-container {
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
}

.gravity-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gravity-radio-visual {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 50%;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gravity-radio-selected {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary);
}

.gravity-radio-dot {
    width: 8px;
    height: 8px;
    background: var(--gravity-text-inverse);
    border-radius: 50%;
    animation: pulse 0.3s ease-in-out;
}

.gravity-radio-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--gravity-brand-primary);
    opacity: 0;
    pointer-events: none;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-answer-option:active .gravity-radio-ripple {
    opacity: 0.2;
    animation: ping 0.6s ease-out;
}

/* Answer Text */
.gravity-answer-text {
    flex: 1;
    min-width: 0;
}

.gravity-answer-content-selected {
    color: var(--gravity-brand-primary);
    font-weight: var(--gravity-font-weight-medium);
}

/* Answer Selection Indicator */
.gravity-answer-indicator {
    flex-shrink: 0;
    color: var(--gravity-brand-primary);
    opacity: 0.8;
}

.gravity-answer-check {
    font-size: var(--gravity-font-size-sm);
    animation: bounce 0.5s ease-in-out;
}

/* Shimmer Effect */
.gravity-answer-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--gravity-border-radius-lg);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-answer-option:hover .gravity-answer-shimmer {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* ===========================================
   ZOOMABLE IMAGES
   Applied via data-zoomable attribute
   =========================================== */

[data-zoomable] {
    cursor: zoom-in;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
    max-width: 100%;
    height: auto;
    border-radius: var(--gravity-border-radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-zoomable]:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ========================================
 * components/questions/sequence.css
 * ======================================== */

/* ===========================================
   SEQUENCE COMPONENT STYLES
   =========================================== */

.gravity-sequence {
    margin: 16px 0;
}

.gravity-sequence-container {
    width: 100%;
    outline: none;
}

.gravity-sequence-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-height: 400px;
}

.gravity-positions-panel {
    border: 2px solid var(--gravity-border-primary);
    border-radius: 12px;
    padding: 16px;
    background: var(--gravity-bg-primary);
}

.gravity-positions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.gravity-sequence-position {
    border: 2px solid var(--gravity-border-primary);
    border-radius: 12px;
    padding: 12px;
    background: var(--gravity-bg-primary);
    transition: all 0.2s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.gravity-sequence-position.gravity-position-empty {
    border-style: dashed;
    background: var(--gravity-bg-primary-variant);
}

.gravity-sequence-position.gravity-position-filled {
    border-color: var(--gravity-state-success);
    background: var(--gravity-state-success-alpha);
    border-style: solid;
}

.gravity-sequence-position:hover {
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 2px 8px var(--gravity-color-black);
}

.gravity-position-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gravity-border-primary);
}

.gravity-position-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--gravity-brand-secondary);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.gravity-position-label {
    flex: 1;
    font-weight: 500;
    color: var(--gravity-text-primary);
    font-size: 14px;
    line-height: 1.3;
}

.gravity-position-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: 8px;
    border: 1px dashed var(--gravity-border-primary-muted);
    background: var(--gravity-bg-primary);
    transition: all 0.2s ease;
}

.gravity-position-slot:hover {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-alpha);
    border-style: solid;
}

.gravity-position-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    width: 100%;
    height: 100%;
}

.gravity-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gravity-placeholder-text {
    color: var(--gravity-text-primary-secondary);
    font-size: 13px;
    font-style: italic;
    text-align: center;
}

.gravity-placeholder-icon {
    font-size: 20px;
    color: var(--gravity-text-primary-muted);
    opacity: 0.6;
}

.gravity-positioned-answer {
    width: 100%;
}

/* Animation for sequence positions */
.gravity-sequence-position.gravity-position-filled {
    animation: fillPosition 0.3s ease-out;
}

@keyframes fillPosition {
    from {
        transform: scale(0.95);
        background: var(--gravity-bg-primary);
    }
    to {
        transform: scale(1);
        background: var(--gravity-state-success-alpha);
    }
}

/* Enhanced drop feedback */
.gravity-position-slot.gravity-drop-zone-hover {
    border-color: var(--gravity-brand-primary) !important;
    background: var(--gravity-brand-primary-alpha) !important;
    border-style: solid !important;
    transform: scale(1.02);
}

/* Special styling for numbered positions */
.gravity-sequence-position[data-option-key="1"] .gravity-position-number {
    background: var(--gravity-brand-primary);
}

.gravity-sequence-position[data-option-key="2"] .gravity-position-number {
    background: var(--gravity-brand-secondary);
}

.gravity-sequence-position[data-option-key="3"] .gravity-position-number {
    background: var(--gravity-brand-accent);
}

/* Responsive Design for Sequence */
@media (max-width: 768px) {
    .gravity-sequence-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .gravity-positions-panel {
        padding: 12px;
    }
    
    .gravity-positions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .gravity-sequence-position {
        padding: 10px;
        min-height: 100px;
    }
    
    .gravity-position-header {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .gravity-position-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .gravity-position-label {
        font-size: 13px;
    }
    
    .gravity-position-slot {
        min-height: 50px;
    }
    
    .gravity-placeholder-text {
        font-size: 12px;
    }
    
    .gravity-placeholder-icon {
        font-size: 16px;
    }
}

/* ========================================
 * components/questions/specialized.css
 * ======================================== */

/* ===========================================
   QUESTION TYPE SPECIFIC STYLES
   =========================================== */

/* Multiple Answer (Checkboxes) */
.gravity-multiple-answer-container {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-3);
}

.gravity-multiple-answer-option {
    display: flex;
    align-items: center;
    padding: var(--gravity-space-3);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    background: var(--gravity-bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gravity-multiple-answer-option:hover {
    background: var(--gravity-bg-primary-elevated);
    border-color: var(--gravity-brand-primary);
}

.gravity-multiple-answer-option.selected {
    background: var(--gravity-brand-primary-light);
    border-color: var(--gravity-brand-primary);
}

.gravity-multiple-answer-checkbox {
    margin-right: var(--gravity-space-3);
    accent-color: var(--gravity-brand-primary);
}

/* Select N Options */
.gravity-select-n-container {
    position: relative;
}

.gravity-select-n-counter {
    position: absolute;
    top: -10px;
    right: 0;
    background: var(--gravity-state-warning);
    color: var(--gravity-text-primary);
    padding: var(--gravity-space-1) var(--gravity-space-2);
    border-radius: var(--gravity-border-radius-full);
    font-size: var(--gravity-font-size-sm);
    font-weight: var(--gravity-font-weight-bold);
}

/* Options Box (Dropdown) */
.gravity-options-box-container {
    position: relative;
    width: 100%;
}

.gravity-options-box-select {
    width: 100%;
    padding: var(--gravity-space-3);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    background: var(--gravity-bg-primary);
    font-size: var(--gravity-font-size-body);
    color: var(--gravity-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gravity-options-box-select:focus {
    outline: none;
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 0 0 3px var(--gravity-brand-primary-light);
}

/* Matrix Questions */
.gravity-matrix-container {
    overflow-x: auto;
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-4);
}

.gravity-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gravity-font-size-sm);
}

.gravity-matrix-header {
    background: var(--gravity-bg-primary-elevated);
    font-weight: var(--gravity-font-weight-semibold);
}

.gravity-matrix-header th {
    padding: var(--gravity-space-3);
    text-align: center;
    border: 1px solid var(--gravity-border-primary);
}

.gravity-matrix-row td {
    padding: var(--gravity-space-2);
    text-align: center;
    border: 1px solid var(--gravity-border-primary);
    background: var(--gravity-bg-primary);
}

.gravity-matrix-row:nth-child(even) td {
    background: var(--gravity-bg-primary-muted);
}

.gravity-matrix-checkbox {
    accent-color: var(--gravity-brand-primary);
    transform: scale(1.2);
}

/* Drag and Drop */
.gravity-drag-drop-container {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-drag-source {
    background: var(--gravity-bg-primary-elevated);
    border-radius: var(--gravity-border-radius-md);
    padding: var(--gravity-space-4);
}

.gravity-drag-target {
    min-height: 120px;
    border: 2px dashed var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    background: var(--gravity-bg-primary-muted);
    padding: var(--gravity-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-2);
    transition: all 0.3s ease;
}

.gravity-drag-target.drag-over {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary-light);
}

.gravity-draggable-item {
    background: var(--gravity-bg-primary);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    padding: var(--gravity-space-3);
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: var(--gravity-shadow-sm);
}

.gravity-draggable-item:hover {
    box-shadow: var(--gravity-shadow-md);
}

.gravity-draggable-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Grouping Questions */
.gravity-grouping-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gravity-space-4);
}

.gravity-group-zone {
    background: var(--gravity-bg-primary-elevated);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-4);
    min-height: 200px;
}

.gravity-group-title {
    font-weight: var(--gravity-font-weight-semibold);
    color: var(--gravity-brand-primary);
    margin-bottom: var(--gravity-space-3);
    text-align: center;
    padding-bottom: var(--gravity-space-2);
    border-bottom: 2px solid var(--gravity-brand-primary);
}

.gravity-group-items {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-2);
}

/* Sequence Questions */
.gravity-sequence-container {
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-4);
}

.gravity-sequence-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-2);
}

.gravity-sequence-item {
    display: flex;
    align-items: center;
    background: var(--gravity-bg-primary-elevated);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    padding: var(--gravity-space-3);
    cursor: move;
    transition: all 0.2s ease;
}

.gravity-sequence-number {
    background: var(--gravity-brand-primary);
    color: var(--gravity-text-inverse);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gravity-font-weight-bold);
    margin-right: var(--gravity-space-3);
}

/* Fill in the Blank */
.gravity-fill-blank-container {
    line-height: 1.8;
    font-size: var(--gravity-font-size-body);
}

.gravity-blank-input {
    display: inline-block;
    border: none;
    border-bottom: 2px solid var(--gravity-brand-primary);
    background: transparent;
    padding: var(--gravity-space-1) var(--gravity-space-2);
    font-size: inherit;
    color: var(--gravity-text-primary);
    min-width: 120px;
    margin: 0 var(--gravity-space-1);
    transition: all 0.2s ease;
}

.gravity-blank-input:focus {
    outline: none;
    border-bottom-color: var(--gravity-brand-primary-dark);
    background: var(--gravity-brand-primary-light);
}

.gravity-blank-input::placeholder {
    color: var(--gravity-text-primary-placeholder);
    font-style: italic;
}

/* Free Form Text Areas */
.gravity-free-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-3);
}

.gravity-free-form-textarea {
    width: 100%;
    min-height: 200px;
    padding: var(--gravity-space-4);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-md);
    background: var(--gravity-bg-primary);
    font-family: inherit;
    font-size: var(--gravity-font-size-body);
    color: var(--gravity-text-primary);
    line-height: 1.5;
    resize: vertical;
    transition: all 0.2s ease;
}

.gravity-free-form-textarea:focus {
    outline: none;
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 0 0 3px var(--gravity-brand-primary-light);
}

.gravity-character-count {
    text-align: right;
    font-size: var(--gravity-font-size-sm);
    color: var(--gravity-text-primary-secondary);
    margin-top: var(--gravity-space-1);
}

/* Dropdown Cloze */
.gravity-dropdown-cloze-container {
    line-height: 1.8;
    font-size: var(--gravity-font-size-body);
}

.gravity-cloze-dropdown {
    display: inline-block;
    padding: var(--gravity-space-1) var(--gravity-space-2);
    border: 1px solid var(--gravity-brand-primary);
    border-radius: var(--gravity-border-radius-sm);
    background: var(--gravity-bg-primary);
    color: var(--gravity-text-primary);
    font-size: inherit;
    margin: 0 var(--gravity-space-1);
    cursor: pointer;
}

.gravity-cloze-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--gravity-brand-primary-light);
}

/* Container for cloze text with inline dropdowns */
[data-cloze-container] {
    line-height: 2.2;
    font-size: inherit;
}

/* Cloze Select (inline dropdown for fill-in-the-blank) */
.gravity-cloze-select {
    display: inline-block;
    min-width: 140px;
    padding: 4px 12px;
    margin: 0 4px;
    border: 2px dashed var(--gravity-border-primary);
    border-radius: 6px;
    background: var(--gravity-bg-secondary);
    color: var(--gravity-text-primary);
    font-size: inherit;
    font-family: inherit;
    line-height: 1.4;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Remove default appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Add dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.gravity-cloze-select:hover {
    border-color: var(--gravity-brand-primary);
}

.gravity-cloze-select:focus {
    outline: none;
    border-color: var(--gravity-brand-primary);
    box-shadow: 0 0 0 2px var(--gravity-brand-primary-alpha, rgba(30, 136, 229, 0.2));
}

/* Empty state - dashed border, neutral look */
.gravity-cloze-select-empty {
    border-style: dashed;
    border-color: var(--gravity-border-primary);
    background-color: var(--gravity-bg-secondary);
}

/* Answered state - solid border, success look (matches filled drop zone) */
.gravity-cloze-select-answered {
    border-style: solid;
    border-color: var(--gravity-state-success, #4CAF50);
    background-color: var(--gravity-state-success-alpha, rgba(76, 175, 80, 0.1));
}

/* Rationale Questions */
.gravity-rationale-container {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-rationale-answer {
    background: var(--gravity-bg-primary-elevated);
    border-radius: var(--gravity-border-radius-md);
    padding: var(--gravity-space-4);
}

.gravity-rationale-label {
    font-weight: var(--gravity-font-weight-semibold);
    color: var(--gravity-brand-primary);
    margin-bottom: var(--gravity-space-2);
}

.gravity-rationale-input {
    width: 100%;
    min-height: 80px;
    padding: var(--gravity-space-3);
    border: 1px solid var(--gravity-border-primary);
    border-radius: var(--gravity-border-radius-sm);
    background: var(--gravity-bg-primary);
    font-family: inherit;
    font-size: var(--gravity-font-size-sm);
    color: var(--gravity-text-primary);
    resize: vertical;
}

/* Responsive Design for Question Types */
@media (max-width: 768px) {
    .gravity-test-with-scenario {
        grid-template-columns: 1fr;
    }
    
    .gravity-grouping-container {
        grid-template-columns: 1fr;
    }
    
    .gravity-matrix-container {
        font-size: var(--gravity-font-size-xs);
    }
    
    .gravity-sequence-item {
        flex-wrap: wrap;
    }
}

/* ========================================
 * components/relative-container.css
 * ======================================== */

/* =============================================================================
   GRAVITY RELATIVE CONTAINER
   Utility component providing position:relative context for absolutely-positioned children.
   ============================================================================= */

.gravity-relative-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Variant with right padding for indicator placement */
.gravity-relative-container--with-indicator {
    padding-right: 2.5em;
}

/* When used in table cells (th or td), ensure proper alignment */
th .gravity-relative-container,
td .gravity-relative-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* ========================================
 * components/search-filters.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Search & Filters Component Styles
 * 
 * Search inputs, filter dropdowns, filter chips, advanced filters
 * Used in data tables and list views
 */

/* ================================
 * SEARCH CONTAINER
 * ================================ */

.gravity-search-container {
  background-color: var(--gravity-bg-primary);
  border-bottom: 1px solid var(--gravity-border-secondary);
  padding: var(--gravity-space-md) var(--gravity-space-lg);
}

/* ================================
 * SEARCH INPUT
 * ================================ */

.gravity-search-wrapper {
  position: relative;
  max-width: 480px;
}

.gravity-search-input {
  width: 100%;
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  padding-left: 40px;
  background-color: var(--gravity-search-bg);
  border: 1px solid var(--gravity-search-border);
  border-radius: var(--gravity-radius-md);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  transition: all var(--gravity-transition-fast);
}

.gravity-search-input:focus {
  outline: none;
  border-color: var(--gravity-search-focus-border);
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.1);
}

.gravity-search-input::placeholder {
  color: var(--gravity-text-muted);
}

/* Search Icon */
.gravity-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gravity-search-icon);
  pointer-events: none;
}

.gravity-search-icon::before {
  content: '';
  font-size: 16px;
}

/* Clear Button */
.gravity-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--gravity-text-muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--gravity-transition-fast);
}

.gravity-search-wrapper.has-value .gravity-search-clear {
  opacity: 1;
  visibility: visible;
}

.gravity-search-clear:hover {
  color: var(--gravity-text-primary);
}

.gravity-search-clear::after {
  content: '';
  font-size: 20px;
  line-height: 1;
}

/* ================================
 * SEARCH WITH FILTERS
 * ================================ */

.gravity-search-filters {
  display: flex;
  gap: var(--gravity-space-md);
  align-items: flex-start;
  flex-wrap: wrap;
}

.gravity-search-filters .gravity-search-wrapper {
  flex: 1;
  min-width: 280px;
}

/* ================================
 * FILTER CONTROLS
 * ================================ */

.gravity-filter-controls {
  display: flex;
  gap: var(--gravity-space-sm);
  align-items: center;
  flex-wrap: wrap;
}

/* Filter Button */
.gravity-filter-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-xs);
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
}

.gravity-filter-button:hover {
  background-color: var(--gravity-bg-secondary);
  border-color: var(--gravity-brand-primary);
}

.gravity-filter-button.active {
  background-color: rgba(var(--gravity-brand-primary-rgb), 0.1);
  border-color: var(--gravity-brand-primary);
  color: var(--gravity-brand-primary);
}

.gravity-filter-button-icon::before {
  content: '▼';
  font-size: 10px;
}

/* Filter Count Badge */
.gravity-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--gravity-brand-primary);
  color: white;
  border-radius: 50%;
  font-size: var(--gravity-font-size-xs);
  font-weight: var(--gravity-font-weight-semibold);
  margin-left: var(--gravity-space-xs);
}

/* ================================
 * ADVANCED FILTERS PANEL
 * ================================ */

.gravity-advanced-filters {
  margin-top: var(--gravity-space-md);
  padding: var(--gravity-space-md);
  background-color: var(--gravity-bg-secondary);
  border: 1px solid var(--gravity-border-secondary);
  border-radius: var(--gravity-radius-md);
  /* Note: Visibility should be controlled by framework (e.g., Blazor, React) 
     not by CSS. Using display: block by default for framework compatibility */
  display: block;
}

/* For CSS-only implementations that need visibility control */
.gravity-advanced-filters.closed {
  display: none;
}

.gravity-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gravity-space-md);
  margin-bottom: var(--gravity-space-md);
}

/* Filter Actions */
.gravity-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gravity-space-sm);
  margin-top: var(--gravity-space-md);
}

/* Filter Field */
.gravity-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-xs);
}

.gravity-filter-label {
  font-size: var(--gravity-font-size-sm);
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-secondary);
}

.gravity-filter-input,
.gravity-filter-select {
  padding: var(--gravity-space-sm);
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  transition: all var(--gravity-transition-fast);
}

.gravity-filter-input:focus,
.gravity-filter-select:focus {
  outline: none;
  border-color: var(--gravity-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.1);
}

/* Filter Checkbox */
.gravity-filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-xs);
}

.gravity-filter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gravity-brand-primary);
}

.gravity-filter-checkbox label {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  cursor: pointer;
}

/* ================================
 * ACTIVE FILTERS / FILTER CHIPS
 * ================================ */

.gravity-active-filters {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-sm);
  flex-wrap: wrap;
  margin-top: var(--gravity-space-sm);
}

.gravity-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-xs);
  padding: 4px 8px;
  background-color: var(--gravity-filter-chip-bg);
  border: 1px solid var(--gravity-border-secondary);
  border-radius: var(--gravity-radius-full);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-filter-chip-text);
}

.gravity-filter-chip-label {
  font-weight: var(--gravity-font-weight-medium);
}

.gravity-filter-chip-value {
  color: var(--gravity-text-secondary);
}

.gravity-filter-chip-remove {
  padding: 2px;
  margin-left: 4px;
  background: transparent;
  border: none;
  color: var(--gravity-filter-chip-remove);
  cursor: pointer;
  line-height: 1;
  transition: all var(--gravity-transition-fast);
}

.gravity-filter-chip-remove:hover {
  color: var(--gravity-color-secondary-red);
}

.gravity-filter-chip-remove::after {
  content: '';
  font-size: 16px;
}

/* Clear All Filters */
.gravity-clear-filters {
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--gravity-brand-primary);
  font-size: var(--gravity-font-size-sm);
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
}

.gravity-clear-filters:hover {
  text-decoration: underline;
}

/* ================================
 * SEARCH RESULTS INFO
 * ================================ */

.gravity-search-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gravity-space-sm) var(--gravity-space-lg);
  background-color: var(--gravity-bg-secondary);
  border-bottom: 1px solid var(--gravity-border-secondary);
}

.gravity-results-count {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-secondary);
}

.gravity-results-count strong {
  color: var(--gravity-text-primary);
  font-weight: var(--gravity-font-weight-semibold);
}

/* ================================
 * SEARCH ACTIONS
 * ================================ */

.gravity-search-actions {
  display: flex;
  gap: var(--gravity-space-sm);
  align-items: center;
}

.gravity-export-button {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-xs);
  padding: var(--gravity-space-xs) var(--gravity-space-sm);
  background-color: transparent;
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
}

.gravity-export-button:hover {
  background-color: var(--gravity-bg-secondary);
}

.gravity-export-button::before {
  content: '';
  font-size: 12px;
}

/* Export Dropdown */
.gravity-export-dropdown {
  position: relative;
}

.gravity-export-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  width: 12rem;
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  box-shadow: var(--gravity-shadow-lg);
  z-index: 50;
}

.gravity-export-menu-content {
  padding: var(--gravity-space-xs) 0;
}

.gravity-export-item {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-xs);
  width: 100%;
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  cursor: pointer;
  transition: background-color var(--gravity-transition-fast);
}

.gravity-export-item:hover {
  background-color: var(--gravity-bg-secondary);
}

/* History Dropdown */
.gravity-history-dropdown {
  position: relative;
}

/* ================================
 * SEARCH HISTORY (Optional)
 * ================================ */

.gravity-search-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  box-shadow: var(--gravity-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.gravity-search-history.open {
  display: block;
}

.gravity-search-history-item {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  cursor: pointer;
  transition: background-color var(--gravity-transition-fast);
}

.gravity-search-history-item:hover {
  background-color: var(--gravity-bg-secondary);
}

.gravity-search-history-item::before {
  content: '';
  margin-right: var(--gravity-space-xs);
  opacity: 0.5;
}

/* ================================
 * LOADING STATE
 * ================================ */

.gravity-search-loading {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--gravity-border-secondary);
  border-top-color: var(--gravity-brand-primary);
  border-radius: 50%;
  animation: gravity-spin 0.8s linear infinite;
}

/* ================================
 * RESPONSIVE
 * ================================ */

@media (max-width: 768px) {
  .gravity-search-filters {
    flex-direction: column;
  }
  
  .gravity-search-wrapper {
    width: 100%;
  }
  
  .gravity-filter-grid {
    grid-template-columns: 1fr;
  }
  
  .gravity-search-results {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gravity-space-sm);
  }
}

/* ================================
 * INLINE SEARCH LAYOUT
 * ================================ */

/* Inline Search Layout */
.gravity-search-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Search Controls (buttons) */
.gravity-search-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Constrain search input width */
.gravity-search-inline .gravity-search-wrapper {
  flex: 1;
  max-width: 30rem;
}

/* ================================
 * GRAVITY SEARCH FILTER COMPONENT
 * Styles for GravitySearchFilter Blazor component
 * ================================ */

.gravity-search-filter {
  margin-bottom: var(--gravity-space-sm);
}

.gravity-search-filter .gravity-filter-container {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-xs);
}

.gravity-search-filter .gravity-filter-container > label {
  display: block;
  font-size: var(--gravity-font-size-sm);
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-secondary);
  margin-bottom: var(--gravity-space-1);
}

.gravity-search-filter .gravity-filter-container > label span {
  color: var(--gravity-state-error);
  margin-left: var(--gravity-space-1);
}

/* Filter text inputs */
.gravity-search-filter .gravity-filter-text,
.gravity-search-filter .gravity-filter-date,
.gravity-search-filter .gravity-filter-date-from,
.gravity-search-filter .gravity-filter-date-to,
.gravity-search-filter .gravity-filter-number,
.gravity-search-filter .gravity-filter-number-min,
.gravity-search-filter .gravity-filter-number-max {
  display: block;
  width: 100%;
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
  box-shadow: var(--gravity-shadow-sm);
  transition: all var(--gravity-transition-fast);
}

.gravity-search-filter .gravity-filter-text:focus,
.gravity-search-filter .gravity-filter-date:focus,
.gravity-search-filter .gravity-filter-date-from:focus,
.gravity-search-filter .gravity-filter-date-to:focus,
.gravity-search-filter .gravity-filter-number:focus,
.gravity-search-filter .gravity-filter-number-min:focus,
.gravity-search-filter .gravity-filter-number-max:focus,
.gravity-search-filter .gravity-filter-select:focus {
  outline: none;
  border-color: var(--gravity-brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.1);
}

/* Checkbox and radio styling */
.gravity-search-filter input[type="checkbox"],
.gravity-search-filter input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--gravity-brand-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
}

.gravity-search-filter input[type="checkbox"] + label,
.gravity-search-filter input[type="radio"] + label {
  margin-left: var(--gravity-space-2);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-primary);
}

/* Range/dual input containers */
.gravity-search-filter .gravity-flex {
  display: flex;
}

.gravity-search-filter .gravity-flex.gravity-gap-2 {
  gap: var(--gravity-space-2);
}

.gravity-search-filter .gravity-flex.gravity-items-center {
  align-items: center;
}

.gravity-search-filter .gravity-flex-1 {
  flex: 1;
}

/* Multiselect container */
.gravity-search-filter .gravity-space-y-2 {
  display: flex;
  flex-direction: column;
  gap: var(--gravity-space-2);
}

.gravity-search-filter .gravity-max-h-48 {
  max-height: 12rem;
}

.gravity-search-filter .gravity-overflow-y-auto {
  overflow-y: auto;
}

.gravity-search-filter .gravity-p-2 {
  padding: var(--gravity-space-2);
}

/* Validation message */
.gravity-search-filter p.gravity-mt-1 {
  margin-top: var(--gravity-space-1);
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-state-error);
}

/* ========================================
 * components/spinners.css
 * ======================================== */

/*
 * Gravity UI Loading Spinner System
 * 
 * Complete loading indicator implementation with multiple variants:
 * - Types: Circle, Dots, Bars, Pulse spinners
 * - Sizes: Small (1rem), Medium (2rem), Large (3rem), Extra Large (4rem)
 * - Colors: Primary, Success, Warning, Danger variants
 * - Positioning: Center, Overlay with backdrop support
 * - Dark Mode: Automatic color adaptation for dark themes
 */

/* ================================
 * SPINNER POSITIONING & LAYOUT
 * ================================ */

.gravity-spinner-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gravity-spinner-with-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

/* ================================
 * SPINNER SIZE VARIANTS
 * ================================ */

.gravity-spinner-small { 
  --spinner-size: 1rem; 
}

.gravity-spinner-medium { 
  --spinner-size: 2rem; 
}

.gravity-spinner-large { 
  --spinner-size: 3rem; 
}

.gravity-spinner-extralarge { 
  --spinner-size: 4rem; 
}

/* ================================
 * CIRCLE SPINNER
 * ================================ */

.gravity-spinner-circle .gravity-spinner-svg {
  width: var(--spinner-size);
  height: var(--spinner-size);
  animation: rotate 1.4s linear infinite;
}

.gravity-spinner-circle-bg {
  stroke: #e5e7eb;
}

.gravity-spinner-circle {
  stroke: #3b82f6;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0;
  animation: dash 1.4s ease-in-out infinite;
}

@keyframes rotate {
  100% { 
    transform: rotate(360deg); 
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -15;
  }
  100% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -125;
  }
}

/* ================================
 * DOTS SPINNER
 * ================================ */

.gravity-spinner-dots {
  display: flex;
  gap: 0.25rem;
}

.gravity-spinner-dot {
  width: calc(var(--spinner-size) / 4);
  height: calc(var(--spinner-size) / 4);
  background: #3b82f6;
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite;
}

.gravity-spinner-dot:nth-child(1) { 
  animation-delay: -0.32s; 
}

.gravity-spinner-dot:nth-child(2) { 
  animation-delay: -0.16s; 
}

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================================
 * BARS SPINNER
 * ================================ */

.gravity-spinner-bars {
  display: flex;
  gap: 0.125rem;
  height: var(--spinner-size);
}

.gravity-spinner-bar {
  width: calc(var(--spinner-size) / 6);
  background: #3b82f6;
  animation: bar-scale 1.2s ease-in-out infinite;
}

.gravity-spinner-bar:nth-child(1) { 
  animation-delay: -0.4s; 
}

.gravity-spinner-bar:nth-child(2) { 
  animation-delay: -0.3s; 
}

.gravity-spinner-bar:nth-child(3) { 
  animation-delay: -0.2s; 
}

.gravity-spinner-bar:nth-child(4) { 
  animation-delay: -0.1s; 
}

@keyframes bar-scale {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* ================================
 * PULSE SPINNER
 * ================================ */

.gravity-spinner-pulse {
  width: var(--spinner-size);
  height: var(--spinner-size);
  background: #3b82f6;
  border-radius: 50%;
  animation: pulse 1.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ================================
 * SPINNER TEXT STYLES
 * ================================ */

.gravity-spinner-text {
  font-size: 0.875rem;
  color: #6b7280;
}

/* ================================
 * SPINNER COLOR VARIANTS
 * ================================ */

.gravity-spinner-primary .gravity-spinner-circle,
.gravity-spinner-primary .gravity-spinner-dot,
.gravity-spinner-primary .gravity-spinner-bar,
.gravity-spinner-primary .gravity-spinner-pulse {
  stroke: #3b82f6;
  background: #3b82f6;
}

.gravity-spinner-success .gravity-spinner-circle,
.gravity-spinner-success .gravity-spinner-dot,
.gravity-spinner-success .gravity-spinner-bar,
.gravity-spinner-success .gravity-spinner-pulse {
  stroke: #10b981;
  background: #10b981;
}

.gravity-spinner-warning .gravity-spinner-circle,
.gravity-spinner-warning .gravity-spinner-dot,
.gravity-spinner-warning .gravity-spinner-bar,
.gravity-spinner-warning .gravity-spinner-pulse {
  stroke: #f59e0b;
  background: #f59e0b;
}

.gravity-spinner-danger .gravity-spinner-circle,
.gravity-spinner-danger .gravity-spinner-dot,
.gravity-spinner-danger .gravity-spinner-bar,
.gravity-spinner-danger .gravity-spinner-pulse {
  stroke: #ef4444;
  background: #ef4444;
}

/* ================================
 * OVERLAY BACKDROP SYSTEM
 * ================================ */

.gravity-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

/* ================================
 * DARK MODE SUPPORT
 * ================================ */

@media (prefers-color-scheme: dark) {
  .gravity-spinner-circle-bg {
    stroke: #4b5563;
  }
  
  .gravity-spinner-text {
    color: #d1d5db;
  }
  
  .gravity-spinner-overlay {
    background: rgba(0, 0, 0, 0.7);
  }
}

/* ========================================
 * components/status-card.css
 * ======================================== */

/*
 * Gravity UI 2.0 Status Card Component
 *
 * Card component for displaying system status with dynamic coloring.
 * Used for health checks, service status, and similar monitoring displays.
 */

/* ================================
 * BASE STATUS CARD
 * ================================ */

.gravity-status-card {
  display: flex;
  flex-direction: column;
  padding: var(--gravity-spacing-4);
  border-radius: var(--gravity-border-radius-md);
  border: var(--gravity-border-width-thin) solid var(--gravity-color-border-default);
  background: var(--gravity-color-background-surface);
  box-shadow: var(--gravity-shadow-sm);
  transition: box-shadow var(--gravity-transition-fast), border-color var(--gravity-transition-fast);
}

.gravity-status-card:hover {
  box-shadow: var(--gravity-shadow-md);
}

/* ================================
 * CARD TITLE
 * ================================ */

.gravity-status-card-title {
  margin: 0 0 var(--gravity-spacing-2) 0;
  font-size: var(--gravity-font-size-lg);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-color-text-primary);
}

/* ================================
 * STATUS DISPLAY
 * ================================ */

.gravity-status-card-status {
  font-size: var(--gravity-font-size-xl);
  font-weight: var(--gravity-font-weight-bold);
  margin-bottom: var(--gravity-spacing-2);
}

/* ================================
 * DESCRIPTION
 * ================================ */

.gravity-status-card-description {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-color-text-secondary);
  margin-bottom: var(--gravity-spacing-2);
}

/* ================================
 * DURATION/RESPONSE TIME
 * ================================ */

.gravity-status-card-duration {
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-color-text-muted);
  font-family: var(--gravity-font-family-mono, monospace);
}

/* ================================
 * STATE VARIANTS
 * ================================ */

/* Unknown state (default) */
.gravity-status-card-unknown {
  border-left: 4px solid var(--gravity-color-neutral-400);
}

.gravity-status-card-unknown .gravity-status-card-status {
  color: var(--gravity-color-text-secondary);
}

/* Healthy state */
.gravity-status-card-healthy {
  border-left: 4px solid var(--gravity-color-success-500);
}

.gravity-status-card-healthy .gravity-status-card-status {
  color: var(--gravity-color-success-600);
}

/* Unhealthy state */
.gravity-status-card-unhealthy {
  border-left: 4px solid var(--gravity-color-error-500);
  background: var(--gravity-color-error-50);
}

.gravity-status-card-unhealthy .gravity-status-card-status {
  color: var(--gravity-color-error-600);
}

/* Degraded state */
.gravity-status-card-degraded {
  border-left: 4px solid var(--gravity-color-warning-500);
  background: var(--gravity-color-warning-50);
}

.gravity-status-card-degraded .gravity-status-card-status {
  color: var(--gravity-color-warning-600);
}

/* ================================
 * DARK THEME OVERRIDES
 * ================================ */

[data-theme="dark"] .gravity-status-card {
  background: var(--gravity-color-background-surface-dark);
  border-color: var(--gravity-color-border-dark);
}

[data-theme="dark"] .gravity-status-card-unhealthy {
  background: color-mix(in srgb, var(--gravity-color-error-900) 30%, transparent);
}

[data-theme="dark"] .gravity-status-card-degraded {
  background: color-mix(in srgb, var(--gravity-color-warning-900) 30%, transparent);
}

/* ========================================
 * components/summary-card.css
 * ======================================== */

/* =============================================================================
   GRAVITY SUMMARY CARD
   Atomic component for summary/header cards with indicator styling
   ============================================================================= */

.gravity-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gravity-spacing-md, 1rem);
  cursor: pointer;
  border-radius: var(--gravity-border-radius-md, 6px);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  flex: 1;
  min-width: 120px;
}

.gravity-summary-card:hover {
  background-color: rgba(var(--gravity-color-primary-rgb, 59, 130, 246), 0.08);
}

/* Indicator-based border coloring (0-3 levels) */
.gravity-summary-card--indicator-0 {
  border-bottom: 3px solid var(--gravity-color-danger, #dc3545);
}

.gravity-summary-card--indicator-1 {
  border-bottom: 3px solid var(--gravity-color-warning, #ffc107);
}

.gravity-summary-card--indicator-2 {
  border-bottom: 3px solid var(--gravity-color-info, #0dcaf0);
}

.gravity-summary-card--indicator-3 {
  border-bottom: 3px solid var(--gravity-color-success, #198754);
}

/* Selected state */
.gravity-summary-card--selected {
  background-color: rgba(var(--gravity-color-primary-rgb, 59, 130, 246), 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gravity-summary-card--selected:hover {
  background-color: rgba(var(--gravity-color-primary-rgb, 59, 130, 246), 0.16);
}

/* ========================================
 * components/tables.css
 * ======================================== */

/*
 * Gravity UI 2.0 - Tables Component Styles
 * 
 * Data tables, sortable headers, responsive behavior
 * Based on admin table patterns from ModularTesting app
 */

/* ================================
 * TABLE CONTAINER & WRAPPER
 * ================================ */

.gravity-table-container {
  width: 100%;
  background-color: var(--gravity-bg-primary);
  border-radius: var(--gravity-radius-lg);
  box-shadow: var(--gravity-shadow-md);
  overflow: hidden;
}

.gravity-table-wrapper {
  background-color: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-secondary);
  border-radius: var(--gravity-radius-lg);
}

/* ================================
 * TABLE HEADER (Page Header)
 * ================================ */

.gravity-table-header {
  background-color: var(--gravity-bg-primary);
  border-bottom: 1px solid var(--gravity-border-secondary);
  padding: var(--gravity-space-md) var(--gravity-space-lg);
}

.gravity-table-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gravity-space-lg);
}

.gravity-table-title-group {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-sm);
}

.gravity-table-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gravity-radius-md);
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-text-inverse);
}

.gravity-table-title {
  font-size: var(--gravity-font-size-lg);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  margin: 0;
}

.gravity-table-actions {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-xs);
}

/* ================================
 * DATA TABLE STYLES
 * ================================ */

.gravity-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gravity-font-size-sm);
}

/* Table Caption (for accessibility) */
.gravity-data-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
 * TABLE HEAD
 * ================================ */

.gravity-data-table thead {
  background-color: var(--gravity-table-header-bg);
  border-bottom: 1px solid var(--gravity-table-header-border);
}

.gravity-data-table th {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  text-align: left;
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-table-header-text);
  white-space: nowrap;
  position: relative;
  vertical-align: middle;
}

/* Sortable Column Headers */
.gravity-data-table th.gravity-sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--gravity-transition-fast);
}

.gravity-data-table th.gravity-sortable:hover {
  background-color: var(--gravity-table-row-hover);
}

.gravity-data-table th.gravity-sortable:focus {
  outline: 2px solid var(--gravity-focus-outline);
  outline-offset: -2px;
}

/* Sort Indicator */
.gravity-sort-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--gravity-space-xs);
}

.gravity-sort-icon {
  color: var(--gravity-table-sort-icon);
  font-size: 12px;
  transition: color var(--gravity-transition-fast);
}

.gravity-sort-icon.active {
  color: var(--gravity-table-sort-icon-active);
}

/* Sort Icons (using text symbols for simplicity) */
.gravity-sort-icon::before {
  content: '↕';
}

.gravity-sort-icon.asc::before {
  content: '';
}

.gravity-sort-icon.desc::before {
  content: '';
}

/* ================================
 * TABLE BODY
 * ================================ */

.gravity-data-table tbody tr {
  border-bottom: 1px solid var(--gravity-table-cell-border);
  transition: background-color var(--gravity-transition-fast);
}

/* Alternating Row Colors */
.gravity-data-table tbody tr:nth-child(even) {
  background-color: var(--gravity-table-row-bg-alt);
}

.gravity-data-table tbody tr:nth-child(odd) {
  background-color: var(--gravity-table-row-bg);
}

/* Row Hover State */
.gravity-data-table tbody tr:hover {
  background-color: var(--gravity-table-row-hover);
  cursor: pointer;
}

/* Row Selected State */
.gravity-data-table tbody tr.selected {
  background-color: var(--gravity-table-row-selected);
}

/* Row Focus State */
.gravity-data-table tbody tr:focus {
  outline: 2px solid var(--gravity-focus-outline);
  outline-offset: -2px;
}

/* ================================
 * TABLE CELLS
 * ================================ */

.gravity-data-table td {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  color: var(--gravity-text-primary);
  vertical-align: middle;
}

/* GravityUI TableCell base class */
.gravity-table-cell {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  color: var(--gravity-text-primary);
  vertical-align: middle;
  white-space: nowrap;
  font-size: var(--gravity-font-size-sm);
}

/* Header cell base styling */
.gravity-table-header-cell {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  font-weight: var(--gravity-font-weight-semibold);
  font-size: var(--gravity-font-size-xs);
  color: var(--gravity-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Cell alignment variants */
.gravity-table-cell-left {
  text-align: left;
}

.gravity-table-cell-center {
  text-align: center;
}

.gravity-table-cell-right {
  text-align: right;
}

/* Hierarchical indentation levels (1.5rem per level) */
.gravity-table-cell-indent-1 { padding-left: 1.5rem; }
.gravity-table-cell-indent-2 { padding-left: 3rem; }
.gravity-table-cell-indent-3 { padding-left: 4.5rem; }
.gravity-table-cell-indent-4 { padding-left: 6rem; }
.gravity-table-cell-indent-5 { padding-left: 7.5rem; }
.gravity-table-cell-indent-6 { padding-left: 9rem; }
.gravity-table-cell-indent-7 { padding-left: 10.5rem; }
.gravity-table-cell-indent-8 { padding-left: 12rem; }
.gravity-table-cell-indent-9 { padding-left: 13.5rem; }
.gravity-table-cell-indent-10 { padding-left: 15rem; }

/* Cell Truncation */
.gravity-data-table .gravity-cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cell with Actions */
.gravity-data-table .gravity-cell-actions {
  text-align: center;
  white-space: nowrap;
}

/* ================================
 * EMPTY & LOADING STATES
 * ================================ */

.gravity-table-empty {
  padding: var(--gravity-space-2xl) var(--gravity-space-lg);
  text-align: center;
}

.gravity-table-empty-icon {
  font-size: 48px;
  color: var(--gravity-text-muted);
  margin-bottom: var(--gravity-space-md);
  display: block;
}

.gravity-table-empty-text {
  font-size: var(--gravity-font-size-lg);
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-secondary);
  margin-bottom: var(--gravity-space-sm);
}

.gravity-table-empty-subtext {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-muted);
}

/* Loading State */
.gravity-table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gravity-space-2xl) var(--gravity-space-lg);
}

.gravity-table-loading-content {
  text-align: center;
}

.gravity-table-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gravity-border-secondary);
  border-top-color: var(--gravity-brand-primary);
  border-radius: 50%;
  animation: gravity-spin 1s linear infinite;
  margin: 0 auto var(--gravity-space-xs);
}

.gravity-table-loading-text {
  color: var(--gravity-text-secondary);
  font-size: var(--gravity-font-size-sm);
}

@keyframes gravity-spin {
  to { transform: rotate(360deg); }
}

/* ================================
 * RESPONSIVE TABLE
 * ================================ */

.gravity-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gravity-table-responsive .gravity-data-table {
  min-width: 600px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .gravity-table-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gravity-space-sm);
  }
  
  .gravity-data-table th,
  .gravity-data-table td {
    padding: var(--gravity-space-xs) var(--gravity-space-sm);
  }
  
  .gravity-table-title {
    font-size: var(--gravity-font-size-base);
  }
}

/* ================================
 * TABLE VARIANTS
 * ================================ */

/* Compact Table */
.gravity-data-table.gravity-table-compact th,
.gravity-data-table.gravity-table-compact td {
  padding: var(--gravity-space-xs) var(--gravity-space-sm);
}

/* Bordered Table */
.gravity-data-table.gravity-table-bordered {
  border: 1px solid var(--gravity-table-cell-border);
}

.gravity-data-table.gravity-table-bordered th,
.gravity-data-table.gravity-table-bordered td {
  border: 1px solid var(--gravity-table-cell-border);
}

/* Striped Table (stronger striping) */
.gravity-data-table.gravity-table-striped tbody tr:nth-child(even) {
  background-color: var(--gravity-color-gray-100);
}

/* ================================
 * ROLE BADGES IN TABLES
 * ================================ */

.gravity-role-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.gravity-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--gravity-font-weight-semibold);
  text-transform: uppercase;
  box-shadow: var(--gravity-shadow-sm);
  cursor: help;
}

/* Role Badge Colors */
.gravity-role-badge.admin {
  background-color: var(--gravity-color-secondary-red);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.content-creator {
  background-color: var(--gravity-color-secondary-red);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.educator {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: var(--gravity-text-inverse);
  border: 1px solid #fbbf24;
}

/* Special educator badge with gold star gradient */
.gravity-role-badge.educator-special {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: var(--gravity-text-inverse);
  border: 1px solid #fbbf24;
  position: relative;
}

/* Add star icon to special educator badges */
.gravity-role-badge.educator-special::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
}

.gravity-role-badge.school-admin {
  background-color: var(--gravity-color-secondary-orange);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.instructor {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.student {
  background-color: var(--gravity-color-secondary-green);
  color: var(--gravity-text-inverse);
}

.gravity-role-badge.none {
  background-color: var(--gravity-color-gray-400);
  color: var(--gravity-color-gray-600);
}

/* ================================
 * GRAVITY TABLE COMPONENT CLASSES
 * Styles for GravityTable, GravityTableHead, GravityTableBody, TableRow
 * ================================ */

/* GravityTable base class */
.gravity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gravity-font-size-sm);
}

/* GravityTable striped variant */
.gravity-table-striped tbody tr:nth-child(even) {
  background-color: var(--gravity-table-row-bg-alt);
}

/* GravityTable bordered variant */
.gravity-table-bordered {
  border: 1px solid var(--gravity-border-secondary);
}

.gravity-table-bordered th,
.gravity-table-bordered td {
  border: 1px solid var(--gravity-border-secondary);
}

/* GravityTable compact variant */
.gravity-table-compact th,
.gravity-table-compact td {
  padding: var(--gravity-space-xs) var(--gravity-space-sm);
}

/* GravityTableHead component */
.gravity-table-head {
  background-color: var(--gravity-table-header-bg);
}

/* GravityTableBody component */
.gravity-table-body {
  background-color: var(--gravity-bg-primary);
}

.gravity-table-body tr {
  border-bottom: 1px solid var(--gravity-border-secondary);
}

/* TableRow component */
.gravity-table-row {
  transition: background-color var(--gravity-transition-fast);
}

.gravity-table-row:hover {
  background-color: var(--gravity-table-row-hover);
}

.gravity-table-row-highlighted {
  background-color: var(--gravity-state-info-light);
  font-weight: var(--gravity-font-weight-semibold);
}

/* ================================
 * CHILD COMPONENT TABLE MODE
 * Styles for tables using GravityDataTableHeader/Body components
 * ================================ */

/* Base styles for header/body component mode */
.gravity-data-table-header {
  background-color: var(--gravity-table-header-bg);
  border-bottom: 1px solid var(--gravity-table-header-border);
}

.gravity-data-table-header th,
.gravity-data-table-header-cell {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-table-header-text);
  white-space: nowrap;
}

.gravity-data-table-body tr {
  border-bottom: 1px solid var(--gravity-table-cell-border);
}

.gravity-data-table-body tr:nth-child(even) {
  background-color: var(--gravity-table-row-bg-alt);
}

.gravity-data-table-body tr:nth-child(odd) {
  background-color: var(--gravity-table-row-bg);
}

.gravity-data-table-cell {
  padding: var(--gravity-space-sm) var(--gravity-space-md);
  color: var(--gravity-text-primary);
  vertical-align: middle;
}

.gravity-data-table-row {
  transition: background-color var(--gravity-transition-fast);
}

.gravity-data-table-row:hover {
  background-color: var(--gravity-table-row-hover);
}

/* ================================
 * MATRIX TABLE LAYOUT
 * For Options Box and similar grid/matrix components
 * Uses table-layout: fixed for consistent column alignment
 * ================================ */

/* When a table contains gravity-data-table-header, use fixed layout */
table:has(.gravity-data-table-header) {
  table-layout: fixed;
  width: 100%;
}

/* First column (row labels) gets auto width, others share remaining space equally */
table:has(.gravity-data-table-header) th:first-child,
table:has(.gravity-data-table-header) td:first-child {
  width: auto;
  white-space: nowrap;
}

/* Ensure vertical alignment for row labels */
table:has(.gravity-data-table-header) td:first-child {
  vertical-align: middle;
}

/* Text alignment utilities for table cells */
.gravity-data-table-header-cell.gravity-text-center,
.gravity-data-table-cell.gravity-text-center {
  text-align: center;
}

.gravity-data-table-header-cell.gravity-text-right,
.gravity-data-table-cell.gravity-text-right {
  text-align: right;
}

.gravity-data-table-header-cell.gravity-text-left,
.gravity-data-table-cell.gravity-text-left {
  text-align: left;
}

/* ========================================
 * components/tabs.css
 * ======================================== */

/*
 * Gravity UI Tabs Component
 *
 * Tab navigation component with horizontal and vertical orientations
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * TABS STYLES (SUPPLEMENTAL)
 * ================================ */

.gravity-tabs {
  width: 100%;
}

.gravity-tabs-horizontal .gravity-tabs-header {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

.gravity-tabs-vertical {
  display: flex;
  gap: 1.5rem;
}

.gravity-tabs-vertical .gravity-tabs-header {
  border-right: 1px solid #e5e7eb;
  padding-right: 1.5rem;
  min-width: 200px;
}

.gravity-tabs-vertical .gravity-tabs-nav {
  flex-direction: column;
}

.gravity-tabs-nav {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.gravity-tabs-centered .gravity-tabs-nav {
  justify-content: center;
}

.gravity-tabs-right .gravity-tabs-nav {
  justify-content: flex-end;
}

.gravity-tab-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #6b7280;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.gravity-tab-button:hover:not(:disabled) {
  color: #374151;
}

.gravity-tab-button.gravity-tab-active {
  color: #3b82f6;
  font-weight: 600;
}

.gravity-tabs-horizontal .gravity-tab-button.gravity-tab-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
}

.gravity-tabs-vertical .gravity-tab-button.gravity-tab-active::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3b82f6;
}

.gravity-tab-button.gravity-tab-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-tab-icon {
  font-size: 1rem;
}

.gravity-tab-badge {
  padding: 0.125rem 0.375rem;
  background: #ef4444;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.25rem;
  text-align: center;
}

.gravity-tabs-content {
  flex: 1;
}

.gravity-tab-panel {
  animation: fadeIn 0.3s ease;
}

.gravity-tab-panel[hidden] {
  display: none;
}

.gravity-tab-panel-active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support for tabs */
@media (prefers-color-scheme: dark) {
  .gravity-tab-button {
    color: #9ca3af;
  }

  .gravity-tab-button:hover:not(:disabled) {
    color: #e5e7eb;
  }
}

/* ========================================
 * components/tag-input.css
 * ======================================== */

/*
 * Gravity UI 2.0 Tag Input Component
 * 
 * Tag-based input with autocomplete, tag styling, and removal functionality
 * Includes suggestions dropdown, keyboard navigation, and multiple color variants
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * TAG INPUT CONTAINER
 * ================================ */

.gravity-tag-input {
  position: relative;
}

.gravity-tag-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
  background: var(--gravity-bg-primary);
  cursor: text;
}

.gravity-tag-input-focused {
  border-color: var(--gravity-brand-primary);
  box-shadow: var(--gravity-focus-ring-shadow);
}

.gravity-tag-input-disabled {
  background-color: var(--gravity-bg-secondary);
  cursor: not-allowed;
}

/* ================================
 * TAG CONTAINER AND STYLING
 * ================================ */

.gravity-tag-input-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gravity-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--gravity-bg-muted);
  border-radius: var(--gravity-radius-xs);
  font-size: 0.875rem;
}

.gravity-tag-primary {
  background: var(--gravity-brand-primary-alpha-10);
  color: var(--gravity-brand-primary-dark);
}

.gravity-tag-success {
  background: var(--gravity-state-success-light);
  color: var(--gravity-state-success-dark);
}

/* ================================
 * TAG REMOVAL
 * ================================ */

.gravity-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.gravity-tag-remove:hover {
  opacity: 1;
}

/* ================================
 * INPUT FIELD
 * ================================ */

.gravity-tag-input-field {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
}

/* ================================
 * SUGGESTIONS DROPDOWN
 * ================================ */

.gravity-tag-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-sm);
  box-shadow: var(--gravity-shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.gravity-tag-input-suggestion {
  display: block;
  width: 100%;
  padding: 0.5rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.gravity-tag-input-suggestion:hover,
.gravity-tag-input-suggestion-selected {
  background-color: var(--gravity-bg-muted);
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-tag-input-wrapper {
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-tag-input-suggestions {
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-tag-input-suggestion:hover,
  :root:not([data-theme]) .gravity-tag-input-suggestion-selected {
    background-color: var(--gravity-bg-muted);
  }

  :root:not([data-theme]) .gravity-tag {
    background: var(--gravity-bg-muted);
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-tag-primary {
    background: var(--gravity-brand-primary-alpha-20);
    color: var(--gravity-brand-primary-light);
  }

  :root:not([data-theme]) .gravity-tag-success {
    background: var(--gravity-state-success-dark);
    color: var(--gravity-state-success-light);
  }

  :root:not([data-theme]) .gravity-tag-input-field {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-tag-input-field::placeholder {
    color: var(--gravity-placeholder-color);
  }
}

/* ========================================
 * components/testing/scenario-navigation.css
 * ======================================== */

/* ===========================================
   ENHANCED LAYOUTS & QUESTION TYPES
   =========================================== */

/* Conditional Two-Panel Layout for Case Studies */
.gravity-test-with-scenario {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: var(--gravity-space-6);
    min-height: calc(100vh - 80px);
}

.gravity-scenario-panel {
    background: var(--gravity-bg-primary-elevated);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    box-shadow: var(--gravity-shadow-sm);
    overflow-y: auto;
    max-height: calc(100vh - 100px);
}

.gravity-question-panel {
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    display: flex;
    flex-direction: column;
}

/* Enhanced Scenario Tab Styling */
.gravity-scenario-tabs {
    display: flex;
    border-bottom: 2px solid var(--gravity-border-primary);
    margin-bottom: var(--gravity-space-4);
}

.gravity-scenario-tab {
    padding: var(--gravity-space-3) var(--gravity-space-4);
    background: var(--gravity-bg-primary-muted);
    border: 1px solid var(--gravity-border-primary);
    border-bottom: none;
    border-radius: var(--gravity-border-radius-md) var(--gravity-border-radius-md) 0 0;
    cursor: pointer;
    font-weight: var(--gravity-font-weight-medium);
    color: var(--gravity-text-primary-secondary);
    transition: all 0.2s ease;
    margin-right: var(--gravity-space-1);
}

.gravity-scenario-tab:hover {
    background: var(--gravity-bg-primary-elevated);
    color: var(--gravity-text-primary);
}

.gravity-scenario-tab.active {
    background: var(--gravity-brand-primary);
    color: var(--gravity-text-inverse);
    border-color: var(--gravity-brand-primary);
}

.gravity-scenario-content {
    background: var(--gravity-bg-primary);
    padding: var(--gravity-space-4);
    border-radius: var(--gravity-border-radius-md);
    line-height: 1.6;
}

.gravity-scenario-content h3 {
    color: var(--gravity-brand-primary);
    margin-bottom: var(--gravity-space-3);
    font-size: var(--gravity-font-size-lg);
    font-weight: var(--gravity-font-weight-semibold);
}

.gravity-scenario-content p {
    margin-bottom: var(--gravity-space-3);
    color: var(--gravity-text-primary);
}

/* ========================================
 * components/testing/test-interface.css
 * ======================================== */

/*
 * Gravity UI Supplemental CSS - STUDENT TESTING INTERFACE STYLES
 * 
 * This file now contains the new Student Testing Interface styles for TakeTestHarness
 * 
 * 🎯 NEW STUDENT TESTING INTERFACE STYLES:
 * - Full-screen test container and layout
 * - Test header with timers and action buttons  
 * - Question components and answer types
 * - Scenario tabs for case studies
 * - Confidence-based answer submission buttons
 * - Timer badges and visual feedback
 * 
 * 📋 COMPONENTS ADDED:
 * - TakeTestHarness: Complete student testing interface
 * - QuestionUIComponent: Question display with all answer types
 * - MultipleChoiceComponent: Radio button answer selections
 * - Scenario navigation: Tabbed case study interface
 * - Timer components: Test and question timers
 * - Confidence buttons: Three-level answer submission
 */

/* ===========================================
   STUDENT TESTING INTERFACE STYLES
   =========================================== */

/* Full-Screen Test Container */
.gravity-test-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--gravity-bg-primary);
    overflow-y: auto;
}

.gravity-test-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Test Header */
.gravity-test-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(135deg, var(--gravity-bg-primary) 0%, var(--gravity-bg-primary-variant) 100%);
    border-bottom: 1px solid var(--gravity-border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.gravity-test-header-content {
    width: 100%;
    padding: 0 var(--gravity-space-4);
}

.gravity-test-header-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.gravity-test-header-left {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-4);
}

.gravity-test-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--gravity-brand-primary) 0%, var(--gravity-brand-primary-variant) 100%);
    border-radius: var(--gravity-border-radius-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gravity-test-title {
    font-size: var(--gravity-font-size-lg);
    font-weight: var(--gravity-font-weight-bold);
    color: var(--gravity-text-primary);
    margin: 0;
}

.gravity-test-subtitle {
    font-size: var(--gravity-font-size-sm);
    color: var(--gravity-text-primary-variant);
    display: none;
}

@media (min-width: 640px) {
    .gravity-test-subtitle {
        display: block;
    }
}

.gravity-test-header-right {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-2);
}

/* Timer Badges */
.gravity-timer-badge {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-1);
    padding: var(--gravity-space-1) var(--gravity-space-2);
    border-radius: var(--gravity-border-radius-lg);
    border: 1px solid transparent;
    font-size: var(--gravity-font-size-sm);
    font-weight: var(--gravity-font-weight-medium);
}

.gravity-timer-badge-primary {
    background: rgba(var(--gravity-brand-primary-rgb), 0.1);
    border-color: rgba(var(--gravity-brand-primary-rgb), 0.2);
    color: var(--gravity-brand-primary);
}

.gravity-timer-badge-warning {
    background: rgba(var(--gravity-state-warning-rgb), 0.1);
    border-color: rgba(var(--gravity-state-warning-rgb), 0.2);
    color: var(--gravity-state-warning);
}

.gravity-timer-value {
    min-width: 60px;
    font-weight: var(--gravity-font-weight-bold);
}

/* Test Action Buttons */
.gravity-test-action-btn {
    display: flex;
    align-items: center;
    gap: var(--gravity-space-1);
    font-size: var(--gravity-font-size-sm);
}

@media (max-width: 640px) {
    .gravity-test-action-btn .gravity-btn-text {
        display: none;
    }
}

/* Main Test Content */
.gravity-test-content {
    flex: 1;
    padding: var(--gravity-space-4) var(--gravity-space-4) 120px;
    overflow-y: auto;
}

.gravity-test-content-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gravity-test-question-section {
    flex: 1;
    width: 100%;
}

.gravity-question-card {
    background: var(--gravity-bg-primary);
    border-radius: var(--gravity-border-radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gravity-border-primary-variant);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gravity-question-form {
    padding: var(--gravity-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Question Layout Classes */
.gravity-question-layout-scenario {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gravity-space-6);
    flex: 1;
}

@media (min-width: 1280px) {
    .gravity-question-layout-scenario {
        grid-template-columns: 1fr 1fr;
    }
}

.gravity-question-layout-standard {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-6);
    flex: 1;
}

/* Scenario Components */
.gravity-scenario-section {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-scenario-tabs-container {
    border-bottom: 1px solid var(--gravity-border-primary-variant);
}

.gravity-scenario-tabs {
    display: flex;
    gap: var(--gravity-space-6);
}

.gravity-scenario-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--gravity-space-2) var(--gravity-space-1);
    font-size: var(--gravity-font-size-sm);
    font-weight: var(--gravity-font-weight-medium);
    color: var(--gravity-text-primary-variant);
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    white-space: nowrap;
}

.gravity-scenario-tab:hover {
    color: var(--gravity-text-primary);
    border-color: var(--gravity-border-primary);
}

.gravity-scenario-tab-active {
    border-color: var(--gravity-brand-primary);
    color: var(--gravity-brand-primary);
}

.gravity-scenario-content {
    background: var(--gravity-bg-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    margin-top: var(--gravity-space-4);
}

.gravity-scenario-phase-content {
    color: var(--gravity-text-primary);
    line-height: 1.6;
}

.gravity-nurses-notes {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-nurses-notes-title {
    font-weight: var(--gravity-font-weight-semibold);
    color: var(--gravity-text-primary);
}

.gravity-nurses-notes-content {
    margin: var(--gravity-space-1) 0;
    color: var(--gravity-text-primary-variant);
}

/* Question UI Components */
.gravity-question-ui {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-question-watermark {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-4);
}

.gravity-question-text-section {
    flex-shrink: 0;
}

.gravity-question-card-standard,
.gravity-question-card-embedded {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
}

.gravity-question-card-embedded {
    background: rgba(var(--gravity-brand-primary-rgb), 0.05);
    border-color: rgba(var(--gravity-brand-primary-rgb), 0.2);
}

.gravity-question-content {
    color: var(--gravity-text-primary);
    line-height: 1.6;
}

.gravity-question-text {
    font-size: var(--gravity-font-size-lg);
}

/* Question Image */
.gravity-question-image-section {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    background: linear-gradient(135deg, var(--gravity-bg-primary-variant) 0%, var(--gravity-bg-primary) 100%);
    flex-shrink: 0;
}

.gravity-question-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gravity-space-2);
}

.gravity-question-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gravity-question-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--gravity-border-radius-lg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-question-image:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.gravity-question-image-caption {
    text-align: center;
    font-size: var(--gravity-font-size-xs);
    color: var(--gravity-text-primary-variant);
    background: var(--gravity-bg-primary-variant);
    padding: var(--gravity-space-1) var(--gravity-space-2);
    border-radius: var(--gravity-border-radius-full);
}

/* Answer Section */
.gravity-answer-section {
    border: 1px solid var(--gravity-border-primary-variant);
    border-radius: var(--gravity-border-radius-lg);
    padding: var(--gravity-space-6);
    background: rgba(var(--gravity-bg-primary), 0.7);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gravity-answer-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gravity-space-8);
    color: var(--gravity-text-primary-variant);
    text-align: center;
}

/* Multiple Choice Answer Options */
.gravity-answer-options {
    display: flex;
    flex-direction: column;
    gap: var(--gravity-space-2);
}

.gravity-answer-option {
    position: relative;
}

.gravity-answer-option-label {
    display: flex;
    align-items: flex-start;
    gap: var(--gravity-space-4);
    padding: var(--gravity-space-4);
    border-radius: var(--gravity-border-radius-lg);
    border: 2px solid var(--gravity-border-primary-variant);
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    background: var(--gravity-bg-primary);
}

.gravity-answer-option-label:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--gravity-brand-primary);
    background: rgba(var(--gravity-bg-primary), 0.8);
}

.gravity-answer-option-selected {
    border-color: var(--gravity-brand-primary) !important;
    background: rgba(var(--gravity-brand-primary-rgb), 0.05) !important;
    box-shadow: 0 2px 8px rgba(var(--gravity-brand-primary-rgb), 0.2) !important;
}

/* Radio Button Styling */
.gravity-radio-container {
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
}

.gravity-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gravity-radio-visual {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gravity-border-primary);
    border-radius: 50%;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gravity-radio-selected {
    border-color: var(--gravity-brand-primary);
    background: var(--gravity-brand-primary);
}

.gravity-radio-dot {
    width: 8px;
    height: 8px;
    background: var(--gravity-text-inverse);
    border-radius: 50%;
    animation: pulse 0.3s ease-in-out;
}

.gravity-radio-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--gravity-brand-primary);
    opacity: 0;
    pointer-events: none;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-answer-option:active .gravity-radio-ripple {
    opacity: 0.2;
    animation: ping 0.6s ease-out;
}

/* Answer Text */
.gravity-answer-text {
    flex: 1;
    min-width: 0;
}

.gravity-answer-content {
    font-size: var(--gravity-font-size-body);
    line-height: 1.5;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    color: var(--gravity-text-primary);
}

.gravity-answer-content-selected {
    color: var(--gravity-brand-primary);
    font-weight: var(--gravity-font-weight-medium);
}

/* Answer Selection Indicator */
.gravity-answer-indicator {
    flex-shrink: 0;
    color: var(--gravity-brand-primary);
    opacity: 0.8;
}

.gravity-answer-check {
    font-size: var(--gravity-font-size-sm);
    animation: bounce 0.5s ease-in-out;
}

/* Shimmer Effect */
.gravity-answer-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--gravity-border-radius-lg);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
}

.gravity-answer-option:hover .gravity-answer-shimmer {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Test Footer */
.gravity-test-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--gravity-bg-primary);
    border-top: 1px solid var(--gravity-border-primary-variant);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.gravity-test-footer-content {
    padding: var(--gravity-space-4);
}

.gravity-confidence-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gravity-space-2);
    justify-content: flex-end;
}

/* Calculator Button */
.gravity-btn-calculator {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Confidence Answer Buttons */
.gravity-confidence-btn-low,
.gravity-confidence-btn-medium,
.gravity-confidence-btn-high {
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: var(--gravity-space-1);
    padding: var(--gravity-space-2) var(--gravity-space-4);
    font-size: var(--gravity-font-size-sm);
    font-weight: var(--gravity-font-weight-semibold);
    border-radius: var(--gravity-border-radius-lg);
    border: 2px solid;
    cursor: pointer;
    transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out);
    text-align: center;
}

.gravity-confidence-btn-low {
    color: var(--gravity-text-primary-variant);
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-primary);
}

.gravity-confidence-btn-low:hover:not(.gravity-btn-disabled) {
    background: var(--gravity-bg-primary-variant);
    border-color: var(--gravity-border-primary-variant);
    transform: scale(1.05);
}

.gravity-confidence-btn-medium {
    color: var(--gravity-state-warning-dark);
    background: linear-gradient(135deg, var(--gravity-state-warning-light) 0%, var(--gravity-state-warning) 100%);
    border-color: var(--gravity-state-warning);
}

.gravity-confidence-btn-medium:hover:not(.gravity-btn-disabled) {
    background: linear-gradient(135deg, var(--gravity-state-warning) 0%, var(--gravity-state-warning-dark) 100%);
    border-color: var(--gravity-state-warning-dark);
    transform: scale(1.05);
}

.gravity-confidence-btn-high {
    color: var(--gravity-text-inverse);
    background: linear-gradient(135deg, var(--gravity-state-success) 0%, var(--gravity-state-success-dark) 100%);
    border-color: var(--gravity-state-success);
}

.gravity-confidence-btn-high:hover:not(.gravity-btn-disabled) {
    background: linear-gradient(135deg, var(--gravity-state-success-dark) 0%, var(--gravity-state-success) 100%);
    border-color: var(--gravity-state-success-dark);
    transform: scale(1.05);
}

.gravity-confidence-btn-low:active,
.gravity-confidence-btn-medium:active,
.gravity-confidence-btn-high:active {
    transform: scale(0.95);
}

/* Button Disabled State */
.gravity-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Animations */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive Design */
@media (max-width: 640px) {
    .gravity-test-header-layout {
        height: 56px;
    }
    
    .gravity-test-title {
        font-size: var(--gravity-font-size-body);
    }
    
    .gravity-timer-value {
        min-width: 50px;
    }
    
    .gravity-confidence-buttons {
        justify-content: center;
    }
    
    .gravity-confidence-btn-low,
    .gravity-confidence-btn-medium,
    .gravity-confidence-btn-high {
        min-width: 120px;
        font-size: var(--gravity-font-size-xs);
    }
}

/* ========================================
 * components/timeline.css
 * ======================================== */

/**
 * GravityTimeline Component Styles
 *
 * A vertical timeline for displaying sequential events/phases.
 * Perfect for patient charts, activity logs, and progression displays.
 *
 * CSS Variable Mapping:
 * - --gravity-space-3: 24px (large spacing)
 * - --gravity-space-2: 16px (medium spacing)
 * - --gravity-space-sm: 12px (small spacing)
 * - --gravity-space-xs: 4px (extra-small spacing)
 * - --gravity-border-radius-md: 6px (border radius)
 */

/* ==========================================================================
   Timeline Container
   ========================================================================== */

.gravity-timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: var(--gravity-space-3);
}

/* Vertical connector line */
.gravity-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: var(--gravity-space-2);
    width: 2px;
    background: var(--gravity-border-color);
}

/* ==========================================================================
   Timeline Item
   ========================================================================== */

.gravity-timeline-item {
    position: relative;
    padding-bottom: var(--gravity-space-2);
}

/* Last item has no bottom padding */
.gravity-timeline-item:last-child {
    padding-bottom: 0;
}

/* ==========================================================================
   Timeline Marker (Dot)
   ========================================================================== */

.gravity-timeline-marker {
    position: absolute;
    left: calc(-1 * var(--gravity-space-3) + 4px);
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gravity-color-primary);
    border: 2px solid var(--gravity-bg-primary);
    box-shadow: 0 0 0 2px var(--gravity-color-primary);
    z-index: 1;
}

/* ==========================================================================
   Timeline Content
   ========================================================================== */

.gravity-timeline-content {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Timeline Header (Phase Title + Timestamp)
   ========================================================================== */

.gravity-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gravity-space-2);
    padding: var(--gravity-space-sm) var(--gravity-space-2);
    background: var(--gravity-bg-secondary);
    border-radius: var(--gravity-border-radius-md) var(--gravity-border-radius-md) 0 0;
    border: 1px solid var(--gravity-border-color);
    border-bottom: none;
}

/* When there's no body, give header full border radius */
.gravity-timeline-header:only-child {
    border-radius: var(--gravity-border-radius-md);
    border-bottom: 1px solid var(--gravity-border-color);
}

/* ==========================================================================
   Timeline Body (Phase Content)
   ========================================================================== */

.gravity-timeline-body {
    padding: var(--gravity-space-2);
    background: var(--gravity-bg-primary);
    border: 1px solid var(--gravity-border-color);
    border-radius: 0 0 var(--gravity-border-radius-md) var(--gravity-border-radius-md);
}

/* When there's no header, give body full border radius */
.gravity-timeline-content > .gravity-timeline-body:first-child {
    border-radius: var(--gravity-border-radius-md);
}

/* ==========================================================================
   Animation for New Items (Slide In)
   ========================================================================== */

.gravity-timeline-item.gravity-animate-in {
    animation: gravity-timeline-slide-in 0.4s ease-out;
}

@keyframes gravity-timeline-slide-in {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .gravity-timeline-item.gravity-animate-in {
        animation: none;
    }
}

/* ==========================================================================
   Compact Variant
   ========================================================================== */

.gravity-timeline-compact .gravity-timeline-item {
    padding-bottom: var(--gravity-space-sm);
}

.gravity-timeline-compact .gravity-timeline-header {
    padding: var(--gravity-space-xs) var(--gravity-space-sm);
}

.gravity-timeline-compact .gravity-timeline-body {
    padding: var(--gravity-space-sm);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 591px) {
    .gravity-timeline {
        padding-left: var(--gravity-space-2);
    }

    .gravity-timeline-marker {
        left: calc(-1 * var(--gravity-space-2) + 2px);
        width: 8px;
        height: 8px;
    }

    .gravity-timeline::before {
        left: 6px;
    }
}

/* ========================================
 * components/toasts.css
 * ======================================== */

/*
 * Gravity UI 2.0 Toast Notification System
 * 
 * Toast notification components for user feedback
 * Includes positioning, animations, variants, and accessibility
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * TOAST WRAPPER AND POSITIONING
 * ================================ */

/* Toast wrapper to contain all toast containers */
.gravity-toast-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
}

/* Toast container positioning */
.gravity-toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  pointer-events: none;
  z-index: 10001;
}

.gravity-toast-container-top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}

.gravity-toast-container-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.gravity-toast-container-top-right {
  top: 0;
  right: 0;
  align-items: flex-end;
}

.gravity-toast-container-bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-start;
}

.gravity-toast-container-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.gravity-toast-container-bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
}

/* ================================
 * BASE TOAST STYLES
 * ================================ */

.gravity-toast {
  position: relative;
  min-width: 320px;
  max-width: 500px;
  background: var(--gravity-bg-primary);
  border-radius: var(--gravity-radius-lg);
  box-shadow: var(--gravity-shadow-lg);
  overflow: hidden;
  pointer-events: auto;
  transition: all var(--gravity-transition-normal);
  animation: slideIn 0.3s ease;
}

.gravity-toast-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.gravity-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
 * TOAST CONTENT STRUCTURE
 * ================================ */

.gravity-toast-content {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  gap: 0.75rem;
}

/* Toast icon */
.gravity-toast-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

/* Toast body */
.gravity-toast-body {
  flex: 1;
  min-width: 0;
}

.gravity-toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: var(--gravity-text-primary);
}

.gravity-toast-message {
  font-size: 0.875rem;
  color: var(--gravity-text-secondary);
  line-height: 1.5;
  word-wrap: break-word;
}

.gravity-toast-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
}

/* Toast close button */
.gravity-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--gravity-text-secondary);
  transition: color var(--gravity-transition-fast);
  font-size: 1.125rem;
}

.gravity-toast-close:hover {
  color: var(--gravity-text-primary);
}

/* ================================
 * TOAST TYPE VARIANTS
 * ================================ */

.gravity-toast-success {
  border-left: 4px solid var(--gravity-state-success);
}

.gravity-toast-success .gravity-toast-icon {
  color: var(--gravity-state-success);
}

.gravity-toast-success .gravity-toast-title {
  color: var(--gravity-state-success-dark);
}

.gravity-toast-error {
  border-left: 4px solid var(--gravity-state-error);
}

.gravity-toast-error .gravity-toast-icon {
  color: var(--gravity-state-error);
}

.gravity-toast-error .gravity-toast-title {
  color: var(--gravity-state-error-dark);
}

.gravity-toast-warning {
  border-left: 4px solid var(--gravity-state-warning);
}

.gravity-toast-warning .gravity-toast-icon {
  color: var(--gravity-state-warning);
}

.gravity-toast-warning .gravity-toast-title {
  color: var(--gravity-state-warning-dark);
}

.gravity-toast-info {
  border-left: 4px solid var(--gravity-state-info);
}

.gravity-toast-info .gravity-toast-icon {
  color: var(--gravity-state-info);
}

.gravity-toast-info .gravity-toast-title {
  color: var(--gravity-state-info-dark);
}

/* ================================
 * PROGRESS BAR FOR AUTO-CLOSE
 * ================================ */

.gravity-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(var(--gravity-black-rgb, 0, 0, 0), 0.05);
  overflow: hidden;
}

.gravity-toast-progress-bar {
  height: 100%;
  background: currentColor;
  opacity: 0.3;
  animation: progress linear forwards;
}

.gravity-toast-success .gravity-toast-progress-bar {
  background: var(--gravity-state-success);
}

.gravity-toast-error .gravity-toast-progress-bar {
  background: var(--gravity-state-error);
}

.gravity-toast-warning .gravity-toast-progress-bar {
  background: var(--gravity-state-warning);
}

.gravity-toast-info .gravity-toast-progress-bar {
  background: var(--gravity-state-info);
}

/* ================================
 * ANIMATIONS
 * ================================ */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-toast {
    background: var(--gravity-bg-primary);
    box-shadow: var(--gravity-shadow-lg);
  }

  :root:not([data-theme]) .gravity-toast-title {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-toast-message {
    color: var(--gravity-text-secondary);
  }

  :root:not([data-theme]) .gravity-toast-close {
    color: var(--gravity-text-muted);
  }

  :root:not([data-theme]) .gravity-toast-close:hover {
    color: var(--gravity-text-secondary);
  }

  :root:not([data-theme]) .gravity-toast-progress {
    background: rgba(var(--gravity-white-rgb, 255, 255, 255), 0.1);
  }
}

/* ========================================
 * components/toolbar.css
 * ======================================== */

/*
 * Gravity UI 2.0 Toolbar Component
 * 
 * Horizontal action toolbars with button groups, separators, and size variants
 * Includes positioning options, sticky behavior, and comprehensive action states
 * Based on Gravity UI 2.0 Design System specifications
 */

/* ================================
 * TOOLBAR CONTAINER
 * ================================ */

.gravity-toolbar {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-primary);
  border-radius: var(--gravity-radius-md);
}

.gravity-toolbar-bordered {
  border: 1px solid var(--gravity-border-secondary);
}

.gravity-toolbar-filled {
  background: var(--gravity-bg-secondary);
}

.gravity-toolbar-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ================================
 * TOOLBAR CONTENT LAYOUT
 * ================================ */

.gravity-toolbar-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.gravity-toolbar-left {
  justify-content: flex-start;
}

.gravity-toolbar-center {
  justify-content: center;
}

.gravity-toolbar-right {
  justify-content: flex-end;
}

.gravity-toolbar-justify {
  justify-content: space-between;
}

/* ================================
 * TOOLBAR GROUPS AND SEPARATORS
 * ================================ */

.gravity-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.gravity-toolbar-separator {
  width: 1px;
  height: 1.5rem;
  background: var(--gravity-border-primary);
  margin: 0 0.5rem;
}

/* ================================
 * TOOLBAR ACTIONS
 * ================================ */

.gravity-toolbar-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--gravity-radius-sm);
  cursor: pointer;
  transition: all var(--gravity-transition-fast);
}

.gravity-toolbar-action:hover:not(:disabled) {
  background-color: var(--gravity-bg-muted);
}

.gravity-toolbar-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gravity-toolbar-action-primary {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

.gravity-toolbar-action-primary:hover:not(:disabled) {
  background: var(--gravity-brand-primary-dark);
}

.gravity-toolbar-action-danger {
  color: var(--gravity-state-error);
}

.gravity-toolbar-action-danger:hover:not(:disabled) {
  background: var(--gravity-state-error-light);
}

.gravity-toolbar-action-active {
  background: var(--gravity-brand-primary-alpha-10);
  color: var(--gravity-brand-primary);
}

.gravity-toolbar-action-icon-only {
  padding: 0.375rem;
}

/* ================================
 * ACTION BADGES
 * ================================ */

.gravity-toolbar-action-badge {
  padding: 0.125rem 0.375rem;
  background: var(--gravity-state-error);
  color: var(--gravity-color-white);
  border-radius: var(--gravity-radius-lg);
  font-size: 0.75rem;
}

/* ================================
 * TOOLBAR SIZES
 * ================================ */

.gravity-toolbar-small .gravity-toolbar-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.gravity-toolbar-small .gravity-toolbar-action-icon-only {
  padding: 0.25rem;
}

.gravity-toolbar-large .gravity-toolbar-action {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.gravity-toolbar-large .gravity-toolbar-action-icon-only {
  padding: 0.5rem;
}

/* ================================
 * DARK MODE SUPPORT
 * Colors now handled by CSS variables in foundation
 * No explicit overrides needed for data-theme="dark"
 * ================================ */

/* Fallback for systems using prefers-color-scheme without data-theme set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gravity-toolbar {
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-toolbar-filled {
    background: var(--gravity-bg-secondary);
  }

  :root:not([data-theme]) .gravity-toolbar-separator {
    background: var(--gravity-border-primary);
  }

  :root:not([data-theme]) .gravity-toolbar-action {
    color: var(--gravity-text-primary);
  }

  :root:not([data-theme]) .gravity-toolbar-action:hover:not(:disabled) {
    background-color: var(--gravity-bg-muted);
  }

  :root:not([data-theme]) .gravity-toolbar-action-active {
    background: var(--gravity-brand-primary-alpha-20);
    color: var(--gravity-brand-primary-light);
  }

  :root:not([data-theme]) .gravity-toolbar-action-danger {
    color: var(--gravity-state-error-light);
  }

  :root:not([data-theme]) .gravity-toolbar-action-danger:hover:not(:disabled) {
    background: var(--gravity-state-error-dark);
  }
}

/* ========================================
 * components/tree-container.css
 * ======================================== */

/* =============================================================================
   GRAVITY TREE CONTAINER
   Container component for tree visualizations with zoom support
   ============================================================================= */

.gravity-tree-container {
  position: relative;
  clear: both;
}

/* Zoomed state - increases child node sizes */
.gravity-tree-container--zoomed .gravity-tree-node--level-0 {
  font-size: 1.5rem;
}

.gravity-tree-container--zoomed .gravity-tree-node--level-1 {
  font-size: 1.25rem;
}

.gravity-tree-container--zoomed .gravity-tree-node--level-2 {
  font-size: 1.125rem;
}

.gravity-tree-container--zoomed .gravity-tree-node--level-3 {
  font-size: 1rem;
}

.gravity-tree-container--zoomed .gravity-tree-node--level-4 {
  font-size: 0.9375rem;
}

/* ========================================
 * components/tree-node.css
 * ======================================== */

/* =============================================================================
   GRAVITY TREE NODE
   Atomic component for tree/hierarchy visualization
   ============================================================================= */

.gravity-tree-node {
  padding: var(--gravity-spacing-sm, 0.5rem);
  border-radius: var(--gravity-border-radius-sm, 4px);
  cursor: pointer;
  transition: background-color 0.15s ease;
  background-color: rgba(var(--gravity-color-surface-rgb, 248, 249, 250), var(--gravity-tree-node-opacity, 1));
}

.gravity-tree-node:hover {
  background-color: rgba(var(--gravity-color-primary-rgb, 59, 130, 246), 0.1);
}

/* Level-based sizing (font size decreases with depth) */
.gravity-tree-node--level-0 {
  font-size: 1.25rem;
  font-weight: 600;
}

.gravity-tree-node--level-1 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-left: 1rem;
}

.gravity-tree-node--level-2 {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 2rem;
}

.gravity-tree-node--level-3 {
  font-size: 0.9375rem;
  margin-left: 3rem;
}

.gravity-tree-node--level-4 {
  font-size: 0.875rem;
  margin-left: 4rem;
}

.gravity-tree-node--level-5,
.gravity-tree-node--level-6,
.gravity-tree-node--level-7,
.gravity-tree-node--level-8 {
  font-size: 0.8125rem;
  margin-left: 5rem;
}

/* Indicator-based coloring (0-3 levels) */
.gravity-tree-node--indicator-0 {
  border-left: 3px solid var(--gravity-color-danger, #dc3545);
}

.gravity-tree-node--indicator-1 {
  border-left: 3px solid var(--gravity-color-warning, #ffc107);
}

.gravity-tree-node--indicator-2 {
  border-left: 3px solid var(--gravity-color-info, #0dcaf0);
}

.gravity-tree-node--indicator-3 {
  border-left: 3px solid var(--gravity-color-success, #198754);
}

/* HSL color overrides via CSS variables */
.gravity-tree-node[style*="--gravity-tree-node-bg"] {
  background-color: var(--gravity-tree-node-bg) !important;
}

.gravity-tree-node[style*="--gravity-tree-node-color"] {
  color: var(--gravity-tree-node-color) !important;
}

/* ========================================
 * components/trend-indicator.css
 * ======================================== */

/* =============================================================================
   GRAVITY TREND INDICATOR
   Atomic component for visualizing growth/trend values with rotated arrow

   Structure:
   - Filled circular background with HSL color gradient (red → yellow → green)
   - White arrow icon rotated based on growth value
   - Growth +1: arrow points up (green background)
   - Growth 0: arrow points right (yellow background)
   - Growth -1: arrow points down (red background)
   ============================================================================= */

.gravity-trend-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--gravity-trend-size, 2em);
  height: var(--gravity-trend-size, 2em);
  min-width: var(--gravity-trend-size, 2em);
  min-height: var(--gravity-trend-size, 2em);
  flex-shrink: 0; /* Prevent squishing in flex containers */
  transform: rotate(var(--gravity-trend-rotation, 0deg));
}

/* Filled circular background */
.gravity-trend-indicator .gravity-trend-background {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Background color set via inline style based on growth value */
}

/* Arrow icon - rotates with container, contrasts against background */
.gravity-trend-indicator .gravity-trend-arrow {
  position: relative;
  z-index: 1;
  font-size: calc(var(--gravity-trend-size, 2em) * 0.5);
  /* Color set via inline style (white for contrast) */
}

/* Size variants */
.gravity-trend-indicator--sm {
  font-size: 0.75rem;
}

.gravity-trend-indicator--lg {
  font-size: 1.5rem;
}

/* Position variants */

/* Absolute center: vertically centered within a position:relative parent.
   Useful for table headers where the indicator should stay centered
   regardless of text wrap. Parent must have position:relative. */
.gravity-trend-indicator--absolute-center {
  position: absolute;
  top: 50%;
  right: 0;
  /* Combine vertical centering with the rotation transform */
  transform: translateY(-50%) rotate(var(--gravity-trend-rotation, 0deg));
}

/* ========================================
 * components/volume-controls.css
 * ======================================== */

/* ===============================================
 * GRAVITY UI - VOLUME CONTROLS COMPONENT
 * ===============================================
 * Volume slider, mute button, and level indicators
 * Supports range input styling and visual feedback
 */

/* ====================================
 * VOLUME CONTAINER
 * ==================================== */

.gravity-volume-container {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-2);
  min-width: 100px; /* Prevent collapse */
}

/* ====================================
 * VOLUME SLIDER
 * ==================================== */

.gravity-volume-slider {
  /* Reset browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Layout */
  width: 80px;
  height: 4px;
  outline: none;
  cursor: pointer;
  
  /* Visual */
  background: var(--gravity-bg-tertiary);
  border-radius: var(--gravity-border-radius-full);
  transition: height 0.2s ease;
}

.gravity-volume-slider:hover {
  height: 6px;
}

.gravity-volume-slider:focus-visible {
  box-shadow: 0 0 0 2px var(--gravity-color-focus);
}

/* ====================================
 * WEBKIT SLIDER STYLING (Chrome, Safari)
 * ==================================== */

.gravity-volume-slider::-webkit-slider-track {
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  
  /* Visual */
  height: 4px;
  background: var(--gravity-bg-tertiary);
  border-radius: var(--gravity-border-radius-full);
}

.gravity-volume-slider:hover::-webkit-slider-track {
  height: 6px;
}

.gravity-volume-slider::-webkit-slider-thumb {
  /* Reset */
  -webkit-appearance: none;
  appearance: none;
  
  /* Layout */
  width: 16px;
  height: 16px;
  margin-top: -6px; /* Center on track */
  cursor: pointer;
  
  /* Visual */
  background: var(--gravity-color-primary);
  border: 2px solid var(--gravity-bg-primary);
  border-radius: 50%;
  box-shadow: var(--gravity-shadow-small);
  
  /* Interaction */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.gravity-volume-slider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: var(--gravity-shadow-medium);
}

.gravity-volume-slider:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* ====================================
 * FIREFOX SLIDER STYLING
 * ==================================== */

.gravity-volume-slider::-moz-range-track {
  height: 4px;
  background: var(--gravity-bg-tertiary);
  border: none;
  border-radius: var(--gravity-border-radius-full);
}

.gravity-volume-slider:hover::-moz-range-track {
  height: 6px;
}

.gravity-volume-slider::-moz-range-thumb {
  /* Reset */
  border: none;
  
  /* Layout */
  width: 16px;
  height: 16px;
  cursor: pointer;
  
  /* Visual */
  background: var(--gravity-color-primary);
  border: 2px solid var(--gravity-bg-primary);
  border-radius: 50%;
  box-shadow: var(--gravity-shadow-small);
  
  /* Interaction */
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.gravity-volume-slider:hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: var(--gravity-shadow-medium);
}

.gravity-volume-slider:active::-moz-range-thumb {
  transform: scale(1.2);
}

/* ====================================
 * VOLUME BUTTON (MUTE TOGGLE)
 * ==================================== */

.gravity-volume-btn {
  /* Extends base .gravity-audio-btn styles */
  position: relative;
}

.gravity-volume-btn[data-volume="muted"] {
  color: var(--gravity-color-error);
}

.gravity-volume-btn[data-volume="low"] {
  color: var(--gravity-text-secondary);
}

.gravity-volume-btn[data-volume="medium"],
.gravity-volume-btn[data-volume="high"] {
  color: var(--gravity-color-primary);
}

/* ====================================
 * VOLUME LEVEL INDICATORS
 * ==================================== */

.gravity-volume-indicator {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: var(--gravity-space-1);
}

.gravity-volume-bar {
  width: 2px;
  background: var(--gravity-bg-tertiary);
  border-radius: var(--gravity-border-radius-full);
  transition: background-color 0.2s ease;
}

.gravity-volume-bar:nth-child(1) { height: 8px; }
.gravity-volume-bar:nth-child(2) { height: 12px; }
.gravity-volume-bar:nth-child(3) { height: 16px; }
.gravity-volume-bar:nth-child(4) { height: 20px; }

/* Active states based on volume level */
.gravity-volume-container[data-volume-level="1"] .gravity-volume-bar:nth-child(1) {
  background: var(--gravity-color-primary);
}

.gravity-volume-container[data-volume-level="2"] .gravity-volume-bar:nth-child(1),
.gravity-volume-container[data-volume-level="2"] .gravity-volume-bar:nth-child(2) {
  background: var(--gravity-color-primary);
}

.gravity-volume-container[data-volume-level="3"] .gravity-volume-bar:nth-child(1),
.gravity-volume-container[data-volume-level="3"] .gravity-volume-bar:nth-child(2),
.gravity-volume-container[data-volume-level="3"] .gravity-volume-bar:nth-child(3) {
  background: var(--gravity-color-primary);
}

.gravity-volume-container[data-volume-level="4"] .gravity-volume-bar {
  background: var(--gravity-color-primary);
}

/* Muted state */
.gravity-volume-container[data-muted="true"] .gravity-volume-bar {
  background: var(--gravity-color-error);
  opacity: 0.5;
}

/* ====================================
 * VOLUME TOOLTIP
 * ==================================== */

.gravity-volume-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--gravity-space-2);
  
  /* Visual */
  background: var(--gravity-bg-overlay);
  color: var(--gravity-text-inverse);
  padding: var(--gravity-space-1) var(--gravity-space-2);
  border-radius: var(--gravity-border-radius-sm);
  font-size: var(--gravity-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  
  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: var(--gravity-z-tooltip);
}

.gravity-volume-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gravity-bg-overlay);
}

.gravity-volume-container:hover .gravity-volume-tooltip {
  opacity: 1;
}

/* ====================================
 * SIZE VARIANTS
 * ==================================== */

.gravity-volume-container[data-size="compact"] {
  gap: var(--gravity-space-1);
  min-width: 80px;
}

.gravity-volume-container[data-size="compact"] .gravity-volume-slider {
  width: 60px;
}

.gravity-volume-container[data-size="compact"] .gravity-volume-slider::-webkit-slider-thumb,
.gravity-volume-container[data-size="compact"] .gravity-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
}

.gravity-volume-container[data-size="large"] {
  gap: var(--gravity-space-3);
  min-width: 120px;
}

.gravity-volume-container[data-size="large"] .gravity-volume-slider {
  width: 100px;
}

.gravity-volume-container[data-size="large"] .gravity-volume-slider::-webkit-slider-thumb,
.gravity-volume-container[data-size="large"] .gravity-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
}

/* ====================================
 * STATE VARIANTS
 * ==================================== */

.gravity-volume-container[data-state="disabled"] {
  opacity: 0.5;
  pointer-events: none;
}

.gravity-volume-container[data-state="disabled"] .gravity-volume-slider {
  cursor: not-allowed;
}

/* ====================================
 * VERTICAL VOLUME SLIDER (OPTIONAL)
 * ==================================== */

.gravity-volume-slider[data-orientation="vertical"] {
  width: 4px;
  height: 80px;
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
  
  /* Rotate for other browsers */
  transform: rotate(-90deg);
  transform-origin: center;
}

.gravity-volume-container[data-orientation="vertical"] {
  flex-direction: column;
  min-width: auto;
  min-height: 100px;
}

/* ====================================
 * RESPONSIVE DESIGN
 * ==================================== */

/* Tablet */
@media (max-width: 768px) {
  .gravity-volume-slider {
    width: 60px; /* Shorter on tablet */
  }
  
  .gravity-volume-slider::-webkit-slider-thumb,
  .gravity-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px; /* Larger touch target */
  }
  
  .gravity-volume-indicator {
    margin-left: var(--gravity-space-0-5);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .gravity-volume-container {
    /* Often hidden on mobile to save space */
    display: none;
  }
  
  .gravity-volume-container[data-mobile-visible="true"] {
    display: flex;
    gap: var(--gravity-space-1);
    min-width: 60px;
  }
  
  .gravity-volume-container[data-mobile-visible="true"] .gravity-volume-slider {
    width: 40px; /* Very compact */
  }
  
  .gravity-volume-container[data-mobile-visible="true"] .gravity-volume-indicator {
    display: none; /* Hide visual indicators */
  }
}

/* ====================================
 * THEME SUPPORT
 * ==================================== */

[data-theme="dark"] .gravity-volume-slider {
  background: var(--gravity-bg-tertiary);
}

[data-theme="dark"] .gravity-volume-slider::-webkit-slider-track,
[data-theme="dark"] .gravity-volume-slider::-moz-range-track {
  background: var(--gravity-bg-tertiary);
}

[data-theme="dark"] .gravity-volume-slider::-webkit-slider-thumb,
[data-theme="dark"] .gravity-volume-slider::-moz-range-thumb {
  border-color: var(--gravity-bg-primary);
  box-shadow: var(--gravity-shadow-dark-small);
}

[data-theme="dark"] .gravity-volume-tooltip {
  background: var(--gravity-bg-overlay);
}

/* ====================================
 * ACCESSIBILITY
 * ==================================== */

.gravity-volume-slider[aria-label] {
  /* Screen reader support */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .gravity-volume-slider {
    border: 1px solid var(--gravity-border-primary);
  }
  
  .gravity-volume-slider::-webkit-slider-thumb,
  .gravity-volume-slider::-moz-range-thumb {
    border-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gravity-volume-slider,
  .gravity-volume-slider::-webkit-slider-thumb,
  .gravity-volume-slider::-moz-range-thumb,
  .gravity-volume-bar {
    transition: none;
  }
  
  .gravity-volume-slider:hover::-webkit-slider-thumb,
  .gravity-volume-slider:hover::-moz-range-thumb {
    transform: none;
  }
}

/* ====================================
 * TOUCH OPTIMIZATIONS
 * ==================================== */

@media (pointer: coarse) {
  .gravity-volume-slider {
    /* Larger touch target */
    height: 6px;
    padding: var(--gravity-space-2) 0;
  }
  
  .gravity-volume-slider::-webkit-slider-thumb,
  .gravity-volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  
  .gravity-volume-tooltip {
    /* Hide tooltip on touch devices */
    display: none;
  }
}

/* ========================================
 * themes/dark.css
 * ======================================== */

/*
 * Gravity UI 2.0 Dark Theme
 *
 * Dark theme implementation with inverted color scheme
 * Applied via data-theme="dark" on html element
 */

/* Dark theme overrides */
[data-theme="dark"] {
  /* Text Colors - Inverted for dark backgrounds */
  --gravity-text-primary: var(--gravity-color-white);
  --gravity-text-secondary: var(--gravity-color-gray-300);
  --gravity-text-muted: var(--gravity-color-gray-400);
  --gravity-text-inverse: var(--gravity-color-gray-900);
  --gravity-text-link: var(--gravity-color-primary-cyan);
  --gravity-text-link-hover: var(--gravity-color-primary-teal);

  /* Background Colors - Dark spectrum */
  --gravity-bg-primary: var(--gravity-color-gray-900);
  --gravity-bg-secondary: var(--gravity-color-gray-800);
  --gravity-bg-muted: var(--gravity-color-gray-700);
  --gravity-bg-inverse: var(--gravity-color-white);
  --gravity-bg-overlay: rgba(0, 0, 0, 0.75);

  /* Border Colors - Lighter for dark backgrounds */
  --gravity-border-primary: var(--gravity-color-gray-600);
  --gravity-border-secondary: var(--gravity-color-gray-700);
  --gravity-border-focus: var(--gravity-color-primary-cyan);
  --gravity-border-error: var(--gravity-color-secondary-red);
  --gravity-border-success: var(--gravity-color-secondary-green);

  /* Icon Colors - Adjusted for dark backgrounds */
  --gravity-icon-color-inactive: var(--gravity-color-gray-400);
  --gravity-icon-color-active: var(--gravity-color-primary-cyan);
  --gravity-icon-color-hover: var(--gravity-color-primary-teal);
  --gravity-icon-color-focus: var(--gravity-color-primary-cyan);
  --gravity-icon-color-pressed: var(--gravity-color-primary-teal);

  /* Component Adjustments */
  --gravity-table-header-bg: var(--gravity-color-gray-800);
  --gravity-table-row-hover-bg: var(--gravity-color-gray-700);
  --gravity-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --gravity-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

  /* Ensure contrast for accessibility */
  --gravity-text-contrast-ratio: 12; /* High contrast for dark backgrounds */

  /* Dark theme shadow adjustments - More visible on dark */
  --gravity-shadow-color: rgba(0, 0, 0, 0.3);
  --gravity-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
  --gravity-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --gravity-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --gravity-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --gravity-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 8px 10px -6px rgb(0 0 0 / 0.25);

  /* Form element adjustments for dark backgrounds */
  --gravity-input-bg: var(--gravity-color-gray-800);
  --gravity-input-border: var(--gravity-color-gray-600);
  --gravity-input-focus-border: var(--gravity-color-primary-cyan);
  --gravity-input-text: var(--gravity-color-white);
  --gravity-input-placeholder: var(--gravity-color-gray-400);

  /* Button adjustments for dark theme */
  --gravity-btn-default-bg: var(--gravity-color-gray-800);
  --gravity-btn-default-border: var(--gravity-color-gray-600);
  --gravity-btn-default-text: var(--gravity-color-white);
  --gravity-btn-default-hover-bg: var(--gravity-color-gray-700);
  --gravity-btn-default-hover-border: var(--gravity-brand-primary);

  --gravity-btn-secondary-text: var(--gravity-color-primary-cyan);
  --gravity-btn-secondary-border: var(--gravity-color-primary-cyan);
  --gravity-btn-secondary-hover-bg: var(--gravity-color-primary-cyan);
  --gravity-btn-secondary-hover-text: var(--gravity-color-gray-900);

  --gravity-btn-ghost-text: var(--gravity-color-gray-300);
  --gravity-btn-ghost-hover-bg: var(--gravity-color-gray-700);
  --gravity-btn-ghost-hover-text: var(--gravity-color-white);

  /* Navigation and header adjustments */
  --gravity-nav-bg: var(--gravity-color-gray-900);
  --gravity-nav-border: var(--gravity-color-gray-700);
  --gravity-nav-text: var(--gravity-color-white);
  --gravity-nav-text-hover: var(--gravity-color-primary-cyan);
  --gravity-nav-text-active: var(--gravity-color-primary-teal);

  /* Modal and overlay adjustments */
  --gravity-modal-backdrop: rgba(0, 0, 0, 0.8);
  --gravity-modal-bg: var(--gravity-color-gray-800);
  --gravity-modal-border: var(--gravity-color-gray-600);

  /* Code and pre-formatted text */
  --gravity-code-bg: var(--gravity-color-gray-800);
  --gravity-code-text: var(--gravity-color-gray-200);
  --gravity-code-border: var(--gravity-color-gray-600);

  /* Selection colors */
  --gravity-selection-bg: var(--gravity-color-primary-teal);
  --gravity-selection-text: var(--gravity-color-white);

  /* Focus ring adjustments */
  --gravity-focus-ring-color: var(--gravity-color-primary-cyan);
  --gravity-focus-ring-width: 2px;
  --gravity-focus-ring-offset: 2px;
}

/* ================================
 * DARK MODE SPECIFIC OVERRIDES
 * Component-level adjustments
 * ================================ */

/* Enhanced focus states for dark mode */
[data-theme="dark"] *:focus-visible {
  outline: 2px solid var(--gravity-focus-ring-color);
  outline-offset: var(--gravity-focus-ring-offset);
}

/* Text selection styling */
[data-theme="dark"] ::selection {
  background-color: var(--gravity-selection-bg);
  color: var(--gravity-selection-text);
}

/* Scrollbar styling */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--gravity-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gravity-color-gray-600);
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gravity-color-gray-500);
}

/* Code blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--gravity-code-bg);
  color: var(--gravity-code-text);
  border: 1px solid var(--gravity-code-border);
}

/* Image adjustments - reduce glare */
[data-theme="dark"] img {
  opacity: 0.9;
  transition: opacity var(--gravity-transition-fast);
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* ================================
 * DEVEXPRESS DARK MODE OVERRIDES
 * Override DevExpress OfficeWhite theme
 * ================================ */

/* DevExpress CSS Variables */
[data-theme="dark"] {
  --dx-color-background: var(--gravity-bg-primary);
  --dx-color-text: var(--gravity-text-primary);
  --dx-color-text-secondary: var(--gravity-text-secondary);
  --dx-color-border: var(--gravity-border-primary);
}

/* Form Layout Components */
[data-theme="dark"] .dx-formlayout {
  background: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-formlayout-group-caption {
  color: var(--gravity-text-primary);
  border-bottom-color: var(--gravity-border-primary);
}

[data-theme="dark"] .dx-formlayout-item-caption {
  color: var(--gravity-text-secondary);
}

/* Text Editors and Inputs */
[data-theme="dark"] .dx-texteditor {
  background: var(--gravity-input-bg);
  border-color: var(--gravity-input-border);
  color: var(--gravity-input-text);
}

[data-theme="dark"] .dx-texteditor-input {
  background: var(--gravity-input-bg);
  color: var(--gravity-input-text);
}

[data-theme="dark"] .dx-texteditor.dx-state-focused {
  border-color: var(--gravity-input-focus-border);
}

[data-theme="dark"] .dx-placeholder::before {
  color: var(--gravity-input-placeholder);
}

/* Dropdown and ComboBox */
[data-theme="dark"] .dx-dropdowneditor-dropdown {
  background: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .dx-list-item {
  background: var(--gravity-bg-secondary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-list-item:hover,
[data-theme="dark"] .dx-list-item.dx-state-hover {
  background: var(--gravity-bg-muted);
}

[data-theme="dark"] .dx-list-item.dx-list-item-selected {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

/* Popup and Modal Components */
[data-theme="dark"] .dx-popup-wrapper .dx-overlay-content {
  background: var(--gravity-modal-bg);
  border-color: var(--gravity-modal-border);
}

[data-theme="dark"] .dx-popup-title {
  background: var(--gravity-bg-secondary);
  border-bottom-color: var(--gravity-border-primary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-popup-content {
  background: var(--gravity-modal-bg);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-popup-bottom {
  background: var(--gravity-bg-muted);
  border-top-color: var(--gravity-border-primary);
}

/* Data Grid */
[data-theme="dark"] .dx-datagrid {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-primary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-datagrid-headers {
  background: var(--gravity-table-header-bg);
  color: var(--gravity-text-primary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-primary);
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover,
[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-state-hover {
  background: var(--gravity-table-row-hover-bg);
}

[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-selection {
  background: var(--gravity-bg-muted);
}

/* Charts */
[data-theme="dark"] .dx-chart,
[data-theme="dark"] .dx-piechart {
  background: var(--gravity-bg-primary);
}

[data-theme="dark"] .dx-chart-title,
[data-theme="dark"] .dx-piechart-title {
  fill: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-chart-axis-label,
[data-theme="dark"] .dx-chart-legend {
  fill: var(--gravity-text-secondary);
}

[data-theme="dark"] .dx-chart-tooltip {
  background: var(--gravity-bg-muted);
  border-color: var(--gravity-border-primary);
  color: var(--gravity-text-primary);
}

/* Tag Box */
[data-theme="dark"] .dx-tagbox {
  background: var(--gravity-input-bg);
  border-color: var(--gravity-input-border);
}

[data-theme="dark"] .dx-tagbox-tag {
  background: var(--gravity-bg-muted);
  border-color: var(--gravity-border-primary);
  color: var(--gravity-text-primary);
}

/* Buttons */
[data-theme="dark"] .dx-button {
  background: var(--gravity-btn-default-bg);
  border-color: var(--gravity-btn-default-border);
  color: var(--gravity-btn-default-text);
}

[data-theme="dark"] .dx-button:hover,
[data-theme="dark"] .dx-button.dx-state-hover {
  background: var(--gravity-btn-default-hover-bg);
  border-color: var(--gravity-btn-default-hover-border);
}

[data-theme="dark"] .dx-button-mode-contained.dx-button-default {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

/* Calendar and Date Pickers */
[data-theme="dark"] .dx-calendar {
  background: var(--gravity-bg-secondary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-calendar-cell {
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-calendar-cell.dx-state-hover {
  background: var(--gravity-bg-muted);
}

[data-theme="dark"] .dx-calendar-cell.dx-calendar-selected-date {
  background: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

[data-theme="dark"] .dx-calendar-navigator {
  background: var(--gravity-bg-muted);
  color: var(--gravity-text-primary);
}

/* Loading Indicator */
[data-theme="dark"] .dx-loadindicator-wrapper {
  background: rgba(0, 0, 0, 0.75);
}

/* DevExpress Scrollbar */
[data-theme="dark"] .dx-scrollable-scrollbar {
  background: var(--gravity-bg-muted);
}

[data-theme="dark"] .dx-scrollable-scroll {
  background: var(--gravity-color-gray-600);
}

[data-theme="dark"] .dx-scrollable-scroll:hover {
  background: var(--gravity-color-gray-500);
}

/* Overlay backdrop */
[data-theme="dark"] .dx-overlay-shader {
  background: var(--gravity-modal-backdrop);
}

/* ========================================
 * themes/light.css
 * ======================================== */

/*
 * Gravity UI 2.0 Light Theme
 * 
 * Default light theme implementation
 * This is the default theme and values are already defined in variables.css
 * This file exists for explicit theme switching and consistency
 */

/* Light theme - only applies when explicitly set via data-theme="light" */
/* Default light values are in variables.css, this handles explicit theme switching */
[data-theme="light"] {
  /* Text Colors */
  --gravity-text-primary: var(--gravity-color-gray-900);
  --gravity-text-secondary: var(--gravity-color-gray-700);
  --gravity-text-muted: var(--gravity-color-gray-800);  /* #6A7070 - readable on light backgrounds */
  --gravity-text-inverse: var(--gravity-color-white);
  --gravity-text-link: var(--gravity-brand-primary);
  --gravity-text-link-hover: var(--gravity-color-primary-cyan);
  
  /* Background Colors */
  --gravity-bg-primary: var(--gravity-color-white);
  --gravity-bg-secondary: var(--gravity-color-gray-100);
  --gravity-bg-muted: var(--gravity-color-gray-200);
  --gravity-bg-inverse: var(--gravity-color-gray-900);
  --gravity-bg-overlay: rgba(27, 54, 93, 0.75);
  
  /* Border Colors */
  --gravity-border-primary: var(--gravity-color-gray-300);
  --gravity-border-secondary: var(--gravity-color-gray-200);
  --gravity-border-focus: var(--gravity-brand-primary);
  --gravity-border-error: var(--gravity-color-secondary-red);
  --gravity-border-success: var(--gravity-color-secondary-green);
  
  /* Icon Colors */
  --gravity-icon-color-inactive: var(--gravity-color-gray-500);
  --gravity-icon-color-active: var(--gravity-brand-primary);
  --gravity-icon-color-hover: var(--gravity-color-primary-cyan);
  --gravity-icon-color-focus: var(--gravity-brand-primary);
  --gravity-icon-color-pressed: var(--gravity-color-primary-navy);
  
  /* Component Adjustments */
  --gravity-table-header-bg: var(--gravity-bg-secondary);
  --gravity-table-row-hover-bg: var(--gravity-bg-muted);
  --gravity-card-shadow: var(--gravity-shadow-sm);
  --gravity-card-shadow-hover: var(--gravity-shadow-md);
}

/* Light theme specific adjustments */
[data-theme="light"] {
  /* Ensure high contrast for accessibility */
  --gravity-text-contrast-ratio: 7; /* WCAG AAA compliance */
  
  /* Light theme specific shadow adjustments */
  --gravity-shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Form element adjustments for light backgrounds */
  --gravity-input-bg: var(--gravity-bg-primary);
  --gravity-input-border: var(--gravity-border-primary);
  --gravity-input-focus-border: var(--gravity-brand-primary);
  
  /* Button adjustments for light theme */
  --gravity-btn-default-bg: var(--gravity-bg-primary);
  --gravity-btn-default-border: var(--gravity-border-primary);
  --gravity-btn-default-text: var(--gravity-text-primary);
  
  /* Navigation and header adjustments */
  --gravity-nav-bg: var(--gravity-bg-primary);
  --gravity-nav-border: var(--gravity-border-secondary);
  --gravity-nav-text: var(--gravity-text-primary);
}

/* ========================================
 * themes/white-label.css
 * ======================================== */

/*
 * Gravity UI 2.0 White Label Theme Template
 * 
 * Customizable theme for white-label implementations
 * Override brand colors and key visual elements
 * 
 * Usage:
 * 1. Customize the CSS custom properties below
 * 2. Apply via <html data-theme="white-label"> or include after main CSS
 * 3. Or override specific variables in your own CSS
 */

/* ================================
 * WHITE LABEL BRAND CUSTOMIZATION
 * ================================ */

:root,
[data-theme="white-label"] {
  /* ========================================
   * BRAND COLOR OVERRIDES
   * Replace these with your brand colors
   * ======================================== */
  
  /* Primary Brand Colors - CUSTOMIZE THESE */
  --gravity-brand-primary: #2563eb;        /* Your primary brand color */
  --gravity-brand-secondary: #1e40af;      /* Your secondary brand color */
  --gravity-brand-accent: #f59e0b;         /* Your accent color */
  
  /* Extended Brand Palette - Optional Customization */
  --gravity-brand-primary-light: #3b82f6;  /* Lighter version of primary */
  --gravity-brand-primary-dark: #1d4ed8;   /* Darker version of primary */
  --gravity-brand-secondary-light: #2563eb; /* Lighter version of secondary */
  --gravity-brand-secondary-dark: #1e3a8a;  /* Darker version of secondary */
  
  /* ========================================
   * SEMANTIC COLOR ASSIGNMENTS
   * These automatically use your brand colors
   * ======================================== */
  
  /* Text Colors */
  --gravity-text-link: var(--gravity-brand-primary);
  --gravity-text-link-hover: var(--gravity-brand-primary-light);
  
  /* Interactive Elements */
  --gravity-border-focus: var(--gravity-brand-primary);
  --gravity-icon-color-active: var(--gravity-brand-primary);
  --gravity-icon-color-hover: var(--gravity-brand-primary-light);
  --gravity-icon-color-focus: var(--gravity-brand-primary);
  --gravity-icon-color-pressed: var(--gravity-brand-primary-dark);
  
  /* ========================================
   * OPTIONAL CUSTOMIZATIONS
   * Uncomment and modify as needed
   * ======================================== */
  
  /* Custom Typography */
  /*
  --gravity-font-family: "Your Custom Font", "Helvetica Neue", sans-serif;
  --gravity-font-weight-regular: 400;
  --gravity-font-weight-semibold: 600;
  */
  
  /* Custom Spacing Scale */
  /*
  --gravity-space-base: 8px;
  --gravity-space-1: calc(var(--gravity-space-base) * 1);
  --gravity-space-2: calc(var(--gravity-space-base) * 2);
  --gravity-space-3: calc(var(--gravity-space-base) * 3);
  */
  
  /* Custom Border Radius */
  /*
  --gravity-border-radius-sm: 4px;
  --gravity-border-radius-md: 8px;
  --gravity-border-radius-lg: 12px;
  --gravity-border-radius-xl: 16px;
  */
  
  /* Custom Shadows */
  /*
  --gravity-shadow-brand: 0 4px 14px 0 rgba(var(--gravity-brand-primary-rgb), 0.1);
  --gravity-shadow-brand-hover: 0 6px 20px 0 rgba(var(--gravity-brand-primary-rgb), 0.15);
  */
}

/* ================================
 * COMPONENT CUSTOMIZATIONS
 * ================================ */

/* Custom Button Styles */
[data-theme="white-label"] .gravity-btn-primary {
  background-color: var(--gravity-brand-primary);
  border-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

[data-theme="white-label"] .gravity-btn-primary:hover {
  background-color: var(--gravity-brand-primary-light);
  border-color: var(--gravity-brand-primary-light);
  box-shadow: 0 4px 14px 0 rgba(var(--gravity-brand-primary-rgb, 37, 99, 235), 0.15);
}

[data-theme="white-label"] .gravity-btn-primary:active {
  background-color: var(--gravity-brand-primary-dark);
  border-color: var(--gravity-brand-primary-dark);
}

[data-theme="white-label"] .gravity-btn-secondary {
  color: var(--gravity-brand-primary);
  border-color: var(--gravity-brand-primary);
}

[data-theme="white-label"] .gravity-btn-secondary:hover {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

[data-theme="white-label"] .gravity-btn-attention {
  background-color: var(--gravity-brand-accent);
  border-color: var(--gravity-brand-accent);
  color: var(--gravity-color-white);
}

/* Custom Link Styles */
[data-theme="white-label"] a {
  color: var(--gravity-brand-primary);
}

[data-theme="white-label"] a:hover {
  color: var(--gravity-brand-primary-light);
}

/* Custom Focus Indicators */
[data-theme="white-label"] *:focus-visible {
  outline: 2px solid var(--gravity-brand-primary);
  outline-offset: 2px;
}

/* Custom Form Elements */
[data-theme="white-label"] input:focus,
[data-theme="white-label"] textarea:focus,
[data-theme="white-label"] select:focus {
  border-color: var(--gravity-brand-primary);
  box-shadow: 0 0 0 2px rgba(var(--gravity-brand-primary-rgb, 37, 99, 235), 0.1);
}

/* ================================
 * DARK MODE WHITE LABEL OVERRIDES
 * ================================ */

[data-theme="dark"][data-white-label="true"],
[data-theme="white-label-dark"] {
  /* Adjust brand colors for dark mode */
  --gravity-brand-primary: #3b82f6;        /* Lighter primary for dark backgrounds */
  --gravity-brand-secondary: #2563eb;      /* Lighter secondary for dark backgrounds */
  --gravity-brand-accent: #fbbf24;         /* Lighter accent for dark backgrounds */
  
  /* Text and interactive adjustments */
  --gravity-text-link: var(--gravity-brand-primary);
  --gravity-text-link-hover: var(--gravity-brand-primary-light);
  --gravity-border-focus: var(--gravity-brand-primary);
}

/* ================================
 * ACCESSIBILITY CONSIDERATIONS
 * ================================ */

/* Ensure proper contrast ratios with custom colors */
[data-theme="white-label"] {
  /* Add high contrast mode adjustments if needed */
}

@media (prefers-contrast: high) {
  [data-theme="white-label"] {
    --gravity-brand-primary: #1e3a8a; /* Higher contrast version */
    --gravity-brand-secondary: #1e40af;
  }
}

/* ================================
 * PRINT STYLES FOR WHITE LABEL
 * ================================ */

@media print {
  [data-theme="white-label"] .gravity-btn-primary,
  [data-theme="white-label"] .gravity-btn-secondary {
    background: var(--gravity-color-white) !important;
    color: var(--gravity-color-black) !important;
    border: 1px solid var(--gravity-color-black) !important;
  }
}

/* ================================
 * EXAMPLE IMPLEMENTATIONS
 * ================================ */

/*
Example 1: Blue Corporate Theme
[data-theme="corporate-blue"] {
  --gravity-brand-primary: #1e40af;
  --gravity-brand-secondary: #1e3a8a;
  --gravity-brand-accent: #f59e0b;
}

Example 2: Green Environment Theme
[data-theme="green-theme"] {
  --gravity-brand-primary: #059669;
  --gravity-brand-secondary: #047857;
  --gravity-brand-accent: #f59e0b;
}

Example 3: Purple Creative Theme
[data-theme="purple-creative"] {
  --gravity-brand-primary: #7c3aed;
  --gravity-brand-secondary: #6d28d9;
  --gravity-brand-accent: #f59e0b;
}
*/

/* ========================================
 * utilities/animations.css
 * ======================================== */

/*
 * Gravity UI 2.0 Animation Utilities
 * 
 * Utility classes for transitions, transforms, and animations
 * Respects user preferences for reduced motion
 */

/* ================================
 * TRANSITION UTILITIES
 * ================================ */

.gravity-transition-none { transition: none; }
.gravity-transition-all { transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }
.gravity-transition { transition: all var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }
.gravity-transition-colors { transition: color var(--gravity-transition-normal) var(--gravity-easing-ease-in-out), background-color var(--gravity-transition-normal) var(--gravity-easing-ease-in-out), border-color var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }
.gravity-transition-opacity { transition: opacity var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }
.gravity-transition-shadow { transition: box-shadow var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }
.gravity-transition-transform { transition: transform var(--gravity-transition-normal) var(--gravity-easing-ease-in-out); }

/* ================================
 * TRANSITION DURATION
 * ================================ */

.gravity-duration-fast { transition-duration: var(--gravity-transition-fast); }
.gravity-duration-normal { transition-duration: var(--gravity-transition-normal); }
.gravity-duration-slow { transition-duration: var(--gravity-transition-slow); }

/* ================================
 * TRANSITION TIMING FUNCTION
 * ================================ */

.gravity-ease-linear { transition-timing-function: var(--gravity-easing-ease); }
.gravity-ease-in { transition-timing-function: var(--gravity-easing-ease-in); }
.gravity-ease-out { transition-timing-function: var(--gravity-easing-ease-out); }
.gravity-ease-in-out { transition-timing-function: var(--gravity-easing-ease-in-out); }

/* ================================
 * TRANSFORM UTILITIES
 * ================================ */

.gravity-transform { transform: translateX(var(--gravity-translate-x, 0)) translateY(var(--gravity-translate-y, 0)) rotate(var(--gravity-rotate, 0)) skewX(var(--gravity-skew-x, 0)) skewY(var(--gravity-skew-y, 0)) scaleX(var(--gravity-scale-x, 1)) scaleY(var(--gravity-scale-y, 1)); }
.gravity-transform-none { transform: none; }

/* ================================
 * TRANSLATE UTILITIES
 * ================================ */

.gravity-translate-x-0 { --gravity-translate-x: 0px; }
.gravity-translate-x-1 { --gravity-translate-x: var(--gravity-space-1); }
.gravity-translate-x-2 { --gravity-translate-x: var(--gravity-space-2); }
.gravity-translate-x-3 { --gravity-translate-x: var(--gravity-space-3); }
.gravity-translate-x-4 { --gravity-translate-x: var(--gravity-space-4); }
.gravity-translate-x-5 { --gravity-translate-x: var(--gravity-space-5); }
.gravity-translate-x-6 { --gravity-translate-x: var(--gravity-space-6); }
.gravity-translate-x-8 { --gravity-translate-x: var(--gravity-space-8); }
.gravity-translate-x-10 { --gravity-translate-x: var(--gravity-space-10); }
.gravity-translate-x-1-2 { --gravity-translate-x: 50%; }
.gravity-translate-x-1-3 { --gravity-translate-x: 33.333333%; }
.gravity-translate-x-2-3 { --gravity-translate-x: 66.666667%; }
.gravity-translate-x-1-4 { --gravity-translate-x: 25%; }
.gravity-translate-x-3-4 { --gravity-translate-x: 75%; }
.gravity-translate-x-full { --gravity-translate-x: 100%; }

.gravity-translate-y-0 { --gravity-translate-y: 0px; }
.gravity-translate-y-1 { --gravity-translate-y: var(--gravity-space-1); }
.gravity-translate-y-2 { --gravity-translate-y: var(--gravity-space-2); }
.gravity-translate-y-3 { --gravity-translate-y: var(--gravity-space-3); }
.gravity-translate-y-4 { --gravity-translate-y: var(--gravity-space-4); }
.gravity-translate-y-5 { --gravity-translate-y: var(--gravity-space-5); }
.gravity-translate-y-6 { --gravity-translate-y: var(--gravity-space-6); }
.gravity-translate-y-8 { --gravity-translate-y: var(--gravity-space-8); }
.gravity-translate-y-10 { --gravity-translate-y: var(--gravity-space-10); }
.gravity-translate-y-1-2 { --gravity-translate-y: 50%; }
.gravity-translate-y-1-3 { --gravity-translate-y: 33.333333%; }
.gravity-translate-y-2-3 { --gravity-translate-y: 66.666667%; }
.gravity-translate-y-1-4 { --gravity-translate-y: 25%; }
.gravity-translate-y-3-4 { --gravity-translate-y: 75%; }
.gravity-translate-y-full { --gravity-translate-y: 100%; }

/* Negative translate values */
.-gravity-translate-x-1 { --gravity-translate-x: calc(var(--gravity-space-1) * -1); }
.-gravity-translate-x-2 { --gravity-translate-x: calc(var(--gravity-space-2) * -1); }
.-gravity-translate-x-3 { --gravity-translate-x: calc(var(--gravity-space-3) * -1); }
.-gravity-translate-x-4 { --gravity-translate-x: calc(var(--gravity-space-4) * -1); }
.-gravity-translate-x-1-2 { --gravity-translate-x: -50%; }
.-gravity-translate-x-full { --gravity-translate-x: -100%; }

.-gravity-translate-y-1 { --gravity-translate-y: calc(var(--gravity-space-1) * -1); }
.-gravity-translate-y-2 { --gravity-translate-y: calc(var(--gravity-space-2) * -1); }
.-gravity-translate-y-3 { --gravity-translate-y: calc(var(--gravity-space-3) * -1); }
.-gravity-translate-y-4 { --gravity-translate-y: calc(var(--gravity-space-4) * -1); }
.-gravity-translate-y-1-2 { --gravity-translate-y: -50%; }
.-gravity-translate-y-full { --gravity-translate-y: -100%; }

/* ================================
 * SCALE UTILITIES
 * ================================ */

.gravity-scale-0 { --gravity-scale-x: 0; --gravity-scale-y: 0; }
.gravity-scale-50 { --gravity-scale-x: .5; --gravity-scale-y: .5; }
.gravity-scale-75 { --gravity-scale-x: .75; --gravity-scale-y: .75; }
.gravity-scale-90 { --gravity-scale-x: .9; --gravity-scale-y: .9; }
.gravity-scale-95 { --gravity-scale-x: .95; --gravity-scale-y: .95; }
.gravity-scale-100 { --gravity-scale-x: 1; --gravity-scale-y: 1; }
.gravity-scale-105 { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
.gravity-scale-110 { --gravity-scale-x: 1.1; --gravity-scale-y: 1.1; }
.gravity-scale-125 { --gravity-scale-x: 1.25; --gravity-scale-y: 1.25; }
.gravity-scale-150 { --gravity-scale-x: 1.5; --gravity-scale-y: 1.5; }

.gravity-scale-x-0 { --gravity-scale-x: 0; }
.gravity-scale-x-50 { --gravity-scale-x: .5; }
.gravity-scale-x-75 { --gravity-scale-x: .75; }
.gravity-scale-x-90 { --gravity-scale-x: .9; }
.gravity-scale-x-95 { --gravity-scale-x: .95; }
.gravity-scale-x-100 { --gravity-scale-x: 1; }
.gravity-scale-x-105 { --gravity-scale-x: 1.05; }
.gravity-scale-x-110 { --gravity-scale-x: 1.1; }
.gravity-scale-x-125 { --gravity-scale-x: 1.25; }
.gravity-scale-x-150 { --gravity-scale-x: 1.5; }

.gravity-scale-y-0 { --gravity-scale-y: 0; }
.gravity-scale-y-50 { --gravity-scale-y: .5; }
.gravity-scale-y-75 { --gravity-scale-y: .75; }
.gravity-scale-y-90 { --gravity-scale-y: .9; }
.gravity-scale-y-95 { --gravity-scale-y: .95; }
.gravity-scale-y-100 { --gravity-scale-y: 1; }
.gravity-scale-y-105 { --gravity-scale-y: 1.05; }
.gravity-scale-y-110 { --gravity-scale-y: 1.1; }
.gravity-scale-y-125 { --gravity-scale-y: 1.25; }
.gravity-scale-y-150 { --gravity-scale-y: 1.5; }

/* ================================
 * ROTATE UTILITIES
 * ================================ */

.gravity-rotate-0 { --gravity-rotate: 0deg; }
.gravity-rotate-1 { --gravity-rotate: 1deg; }
.gravity-rotate-2 { --gravity-rotate: 2deg; }
.gravity-rotate-3 { --gravity-rotate: 3deg; }
.gravity-rotate-6 { --gravity-rotate: 6deg; }
.gravity-rotate-12 { --gravity-rotate: 12deg; }
.gravity-rotate-45 { --gravity-rotate: 45deg; }
.gravity-rotate-90 { --gravity-rotate: 90deg; }
.gravity-rotate-180 { --gravity-rotate: 180deg; }

.-gravity-rotate-1 { --gravity-rotate: -1deg; }
.-gravity-rotate-2 { --gravity-rotate: -2deg; }
.-gravity-rotate-3 { --gravity-rotate: -3deg; }
.-gravity-rotate-6 { --gravity-rotate: -6deg; }
.-gravity-rotate-12 { --gravity-rotate: -12deg; }
.-gravity-rotate-45 { --gravity-rotate: -45deg; }
.-gravity-rotate-90 { --gravity-rotate: -90deg; }
.-gravity-rotate-180 { --gravity-rotate: -180deg; }

/* ================================
 * SKEW UTILITIES
 * ================================ */

.gravity-skew-x-0 { --gravity-skew-x: 0deg; }
.gravity-skew-x-1 { --gravity-skew-x: 1deg; }
.gravity-skew-x-2 { --gravity-skew-x: 2deg; }
.gravity-skew-x-3 { --gravity-skew-x: 3deg; }
.gravity-skew-x-6 { --gravity-skew-x: 6deg; }
.gravity-skew-x-12 { --gravity-skew-x: 12deg; }

.-gravity-skew-x-1 { --gravity-skew-x: -1deg; }
.-gravity-skew-x-2 { --gravity-skew-x: -2deg; }
.-gravity-skew-x-3 { --gravity-skew-x: -3deg; }
.-gravity-skew-x-6 { --gravity-skew-x: -6deg; }
.-gravity-skew-x-12 { --gravity-skew-x: -12deg; }

.gravity-skew-y-0 { --gravity-skew-y: 0deg; }
.gravity-skew-y-1 { --gravity-skew-y: 1deg; }
.gravity-skew-y-2 { --gravity-skew-y: 2deg; }
.gravity-skew-y-3 { --gravity-skew-y: 3deg; }
.gravity-skew-y-6 { --gravity-skew-y: 6deg; }
.gravity-skew-y-12 { --gravity-skew-y: 12deg; }

.-gravity-skew-y-1 { --gravity-skew-y: -1deg; }
.-gravity-skew-y-2 { --gravity-skew-y: -2deg; }
.-gravity-skew-y-3 { --gravity-skew-y: -3deg; }
.-gravity-skew-y-6 { --gravity-skew-y: -6deg; }
.-gravity-skew-y-12 { --gravity-skew-y: -12deg; }

/* ================================
 * TRANSFORM ORIGIN UTILITIES
 * ================================ */

.gravity-origin-center { transform-origin: center; }
.gravity-origin-top { transform-origin: top; }
.gravity-origin-top-right { transform-origin: top right; }
.gravity-origin-right { transform-origin: right; }
.gravity-origin-bottom-right { transform-origin: bottom right; }
.gravity-origin-bottom { transform-origin: bottom; }
.gravity-origin-bottom-left { transform-origin: bottom left; }
.gravity-origin-left { transform-origin: left; }
.gravity-origin-top-left { transform-origin: top left; }

/* ================================
 * ANIMATION UTILITIES
 * ================================ */

.gravity-animate-none { animation: none; }
.gravity-animate-spin { animation: gravity-spin 1s linear infinite; }
.gravity-animate-ping { animation: gravity-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.gravity-animate-pulse { animation: gravity-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gravity-animate-bounce { animation: gravity-bounce 1s infinite; }
.gravity-animate-fade-in { animation: gravity-fade-in var(--gravity-transition-normal) var(--gravity-easing-ease-out); }
.gravity-animate-fade-out { animation: gravity-fade-out var(--gravity-transition-normal) var(--gravity-easing-ease-in); }
.gravity-animate-slide-in-up { animation: gravity-slide-in-up var(--gravity-transition-normal) var(--gravity-easing-ease-out); }
.gravity-animate-slide-in-down { animation: gravity-slide-in-down var(--gravity-transition-normal) var(--gravity-easing-ease-out); }
.gravity-animate-slide-in-left { animation: gravity-slide-in-left var(--gravity-transition-normal) var(--gravity-easing-ease-out); }
.gravity-animate-slide-in-right { animation: gravity-slide-in-right var(--gravity-transition-normal) var(--gravity-easing-ease-out); }
.gravity-animate-scale-in { animation: gravity-scale-in var(--gravity-transition-normal) var(--gravity-easing-ease-out); }

/* ================================
 * KEYFRAME ANIMATIONS
 * ================================ */

@keyframes gravity-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gravity-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes gravity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes gravity-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes gravity-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gravity-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes gravity-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gravity-slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gravity-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gravity-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gravity-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ================================
 * HOVER AND FOCUS VARIANTS
 * ================================ */

.hover\:gravity-scale-105:hover { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
.hover\:gravity-scale-110:hover { --gravity-scale-x: 1.1; --gravity-scale-y: 1.1; }
.hover\:gravity-rotate-1:hover { --gravity-rotate: 1deg; }
.hover\:gravity-rotate-3:hover { --gravity-rotate: 3deg; }
.hover\:gravity-rotate-6:hover { --gravity-rotate: 6deg; }
/* Hover translate utilities disabled - no position movement on hover */
.hover\:-gravity-translate-y-1:hover { --gravity-translate-y: 0; }
.hover\:-gravity-translate-y-2:hover { --gravity-translate-y: 0; }

.focus\:gravity-scale-105:focus { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
.focus\:gravity-scale-110:focus { --gravity-scale-x: 1.1; --gravity-scale-y: 1.1; }

/* ================================
 * GROUP VARIANTS
 * ================================ */

.group:hover .group-hover\:gravity-scale-105 { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
.group:hover .group-hover\:gravity-scale-110 { --gravity-scale-x: 1.1; --gravity-scale-y: 1.1; }
.group:hover .group-hover\:gravity-rotate-1 { --gravity-rotate: 1deg; }
.group:hover .group-hover\:gravity-rotate-3 { --gravity-rotate: 3deg; }
/* Group hover translate disabled - no position movement on hover */
.group:hover .group-hover\:-gravity-translate-y-1 { --gravity-translate-y: 0; }

/* ================================
 * REDUCED MOTION SUPPORT
 * ================================ */

@media (prefers-reduced-motion: reduce) {
  .gravity-transition-all,
  .gravity-transition,
  .gravity-transition-colors,
  .gravity-transition-opacity,
  .gravity-transition-shadow,
  .gravity-transition-transform {
    transition: none;
  }
  
  .gravity-animate-spin,
  .gravity-animate-ping,
  .gravity-animate-pulse,
  .gravity-animate-bounce {
    animation: none;
  }
  
  /* Allow only fade animations for reduced motion */
  .gravity-animate-fade-in,
  .gravity-animate-fade-out {
    animation-duration: var(--gravity-transition-fast);
  }
  
  /* Disable transform animations */
  .gravity-animate-slide-in-up,
  .gravity-animate-slide-in-down,
  .gravity-animate-slide-in-left,
  .gravity-animate-slide-in-right,
  .gravity-animate-scale-in {
    animation: gravity-fade-in var(--gravity-transition-fast) var(--gravity-easing-ease-out);
  }
}

/* Safe animations for reduced motion users */
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:gravity-animate-spin { animation: gravity-spin 1s linear infinite; }
  .motion-safe\:gravity-animate-ping { animation: gravity-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .motion-safe\:gravity-animate-pulse { animation: gravity-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .motion-safe\:gravity-animate-bounce { animation: gravity-bounce 1s infinite; }
}

/* ================================
 * RESPONSIVE VARIANTS
 * ================================ */

/* Phone variants */
@media (max-width: 590px) {
  .phone\:gravity-transform { transform: translateX(var(--gravity-translate-x, 0)) translateY(var(--gravity-translate-y, 0)) rotate(var(--gravity-rotate, 0)) skewX(var(--gravity-skew-x, 0)) skewY(var(--gravity-skew-y, 0)) scaleX(var(--gravity-scale-x, 1)) scaleY(var(--gravity-scale-y, 1)); }
  .phone\:gravity-scale-95 { --gravity-scale-x: .95; --gravity-scale-y: .95; }
  .phone\:gravity-scale-100 { --gravity-scale-x: 1; --gravity-scale-y: 1; }
}

/* Tablet variants */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet\:gravity-transform { transform: translateX(var(--gravity-translate-x, 0)) translateY(var(--gravity-translate-y, 0)) rotate(var(--gravity-rotate, 0)) skewX(var(--gravity-skew-x, 0)) skewY(var(--gravity-skew-y, 0)) scaleX(var(--gravity-scale-x, 1)) scaleY(var(--gravity-scale-y, 1)); }
  .tablet\:gravity-scale-100 { --gravity-scale-x: 1; --gravity-scale-y: 1; }
  .tablet\:gravity-scale-105 { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
}

/* Desktop variants */
@media (min-width: 1079px) {
  .desktop\:gravity-transform { transform: translateX(var(--gravity-translate-x, 0)) translateY(var(--gravity-translate-y, 0)) rotate(var(--gravity-rotate, 0)) skewX(var(--gravity-skew-x, 0)) skewY(var(--gravity-skew-y, 0)) scaleX(var(--gravity-scale-x, 1)) scaleY(var(--gravity-scale-y, 1)); }
  .desktop\:gravity-scale-100 { --gravity-scale-x: 1; --gravity-scale-y: 1; }
  .desktop\:gravity-scale-105 { --gravity-scale-x: 1.05; --gravity-scale-y: 1.05; }
  .desktop\:gravity-scale-110 { --gravity-scale-x: 1.1; --gravity-scale-y: 1.1; }
}

/* ========================================
 * utilities/backgrounds.css
 * ======================================== */

/*
 * Gravity UI 2.0 Background Utilities
 *
 * Background color and style utility classes
 */

/* ================================
 * BACKGROUND COLOR UTILITIES
 * ================================ */

/* Primary backgrounds */
.gravity-bg-primary-light { background-color: var(--gravity-brand-primary-light); }
.gravity-bg-primary-dark { background-color: var(--gravity-brand-primary-dark); }

/* Secondary backgrounds */
.gravity-bg-secondary { background-color: var(--gravity-brand-secondary); }

/* Gray scale backgrounds */
.gravity-bg-gray-50 { background-color: var(--gravity-gray-50); }
.gravity-bg-gray-100 { background-color: var(--gravity-gray-100); }
.gravity-bg-gray-200 { background-color: var(--gravity-gray-200); }
.gravity-bg-gray-300 { background-color: var(--gravity-gray-300); }
.gravity-bg-gray-400 { background-color: var(--gravity-gray-400); }
.gravity-bg-gray-500 { background-color: var(--gravity-gray-500); }
.gravity-bg-gray-600 { background-color: var(--gravity-gray-600); }
.gravity-bg-gray-700 { background-color: var(--gravity-gray-700); }
.gravity-bg-gray-800 { background-color: var(--gravity-gray-800); }
.gravity-bg-gray-900 { background-color: var(--gravity-gray-900); }

/* State backgrounds */
.gravity-bg-success { background-color: var(--gravity-state-success); }
.gravity-bg-success-light { background-color: var(--gravity-success-50); }
.gravity-bg-error { background-color: var(--gravity-state-error); }
.gravity-bg-error-light { background-color: var(--gravity-error-50); }
.gravity-bg-warning { background-color: var(--gravity-state-warning); }
.gravity-bg-warning-light { background-color: var(--gravity-warning-50); }
.gravity-bg-info { background-color: var(--gravity-state-info); }
.gravity-bg-info-light { background-color: var(--gravity-info-50); }

/* Semantic color backgrounds */
.gravity-bg-red-50 { background-color: #fef2f2; }
.gravity-bg-red-100 { background-color: #fee2e2; }
.gravity-bg-red-200 { background-color: #fecaca; }
.gravity-bg-red-300 { background-color: #fca5a5; }
.gravity-bg-red-400 { background-color: #f87171; }
.gravity-bg-red-500 { background-color: #ef4444; }
.gravity-bg-red-600 { background-color: #dc2626; }
.gravity-bg-red-700 { background-color: #b91c1c; }
.gravity-bg-red-800 { background-color: #991b1b; }
.gravity-bg-red-900 { background-color: #7f1d1d; }

.gravity-bg-green-50 { background-color: #f0fdf4; }
.gravity-bg-green-100 { background-color: #dcfce7; }
.gravity-bg-green-200 { background-color: #bbf7d0; }
.gravity-bg-green-300 { background-color: #86efac; }
.gravity-bg-green-400 { background-color: #4ade80; }
.gravity-bg-green-500 { background-color: #22c55e; }
.gravity-bg-green-600 { background-color: #16a34a; }
.gravity-bg-green-700 { background-color: #15803d; }
.gravity-bg-green-800 { background-color: #166534; }
.gravity-bg-green-900 { background-color: #14532d; }

.gravity-bg-yellow-50 { background-color: #fefce8; }
.gravity-bg-yellow-100 { background-color: #fef3c7; }
.gravity-bg-yellow-200 { background-color: #fde68a; }
.gravity-bg-yellow-300 { background-color: #fcd34d; }
.gravity-bg-yellow-400 { background-color: #fbbf24; }
.gravity-bg-yellow-500 { background-color: #f59e0b; }
.gravity-bg-yellow-600 { background-color: #d97706; }
.gravity-bg-yellow-700 { background-color: #b45309; }
.gravity-bg-yellow-800 { background-color: #92400e; }
.gravity-bg-yellow-900 { background-color: #78350f; }

.gravity-bg-blue-50 { background-color: #eff6ff; }
.gravity-bg-blue-100 { background-color: #dbeafe; }
.gravity-bg-blue-200 { background-color: #bfdbfe; }
.gravity-bg-blue-300 { background-color: #93c5fd; }
.gravity-bg-blue-400 { background-color: #60a5fa; }
.gravity-bg-blue-500 { background-color: #3b82f6; }
.gravity-bg-blue-600 { background-color: #2563eb; }
.gravity-bg-blue-700 { background-color: #1d4ed8; }
.gravity-bg-blue-800 { background-color: #1e40af; }
.gravity-bg-blue-900 { background-color: #1e3a8a; }

/* Special backgrounds */
.gravity-bg-white { background-color: #ffffff; }
.gravity-bg-black { background-color: #000000; }
.gravity-bg-transparent { background-color: transparent; }

/* Surface backgrounds */
.gravity-bg-surface { background-color: var(--gravity-surface-bg); }
.gravity-bg-surface-secondary { background-color: var(--gravity-surface-secondary); }
.gravity-bg-surface-tertiary { background-color: var(--gravity-surface-tertiary); }

/* Overlay backgrounds */
.gravity-bg-overlay { background-color: rgba(0, 0, 0, 0.5); }
.gravity-bg-overlay-light { background-color: rgba(0, 0, 0, 0.25); }
.gravity-bg-overlay-dark { background-color: rgba(0, 0, 0, 0.75); }

/* ================================
 * BACKGROUND GRADIENT UTILITIES
 * ================================ */

.gravity-bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--gravity-gradient-from), var(--gravity-gradient-to));
}

.gravity-bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--gravity-gradient-from), var(--gravity-gradient-to));
}

.gravity-bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--gravity-gradient-from), var(--gravity-gradient-to));
}

.gravity-bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--gravity-gradient-from), var(--gravity-gradient-to));
}

/* Gradient color stops */
.gravity-from-primary { --gravity-gradient-from: var(--gravity-primary-500); }
.gravity-from-secondary { --gravity-gradient-from: var(--gravity-secondary-500); }
.gravity-from-success { --gravity-gradient-from: var(--gravity-state-success); }
.gravity-from-error { --gravity-gradient-from: var(--gravity-state-error); }
.gravity-from-warning { --gravity-gradient-from: var(--gravity-state-warning); }
.gravity-from-info { --gravity-gradient-from: var(--gravity-state-info); }

.gravity-to-primary { --gravity-gradient-to: var(--gravity-primary-500); }
.gravity-to-secondary { --gravity-gradient-to: var(--gravity-secondary-500); }
.gravity-to-success { --gravity-gradient-to: var(--gravity-state-success); }
.gravity-to-error { --gravity-gradient-to: var(--gravity-state-error); }
.gravity-to-warning { --gravity-gradient-to: var(--gravity-state-warning); }
.gravity-to-info { --gravity-gradient-to: var(--gravity-state-info); }

/* ========================================
 * utilities/borders.css
 * ======================================== */

/*
 * Gravity UI 2.0 Border Utilities
 *
 * Border utility classes for consistent styling
 */

/* ================================
 * BORDER WIDTH UTILITIES
 * ================================ */

.gravity-border { border: 1px solid var(--gravity-border-primary); }
.gravity-border-0 { border: 0; }
.gravity-border-2 { border: 2px solid var(--gravity-border-primary); }

/* Individual sides */
.gravity-border-t { border-top: 1px solid var(--gravity-border-primary); }
.gravity-border-r { border-right: 1px solid var(--gravity-border-primary); }
.gravity-border-b { border-bottom: 1px solid var(--gravity-border-primary); }
.gravity-border-l { border-left: 1px solid var(--gravity-border-primary); }

/* ================================
 * BORDER COLOR UTILITIES
 * ================================ */

.gravity-border-primary { border-color: var(--gravity-border-primary); }
.gravity-border-secondary { border-color: var(--gravity-border-secondary); }
.gravity-border-focus { border-color: var(--gravity-border-focus); }
.gravity-border-success { border-color: var(--gravity-border-success); }
.gravity-border-error { border-color: var(--gravity-border-error); }
.gravity-border-warning { border-color: var(--gravity-state-warning); }
.gravity-border-info { border-color: var(--gravity-state-info); }
.gravity-border-gray-100 { border-color: var(--gravity-gray-100); }
.gravity-border-gray-200 { border-color: var(--gravity-gray-200); }
.gravity-border-gray-300 { border-color: var(--gravity-gray-300); }
.gravity-border-gray-400 { border-color: var(--gravity-gray-400); }
.gravity-border-gray-500 { border-color: var(--gravity-gray-500); }
.gravity-border-gray-600 { border-color: var(--gravity-gray-600); }
.gravity-border-gray-700 { border-color: var(--gravity-gray-700); }
.gravity-border-gray-800 { border-color: var(--gravity-gray-800); }
.gravity-border-gray-900 { border-color: var(--gravity-gray-900); }

/* ================================
 * BORDER RADIUS UTILITIES
 * ================================ */

.gravity-rounded-none { border-radius: 0; }
.gravity-rounded-sm { border-radius: var(--gravity-border-radius-sm); }
.gravity-rounded { border-radius: var(--gravity-border-radius-md); }
.gravity-rounded-md { border-radius: var(--gravity-border-radius-md); }
.gravity-rounded-lg { border-radius: var(--gravity-border-radius-lg); }
.gravity-rounded-xl { border-radius: var(--gravity-border-radius-xl); }
.gravity-rounded-full { border-radius: 9999px; }

/* Specific corners */
.gravity-rounded-t-sm {
  border-top-left-radius: var(--gravity-border-radius-sm);
  border-top-right-radius: var(--gravity-border-radius-sm);
}
.gravity-rounded-t-md {
  border-top-left-radius: var(--gravity-border-radius-md);
  border-top-right-radius: var(--gravity-border-radius-md);
}
.gravity-rounded-t-lg {
  border-top-left-radius: var(--gravity-border-radius-lg);
  border-top-right-radius: var(--gravity-border-radius-lg);
}
.gravity-rounded-b-sm {
  border-bottom-left-radius: var(--gravity-border-radius-sm);
  border-bottom-right-radius: var(--gravity-border-radius-sm);
}
.gravity-rounded-b-md {
  border-bottom-left-radius: var(--gravity-border-radius-md);
  border-bottom-right-radius: var(--gravity-border-radius-md);
}
.gravity-rounded-b-lg {
  border-bottom-left-radius: var(--gravity-border-radius-lg);
  border-bottom-right-radius: var(--gravity-border-radius-lg);
}

/* ========================================
 * utilities/colors.css
 * ======================================== */

/*
 * Gravity UI 2.0 Color Utilities
 * 
 * Utility classes for text colors, background colors, and border colors
 * Based on the design token system
 */

/* ================================
 * TEXT COLOR UTILITIES
 * ================================ */

/* Primary Text Colors */
.gravity-text-primary { color: var(--gravity-text-primary); }
.gravity-text-secondary { color: var(--gravity-text-secondary); }
.gravity-text-muted { color: var(--gravity-text-muted); }
.gravity-text-inverse { color: var(--gravity-text-inverse); }

/* Link Colors */
.gravity-text-link { color: var(--gravity-text-link); }
.gravity-text-link:hover { color: var(--gravity-text-link-hover); }

/* Brand Colors */
.gravity-text-brand-primary { color: var(--gravity-brand-primary); }
.gravity-text-brand-secondary { color: var(--gravity-brand-secondary); }
.gravity-text-brand-accent { color: var(--gravity-brand-accent); }

/* State Colors */
.gravity-text-success { color: var(--gravity-state-success); }
.gravity-text-warning { color: var(--gravity-state-warning); }
.gravity-text-error { color: var(--gravity-state-error); }
.gravity-text-info { color: var(--gravity-state-info); }
.gravity-text-disabled { color: var(--gravity-text-muted); opacity: 0.5; }

/* Semantic Color Aliases (for component compatibility) */
.gravity-color-primary { color: var(--gravity-color-primary); }
.gravity-color-success { color: var(--gravity-color-success); }
.gravity-color-danger { color: var(--gravity-state-error); }

/* Palette Colors */
.gravity-text-navy { color: var(--gravity-primary-navy); }
.gravity-text-teal { color: var(--gravity-primary-teal); }
.gravity-text-cyan { color: var(--gravity-primary-cyan); }
.gravity-text-yellow { color: var(--gravity-secondary-yellow); }
.gravity-text-orange { color: var(--gravity-secondary-orange); }
.gravity-text-red { color: var(--gravity-secondary-red); }
.gravity-text-green { color: var(--gravity-secondary-green); }

/* Grayscale Colors */
.gravity-text-white { color: var(--gravity-white); }
.gravity-text-black { color: var(--gravity-gray-1000); }
.gravity-text-gray-100 { color: var(--gravity-gray-100); }
.gravity-text-gray-200 { color: var(--gravity-gray-200); }
.gravity-text-gray-300 { color: var(--gravity-gray-300); }
.gravity-text-gray-400 { color: var(--gravity-gray-400); }
.gravity-text-gray-500 { color: var(--gravity-gray-500); }
.gravity-text-gray-600 { color: var(--gravity-gray-600); }
.gravity-text-gray-700 { color: var(--gravity-gray-700); }
.gravity-text-gray-800 { color: var(--gravity-gray-800); }
.gravity-text-gray-900 { color: var(--gravity-gray-900); }

/* ================================
 * BACKGROUND COLOR UTILITIES
 * ================================ */

/* Primary Background Colors */
.gravity-bg-primary { background-color: var(--gravity-bg-primary); }
.gravity-bg-secondary { background-color: var(--gravity-bg-secondary); }
.gravity-bg-muted { background-color: var(--gravity-bg-muted); }
.gravity-bg-inverse { background-color: var(--gravity-bg-inverse); }
.gravity-bg-surface { background-color: var(--gravity-bg-primary); }

/* Brand Backgrounds */
.gravity-bg-brand-primary { 
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}
.gravity-bg-brand-secondary { 
  background-color: var(--gravity-brand-secondary);
  color: var(--gravity-color-white);
}
.gravity-bg-brand-accent { 
  background-color: var(--gravity-brand-accent);
  color: var(--gravity-color-gray-900);
}

/* State Backgrounds */
.gravity-bg-success { 
  background-color: var(--gravity-state-success);
  color: var(--gravity-color-white);
}
.gravity-bg-warning { 
  background-color: var(--gravity-state-warning);
  color: var(--gravity-color-gray-900);
}
.gravity-bg-error { 
  background-color: var(--gravity-state-error);
  color: var(--gravity-color-white);
}
.gravity-bg-info { 
  background-color: var(--gravity-state-info);
  color: var(--gravity-color-white);
}

/* Light State Backgrounds */
.gravity-bg-success-light { 
  background-color: color-mix(in srgb, var(--gravity-state-success) 10%, transparent);
  color: var(--gravity-state-success);
}
.gravity-bg-warning-light { 
  background-color: color-mix(in srgb, var(--gravity-state-warning) 10%, transparent);
  color: color-mix(in srgb, var(--gravity-state-warning) 80%, black);
}
.gravity-bg-error-light { 
  background-color: color-mix(in srgb, var(--gravity-state-error) 10%, transparent);
  color: var(--gravity-state-error);
}
.gravity-bg-info-light { 
  background-color: color-mix(in srgb, var(--gravity-state-info) 10%, transparent);
  color: var(--gravity-state-info);
}

/* Palette Backgrounds */
.gravity-bg-navy { 
  background-color: var(--gravity-primary-navy);
  color: var(--gravity-color-white);
}
.gravity-bg-teal { 
  background-color: var(--gravity-primary-teal);
  color: var(--gravity-color-white);
}
.gravity-bg-cyan { 
  background-color: var(--gravity-primary-cyan);
  color: var(--gravity-color-white);
}
.gravity-bg-yellow { 
  background-color: var(--gravity-secondary-yellow);
  color: var(--gravity-color-gray-900);
}
.gravity-bg-orange { 
  background-color: var(--gravity-secondary-orange);
  color: var(--gravity-color-white);
}
.gravity-bg-red { 
  background-color: var(--gravity-secondary-red);
  color: var(--gravity-color-white);
}
.gravity-bg-green { 
  background-color: var(--gravity-secondary-green);
  color: var(--gravity-color-white);
}

/* Grayscale Backgrounds */
.gravity-bg-white { 
  background-color: var(--gravity-white);
  color: var(--gravity-gray-900);
}
.gravity-bg-black { 
  background-color: var(--gravity-gray-1000);
  color: var(--gravity-white);
}
.gravity-bg-gray-100 { 
  background-color: var(--gravity-gray-100);
  color: var(--gravity-gray-900);
}
.gravity-bg-gray-200 { 
  background-color: var(--gravity-gray-200);
  color: var(--gravity-gray-900);
}
.gravity-bg-gray-300 { 
  background-color: var(--gravity-gray-300);
  color: var(--gravity-gray-900);
}
.gravity-bg-gray-400 { 
  background-color: var(--gravity-gray-400);
  color: var(--gravity-gray-900);
}
.gravity-bg-gray-500 { 
  background-color: var(--gravity-gray-500);
  color: var(--gravity-white);
}
.gravity-bg-gray-600 { 
  background-color: var(--gravity-gray-600);
  color: var(--gravity-white);
}
.gravity-bg-gray-700 { 
  background-color: var(--gravity-gray-700);
  color: var(--gravity-white);
}
.gravity-bg-gray-800 { 
  background-color: var(--gravity-gray-800);
  color: var(--gravity-white);
}
.gravity-bg-gray-900 { 
  background-color: var(--gravity-gray-900);
  color: var(--gravity-white);
}

/* Transparent */
.gravity-bg-transparent { background-color: transparent; }

/* Additional Utility Backgrounds (for component compatibility) */
.gravity-bg-hover { background-color: var(--gravity-bg-hover); }
.gravity-bg-blue {
  background-color: var(--gravity-color-peg-blue);
  color: var(--gravity-color-white);
}
.gravity-bg-purple {
  background-color: var(--gravity-color-secondary-purple);
  color: var(--gravity-color-white);
}
.gravity-bg-tertiary { background-color: var(--gravity-bg-tertiary); }

/* ================================
 * BORDER COLOR UTILITIES
 * ================================ */

/* Primary Border Colors */
.gravity-border-primary { border-color: var(--gravity-border-primary); }
.gravity-border-secondary { border-color: var(--gravity-border-secondary); }
.gravity-border-muted { border-color: var(--gravity-gray-200); }
.gravity-border-focus { border-color: var(--gravity-border-focus); }
.gravity-border-error { border-color: var(--gravity-border-error); }
.gravity-border-success { border-color: var(--gravity-border-success); }

/* Brand Border Colors */
.gravity-border-brand-primary { border-color: var(--gravity-brand-primary); }
.gravity-border-brand-secondary { border-color: var(--gravity-brand-secondary); }
.gravity-border-brand-accent { border-color: var(--gravity-brand-accent); }

/* State Border Colors */
.gravity-border-state-success { border-color: var(--gravity-state-success); }
.gravity-border-state-warning { border-color: var(--gravity-state-warning); }
.gravity-border-state-error { border-color: var(--gravity-state-error); }
.gravity-border-state-info { border-color: var(--gravity-state-info); }

/* Generic Border Color Utility (for component compatibility) */
.gravity-border-color { border-color: var(--gravity-border-color); }

/* Grayscale Border Colors */
.gravity-border-white { border-color: var(--gravity-white); }
.gravity-border-black { border-color: var(--gravity-gray-1000); }
.gravity-border-gray-100 { border-color: var(--gravity-gray-100); }
.gravity-border-gray-200 { border-color: var(--gravity-gray-200); }
.gravity-border-gray-300 { border-color: var(--gravity-gray-300); }
.gravity-border-gray-400 { border-color: var(--gravity-gray-400); }
.gravity-border-gray-500 { border-color: var(--gravity-gray-500); }
.gravity-border-gray-600 { border-color: var(--gravity-gray-600); }
.gravity-border-gray-700 { border-color: var(--gravity-gray-700); }
.gravity-border-gray-800 { border-color: var(--gravity-gray-800); }
.gravity-border-gray-900 { border-color: var(--gravity-gray-900); }

/* Transparent */
.gravity-border-transparent { border-color: transparent; }

/* ================================
 * HOVER AND FOCUS VARIANTS
 * ================================ */

/* Hover Text Colors */
.hover\:gravity-text-primary:hover { color: var(--gravity-text-primary); }
.hover\:gravity-text-secondary:hover { color: var(--gravity-text-secondary); }
.hover\:gravity-text-brand-primary:hover { color: var(--gravity-brand-primary); }
.hover\:gravity-text-brand-secondary:hover { color: var(--gravity-brand-secondary); }

/* Hover Background Colors */
.hover\:gravity-bg-primary:hover { background-color: var(--gravity-bg-primary); }
.hover\:gravity-bg-secondary:hover { background-color: var(--gravity-bg-secondary); }
.hover\:gravity-bg-muted:hover { background-color: var(--gravity-bg-muted); }
.hover\:gravity-bg-brand-primary:hover { 
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-color-white);
}

/* Focus Border Colors */
.focus\:gravity-border-focus:focus { border-color: var(--gravity-border-focus); }
.focus\:gravity-border-brand-primary:focus { border-color: var(--gravity-brand-primary); }
.focus\:gravity-border-error:focus { border-color: var(--gravity-border-error); }
.focus\:gravity-border-success:focus { border-color: var(--gravity-border-success); }

/* ================================
 * RESPONSIVE VARIANTS
 * ================================ */

/* Phone variants */
@media (max-width: 590px) {
  .phone\:gravity-text-center { text-align: center; }
  .phone\:gravity-bg-transparent { background-color: transparent; }
}

/* Tablet variants */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet\:gravity-text-left { text-align: left; }
}

/* Desktop variants */
@media (min-width: 1079px) {
  .desktop\:gravity-text-left { text-align: left; }
}

/* ================================
 * DARK MODE ADJUSTMENTS
 * ================================ */

[data-theme="dark"] .gravity-bg-primary { background-color: var(--gravity-bg-primary); }
[data-theme="dark"] .gravity-bg-secondary { background-color: var(--gravity-bg-secondary); }
[data-theme="dark"] .gravity-text-primary { color: var(--gravity-text-primary); }
[data-theme="dark"] .gravity-text-secondary { color: var(--gravity-text-secondary); }
[data-theme="dark"] .gravity-border-primary { border-color: var(--gravity-border-primary); }
[data-theme="dark"] .gravity-border-secondary { border-color: var(--gravity-border-secondary); }

/* ========================================
 * utilities/display.css
 * ======================================== */

/*
 * Gravity UI 2.0 Display Utilities
 * 
 * Utility classes for display, visibility, and layout control
 */

/* ================================
 * DISPLAY UTILITIES
 * ================================ */

.gravity-block { display: block; }
.gravity-inline-block { display: inline-block; }
.gravity-inline { display: inline; }
.gravity-flex { display: flex; }
.gravity-inline-flex { display: inline-flex; }
.gravity-grid { display: grid; }
.gravity-inline-grid { display: inline-grid; }
.gravity-table { display: table; }
.gravity-table-cell { display: table-cell; }
.gravity-table-row { display: table-row; }
.gravity-hidden { display: none; }

/* ================================
 * VISIBILITY UTILITIES
 * ================================ */

.gravity-visible { visibility: visible; }
.gravity-invisible { visibility: hidden; }

/* Screen Reader Only */
.gravity-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gravity-not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Screen Reader Only - Focusable (shows on focus for skip links) */
.gravity-sr-only-focusable {
  position: absolute;
  top: -100px;
  left: 6px;
  background: var(--gravity-bg-inverse, #1a1a2e);
  color: var(--gravity-text-inverse, #ffffff);
  padding: var(--gravity-space-2, 0.5rem) var(--gravity-space-4, 1rem);
  border-radius: var(--gravity-border-radius-md, 0.375rem);
  text-decoration: none;
  z-index: var(--gravity-z-modal, 1000);
  transition: top 0.15s ease;
  font-weight: 500;
}

.gravity-sr-only-focusable:focus {
  top: 6px;
  outline: 2px solid var(--gravity-color-primary, #3b82f6);
  outline-offset: 2px;
}

/* ================================
 * OVERFLOW UTILITIES
 * ================================ */

.gravity-overflow-auto { overflow: auto; }
.gravity-overflow-hidden { overflow: hidden; }
.gravity-overflow-visible { overflow: visible; }
.gravity-overflow-scroll { overflow: scroll; }

.gravity-overflow-x-auto { overflow-x: auto; }
.gravity-overflow-x-hidden { overflow-x: hidden; }
.gravity-overflow-x-visible { overflow-x: visible; }
.gravity-overflow-x-scroll { overflow-x: scroll; }

.gravity-overflow-y-auto { overflow-y: auto; }
.gravity-overflow-y-hidden { overflow-y: hidden; }
.gravity-overflow-y-visible { overflow-y: visible; }
.gravity-overflow-y-scroll { overflow-y: scroll; }

/* ================================
 * FLOAT UTILITIES
 * ================================ */

.gravity-float-right { float: right; }
.gravity-float-left { float: left; }
.gravity-float-none { float: none; }

.gravity-clear-left { clear: left; }
.gravity-clear-right { clear: right; }
.gravity-clear-both { clear: both; }
.gravity-clear-none { clear: none; }

/* ================================
 * OBJECT FIT UTILITIES
 * ================================ */

.gravity-object-contain { object-fit: contain; }
.gravity-object-cover { object-fit: cover; }
.gravity-object-fill { object-fit: fill; }
.gravity-object-none { object-fit: none; }
.gravity-object-scale-down { object-fit: scale-down; }

.gravity-object-bottom { object-position: bottom; }
.gravity-object-center { object-position: center; }
.gravity-object-left { object-position: left; }
.gravity-object-left-bottom { object-position: left bottom; }
.gravity-object-left-top { object-position: left top; }
.gravity-object-right { object-position: right; }
.gravity-object-right-bottom { object-position: right bottom; }
.gravity-object-right-top { object-position: right top; }
.gravity-object-top { object-position: top; }

/* ================================
 * BOX SIZING UTILITIES
 * ================================ */

.gravity-box-border { box-sizing: border-box; }
.gravity-box-content { box-sizing: content-box; }

/* ================================
 * CURSOR UTILITIES
 * ================================ */

.gravity-cursor-auto { cursor: auto; }
.gravity-cursor-default { cursor: default; }
.gravity-cursor-pointer { cursor: pointer; }
.gravity-cursor-wait { cursor: wait; }
.gravity-cursor-text { cursor: text; }
.gravity-cursor-move { cursor: move; }
.gravity-cursor-help { cursor: help; }
.gravity-cursor-not-allowed { cursor: not-allowed; }
.gravity-cursor-grab { cursor: grab; }
.gravity-cursor-grabbing { cursor: grabbing; }

/* ================================
 * USER SELECT UTILITIES
 * ================================ */

.gravity-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gravity-select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.gravity-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.gravity-select-auto {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* ================================
 * POINTER EVENTS UTILITIES
 * ================================ */

.gravity-pointer-events-none { pointer-events: none; }
.gravity-pointer-events-auto { pointer-events: auto; }

/* ================================
 * RESIZE UTILITIES
 * ================================ */

.gravity-resize-none { resize: none; }
.gravity-resize { resize: both; }
.gravity-resize-y { resize: vertical; }
.gravity-resize-x { resize: horizontal; }

/* ================================
 * RESPONSIVE VARIANTS
 * ================================ */

/* Phone variants (max-width: 590px) */
@media (max-width: 590px) {
  .phone\:gravity-block { display: block; }
  .phone\:gravity-inline-block { display: inline-block; }
  .phone\:gravity-inline { display: inline; }
  .phone\:gravity-flex { display: flex; }
  .phone\:gravity-inline-flex { display: inline-flex; }
  .phone\:gravity-grid { display: grid; }
  .phone\:gravity-hidden { display: none; }
  .phone\:gravity-visible { visibility: visible; }
  .phone\:gravity-invisible { visibility: hidden; }
}

/* Tablet variants (591px - 1078px) */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet\:gravity-block { display: block; }
  .tablet\:gravity-inline-block { display: inline-block; }
  .tablet\:gravity-inline { display: inline; }
  .tablet\:gravity-flex { display: flex; }
  .tablet\:gravity-inline-flex { display: inline-flex; }
  .tablet\:gravity-grid { display: grid; }
  .tablet\:gravity-hidden { display: none; }
  .tablet\:gravity-visible { visibility: visible; }
  .tablet\:gravity-invisible { visibility: hidden; }
}

/* Desktop variants (min-width: 1079px) */
@media (min-width: 1079px) {
  .desktop\:gravity-block { display: block; }
  .desktop\:gravity-inline-block { display: inline-block; }
  .desktop\:gravity-inline { display: inline; }
  .desktop\:gravity-flex { display: flex; }
  .desktop\:gravity-inline-flex { display: inline-flex; }
  .desktop\:gravity-grid { display: grid; }
  .desktop\:gravity-hidden { display: none; }
  .desktop\:gravity-visible { visibility: visible; }
  .desktop\:gravity-invisible { visibility: hidden; }
}

/* ================================
 * PRINT VARIANTS
 * ================================ */

@media print {
  .print\:gravity-block { display: block; }
  .print\:gravity-inline-block { display: inline-block; }
  .print\:gravity-inline { display: inline; }
  .print\:gravity-hidden { display: none; }
  .print\:gravity-visible { visibility: visible; }
  .print\:gravity-invisible { visibility: hidden; }
}

/* ================================
 * PREFERS REDUCED MOTION VARIANTS
 * ================================ */

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:gravity-hidden { display: none; }
  .motion-safe\:gravity-block { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:gravity-hidden { display: none; }
  .motion-reduce\:gravity-block { display: block; }
}

/* ================================
 * HOVER VARIANTS
 * ================================ */

.hover\:gravity-block:hover { display: block; }
.hover\:gravity-inline-block:hover { display: inline-block; }
.hover\:gravity-flex:hover { display: flex; }
.hover\:gravity-hidden:hover { display: none; }

/* ================================
 * FOCUS VARIANTS
 * ================================ */

.focus\:gravity-block:focus { display: block; }
.focus\:gravity-inline-block:focus { display: inline-block; }
.focus\:gravity-flex:focus { display: flex; }
.focus\:gravity-hidden:focus { display: none; }

/* ================================
 * GROUP HOVER VARIANTS
 * ================================ */

.group:hover .group-hover\:gravity-block { display: block; }
.group:hover .group-hover\:gravity-inline-block { display: inline-block; }
.group:hover .group-hover\:gravity-flex { display: flex; }
.group:hover .group-hover\:gravity-hidden { display: none; }
.group:hover .group-hover\:gravity-visible { visibility: visible; }
.group:hover .group-hover\:gravity-invisible { visibility: hidden; }

/* ================================
 * UTILITY COMBINATIONS
 * ================================ */

/* Common display patterns */
.gravity-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gravity-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gravity-flex-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.gravity-flex-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.gravity-grid-center {
  display: grid;
  place-items: center;
}

/* Full screen utilities */
.gravity-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--gravity-z-modal);
}

/* Aspect ratio utilities */
.gravity-aspect-square {
  aspect-ratio: 1 / 1;
}

.gravity-aspect-video {
  aspect-ratio: 16 / 9;
}

.gravity-aspect-photo {
  aspect-ratio: 4 / 3;
}

/* ========================================
 * utilities/effects.css
 * ======================================== */

/*
 * Gravity UI 2.0 Effects Utilities
 *
 * Utility classes for borders, shadows, gaps, and other visual effects
 */

/* ================================
 * BORDER UTILITIES
 * ================================ */

/* Border Width */
.gravity-border {
  border-width: var(--gravity-border-width-thin);
  border-style: solid;
  border-color: var(--gravity-border-primary);
}
.gravity-border-0 { border-width: 0; }
.gravity-border-2 { border-width: 2px; }
.gravity-border-4 { border-width: 4px; }
.gravity-border-8 { border-width: 8px; }

/* Border Styles */
.gravity-border-solid { border-style: solid; }
.gravity-border-dashed { border-style: dashed; }
.gravity-border-dotted { border-style: dotted; }
.gravity-border-double { border-style: double; }
.gravity-border-none { border-style: none; }

/* Individual Borders */
.gravity-border-t {
  border-top-width: var(--gravity-border-width-thin);
  border-top-style: solid;
  border-top-color: var(--gravity-border-primary);
}
.gravity-border-r {
  border-right-width: var(--gravity-border-width-thin);
  border-right-style: solid;
  border-right-color: var(--gravity-border-primary);
}
.gravity-border-b {
  border-bottom-width: var(--gravity-border-width-thin);
  border-bottom-style: solid;
  border-bottom-color: var(--gravity-border-primary);
}
.gravity-border-l {
  border-left-width: var(--gravity-border-width-thin);
  border-left-style: solid;
  border-left-color: var(--gravity-border-primary);
}

/* Border X and Y */
.gravity-border-x {
  border-left-width: var(--gravity-border-width-thin);
  border-right-width: var(--gravity-border-width-thin);
  border-left-style: solid;
  border-right-style: solid;
  border-left-color: var(--gravity-border-primary);
  border-right-color: var(--gravity-border-primary);
}
.gravity-border-y {
  border-top-width: var(--gravity-border-width-thin);
  border-bottom-width: var(--gravity-border-width-thin);
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: var(--gravity-border-primary);
  border-bottom-color: var(--gravity-border-primary);
}

/* ================================
 * BORDER RADIUS UTILITIES
 * ================================ */

.gravity-rounded-none { border-radius: 0; }
.gravity-rounded-sm { border-radius: var(--gravity-border-radius-sm); }
.gravity-rounded { border-radius: var(--gravity-border-radius-md); }
.gravity-rounded-md { border-radius: var(--gravity-border-radius-md); }
.gravity-rounded-lg { border-radius: var(--gravity-border-radius-lg); }
.gravity-rounded-xl { border-radius: var(--gravity-border-radius-xl); }
.gravity-rounded-2xl { border-radius: 1rem; }
.gravity-rounded-3xl { border-radius: 1.5rem; }
.gravity-rounded-full { border-radius: 9999px; }

/* Individual Corners */
.gravity-rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.gravity-rounded-t { border-top-left-radius: var(--gravity-border-radius-md); border-top-right-radius: var(--gravity-border-radius-md); }
.gravity-rounded-t-lg { border-top-left-radius: var(--gravity-border-radius-lg); border-top-right-radius: var(--gravity-border-radius-lg); }

.gravity-rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gravity-rounded-r { border-top-right-radius: var(--gravity-border-radius-md); border-bottom-right-radius: var(--gravity-border-radius-md); }
.gravity-rounded-r-lg { border-top-right-radius: var(--gravity-border-radius-lg); border-bottom-right-radius: var(--gravity-border-radius-lg); }

.gravity-rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gravity-rounded-b { border-bottom-left-radius: var(--gravity-border-radius-md); border-bottom-right-radius: var(--gravity-border-radius-md); }
.gravity-rounded-b-lg { border-bottom-left-radius: var(--gravity-border-radius-lg); border-bottom-right-radius: var(--gravity-border-radius-lg); }

.gravity-rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gravity-rounded-l { border-top-left-radius: var(--gravity-border-radius-md); border-bottom-left-radius: var(--gravity-border-radius-md); }
.gravity-rounded-l-lg { border-top-left-radius: var(--gravity-border-radius-lg); border-bottom-left-radius: var(--gravity-border-radius-lg); }

/* ================================
 * BOX SHADOW UTILITIES
 * ================================ */

.gravity-shadow-sm { box-shadow: var(--gravity-shadow-sm); }
.gravity-shadow { box-shadow: var(--gravity-shadow-md); }
.gravity-shadow-md { box-shadow: var(--gravity-shadow-md); }
.gravity-shadow-lg { box-shadow: var(--gravity-shadow-lg); }
.gravity-shadow-xl { box-shadow: var(--gravity-shadow-xl); }
.gravity-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.gravity-shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.gravity-shadow-none { box-shadow: none; }

/* Colored Shadows */
.gravity-shadow-brand {
  box-shadow: 0 10px 25px -5px rgba(var(--gravity-brand-primary-rgb), 0.1),
              0 10px 10px -5px rgba(var(--gravity-brand-primary-rgb), 0.04);
}

/* ================================
 * OPACITY UTILITIES
 * ================================ */

.gravity-opacity-0 { opacity: 0; }
.gravity-opacity-5 { opacity: 0.05; }
.gravity-opacity-10 { opacity: 0.1; }
.gravity-opacity-20 { opacity: 0.2; }
.gravity-opacity-25 { opacity: 0.25; }
.gravity-opacity-30 { opacity: 0.3; }
.gravity-opacity-40 { opacity: 0.4; }
.gravity-opacity-50 { opacity: 0.5; }
.gravity-opacity-60 { opacity: 0.6; }
.gravity-opacity-70 { opacity: 0.7; }
.gravity-opacity-75 { opacity: 0.75; }
.gravity-opacity-80 { opacity: 0.8; }
.gravity-opacity-90 { opacity: 0.9; }
.gravity-opacity-95 { opacity: 0.95; }
.gravity-opacity-100 { opacity: 1; }

/* ================================
 * GAP UTILITIES (for Flexbox/Grid)
 * ================================ */

.gravity-gap-0 { gap: 0; }
.gravity-gap-px { gap: 1px; }
.gravity-gap-0-5 { gap: 0.125rem; }
.gravity-gap-1 { gap: 0.25rem; }
.gravity-gap-1-5 { gap: 0.375rem; }
.gravity-gap-2 { gap: 0.5rem; }
.gravity-gap-2-5 { gap: 0.625rem; }
.gravity-gap-3 { gap: 0.75rem; }
.gravity-gap-3-5 { gap: 0.875rem; }
.gravity-gap-4 { gap: 1rem; }
.gravity-gap-5 { gap: 1.25rem; }
.gravity-gap-6 { gap: 1.5rem; }
.gravity-gap-7 { gap: 1.75rem; }
.gravity-gap-8 { gap: 2rem; }
.gravity-gap-9 { gap: 2.25rem; }
.gravity-gap-10 { gap: 2.5rem; }
.gravity-gap-11 { gap: 2.75rem; }
.gravity-gap-12 { gap: 3rem; }
.gravity-gap-14 { gap: 3.5rem; }
.gravity-gap-16 { gap: 4rem; }
.gravity-gap-20 { gap: 5rem; }
.gravity-gap-24 { gap: 6rem; }
.gravity-gap-28 { gap: 7rem; }
.gravity-gap-32 { gap: 8rem; }
.gravity-gap-36 { gap: 9rem; }
.gravity-gap-40 { gap: 10rem; }
.gravity-gap-44 { gap: 11rem; }
.gravity-gap-48 { gap: 12rem; }
.gravity-gap-52 { gap: 13rem; }
.gravity-gap-56 { gap: 14rem; }
.gravity-gap-60 { gap: 15rem; }
.gravity-gap-64 { gap: 16rem; }
.gravity-gap-72 { gap: 18rem; }
.gravity-gap-80 { gap: 20rem; }
.gravity-gap-96 { gap: 24rem; }

/* Gap X (column-gap) */
.gravity-gap-x-0 { column-gap: 0; }
.gravity-gap-x-px { column-gap: 1px; }
.gravity-gap-x-1 { column-gap: 0.25rem; }
.gravity-gap-x-2 { column-gap: 0.5rem; }
.gravity-gap-x-3 { column-gap: 0.75rem; }
.gravity-gap-x-4 { column-gap: 1rem; }
.gravity-gap-x-5 { column-gap: 1.25rem; }
.gravity-gap-x-6 { column-gap: 1.5rem; }
.gravity-gap-x-8 { column-gap: 2rem; }
.gravity-gap-x-10 { column-gap: 2.5rem; }
.gravity-gap-x-12 { column-gap: 3rem; }

/* Gap Y (row-gap) */
.gravity-gap-y-0 { row-gap: 0; }
.gravity-gap-y-px { row-gap: 1px; }
.gravity-gap-y-1 { row-gap: 0.25rem; }
.gravity-gap-y-2 { row-gap: 0.5rem; }
.gravity-gap-y-3 { row-gap: 0.75rem; }
.gravity-gap-y-4 { row-gap: 1rem; }
.gravity-gap-y-5 { row-gap: 1.25rem; }
.gravity-gap-y-6 { row-gap: 1.5rem; }
.gravity-gap-y-8 { row-gap: 2rem; }
.gravity-gap-y-10 { row-gap: 2.5rem; }
.gravity-gap-y-12 { row-gap: 3rem; }

/* ================================
 * CURSOR UTILITIES
 * ================================ */

.gravity-cursor-auto { cursor: auto; }
.gravity-cursor-default { cursor: default; }
.gravity-cursor-pointer { cursor: pointer; }
.gravity-cursor-wait { cursor: wait; }
.gravity-cursor-text { cursor: text; }
.gravity-cursor-move { cursor: move; }
.gravity-cursor-help { cursor: help; }
.gravity-cursor-not-allowed { cursor: not-allowed; }
.gravity-cursor-none { cursor: none; }
.gravity-cursor-context-menu { cursor: context-menu; }
.gravity-cursor-progress { cursor: progress; }
.gravity-cursor-cell { cursor: cell; }
.gravity-cursor-crosshair { cursor: crosshair; }
.gravity-cursor-vertical-text { cursor: vertical-text; }
.gravity-cursor-alias { cursor: alias; }
.gravity-cursor-copy { cursor: copy; }
.gravity-cursor-no-drop { cursor: no-drop; }
.gravity-cursor-grab { cursor: grab; }
.gravity-cursor-grabbing { cursor: grabbing; }
.gravity-cursor-all-scroll { cursor: all-scroll; }
.gravity-cursor-col-resize { cursor: col-resize; }
.gravity-cursor-row-resize { cursor: row-resize; }
.gravity-cursor-n-resize { cursor: n-resize; }
.gravity-cursor-e-resize { cursor: e-resize; }
.gravity-cursor-s-resize { cursor: s-resize; }
.gravity-cursor-w-resize { cursor: w-resize; }
.gravity-cursor-ne-resize { cursor: ne-resize; }
.gravity-cursor-nw-resize { cursor: nw-resize; }
.gravity-cursor-se-resize { cursor: se-resize; }
.gravity-cursor-sw-resize { cursor: sw-resize; }
.gravity-cursor-ew-resize { cursor: ew-resize; }
.gravity-cursor-ns-resize { cursor: ns-resize; }
.gravity-cursor-nesw-resize { cursor: nesw-resize; }
.gravity-cursor-nwse-resize { cursor: nwse-resize; }
.gravity-cursor-zoom-in { cursor: zoom-in; }
.gravity-cursor-zoom-out { cursor: zoom-out; }

/* ========================================
 * utilities/flexbox.css
 * ======================================== */

/*
 * Gravity UI 2.0 Flexbox Utilities
 * 
 * Utility classes for flexbox layout control
 */

/* ================================
 * FLEX CONTAINER UTILITIES
 * ================================ */

.gravity-flex { display: flex; }
.gravity-inline-flex { display: inline-flex; }

/* ================================
 * FLEX DIRECTION
 * ================================ */

.gravity-flex-row { flex-direction: row; }
.gravity-flex-row-reverse { flex-direction: row-reverse; }
.gravity-flex-col { flex-direction: column; }
.gravity-flex-col-reverse { flex-direction: column-reverse; }

/* ================================
 * FLEX WRAP
 * ================================ */

.gravity-flex-wrap { flex-wrap: wrap; }
.gravity-flex-wrap-reverse { flex-wrap: wrap-reverse; }
.gravity-flex-nowrap { flex-wrap: nowrap; }

/* ================================
 * JUSTIFY CONTENT
 * ================================ */

.gravity-justify-start { justify-content: flex-start; }
.gravity-justify-end { justify-content: flex-end; }
.gravity-justify-center { justify-content: center; }
.gravity-justify-between { justify-content: space-between; }
.gravity-justify-around { justify-content: space-around; }
.gravity-justify-evenly { justify-content: space-evenly; }

/* ================================
 * ALIGN ITEMS
 * ================================ */

.gravity-items-start { align-items: flex-start; }
.gravity-items-end { align-items: flex-end; }
.gravity-items-center { align-items: center; }
.gravity-items-baseline { align-items: baseline; }
.gravity-items-stretch { align-items: stretch; }

/* ================================
 * ALIGN CONTENT
 * ================================ */

.gravity-content-start { align-content: flex-start; }
.gravity-content-end { align-content: flex-end; }
.gravity-content-center { align-content: center; }
.gravity-content-between { align-content: space-between; }
.gravity-content-around { align-content: space-around; }
.gravity-content-evenly { align-content: space-evenly; }

/* ================================
 * FLEX ITEM UTILITIES
 * ================================ */

/* Flex */
.gravity-flex-1 { flex: 1 1 0%; }
.gravity-flex-auto { flex: 1 1 auto; }
.gravity-flex-initial { flex: 0 1 auto; }
.gravity-flex-none { flex: none; }

/* Flex Grow */
.gravity-flex-grow { flex-grow: 1; }
.gravity-flex-grow-0 { flex-grow: 0; }

/* Flex Shrink */
.gravity-flex-shrink { flex-shrink: 1; }
.gravity-flex-shrink-0 { flex-shrink: 0; }

/* ================================
 * ALIGN SELF
 * ================================ */

.gravity-self-auto { align-self: auto; }
.gravity-self-start { align-self: flex-start; }
.gravity-self-end { align-self: flex-end; }
.gravity-self-center { align-self: center; }
.gravity-self-stretch { align-self: stretch; }
.gravity-self-baseline { align-self: baseline; }

/* ================================
 * ORDER
 * ================================ */

.gravity-order-1 { order: 1; }
.gravity-order-2 { order: 2; }
.gravity-order-3 { order: 3; }
.gravity-order-4 { order: 4; }
.gravity-order-5 { order: 5; }
.gravity-order-6 { order: 6; }
.gravity-order-7 { order: 7; }
.gravity-order-8 { order: 8; }
.gravity-order-9 { order: 9; }
.gravity-order-10 { order: 10; }
.gravity-order-11 { order: 11; }
.gravity-order-12 { order: 12; }
.gravity-order-first { order: -9999; }
.gravity-order-last { order: 9999; }
.gravity-order-none { order: 0; }

/* ================================
 * FLEX GAP UTILITIES
 * ================================ */

.gravity-flex-gap-0 { gap: 0; }
.gravity-flex-gap-1 { gap: var(--gravity-space-1); }
.gravity-flex-gap-2 { gap: var(--gravity-space-2); }
.gravity-flex-gap-3 { gap: var(--gravity-space-3); }
.gravity-flex-gap-4 { gap: var(--gravity-space-4); }
.gravity-flex-gap-5 { gap: var(--gravity-space-5); }
.gravity-flex-gap-6 { gap: var(--gravity-space-6); }
.gravity-flex-gap-8 { gap: var(--gravity-space-8); }
.gravity-flex-gap-10 { gap: var(--gravity-space-10); }

/* Row Gap */
.gravity-flex-gap-y-0 { row-gap: 0; }
.gravity-flex-gap-y-1 { row-gap: var(--gravity-space-1); }
.gravity-flex-gap-y-2 { row-gap: var(--gravity-space-2); }
.gravity-flex-gap-y-3 { row-gap: var(--gravity-space-3); }
.gravity-flex-gap-y-4 { row-gap: var(--gravity-space-4); }
.gravity-flex-gap-y-5 { row-gap: var(--gravity-space-5); }
.gravity-flex-gap-y-6 { row-gap: var(--gravity-space-6); }
.gravity-flex-gap-y-8 { row-gap: var(--gravity-space-8); }

/* Column Gap */
.gravity-flex-gap-x-0 { column-gap: 0; }
.gravity-flex-gap-x-1 { column-gap: var(--gravity-space-1); }
.gravity-flex-gap-x-2 { column-gap: var(--gravity-space-2); }
.gravity-flex-gap-x-3 { column-gap: var(--gravity-space-3); }
.gravity-flex-gap-x-4 { column-gap: var(--gravity-space-4); }
.gravity-flex-gap-x-5 { column-gap: var(--gravity-space-5); }
.gravity-flex-gap-x-6 { column-gap: var(--gravity-space-6); }
.gravity-flex-gap-x-8 { column-gap: var(--gravity-space-8); }

/* ================================
 * COMMON FLEX PATTERNS
 * ================================ */

/* Center everything */
.gravity-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Space between with center alignment */
.gravity-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Start alignment */
.gravity-flex-start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* End alignment */
.gravity-flex-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Column center */
.gravity-flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Column start */
.gravity-flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Row with wrap and gap */
.gravity-flex-wrap-gap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gravity-space-4);
}

/* Responsive flex columns */
.gravity-flex-responsive {
  display: flex;
  flex-direction: column;
}

/* ================================
 * RESPONSIVE VARIANTS
 * ================================ */

/* Phone variants (max-width: 590px) */
@media (max-width: 590px) {
  .phone\:gravity-flex { display: flex; }
  .phone\:gravity-flex-col { flex-direction: column; }
  .phone\:gravity-flex-row { flex-direction: row; }
  .phone\:gravity-flex-wrap { flex-wrap: wrap; }
  .phone\:gravity-flex-nowrap { flex-wrap: nowrap; }
  .phone\:gravity-justify-center { justify-content: center; }
  .phone\:gravity-justify-start { justify-content: flex-start; }
  .phone\:gravity-justify-between { justify-content: space-between; }
  .phone\:gravity-items-center { align-items: center; }
  .phone\:gravity-items-start { align-items: flex-start; }
  .phone\:gravity-flex-1 { flex: 1 1 0%; }
  .phone\:gravity-flex-none { flex: none; }
  
  /* Phone specific patterns */
  .phone\:gravity-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .phone\:gravity-flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Tablet variants (591px - 1078px) */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet\:gravity-flex { display: flex; }
  .tablet\:gravity-flex-col { flex-direction: column; }
  .tablet\:gravity-flex-row { flex-direction: row; }
  .tablet\:gravity-flex-wrap { flex-wrap: wrap; }
  .tablet\:gravity-flex-nowrap { flex-wrap: nowrap; }
  .tablet\:gravity-justify-center { justify-content: center; }
  .tablet\:gravity-justify-start { justify-content: flex-start; }
  .tablet\:gravity-justify-between { justify-content: space-between; }
  .tablet\:gravity-items-center { align-items: center; }
  .tablet\:gravity-items-start { align-items: flex-start; }
  .tablet\:gravity-flex-1 { flex: 1 1 0%; }
  .tablet\:gravity-flex-none { flex: none; }
  
  /* Responsive flex change - column on phone, row on tablet+ */
  .tablet\:gravity-flex-responsive {
    flex-direction: row;
  }
}

/* Desktop variants (min-width: 1079px) */
@media (min-width: 1079px) {
  .desktop\:gravity-flex { display: flex; }
  .desktop\:gravity-flex-col { flex-direction: column; }
  .desktop\:gravity-flex-row { flex-direction: row; }
  .desktop\:gravity-flex-wrap { flex-wrap: wrap; }
  .desktop\:gravity-flex-nowrap { flex-wrap: nowrap; }
  .desktop\:gravity-justify-center { justify-content: center; }
  .desktop\:gravity-justify-start { justify-content: flex-start; }
  .desktop\:gravity-justify-between { justify-content: space-between; }
  .desktop\:gravity-items-center { align-items: center; }
  .desktop\:gravity-items-start { align-items: flex-start; }
  .desktop\:gravity-flex-1 { flex: 1 1 0%; }
  .desktop\:gravity-flex-none { flex: none; }
  
  /* Desktop specific patterns */
  .desktop\:gravity-flex-responsive {
    flex-direction: row;
  }
}

/* ================================
 * HOVER AND FOCUS VARIANTS
 * ================================ */

.hover\:gravity-flex:hover { display: flex; }
.hover\:gravity-justify-center:hover { justify-content: center; }
.hover\:gravity-items-center:hover { align-items: center; }

.focus\:gravity-flex:focus { display: flex; }
.focus\:gravity-justify-center:focus { justify-content: center; }
.focus\:gravity-items-center:focus { align-items: center; }

/* ================================
 * GROUP VARIANTS
 * ================================ */

.group:hover .group-hover\:gravity-flex { display: flex; }
.group:hover .group-hover\:gravity-justify-center { justify-content: center; }
.group:hover .group-hover\:gravity-items-center { align-items: center; }

/* ================================
 * PRINT VARIANTS
 * ================================ */

@media print {
  .print\:gravity-flex { display: flex; }
  .print\:gravity-flex-col { flex-direction: column; }
  .print\:gravity-flex-row { flex-direction: row; }
  .print\:gravity-justify-start { justify-content: flex-start; }
  .print\:gravity-items-start { align-items: flex-start; }
}

/* ========================================
 * utilities/grid.css
 * ======================================== */

/*
 * Gravity UI 2.0 Grid Utilities
 *
 * CSS Grid layout utility classes
 */

/* ================================
 * GRID DISPLAY
 * ================================ */

.gravity-grid { display: grid; }
.gravity-inline-grid { display: inline-grid; }

/* ================================
 * GRID TEMPLATE COLUMNS
 * ================================ */

/* Column definitions are in layout/grid.css with responsive variants */
/* .gravity-grid-cols-{1-12}, .gravity-grid-cols-md-{1-12}, .gravity-grid-cols-lg-{1-12} */
.gravity-grid-cols-none { grid-template-columns: none; }

/* ================================
 * GRID TEMPLATE ROWS
 * ================================ */

.gravity-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.gravity-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.gravity-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.gravity-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.gravity-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.gravity-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.gravity-grid-rows-none { grid-template-rows: none; }

/* ================================
 * GRID COLUMN SPAN
 * ================================ */

.gravity-col-span-1 { grid-column: span 1 / span 1; }
.gravity-col-span-2 { grid-column: span 2 / span 2; }
.gravity-col-span-3 { grid-column: span 3 / span 3; }
.gravity-col-span-4 { grid-column: span 4 / span 4; }
.gravity-col-span-5 { grid-column: span 5 / span 5; }
.gravity-col-span-6 { grid-column: span 6 / span 6; }
.gravity-col-span-7 { grid-column: span 7 / span 7; }
.gravity-col-span-8 { grid-column: span 8 / span 8; }
.gravity-col-span-9 { grid-column: span 9 / span 9; }
.gravity-col-span-10 { grid-column: span 10 / span 10; }
.gravity-col-span-11 { grid-column: span 11 / span 11; }
.gravity-col-span-12 { grid-column: span 12 / span 12; }
.gravity-col-span-full { grid-column: 1 / -1; }

/* ================================
 * GRID ROW SPAN
 * ================================ */

.gravity-row-span-1 { grid-row: span 1 / span 1; }
.gravity-row-span-2 { grid-row: span 2 / span 2; }
.gravity-row-span-3 { grid-row: span 3 / span 3; }
.gravity-row-span-4 { grid-row: span 4 / span 4; }
.gravity-row-span-5 { grid-row: span 5 / span 5; }
.gravity-row-span-6 { grid-row: span 6 / span 6; }
.gravity-row-span-full { grid-row: 1 / -1; }

/* ================================
 * GRID GAP
 * ================================ */

/* Gap is handled in spacing.css but include grid-specific aliases here */
.gravity-grid-gap-0 { gap: 0; }
.gravity-grid-gap-1 { gap: 0.25rem; }
.gravity-grid-gap-2 { gap: 0.5rem; }
.gravity-grid-gap-3 { gap: 0.75rem; }
.gravity-grid-gap-4 { gap: 1rem; }
.gravity-grid-gap-5 { gap: 1.25rem; }
.gravity-grid-gap-6 { gap: 1.5rem; }
.gravity-grid-gap-8 { gap: 2rem; }

/* ================================
 * GRID AUTO FLOW
 * ================================ */

.gravity-grid-flow-row { grid-auto-flow: row; }
.gravity-grid-flow-col { grid-auto-flow: column; }
.gravity-grid-flow-row-dense { grid-auto-flow: row dense; }
.gravity-grid-flow-col-dense { grid-auto-flow: column dense; }

/* ================================
 * GRID ALIGNMENT
 * ================================ */

/* Justify items */
.gravity-justify-items-start { justify-items: start; }
.gravity-justify-items-end { justify-items: end; }
.gravity-justify-items-center { justify-items: center; }
.gravity-justify-items-stretch { justify-items: stretch; }

/* Align content */
.gravity-content-start { align-content: flex-start; }
.gravity-content-end { align-content: flex-end; }
.gravity-content-center { align-content: center; }
.gravity-content-between { align-content: space-between; }
.gravity-content-around { align-content: space-around; }
.gravity-content-evenly { align-content: space-evenly; }
.gravity-content-stretch { align-content: stretch; }

/* Place items (shorthand for justify-items and align-items) */
.gravity-place-items-start { place-items: start; }
.gravity-place-items-end { place-items: end; }
.gravity-place-items-center { place-items: center; }
.gravity-place-items-stretch { place-items: stretch; }

/* Place content (shorthand for justify-content and align-content) */
.gravity-place-content-start { place-content: start; }
.gravity-place-content-end { place-content: end; }
.gravity-place-content-center { place-content: center; }
.gravity-place-content-between { place-content: space-between; }
.gravity-place-content-around { place-content: space-around; }
.gravity-place-content-evenly { place-content: space-evenly; }
.gravity-place-content-stretch { place-content: stretch; }

/* ========================================
 * utilities/overflow.css
 * ======================================== */

/*
 * Gravity UI 2.0 Overflow Utilities
 *
 * Control how content behaves when it overflows its container
 */

/* ================================
 * OVERFLOW UTILITIES
 * ================================ */

/* All directions */
.gravity-overflow-auto { overflow: auto; }
.gravity-overflow-hidden { overflow: hidden; }
.gravity-overflow-visible { overflow: visible; }
.gravity-overflow-scroll { overflow: scroll; }

/* Horizontal overflow */
.gravity-overflow-x-auto { overflow-x: auto; }
.gravity-overflow-x-hidden { overflow-x: hidden; }
.gravity-overflow-x-visible { overflow-x: visible; }
.gravity-overflow-x-scroll { overflow-x: scroll; }

/* Vertical overflow */
.gravity-overflow-y-auto { overflow-y: auto; }
.gravity-overflow-y-hidden { overflow-y: hidden; }
.gravity-overflow-y-visible { overflow-y: visible; }
.gravity-overflow-y-scroll { overflow-y: scroll; }

/* Text overflow */
.gravity-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-text-ellipsis {
  text-overflow: ellipsis;
}

.gravity-text-clip {
  text-overflow: clip;
}

/* Scrollbar styling */
.gravity-scrollbar-thin {
  scrollbar-width: thin;
}

.gravity-scrollbar-none {
  scrollbar-width: none;
}

/* Webkit scrollbar styling */
.gravity-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Smooth scrolling */
.gravity-scroll-smooth {
  scroll-behavior: smooth;
}

.gravity-scroll-auto {
  scroll-behavior: auto;
}

/* ========================================
 * utilities/positioning.css
 * ======================================== */

/*
 * Gravity UI 2.0 Positioning Utilities
 * 
 * Utility classes for position, top, right, bottom, left, and z-index
 */

/* ================================
 * POSITION UTILITIES
 * ================================ */

.gravity-static { position: static; }
.gravity-fixed { position: fixed; }
.gravity-absolute { position: absolute; }
.gravity-relative { position: relative; }
.gravity-sticky { position: sticky; }

/* ================================
 * TOP, RIGHT, BOTTOM, LEFT UTILITIES
 * ================================ */

/* Top */
.gravity-top-0 { top: 0; }
.gravity-top-1 { top: var(--gravity-space-1); }
.gravity-top-2 { top: var(--gravity-space-2); }
.gravity-top-3 { top: var(--gravity-space-3); }
.gravity-top-4 { top: var(--gravity-space-4); }
.gravity-top-5 { top: var(--gravity-space-5); }
.gravity-top-6 { top: var(--gravity-space-6); }
.gravity-top-8 { top: var(--gravity-space-8); }
.gravity-top-10 { top: var(--gravity-space-10); }
.gravity-top-1-2 { top: 50%; }
.gravity-top-1-3 { top: 33.333333%; }
.gravity-top-2-3 { top: 66.666667%; }
.gravity-top-1-4 { top: 25%; }
.gravity-top-3-4 { top: 75%; }
.gravity-top-full { top: 100%; }
.gravity-top-auto { top: auto; }

/* Right */
.gravity-right-0 { right: 0; }
.gravity-right-1 { right: var(--gravity-space-1); }
.gravity-right-2 { right: var(--gravity-space-2); }
.gravity-right-3 { right: var(--gravity-space-3); }
.gravity-right-4 { right: var(--gravity-space-4); }
.gravity-right-5 { right: var(--gravity-space-5); }
.gravity-right-6 { right: var(--gravity-space-6); }
.gravity-right-8 { right: var(--gravity-space-8); }
.gravity-right-10 { right: var(--gravity-space-10); }
.gravity-right-1-2 { right: 50%; }
.gravity-right-1-3 { right: 33.333333%; }
.gravity-right-2-3 { right: 66.666667%; }
.gravity-right-1-4 { right: 25%; }
.gravity-right-3-4 { right: 75%; }
.gravity-right-full { right: 100%; }
.gravity-right-auto { right: auto; }

/* Bottom */
.gravity-bottom-0 { bottom: 0; }
.gravity-bottom-1 { bottom: var(--gravity-space-1); }
.gravity-bottom-2 { bottom: var(--gravity-space-2); }
.gravity-bottom-3 { bottom: var(--gravity-space-3); }
.gravity-bottom-4 { bottom: var(--gravity-space-4); }
.gravity-bottom-5 { bottom: var(--gravity-space-5); }
.gravity-bottom-6 { bottom: var(--gravity-space-6); }
.gravity-bottom-8 { bottom: var(--gravity-space-8); }
.gravity-bottom-10 { bottom: var(--gravity-space-10); }
.gravity-bottom-1-2 { bottom: 50%; }
.gravity-bottom-1-3 { bottom: 33.333333%; }
.gravity-bottom-2-3 { bottom: 66.666667%; }
.gravity-bottom-1-4 { bottom: 25%; }
.gravity-bottom-3-4 { bottom: 75%; }
.gravity-bottom-full { bottom: 100%; }
.gravity-bottom-auto { bottom: auto; }

/* Left */
.gravity-left-0 { left: 0; }
.gravity-left-1 { left: var(--gravity-space-1); }
.gravity-left-2 { left: var(--gravity-space-2); }
.gravity-left-3 { left: var(--gravity-space-3); }
.gravity-left-4 { left: var(--gravity-space-4); }
.gravity-left-5 { left: var(--gravity-space-5); }
.gravity-left-6 { left: var(--gravity-space-6); }
.gravity-left-8 { left: var(--gravity-space-8); }
.gravity-left-10 { left: var(--gravity-space-10); }
.gravity-left-1-2 { left: 50%; }
.gravity-left-1-3 { left: 33.333333%; }
.gravity-left-2-3 { left: 66.666667%; }
.gravity-left-1-4 { left: 25%; }
.gravity-left-3-4 { left: 75%; }
.gravity-left-full { left: 100%; }
.gravity-left-auto { left: auto; }

/* Negative values */
.-gravity-top-1 { top: calc(var(--gravity-space-1) * -1); }
.-gravity-top-2 { top: calc(var(--gravity-space-2) * -1); }
.-gravity-top-3 { top: calc(var(--gravity-space-3) * -1); }
.-gravity-top-4 { top: calc(var(--gravity-space-4) * -1); }
.-gravity-top-5 { top: calc(var(--gravity-space-5) * -1); }
.-gravity-top-6 { top: calc(var(--gravity-space-6) * -1); }
.-gravity-top-8 { top: calc(var(--gravity-space-8) * -1); }
.-gravity-top-10 { top: calc(var(--gravity-space-10) * -1); }
.-gravity-top-1/2 { top: -50%; }
.-gravity-top-full { top: -100%; }

.-gravity-right-1 { right: calc(var(--gravity-space-1) * -1); }
.-gravity-right-2 { right: calc(var(--gravity-space-2) * -1); }
.-gravity-right-3 { right: calc(var(--gravity-space-3) * -1); }
.-gravity-right-4 { right: calc(var(--gravity-space-4) * -1); }
.-gravity-right-5 { right: calc(var(--gravity-space-5) * -1); }
.-gravity-right-6 { right: calc(var(--gravity-space-6) * -1); }
.-gravity-right-8 { right: calc(var(--gravity-space-8) * -1); }
.-gravity-right-10 { right: calc(var(--gravity-space-10) * -1); }
.-gravity-right-1/2 { right: -50%; }
.-gravity-right-full { right: -100%; }

.-gravity-bottom-1 { bottom: calc(var(--gravity-space-1) * -1); }
.-gravity-bottom-2 { bottom: calc(var(--gravity-space-2) * -1); }
.-gravity-bottom-3 { bottom: calc(var(--gravity-space-3) * -1); }
.-gravity-bottom-4 { bottom: calc(var(--gravity-space-4) * -1); }
.-gravity-bottom-5 { bottom: calc(var(--gravity-space-5) * -1); }
.-gravity-bottom-6 { bottom: calc(var(--gravity-space-6) * -1); }
.-gravity-bottom-8 { bottom: calc(var(--gravity-space-8) * -1); }
.-gravity-bottom-10 { bottom: calc(var(--gravity-space-10) * -1); }
.-gravity-bottom-1/2 { bottom: -50%; }
.-gravity-bottom-full { bottom: -100%; }

.-gravity-left-1 { left: calc(var(--gravity-space-1) * -1); }
.-gravity-left-2 { left: calc(var(--gravity-space-2) * -1); }
.-gravity-left-3 { left: calc(var(--gravity-space-3) * -1); }
.-gravity-left-4 { left: calc(var(--gravity-space-4) * -1); }
.-gravity-left-5 { left: calc(var(--gravity-space-5) * -1); }
.-gravity-left-6 { left: calc(var(--gravity-space-6) * -1); }
.-gravity-left-8 { left: calc(var(--gravity-space-8) * -1); }
.-gravity-left-10 { left: calc(var(--gravity-space-10) * -1); }
.-gravity-left-1/2 { left: -50%; }
.-gravity-left-full { left: -100%; }

/* ================================
 * INSET UTILITIES
 * ================================ */

.gravity-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.gravity-inset-1 { 
  top: var(--gravity-space-1); 
  right: var(--gravity-space-1); 
  bottom: var(--gravity-space-1); 
  left: var(--gravity-space-1); 
}
.gravity-inset-2 { 
  top: var(--gravity-space-2); 
  right: var(--gravity-space-2); 
  bottom: var(--gravity-space-2); 
  left: var(--gravity-space-2); 
}
.gravity-inset-3 { 
  top: var(--gravity-space-3); 
  right: var(--gravity-space-3); 
  bottom: var(--gravity-space-3); 
  left: var(--gravity-space-3); 
}
.gravity-inset-4 { 
  top: var(--gravity-space-4); 
  right: var(--gravity-space-4); 
  bottom: var(--gravity-space-4); 
  left: var(--gravity-space-4); 
}
.gravity-inset-auto { top: auto; right: auto; bottom: auto; left: auto; }

/* Inset X (horizontal) */
.gravity-inset-x-0 { left: 0; right: 0; }
.gravity-inset-x-1 { left: var(--gravity-space-1); right: var(--gravity-space-1); }
.gravity-inset-x-2 { left: var(--gravity-space-2); right: var(--gravity-space-2); }
.gravity-inset-x-3 { left: var(--gravity-space-3); right: var(--gravity-space-3); }
.gravity-inset-x-4 { left: var(--gravity-space-4); right: var(--gravity-space-4); }
.gravity-inset-x-auto { left: auto; right: auto; }

/* Inset Y (vertical) */
.gravity-inset-y-0 { top: 0; bottom: 0; }
.gravity-inset-y-1 { top: var(--gravity-space-1); bottom: var(--gravity-space-1); }
.gravity-inset-y-2 { top: var(--gravity-space-2); bottom: var(--gravity-space-2); }
.gravity-inset-y-3 { top: var(--gravity-space-3); bottom: var(--gravity-space-3); }
.gravity-inset-y-4 { top: var(--gravity-space-4); bottom: var(--gravity-space-4); }
.gravity-inset-y-auto { top: auto; bottom: auto; }

/* ================================
 * Z-INDEX UTILITIES
 * ================================ */

.gravity-z-0 { z-index: 0; }
.gravity-z-10 { z-index: 10; }
.gravity-z-20 { z-index: 20; }
.gravity-z-30 { z-index: 30; }
.gravity-z-40 { z-index: 40; }
.gravity-z-50 { z-index: 50; }
.gravity-z-auto { z-index: auto; }

/* Semantic z-index utilities based on design tokens */
.gravity-z-dropdown { z-index: var(--gravity-z-dropdown); }
.gravity-z-sticky { z-index: var(--gravity-z-sticky); }
.gravity-z-fixed { z-index: var(--gravity-z-fixed); }
.gravity-z-modal-backdrop { z-index: var(--gravity-z-modal-backdrop); }
.gravity-z-modal { z-index: var(--gravity-z-modal); }
.gravity-z-popover { z-index: var(--gravity-z-popover); }
.gravity-z-tooltip { z-index: var(--gravity-z-tooltip); }
.gravity-z-toast { z-index: var(--gravity-z-toast); }

/* ================================
 * COMMON POSITIONING PATTERNS
 * ================================ */

/* Absolute centering */
.gravity-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Fixed centering */
.gravity-fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Top-left corner */
.gravity-absolute-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

/* Top-right corner */
.gravity-absolute-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

/* Bottom-left corner */
.gravity-absolute-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Bottom-right corner */
.gravity-absolute-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Cover entire parent */
.gravity-absolute-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Fixed cover entire viewport */
.gravity-fixed-cover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Sticky header */
.gravity-sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--gravity-z-sticky);
}

/* Sticky footer */
.gravity-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: var(--gravity-z-sticky);
}

/* ================================
 * RESPONSIVE VARIANTS
 * ================================ */

/* Phone variants (max-width: 590px) */
@media (max-width: 590px) {
  .phone\:gravity-static { position: static; }
  .phone\:gravity-fixed { position: fixed; }
  .phone\:gravity-absolute { position: absolute; }
  .phone\:gravity-relative { position: relative; }
  .phone\:gravity-sticky { position: sticky; }
  
  .phone\:gravity-top-0 { top: 0; }
  .phone\:gravity-right-0 { right: 0; }
  .phone\:gravity-bottom-0 { bottom: 0; }
  .phone\:gravity-left-0 { left: 0; }
  .phone\:gravity-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  
  .phone\:gravity-z-0 { z-index: 0; }
  .phone\:gravity-z-10 { z-index: 10; }
  .phone\:gravity-z-auto { z-index: auto; }
}

/* Tablet variants (591px - 1078px) */
@media (min-width: 591px) and (max-width: 1078px) {
  .tablet\:gravity-static { position: static; }
  .tablet\:gravity-fixed { position: fixed; }
  .tablet\:gravity-absolute { position: absolute; }
  .tablet\:gravity-relative { position: relative; }
  .tablet\:gravity-sticky { position: sticky; }
  
  .tablet\:gravity-top-0 { top: 0; }
  .tablet\:gravity-right-0 { right: 0; }
  .tablet\:gravity-bottom-0 { bottom: 0; }
  .tablet\:gravity-left-0 { left: 0; }
  .tablet\:gravity-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  
  .tablet\:gravity-z-0 { z-index: 0; }
  .tablet\:gravity-z-10 { z-index: 10; }
  .tablet\:gravity-z-auto { z-index: auto; }
}

/* Desktop variants (min-width: 1079px) */
@media (min-width: 1079px) {
  .desktop\:gravity-static { position: static; }
  .desktop\:gravity-fixed { position: fixed; }
  .desktop\:gravity-absolute { position: absolute; }
  .desktop\:gravity-relative { position: relative; }
  .desktop\:gravity-sticky { position: sticky; }
  
  .desktop\:gravity-top-0 { top: 0; }
  .desktop\:gravity-right-0 { right: 0; }
  .desktop\:gravity-bottom-0 { bottom: 0; }
  .desktop\:gravity-left-0 { left: 0; }
  .desktop\:gravity-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  
  .desktop\:gravity-z-0 { z-index: 0; }
  .desktop\:gravity-z-10 { z-index: 10; }
  .desktop\:gravity-z-auto { z-index: auto; }
}

/* ================================
 * HOVER AND FOCUS VARIANTS
 * ================================ */

.hover\:gravity-absolute:hover { position: absolute; }
.hover\:gravity-relative:hover { position: relative; }
.hover\:gravity-z-10:hover { z-index: 10; }
.hover\:gravity-z-20:hover { z-index: 20; }

.focus\:gravity-absolute:focus { position: absolute; }
.focus\:gravity-relative:focus { position: relative; }
.focus\:gravity-z-10:focus { z-index: 10; }
.focus\:gravity-z-20:focus { z-index: 20; }

/* ================================
 * GROUP VARIANTS
 * ================================ */

.group:hover .group-hover\:gravity-absolute { position: absolute; }
.group:hover .group-hover\:gravity-relative { position: relative; }
.group:hover .group-hover\:gravity-z-10 { z-index: 10; }
.group:hover .group-hover\:gravity-z-20 { z-index: 20; }

/* ================================
 * PRINT VARIANTS
 * ================================ */

@media print {
  .print\:gravity-static { position: static; }
  .print\:gravity-relative { position: relative; }
  .print\:gravity-absolute { position: absolute; }
}

/* ========================================
 * utilities/responsive.css
 * ======================================== */

/*
 * Gravity UI 2.0 Responsive Utilities
 *
 * Responsive modifiers and viewport utilities
 */

/* ================================
 * RESPONSIVE PREFIXES
 * ================================ */

/* Large screens (lg:) - 1024px and up */
@media (min-width: 1024px) {
  .gravity-lg-flex-row { flex-direction: row; }
  .gravity-lg-flex-col { flex-direction: column; }
  .gravity-lg-items-center { align-items: center; }
  .gravity-lg-justify-between { justify-content: space-between; }
  .gravity-lg-justify-center { justify-content: center; }
  .gravity-lg-gap-4 { gap: 1rem; }
  .gravity-lg-block { display: block; }
  .gravity-lg-inline-block { display: inline-block; }
  .gravity-lg-hidden { display: none; }
}

/* Medium screens (md:) - 768px and up */
@media (min-width: 768px) {
  .gravity-md-flex-row { flex-direction: row; }
  .gravity-md-flex-col { flex-direction: column; }
  .gravity-md-items-center { align-items: center; }
  .gravity-md-justify-between { justify-content: space-between; }
  .gravity-md-block { display: block; }
  .gravity-md-hidden { display: none; }
}

/* Small screens (sm:) - 640px and up */
@media (min-width: 640px) {
  .gravity-sm-flex-row { flex-direction: row; }
  .gravity-sm-block { display: block; }
  .gravity-sm-hidden { display: none; }
  .gravity-sm-text-xs { font-size: 0.75rem; line-height: 1rem; }
  .gravity-sm-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .gravity-sm-text-base { font-size: 1rem; line-height: 1.5rem; }
  .gravity-sm-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Extra large screens (xl:) - 1280px and up */
@media (min-width: 1280px) {
  .gravity-xl-flex-row { flex-direction: row; }
  .gravity-xl-block { display: block; }
}

/* ================================
 * POSITIONING UTILITIES
 * ================================ */

.gravity-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.gravity-inset-x-0 { left: 0; right: 0; }
.gravity-inset-y-0 { top: 0; bottom: 0; }
.gravity-top-0 { top: 0; }
.gravity-right-0 { right: 0; }
.gravity-bottom-0 { bottom: 0; }
.gravity-left-0 { left: 0; }

/* ================================
 * INTERACTION UTILITIES
 * ================================ */

.gravity-pointer-events-none { pointer-events: none; }
.gravity-pointer-events-auto { pointer-events: auto; }

/* ================================
 * ANIMATION UTILITIES
 * ================================ */

.gravity-animate-spin {
  animation: gravity-spin 1s linear infinite;
}

.gravity-animate-pulse {
  animation: gravity-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.gravity-animate-bounce {
  animation: gravity-bounce 1s infinite;
}

@keyframes gravity-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gravity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes gravity-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* ================================
 * TRANSITION UTILITIES
 * ================================ */

.gravity-transition { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.gravity-transition-none { transition: none; }
.gravity-transition-all { transition-property: all; }
.gravity-transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.gravity-transition-opacity { transition-property: opacity; }
.gravity-transition-shadow { transition-property: box-shadow; }
.gravity-transition-transform { transition-property: transform; }

.gravity-duration-75 { transition-duration: 75ms; }
.gravity-duration-100 { transition-duration: 100ms; }
.gravity-duration-150 { transition-duration: 150ms; }
.gravity-duration-200 { transition-duration: 200ms; }
.gravity-duration-300 { transition-duration: 300ms; }
.gravity-duration-500 { transition-duration: 500ms; }
.gravity-duration-700 { transition-duration: 700ms; }
.gravity-duration-1000 { transition-duration: 1000ms; }

/* ================================
 * FOCUS UTILITIES
 * ================================ */

.gravity-focus-outline-none:focus { outline: none; }
.gravity-focus-ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.gravity-focus-ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.gravity-focus-border-blue-500:focus { border-color: #3B82F6; }
.gravity-focus-text-gray-600:focus { color: #4B5563; }
.gravity-focus-ring-offset-2:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(59, 130, 246, 0.5); }

/* ================================
 * PLACEHOLDER UTILITIES
 * ================================ */

.gravity-placeholder-gray-300::placeholder { color: #D1D5DB; }
.gravity-placeholder-gray-400::placeholder { color: #9CA3AF; }
.gravity-placeholder-gray-500::placeholder { color: #6B7280; }
.gravity-placeholder-gray-600::placeholder { color: #4B5563; }

/* ================================
 * SPECIAL UTILITIES
 * ================================ */

.gravity-py-2-5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.gravity-max-w-2xl { max-width: 42rem; }
.gravity-max-w-xl { max-width: 36rem; }
.gravity-max-w-lg { max-width: 32rem; }
.gravity-max-w-md { max-width: 28rem; }
.gravity-max-w-sm { max-width: 24rem; }

/* ========================================
 * utilities/sizing.css
 * ======================================== */

/*
 * Gravity UI 2.0 Sizing Utilities
 *
 * Width and height utility classes for common sizing patterns
 */

/* ================================
 * WIDTH UTILITIES
 * ================================ */

.gravity-w-full { width: 100%; }
.gravity-w-auto { width: auto; }
.gravity-w-0 { width: 0; }
.gravity-w-px { width: 1px; }
.gravity-w-0-5 { width: 0.125rem; }
.gravity-w-1 { width: 0.25rem; }
.gravity-w-1-5 { width: 0.375rem; }
.gravity-w-2 { width: 0.5rem; }
.gravity-w-2-5 { width: 0.625rem; }
.gravity-w-3 { width: 0.75rem; }
.gravity-w-3-5 { width: 0.875rem; }
.gravity-w-4 { width: 1rem; }
.gravity-w-5 { width: 1.25rem; }
.gravity-w-6 { width: 1.5rem; }
.gravity-w-7 { width: 1.75rem; }
.gravity-w-8 { width: 2rem; }
.gravity-w-9 { width: 2.25rem; }
.gravity-w-10 { width: 2.5rem; }
.gravity-w-11 { width: 2.75rem; }
.gravity-w-12 { width: 3rem; }
.gravity-w-14 { width: 3.5rem; }
.gravity-w-16 { width: 4rem; }
.gravity-w-20 { width: 5rem; }
.gravity-w-24 { width: 6rem; }
.gravity-w-28 { width: 7rem; }
.gravity-w-32 { width: 8rem; }
.gravity-w-36 { width: 9rem; }
.gravity-w-40 { width: 10rem; }
.gravity-w-44 { width: 11rem; }
.gravity-w-48 { width: 12rem; }
.gravity-w-52 { width: 13rem; }
.gravity-w-56 { width: 14rem; }
.gravity-w-60 { width: 15rem; }
.gravity-w-64 { width: 16rem; }
.gravity-w-72 { width: 18rem; }
.gravity-w-80 { width: 20rem; }
.gravity-w-96 { width: 24rem; }

/* Percentage widths */
.gravity-w-1-2 { width: 50%; }
.gravity-w-1-3 { width: 33.333333%; }
.gravity-w-2-3 { width: 66.666667%; }
.gravity-w-1-4 { width: 25%; }
.gravity-w-2-4 { width: 50%; }
.gravity-w-3-4 { width: 75%; }
.gravity-w-1-5 { width: 20%; }
.gravity-w-2-5 { width: 40%; }
.gravity-w-3-5 { width: 60%; }
.gravity-w-4-5 { width: 80%; }
.gravity-w-1-6 { width: 16.666667%; }
.gravity-w-5-6 { width: 83.333333%; }

/* Min/Max widths */
.gravity-w-min { width: min-content; }
.gravity-w-max { width: max-content; }
.gravity-w-fit { width: fit-content; }

/* ================================
 * MAX HEIGHT UTILITIES
 * ================================ */

.gravity-max-h-40 { max-height: 10rem; }
.gravity-max-h-48 { max-height: 12rem; }
.gravity-max-h-64 { max-height: 16rem; }
.gravity-max-h-screen { max-height: 100vh; }

/* ================================
 * HEIGHT UTILITIES
 * ================================ */

.gravity-h-full { height: 100%; }
.gravity-h-screen { height: 100vh; }
.gravity-h-auto { height: auto; }
.gravity-h-0 { height: 0; }
.gravity-h-px { height: 1px; }
.gravity-h-0-5 { height: 0.125rem; }
.gravity-h-1 { height: 0.25rem; }
.gravity-h-1-5 { height: 0.375rem; }
.gravity-h-2 { height: 0.5rem; }
.gravity-h-2-5 { height: 0.625rem; }
.gravity-h-3 { height: 0.75rem; }
.gravity-h-3-5 { height: 0.875rem; }
.gravity-h-4 { height: 1rem; }
.gravity-h-5 { height: 1.25rem; }
.gravity-h-6 { height: 1.5rem; }
.gravity-h-7 { height: 1.75rem; }
.gravity-h-8 { height: 2rem; }
.gravity-h-9 { height: 2.25rem; }
.gravity-h-10 { height: 2.5rem; }
.gravity-h-11 { height: 2.75rem; }
.gravity-h-12 { height: 3rem; }
.gravity-h-14 { height: 3.5rem; }
.gravity-h-16 { height: 4rem; }
.gravity-h-20 { height: 5rem; }
.gravity-h-24 { height: 6rem; }
.gravity-h-28 { height: 7rem; }
.gravity-h-32 { height: 8rem; }
.gravity-h-36 { height: 9rem; }
.gravity-h-40 { height: 10rem; }
.gravity-h-44 { height: 11rem; }
.gravity-h-48 { height: 12rem; }
.gravity-h-52 { height: 13rem; }
.gravity-h-56 { height: 14rem; }
.gravity-h-60 { height: 15rem; }
.gravity-h-64 { height: 16rem; }
.gravity-h-72 { height: 18rem; }
.gravity-h-80 { height: 20rem; }
.gravity-h-96 { height: 24rem; }

/* Min/Max heights */
.gravity-h-min { height: min-content; }
.gravity-h-max { height: max-content; }
.gravity-h-fit { height: fit-content; }

/* ================================
 * MAX HEIGHT UTILITIES
 * ================================ */

.gravity-max-h-0 { max-height: 0; }
.gravity-max-h-48 { max-height: 12rem; }
.gravity-max-h-64 { max-height: 16rem; }
.gravity-max-h-96 { max-height: 24rem; }
.gravity-max-h-full { max-height: 100%; }
.gravity-max-h-screen { max-height: 100vh; }

/* ================================
 * MIN/MAX WIDTH UTILITIES
 * ================================ */

.gravity-min-w-0 { min-width: 0; }
.gravity-min-w-full { min-width: 100%; }
.gravity-min-w-min { min-width: min-content; }
.gravity-min-w-max { min-width: max-content; }
.gravity-min-w-fit { min-width: fit-content; }

.gravity-max-w-none { max-width: none; }
.gravity-max-w-0 { max-width: 0; }
.gravity-max-w-xs { max-width: 20rem; }
.gravity-max-w-sm { max-width: 24rem; }
.gravity-max-w-md { max-width: 28rem; }
.gravity-max-w-lg { max-width: 32rem; }
.gravity-max-w-xl { max-width: 36rem; }
.gravity-max-w-2xl { max-width: 42rem; }
.gravity-max-w-3xl { max-width: 48rem; }
.gravity-max-w-4xl { max-width: 56rem; }
.gravity-max-w-5xl { max-width: 64rem; }
.gravity-max-w-6xl { max-width: 72rem; }
.gravity-max-w-7xl { max-width: 80rem; }
.gravity-max-w-full { max-width: 100%; }
.gravity-max-w-min { max-width: min-content; }
.gravity-max-w-max { max-width: max-content; }
.gravity-max-w-fit { max-width: fit-content; }
.gravity-max-w-prose { max-width: 65ch; }
.gravity-max-w-screen-sm { max-width: 640px; }
.gravity-max-w-screen-md { max-width: 768px; }
.gravity-max-w-screen-lg { max-width: 1024px; }
.gravity-max-w-screen-xl { max-width: 1280px; }
.gravity-max-w-screen-2xl { max-width: 1536px; }

/* ================================
 * MIN/MAX HEIGHT UTILITIES
 * ================================ */

.gravity-min-h-0 { min-height: 0; }
.gravity-min-h-full { min-height: 100%; }
.gravity-min-h-screen { min-height: 100vh; }
.gravity-min-h-min { min-height: min-content; }
.gravity-min-h-max { min-height: max-content; }
.gravity-min-h-fit { min-height: fit-content; }

.gravity-max-h-none { max-height: none; }
.gravity-max-h-0 { max-height: 0; }
.gravity-max-h-full { max-height: 100%; }
.gravity-max-h-screen { max-height: 100vh; }
.gravity-max-h-min { max-height: min-content; }
.gravity-max-h-max { max-height: max-content; }
.gravity-max-h-fit { max-height: fit-content; }

/* ========================================
 * utilities/spacing.css
 * ======================================== */

/*
 * Gravity UI 2.0 Spacing Utilities
 *
 * Margin and padding utility classes for consistent spacing
 */

/* ================================
 * PADDING UTILITIES
 * ================================ */

/* All sides */
.gravity-p-0 { padding: 0; }
.gravity-p-1 { padding: 0.25rem; }
.gravity-p-2 { padding: 0.5rem; }
.gravity-p-3 { padding: 0.75rem; }
.gravity-p-4 { padding: 1rem; }
.gravity-p-5 { padding: 1.25rem; }
.gravity-p-6 { padding: 1.5rem; }
.gravity-p-8 { padding: 2rem; }
.gravity-p-10 { padding: 2.5rem; }
.gravity-p-12 { padding: 3rem; }
.gravity-p-16 { padding: 4rem; }

/* Horizontal padding */
.gravity-px-0 { padding-left: 0; padding-right: 0; }
.gravity-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.gravity-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.gravity-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.gravity-px-4 { padding-left: 1rem; padding-right: 1rem; }
.gravity-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.gravity-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.gravity-px-8 { padding-left: 2rem; padding-right: 2rem; }

/* Vertical padding */
.gravity-py-0 { padding-top: 0; padding-bottom: 0; }
.gravity-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.gravity-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.gravity-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.gravity-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.gravity-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.gravity-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.gravity-py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Individual sides */
.gravity-pt-0 { padding-top: 0; }
.gravity-pt-1 { padding-top: 0.25rem; }
.gravity-pt-2 { padding-top: 0.5rem; }
.gravity-pt-3 { padding-top: 0.75rem; }
.gravity-pt-4 { padding-top: 1rem; }
.gravity-pt-5 { padding-top: 1.25rem; }
.gravity-pt-6 { padding-top: 1.5rem; }
.gravity-pt-8 { padding-top: 2rem; }

.gravity-pr-0 { padding-right: 0; }
.gravity-pr-1 { padding-right: 0.25rem; }
.gravity-pr-2 { padding-right: 0.5rem; }
.gravity-pr-3 { padding-right: 0.75rem; }
.gravity-pr-4 { padding-right: 1rem; }
.gravity-pr-5 { padding-right: 1.25rem; }
.gravity-pr-6 { padding-right: 1.5rem; }
.gravity-pr-8 { padding-right: 2rem; }

.gravity-pb-0 { padding-bottom: 0; }
.gravity-pb-1 { padding-bottom: 0.25rem; }
.gravity-pb-2 { padding-bottom: 0.5rem; }
.gravity-pb-3 { padding-bottom: 0.75rem; }
.gravity-pb-4 { padding-bottom: 1rem; }
.gravity-pb-5 { padding-bottom: 1.25rem; }
.gravity-pb-6 { padding-bottom: 1.5rem; }
.gravity-pb-8 { padding-bottom: 2rem; }

.gravity-pl-0 { padding-left: 0; }
.gravity-pl-1 { padding-left: 0.25rem; }
.gravity-pl-2 { padding-left: 0.5rem; }
.gravity-pl-3 { padding-left: 0.75rem; }
.gravity-pl-4 { padding-left: 1rem; }
.gravity-pl-5 { padding-left: 1.25rem; }
.gravity-pl-6 { padding-left: 1.5rem; }
.gravity-pl-8 { padding-left: 2rem; }

/* ================================
 * MARGIN UTILITIES
 * ================================ */

/* All sides */
.gravity-m-0 { margin: 0; }
.gravity-m-1 { margin: 0.25rem; }
.gravity-m-2 { margin: 0.5rem; }
.gravity-m-3 { margin: 0.75rem; }
.gravity-m-4 { margin: 1rem; }
.gravity-m-5 { margin: 1.25rem; }
.gravity-m-6 { margin: 1.5rem; }
.gravity-m-8 { margin: 2rem; }
.gravity-m-10 { margin: 2.5rem; }
.gravity-m-12 { margin: 3rem; }
.gravity-m-16 { margin: 4rem; }
.gravity-m-auto { margin: auto; }

/* Horizontal margin */
.gravity-mx-0 { margin-left: 0; margin-right: 0; }
.gravity-mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.gravity-mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.gravity-mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.gravity-mx-4 { margin-left: 1rem; margin-right: 1rem; }
.gravity-mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.gravity-mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.gravity-mx-8 { margin-left: 2rem; margin-right: 2rem; }
.gravity-mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical margin */
.gravity-my-0 { margin-top: 0; margin-bottom: 0; }
.gravity-my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.gravity-my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.gravity-my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.gravity-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.gravity-my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.gravity-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.gravity-my-8 { margin-top: 2rem; margin-bottom: 2rem; }

/* Individual sides */
.gravity-mt-0 { margin-top: 0; }
.gravity-mt-1 { margin-top: 0.25rem; }
.gravity-mt-2 { margin-top: 0.5rem; }
.gravity-mt-3 { margin-top: 0.75rem; }
.gravity-mt-4 { margin-top: 1rem; }
.gravity-mt-5 { margin-top: 1.25rem; }
.gravity-mt-6 { margin-top: 1.5rem; }
.gravity-mt-8 { margin-top: 2rem; }

.gravity-mr-0 { margin-right: 0; }
.gravity-mr-1 { margin-right: 0.25rem; }
.gravity-mr-2 { margin-right: 0.5rem; }
.gravity-mr-3 { margin-right: 0.75rem; }
.gravity-mr-4 { margin-right: 1rem; }
.gravity-mr-5 { margin-right: 1.25rem; }
.gravity-mr-6 { margin-right: 1.5rem; }
.gravity-mr-8 { margin-right: 2rem; }

.gravity-mb-0 { margin-bottom: 0; }
.gravity-mb-1 { margin-bottom: 0.25rem; }
.gravity-mb-2 { margin-bottom: 0.5rem; }
.gravity-mb-3 { margin-bottom: 0.75rem; }
.gravity-mb-4 { margin-bottom: 1rem; }
.gravity-mb-5 { margin-bottom: 1.25rem; }
.gravity-mb-6 { margin-bottom: 1.5rem; }
.gravity-mb-8 { margin-bottom: 2rem; }
.gravity-mb-12 { margin-bottom: 3rem; }
.gravity-mb-16 { margin-bottom: 4rem; }

.gravity-ml-0 { margin-left: 0; }
.gravity-ml-1 { margin-left: 0.25rem; }
.gravity-ml-2 { margin-left: 0.5rem; }
.gravity-ml-3 { margin-left: 0.75rem; }
.gravity-ml-4 { margin-left: 1rem; }
.gravity-ml-5 { margin-left: 1.25rem; }
.gravity-ml-6 { margin-left: 1.5rem; }
.gravity-ml-8 { margin-left: 2rem; }

/* ================================
 * GAP UTILITIES (for flexbox/grid)
 * ================================ */

.gravity-gap-0 { gap: 0; }
.gravity-gap-1 { gap: 0.25rem; }
.gravity-gap-2 { gap: 0.5rem; }
.gravity-gap-3 { gap: 0.75rem; }
.gravity-gap-4 { gap: 1rem; }
.gravity-gap-5 { gap: 1.25rem; }
.gravity-gap-6 { gap: 1.5rem; }
.gravity-gap-8 { gap: 2rem; }
.gravity-gap-10 { gap: 2.5rem; }
.gravity-gap-12 { gap: 3rem; }
.gravity-gap-16 { gap: 4rem; }

/* Row and column gap */
.gravity-gap-x-0 { column-gap: 0; }
.gravity-gap-x-1 { column-gap: 0.25rem; }
.gravity-gap-x-2 { column-gap: 0.5rem; }
.gravity-gap-x-3 { column-gap: 0.75rem; }
.gravity-gap-x-4 { column-gap: 1rem; }
.gravity-gap-x-5 { column-gap: 1.25rem; }
.gravity-gap-x-6 { column-gap: 1.5rem; }
.gravity-gap-x-8 { column-gap: 2rem; }

.gravity-gap-y-0 { row-gap: 0; }
.gravity-gap-y-1 { row-gap: 0.25rem; }
.gravity-gap-y-2 { row-gap: 0.5rem; }
.gravity-gap-y-3 { row-gap: 0.75rem; }
.gravity-gap-y-4 { row-gap: 1rem; }
.gravity-gap-y-5 { row-gap: 1.25rem; }
.gravity-gap-y-6 { row-gap: 1.5rem; }
.gravity-gap-y-8 { row-gap: 2rem; }

/* ================================
 * SPACE UTILITIES (for child elements)
 * ================================ */

.gravity-space-y-0 > * + * { margin-top: 0; }
.gravity-space-y-1 > * + * { margin-top: 0.25rem; }
.gravity-space-y-2 > * + * { margin-top: 0.5rem; }
.gravity-space-y-3 > * + * { margin-top: 0.75rem; }
.gravity-space-y-4 > * + * { margin-top: 1rem; }
.gravity-space-y-5 > * + * { margin-top: 1.25rem; }
.gravity-space-y-6 > * + * { margin-top: 1.5rem; }
.gravity-space-y-8 > * + * { margin-top: 2rem; }

.gravity-space-x-0 > * + * { margin-left: 0; }
.gravity-space-x-1 > * + * { margin-left: 0.25rem; }
.gravity-space-x-2 > * + * { margin-left: 0.5rem; }
.gravity-space-x-3 > * + * { margin-left: 0.75rem; }
.gravity-space-x-4 > * + * { margin-left: 1rem; }
.gravity-space-x-5 > * + * { margin-left: 1.25rem; }
.gravity-space-x-6 > * + * { margin-left: 1.5rem; }
.gravity-space-x-8 > * + * { margin-left: 2rem; }

/* ========================================
 * utilities/states.css
 * ======================================== */

/*
 * Gravity UI 2.0 State Utilities
 *
 * Utility classes for hover, focus, disabled, and other interactive states
 */

/* ================================
 * HOVER STATE UTILITIES
 * ================================ */

/* Hover Background Colors */
.gravity-hover-bg-primary:hover { background-color: var(--gravity-bg-primary); }
.gravity-hover-bg-secondary:hover { background-color: var(--gravity-bg-secondary); }
.gravity-hover-bg-muted:hover {
  background-color: var(--gravity-bg-muted);
  transition: background-color var(--gravity-transition-fast);
}
.gravity-hover-bg-gray-100:hover {
  background-color: var(--gravity-gray-100);
  transition: background-color var(--gravity-transition-fast);
}
.gravity-hover-bg-brand:hover {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-white);
  transition: all var(--gravity-transition-fast);
}
.gravity-hover-bg-transparent:hover { background-color: transparent; }

/* Hover Text Colors */
.gravity-hover-text-primary:hover { color: var(--gravity-text-primary); }
.gravity-hover-text-secondary:hover { color: var(--gravity-text-secondary); }
.gravity-hover-text-brand:hover { color: var(--gravity-brand-primary); }
.gravity-hover-text-link:hover {
  color: var(--gravity-text-link-hover);
  text-decoration: underline;
}
.gravity-hover-text-white:hover { color: var(--gravity-white); }
.gravity-hover-text-error:hover { color: var(--gravity-state-error); }
.gravity-hover-text-success:hover { color: var(--gravity-state-success); }

/* Hover Border Colors */
.gravity-hover-border-primary:hover { border-color: var(--gravity-border-primary); }
.gravity-hover-border-brand:hover { border-color: var(--gravity-brand-primary); }
.gravity-hover-border-error:hover { border-color: var(--gravity-state-error); }
.gravity-hover-border-transparent:hover { border-color: transparent; }

/* Hover Opacity */
.gravity-hover-opacity-100:hover { opacity: 1; }
.gravity-hover-opacity-90:hover { opacity: 0.9; }
.gravity-hover-opacity-80:hover { opacity: 0.8; }
.gravity-hover-opacity-75:hover { opacity: 0.75; }
.gravity-hover-opacity-50:hover { opacity: 0.5; }
.gravity-hover-opacity-25:hover { opacity: 0.25; }

/* Hover Shadows */
.gravity-hover-shadow:hover { box-shadow: var(--gravity-shadow-md); }
.gravity-hover-shadow-lg:hover { box-shadow: var(--gravity-shadow-lg); }
.gravity-hover-shadow-xl:hover { box-shadow: var(--gravity-shadow-xl); }
.gravity-hover-shadow-none:hover { box-shadow: none; }

/* Hover Scale */
.gravity-hover-scale-95:hover { transform: scale(0.95); }
.gravity-hover-scale-100:hover { transform: scale(1); }
.gravity-hover-scale-105:hover { transform: scale(1.05); }
.gravity-hover-scale-110:hover { transform: scale(1.1); }
.gravity-hover-scale-125:hover { transform: scale(1.25); }

/* Hover Brightness */
.gravity-hover-brightness-90:hover { filter: brightness(0.9); }
.gravity-hover-brightness-100:hover { filter: brightness(1); }
.gravity-hover-brightness-110:hover { filter: brightness(1.1); }
.gravity-hover-brightness-125:hover { filter: brightness(1.25); }
.gravity-hover-brightness-150:hover { filter: brightness(1.5); }

/* ================================
 * FOCUS STATE UTILITIES
 * ================================ */

/* Focus Border Colors */
.gravity-focus-border-primary:focus { border-color: var(--gravity-border-focus); }
.gravity-focus-border-brand:focus { border-color: var(--gravity-brand-primary); }
.gravity-focus-border-error:focus { border-color: var(--gravity-state-error); }
.gravity-focus-border-success:focus { border-color: var(--gravity-state-success); }

/* Focus Outline */
.gravity-focus-outline-none:focus { outline: none; }
.gravity-focus-outline:focus {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}
.gravity-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.5);
}
.gravity-focus-ring-brand:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.5);
}
.gravity-focus-ring-error:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--gravity-state-error-rgb), 0.5);
}

/* Focus Within */
.gravity-focus-within-border-primary:focus-within { border-color: var(--gravity-border-focus); }
.gravity-focus-within-shadow:focus-within { box-shadow: var(--gravity-shadow-md); }
.gravity-focus-within-bg-muted:focus-within { background-color: var(--gravity-bg-muted); }

/* Focus Visible (keyboard navigation only) */
.gravity-focus-visible-outline:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}
.gravity-focus-visible-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--gravity-brand-primary-rgb), 0.5);
}

/* ================================
 * DISABLED STATE UTILITIES
 * ================================ */

/* Disabled Appearance */
.gravity-disabled-opacity-50:disabled { opacity: 0.5; }
.gravity-disabled-opacity-75:disabled { opacity: 0.75; }
.gravity-disabled-cursor-not-allowed:disabled { cursor: not-allowed; }
.gravity-disabled-pointer-events-none:disabled { pointer-events: none; }

/* Disabled Colors */
.gravity-disabled-text-muted:disabled {
  color: var(--gravity-text-muted);
  opacity: 0.5;
}
.gravity-disabled-bg-muted:disabled {
  background-color: var(--gravity-bg-muted);
  opacity: 0.75;
}
.gravity-disabled-border-muted:disabled {
  border-color: var(--gravity-border-secondary);
  opacity: 0.5;
}

/* Disabled with parent selector */
.gravity-disabled .gravity-disabled-child {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================================
 * ACTIVE STATE UTILITIES
 * ================================ */

.gravity-active-scale-95:active { transform: scale(0.95); }
.gravity-active-scale-90:active { transform: scale(0.9); }
.gravity-active-opacity-80:active { opacity: 0.8; }
.gravity-active-bg-pressed:active {
  background-color: color-mix(in srgb, var(--gravity-bg-primary) 90%, black);
}
.gravity-active-shadow-inner:active {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* ================================
 * CHECKED STATE UTILITIES
 * ================================ */

.gravity-checked-bg-brand:checked {
  background-color: var(--gravity-brand-primary);
  border-color: var(--gravity-brand-primary);
}
.gravity-checked-border-brand:checked {
  border-color: var(--gravity-brand-primary);
}

/* ================================
 * SELECTED STATE UTILITIES
 * ================================ */

.gravity-selected {
  background-color: var(--gravity-bg-selected);
  color: var(--gravity-text-selected);
}
.gravity-selected-bg-brand {
  background-color: var(--gravity-brand-primary);
  color: var(--gravity-white);
}
.gravity-selected-border {
  border: 2px solid var(--gravity-brand-primary);
}

/* ================================
 * LOADING STATE UTILITIES
 * ================================ */

.gravity-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}
.gravity-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid var(--gravity-border-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: gravity-spin 0.8s linear infinite;
}

/* ================================
 * ERROR STATE UTILITIES
 * ================================ */

.gravity-error {
  border-color: var(--gravity-state-error) !important;
  background-color: color-mix(in srgb, var(--gravity-state-error) 5%, transparent);
}
.gravity-error-text {
  color: var(--gravity-state-error);
}
.gravity-error-bg {
  background-color: color-mix(in srgb, var(--gravity-state-error) 10%, transparent);
}

/* ================================
 * SUCCESS STATE UTILITIES
 * ================================ */

.gravity-success {
  border-color: var(--gravity-state-success) !important;
  background-color: color-mix(in srgb, var(--gravity-state-success) 5%, transparent);
}
.gravity-success-text {
  color: var(--gravity-state-success);
}
.gravity-success-bg {
  background-color: color-mix(in srgb, var(--gravity-state-success) 10%, transparent);
}

/* ================================
 * WARNING STATE UTILITIES
 * ================================ */

.gravity-warning {
  border-color: var(--gravity-state-warning) !important;
  background-color: color-mix(in srgb, var(--gravity-state-warning) 5%, transparent);
}
.gravity-warning-text {
  color: var(--gravity-state-warning);
}
.gravity-warning-bg {
  background-color: color-mix(in srgb, var(--gravity-state-warning) 10%, transparent);
}

/* ================================
 * GROUP HOVER UTILITIES
 * ================================ */

.gravity-group:hover .gravity-group-hover-visible { display: block; }
.gravity-group:hover .gravity-group-hover-invisible { display: none; }
.gravity-group:hover .gravity-group-hover-opacity-100 { opacity: 1; }
.gravity-group:hover .gravity-group-hover-opacity-0 { opacity: 0; }
.gravity-group:hover .gravity-group-hover-text-brand { color: var(--gravity-brand-primary); }
.gravity-group:hover .gravity-group-hover-bg-muted { background-color: var(--gravity-bg-muted); }

/* ================================
 * TRANSITIONS
 * ================================ */

.gravity-transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--gravity-transition-normal);
}
.gravity-transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--gravity-transition-normal);
}
.gravity-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--gravity-transition-normal);
}
.gravity-transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--gravity-transition-normal);
}
.gravity-transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--gravity-transition-normal);
}
.gravity-transition-none { transition: none; }

/* ================================
 * COMPONENT STATE UTILITIES
 * ================================ */

/* Component Loading State */
.gravity-state-loading {
  pointer-events: none;
  position: relative;
}

.gravity-state-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Component Hidden State */
.gravity-state-hidden {
  display: none !important;
}

/* Component Disabled State */
.gravity-state-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* ========================================
 * utilities/text.css
 * ======================================== */

/*
 * Gravity UI 2.0 Text Utilities
 *
 * Text alignment, decoration, transform, and other text utilities
 */

/* ================================
 * TEXT ALIGNMENT
 * ================================ */

.gravity-text-left { text-align: left; }
.gravity-text-center { text-align: center; }
.gravity-text-right { text-align: right; }
.gravity-text-justify { text-align: justify; }

/* ================================
 * TEXT TRANSFORM
 * ================================ */

.gravity-uppercase { text-transform: uppercase; }
.gravity-lowercase { text-transform: lowercase; }
.gravity-capitalize { text-transform: capitalize; }
.gravity-normal-case { text-transform: none; }

/* ================================
 * TEXT DECORATION
 * ================================ */

.gravity-underline { text-decoration: underline; }
.gravity-no-underline { text-decoration: none; }
.gravity-line-through { text-decoration: line-through; }
.gravity-overline { text-decoration: overline; }

/* ================================
 * TEXT OVERFLOW
 * ================================ */

.gravity-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gravity-text-ellipsis {
  text-overflow: ellipsis;
}

.gravity-text-clip {
  text-overflow: clip;
}

/* ================================
 * WORD BREAK
 * ================================ */

.gravity-break-normal {
  word-break: normal;
  overflow-wrap: normal;
}

.gravity-break-words {
  overflow-wrap: break-word;
}

.gravity-break-all {
  word-break: break-all;
}

/* ================================
 * WHITESPACE
 * ================================ */

.gravity-whitespace-normal { white-space: normal; }
.gravity-whitespace-nowrap { white-space: nowrap; }
.gravity-whitespace-pre { white-space: pre; }
.gravity-whitespace-pre-line { white-space: pre-line; }
.gravity-whitespace-pre-wrap { white-space: pre-wrap; }

/* ================================
 * LINE HEIGHT
 * ================================ */

.gravity-leading-none { line-height: 1; }
.gravity-leading-tight { line-height: 1.25; }
.gravity-leading-snug { line-height: 1.375; }
.gravity-leading-normal { line-height: 1.5; }
.gravity-leading-relaxed { line-height: 1.625; }
.gravity-leading-loose { line-height: 2; }

/* ================================
 * LETTER SPACING
 * ================================ */

.gravity-tracking-tighter { letter-spacing: -0.05em; }
.gravity-tracking-tight { letter-spacing: -0.025em; }
.gravity-tracking-normal { letter-spacing: 0; }
.gravity-tracking-wide { letter-spacing: 0.025em; }
.gravity-tracking-wider { letter-spacing: 0.05em; }
.gravity-tracking-widest { letter-spacing: 0.1em; }

/* ========================================
 * icons/icon-classes.css
 * ======================================== */

/*
 * Gravity UI 2.0 Individual Icon Classes
 * 
 * Auto-generated CSS classes for all 297 icons using CSS mask technique
 * Each icon has variants for different sizes (16px, 18px, 24px)
 */

/* ================================
 * INDIVIDUAL ICON CLASSES
 * ================================ */

/* Add Item Icon */
.gravity-icon-add-item {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%205C9.55229%205%2010%205.44772%2010%206V8H12C12.5523%208%2013%208.44771%2013%209C13%209.55229%2012.5523%2010%2012%2010H10V12C10%2012.5523%209.55229%2013%209%2013C8.44771%2013%208%2012.5523%208%2012V10H6C5.44772%2010%205%209.55229%205%209C5%208.44771%205.44772%208%206%208H8V6C8%205.44772%208.44771%205%209%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%205C9.55229%205%2010%205.44772%2010%206V8H12C12.5523%208%2013%208.44771%2013%209C13%209.55229%2012.5523%2010%2012%2010H10V12C10%2012.5523%209.55229%2013%209%2013C8.44771%2013%208%2012.5523%208%2012V10H6C5.44772%2010%205%209.55229%205%209C5%208.44771%205.44772%208%206%208H8V6C8%205.44772%208.44771%205%209%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-add-item.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM8%201.65C4.49299%201.65%201.65%204.49299%201.65%208C1.65%2011.507%204.49299%2014.35%208%2014.35C11.507%2014.35%2014.35%2011.507%2014.35%208C14.35%204.49299%2011.507%201.65%208%201.65ZM8%204C8.55229%204%209%204.44772%209%205V7H11C11.5523%207%2012%207.44772%2012%208C12%208.55229%2011.5523%209%2011%209H9V11C9%2011.5523%208.55229%2012%208%2012C7.44772%2012%207%2011.5523%207%2011V9H5C4.44772%209%204%208.55229%204%208C4%207.44772%204.44772%207%205%207H7V5C7%204.44772%207.44772%204%208%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM8%201.65C4.49299%201.65%201.65%204.49299%201.65%208C1.65%2011.507%204.49299%2014.35%208%2014.35C11.507%2014.35%2014.35%2011.507%2014.35%208C14.35%204.49299%2011.507%201.65%208%201.65ZM8%204C8.55229%204%209%204.44772%209%205V7H11C11.5523%207%2012%207.44772%2012%208C12%208.55229%2011.5523%209%2011%209H9V11C9%2011.5523%208.55229%2012%208%2012C7.44772%2012%207%2011.5523%207%2011V9H5C4.44772%209%204%208.55229%204%208C4%207.44772%204.44772%207%205%207H7V5C7%204.44772%207.44772%204%208%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-add-item.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%206C12.5523%206%2013%206.44772%2013%207V11H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013H13V17C13%2017.5523%2012.5523%2018%2012%2018C11.4477%2018%2011%2017.5523%2011%2017V13H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011H11V7C11%206.44772%2011.4477%206%2012%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%206C12.5523%206%2013%206.44772%2013%207V11H17C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013H13V17C13%2017.5523%2012.5523%2018%2012%2018C11.4477%2018%2011%2017.5523%2011%2017V13H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011H11V7C11%206.44772%2011.4477%206%2012%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Annotation Icon */
.gravity-icon-annotation {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.2678%202C14.7762%202%2015.9989%203.2209%2015.9989%204.72695V6.62207L17.6481%208.18292C18.1001%208.61066%2018.1192%209.32322%2017.6908%209.77448L17.6481%209.81708L15.9989%2011.3779V13.2731C15.9989%2014.7791%2014.7762%2016%2013.2678%2016H12.877C12.3926%2016%2012%2015.608%2012%2015.1244C12%2014.6408%2012.3926%2014.2487%2012.877%2014.2487H13.2678C13.8075%2014.2487%2014.245%2013.8119%2014.245%2013.2731V10.6249L15.9619%209L14.245%207.37507V4.72695C14.245%204.18809%2013.8075%203.75125%2013.2678%203.75125H12.877C12.3926%203.75125%2012%203.35922%2012%202.87563C12%202.39203%2012.3926%202%2012.877%202H13.2678ZM5.12304%202C5.60737%202%206%202.39203%206%202.87563C6%203.35922%205.60737%203.75125%205.12304%203.75125H4.73217C4.19249%203.75125%203.75499%204.18809%203.75499%204.72695V7.37507L2.03807%209L3.75499%2010.6249V13.2731C3.75499%2013.8119%204.19249%2014.2487%204.73217%2014.2487H5.12304C5.60737%2014.2487%206%2014.6408%206%2015.1244C6%2015.608%205.60737%2016%205.12304%2016H4.73217C3.22382%2016%202.00107%2014.7791%202.00107%2013.2731V11.3779L0.351861%209.81708C0.33015%209.79616%200.33015%209.79616%200.3092%209.77448C-0.119186%209.32322%20-0.100085%208.61066%200.351862%208.18292L2.00107%206.62207V4.72695C2.00107%203.2209%203.22382%202%204.73217%202H5.12304ZM9.5%208C9.77614%208%2010%208.22386%2010%208.5V13.5C10%2013.7761%209.77614%2014%209.5%2014H8.5C8.22386%2014%208%2013.7761%208%2013.5V8.5C8%208.22386%208.22386%208%208.5%208H9.5ZM9.5%204C9.77614%204%2010%204.22386%2010%204.5V5.5C10%205.77614%209.77614%206%209.5%206H8.5C8.22386%206%208%205.77614%208%205.5V4.5C8%204.22386%208.22386%204%208.5%204H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.2678%202C14.7762%202%2015.9989%203.2209%2015.9989%204.72695V6.62207L17.6481%208.18292C18.1001%208.61066%2018.1192%209.32322%2017.6908%209.77448L17.6481%209.81708L15.9989%2011.3779V13.2731C15.9989%2014.7791%2014.7762%2016%2013.2678%2016H12.877C12.3926%2016%2012%2015.608%2012%2015.1244C12%2014.6408%2012.3926%2014.2487%2012.877%2014.2487H13.2678C13.8075%2014.2487%2014.245%2013.8119%2014.245%2013.2731V10.6249L15.9619%209L14.245%207.37507V4.72695C14.245%204.18809%2013.8075%203.75125%2013.2678%203.75125H12.877C12.3926%203.75125%2012%203.35922%2012%202.87563C12%202.39203%2012.3926%202%2012.877%202H13.2678ZM5.12304%202C5.60737%202%206%202.39203%206%202.87563C6%203.35922%205.60737%203.75125%205.12304%203.75125H4.73217C4.19249%203.75125%203.75499%204.18809%203.75499%204.72695V7.37507L2.03807%209L3.75499%2010.6249V13.2731C3.75499%2013.8119%204.19249%2014.2487%204.73217%2014.2487H5.12304C5.60737%2014.2487%206%2014.6408%206%2015.1244C6%2015.608%205.60737%2016%205.12304%2016H4.73217C3.22382%2016%202.00107%2014.7791%202.00107%2013.2731V11.3779L0.351861%209.81708C0.33015%209.79616%200.33015%209.79616%200.3092%209.77448C-0.119186%209.32322%20-0.100085%208.61066%200.351862%208.18292L2.00107%206.62207V4.72695C2.00107%203.2209%203.22382%202%204.73217%202H5.12304ZM9.5%208C9.77614%208%2010%208.22386%2010%208.5V13.5C10%2013.7761%209.77614%2014%209.5%2014H8.5C8.22386%2014%208%2013.7761%208%2013.5V8.5C8%208.22386%208.22386%208%208.5%208H9.5ZM9.5%204C9.77614%204%2010%204.22386%2010%204.5V5.5C10%205.77614%209.77614%206%209.5%206H8.5C8.22386%206%208%205.77614%208%205.5V4.5C8%204.22386%208.22386%204%208.5%204H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-annotation.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%202C20.2092%202%2022%203.79086%2022%206V9.57002L23.6065%2011.0928C24.0742%2011.536%2024.1238%2012.2548%2023.7422%2012.756L23.6065%2012.9072L22%2014.43V18C22%2020.2091%2020.2092%2022%2018%2022H17C16.4477%2022%2016%2021.5523%2016%2021C16%2020.4477%2016.4477%2020%2017%2020H18C19.1046%2020%2020%2019.1046%2020%2018V13.57L21.6564%2012L20%2010.43V6C20%204.89543%2019.1046%204%2018%204H17C16.4477%204%2016%203.55228%2016%203C16%202.44772%2016.4477%202%2017%202H18ZM7.00002%202C7.5523%202%208.00002%202.44772%208.00002%203C8.00002%203.55228%207.5523%204%207.00002%204H6.00002C4.89545%204%204.00002%204.89543%204.00002%206V10.43L2.34364%2012L4.00002%2013.57V18C4.00002%2019.1046%204.89545%2020%206.00002%2020H7.00002C7.5523%2020%208.00002%2020.4477%208.00002%2021C8.00002%2021.5523%207.5523%2022%207.00002%2022H6.00002C3.79088%2022%202.00002%2020.2091%202.00002%2018V14.43L0.393502%2012.9072L0.346206%2012.8599C-0.128714%2012.3589%20-0.107539%2011.5677%200.393502%2011.0928L2.00002%209.57002V6C2.00002%203.79086%203.79088%202%206.00002%202H7.00002ZM12.5%2010C12.7762%2010%2013%2010.2239%2013%2010.5V17.5C13%2017.7761%2012.7762%2018%2012.5%2018H11.5C11.2239%2018%2011%2017.7761%2011%2017.5V10.5C11%2010.2239%2011.2239%2010%2011.5%2010H12.5ZM12.5%206C12.7762%206%2013%206.22386%2013%206.5V7.5C13%207.77614%2012.7762%208%2012.5%208H11.5C11.2239%208%2011%207.77614%2011%207.5V6.5C11%206.22386%2011.2239%206%2011.5%206H12.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%202C20.2092%202%2022%203.79086%2022%206V9.57002L23.6065%2011.0928C24.0742%2011.536%2024.1238%2012.2548%2023.7422%2012.756L23.6065%2012.9072L22%2014.43V18C22%2020.2091%2020.2092%2022%2018%2022H17C16.4477%2022%2016%2021.5523%2016%2021C16%2020.4477%2016.4477%2020%2017%2020H18C19.1046%2020%2020%2019.1046%2020%2018V13.57L21.6564%2012L20%2010.43V6C20%204.89543%2019.1046%204%2018%204H17C16.4477%204%2016%203.55228%2016%203C16%202.44772%2016.4477%202%2017%202H18ZM7.00002%202C7.5523%202%208.00002%202.44772%208.00002%203C8.00002%203.55228%207.5523%204%207.00002%204H6.00002C4.89545%204%204.00002%204.89543%204.00002%206V10.43L2.34364%2012L4.00002%2013.57V18C4.00002%2019.1046%204.89545%2020%206.00002%2020H7.00002C7.5523%2020%208.00002%2020.4477%208.00002%2021C8.00002%2021.5523%207.5523%2022%207.00002%2022H6.00002C3.79088%2022%202.00002%2020.2091%202.00002%2018V14.43L0.393502%2012.9072L0.346206%2012.8599C-0.128714%2012.3589%20-0.107539%2011.5677%200.393502%2011.0928L2.00002%209.57002V6C2.00002%203.79086%203.79088%202%206.00002%202H7.00002ZM12.5%2010C12.7762%2010%2013%2010.2239%2013%2010.5V17.5C13%2017.7761%2012.7762%2018%2012.5%2018H11.5C11.2239%2018%2011%2017.7761%2011%2017.5V10.5C11%2010.2239%2011.2239%2010%2011.5%2010H12.5ZM12.5%206C12.7762%206%2013%206.22386%2013%206.5V7.5C13%207.77614%2012.7762%208%2012.5%208H11.5C11.2239%208%2011%207.77614%2011%207.5V6.5C11%206.22386%2011.2239%206%2011.5%206H12.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Archive Icon */
.gravity-icon-archive {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.2925%201C15.0588%201%2015.7578%201.43789%2016.0921%202.12745L17%204V14.25C17%2015.7688%2015.7688%2017%2014.25%2017H3.75C2.23122%2017%201%2015.7688%201%2014.25V4L1.9079%202.12745C2.24223%201.43789%202.94119%201%203.70753%201H14.2925ZM15.25%205.75H2.75V14.25C2.75%2014.7628%203.13604%2015.1855%203.63338%2015.2433L3.75%2015.25H14.25C14.7628%2015.25%2015.1855%2014.864%2015.2433%2014.3666L15.25%2014.25V5.75ZM9%207C9.48325%207%209.875%207.39287%209.875%207.87751V11.007L11.5011%209.38182C11.844%209.03913%2012.4%209.03913%2012.7428%209.38182C13.0857%209.7245%2013.0857%2010.2801%2012.7428%2010.6228L9.62053%2013.7433C9.27762%2014.0857%208.72193%2014.0856%208.37915%2013.743L5.25716%2010.6228C4.91428%2010.2801%204.91428%209.7245%205.25716%209.38182C5.60005%209.03913%206.15598%209.03913%206.49886%209.38182L8.125%2011.007V7.87751C8.125%207.39287%208.51675%207%209%207ZM14.2925%202.75H3.70753C3.6309%202.75%203.55965%202.78503%203.51282%202.84318L3.48258%202.89093L2.94485%204H15.0552L14.5174%202.89093C14.4756%202.80474%2014.3883%202.75%2014.2925%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.2925%201C15.0588%201%2015.7578%201.43789%2016.0921%202.12745L17%204V14.25C17%2015.7688%2015.7688%2017%2014.25%2017H3.75C2.23122%2017%201%2015.7688%201%2014.25V4L1.9079%202.12745C2.24223%201.43789%202.94119%201%203.70753%201H14.2925ZM15.25%205.75H2.75V14.25C2.75%2014.7628%203.13604%2015.1855%203.63338%2015.2433L3.75%2015.25H14.25C14.7628%2015.25%2015.1855%2014.864%2015.2433%2014.3666L15.25%2014.25V5.75ZM9%207C9.48325%207%209.875%207.39287%209.875%207.87751V11.007L11.5011%209.38182C11.844%209.03913%2012.4%209.03913%2012.7428%209.38182C13.0857%209.7245%2013.0857%2010.2801%2012.7428%2010.6228L9.62053%2013.7433C9.27762%2014.0857%208.72193%2014.0856%208.37915%2013.743L5.25716%2010.6228C4.91428%2010.2801%204.91428%209.7245%205.25716%209.38182C5.60005%209.03913%206.15598%209.03913%206.49886%209.38182L8.125%2011.007V7.87751C8.125%207.39287%208.51675%207%209%207ZM14.2925%202.75H3.70753C3.6309%202.75%203.55965%202.78503%203.51282%202.84318L3.48258%202.89093L2.94485%204H15.0552L14.5174%202.89093C14.4756%202.80474%2014.3883%202.75%2014.2925%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-archive.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.6459%201C20.4637%201%2021.1992%201.4979%2021.5029%202.25722L23%206V20.25C23%2021.7688%2021.7688%2023%2020.25%2023H3.75C2.23122%2023%201%2021.7688%201%2020.25V6L2.49711%202.25722C2.80084%201.4979%203.53626%201%204.35407%201H19.6459ZM21%208H3V20.25C3%2020.6297%203.28215%2020.9435%203.64823%2020.9932L3.75%2021H20.25C20.6297%2021%2020.9435%2020.7178%2020.9932%2020.3518L21%2020.25V8ZM12%2010C12.5523%2010%2013%2010.4477%2013%2011V15.5858L15.2929%2013.2929C15.6834%2012.9024%2016.3166%2012.9024%2016.7071%2013.2929C17.0976%2013.6834%2017.0976%2014.3166%2016.7071%2014.7071L12.7071%2018.7071C12.5261%2018.8881%2012.2761%2019%2012%2019C11.7239%2019%2011.4739%2018.8881%2011.2929%2018.7071L7.29289%2014.7071C6.90237%2014.3166%206.90237%2013.6834%207.29289%2013.2929C7.68342%2012.9024%208.31658%2012.9024%208.70711%2013.2929L11%2015.5858V11C11%2010.4477%2011.4477%2010%2012%2010ZM19.6459%203H4.35407L3.15407%206H20.8459L19.6459%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.6459%201C20.4637%201%2021.1992%201.4979%2021.5029%202.25722L23%206V20.25C23%2021.7688%2021.7688%2023%2020.25%2023H3.75C2.23122%2023%201%2021.7688%201%2020.25V6L2.49711%202.25722C2.80084%201.4979%203.53626%201%204.35407%201H19.6459ZM21%208H3V20.25C3%2020.6297%203.28215%2020.9435%203.64823%2020.9932L3.75%2021H20.25C20.6297%2021%2020.9435%2020.7178%2020.9932%2020.3518L21%2020.25V8ZM12%2010C12.5523%2010%2013%2010.4477%2013%2011V15.5858L15.2929%2013.2929C15.6834%2012.9024%2016.3166%2012.9024%2016.7071%2013.2929C17.0976%2013.6834%2017.0976%2014.3166%2016.7071%2014.7071L12.7071%2018.7071C12.5261%2018.8881%2012.2761%2019%2012%2019C11.7239%2019%2011.4739%2018.8881%2011.2929%2018.7071L7.29289%2014.7071C6.90237%2014.3166%206.90237%2013.6834%207.29289%2013.2929C7.68342%2012.9024%208.31658%2012.9024%208.70711%2013.2929L11%2015.5858V11C11%2010.4477%2011.4477%2010%2012%2010ZM19.6459%203H4.35407L3.15407%206H20.8459L19.6459%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Ascending Icon */
.gravity-icon-ascending {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%206.32815V14C10%2014.5523%209.55228%2015%209%2015C8.44772%2015%208%2014.5523%208%2014V6.32815L5.6281%208.71849C5.25565%209.09384%204.65179%209.09384%204.27934%208.71849C3.90689%208.34315%203.90689%207.73459%204.27934%207.35925L8.32562%203.28151C8.69807%202.90616%209.30193%202.90616%209.67438%203.28151L13.7207%207.35925C14.0931%207.73459%2014.0931%208.34315%2013.7207%208.71849C13.3482%209.09384%2012.7444%209.09384%2012.3719%208.71849L10%206.32815Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%206.32815V14C10%2014.5523%209.55228%2015%209%2015C8.44772%2015%208%2014.5523%208%2014V6.32815L5.6281%208.71849C5.25565%209.09384%204.65179%209.09384%204.27934%208.71849C3.90689%208.34315%203.90689%207.73459%204.27934%207.35925L8.32562%203.28151C8.69807%202.90616%209.30193%202.90616%209.67438%203.28151L13.7207%207.35925C14.0931%207.73459%2014.0931%208.34315%2013.7207%208.71849C13.3482%209.09384%2012.7444%209.09384%2012.3719%208.71849L10%206.32815Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-ascending.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%207.41421V19C13%2019.5523%2012.5523%2020%2012%2020C11.4477%2020%2011%2019.5523%2011%2019V7.41421L7.70711%2010.7071C7.31658%2011.0976%206.68342%2011.0976%206.29289%2010.7071C5.90237%2010.3166%205.90237%209.68342%206.29289%209.29289L11.2929%204.29289C11.6834%203.90237%2012.3166%203.90237%2012.7071%204.29289L17.7071%209.29289C18.0976%209.68342%2018.0976%2010.3166%2017.7071%2010.7071C17.3166%2011.0976%2016.6834%2011.0976%2016.2929%2010.7071L13%207.41421Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%207.41421V19C13%2019.5523%2012.5523%2020%2012%2020C11.4477%2020%2011%2019.5523%2011%2019V7.41421L7.70711%2010.7071C7.31658%2011.0976%206.68342%2011.0976%206.29289%2010.7071C5.90237%2010.3166%205.90237%209.68342%206.29289%209.29289L11.2929%204.29289C11.6834%203.90237%2012.3166%203.90237%2012.7071%204.29289L17.7071%209.29289C18.0976%209.68342%2018.0976%2010.3166%2017.7071%2010.7071C17.3166%2011.0976%2016.6834%2011.0976%2016.2929%2010.7071L13%207.41421Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Attachment Icon */
.gravity-icon-attachment {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.005%205.88C13.005%205.39676%2013.3968%205.005%2013.88%205.005C14.3633%205.005%2014.755%205.39676%2014.755%205.88V13.37C14.755%2015.9243%2012.6843%2017.995%2010.13%2017.995H7.63C5.07569%2017.995%203.005%2015.9243%203.005%2013.37L3.005%203.63C3.005%201.62797%204.62797%200.00500488%206.63%200.00500488L8.13%200.00500488C10.132%200.00500488%2011.755%201.62797%2011.755%203.63V11.3535C11.755%2012.8032%2010.5798%2013.9785%209.13%2013.9785H8.63C7.18026%2013.9785%206.005%2012.8032%206.005%2011.3535V5.88C6.005%205.39676%206.39676%205.005%206.88%205.005C7.36325%205.005%207.755%205.39676%207.755%205.88V11.3535C7.755%2011.8367%208.14676%2012.2285%208.63%2012.2285H9.13C9.61325%2012.2285%2010.005%2011.8367%2010.005%2011.3535V3.63C10.005%202.59447%209.16554%201.755%208.13%201.755H6.63C5.59447%201.755%204.755%202.59447%204.755%203.63V13.37C4.755%2014.9578%206.04219%2016.245%207.63%2016.245H10.13C11.7178%2016.245%2013.005%2014.9578%2013.005%2013.37V5.88Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.005%205.88C13.005%205.39676%2013.3968%205.005%2013.88%205.005C14.3633%205.005%2014.755%205.39676%2014.755%205.88V13.37C14.755%2015.9243%2012.6843%2017.995%2010.13%2017.995H7.63C5.07569%2017.995%203.005%2015.9243%203.005%2013.37L3.005%203.63C3.005%201.62797%204.62797%200.00500488%206.63%200.00500488L8.13%200.00500488C10.132%200.00500488%2011.755%201.62797%2011.755%203.63V11.3535C11.755%2012.8032%2010.5798%2013.9785%209.13%2013.9785H8.63C7.18026%2013.9785%206.005%2012.8032%206.005%2011.3535V5.88C6.005%205.39676%206.39676%205.005%206.88%205.005C7.36325%205.005%207.755%205.39676%207.755%205.88V11.3535C7.755%2011.8367%208.14676%2012.2285%208.63%2012.2285H9.13C9.61325%2012.2285%2010.005%2011.8367%2010.005%2011.3535V3.63C10.005%202.59447%209.16554%201.755%208.13%201.755H6.63C5.59447%201.755%204.755%202.59447%204.755%203.63V13.37C4.755%2014.9578%206.04219%2016.245%207.63%2016.245H10.13C11.7178%2016.245%2013.005%2014.9578%2013.005%2013.37V5.88Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-attachment.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%208C17%207.44772%2017.4477%207%2018%207C18.5523%207%2019%207.44772%2019%208V18.5C19%2021.5376%2016.5376%2024%2013.5%2024H10.5C7.46243%2024%205%2021.5376%205%2018.5L5%204.5C5%202.01472%207.01472%200%209.5%200L11.5%200C13.9853%200%2016%202.01472%2016%204.5V15.35C16%2017.3658%2014.3658%2019%2012.35%2019H11.65C9.63416%2019%208%2017.3658%208%2015.35V8C8%207.44772%208.44772%207%209%207C9.55228%207%2010%207.44772%2010%208V15.35C10%2016.2613%2010.7387%2017%2011.65%2017H12.35C13.2613%2017%2014%2016.2613%2014%2015.35V4.5C14%203.11929%2012.8807%202%2011.5%202H9.5C8.11929%202%207%203.11929%207%204.5V18.5C7%2020.433%208.567%2022%2010.5%2022H13.5C15.433%2022%2017%2020.433%2017%2018.5V8Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%208C17%207.44772%2017.4477%207%2018%207C18.5523%207%2019%207.44772%2019%208V18.5C19%2021.5376%2016.5376%2024%2013.5%2024H10.5C7.46243%2024%205%2021.5376%205%2018.5L5%204.5C5%202.01472%207.01472%200%209.5%200L11.5%200C13.9853%200%2016%202.01472%2016%204.5V15.35C16%2017.3658%2014.3658%2019%2012.35%2019H11.65C9.63416%2019%208%2017.3658%208%2015.35V8C8%207.44772%208.44772%207%209%207C9.55228%207%2010%207.44772%2010%208V15.35C10%2016.2613%2010.7387%2017%2011.65%2017H12.35C13.2613%2017%2014%2016.2613%2014%2015.35V4.5C14%203.11929%2012.8807%202%2011.5%202H9.5C8.11929%202%207%203.11929%207%204.5V18.5C7%2020.433%208.567%2022%2010.5%2022H13.5C15.433%2022%2017%2020.433%2017%2018.5V8Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Audio High Icon */
.gravity-icon-audio-high {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.3283%200.77046C15.6532%202.11632%2017.875%205.35181%2017.875%209.00001C17.875%2012.6482%2015.6532%2015.8837%2012.3283%2017.2296C11.8804%2017.4109%2011.3703%2017.1948%2011.1889%2016.7468C11.0076%2016.2989%2011.2237%2015.7887%2011.6717%2015.6074C14.3412%2014.5269%2016.125%2011.9292%2016.125%209.00001C16.125%206.07084%2014.3412%203.47318%2011.6717%202.3926C11.2237%202.21128%2011.0076%201.70116%2011.1889%201.25322C11.3703%200.805275%2011.8804%200.589138%2012.3283%200.77046ZM8.25%201.65726C8.66421%201.65726%209%201.99305%209%202.40726V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.50001C0%206.67159%200.671573%206.00001%201.5%206.00001H3.58406L7.72048%201.87613C7.86106%201.73597%208.05148%201.65726%208.25%201.65726ZM12.5835%204.99386C13.7151%206.00661%2014.375%207.45112%2014.375%209.00001C14.375%2010.5489%2013.7151%2011.9934%2012.5835%2013.0062C12.2235%2013.3285%2011.6703%2013.2978%2011.348%2012.9377C11.0257%2012.5776%2011.0564%2012.0245%2011.4165%2011.7022C12.1809%2011.018%2012.625%2010.0458%2012.625%209.00001C12.625%207.95419%2012.1809%206.98202%2011.4165%206.29785C11.0564%205.97556%2011.0257%205.42239%2011.348%205.0623C11.6703%204.70222%2012.2235%204.67158%2012.5835%204.99386Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.3283%200.77046C15.6532%202.11632%2017.875%205.35181%2017.875%209.00001C17.875%2012.6482%2015.6532%2015.8837%2012.3283%2017.2296C11.8804%2017.4109%2011.3703%2017.1948%2011.1889%2016.7468C11.0076%2016.2989%2011.2237%2015.7887%2011.6717%2015.6074C14.3412%2014.5269%2016.125%2011.9292%2016.125%209.00001C16.125%206.07084%2014.3412%203.47318%2011.6717%202.3926C11.2237%202.21128%2011.0076%201.70116%2011.1889%201.25322C11.3703%200.805275%2011.8804%200.589138%2012.3283%200.77046ZM8.25%201.65726C8.66421%201.65726%209%201.99305%209%202.40726V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.50001C0%206.67159%200.671573%206.00001%201.5%206.00001H3.58406L7.72048%201.87613C7.86106%201.73597%208.05148%201.65726%208.25%201.65726ZM12.5835%204.99386C13.7151%206.00661%2014.375%207.45112%2014.375%209.00001C14.375%2010.5489%2013.7151%2011.9934%2012.5835%2013.0062C12.2235%2013.3285%2011.6703%2013.2978%2011.348%2012.9377C11.0257%2012.5776%2011.0564%2012.0245%2011.4165%2011.7022C12.1809%2011.018%2012.625%2010.0458%2012.625%209.00001C12.625%207.95419%2012.1809%206.98202%2011.4165%206.29785C11.0564%205.97556%2011.0257%205.42239%2011.348%205.0623C11.6703%204.70222%2012.2235%204.67158%2012.5835%204.99386Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-audio-high.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.2722%200.451822C20.3968%201.90125%2024%206.5959%2024%2012C24%2017.4041%2020.3968%2022.0988%2015.2722%2023.5482C14.7407%2023.6985%2014.1881%2023.3895%2014.0377%2022.8581C13.8874%2022.3267%2014.1964%2021.774%2014.7278%2021.6237C18.9968%2020.4163%2022%2016.5034%2022%2012C22%207.49664%2018.9968%203.58374%2014.7278%202.37633C14.1964%202.22602%2013.8874%201.67335%2014.0377%201.14191C14.1881%200.610478%2014.7407%200.301513%2015.2722%200.451822ZM11%201.66244C11.5523%201.66244%2012%202.11015%2012%202.66244V21.3334C12%2021.6055%2011.8892%2021.8658%2011.6931%2022.0543C11.2949%2022.4371%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V10C0%208.89544%200.89543%208.00001%202%208.00001H4.35944L10.2864%201.96193C10.4744%201.77036%2010.7316%201.66244%2011%201.66244ZM15.4622%205.34543C17.9229%206.62793%2019.5%209.17431%2019.5%2012C19.5%2014.8257%2017.9229%2017.3721%2015.4622%2018.6546C14.9724%2018.9098%2014.3685%2018.7197%2014.1132%2018.23C13.858%2017.7402%2014.0481%2017.1363%2014.5378%2016.881C16.3438%2015.9398%2017.5%2014.0729%2017.5%2012C17.5%209.92708%2016.3438%208.06025%2014.5378%207.119C14.0481%206.86374%2013.858%206.25979%2014.1132%205.77003C14.3685%205.28027%2014.9724%205.09018%2015.4622%205.34543Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.2722%200.451822C20.3968%201.90125%2024%206.5959%2024%2012C24%2017.4041%2020.3968%2022.0988%2015.2722%2023.5482C14.7407%2023.6985%2014.1881%2023.3895%2014.0377%2022.8581C13.8874%2022.3267%2014.1964%2021.774%2014.7278%2021.6237C18.9968%2020.4163%2022%2016.5034%2022%2012C22%207.49664%2018.9968%203.58374%2014.7278%202.37633C14.1964%202.22602%2013.8874%201.67335%2014.0377%201.14191C14.1881%200.610478%2014.7407%200.301513%2015.2722%200.451822ZM11%201.66244C11.5523%201.66244%2012%202.11015%2012%202.66244V21.3334C12%2021.6055%2011.8892%2021.8658%2011.6931%2022.0543C11.2949%2022.4371%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V10C0%208.89544%200.89543%208.00001%202%208.00001H4.35944L10.2864%201.96193C10.4744%201.77036%2010.7316%201.66244%2011%201.66244ZM15.4622%205.34543C17.9229%206.62793%2019.5%209.17431%2019.5%2012C19.5%2014.8257%2017.9229%2017.3721%2015.4622%2018.6546C14.9724%2018.9098%2014.3685%2018.7197%2014.1132%2018.23C13.858%2017.7402%2014.0481%2017.1363%2014.5378%2016.881C16.3438%2015.9398%2017.5%2014.0729%2017.5%2012C17.5%209.92708%2016.3438%208.06025%2014.5378%207.119C14.0481%206.86374%2013.858%206.25979%2014.1132%205.77003C14.3685%205.28027%2014.9724%205.09018%2015.4622%205.34543Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Audio Low Icon */
.gravity-icon-audio-low {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%201.65723C8.66421%201.65723%209%201.99301%209%202.40723V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.49998C0%206.67155%200.671573%205.99998%201.5%205.99998H3.58406L7.72048%201.87609C7.86106%201.73593%208.05148%201.65723%208.25%201.65723ZM12.5835%204.99382C13.7151%206.00657%2014.375%207.45108%2014.375%208.99998C14.375%2010.5489%2013.7151%2011.9934%2012.5835%2013.0061C12.2235%2013.3284%2011.6703%2013.2978%2011.348%2012.9377C11.0257%2012.5776%2011.0564%2012.0244%2011.4165%2011.7021C12.1809%2011.018%2012.625%2010.0458%2012.625%208.99998C12.625%207.95415%2012.1809%206.98198%2011.4165%206.29781C11.0564%205.97552%2011.0257%205.42235%2011.348%205.06227C11.6703%204.70218%2012.2235%204.67154%2012.5835%204.99382Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%201.65723C8.66421%201.65723%209%201.99301%209%202.40723V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.49998C0%206.67155%200.671573%205.99998%201.5%205.99998H3.58406L7.72048%201.87609C7.86106%201.73593%208.05148%201.65723%208.25%201.65723ZM12.5835%204.99382C13.7151%206.00657%2014.375%207.45108%2014.375%208.99998C14.375%2010.5489%2013.7151%2011.9934%2012.5835%2013.0061C12.2235%2013.3284%2011.6703%2013.2978%2011.348%2012.9377C11.0257%2012.5776%2011.0564%2012.0244%2011.4165%2011.7021C12.1809%2011.018%2012.625%2010.0458%2012.625%208.99998C12.625%207.95415%2012.1809%206.98198%2011.4165%206.29781C11.0564%205.97552%2011.0257%205.42235%2011.348%205.06227C11.6703%204.70218%2012.2235%204.67154%2012.5835%204.99382Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-audio-low.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.66241C11.5523%201.66241%2012%202.11013%2012%202.66241V21.3334C12%2021.6054%2011.8892%2021.8657%2011.6931%2022.0543C11.2949%2022.437%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V9.99999C0%208.89542%200.89543%207.99999%202%207.99999H4.35944L10.2864%201.96191C10.4744%201.77034%2010.7316%201.66241%2011%201.66241ZM15.4622%205.34541C17.9229%206.62791%2019.5%209.17428%2019.5%2012C19.5%2014.8257%2017.9229%2017.3721%2015.4622%2018.6546C14.9724%2018.9098%2014.3685%2018.7197%2014.1132%2018.23C13.858%2017.7402%2014.0481%2017.1363%2014.5378%2016.881C16.3438%2015.9398%2017.5%2014.0729%2017.5%2012C17.5%209.92706%2016.3438%208.06022%2014.5378%207.11898C14.0481%206.86372%2013.858%206.25977%2014.1132%205.77001C14.3685%205.28025%2014.9724%205.09015%2015.4622%205.34541Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.66241C11.5523%201.66241%2012%202.11013%2012%202.66241V21.3334C12%2021.6054%2011.8892%2021.8657%2011.6931%2022.0543C11.2949%2022.437%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V9.99999C0%208.89542%200.89543%207.99999%202%207.99999H4.35944L10.2864%201.96191C10.4744%201.77034%2010.7316%201.66241%2011%201.66241ZM15.4622%205.34541C17.9229%206.62791%2019.5%209.17428%2019.5%2012C19.5%2014.8257%2017.9229%2017.3721%2015.4622%2018.6546C14.9724%2018.9098%2014.3685%2018.7197%2014.1132%2018.23C13.858%2017.7402%2014.0481%2017.1363%2014.5378%2016.881C16.3438%2015.9398%2017.5%2014.0729%2017.5%2012C17.5%209.92706%2016.3438%208.06022%2014.5378%207.11898C14.0481%206.86372%2013.858%206.25977%2014.1132%205.77001C14.3685%205.28025%2014.9724%205.09015%2015.4622%205.34541Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Audio Off Icon */
.gravity-icon-audio-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%201.65723C8.66421%201.65723%209%201.99301%209%202.40723V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.49998C0%206.67155%200.671573%205.99998%201.5%205.99998H3.58406L7.72048%201.87609C7.86106%201.73593%208.05148%201.65723%208.25%201.65723ZM12.3657%206.23429L14%207.86861L15.6343%206.23429C15.9467%205.92187%2016.4533%205.92187%2016.7657%206.23429C17.0781%206.54671%2017.0781%207.05324%2016.7657%207.36566L15.1314%208.99998L16.7657%2010.6343C17.0781%2010.9467%2017.0781%2011.4532%2016.7657%2011.7657C16.4533%2012.0781%2015.9467%2012.0781%2015.6343%2011.7657L14%2010.1313L12.3657%2011.7657C12.0533%2012.0781%2011.5467%2012.0781%2011.2343%2011.7657C10.9219%2011.4532%2010.9219%2010.9467%2011.2343%2010.6343L12.8686%208.99998L11.2343%207.36566C10.9219%207.05324%2010.9219%206.54671%2011.2343%206.23429C11.5467%205.92187%2012.0533%205.92187%2012.3657%206.23429Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%201.65723C8.66421%201.65723%209%201.99301%209%202.40723V15.5887C9%2015.7899%208.91915%2015.9827%208.77561%2016.1237C8.48013%2016.414%208.00527%2016.4098%207.71499%2016.1143L3.67298%2012H1.5C0.671573%2012%200%2011.3284%200%2010.5V7.49998C0%206.67155%200.671573%205.99998%201.5%205.99998H3.58406L7.72048%201.87609C7.86106%201.73593%208.05148%201.65723%208.25%201.65723ZM12.3657%206.23429L14%207.86861L15.6343%206.23429C15.9467%205.92187%2016.4533%205.92187%2016.7657%206.23429C17.0781%206.54671%2017.0781%207.05324%2016.7657%207.36566L15.1314%208.99998L16.7657%2010.6343C17.0781%2010.9467%2017.0781%2011.4532%2016.7657%2011.7657C16.4533%2012.0781%2015.9467%2012.0781%2015.6343%2011.7657L14%2010.1313L12.3657%2011.7657C12.0533%2012.0781%2011.5467%2012.0781%2011.2343%2011.7657C10.9219%2011.4532%2010.9219%2010.9467%2011.2343%2010.6343L12.8686%208.99998L11.2343%207.36566C10.9219%207.05324%2010.9219%206.54671%2011.2343%206.23429C11.5467%205.92187%2012.0533%205.92187%2012.3657%206.23429Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-audio-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.66241C11.5523%201.66241%2012%202.11013%2012%202.66241V21.3334C12%2021.6054%2011.8892%2021.8657%2011.6931%2022.0543C11.2949%2022.437%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V9.99999C0%208.89542%200.89543%207.99999%202%207.99999H4.35944L10.2864%201.96191C10.4744%201.77034%2010.7316%201.66241%2011%201.66241ZM15.7071%207.29288L19%2010.5858L22.2929%207.29288C22.6834%206.90236%2023.3166%206.90236%2023.7071%207.29288C24.0976%207.6834%2024.0976%208.31657%2023.7071%208.70709L20.4142%2012L23.7071%2015.2929C24.0976%2015.6834%2024.0976%2016.3166%2023.7071%2016.7071C23.3166%2017.0976%2022.6834%2017.0976%2022.2929%2016.7071L19%2013.4142L15.7071%2016.7071C15.3166%2017.0976%2014.6834%2017.0976%2014.2929%2016.7071C13.9024%2016.3166%2013.9024%2015.6834%2014.2929%2015.2929L17.5858%2012L14.2929%208.70709C13.9024%208.31657%2013.9024%207.6834%2014.2929%207.29288C14.6834%206.90236%2015.3166%206.90236%2015.7071%207.29288Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.66241C11.5523%201.66241%2012%202.11013%2012%202.66241V21.3334C12%2021.6054%2011.8892%2021.8657%2011.6931%2022.0543C11.2949%2022.437%2010.6619%2022.4246%2010.2791%2022.0265L4.48517%2016H2C0.89543%2016%200%2015.1046%200%2014V9.99999C0%208.89542%200.89543%207.99999%202%207.99999H4.35944L10.2864%201.96191C10.4744%201.77034%2010.7316%201.66241%2011%201.66241ZM15.7071%207.29288L19%2010.5858L22.2929%207.29288C22.6834%206.90236%2023.3166%206.90236%2023.7071%207.29288C24.0976%207.6834%2024.0976%208.31657%2023.7071%208.70709L20.4142%2012L23.7071%2015.2929C24.0976%2015.6834%2024.0976%2016.3166%2023.7071%2016.7071C23.3166%2017.0976%2022.6834%2017.0976%2022.2929%2016.7071L19%2013.4142L15.7071%2016.7071C15.3166%2017.0976%2014.6834%2017.0976%2014.2929%2016.7071C13.9024%2016.3166%2013.9024%2015.6834%2014.2929%2015.2929L17.5858%2012L14.2929%208.70709C13.9024%208.31657%2013.9024%207.6834%2014.2929%207.29288C14.6834%206.90236%2015.3166%206.90236%2015.7071%207.29288Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Back Icon */
.gravity-icon-back {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.41741%208H15C15.5523%208%2016%208.44772%2016%209C16%209.55228%2015.5523%2010%2015%2010H5.40995L9.70337%2014.2957C10.0939%2014.6864%2010.0939%2015.32%209.70337%2015.7107C9.31285%2016.1014%208.67968%2016.1014%208.28916%2015.7107L2.29289%209.71122C1.90237%209.32049%201.90237%208.68698%202.29289%208.29625L8.28916%202.29678C8.67968%201.90605%209.31285%201.90605%209.70337%202.29678C10.0939%202.68752%2010.0939%203.32102%209.70337%203.71175L5.41741%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.41741%208H15C15.5523%208%2016%208.44772%2016%209C16%209.55228%2015.5523%2010%2015%2010H5.40995L9.70337%2014.2957C10.0939%2014.6864%2010.0939%2015.32%209.70337%2015.7107C9.31285%2016.1014%208.67968%2016.1014%208.28916%2015.7107L2.29289%209.71122C1.90237%209.32049%201.90237%208.68698%202.29289%208.29625L8.28916%202.29678C8.67968%201.90605%209.31285%201.90605%209.70337%202.29678C10.0939%202.68752%2010.0939%203.32102%209.70337%203.71175L5.41741%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-back.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.23191%207H13C13.5523%207%2014%207.44772%2014%208C14%208.55228%2013.5523%209%2013%209H5.23191L8.63891%2012.4159C9.00036%2012.7783%209.00036%2013.3658%208.63891%2013.7282C8.27746%2014.0906%207.69142%2014.0906%207.32997%2013.7282L2.27109%208.65617C1.90964%208.29378%201.90964%207.70622%202.27109%207.34383L7.32997%202.2718C7.69142%201.9094%208.27746%201.9094%208.63891%202.2718C9.00036%202.63419%209.00036%203.22175%208.63891%203.58414L5.23191%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.23191%207H13C13.5523%207%2014%207.44772%2014%208C14%208.55228%2013.5523%209%2013%209H5.23191L8.63891%2012.4159C9.00036%2012.7783%209.00036%2013.3658%208.63891%2013.7282C8.27746%2014.0906%207.69142%2014.0906%207.32997%2013.7282L2.27109%208.65617C1.90964%208.29378%201.90964%207.70622%202.27109%207.34383L7.32997%202.2718C7.69142%201.9094%208.27746%201.9094%208.63891%202.2718C9.00036%202.63419%209.00036%203.22175%208.63891%203.58414L5.23191%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-back.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.41421%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H5.41421L12.6874%2020.2731C13.0779%2020.6637%2013.0779%2021.2968%2012.6874%2021.6874C12.2968%2022.0779%2011.6637%2022.0779%2011.2731%2021.6874L2.29289%2012.7071C1.90237%2012.3166%201.90237%2011.6834%202.29289%2011.2929L11.2731%202.31264C11.6637%201.92211%2012.2968%201.92211%2012.6874%202.31264C13.0779%202.70316%2013.0779%203.33633%2012.6874%203.72685L5.41421%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.41421%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H5.41421L12.6874%2020.2731C13.0779%2020.6637%2013.0779%2021.2968%2012.6874%2021.6874C12.2968%2022.0779%2011.6637%2022.0779%2011.2731%2021.6874L2.29289%2012.7071C1.90237%2012.3166%201.90237%2011.6834%202.29289%2011.2929L11.2731%202.31264C11.6637%201.92211%2012.2968%201.92211%2012.6874%202.31264C13.0779%202.70316%2013.0779%203.33633%2012.6874%203.72685L5.41421%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Bold Icon */
.gravity-icon-bold {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2016H4C3.44772%2016%203%2015.5523%203%2015V3C3%202.44772%203.44772%202%204%202H9.5C11.9853%202%2014%203.8804%2014%206.2C14%207.04533%2013.7324%207.83233%2013.272%208.49125C14.324%209.26004%2015%2010.4563%2015%2011.8C15%2014.1196%2012.9853%2016%2010.5%2016ZM6%2013.4H10.5C11.3284%2013.4%2012%2012.6837%2012%2011.8C12%2010.9164%2011.3284%2010.2%2010.5%2010.2H6V13.4ZM6%207.60001H9.5C10.3284%207.60001%2011%206.95083%2011%206.15001C11%205.3492%2010.3284%204.70001%209.5%204.70001H6V7.60001Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2016H4C3.44772%2016%203%2015.5523%203%2015V3C3%202.44772%203.44772%202%204%202H9.5C11.9853%202%2014%203.8804%2014%206.2C14%207.04533%2013.7324%207.83233%2013.272%208.49125C14.324%209.26004%2015%2010.4563%2015%2011.8C15%2014.1196%2012.9853%2016%2010.5%2016ZM6%2013.4H10.5C11.3284%2013.4%2012%2012.6837%2012%2011.8C12%2010.9164%2011.3284%2010.2%2010.5%2010.2H6V13.4ZM6%207.60001H9.5C10.3284%207.60001%2011%206.95083%2011%206.15001C11%205.3492%2010.3284%204.70001%209.5%204.70001H6V7.60001Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-bold.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2022H5C4.44772%2022%204%2021.5523%204%2021V3C4%202.44772%204.44772%202%205%202H14C17.3137%202%2020%204.68629%2020%208C20%209.28374%2019.5968%2010.4733%2018.9102%2011.449C20.1897%2012.5494%2021%2014.1801%2021%2016C21%2019.3137%2018.3137%2022%2015%2022ZM8%2018H15C16.1046%2018%2017%2017.1046%2017%2016C17%2014.8954%2016.1046%2014%2015%2014H8V18ZM8%2010H14C15.1046%2010%2016%209.10457%2016%208C16%206.89543%2015.1046%206%2014%206H8V10Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2022H5C4.44772%2022%204%2021.5523%204%2021V3C4%202.44772%204.44772%202%205%202H14C17.3137%202%2020%204.68629%2020%208C20%209.28374%2019.5968%2010.4733%2018.9102%2011.449C20.1897%2012.5494%2021%2014.1801%2021%2016C21%2019.3137%2018.3137%2022%2015%2022ZM8%2018H15C16.1046%2018%2017%2017.1046%2017%2016C17%2014.8954%2016.1046%2014%2015%2014H8V18ZM8%2010H14C15.1046%2010%2016%209.10457%2016%208C16%206.89543%2015.1046%206%2014%206H8V10Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Bookmark Off Icon */
.gravity-icon-bookmark-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.25%203C13.25%202.86193%2013.1381%202.75%2013%202.75H5C4.86193%202.75%204.75%202.86193%204.75%203V14.3783L9%2010.7661L13.25%2014.3783V3ZM9%2013.0627L4.64762%2016.762C4.2268%2017.1196%203.5957%2017.0684%203.23803%2016.6476C3.08437%2016.4668%203%2016.2373%203%2016V3C3%201.89543%203.89543%201%205%201H13C14.1046%201%2015%201.89543%2015%203V16C15%2016.5523%2014.5523%2017%2014%2017C13.7627%2017%2013.5332%2016.9156%2013.3524%2016.762L9%2013.0627Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.25%203C13.25%202.86193%2013.1381%202.75%2013%202.75H5C4.86193%202.75%204.75%202.86193%204.75%203V14.3783L9%2010.7661L13.25%2014.3783V3ZM9%2013.0627L4.64762%2016.762C4.2268%2017.1196%203.5957%2017.0684%203.23803%2016.6476C3.08437%2016.4668%203%2016.2373%203%2016V3C3%201.89543%203.89543%201%205%201H13C14.1046%201%2015%201.89543%2015%203V16C15%2016.5523%2014.5523%2017%2014%2017C13.7627%2017%2013.5332%2016.9156%2013.3524%2016.762L9%2013.0627Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-bookmark-off.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3%202.77778C11.3%202.73482%2011.2652%202.7%2011.2222%202.7H4.77778C4.73482%202.7%204.7%202.73482%204.7%202.77778V12.3539L8%209.54222L11.3%2012.3539V2.77778ZM11.5346%2014.7872L8%2011.7756L4.46537%2014.7872C4.09169%2015.1056%203.53067%2015.0607%203.21229%2014.6871C3.07526%2014.5262%203%2014.3219%203%2014.1106V2.77778C3%201.79594%203.79594%201%204.77778%201H11.2222C12.2041%201%2013%201.79594%2013%202.77778V14.1106C13%2014.6015%2012.602%2014.9995%2012.1111%2014.9995C11.8998%2014.9995%2011.6955%2014.9242%2011.5346%2014.7872Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3%202.77778C11.3%202.73482%2011.2652%202.7%2011.2222%202.7H4.77778C4.73482%202.7%204.7%202.73482%204.7%202.77778V12.3539L8%209.54222L11.3%2012.3539V2.77778ZM11.5346%2014.7872L8%2011.7756L4.46537%2014.7872C4.09169%2015.1056%203.53067%2015.0607%203.21229%2014.6871C3.07526%2014.5262%203%2014.3219%203%2014.1106V2.77778C3%201.79594%203.79594%201%204.77778%201H11.2222C12.2041%201%2013%201.79594%2013%202.77778V14.1106C13%2014.6015%2012.602%2014.9995%2012.1111%2014.9995C11.8998%2014.9995%2011.6955%2014.9242%2011.5346%2014.7872Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-bookmark-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%203H6V19.7673L12%2014.4127L18%2019.7673V3ZM12%2017.0933L5.66584%2022.7461C5.25378%2023.1138%204.62163%2023.0779%204.2539%2022.6658C4.09038%2022.4826%204%2022.2456%204%2022V3C4%201.89543%204.89543%201%206%201H18C19.1046%201%2020%201.89543%2020%203V22C20%2022.5523%2019.5523%2023%2019%2023C18.7544%2023%2018.5174%2022.9096%2018.3342%2022.7461L12%2017.0933Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%203H6V19.7673L12%2014.4127L18%2019.7673V3ZM12%2017.0933L5.66584%2022.7461C5.25378%2023.1138%204.62163%2023.0779%204.2539%2022.6658C4.09038%2022.4826%204%2022.2456%204%2022V3C4%201.89543%204.89543%201%206%201H18C19.1046%201%2020%201.89543%2020%203V22C20%2022.5523%2019.5523%2023%2019%2023C18.7544%2023%2018.5174%2022.9096%2018.3342%2022.7461L12%2017.0933Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Bookmark On Icon */
.gravity-icon-bookmark-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2013.0627L4.64762%2016.762C4.2268%2017.1196%203.5957%2017.0684%203.23803%2016.6476C3.08437%2016.4668%203%2016.2373%203%2016V3C3%201.89543%203.89543%201%205%201H13C14.1046%201%2015%201.89543%2015%203V16C15%2016.5523%2014.5523%2017%2014%2017C13.7627%2017%2013.5332%2016.9156%2013.3524%2016.762L9%2013.0627Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2013.0627L4.64762%2016.762C4.2268%2017.1196%203.5957%2017.0684%203.23803%2016.6476C3.08437%2016.4668%203%2016.2373%203%2016V3C3%201.89543%203.89543%201%205%201H13C14.1046%201%2015%201.89543%2015%203V16C15%2016.5523%2014.5523%2017%2014%2017C13.7627%2017%2013.5332%2016.9156%2013.3524%2016.762L9%2013.0627Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-bookmark-on.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.5346%2014.7872L8%2011.7756L4.46537%2014.7872C4.09169%2015.1056%203.53067%2015.0607%203.21229%2014.6871C3.07526%2014.5262%203%2014.3219%203%2014.1106L3%202.77778C3%201.79594%203.79594%201%204.77778%201L11.2222%201C12.2041%201%2013%201.79594%2013%202.77778V14.1106C13%2014.6015%2012.602%2014.9995%2012.1111%2014.9995C11.8998%2014.9995%2011.6955%2014.9242%2011.5346%2014.7872Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.5346%2014.7872L8%2011.7756L4.46537%2014.7872C4.09169%2015.1056%203.53067%2015.0607%203.21229%2014.6871C3.07526%2014.5262%203%2014.3219%203%2014.1106L3%202.77778C3%201.79594%203.79594%201%204.77778%201L11.2222%201C12.2041%201%2013%201.79594%2013%202.77778V14.1106C13%2014.6015%2012.602%2014.9995%2012.1111%2014.9995C11.8998%2014.9995%2011.6955%2014.9242%2011.5346%2014.7872Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-bookmark-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2017.0933L5.66584%2022.7461C5.25378%2023.1138%204.62163%2023.0779%204.2539%2022.6658C4.09038%2022.4826%204%2022.2456%204%2022V3C4%201.89543%204.89543%201%206%201L18%201C19.1046%201%2020%201.89543%2020%203V22C20%2022.5523%2019.5523%2023%2019%2023C18.7544%2023%2018.5174%2022.9096%2018.3342%2022.7461L12%2017.0933Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2017.0933L5.66584%2022.7461C5.25378%2023.1138%204.62163%2023.0779%204.2539%2022.6658C4.09038%2022.4826%204%2022.2456%204%2022V3C4%201.89543%204.89543%201%206%201L18%201C19.1046%201%2020%201.89543%2020%203V22C20%2022.5523%2019.5523%2023%2019%2023C18.7544%2023%2018.5174%2022.9096%2018.3342%2022.7461L12%2017.0933Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Cart Icon */
.gravity-icon-cart {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.5%2014C7.32843%2014%208%2014.6716%208%2015.5C8%2016.3284%207.32843%2017%206.5%2017C5.67157%2017%205%2016.3284%205%2015.5C5%2014.6716%205.67157%2014%206.5%2014ZM13.5%2014C14.3284%2014%2015%2014.6716%2015%2015.5C15%2016.3284%2014.3284%2017%2013.5%2017C12.6716%2017%2012%2016.3284%2012%2015.5C12%2014.6716%2012.6716%2014%2013.5%2014ZM2.98952%200.999893C3.70982%200.999893%204.32845%201.51183%204.46313%202.21943L4.802%203.99984L16.2441%203.99999C16.6583%203.99999%2016.9941%204.33578%2016.9941%204.75C16.9941%204.79697%2016.9897%204.84384%2016.9809%204.88998L15.8263%2010.9666C15.6022%2012.1463%2014.571%2013%2013.3702%2013H6.8038C5.60345%2013%204.57253%2012.1467%204.34798%2010.9676L2.86041%203.15633C2.8155%202.92048%202.60929%202.74985%202.3692%202.74987L1.375%202.74994C0.928955%202.74997%200.560844%202.41622%200.506825%201.98481L0.5%201.875C0.5%201.39174%200.891745%200.999893%201.375%200.999893H2.98952ZM5.135%205.74984L6.02812%2010.437C6.1105%2010.8693%206.46385%2011.1921%206.89196%2011.2429L7.01043%2011.2499L13.1614%2011.25C13.6019%2011.25%2013.9854%2010.9627%2014.115%2010.551L14.144%2010.4358L15.03%205.75L5.135%205.74984Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.5%2014C7.32843%2014%208%2014.6716%208%2015.5C8%2016.3284%207.32843%2017%206.5%2017C5.67157%2017%205%2016.3284%205%2015.5C5%2014.6716%205.67157%2014%206.5%2014ZM13.5%2014C14.3284%2014%2015%2014.6716%2015%2015.5C15%2016.3284%2014.3284%2017%2013.5%2017C12.6716%2017%2012%2016.3284%2012%2015.5C12%2014.6716%2012.6716%2014%2013.5%2014ZM2.98952%200.999893C3.70982%200.999893%204.32845%201.51183%204.46313%202.21943L4.802%203.99984L16.2441%203.99999C16.6583%203.99999%2016.9941%204.33578%2016.9941%204.75C16.9941%204.79697%2016.9897%204.84384%2016.9809%204.88998L15.8263%2010.9666C15.6022%2012.1463%2014.571%2013%2013.3702%2013H6.8038C5.60345%2013%204.57253%2012.1467%204.34798%2010.9676L2.86041%203.15633C2.8155%202.92048%202.60929%202.74985%202.3692%202.74987L1.375%202.74994C0.928955%202.74997%200.560844%202.41622%200.506825%201.98481L0.5%201.875C0.5%201.39174%200.891745%200.999893%201.375%200.999893H2.98952ZM5.135%205.74984L6.02812%2010.437C6.1105%2010.8693%206.46385%2011.1921%206.89196%2011.2429L7.01043%2011.2499L13.1614%2011.25C13.6019%2011.25%2013.9854%2010.9627%2014.115%2010.551L14.144%2010.4358L15.03%205.75L5.135%205.74984Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-cart.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%2019.5C9.2165%2019.5%2010%2020.2835%2010%2021.25C10%2022.2165%209.2165%2023%208.25%2023C7.2835%2023%206.5%2022.2165%206.5%2021.25C6.5%2020.2835%207.2835%2019.5%208.25%2019.5ZM18.75%2019.5C19.7165%2019.5%2020.5%2020.2835%2020.5%2021.25C20.5%2022.2165%2019.7165%2023%2018.75%2023C17.7835%2023%2017%2022.2165%2017%2021.25C17%2020.2835%2017.7835%2019.5%2018.75%2019.5ZM3.43808%201.99989C4.40455%201.99989%205.23278%202.69093%205.40583%203.64178L5.835%205.99983L22.0009%205.99999C22.5532%206%2023.0009%206.44772%2023.0009%207C23.0009%207.06022%2022.9955%207.12032%2022.9847%207.17956L21.4588%2015.5387C21.1986%2016.9642%2019.9566%2018%2018.5075%2018H8.48778C7.0379%2018%205.79551%2016.9629%205.53619%2015.5364L3.55096%204.61573C3.48613%204.25908%203.1755%203.99985%202.81301%203.99987L1.5%203.99994C0.987194%203.99997%200.564525%203.61398%200.506734%203.11668L0.5%203C0.5%202.44771%200.947709%201.99989%201.5%201.99989H3.43808ZM6.198%207.99983L7.50367%2015.1788C7.58294%2015.6146%207.93751%2015.9413%208.36829%2015.9928L8.48752%2015.9998L18.507%2016C18.9498%2016%2019.3345%2015.7099%2019.4624%2015.2955L19.4907%2015.1795L20.801%208L6.198%207.99983Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.25%2019.5C9.2165%2019.5%2010%2020.2835%2010%2021.25C10%2022.2165%209.2165%2023%208.25%2023C7.2835%2023%206.5%2022.2165%206.5%2021.25C6.5%2020.2835%207.2835%2019.5%208.25%2019.5ZM18.75%2019.5C19.7165%2019.5%2020.5%2020.2835%2020.5%2021.25C20.5%2022.2165%2019.7165%2023%2018.75%2023C17.7835%2023%2017%2022.2165%2017%2021.25C17%2020.2835%2017.7835%2019.5%2018.75%2019.5ZM3.43808%201.99989C4.40455%201.99989%205.23278%202.69093%205.40583%203.64178L5.835%205.99983L22.0009%205.99999C22.5532%206%2023.0009%206.44772%2023.0009%207C23.0009%207.06022%2022.9955%207.12032%2022.9847%207.17956L21.4588%2015.5387C21.1986%2016.9642%2019.9566%2018%2018.5075%2018H8.48778C7.0379%2018%205.79551%2016.9629%205.53619%2015.5364L3.55096%204.61573C3.48613%204.25908%203.1755%203.99985%202.81301%203.99987L1.5%203.99994C0.987194%203.99997%200.564525%203.61398%200.506734%203.11668L0.5%203C0.5%202.44771%200.947709%201.99989%201.5%201.99989H3.43808ZM6.198%207.99983L7.50367%2015.1788C7.58294%2015.6146%207.93751%2015.9413%208.36829%2015.9928L8.48752%2015.9998L18.507%2016C18.9498%2016%2019.3345%2015.7099%2019.4624%2015.2955L19.4907%2015.1795L20.801%208L6.198%207.99983Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Close Icon */
.gravity-icon-close {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%207.67193L12.3969%204.27505C12.7636%203.90832%2013.3582%203.90832%2013.7249%204.27505C14.0917%204.64179%2014.0917%205.23638%2013.7249%205.60312L10.3281%209L13.7249%2012.3969C14.0917%2012.7636%2014.0917%2013.3582%2013.7249%2013.7249C13.3582%2014.0917%2012.7636%2014.0917%2012.3969%2013.7249L9%2010.3281L5.60312%2013.7249C5.23638%2014.0917%204.64179%2014.0917%204.27505%2013.7249C3.90832%2013.3582%203.90832%2012.7636%204.27505%2012.3969L7.67193%209L4.27505%205.60312C3.90832%205.23638%203.90832%204.64179%204.27505%204.27505C4.64179%203.90832%205.23638%203.90832%205.60312%204.27505L9%207.67193Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%207.67193L12.3969%204.27505C12.7636%203.90832%2013.3582%203.90832%2013.7249%204.27505C14.0917%204.64179%2014.0917%205.23638%2013.7249%205.60312L10.3281%209L13.7249%2012.3969C14.0917%2012.7636%2014.0917%2013.3582%2013.7249%2013.7249C13.3582%2014.0917%2012.7636%2014.0917%2012.3969%2013.7249L9%2010.3281L5.60312%2013.7249C5.23638%2014.0917%204.64179%2014.0917%204.27505%2013.7249C3.90832%2013.3582%203.90832%2012.7636%204.27505%2012.3969L7.67193%209L4.27505%205.60312C3.90832%205.23638%203.90832%204.64179%204.27505%204.27505C4.64179%203.90832%205.23638%203.90832%205.60312%204.27505L9%207.67193Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-close.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%206.75478L10.4969%204.25789C10.8407%203.91404%2011.3982%203.91404%2011.7421%204.25789C12.086%204.60175%2012.086%205.15926%2011.7421%205.50311L9.24522%208L11.7421%2010.4969C12.086%2010.8407%2012.086%2011.3982%2011.7421%2011.7421C11.3982%2012.086%2010.8407%2012.086%2010.4969%2011.7421L8%209.24522L5.50311%2011.7421C5.15926%2012.086%204.60175%2012.086%204.25789%2011.7421C3.91404%2011.3982%203.91404%2010.8407%204.25789%2010.4969L6.75478%208L4.25789%205.50311C3.91404%205.15926%203.91404%204.60175%204.25789%204.25789C4.60175%203.91404%205.15926%203.91404%205.50311%204.25789L8%206.75478Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%206.75478L10.4969%204.25789C10.8407%203.91404%2011.3982%203.91404%2011.7421%204.25789C12.086%204.60175%2012.086%205.15926%2011.7421%205.50311L9.24522%208L11.7421%2010.4969C12.086%2010.8407%2012.086%2011.3982%2011.7421%2011.7421C11.3982%2012.086%2010.8407%2012.086%2010.4969%2011.7421L8%209.24522L5.50311%2011.7421C5.15926%2012.086%204.60175%2012.086%204.25789%2011.7421C3.91404%2011.3982%203.91404%2010.8407%204.25789%2010.4969L6.75478%208L4.25789%205.50311C3.91404%205.15926%203.91404%204.60175%204.25789%204.25789C4.60175%203.91404%205.15926%203.91404%205.50311%204.25789L8%206.75478Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-close.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0002%2010.5858L18.7177%203.86827C19.1082%203.47775%2019.7414%203.47775%2020.1319%203.86827C20.5224%204.2588%2020.5224%204.89196%2020.1319%205.28249L13.4144%2012L20.1318%2018.7175C20.5223%2019.108%2020.5223%2019.7411%2020.1318%2020.1317C19.7413%2020.5222%2019.1081%2020.5222%2018.7176%2020.1317L12.0002%2013.4142L5.28255%2020.1316C4.89203%2020.5222%204.25886%2020.5222%203.86834%2020.1316C3.47782%2019.7411%203.47782%2019.108%203.86834%2018.7174L10.5859%2012L3.86851%205.28257C3.47798%204.89204%203.47798%204.25888%203.86851%203.86836C4.25903%203.47783%204.8922%203.47783%205.28272%203.86836L12.0002%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0002%2010.5858L18.7177%203.86827C19.1082%203.47775%2019.7414%203.47775%2020.1319%203.86827C20.5224%204.2588%2020.5224%204.89196%2020.1319%205.28249L13.4144%2012L20.1318%2018.7175C20.5223%2019.108%2020.5223%2019.7411%2020.1318%2020.1317C19.7413%2020.5222%2019.1081%2020.5222%2018.7176%2020.1317L12.0002%2013.4142L5.28255%2020.1316C4.89203%2020.5222%204.25886%2020.5222%203.86834%2020.1316C3.47782%2019.7411%203.47782%2019.108%203.86834%2018.7174L10.5859%2012L3.86851%205.28257C3.47798%204.89204%203.47798%204.25888%203.86851%203.86836C4.25903%203.47783%204.8922%203.47783%205.28272%203.86836L12.0002%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Collapse Icon */
.gravity-icon-collapse {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.62194%205.23839L9.62191%205.23843C9.63548%205.25055%209.64897%205.26335%209.66235%205.27686L14.7256%2010.3863C15.0915%2010.7555%2015.0915%2011.354%2014.7256%2011.7231C14.3598%2012.0923%2013.7667%2012.0923%2013.4009%2011.7231L9%207.28205L4.59906%2011.7231C4.23325%2012.0923%203.64016%2012.0923%203.27436%2011.7231C2.90855%2011.354%202.90855%2010.7555%203.27436%2010.3863L8.33765%205.27686C8.69027%204.92102%209.25409%204.90819%209.62194%205.23839Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.62194%205.23839L9.62191%205.23843C9.63548%205.25055%209.64897%205.26335%209.66235%205.27686L14.7256%2010.3863C15.0915%2010.7555%2015.0915%2011.354%2014.7256%2011.7231C14.3598%2012.0923%2013.7667%2012.0923%2013.4009%2011.7231L9%207.28205L4.59906%2011.7231C4.23325%2012.0923%203.64016%2012.0923%203.27436%2011.7231C2.90855%2011.354%202.90855%2010.7555%203.27436%2010.3863L8.33765%205.27686C8.69027%204.92102%209.25409%204.90819%209.62194%205.23839Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-collapse.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.2504%208.50439L7.39548%205.25661C7.72935%204.91446%208.27065%204.91446%208.60452%205.25661L11.7496%208.50439C12.0835%208.84653%2012.0835%209.40125%2011.7496%209.74339C11.4157%2010.0855%2010.8744%2010.0855%2010.5406%209.74339L8%207.11511L5.45944%209.74339C5.12558%2010.0855%204.58427%2010.0855%204.2504%209.74339C3.91653%209.40125%203.91653%208.84653%204.2504%208.50439Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.2504%208.50439L7.39548%205.25661C7.72935%204.91446%208.27065%204.91446%208.60452%205.25661L11.7496%208.50439C12.0835%208.84653%2012.0835%209.40125%2011.7496%209.74339C11.4157%2010.0855%2010.8744%2010.0855%2010.5406%209.74339L8%207.11511L5.45944%209.74339C5.12558%2010.0855%204.58427%2010.0855%204.2504%209.74339C3.91653%209.40125%203.91653%208.84653%204.2504%208.50439Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-collapse.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6773%207.26426L12.6773%207.26428C12.6872%207.27344%2012.6972%207.28297%2012.7071%207.29289L19.7071%2014.2929C20.0976%2014.6834%2020.0976%2015.3166%2019.7071%2015.7071C19.3166%2016.0976%2018.6834%2016.0976%2018.2929%2015.7071L12%209.41421L5.70711%2015.7071C5.31658%2016.0976%204.68342%2016.0976%204.29289%2015.7071C3.90237%2015.3166%203.90237%2014.6834%204.29289%2014.2929L11.2929%207.29289C11.6736%206.91216%2012.285%206.90261%2012.6773%207.26426Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6773%207.26426L12.6773%207.26428C12.6872%207.27344%2012.6972%207.28297%2012.7071%207.29289L19.7071%2014.2929C20.0976%2014.6834%2020.0976%2015.3166%2019.7071%2015.7071C19.3166%2016.0976%2018.6834%2016.0976%2018.2929%2015.7071L12%209.41421L5.70711%2015.7071C5.31658%2016.0976%204.68342%2016.0976%204.29289%2015.7071C3.90237%2015.3166%203.90237%2014.6834%204.29289%2014.2929L11.2929%207.29289C11.6736%206.91216%2012.285%206.90261%2012.6773%207.26426Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Copy Icon */
.gravity-icon-copy {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2015V16C14%2017.1046%2013.1046%2018%2012%2018H3C1.89543%2018%201%2017.1046%201%2016V5C1%203.89543%201.89543%203%203%203H4V2C4%200.89543%204.89543%200%206%200H12.5858C12.851%200%2013.1054%200.105357%2013.2929%200.292893L16.7071%203.70711C16.8946%203.89464%2017%204.149%2017%204.41421V13C17%2014.1046%2016.1046%2015%2015%2015H14ZM12.25%2015H6C4.89543%2015%204%2014.1046%204%2013V4.75H3C2.86193%204.75%202.75%204.86193%202.75%205V16C2.75%2016.1381%202.86193%2016.25%203%2016.25H12C12.1381%2016.25%2012.25%2016.1381%2012.25%2016V15ZM15.25%2013V5H13C12.4477%205%2012%204.55228%2012%204V1.75H6C5.86193%201.75%205.75%201.86193%205.75%202V13C5.75%2013.1381%205.86193%2013.25%206%2013.25H15C15.1381%2013.25%2015.25%2013.1381%2015.25%2013Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2015V16C14%2017.1046%2013.1046%2018%2012%2018H3C1.89543%2018%201%2017.1046%201%2016V5C1%203.89543%201.89543%203%203%203H4V2C4%200.89543%204.89543%200%206%200H12.5858C12.851%200%2013.1054%200.105357%2013.2929%200.292893L16.7071%203.70711C16.8946%203.89464%2017%204.149%2017%204.41421V13C17%2014.1046%2016.1046%2015%2015%2015H14ZM12.25%2015H6C4.89543%2015%204%2014.1046%204%2013V4.75H3C2.86193%204.75%202.75%204.86193%202.75%205V16C2.75%2016.1381%202.86193%2016.25%203%2016.25H12C12.1381%2016.25%2012.25%2016.1381%2012.25%2016V15ZM15.25%2013V5H13C12.4477%205%2012%204.55228%2012%204V1.75H6C5.86193%201.75%205.75%201.86193%205.75%202V13C5.75%2013.1381%205.86193%2013.25%206%2013.25H15C15.1381%2013.25%2015.25%2013.1381%2015.25%2013Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-copy.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2020V21.5C18%2022.8807%2016.8807%2024%2015.5%2024H3.5C2.11929%2024%201%2022.8807%201%2021.5V6.5C1%205.11929%202.11929%204%203.5%204H5V2.5C5%201.11929%206.11929%200%207.5%200H17.5858C17.851%200%2018.1054%200.105357%2018.2929%200.292893L22.7071%204.70711C22.8946%204.89464%2023%205.149%2023%205.41421V17.5C23%2018.8807%2021.8807%2020%2020.5%2020H18ZM16%2020H7.5C6.11929%2020%205%2018.8807%205%2017.5V6H3.5C3.22386%206%203%206.22386%203%206.5V21.5C3%2021.7761%203.22386%2022%203.5%2022H15.5C15.7761%2022%2016%2021.7761%2016%2021.5V20ZM21%2017.5V6H18C17.4477%206%2017%205.55228%2017%205V2H7.5C7.22386%202%207%202.22386%207%202.5V17.5C7%2017.7761%207.22386%2018%207.5%2018H20.5C20.7761%2018%2021%2017.7761%2021%2017.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2020V21.5C18%2022.8807%2016.8807%2024%2015.5%2024H3.5C2.11929%2024%201%2022.8807%201%2021.5V6.5C1%205.11929%202.11929%204%203.5%204H5V2.5C5%201.11929%206.11929%200%207.5%200H17.5858C17.851%200%2018.1054%200.105357%2018.2929%200.292893L22.7071%204.70711C22.8946%204.89464%2023%205.149%2023%205.41421V17.5C23%2018.8807%2021.8807%2020%2020.5%2020H18ZM16%2020H7.5C6.11929%2020%205%2018.8807%205%2017.5V6H3.5C3.22386%206%203%206.22386%203%206.5V21.5C3%2021.7761%203.22386%2022%203.5%2022H15.5C15.7761%2022%2016%2021.7761%2016%2021.5V20ZM21%2017.5V6H18C17.4477%206%2017%205.55228%2017%205V2H7.5C7.22386%202%207%202.22386%207%202.5V17.5C7%2017.7761%207.22386%2018%207.5%2018H20.5C20.7761%2018%2021%2017.7761%2021%2017.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Correct Icon */
.gravity-icon-correct {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.70686%2013.6935L4.25155%2011.0758C3.90124%2010.7023%203.91899%2010.1146%204.2912%209.7631C4.6634%209.41159%205.24913%209.4294%205.59944%209.80288L7.28835%2011.6035L12.3162%204.39619C12.6094%203.97602%2013.1864%203.87383%2013.6052%204.16795C14.0239%204.46207%2014.1257%205.04112%2013.8326%205.4613L8.15232%2013.6038C7.8592%2014.024%207.28213%2014.1262%206.86339%2013.832C6.80497%2013.791%206.75273%2013.7444%206.70686%2013.6935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.70686%2013.6935L4.25155%2011.0758C3.90124%2010.7023%203.91899%2010.1146%204.2912%209.7631C4.6634%209.41159%205.24913%209.4294%205.59944%209.80288L7.28835%2011.6035L12.3162%204.39619C12.6094%203.97602%2013.1864%203.87383%2013.6052%204.16795C14.0239%204.46207%2014.1257%205.04112%2013.8326%205.4613L8.15232%2013.6038C7.8592%2014.024%207.28213%2014.1262%206.86339%2013.832C6.80497%2013.791%206.75273%2013.7444%206.70686%2013.6935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-correct.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.12838%2011.7196L4.23018%209.69608C3.90963%209.35436%203.92587%208.81663%204.26646%208.49501C4.60704%208.1734%205.14301%208.18969%205.46356%208.53141L6.66047%209.80733L10.4593%204.36249C10.7275%203.97806%2011.2555%203.88456%2011.6387%204.15367C12.0219%204.42277%2012.1151%204.95257%2011.8468%205.337L7.45104%2011.6375C7.18283%2012.0219%206.65478%2012.1154%206.27161%2011.8463C6.21816%2011.8088%206.17035%2011.7662%206.12838%2011.7196Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.12838%2011.7196L4.23018%209.69608C3.90963%209.35436%203.92587%208.81663%204.26646%208.49501C4.60704%208.1734%205.14301%208.18969%205.46356%208.53141L6.66047%209.80733L10.4593%204.36249C10.7275%203.97806%2011.2555%203.88456%2011.6387%204.15367C12.0219%204.42277%2012.1151%204.95257%2011.8468%205.337L7.45104%2011.6375C7.18283%2012.0219%206.65478%2012.1154%206.27161%2011.8463C6.21816%2011.8088%206.17035%2011.7662%206.12838%2011.7196Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-correct.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.86378%2018.6701L5.26969%2014.8478C4.89153%2014.4456%204.91069%2013.8127%205.31248%2013.4342C5.71428%2013.0557%206.34655%2013.0749%206.72472%2013.477L9.49149%2016.4195L17.1805%205.42479C17.4969%204.97234%2018.1199%204.86231%2018.5719%205.17902C19.0239%205.49574%2019.1339%206.11927%2018.8175%206.57172L10.4241%2018.5735C10.1077%2019.0259%209.48478%2019.1359%209.03275%2018.8192C8.96969%2018.7751%208.91329%2018.7249%208.86378%2018.6701Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.86378%2018.6701L5.26969%2014.8478C4.89153%2014.4456%204.91069%2013.8127%205.31248%2013.4342C5.71428%2013.0557%206.34655%2013.0749%206.72472%2013.477L9.49149%2016.4195L17.1805%205.42479C17.4969%204.97234%2018.1199%204.86231%2018.5719%205.17902C19.0239%205.49574%2019.1339%206.11927%2018.8175%206.57172L10.4241%2018.5735C10.1077%2019.0259%209.48478%2019.1359%209.03275%2018.8192C8.96969%2018.7751%208.91329%2018.7249%208.86378%2018.6701Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Cut Icon */
.gravity-icon-cut {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2010.2834L7.32045%2012.682C7.43678%2013.0165%207.5%2013.3759%207.5%2013.75C7.5%2015.5449%206.04493%2017%204.25%2017C2.45507%2017%201%2015.5449%201%2013.75C1%2011.9551%202.45507%2010.5%204.25%2010.5C4.90871%2010.5%205.52166%2010.696%206.03371%2011.0328L7.77923%208.53993L4.45011%203.78546C3.81655%202.88065%204.03645%201.63356%204.94126%201L9%206.79648L13.0587%201C13.9635%201.63356%2014.1834%202.88065%2013.5499%203.78546L10.2208%208.53993L11.9663%2011.0328C12.4783%2010.696%2013.0913%2010.5%2013.75%2010.5C15.5449%2010.5%2017%2011.9551%2017%2013.75C17%2015.5449%2015.5449%2017%2013.75%2017C11.9551%2017%2010.5%2015.5449%2010.5%2013.75C10.5%2013.3759%2010.5632%2013.0165%2010.6795%2012.682L9%2010.2834ZM4.25%2012.25C3.42157%2012.25%202.75%2012.9216%202.75%2013.75C2.75%2014.5784%203.42157%2015.25%204.25%2015.25C5.07843%2015.25%205.75%2014.5784%205.75%2013.75C5.75%2012.9216%205.07843%2012.25%204.25%2012.25ZM12.25%2013.75C12.25%2012.9216%2012.9216%2012.25%2013.75%2012.25C14.5784%2012.25%2015.25%2012.9216%2015.25%2013.75C15.25%2014.5784%2014.5784%2015.25%2013.75%2015.25C12.9216%2015.25%2012.25%2014.5784%2012.25%2013.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2010.2834L7.32045%2012.682C7.43678%2013.0165%207.5%2013.3759%207.5%2013.75C7.5%2015.5449%206.04493%2017%204.25%2017C2.45507%2017%201%2015.5449%201%2013.75C1%2011.9551%202.45507%2010.5%204.25%2010.5C4.90871%2010.5%205.52166%2010.696%206.03371%2011.0328L7.77923%208.53993L4.45011%203.78546C3.81655%202.88065%204.03645%201.63356%204.94126%201L9%206.79648L13.0587%201C13.9635%201.63356%2014.1834%202.88065%2013.5499%203.78546L10.2208%208.53993L11.9663%2011.0328C12.4783%2010.696%2013.0913%2010.5%2013.75%2010.5C15.5449%2010.5%2017%2011.9551%2017%2013.75C17%2015.5449%2015.5449%2017%2013.75%2017C11.9551%2017%2010.5%2015.5449%2010.5%2013.75C10.5%2013.3759%2010.5632%2013.0165%2010.6795%2012.682L9%2010.2834ZM4.25%2012.25C3.42157%2012.25%202.75%2012.9216%202.75%2013.75C2.75%2014.5784%203.42157%2015.25%204.25%2015.25C5.07843%2015.25%205.75%2014.5784%205.75%2013.75C5.75%2012.9216%205.07843%2012.25%204.25%2012.25ZM12.25%2013.75C12.25%2012.9216%2012.9216%2012.25%2013.75%2012.25C14.5784%2012.25%2015.25%2012.9216%2015.25%2013.75C15.25%2014.5784%2014.5784%2015.25%2013.75%2015.25C12.9216%2015.25%2012.25%2014.5784%2012.25%2013.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-cut.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2013.5011L9.7761%2016.6772C9.92114%2017.0913%2010%2017.5364%2010%2018C10%2020.2091%208.20914%2022%206%2022C3.79086%2022%202%2020.2091%202%2018C2%2015.7909%203.79086%2014%206%2014C6.79437%2014%207.53465%2014.2315%208.15704%2014.6308L10.474%2011.3218L6.48811%205.62934C5.69616%204.49833%205.97104%202.93947%207.10205%202.14752L12%209.14252L16.898%202.14752C18.029%202.93947%2018.3038%204.49833%2017.5119%205.62934L13.526%2011.3218L15.843%2014.6308C16.4653%2014.2315%2017.2056%2014%2018%2014C20.2091%2014%2022%2015.7909%2022%2018C22%2020.2091%2020.2091%2022%2018%2022C15.7909%2022%2014%2020.2091%2014%2018C14%2017.5364%2014.0789%2017.0913%2014.2239%2016.6772L12%2013.5011ZM18%2020C19.1046%2020%2020%2019.1046%2020%2018C20%2016.8954%2019.1046%2016%2018%2016C16.8954%2016%2016%2016.8954%2016%2018C16%2019.1046%2016.8954%2020%2018%2020ZM8%2018C8%2019.1046%207.10457%2020%206%2020C4.89543%2020%204%2019.1046%204%2018C4%2016.8954%204.89543%2016%206%2016C7.10457%2016%208%2016.8954%208%2018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2013.5011L9.7761%2016.6772C9.92114%2017.0913%2010%2017.5364%2010%2018C10%2020.2091%208.20914%2022%206%2022C3.79086%2022%202%2020.2091%202%2018C2%2015.7909%203.79086%2014%206%2014C6.79437%2014%207.53465%2014.2315%208.15704%2014.6308L10.474%2011.3218L6.48811%205.62934C5.69616%204.49833%205.97104%202.93947%207.10205%202.14752L12%209.14252L16.898%202.14752C18.029%202.93947%2018.3038%204.49833%2017.5119%205.62934L13.526%2011.3218L15.843%2014.6308C16.4653%2014.2315%2017.2056%2014%2018%2014C20.2091%2014%2022%2015.7909%2022%2018C22%2020.2091%2020.2091%2022%2018%2022C15.7909%2022%2014%2020.2091%2014%2018C14%2017.5364%2014.0789%2017.0913%2014.2239%2016.6772L12%2013.5011ZM18%2020C19.1046%2020%2020%2019.1046%2020%2018C20%2016.8954%2019.1046%2016%2018%2016C16.8954%2016%2016%2016.8954%2016%2018C16%2019.1046%2016.8954%2020%2018%2020ZM8%2018C8%2019.1046%207.10457%2020%206%2020C4.89543%2020%204%2019.1046%204%2018C4%2016.8954%204.89543%2016%206%2016C7.10457%2016%208%2016.8954%208%2018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Date Icon */
.gravity-icon-date {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%201C13.6531%201%2014.2087%201.4174%2014.4146%202H14.875C16.0486%202%2017%202.95139%2017%204.125V14.875C17%2016.0486%2016.0486%2017%2014.875%2017H3.125C1.95139%2017%201%2016.0486%201%2014.875V4.125C1%202.95139%201.95139%202%203.125%202H3.58535C3.79127%201.4174%204.34689%201%205%201C5.65311%201%206.20873%201.4174%206.41465%202H11.5854C11.7913%201.4174%2012.3469%201%2013%201ZM15.25%208H2.75V14.875C2.75%2015.0562%202.87854%2015.2074%203.04942%2015.2424L3.125%2015.25H14.875C15.0562%2015.25%2015.2074%2015.1215%2015.2424%2014.9506L15.25%2014.875V8ZM13.5%2012C13.7761%2012%2014%2012.2239%2014%2012.5V13.5C14%2013.7761%2013.7761%2014%2013.5%2014H12.5C12.2239%2014%2012%2013.7761%2012%2013.5V12.5C12%2012.2239%2012.2239%2012%2012.5%2012H13.5ZM10.5%2012C10.7761%2012%2011%2012.2239%2011%2012.5V13.5C11%2013.7761%2010.7761%2014%2010.5%2014H9.5C9.22386%2014%209%2013.7761%209%2013.5V12.5C9%2012.2239%209.22386%2012%209.5%2012H10.5ZM7.5%2012C7.77614%2012%208%2012.2239%208%2012.5V13.5C8%2013.7761%207.77614%2014%207.5%2014H6.5C6.22386%2014%206%2013.7761%206%2013.5V12.5C6%2012.2239%206.22386%2012%206.5%2012H7.5ZM13.5%209C13.7761%209%2014%209.22386%2014%209.5V10.5C14%2010.7761%2013.7761%2011%2013.5%2011H12.5C12.2239%2011%2012%2010.7761%2012%2010.5V9.5C12%209.22386%2012.2239%209%2012.5%209H13.5ZM10.5%209C10.7761%209%2011%209.22386%2011%209.5V10.5C11%2010.7761%2010.7761%2011%2010.5%2011H9.5C9.22386%2011%209%2010.7761%209%2010.5V9.5C9%209.22386%209.22386%209%209.5%209H10.5ZM14.875%203.75H3.125C2.94378%203.75%202.79259%203.87854%202.75762%204.04942L2.75%204.125V6.25H15.25V4.125C15.25%203.91789%2015.0821%203.75%2014.875%203.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%201C13.6531%201%2014.2087%201.4174%2014.4146%202H14.875C16.0486%202%2017%202.95139%2017%204.125V14.875C17%2016.0486%2016.0486%2017%2014.875%2017H3.125C1.95139%2017%201%2016.0486%201%2014.875V4.125C1%202.95139%201.95139%202%203.125%202H3.58535C3.79127%201.4174%204.34689%201%205%201C5.65311%201%206.20873%201.4174%206.41465%202H11.5854C11.7913%201.4174%2012.3469%201%2013%201ZM15.25%208H2.75V14.875C2.75%2015.0562%202.87854%2015.2074%203.04942%2015.2424L3.125%2015.25H14.875C15.0562%2015.25%2015.2074%2015.1215%2015.2424%2014.9506L15.25%2014.875V8ZM13.5%2012C13.7761%2012%2014%2012.2239%2014%2012.5V13.5C14%2013.7761%2013.7761%2014%2013.5%2014H12.5C12.2239%2014%2012%2013.7761%2012%2013.5V12.5C12%2012.2239%2012.2239%2012%2012.5%2012H13.5ZM10.5%2012C10.7761%2012%2011%2012.2239%2011%2012.5V13.5C11%2013.7761%2010.7761%2014%2010.5%2014H9.5C9.22386%2014%209%2013.7761%209%2013.5V12.5C9%2012.2239%209.22386%2012%209.5%2012H10.5ZM7.5%2012C7.77614%2012%208%2012.2239%208%2012.5V13.5C8%2013.7761%207.77614%2014%207.5%2014H6.5C6.22386%2014%206%2013.7761%206%2013.5V12.5C6%2012.2239%206.22386%2012%206.5%2012H7.5ZM13.5%209C13.7761%209%2014%209.22386%2014%209.5V10.5C14%2010.7761%2013.7761%2011%2013.5%2011H12.5C12.2239%2011%2012%2010.7761%2012%2010.5V9.5C12%209.22386%2012.2239%209%2012.5%209H13.5ZM10.5%209C10.7761%209%2011%209.22386%2011%209.5V10.5C11%2010.7761%2010.7761%2011%2010.5%2011H9.5C9.22386%2011%209%2010.7761%209%2010.5V9.5C9%209.22386%209.22386%209%209.5%209H10.5ZM14.875%203.75H3.125C2.94378%203.75%202.79259%203.87854%202.75762%204.04942L2.75%204.125V6.25H15.25V4.125C15.25%203.91789%2015.0821%203.75%2014.875%203.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-date.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%200.5C17.9319%200.5%2018.715%201.13739%2018.937%202H20.5C21.8807%202%2023%203.11929%2023%204.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V4.5C1%203.11929%202.11929%202%203.5%202H5.06301C5.28503%201.13739%206.06808%200.5%207%200.5C7.93192%200.5%208.71497%201.13739%208.93699%202H15.063C15.285%201.13739%2016.0681%200.5%2017%200.5ZM21%209H3V20.5C3%2020.7455%203.17688%2020.9496%203.41012%2020.9919L3.5%2021H20.5C20.7455%2021%2020.9496%2020.8231%2020.9919%2020.5899L21%2020.5V9ZM18.5%2016C18.7761%2016%2019%2016.2239%2019%2016.5V18.5C19%2018.7761%2018.7761%2019%2018.5%2019H16.5C16.2239%2019%2016%2018.7761%2016%2018.5V16.5C16%2016.2239%2016.2239%2016%2016.5%2016H18.5ZM13.5%2016C13.7761%2016%2014%2016.2239%2014%2016.5V18.5C14%2018.7761%2013.7761%2019%2013.5%2019H11.5C11.2239%2019%2011%2018.7761%2011%2018.5V16.5C11%2016.2239%2011.2239%2016%2011.5%2016H13.5ZM8.5%2016C8.77614%2016%209%2016.2239%209%2016.5V18.5C9%2018.7761%208.77614%2019%208.5%2019H6.5C6.22386%2019%206%2018.7761%206%2018.5V16.5C6%2016.2239%206.22386%2016%206.5%2016H8.5ZM18.5%2011C18.7761%2011%2019%2011.2239%2019%2011.5V13.5C19%2013.7761%2018.7761%2014%2018.5%2014H16.5C16.2239%2014%2016%2013.7761%2016%2013.5V11.5C16%2011.2239%2016.2239%2011%2016.5%2011H18.5ZM13.5%2011C13.7761%2011%2014%2011.2239%2014%2011.5V13.5C14%2013.7761%2013.7761%2014%2013.5%2014H11.5C11.2239%2014%2011%2013.7761%2011%2013.5V11.5C11%2011.2239%2011.2239%2011%2011.5%2011H13.5ZM20.5%204H3.5C3.25454%204%203.05039%204.17688%203.00806%204.41012L3%204.5V7H21V4.5C21%204.22386%2020.7761%204%2020.5%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%200.5C17.9319%200.5%2018.715%201.13739%2018.937%202H20.5C21.8807%202%2023%203.11929%2023%204.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V4.5C1%203.11929%202.11929%202%203.5%202H5.06301C5.28503%201.13739%206.06808%200.5%207%200.5C7.93192%200.5%208.71497%201.13739%208.93699%202H15.063C15.285%201.13739%2016.0681%200.5%2017%200.5ZM21%209H3V20.5C3%2020.7455%203.17688%2020.9496%203.41012%2020.9919L3.5%2021H20.5C20.7455%2021%2020.9496%2020.8231%2020.9919%2020.5899L21%2020.5V9ZM18.5%2016C18.7761%2016%2019%2016.2239%2019%2016.5V18.5C19%2018.7761%2018.7761%2019%2018.5%2019H16.5C16.2239%2019%2016%2018.7761%2016%2018.5V16.5C16%2016.2239%2016.2239%2016%2016.5%2016H18.5ZM13.5%2016C13.7761%2016%2014%2016.2239%2014%2016.5V18.5C14%2018.7761%2013.7761%2019%2013.5%2019H11.5C11.2239%2019%2011%2018.7761%2011%2018.5V16.5C11%2016.2239%2011.2239%2016%2011.5%2016H13.5ZM8.5%2016C8.77614%2016%209%2016.2239%209%2016.5V18.5C9%2018.7761%208.77614%2019%208.5%2019H6.5C6.22386%2019%206%2018.7761%206%2018.5V16.5C6%2016.2239%206.22386%2016%206.5%2016H8.5ZM18.5%2011C18.7761%2011%2019%2011.2239%2019%2011.5V13.5C19%2013.7761%2018.7761%2014%2018.5%2014H16.5C16.2239%2014%2016%2013.7761%2016%2013.5V11.5C16%2011.2239%2016.2239%2011%2016.5%2011H18.5ZM13.5%2011C13.7761%2011%2014%2011.2239%2014%2011.5V13.5C14%2013.7761%2013.7761%2014%2013.5%2014H11.5C11.2239%2014%2011%2013.7761%2011%2013.5V11.5C11%2011.2239%2011.2239%2011%2011.5%2011H13.5ZM20.5%204H3.5C3.25454%204%203.05039%204.17688%203.00806%204.41012L3%204.5V7H21V4.5C21%204.22386%2020.7761%204%2020.5%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Delete Icon */
.gravity-icon-delete {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.65%200C10.6717%200%2011.5%200.828273%2011.5%201.85L11.494%202H16.125C16.6082%202%2017%202.39175%2017%202.875C17%203.35825%2016.6082%203.75%2016.125%203.75H16V15.5C16%2016.8807%2014.8807%2018%2013.5%2018H4.5C3.11929%2018%202%2016.8807%202%2015.5V3.75H1.875C1.39175%203.75%201%203.35825%201%202.875C1%202.39175%201.39175%202%201.875%202H6.50599C6.50202%201.95052%206.5%201.9005%206.5%201.85C6.5%200.828273%207.32827%200%208.35%200H9.65ZM14.25%203.75H3.75V15.5C3.75%2015.9142%204.08579%2016.25%204.5%2016.25H13.5C13.9142%2016.25%2014.25%2015.9142%2014.25%2015.5V3.75ZM7%206V13.5C7%2014.0523%206.55228%2014.5%206%2014.5C5.44772%2014.5%205%2014.0523%205%2013.5V6H7ZM10%206V13.5C10%2014.0523%209.55229%2014.5%209%2014.5C8.44772%2014.5%208%2014.0523%208%2013.5V6H10ZM13%206V13.5C13%2014.0523%2012.5523%2014.5%2012%2014.5C11.4477%2014.5%2011%2014.0523%2011%2013.5V6H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.65%200C10.6717%200%2011.5%200.828273%2011.5%201.85L11.494%202H16.125C16.6082%202%2017%202.39175%2017%202.875C17%203.35825%2016.6082%203.75%2016.125%203.75H16V15.5C16%2016.8807%2014.8807%2018%2013.5%2018H4.5C3.11929%2018%202%2016.8807%202%2015.5V3.75H1.875C1.39175%203.75%201%203.35825%201%202.875C1%202.39175%201.39175%202%201.875%202H6.50599C6.50202%201.95052%206.5%201.9005%206.5%201.85C6.5%200.828273%207.32827%200%208.35%200H9.65ZM14.25%203.75H3.75V15.5C3.75%2015.9142%204.08579%2016.25%204.5%2016.25H13.5C13.9142%2016.25%2014.25%2015.9142%2014.25%2015.5V3.75ZM7%206V13.5C7%2014.0523%206.55228%2014.5%206%2014.5C5.44772%2014.5%205%2014.0523%205%2013.5V6H7ZM10%206V13.5C10%2014.0523%209.55229%2014.5%209%2014.5C8.44772%2014.5%208%2014.0523%208%2013.5V6H10ZM13%206V13.5C13%2014.0523%2012.5523%2014.5%2012%2014.5C11.4477%2014.5%2011%2014.0523%2011%2013.5V6H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-delete.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%200C14.1046%200%2015%200.89543%2015%202H22C22.5523%202%2023%202.44772%2023%203C23%203.55228%2022.5523%204%2022%204H21V21C21%2022.6569%2019.6569%2024%2018%2024H6C4.34315%2024%203%2022.6569%203%2021V4H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H9C9%200.89543%209.89543%200%2011%200H13ZM19%204H5V20.7778C5%2021.4528%205.44772%2022%206%2022H18C18.5523%2022%2019%2021.4528%2019%2020.7778V4ZM9%206V19C9%2019.5523%208.55228%2020%208%2020C7.44772%2020%207%2019.5523%207%2019V6H9ZM17%206V19C17%2019.5523%2016.5523%2020%2016%2020C15.4477%2020%2015%2019.5523%2015%2019V6H17ZM13%206V19C13%2019.5523%2012.5523%2020%2012%2020C11.4477%2020%2011%2019.5523%2011%2019V6H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%200C14.1046%200%2015%200.89543%2015%202H22C22.5523%202%2023%202.44772%2023%203C23%203.55228%2022.5523%204%2022%204H21V21C21%2022.6569%2019.6569%2024%2018%2024H6C4.34315%2024%203%2022.6569%203%2021V4H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H9C9%200.89543%209.89543%200%2011%200H13ZM19%204H5V20.7778C5%2021.4528%205.44772%2022%206%2022H18C18.5523%2022%2019%2021.4528%2019%2020.7778V4ZM9%206V19C9%2019.5523%208.55228%2020%208%2020C7.44772%2020%207%2019.5523%207%2019V6H9ZM17%206V19C17%2019.5523%2016.5523%2020%2016%2020C15.4477%2020%2015%2019.5523%2015%2019V6H17ZM13%206V19C13%2019.5523%2012.5523%2020%2012%2020C11.4477%2020%2011%2019.5523%2011%2019V6H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Descending Icon */
.gravity-icon-descending {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%2011.6718L12.3719%209.28151C12.7444%208.90616%2013.3482%208.90616%2013.7207%209.28151C14.0931%209.65685%2014.0931%2010.2654%2013.7207%2010.6408L9.67438%2014.7185C9.30193%2015.0938%208.69807%2015.0938%208.32562%2014.7185L4.27934%2010.6408C3.90689%2010.2654%203.90689%209.65685%204.27934%209.28151C4.65179%208.90616%205.25565%208.90616%205.6281%209.28151L8%2011.6718V4C8%203.44772%208.44772%203%209%203C9.55228%203%2010%203.44772%2010%204V11.6718Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%2011.6718L12.3719%209.28151C12.7444%208.90616%2013.3482%208.90616%2013.7207%209.28151C14.0931%209.65685%2014.0931%2010.2654%2013.7207%2010.6408L9.67438%2014.7185C9.30193%2015.0938%208.69807%2015.0938%208.32562%2014.7185L4.27934%2010.6408C3.90689%2010.2654%203.90689%209.65685%204.27934%209.28151C4.65179%208.90616%205.25565%208.90616%205.6281%209.28151L8%2011.6718V4C8%203.44772%208.44772%203%209%203C9.55228%203%2010%203.44772%2010%204V11.6718Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-descending.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2016.5858L16.2929%2013.2929C16.6834%2012.9024%2017.3166%2012.9024%2017.7071%2013.2929C18.0976%2013.6834%2018.0976%2014.3166%2017.7071%2014.7071L12.7071%2019.7071C12.3166%2020.0976%2011.6834%2020.0976%2011.2929%2019.7071L6.29289%2014.7071C5.90237%2014.3166%205.90237%2013.6834%206.29289%2013.2929C6.68342%2012.9024%207.31658%2012.9024%207.70711%2013.2929L11%2016.5858V5C11%204.44772%2011.4477%204%2012%204C12.5523%204%2013%204.44772%2013%205V16.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2016.5858L16.2929%2013.2929C16.6834%2012.9024%2017.3166%2012.9024%2017.7071%2013.2929C18.0976%2013.6834%2018.0976%2014.3166%2017.7071%2014.7071L12.7071%2019.7071C12.3166%2020.0976%2011.6834%2020.0976%2011.2929%2019.7071L6.29289%2014.7071C5.90237%2014.3166%205.90237%2013.6834%206.29289%2013.2929C6.68342%2012.9024%207.31658%2012.9024%207.70711%2013.2929L11%2016.5858V5C11%204.44772%2011.4477%204%2012%204C12.5523%204%2013%204.44772%2013%205V16.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Dictionary Icon */
.gravity-icon-dictionary {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C15.5523%201%2016%201.44772%2016%202V16C16%2016.5523%2015.5523%2017%2015%2017H4.12C2.94916%2017%202%2016.0508%202%2014.88V3.4L2.00192%203.40121C2.05379%202.06629%203.15237%201%204.5%201H15ZM14.25%205.95H3.75V14.88C3.75%2015.0843%203.91565%2015.25%204.12%2015.25H14.25V5.95ZM9.3791%206.71224C9.62696%206.8138%209.82371%207.01055%209.92527%207.25841L12.4616%2013.4483C12.5454%2013.6528%2012.4476%2013.8864%2012.2432%2013.9701C12.195%2013.9899%2012.1435%2014%2012.0915%2014H11.3295C11.1672%2014%2011.021%2013.9019%2010.9594%2013.7517L10.6514%2013H7.37334L7.06534%2013.7517C7.00379%2013.9019%206.85755%2014%206.69521%2014H5.90837C5.68745%2014%205.50837%2013.8209%205.50837%2013.6C5.50837%2013.548%205.51851%2013.4965%205.53824%2013.4483L8.07461%207.25841C8.28401%206.74736%208.86806%206.50284%209.3791%206.71224ZM9.01238%209L7.947%2011.6H10.0777L9.01238%209ZM14.25%202.75H4.5C4.08579%202.75%203.75%203.08579%203.75%203.5C3.75%203.91421%204.08579%204.25%204.5%204.25H14.25V2.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C15.5523%201%2016%201.44772%2016%202V16C16%2016.5523%2015.5523%2017%2015%2017H4.12C2.94916%2017%202%2016.0508%202%2014.88V3.4L2.00192%203.40121C2.05379%202.06629%203.15237%201%204.5%201H15ZM14.25%205.95H3.75V14.88C3.75%2015.0843%203.91565%2015.25%204.12%2015.25H14.25V5.95ZM9.3791%206.71224C9.62696%206.8138%209.82371%207.01055%209.92527%207.25841L12.4616%2013.4483C12.5454%2013.6528%2012.4476%2013.8864%2012.2432%2013.9701C12.195%2013.9899%2012.1435%2014%2012.0915%2014H11.3295C11.1672%2014%2011.021%2013.9019%2010.9594%2013.7517L10.6514%2013H7.37334L7.06534%2013.7517C7.00379%2013.9019%206.85755%2014%206.69521%2014H5.90837C5.68745%2014%205.50837%2013.8209%205.50837%2013.6C5.50837%2013.548%205.51851%2013.4965%205.53824%2013.4483L8.07461%207.25841C8.28401%206.74736%208.86806%206.50284%209.3791%206.71224ZM9.01238%209L7.947%2011.6H10.0777L9.01238%209ZM14.25%202.75H4.5C4.08579%202.75%203.75%203.08579%203.75%203.5C3.75%203.91421%204.08579%204.25%204.5%204.25H14.25V2.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-dictionary.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%201C21.5523%201%2022%201.44772%2022%202V22C22%2022.5523%2021.5523%2023%2021%2023H4.5C3.11929%2023%202%2021.8807%202%2020.5V4C2%202.34315%203.34315%201%205%201H21ZM20%207H4V20.5C4%2020.7761%204.22386%2021%204.5%2021H20V7ZM12.4775%209.13123C12.7844%209.25811%2013.0282%209.50191%2013.1551%209.8088L16.6694%2018.309C16.7749%2018.5642%2016.6536%2018.8566%2016.3984%2018.9621C16.3378%2018.9871%2016.2729%2019%2016.2074%2019H15.0636C14.8613%2019%2014.6789%2018.878%2014.6016%2018.691L13.9024%2017H10.0975L9.39832%2018.691C9.32101%2018.878%209.13861%2019%208.93625%2019H7.79251C7.51637%2019%207.29251%2018.7761%207.29251%2018.5C7.29251%2018.4345%207.3054%2018.3695%207.33045%2018.309L10.8448%209.8088C11.1085%209.17082%2011.8396%208.86746%2012.4775%209.13123ZM11.9999%2012.3985L10.9244%2015H13.0755L11.9999%2012.3985ZM20%203H5C4.44772%203%204%203.44772%204%204C4%204.55228%204.44772%205%205%205H20V3Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%201C21.5523%201%2022%201.44772%2022%202V22C22%2022.5523%2021.5523%2023%2021%2023H4.5C3.11929%2023%202%2021.8807%202%2020.5V4C2%202.34315%203.34315%201%205%201H21ZM20%207H4V20.5C4%2020.7761%204.22386%2021%204.5%2021H20V7ZM12.4775%209.13123C12.7844%209.25811%2013.0282%209.50191%2013.1551%209.8088L16.6694%2018.309C16.7749%2018.5642%2016.6536%2018.8566%2016.3984%2018.9621C16.3378%2018.9871%2016.2729%2019%2016.2074%2019H15.0636C14.8613%2019%2014.6789%2018.878%2014.6016%2018.691L13.9024%2017H10.0975L9.39832%2018.691C9.32101%2018.878%209.13861%2019%208.93625%2019H7.79251C7.51637%2019%207.29251%2018.7761%207.29251%2018.5C7.29251%2018.4345%207.3054%2018.3695%207.33045%2018.309L10.8448%209.8088C11.1085%209.17082%2011.8396%208.86746%2012.4775%209.13123ZM11.9999%2012.3985L10.9244%2015H13.0755L11.9999%2012.3985ZM20%203H5C4.44772%203%204%203.44772%204%204C4%204.55228%204.44772%205%205%205H20V3Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Download Icon */
.gravity-icon-download {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2011C16.5523%2011%2017%2011.4477%2017%2012V14.5C17%2015.8807%2015.8807%2017%2014.5%2017H3.5C2.11929%2017%201%2015.8807%201%2014.5V12C1%2011.4477%201.44772%2011%202%2011C2.55228%2011%203%2011.4477%203%2012V14.5C3%2014.7761%203.22386%2015%203.5%2015H14.5C14.7761%2015%2015%2014.7761%2015%2014.5V12C15%2011.4477%2015.4477%2011%2016%2011ZM9%200C9.55229%200%2010%200.447715%2010%201V8.7015L12.3972%206.28005C12.7639%205.90969%2013.3584%205.90969%2013.725%206.28005C14.0917%206.6504%2014.0917%207.25087%2013.725%207.62123L9.66501%2011.7222C9.29836%2012.0926%208.7039%2012.0926%208.33724%2011.7222L4.27499%207.61895C3.90834%207.24859%203.90834%206.64812%204.27499%206.27777C4.64164%205.90741%205.23611%205.90741%205.60276%206.27777L8%208.69922V1C8%200.447715%208.44772%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2011C16.5523%2011%2017%2011.4477%2017%2012V14.5C17%2015.8807%2015.8807%2017%2014.5%2017H3.5C2.11929%2017%201%2015.8807%201%2014.5V12C1%2011.4477%201.44772%2011%202%2011C2.55228%2011%203%2011.4477%203%2012V14.5C3%2014.7761%203.22386%2015%203.5%2015H14.5C14.7761%2015%2015%2014.7761%2015%2014.5V12C15%2011.4477%2015.4477%2011%2016%2011ZM9%200C9.55229%200%2010%200.447715%2010%201V8.7015L12.3972%206.28005C12.7639%205.90969%2013.3584%205.90969%2013.725%206.28005C14.0917%206.6504%2014.0917%207.25087%2013.725%207.62123L9.66501%2011.7222C9.29836%2012.0926%208.7039%2012.0926%208.33724%2011.7222L4.27499%207.61895C3.90834%207.24859%203.90834%206.64812%204.27499%206.27777C4.64164%205.90741%205.23611%205.90741%205.60276%206.27777L8%208.69922V1C8%200.447715%208.44772%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-download.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2015C22.5523%2015%2023%2015.4477%2023%2016V20C23%2021.6569%2021.6569%2023%2020%2023H4C2.34315%2023%201%2021.6569%201%2020V16C1%2015.4477%201.44772%2015%202%2015C2.55228%2015%203%2015.4477%203%2016V20C3%2020.5523%203.44772%2021%204%2021H20C20.5523%2021%2021%2020.5523%2021%2020V16C21%2015.4477%2021.4477%2015%2022%2015ZM12%200C12.5523%200%2013%200.447715%2013%201V12.5858L16.2929%209.29289C16.6834%208.90237%2017.3166%208.90237%2017.7071%209.29289C18.0976%209.68342%2018.0976%2010.3166%2017.7071%2010.7071L12.7071%2015.7071C12.5118%2015.9024%2012.2559%2016%2012%2016C11.7441%2016%2011.4882%2015.9024%2011.2929%2015.7071L6.29289%2010.7071C5.90237%2010.3166%205.90237%209.68342%206.29289%209.29289C6.68342%208.90237%207.31658%208.90237%207.70711%209.29289L11%2012.5858V1C11%200.447715%2011.4477%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2015C22.5523%2015%2023%2015.4477%2023%2016V20C23%2021.6569%2021.6569%2023%2020%2023H4C2.34315%2023%201%2021.6569%201%2020V16C1%2015.4477%201.44772%2015%202%2015C2.55228%2015%203%2015.4477%203%2016V20C3%2020.5523%203.44772%2021%204%2021H20C20.5523%2021%2021%2020.5523%2021%2020V16C21%2015.4477%2021.4477%2015%2022%2015ZM12%200C12.5523%200%2013%200.447715%2013%201V12.5858L16.2929%209.29289C16.6834%208.90237%2017.3166%208.90237%2017.7071%209.29289C18.0976%209.68342%2018.0976%2010.3166%2017.7071%2010.7071L12.7071%2015.7071C12.5118%2015.9024%2012.2559%2016%2012%2016C11.7441%2016%2011.4882%2015.9024%2011.2929%2015.7071L6.29289%2010.7071C5.90237%2010.3166%205.90237%209.68342%206.29289%209.29289C6.68342%208.90237%207.31658%208.90237%207.70711%209.29289L11%2012.5858V1C11%200.447715%2011.4477%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Drag Handle Icon */
.gravity-icon-drag-handle {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.3%2015.4C7.01797%2015.4%207.6%2015.982%207.6%2016.7C7.6%2017.418%207.01797%2018%206.3%2018C5.58203%2018%205%2017.418%205%2016.7C5%2015.982%205.58203%2015.4%206.3%2015.4ZM11.7%2015.4C12.418%2015.4%2013%2015.982%2013%2016.7C13%2017.418%2012.418%2018%2011.7%2018C10.982%2018%2010.4%2017.418%2010.4%2016.7C10.4%2015.982%2010.982%2015.4%2011.7%2015.4ZM6.3%2010.2667C7.01797%2010.2667%207.6%2010.8487%207.6%2011.5667C7.6%2012.2846%207.01797%2012.8667%206.3%2012.8667C5.58203%2012.8667%205%2012.2846%205%2011.5667C5%2010.8487%205.58203%2010.2667%206.3%2010.2667ZM11.7%2010.2667C12.418%2010.2667%2013%2010.8487%2013%2011.5667C13%2012.2846%2012.418%2012.8667%2011.7%2012.8667C10.982%2012.8667%2010.4%2012.2846%2010.4%2011.5667C10.4%2010.8487%2010.982%2010.2667%2011.7%2010.2667ZM6.3%205.13333C7.01797%205.13333%207.6%205.71536%207.6%206.43333C7.6%207.1513%207.01797%207.73333%206.3%207.73333C5.58203%207.73333%205%207.1513%205%206.43333C5%205.71536%205.58203%205.13333%206.3%205.13333ZM11.7%205.13333C12.418%205.13333%2013%205.71536%2013%206.43333C13%207.1513%2012.418%207.73333%2011.7%207.73333C10.982%207.73333%2010.4%207.1513%2010.4%206.43333C10.4%205.71536%2010.982%205.13333%2011.7%205.13333ZM6.3%200C7.01797%200%207.6%200.58203%207.6%201.3C7.6%202.01797%207.01797%202.6%206.3%202.6C5.58203%202.6%205%202.01797%205%201.3C5%200.58203%205.58203%200%206.3%200ZM11.7%200C12.418%200%2013%200.58203%2013%201.3C13%202.01797%2012.418%202.6%2011.7%202.6C10.982%202.6%2010.4%202.01797%2010.4%201.3C10.4%200.58203%2010.982%200%2011.7%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.3%2015.4C7.01797%2015.4%207.6%2015.982%207.6%2016.7C7.6%2017.418%207.01797%2018%206.3%2018C5.58203%2018%205%2017.418%205%2016.7C5%2015.982%205.58203%2015.4%206.3%2015.4ZM11.7%2015.4C12.418%2015.4%2013%2015.982%2013%2016.7C13%2017.418%2012.418%2018%2011.7%2018C10.982%2018%2010.4%2017.418%2010.4%2016.7C10.4%2015.982%2010.982%2015.4%2011.7%2015.4ZM6.3%2010.2667C7.01797%2010.2667%207.6%2010.8487%207.6%2011.5667C7.6%2012.2846%207.01797%2012.8667%206.3%2012.8667C5.58203%2012.8667%205%2012.2846%205%2011.5667C5%2010.8487%205.58203%2010.2667%206.3%2010.2667ZM11.7%2010.2667C12.418%2010.2667%2013%2010.8487%2013%2011.5667C13%2012.2846%2012.418%2012.8667%2011.7%2012.8667C10.982%2012.8667%2010.4%2012.2846%2010.4%2011.5667C10.4%2010.8487%2010.982%2010.2667%2011.7%2010.2667ZM6.3%205.13333C7.01797%205.13333%207.6%205.71536%207.6%206.43333C7.6%207.1513%207.01797%207.73333%206.3%207.73333C5.58203%207.73333%205%207.1513%205%206.43333C5%205.71536%205.58203%205.13333%206.3%205.13333ZM11.7%205.13333C12.418%205.13333%2013%205.71536%2013%206.43333C13%207.1513%2012.418%207.73333%2011.7%207.73333C10.982%207.73333%2010.4%207.1513%2010.4%206.43333C10.4%205.71536%2010.982%205.13333%2011.7%205.13333ZM6.3%200C7.01797%200%207.6%200.58203%207.6%201.3C7.6%202.01797%207.01797%202.6%206.3%202.6C5.58203%202.6%205%202.01797%205%201.3C5%200.58203%205.58203%200%206.3%200ZM11.7%200C12.418%200%2013%200.58203%2013%201.3C13%202.01797%2012.418%202.6%2011.7%202.6C10.982%202.6%2010.4%202.01797%2010.4%201.3C10.4%200.58203%2010.982%200%2011.7%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-drag-handle.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.5%2021C16.3284%2021%2017%2021.6716%2017%2022.5C17%2023.3284%2016.3284%2024%2015.5%2024C14.6716%2024%2014%2023.3284%2014%2022.5C14%2021.6716%2014.6716%2021%2015.5%2021ZM8.5%2021C9.32843%2021%2010%2021.6716%2010%2022.5C10%2023.3284%209.32843%2024%208.5%2024C7.67157%2024%207%2023.3284%207%2022.5C7%2021.6716%207.67157%2021%208.5%2021ZM15.5%2014C16.3284%2014%2017%2014.6716%2017%2015.5C17%2016.3284%2016.3284%2017%2015.5%2017C14.6716%2017%2014%2016.3284%2014%2015.5C14%2014.6716%2014.6716%2014%2015.5%2014ZM8.5%2014C9.32843%2014%2010%2014.6716%2010%2015.5C10%2016.3284%209.32843%2017%208.5%2017C7.67157%2017%207%2016.3284%207%2015.5C7%2014.6716%207.67157%2014%208.5%2014ZM15.5%207C16.3284%207%2017%207.67157%2017%208.5C17%209.32843%2016.3284%2010%2015.5%2010C14.6716%2010%2014%209.32843%2014%208.5C14%207.67157%2014.6716%207%2015.5%207ZM8.5%207C9.32843%207%2010%207.67157%2010%208.5C10%209.32843%209.32843%2010%208.5%2010C7.67157%2010%207%209.32843%207%208.5C7%207.67157%207.67157%207%208.5%207ZM15.5%200C16.3284%200%2017%200.671573%2017%201.5C17%202.32843%2016.3284%203%2015.5%203C14.6716%203%2014%202.32843%2014%201.5C14%200.671573%2014.6716%200%2015.5%200ZM8.5%200C9.32843%200%2010%200.671573%2010%201.5C10%202.32843%209.32843%203%208.5%203C7.67157%203%207%202.32843%207%201.5C7%200.671573%207.67157%200%208.5%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.5%2021C16.3284%2021%2017%2021.6716%2017%2022.5C17%2023.3284%2016.3284%2024%2015.5%2024C14.6716%2024%2014%2023.3284%2014%2022.5C14%2021.6716%2014.6716%2021%2015.5%2021ZM8.5%2021C9.32843%2021%2010%2021.6716%2010%2022.5C10%2023.3284%209.32843%2024%208.5%2024C7.67157%2024%207%2023.3284%207%2022.5C7%2021.6716%207.67157%2021%208.5%2021ZM15.5%2014C16.3284%2014%2017%2014.6716%2017%2015.5C17%2016.3284%2016.3284%2017%2015.5%2017C14.6716%2017%2014%2016.3284%2014%2015.5C14%2014.6716%2014.6716%2014%2015.5%2014ZM8.5%2014C9.32843%2014%2010%2014.6716%2010%2015.5C10%2016.3284%209.32843%2017%208.5%2017C7.67157%2017%207%2016.3284%207%2015.5C7%2014.6716%207.67157%2014%208.5%2014ZM15.5%207C16.3284%207%2017%207.67157%2017%208.5C17%209.32843%2016.3284%2010%2015.5%2010C14.6716%2010%2014%209.32843%2014%208.5C14%207.67157%2014.6716%207%2015.5%207ZM8.5%207C9.32843%207%2010%207.67157%2010%208.5C10%209.32843%209.32843%2010%208.5%2010C7.67157%2010%207%209.32843%207%208.5C7%207.67157%207.67157%207%208.5%207ZM15.5%200C16.3284%200%2017%200.671573%2017%201.5C17%202.32843%2016.3284%203%2015.5%203C14.6716%203%2014%202.32843%2014%201.5C14%200.671573%2014.6716%200%2015.5%200ZM8.5%200C9.32843%200%2010%200.671573%2010%201.5C10%202.32843%209.32843%203%208.5%203C7.67157%203%207%202.32843%207%201.5C7%200.671573%207.67157%200%208.5%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Drawer Left Icon */
.gravity-icon-drawer-left {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201H15ZM7.25%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H7.25V2.75ZM15%202.75H9V15.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015V3C15.25%202.86193%2015.1381%202.75%2015%202.75ZM5.5%2011C5.77614%2011%206%2011.2239%206%2011.5V12.5C6%2012.7761%205.77614%2013%205.5%2013H4.5C4.22386%2013%204%2012.7761%204%2012.5V11.5C4%2011.2239%204.22386%2011%204.5%2011H5.5ZM5.5%208C5.77614%208%206%208.22386%206%208.5V9.5C6%209.77614%205.77614%2010%205.5%2010H4.5C4.22386%2010%204%209.77614%204%209.5V8.5C4%208.22386%204.22386%208%204.5%208H5.5ZM5.5%205C5.77614%205%206%205.22386%206%205.5V6.5C6%206.77614%205.77614%207%205.5%207H4.5C4.22386%207%204%206.77614%204%206.5V5.5C4%205.22386%204.22386%205%204.5%205H5.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201H15ZM7.25%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H7.25V2.75ZM15%202.75H9V15.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015V3C15.25%202.86193%2015.1381%202.75%2015%202.75ZM5.5%2011C5.77614%2011%206%2011.2239%206%2011.5V12.5C6%2012.7761%205.77614%2013%205.5%2013H4.5C4.22386%2013%204%2012.7761%204%2012.5V11.5C4%2011.2239%204.22386%2011%204.5%2011H5.5ZM5.5%208C5.77614%208%206%208.22386%206%208.5V9.5C6%209.77614%205.77614%2010%205.5%2010H4.5C4.22386%2010%204%209.77614%204%209.5V8.5C4%208.22386%204.22386%208%204.5%208H5.5ZM5.5%205C5.77614%205%206%205.22386%206%205.5V6.5C6%206.77614%205.77614%207%205.5%207H4.5C4.22386%207%204%206.77614%204%206.5V5.5C4%205.22386%204.22386%205%204.5%205H5.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-drawer-left.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%201C21.8807%201%2023%202.11929%2023%203.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V3.5C1%202.11929%202.11929%201%203.5%201H20.5ZM9%203H3.83333C3.3731%203%203%203.22386%203%203.5V20.5C3%2020.7761%203.3731%2021%203.83333%2021H9V3ZM20.5833%203H11V21H20.5833C20.8135%2021%2021%2020.7761%2021%2020.5V3.5C21%203.22386%2020.8135%203%2020.5833%203ZM6.5%2015C6.77614%2015%207%2015.2239%207%2015.5V16.5C7%2016.7761%206.77614%2017%206.5%2017H5.5C5.22386%2017%205%2016.7761%205%2016.5V15.5C5%2015.2239%205.22386%2015%205.5%2015H6.5ZM6.5%2011C6.77614%2011%207%2011.2239%207%2011.5V12.5C7%2012.7761%206.77614%2013%206.5%2013H5.5C5.22386%2013%205%2012.7761%205%2012.5V11.5C5%2011.2239%205.22386%2011%205.5%2011H6.5ZM6.5%207C6.77614%207%207%207.22386%207%207.5V8.5C7%208.77614%206.77614%209%206.5%209H5.5C5.22386%209%205%208.77614%205%208.5V7.5C5%207.22386%205.22386%207%205.5%207H6.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%201C21.8807%201%2023%202.11929%2023%203.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V3.5C1%202.11929%202.11929%201%203.5%201H20.5ZM9%203H3.83333C3.3731%203%203%203.22386%203%203.5V20.5C3%2020.7761%203.3731%2021%203.83333%2021H9V3ZM20.5833%203H11V21H20.5833C20.8135%2021%2021%2020.7761%2021%2020.5V3.5C21%203.22386%2020.8135%203%2020.5833%203ZM6.5%2015C6.77614%2015%207%2015.2239%207%2015.5V16.5C7%2016.7761%206.77614%2017%206.5%2017H5.5C5.22386%2017%205%2016.7761%205%2016.5V15.5C5%2015.2239%205.22386%2015%205.5%2015H6.5ZM6.5%2011C6.77614%2011%207%2011.2239%207%2011.5V12.5C7%2012.7761%206.77614%2013%206.5%2013H5.5C5.22386%2013%205%2012.7761%205%2012.5V11.5C5%2011.2239%205.22386%2011%205.5%2011H6.5ZM6.5%207C6.77614%207%207%207.22386%207%207.5V8.5C7%208.77614%206.77614%209%206.5%209H5.5C5.22386%209%205%208.77614%205%208.5V7.5C5%207.22386%205.22386%207%205.5%207H6.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Drawer Right Icon */
.gravity-icon-drawer-right {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201H15ZM15%202.75H10.75V15.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015V3C15.25%202.86193%2015.1381%202.75%2015%202.75ZM9%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H9V2.75ZM13.5%2011C13.7761%2011%2014%2011.2239%2014%2011.5V12.5C14%2012.7761%2013.7761%2013%2013.5%2013H12.5C12.2239%2013%2012%2012.7761%2012%2012.5V11.5C12%2011.2239%2012.2239%2011%2012.5%2011H13.5ZM13.5%208C13.7761%208%2014%208.22386%2014%208.5V9.5C14%209.77614%2013.7761%2010%2013.5%2010H12.5C12.2239%2010%2012%209.77614%2012%209.5V8.5C12%208.22386%2012.2239%208%2012.5%208H13.5ZM13.5%205C13.7761%205%2014%205.22386%2014%205.5V6.5C14%206.77614%2013.7761%207%2013.5%207H12.5C12.2239%207%2012%206.77614%2012%206.5V5.5C12%205.22386%2012.2239%205%2012.5%205H13.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201H15ZM15%202.75H10.75V15.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015V3C15.25%202.86193%2015.1381%202.75%2015%202.75ZM9%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H9V2.75ZM13.5%2011C13.7761%2011%2014%2011.2239%2014%2011.5V12.5C14%2012.7761%2013.7761%2013%2013.5%2013H12.5C12.2239%2013%2012%2012.7761%2012%2012.5V11.5C12%2011.2239%2012.2239%2011%2012.5%2011H13.5ZM13.5%208C13.7761%208%2014%208.22386%2014%208.5V9.5C14%209.77614%2013.7761%2010%2013.5%2010H12.5C12.2239%2010%2012%209.77614%2012%209.5V8.5C12%208.22386%2012.2239%208%2012.5%208H13.5ZM13.5%205C13.7761%205%2014%205.22386%2014%205.5V6.5C14%206.77614%2013.7761%207%2013.5%207H12.5C12.2239%207%2012%206.77614%2012%206.5V5.5C12%205.22386%2012.2239%205%2012.5%205H13.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-drawer-right.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%201C21.8807%201%2023%202.11929%2023%203.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V3.5C1%202.11929%202.11929%201%203.5%201H20.5ZM20.1667%203H15V21H20.1667C20.6269%2021%2021%2020.7761%2021%2020.5V3.5C21%203.22386%2020.6269%203%2020.1667%203ZM13%203H3.41667C3.18655%203%203%203.22386%203%203.5V20.5C3%2020.7761%203.18655%2021%203.41667%2021H13V3ZM18.5%2015C18.7761%2015%2019%2015.2239%2019%2015.5V16.5C19%2016.7761%2018.7761%2017%2018.5%2017H17.5C17.2239%2017%2017%2016.7761%2017%2016.5V15.5C17%2015.2239%2017.2239%2015%2017.5%2015H18.5ZM18.5%2011C18.7761%2011%2019%2011.2239%2019%2011.5V12.5C19%2012.7761%2018.7761%2013%2018.5%2013H17.5C17.2239%2013%2017%2012.7761%2017%2012.5V11.5C17%2011.2239%2017.2239%2011%2017.5%2011H18.5ZM18.5%207C18.7761%207%2019%207.22386%2019%207.5V8.5C19%208.77614%2018.7761%209%2018.5%209H17.5C17.2239%209%2017%208.77614%2017%208.5V7.5C17%207.22386%2017.2239%207%2017.5%207H18.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%201C21.8807%201%2023%202.11929%2023%203.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V3.5C1%202.11929%202.11929%201%203.5%201H20.5ZM20.1667%203H15V21H20.1667C20.6269%2021%2021%2020.7761%2021%2020.5V3.5C21%203.22386%2020.6269%203%2020.1667%203ZM13%203H3.41667C3.18655%203%203%203.22386%203%203.5V20.5C3%2020.7761%203.18655%2021%203.41667%2021H13V3ZM18.5%2015C18.7761%2015%2019%2015.2239%2019%2015.5V16.5C19%2016.7761%2018.7761%2017%2018.5%2017H17.5C17.2239%2017%2017%2016.7761%2017%2016.5V15.5C17%2015.2239%2017.2239%2015%2017.5%2015H18.5ZM18.5%2011C18.7761%2011%2019%2011.2239%2019%2011.5V12.5C19%2012.7761%2018.7761%2013%2018.5%2013H17.5C17.2239%2013%2017%2012.7761%2017%2012.5V11.5C17%2011.2239%2017.2239%2011%2017.5%2011H18.5ZM18.5%207C18.7761%207%2019%207.22386%2019%207.5V8.5C19%208.77614%2018.7761%209%2018.5%209H17.5C17.2239%209%2017%208.77614%2017%208.5V7.5C17%207.22386%2017.2239%207%2017.5%207H18.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Drop Down Icon */
.gravity-icon-drop-down {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.99434%207H12.0057C12.5548%207%2013%207.44827%2013%208.00124C13%208.26845%2012.8939%208.52458%2012.7054%208.71261L9.69972%2011.7101C9.31219%2012.0966%208.68781%2012.0966%208.30028%2011.7101L5.29463%208.71261C4.90445%208.32349%204.90142%207.68955%205.28786%207.29667C5.47461%207.10681%205.72897%207%205.99434%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.99434%207H12.0057C12.5548%207%2013%207.44827%2013%208.00124C13%208.26845%2012.8939%208.52458%2012.7054%208.71261L9.69972%2011.7101C9.31219%2012.0966%208.68781%2012.0966%208.30028%2011.7101L5.29463%208.71261C4.90445%208.32349%204.90142%207.68955%205.28786%207.29667C5.47461%207.10681%205.72897%207%205.99434%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-drop-down.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09676%2010H15.8979C16.5051%2010%2016.9973%2010.4907%2016.9973%2011.0961C16.9973%2011.3908%2016.8783%2011.6731%2016.6671%2011.8793L12.7665%2015.6871C12.3391%2016.1043%2011.6556%2016.1043%2011.2282%2015.6871L7.32759%2011.8793C6.89374%2011.4558%206.88641%2010.7618%207.31121%2010.3292C7.51802%2010.1187%207.80116%2010%208.09676%2010Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09676%2010H15.8979C16.5051%2010%2016.9973%2010.4907%2016.9973%2011.0961C16.9973%2011.3908%2016.8783%2011.6731%2016.6671%2011.8793L12.7665%2015.6871C12.3391%2016.1043%2011.6556%2016.1043%2011.2282%2015.6871L7.32759%2011.8793C6.89374%2011.4558%206.88641%2010.7618%207.31121%2010.3292C7.51802%2010.1187%207.80116%2010%208.09676%2010Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Drop Up Icon */
.gravity-icon-drop-up {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.99434%2011C5.72897%2011%205.47461%2010.8932%205.28786%2010.7033C4.90142%2010.3104%204.90445%209.67651%205.29463%209.28739L8.30028%206.28986C8.68781%205.90338%209.31219%205.90338%209.69972%206.28986L12.7054%209.28739C12.8939%209.47542%2013%209.73155%2013%209.99876C13%2010.5517%2012.5548%2011%2012.0057%2011H5.99434Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.99434%2011C5.72897%2011%205.47461%2010.8932%205.28786%2010.7033C4.90142%2010.3104%204.90445%209.67651%205.29463%209.28739L8.30028%206.28986C8.68781%205.90338%209.31219%205.90338%209.69972%206.28986L12.7054%209.28739C12.8939%209.47542%2013%209.73155%2013%209.99876C13%2010.5517%2012.5548%2011%2012.0057%2011H5.99434Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-drop-up.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09676%2015C7.80116%2015%207.51802%2014.8813%207.31121%2014.6708C6.88641%2014.2382%206.89374%2013.5442%207.32759%2013.1207L11.2282%209.31292C11.6556%208.89569%2012.3391%208.89569%2012.7665%209.31292L16.6671%2013.1207C16.8783%2013.3269%2016.9973%2013.6092%2016.9973%2013.9039C16.9973%2014.5093%2016.5051%2015%2015.8979%2015H8.09676Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09676%2015C7.80116%2015%207.51802%2014.8813%207.31121%2014.6708C6.88641%2014.2382%206.89374%2013.5442%207.32759%2013.1207L11.2282%209.31292C11.6556%208.89569%2012.3391%208.89569%2012.7665%209.31292L16.6671%2013.1207C16.8783%2013.3269%2016.9973%2013.6092%2016.9973%2013.9039C16.9973%2014.5093%2016.5051%2015%2015.8979%2015H8.09676Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Duplicate Icon */
.gravity-icon-duplicate {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2015V16C14%2017.1046%2013.1046%2018%2012%2018H3C1.89543%2018%201%2017.1046%201%2016V5C1%203.89543%201.89543%203%203%203H4V2C4%200.89543%204.89543%200%206%200H12.5858C12.851%200%2013.1054%200.105357%2013.2929%200.292893L16.7071%203.70711C16.8946%203.89464%2017%204.149%2017%204.41421V13C17%2014.1046%2016.1046%2015%2015%2015H14ZM12.25%2015H6C4.89543%2015%204%2014.1046%204%2013V4.75H3C2.86193%204.75%202.75%204.86193%202.75%205V16C2.75%2016.1381%202.86193%2016.25%203%2016.25H12C12.1381%2016.25%2012.25%2016.1381%2012.25%2016V15ZM15.25%2013V5H13C12.4477%205%2012%204.55228%2012%204V1.75H6C5.86193%201.75%205.75%201.86193%205.75%202V13C5.75%2013.1381%205.86193%2013.25%206%2013.25H15C15.1381%2013.25%2015.25%2013.1381%2015.25%2013Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2015V16C14%2017.1046%2013.1046%2018%2012%2018H3C1.89543%2018%201%2017.1046%201%2016V5C1%203.89543%201.89543%203%203%203H4V2C4%200.89543%204.89543%200%206%200H12.5858C12.851%200%2013.1054%200.105357%2013.2929%200.292893L16.7071%203.70711C16.8946%203.89464%2017%204.149%2017%204.41421V13C17%2014.1046%2016.1046%2015%2015%2015H14ZM12.25%2015H6C4.89543%2015%204%2014.1046%204%2013V4.75H3C2.86193%204.75%202.75%204.86193%202.75%205V16C2.75%2016.1381%202.86193%2016.25%203%2016.25H12C12.1381%2016.25%2012.25%2016.1381%2012.25%2016V15ZM15.25%2013V5H13C12.4477%205%2012%204.55228%2012%204V1.75H6C5.86193%201.75%205.75%201.86193%205.75%202V13C5.75%2013.1381%205.86193%2013.25%206%2013.25H15C15.1381%2013.25%2015.25%2013.1381%2015.25%2013Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-duplicate.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2020V21.5C18%2022.8807%2016.8807%2024%2015.5%2024H3.5C2.11929%2024%201%2022.8807%201%2021.5V6.5C1%205.11929%202.11929%204%203.5%204H5V2.5C5%201.11929%206.11929%200%207.5%200H17.5858C17.851%200%2018.1054%200.105357%2018.2929%200.292893L22.7071%204.70711C22.8946%204.89464%2023%205.149%2023%205.41421V17.5C23%2018.8807%2021.8807%2020%2020.5%2020H18ZM16%2020H7.5C6.11929%2020%205%2018.8807%205%2017.5V6H3.5C3.22386%206%203%206.22386%203%206.5V21.5C3%2021.7761%203.22386%2022%203.5%2022H15.5C15.7761%2022%2016%2021.7761%2016%2021.5V20ZM21%2017.5V6H18C17.4477%206%2017%205.55228%2017%205V2H7.5C7.22386%202%207%202.22386%207%202.5V17.5C7%2017.7761%207.22386%2018%207.5%2018H20.5C20.7761%2018%2021%2017.7761%2021%2017.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2020V21.5C18%2022.8807%2016.8807%2024%2015.5%2024H3.5C2.11929%2024%201%2022.8807%201%2021.5V6.5C1%205.11929%202.11929%204%203.5%204H5V2.5C5%201.11929%206.11929%200%207.5%200H17.5858C17.851%200%2018.1054%200.105357%2018.2929%200.292893L22.7071%204.70711C22.8946%204.89464%2023%205.149%2023%205.41421V17.5C23%2018.8807%2021.8807%2020%2020.5%2020H18ZM16%2020H7.5C6.11929%2020%205%2018.8807%205%2017.5V6H3.5C3.22386%206%203%206.22386%203%206.5V21.5C3%2021.7761%203.22386%2022%203.5%2022H15.5C15.7761%2022%2016%2021.7761%2016%2021.5V20ZM21%2017.5V6H18C17.4477%206%2017%205.55228%2017%205V2H7.5C7.22386%202%207%202.22386%207%202.5V17.5C7%2017.7761%207.22386%2018%207.5%2018H20.5C20.7761%2018%2021%2017.7761%2021%2017.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Edit Icon */
.gravity-icon-edit {
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 18 18'%3e%3cpath d='M1 12.7827L12.1792 1.58579C12.959 0.804738 14.2233 0.804738 15.0032 1.58579L16.4151 3C17.195 3.78105 17.195 5.04738 16.4151 5.82843L5.26123 17H1.49921C1.2235 17 1 16.7761 1 16.5V12.7827ZM10.6284 5.61586L12.3928 7.38027L4.53555 15.25H2.75V13.5068L10.6284 5.61586ZM13.4176 2.82224L11.8649 4.37744L13.6293 6.14185L15.1767 4.59197C15.2744 4.49411 15.2744 4.33431 15.1767 4.23646L13.7647 2.82224C13.6686 2.72592 13.5138 2.72592 13.4176 2.82224Z'/%3e%3c/svg%3e");
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 18 18'%3e%3cpath d='M1 12.7827L12.1792 1.58579C12.959 0.804738 14.2233 0.804738 15.0032 1.58579L16.4151 3C17.195 3.78105 17.195 5.04738 16.4151 5.82843L5.26123 17H1.49921C1.2235 17 1 16.7761 1 16.5V12.7827ZM10.6284 5.61586L12.3928 7.38027L4.53555 15.25H2.75V13.5068L10.6284 5.61586ZM13.4176 2.82224L11.8649 4.37744L13.6293 6.14185L15.1767 4.59197C15.2744 4.49411 15.2744 4.33431 15.1767 4.23646L13.7647 2.82224C13.6686 2.72592 13.5138 2.72592 13.4176 2.82224Z'/%3e%3c/svg%3e");
}

.gravity-icon-edit.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.96952%2023.0038H2C1.44772%2023.0038%201%2022.5561%201%2022.0038V18.0406L17.3051%201.73238C18.2813%200.755986%2019.8642%200.755858%2020.8406%201.73209L22.271%203.16389C23.2471%204.14017%2023.2471%205.72286%2022.271%206.69914L5.96952%2023.0038ZM15.5899%206.27653L17.7279%208.41447L5.14098%2021.0038H3V18.869L15.5899%206.27653ZM18.7194%203.14645L17.004%204.86218L19.142%207.00011L20.8567%205.28504C21.0519%205.08979%2021.0519%204.77325%2020.8561%204.57743L19.4265%203.14648C19.2312%202.95117%2018.9146%202.9512%2018.7194%203.14645Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.96952%2023.0038H2C1.44772%2023.0038%201%2022.5561%201%2022.0038V18.0406L17.3051%201.73238C18.2813%200.755986%2019.8642%200.755858%2020.8406%201.73209L22.271%203.16389C23.2471%204.14017%2023.2471%205.72286%2022.271%206.69914L5.96952%2023.0038ZM15.5899%206.27653L17.7279%208.41447L5.14098%2021.0038H3V18.869L15.5899%206.27653ZM18.7194%203.14645L17.004%204.86218L19.142%207.00011L20.8567%205.28504C21.0519%205.08979%2021.0519%204.77325%2020.8561%204.57743L19.4265%203.14648C19.2312%202.95117%2018.9146%202.9512%2018.7194%203.14645Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Email Icon */
.gravity-icon-email {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%203H15C16.1046%203%2017%203.89543%2017%205V14C17%2015.1046%2016.1046%2016%2015%2016H3C1.89543%2016%201%2015.1046%201%2014V5C1%203.89543%201.89543%203%203%203ZM15.1162%204.7786C15.0815%204.76034%2015.042%204.75%2015%204.75H3C2.95804%204.75%202.9185%204.76034%202.88378%204.7786L7.6417%208.73324C8.42901%209.38763%209.57099%209.38763%2010.3583%208.73324L15.1162%204.7786ZM15.25%206.94298L11.4769%2010.0791C10.0412%2011.2724%207.95878%2011.2724%206.52309%2010.0791L2.75%206.94298V14C2.75%2014.1381%202.86193%2014.25%203%2014.25H15C15.1381%2014.25%2015.25%2014.1381%2015.25%2014V6.94298Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%203H15C16.1046%203%2017%203.89543%2017%205V14C17%2015.1046%2016.1046%2016%2015%2016H3C1.89543%2016%201%2015.1046%201%2014V5C1%203.89543%201.89543%203%203%203ZM15.1162%204.7786C15.0815%204.76034%2015.042%204.75%2015%204.75H3C2.95804%204.75%202.9185%204.76034%202.88378%204.7786L7.6417%208.73324C8.42901%209.38763%209.57099%209.38763%2010.3583%208.73324L15.1162%204.7786ZM15.25%206.94298L11.4769%2010.0791C10.0412%2011.2724%207.95878%2011.2724%206.52309%2010.0791L2.75%206.94298V14C2.75%2014.1381%202.86193%2014.25%203%2014.25H15C15.1381%2014.25%2015.25%2014.1381%2015.25%2014V6.94298Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-email.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%204H20.5C21.8807%204%2023%205.11929%2023%206.5V18.5C23%2019.8807%2021.8807%2021%2020.5%2021H3.5C2.11929%2021%201%2019.8807%201%2018.5V6.5C1%205.11929%202.11929%204%203.5%204ZM21%206.51938V6.5C21%206.22386%2020.7761%206%2020.5%206H3.5C3.22386%206%203%206.22386%203%206.5V6.51938L10.1259%2012.2201C11.2216%2013.0966%2012.7784%2013.0966%2013.8741%2012.2201L21%206.51938ZM21%209.08063L15.1235%2013.7818C13.2974%2015.2427%2010.7026%2015.2427%208.87652%2013.7818L3%209.08063V18.5C3%2018.7761%203.22386%2019%203.5%2019H20.5C20.7761%2019%2021%2018.7761%2021%2018.5V9.08063Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%204H20.5C21.8807%204%2023%205.11929%2023%206.5V18.5C23%2019.8807%2021.8807%2021%2020.5%2021H3.5C2.11929%2021%201%2019.8807%201%2018.5V6.5C1%205.11929%202.11929%204%203.5%204ZM21%206.51938V6.5C21%206.22386%2020.7761%206%2020.5%206H3.5C3.22386%206%203%206.22386%203%206.5V6.51938L10.1259%2012.2201C11.2216%2013.0966%2012.7784%2013.0966%2013.8741%2012.2201L21%206.51938ZM21%209.08063L15.1235%2013.7818C13.2974%2015.2427%2010.7026%2015.2427%208.87652%2013.7818L3%209.08063V18.5C3%2018.7761%203.22386%2019%203.5%2019H20.5C20.7761%2019%2021%2018.7761%2021%2018.5V9.08063Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Expand Icon */
.gravity-icon-expand {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.62194%2012.7616C9.25409%2013.0918%208.69027%2013.079%208.33765%2012.7231L3.27436%207.61365C2.90855%207.24451%202.90855%206.646%203.27436%206.27686C3.64016%205.90771%204.23325%205.90771%204.59906%206.27686L9%2010.718L13.4009%206.27686C13.7667%205.90771%2014.3598%205.90771%2014.7256%206.27686C15.0915%206.646%2015.0915%207.24451%2014.7256%207.61365L9.66235%2012.7231C9.64897%2012.7367%209.63548%2012.7495%209.62191%2012.7616L9.62194%2012.7616Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.62194%2012.7616C9.25409%2013.0918%208.69027%2013.079%208.33765%2012.7231L3.27436%207.61365C2.90855%207.24451%202.90855%206.646%203.27436%206.27686C3.64016%205.90771%204.23325%205.90771%204.59906%206.27686L9%2010.718L13.4009%206.27686C13.7667%205.90771%2014.3598%205.90771%2014.7256%206.27686C15.0915%206.646%2015.0915%207.24451%2014.7256%207.61365L9.66235%2012.7231C9.64897%2012.7367%209.63548%2012.7495%209.62191%2012.7616L9.62194%2012.7616Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-expand.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.2504%207.49561C3.91653%207.15347%203.91653%206.59875%204.2504%206.25661C4.58427%205.91446%205.12558%205.91446%205.45944%206.25661L8%208.88489L10.5406%206.25661C10.8744%205.91446%2011.4157%205.91446%2011.7496%206.25661C12.0835%206.59875%2012.0835%207.15347%2011.7496%207.49561L8.60452%2010.7434C8.27065%2011.0855%207.72935%2011.0855%207.39548%2010.7434L4.2504%207.49561Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.2504%207.49561C3.91653%207.15347%203.91653%206.59875%204.2504%206.25661C4.58427%205.91446%205.12558%205.91446%205.45944%206.25661L8%208.88489L10.5406%206.25661C10.8744%205.91446%2011.4157%205.91446%2011.7496%206.25661C12.0835%206.59875%2012.0835%207.15347%2011.7496%207.49561L8.60452%2010.7434C8.27065%2011.0855%207.72935%2011.0855%207.39548%2010.7434L4.2504%207.49561Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-expand.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6773%2016.7357C12.285%2017.0974%2011.6736%2017.0878%2011.2929%2016.7071L4.29289%209.70711C3.90237%209.31658%203.90237%208.68342%204.29289%208.29289C4.68342%207.90237%205.31658%207.90237%205.70711%208.29289L12%2014.5858L18.2929%208.29289C18.6834%207.90237%2019.3166%207.90237%2019.7071%208.29289C20.0976%208.68342%2020.0976%209.31658%2019.7071%209.70711L12.7071%2016.7071C12.6972%2016.717%2012.6872%2016.7266%2012.6773%2016.7357L12.6773%2016.7357Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6773%2016.7357C12.285%2017.0974%2011.6736%2017.0878%2011.2929%2016.7071L4.29289%209.70711C3.90237%209.31658%203.90237%208.68342%204.29289%208.29289C4.68342%207.90237%205.31658%207.90237%205.70711%208.29289L12%2014.5858L18.2929%208.29289C18.6834%207.90237%2019.3166%207.90237%2019.7071%208.29289C20.0976%208.68342%2020.0976%209.31658%2019.7071%209.70711L12.7071%2016.7071C12.6972%2016.717%2012.6872%2016.7266%2012.6773%2016.7357L12.6773%2016.7357Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Export Icon */
.gravity-icon-export {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%207V8.75H5C4.30964%208.75%203.75%209.30964%203.75%2010V14C3.75%2014.6904%204.30964%2015.25%205%2015.25H13C13.6904%2015.25%2014.25%2014.6904%2014.25%2014V10C14.25%209.30964%2013.6904%208.75%2013%208.75H12V7H13C14.6569%207%2016%208.34315%2016%2010V14C16%2015.6569%2014.6569%2017%2013%2017H5C3.34315%2017%202%2015.6569%202%2014V10C2%208.34315%203.34315%207%205%207H6ZM9.67438%200.281509L12.7207%203.35925C13.0931%203.73459%2013.0931%204.34315%2012.7207%204.71849C12.3482%205.09384%2011.7444%205.09384%2011.3719%204.71849L10%203.32815V12C10%2012.5523%209.55228%2013%209%2013C8.44772%2013%208%2012.5523%208%2012V3.32815L6.6281%204.71849C6.25565%205.09384%205.65179%205.09384%205.27934%204.71849C4.90689%204.34315%204.90689%203.73459%205.27934%203.35925L8.32562%200.281509C8.69807%20-0.0938363%209.30193%20-0.0938363%209.67438%200.281509Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%207V8.75H5C4.30964%208.75%203.75%209.30964%203.75%2010V14C3.75%2014.6904%204.30964%2015.25%205%2015.25H13C13.6904%2015.25%2014.25%2014.6904%2014.25%2014V10C14.25%209.30964%2013.6904%208.75%2013%208.75H12V7H13C14.6569%207%2016%208.34315%2016%2010V14C16%2015.6569%2014.6569%2017%2013%2017H5C3.34315%2017%202%2015.6569%202%2014V10C2%208.34315%203.34315%207%205%207H6ZM9.67438%200.281509L12.7207%203.35925C13.0931%203.73459%2013.0931%204.34315%2012.7207%204.71849C12.3482%205.09384%2011.7444%205.09384%2011.3719%204.71849L10%203.32815V12C10%2012.5523%209.55228%2013%209%2013C8.44772%2013%208%2012.5523%208%2012V3.32815L6.6281%204.71849C6.25565%205.09384%205.65179%205.09384%205.27934%204.71849C4.90689%204.34315%204.90689%203.73459%205.27934%203.35925L8.32562%200.281509C8.69807%20-0.0938363%209.30193%20-0.0938363%209.67438%200.281509Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-export.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%209V11H5.75C4.7835%2011%204%2011.7835%204%2012.75V19.25C4%2020.2165%204.7835%2021%205.75%2021H18.25C19.2165%2021%2020%2020.2165%2020%2019.25V12.75C20%2011.7835%2019.2165%2011%2018.25%2011H15V9H18.25C20.3211%209%2022%2010.6789%2022%2012.75V19.25C22%2021.3211%2020.3211%2023%2018.25%2023H5.75C3.67893%2023%202%2021.3211%202%2019.25V12.75C2%2010.6789%203.67893%209%205.75%209H9ZM12.7071%200.292893L17.7071%205.29289C18.0976%205.68342%2018.0976%206.31658%2017.7071%206.70711C17.3166%207.09763%2016.6834%207.09763%2016.2929%206.70711L13%203.41421V17C13%2017.5523%2012.5523%2018%2012%2018C11.4477%2018%2011%2017.5523%2011%2017V3.41421L7.70711%206.70711C7.31658%207.09763%206.68342%207.09763%206.29289%206.70711C5.90237%206.31658%205.90237%205.68342%206.29289%205.29289L11.2929%200.292893C11.6834%20-0.0976311%2012.3166%20-0.0976311%2012.7071%200.292893Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%209V11H5.75C4.7835%2011%204%2011.7835%204%2012.75V19.25C4%2020.2165%204.7835%2021%205.75%2021H18.25C19.2165%2021%2020%2020.2165%2020%2019.25V12.75C20%2011.7835%2019.2165%2011%2018.25%2011H15V9H18.25C20.3211%209%2022%2010.6789%2022%2012.75V19.25C22%2021.3211%2020.3211%2023%2018.25%2023H5.75C3.67893%2023%202%2021.3211%202%2019.25V12.75C2%2010.6789%203.67893%209%205.75%209H9ZM12.7071%200.292893L17.7071%205.29289C18.0976%205.68342%2018.0976%206.31658%2017.7071%206.70711C17.3166%207.09763%2016.6834%207.09763%2016.2929%206.70711L13%203.41421V17C13%2017.5523%2012.5523%2018%2012%2018C11.4477%2018%2011%2017.5523%2011%2017V3.41421L7.70711%206.70711C7.31658%207.09763%206.68342%207.09763%206.29289%206.70711C5.90237%206.31658%205.90237%205.68342%206.29289%205.29289L11.2929%200.292893C11.6834%20-0.0976311%2012.3166%20-0.0976311%2012.7071%200.292893Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* File Icon */
.gravity-icon-file {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201H11.5858C11.851%201%2012.1054%201.10536%2012.2929%201.29289L15.7071%204.70711C15.8946%204.89464%2016%205.149%2016%205.41421V15C16%2016.1046%2015.1046%2017%2014%2017H4C2.89543%2017%202%2016.1046%202%2015V3C2%201.89543%202.89543%201%204%201ZM14.25%206H12C11.4477%206%2011%205.55228%2011%205V2.75H4C3.86193%202.75%203.75%202.86193%203.75%203V15C3.75%2015.1381%203.86193%2015.25%204%2015.25H14C14.1381%2015.25%2014.25%2015.1381%2014.25%2015V6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201H11.5858C11.851%201%2012.1054%201.10536%2012.2929%201.29289L15.7071%204.70711C15.8946%204.89464%2016%205.149%2016%205.41421V15C16%2016.1046%2015.1046%2017%2014%2017H4C2.89543%2017%202%2016.1046%202%2015V3C2%201.89543%202.89543%201%204%201ZM14.25%206H12C11.4477%206%2011%205.55228%2011%205V2.75H4C3.86193%202.75%203.75%202.86193%203.75%203V15C3.75%2015.1381%203.86193%2015.25%204%2015.25H14C14.1381%2015.25%2014.25%2015.1381%2014.25%2015V6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-file.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H16.5858C16.851%201%2017.1054%201.10536%2017.2929%201.29289L21.7071%205.70711C21.8946%205.89464%2022%206.149%2022%206.41421V20.5C22%2021.8807%2020.8807%2023%2019.5%2023H4.5C3.11929%2023%202%2021.8807%202%2020.5V3.5C2%202.11929%203.11929%201%204.5%201ZM20%207H17C16.4477%207%2016%206.55228%2016%206V3H4.5C4.22386%203%204%203.22386%204%203.5V20.5C4%2020.7761%204.22386%2021%204.5%2021H19.5C19.7761%2021%2020%2020.7761%2020%2020.5V7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H16.5858C16.851%201%2017.1054%201.10536%2017.2929%201.29289L21.7071%205.70711C21.8946%205.89464%2022%206.149%2022%206.41421V20.5C22%2021.8807%2020.8807%2023%2019.5%2023H4.5C3.11929%2023%202%2021.8807%202%2020.5V3.5C2%202.11929%203.11929%201%204.5%201ZM20%207H17C16.4477%207%2016%206.55228%2016%206V3H4.5C4.22386%203%204%203.22386%204%203.5V20.5C4%2020.7761%204.22386%2021%204.5%2021H19.5C19.7761%2021%2020%2020.7761%2020%2020.5V7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Filter Icon */
.gravity-icon-filter {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%203C1.44772%203%201%203.44772%201%204C1%204.55228%201.44772%205%202%205H16C16.5523%205%2017%204.55228%2017%204C17%203.44772%2016.5523%203%2016%203H2ZM5%208C4.44772%208%204%208.44772%204%209C4%209.55228%204.44772%2010%205%2010H13C13.5523%2010%2014%209.55228%2014%209C14%208.44772%2013.5523%208%2013%208H5ZM7%2014C7%2013.4477%207.44772%2013%208%2013H10C10.5523%2013%2011%2013.4477%2011%2014C11%2014.5523%2010.5523%2015%2010%2015H8C7.44772%2015%207%2014.5523%207%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%203C1.44772%203%201%203.44772%201%204C1%204.55228%201.44772%205%202%205H16C16.5523%205%2017%204.55228%2017%204C17%203.44772%2016.5523%203%2016%203H2ZM5%208C4.44772%208%204%208.44772%204%209C4%209.55228%204.44772%2010%205%2010H13C13.5523%2010%2014%209.55228%2014%209C14%208.44772%2013.5523%208%2013%208H5ZM7%2014C7%2013.4477%207.44772%2013%208%2013H10C10.5523%2013%2011%2013.4477%2011%2014C11%2014.5523%2010.5523%2015%2010%2015H8C7.44772%2015%207%2014.5523%207%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-filter.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1%205C1%204.44772%201.44772%204%202%204H22C22.5523%204%2023%204.44772%2023%205C23%205.55228%2022.5523%206%2022%206H2C1.44772%206%201%205.55228%201%205ZM4%2010C4%209.44772%204.44772%209%205%209H19C19.5523%209%2020%209.44772%2020%2010C20%2010.5523%2019.5523%2011%2019%2011H5C4.44772%2011%204%2010.5523%204%2010ZM8%2014C7.44772%2014%207%2014.4477%207%2015C7%2015.5523%207.44772%2016%208%2016H16C16.5523%2016%2017%2015.5523%2017%2015C17%2014.4477%2016.5523%2014%2016%2014H8ZM10%2020C10%2019.4477%2010.4477%2019%2011%2019H13C13.5523%2019%2014%2019.4477%2014%2020C14%2020.5523%2013.5523%2021%2013%2021H11C10.4477%2021%2010%2020.5523%2010%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1%205C1%204.44772%201.44772%204%202%204H22C22.5523%204%2023%204.44772%2023%205C23%205.55228%2022.5523%206%2022%206H2C1.44772%206%201%205.55228%201%205ZM4%2010C4%209.44772%204.44772%209%205%209H19C19.5523%209%2020%209.44772%2020%2010C20%2010.5523%2019.5523%2011%2019%2011H5C4.44772%2011%204%2010.5523%204%2010ZM8%2014C7.44772%2014%207%2014.4477%207%2015C7%2015.5523%207.44772%2016%208%2016H16C16.5523%2016%2017%2015.5523%2017%2015C17%2014.4477%2016.5523%2014%2016%2014H8ZM10%2020C10%2019.4477%2010.4477%2019%2011%2019H13C13.5523%2019%2014%2019.4477%2014%2020C14%2020.5523%2013.5523%2021%2013%2021H11C10.4477%2021%2010%2020.5523%2010%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Flag Icon */
.gravity-icon-flag {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202H16.2495C16.6637%202%2016.9995%202.33579%2016.9995%202.75C16.9995%202.91071%2016.9479%203.06716%2016.8523%203.19632L14.0357%207L16.8523%2010.8037C17.0988%2011.1366%2017.0287%2011.6063%2016.6958%2011.8527C16.5667%2011.9484%2016.4102%2012%2016.2495%2012H4V16C4%2016.5523%203.55228%2017%203%2017C2.44772%2017%202%2016.5523%202%2016V2C2%201.44772%202.44772%201%203%201C3.55228%201%204%201.44772%204%202ZM4%203.75V10.25H14.2647L11.8582%207L14.2647%203.75H4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202H16.2495C16.6637%202%2016.9995%202.33579%2016.9995%202.75C16.9995%202.91071%2016.9479%203.06716%2016.8523%203.19632L14.0357%207L16.8523%2010.8037C17.0988%2011.1366%2017.0287%2011.6063%2016.6958%2011.8527C16.5667%2011.9484%2016.4102%2012%2016.2495%2012H4V16C4%2016.5523%203.55228%2017%203%2017C2.44772%2017%202%2016.5523%202%2016V2C2%201.44772%202.44772%201%203%201C3.55228%201%204%201.44772%204%202ZM4%203.75V10.25H14.2647L11.8582%207L14.2647%203.75H4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-flag.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%202H21.9912C22.5435%202%2022.9912%202.44772%2022.9912%203C22.9912%203.20567%2022.9278%203.40634%2022.8096%203.57467L19%209L22.8096%2014.4253C23.127%2014.8773%2023.0179%2015.501%2022.5659%2015.8184C22.3976%2015.9366%2022.1969%2016%2021.9912%2016H5V22C5%2022.5523%204.55228%2023%204%2023C3.44772%2023%203%2022.5523%203%2022V2C3%201.44772%203.44772%201%204%201C4.55228%201%205%201.44772%205%202ZM5%204V14H20.0671L16.5562%209L20.0671%204H5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%202H21.9912C22.5435%202%2022.9912%202.44772%2022.9912%203C22.9912%203.20567%2022.9278%203.40634%2022.8096%203.57467L19%209L22.8096%2014.4253C23.127%2014.8773%2023.0179%2015.501%2022.5659%2015.8184C22.3976%2015.9366%2022.1969%2016%2021.9912%2016H5V22C5%2022.5523%204.55228%2023%204%2023C3.44772%2023%203%2022.5523%203%2022V2C3%201.44772%203.44772%201%204%201C4.55228%201%205%201.44772%205%202ZM5%204V14H20.0671L16.5562%209L20.0671%204H5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Flip Card Icon */
.gravity-icon-flip-card {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.75%209.87501V15.3554L15.25%2016.2501V1.75007L6.75%202.64456V7.00532H5V2.64456C5%201.74896%205.67617%200.997901%206.56685%200.90417L15.0669%200.00967586C16.028%20-0.0914747%2016.8892%200.605726%2016.9904%201.56692C16.9968%201.62776%2017%201.68889%2017%201.75007V16.2501C17%2017.2166%2016.2165%2018.0001%2015.25%2018.0001C15.1888%2018.0001%2015.1277%2017.9969%2015.0668%2017.9905L6.56682%2017.0958C5.67616%2017.0021%205%2016.251%205%2015.3554V9.87501H2.875C2.25368%209.87501%201.75%2010.3787%201.75%2011C1.75%2011.6213%202.25368%2012.125%202.875%2012.125H3.875V13.875H2.875C1.28718%2013.875%200%2012.5878%200%2011C0%209.41219%201.28718%208.12501%202.875%208.12501H11.0126L9.3904%206.49887C9.04835%206.15598%209.04835%205.60006%209.3904%205.25717C9.73245%204.91429%2010.287%204.91429%2010.6291%205.25717L13.7435%208.37916C14.0855%208.72204%2014.0855%209.27797%2013.7435%209.62086L10.6291%2012.7428C10.287%2013.0857%209.73245%2013.0857%209.3904%2012.7428C9.04835%2012.4%209.04835%2011.844%209.3904%2011.5011L11.0126%209.87501H6.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.75%209.87501V15.3554L15.25%2016.2501V1.75007L6.75%202.64456V7.00532H5V2.64456C5%201.74896%205.67617%200.997901%206.56685%200.90417L15.0669%200.00967586C16.028%20-0.0914747%2016.8892%200.605726%2016.9904%201.56692C16.9968%201.62776%2017%201.68889%2017%201.75007V16.2501C17%2017.2166%2016.2165%2018.0001%2015.25%2018.0001C15.1888%2018.0001%2015.1277%2017.9969%2015.0668%2017.9905L6.56682%2017.0958C5.67616%2017.0021%205%2016.251%205%2015.3554V9.87501H2.875C2.25368%209.87501%201.75%2010.3787%201.75%2011C1.75%2011.6213%202.25368%2012.125%202.875%2012.125H3.875V13.875H2.875C1.28718%2013.875%200%2012.5878%200%2011C0%209.41219%201.28718%208.12501%202.875%208.12501H11.0126L9.3904%206.49887C9.04835%206.15598%209.04835%205.60006%209.3904%205.25717C9.73245%204.91429%2010.287%204.91429%2010.6291%205.25717L13.7435%208.37916C14.0855%208.72204%2014.0855%209.27797%2013.7435%209.62086L10.6291%2012.7428C10.287%2013.0857%209.73245%2013.0857%209.3904%2012.7428C9.04835%2012.4%209.04835%2011.844%209.3904%2011.5011L11.0126%209.87501H6.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-flip-card.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.5858%2011L12.2929%208.70711C11.9024%208.31659%2011.9024%207.68342%2012.2929%207.2929C12.6834%206.90237%2013.3166%206.90237%2013.7071%207.2929L17.7071%2011.2929C18.0976%2011.6834%2018.0976%2012.3166%2017.7071%2012.7071L13.7071%2016.7071C13.3166%2017.0976%2012.6834%2017.0976%2012.2929%2016.7071C11.9024%2016.3166%2011.9024%2015.6834%2012.2929%2015.2929L14.5858%2013H9V20.2793L21%2022V2.00029L9%203.72078V8.92338H7V3.72078C7%202.72587%207.73131%201.88223%208.71615%201.74103L20.7162%200.0205312C21.8095%20-0.136233%2022.823%200.623051%2022.9798%201.71644C22.9932%201.81045%2023%201.90531%2023%202.00029V22C23%2023.1045%2022.1046%2024%2021%2024C20.905%2024%2020.8101%2023.9932%2020.7161%2023.9797L8.71612%2022.2591C7.73129%2022.1178%207%2021.2742%207%2020.2793V13H3.5C2.67157%2013%202%2013.6716%202%2014.5C2%2015.3284%202.67157%2016%203.5%2016H6V18H3.5C1.567%2018%200%2016.433%200%2014.5C0%2012.567%201.567%2011%203.5%2011H14.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.5858%2011L12.2929%208.70711C11.9024%208.31659%2011.9024%207.68342%2012.2929%207.2929C12.6834%206.90237%2013.3166%206.90237%2013.7071%207.2929L17.7071%2011.2929C18.0976%2011.6834%2018.0976%2012.3166%2017.7071%2012.7071L13.7071%2016.7071C13.3166%2017.0976%2012.6834%2017.0976%2012.2929%2016.7071C11.9024%2016.3166%2011.9024%2015.6834%2012.2929%2015.2929L14.5858%2013H9V20.2793L21%2022V2.00029L9%203.72078V8.92338H7V3.72078C7%202.72587%207.73131%201.88223%208.71615%201.74103L20.7162%200.0205312C21.8095%20-0.136233%2022.823%200.623051%2022.9798%201.71644C22.9932%201.81045%2023%201.90531%2023%202.00029V22C23%2023.1045%2022.1046%2024%2021%2024C20.905%2024%2020.8101%2023.9932%2020.7161%2023.9797L8.71612%2022.2591C7.73129%2022.1178%207%2021.2742%207%2020.2793V13H3.5C2.67157%2013%202%2013.6716%202%2014.5C2%2015.3284%202.67157%2016%203.5%2016H6V18H3.5C1.567%2018%200%2016.433%200%2014.5C0%2012.567%201.567%2011%203.5%2011H14.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Font Icon */
.gravity-icon-font {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.31284%2013H3.0732L1.8265%2016.5009C1.71992%2016.8002%201.43716%2017%201.12017%2017H0.5C0.223858%2017%200%2016.7756%200%2016.4987C0%2016.4413%200.00984741%2016.3843%200.0291122%2016.3302L5.25125%201.66575C5.43695%201.14427%206.00913%200.872467%206.52926%201.05865C6.81169%201.15974%207.03396%201.38259%207.1348%201.66575L11.251%2013.2244L13.2556%207.60961C13.4135%207.1675%2013.8998%206.93706%2014.3419%207.0949C14.582%207.18061%2014.7709%207.36954%2014.8566%207.60961L17.9708%2016.3319C18.0636%2016.5919%2017.928%2016.878%2017.668%2016.9709C17.614%2016.9902%2017.5572%2017%2017.4999%2017H17.1452C16.8282%2017%2016.5454%2016.8007%2016.4388%2016.5022L16.081%2015.5H12.0613L12.3569%2016.3302C12.4498%2016.5909%2012.3142%2016.8777%2012.0542%2016.9708C12.0002%2016.9901%2011.9433%2017%2011.886%2017H11.2659C10.9489%2017%2010.6661%2016.8002%2010.5595%2016.5009L9.31284%2013ZM8.68965%2011.25L6.19302%204.23916L3.69639%2011.25H8.68965ZM12.5668%2014H15.5455L14.0561%209.82854L12.5668%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.31284%2013H3.0732L1.8265%2016.5009C1.71992%2016.8002%201.43716%2017%201.12017%2017H0.5C0.223858%2017%200%2016.7756%200%2016.4987C0%2016.4413%200.00984741%2016.3843%200.0291122%2016.3302L5.25125%201.66575C5.43695%201.14427%206.00913%200.872467%206.52926%201.05865C6.81169%201.15974%207.03396%201.38259%207.1348%201.66575L11.251%2013.2244L13.2556%207.60961C13.4135%207.1675%2013.8998%206.93706%2014.3419%207.0949C14.582%207.18061%2014.7709%207.36954%2014.8566%207.60961L17.9708%2016.3319C18.0636%2016.5919%2017.928%2016.878%2017.668%2016.9709C17.614%2016.9902%2017.5572%2017%2017.4999%2017H17.1452C16.8282%2017%2016.5454%2016.8007%2016.4388%2016.5022L16.081%2015.5H12.0613L12.3569%2016.3302C12.4498%2016.5909%2012.3142%2016.8777%2012.0542%2016.9708C12.0002%2016.9901%2011.9433%2017%2011.886%2017H11.2659C10.9489%2017%2010.6661%2016.8002%2010.5595%2016.5009L9.31284%2013ZM8.68965%2011.25L6.19302%204.23916L3.69639%2011.25H8.68965ZM12.5668%2014H15.5455L14.0561%209.82854L12.5668%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-font.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.3108%2018H3.6891L2.08682%2022.5018C1.9805%2022.8006%201.69843%2023%201.38222%2023H0.498772C0.223308%2023%200%2022.776%200%2022.4997C0%2022.4423%200.00982323%2022.3854%200.0290407%2022.3314L7.3256%201.83059C7.55716%201.18%208.27064%200.840888%208.9192%201.07317C9.27137%201.1993%209.54852%201.47732%209.67426%201.83059L15.5516%2018.344L18.0134%2011.4491C18.2176%2010.8769%2018.847%2010.5787%2019.4192%2010.783C19.7298%2010.8939%2019.9743%2011.1384%2020.0853%2011.4491L23.9708%2022.3319C24.0636%2022.5919%2023.928%2022.878%2023.668%2022.9709C23.614%2022.9902%2023.5572%2023%2023.4999%2023H22.8797C22.5627%2023%2022.2799%2022.8007%2022.1734%2022.5022L21.637%2021H16.4969L16.9708%2022.3314C17.0634%2022.5917%2016.9282%2022.878%2016.6688%2022.9709C16.615%2022.9901%2016.5582%2023%2016.5011%2023H15.6176C15.3014%2023%2015.0194%2022.8006%2014.913%2022.5018L13.3108%2018ZM12.5989%2016L8.49993%204.4832L4.40093%2016H12.5989ZM17.0864%2019.25H21.0122L19.0493%2013.7521L17.0864%2019.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.3108%2018H3.6891L2.08682%2022.5018C1.9805%2022.8006%201.69843%2023%201.38222%2023H0.498772C0.223308%2023%200%2022.776%200%2022.4997C0%2022.4423%200.00982323%2022.3854%200.0290407%2022.3314L7.3256%201.83059C7.55716%201.18%208.27064%200.840888%208.9192%201.07317C9.27137%201.1993%209.54852%201.47732%209.67426%201.83059L15.5516%2018.344L18.0134%2011.4491C18.2176%2010.8769%2018.847%2010.5787%2019.4192%2010.783C19.7298%2010.8939%2019.9743%2011.1384%2020.0853%2011.4491L23.9708%2022.3319C24.0636%2022.5919%2023.928%2022.878%2023.668%2022.9709C23.614%2022.9902%2023.5572%2023%2023.4999%2023H22.8797C22.5627%2023%2022.2799%2022.8007%2022.1734%2022.5022L21.637%2021H16.4969L16.9708%2022.3314C17.0634%2022.5917%2016.9282%2022.878%2016.6688%2022.9709C16.615%2022.9901%2016.5582%2023%2016.5011%2023H15.6176C15.3014%2023%2015.0194%2022.8006%2014.913%2022.5018L13.3108%2018ZM12.5989%2016L8.49993%204.4832L4.40093%2016H12.5989ZM17.0864%2019.25H21.0122L19.0493%2013.7521L17.0864%2019.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Font Color Icon */
.gravity-icon-font-color {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2015C15.5523%2015%2016%2015.4477%2016%2016V17C16%2017.5523%2015.5523%2018%2015%2018H3C2.44772%2018%202%2017.5523%202%2017V16C2%2015.4477%202.44772%2015%203%2015H15ZM9.3791%201.71226C9.62696%201.81382%209.82371%202.01057%209.92527%202.25843L14.0442%2012.3104C14.1489%2012.566%2014.0266%2012.858%2013.7711%2012.9627C13.7109%2012.9873%2013.6465%2013%2013.5815%2013H12.7488C12.5459%2013%2012.3631%2012.8774%2012.2862%2012.6896L11.5939%2011H6.4309L5.73858%2012.6896C5.66164%2012.8774%205.47884%2013%205.27591%2013H4.41838C4.14224%2013%203.91838%2012.7762%203.91838%2012.5C3.91838%2012.435%203.93106%2012.3706%203.95572%2012.3104L8.07461%202.25843C8.28402%201.74738%208.86806%201.50286%209.3791%201.71226ZM9.01238%204.70002L7.14798%209.25002H10.8768L9.01238%204.70002Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2015C15.5523%2015%2016%2015.4477%2016%2016V17C16%2017.5523%2015.5523%2018%2015%2018H3C2.44772%2018%202%2017.5523%202%2017V16C2%2015.4477%202.44772%2015%203%2015H15ZM9.3791%201.71226C9.62696%201.81382%209.82371%202.01057%209.92527%202.25843L14.0442%2012.3104C14.1489%2012.566%2014.0266%2012.858%2013.7711%2012.9627C13.7109%2012.9873%2013.6465%2013%2013.5815%2013H12.7488C12.5459%2013%2012.3631%2012.8774%2012.2862%2012.6896L11.5939%2011H6.4309L5.73858%2012.6896C5.66164%2012.8774%205.47884%2013%205.27591%2013H4.41838C4.14224%2013%203.91838%2012.7762%203.91838%2012.5C3.91838%2012.435%203.93106%2012.3706%203.95572%2012.3104L8.07461%202.25843C8.28402%201.74738%208.86806%201.50286%209.3791%201.71226ZM9.01238%204.70002L7.14798%209.25002H10.8768L9.01238%204.70002Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-font-color.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2020.9999C21.5523%2020.9999%2022%2021.4477%2022%2021.9999V22.9999C22%2023.5522%2021.5523%2023.9999%2021%2023.9999H3C2.44772%2023.9999%202%2023.5522%202%2022.9999V21.9999C2%2021.4477%202.44772%2020.9999%203%2020.9999H21ZM12.4775%202.13117C12.7844%202.25806%2013.0282%202.50185%2013.1551%202.80874L19.5635%2018.3089C19.669%2018.5641%2019.5477%2018.8565%2019.2925%2018.962C19.2319%2018.9871%2019.167%2018.9999%2019.1015%2018.9999H17.9577C17.7554%2018.9999%2017.573%2018.878%2017.4956%2018.691L16.3831%2015.9999H7.61681L6.50422%2018.691C6.42691%2018.878%206.24451%2018.9999%206.04216%2018.9999H4.89842C4.62227%2018.9999%204.39842%2018.7761%204.39842%2018.4999C4.39842%2018.4344%204.41131%2018.3695%204.43635%2018.3089L10.8448%202.80874C11.1085%202.17076%2011.8396%201.86741%2012.4775%202.13117ZM11.9999%205.3984L8.4437%2013.9999H15.5562L11.9999%205.3984Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2020.9999C21.5523%2020.9999%2022%2021.4477%2022%2021.9999V22.9999C22%2023.5522%2021.5523%2023.9999%2021%2023.9999H3C2.44772%2023.9999%202%2023.5522%202%2022.9999V21.9999C2%2021.4477%202.44772%2020.9999%203%2020.9999H21ZM12.4775%202.13117C12.7844%202.25806%2013.0282%202.50185%2013.1551%202.80874L19.5635%2018.3089C19.669%2018.5641%2019.5477%2018.8565%2019.2925%2018.962C19.2319%2018.9871%2019.167%2018.9999%2019.1015%2018.9999H17.9577C17.7554%2018.9999%2017.573%2018.878%2017.4956%2018.691L16.3831%2015.9999H7.61681L6.50422%2018.691C6.42691%2018.878%206.24451%2018.9999%206.04216%2018.9999H4.89842C4.62227%2018.9999%204.39842%2018.7761%204.39842%2018.4999C4.39842%2018.4344%204.41131%2018.3695%204.43635%2018.3089L10.8448%202.80874C11.1085%202.17076%2011.8396%201.86741%2012.4775%202.13117ZM11.9999%205.3984L8.4437%2013.9999H15.5562L11.9999%205.3984Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Format Off Icon */
.gravity-icon-format-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.49872%202.26128L15.7317%2014.4942C16.0734%2014.8359%2016.0734%2015.39%2015.7317%2015.7317C15.39%2016.0734%2014.8359%2016.0734%2014.4942%2015.7317L9.61517%2010.8526L7.96048%2015.2825C7.7479%2015.8516%207.11422%2016.1406%206.54511%2015.928C5.97601%2015.7155%205.68698%2015.0818%205.89956%2014.5127L7.90537%209.1428L2.26129%203.49872C1.91958%203.15701%201.91958%202.60299%202.26129%202.26128C2.603%201.91957%203.15701%201.91957%203.49872%202.26128ZM15%202C15.5523%202%2016%202.44772%2016%203C16%203.55228%2015.5523%204%2015%204H12.1748L10.9545%207.26704L9.24468%205.55724L9.82636%204H7.68744L5.68744%202H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.49872%202.26128L15.7317%2014.4942C16.0734%2014.8359%2016.0734%2015.39%2015.7317%2015.7317C15.39%2016.0734%2014.8359%2016.0734%2014.4942%2015.7317L9.61517%2010.8526L7.96048%2015.2825C7.7479%2015.8516%207.11422%2016.1406%206.54511%2015.928C5.97601%2015.7155%205.68698%2015.0818%205.89956%2014.5127L7.90537%209.1428L2.26129%203.49872C1.91958%203.15701%201.91958%202.60299%202.26129%202.26128C2.603%201.91957%203.15701%201.91957%203.49872%202.26128ZM15%202C15.5523%202%2016%202.44772%2016%203C16%203.55228%2015.5523%204%2015%204H12.1748L10.9545%207.26704L9.24468%205.55724L9.82636%204H7.68744L5.68744%202H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-format-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70445%202.29244L21.7076%2020.2956C22.0975%2020.6855%2022.0975%2021.3176%2021.7076%2021.7076C21.3176%2022.0975%2020.6855%2022.0975%2020.2956%2021.7076L12.5028%2013.9148L9.77414%2021.2199C9.54223%2021.8407%208.85095%2022.156%208.2301%2021.9241C7.60926%2021.6922%207.29396%2021.0009%207.52586%2020.3801L10.6376%2012.0496L2.29244%203.70445C1.90252%203.31453%201.90252%202.68235%202.29244%202.29244C2.68235%201.90252%203.31453%201.90252%203.70445%202.29244ZM21%202C21.5523%202%2022%202.44772%2022%203C22%203.55228%2021.5523%204%2021%204H16.1834C16.1709%204.0737%2016.1513%204.14728%2016.1241%204.2199L14.0328%209.81863L12.1676%207.95339L13.6443%204H8.21421L6.21421%202H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70445%202.29244L21.7076%2020.2956C22.0975%2020.6855%2022.0975%2021.3176%2021.7076%2021.7076C21.3176%2022.0975%2020.6855%2022.0975%2020.2956%2021.7076L12.5028%2013.9148L9.77414%2021.2199C9.54223%2021.8407%208.85095%2022.156%208.2301%2021.9241C7.60926%2021.6922%207.29396%2021.0009%207.52586%2020.3801L10.6376%2012.0496L2.29244%203.70445C1.90252%203.31453%201.90252%202.68235%202.29244%202.29244C2.68235%201.90252%203.31453%201.90252%203.70445%202.29244ZM21%202C21.5523%202%2022%202.44772%2022%203C22%203.55228%2021.5523%204%2021%204H16.1834C16.1709%204.0737%2016.1513%204.14728%2016.1241%204.2199L14.0328%209.81863L12.1676%207.95339L13.6443%204H8.21421L6.21421%202H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Forward Icon */
.gravity-icon-forward {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.02177%2011.0197L3.86611%2013.3289C3.26115%2013.665%202.49693%2013.4495%202.15917%2012.8474C2.05479%2012.6613%202%2012.4518%202%2012.2387V5.76101C2%205.07146%202.56167%204.51247%203.25454%204.51247C3.46863%204.51247%203.67917%204.567%203.8661%204.67087L8.02177%206.97995V5.24854C8.02177%204.55899%208.58344%204%209.2763%204C9.46547%204%209.65219%204.04257%209.82248%204.12454L17.1496%207.65102C17.8981%208.01126%2018.2115%208.90718%2017.8495%209.6521C17.7018%209.95614%2017.4551%2010.2016%2017.1496%2010.3486L9.82249%2013.8752C9.19874%2014.1754%208.44856%2013.9155%208.14691%2013.2948C8.06455%2013.1253%208.02177%2012.9394%208.02177%2012.7512V11.0197Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.02177%2011.0197L3.86611%2013.3289C3.26115%2013.665%202.49693%2013.4495%202.15917%2012.8474C2.05479%2012.6613%202%2012.4518%202%2012.2387V5.76101C2%205.07146%202.56167%204.51247%203.25454%204.51247C3.46863%204.51247%203.67917%204.567%203.8661%204.67087L8.02177%206.97995V5.24854C8.02177%204.55899%208.58344%204%209.2763%204C9.46547%204%209.65219%204.04257%209.82248%204.12454L17.1496%207.65102C17.8981%208.01126%2018.2115%208.90718%2017.8495%209.6521C17.7018%209.95614%2017.4551%2010.2016%2017.1496%2010.3486L9.82249%2013.8752C9.19874%2014.1754%208.44856%2013.9155%208.14691%2013.2948C8.06455%2013.1253%208.02177%2012.9394%208.02177%2012.7512V11.0197Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-forward.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0128%2015.1366L4.23664%2018.3654C3.51272%2018.7701%202.59715%2018.5125%202.19164%2017.7901C2.06598%2017.5663%202%2017.314%202%2017.0574L2%206.93556C2%206.10754%202.67265%205.4363%203.5024%205.4363C3.75951%205.4363%204.01231%205.50214%204.23662%205.62753L10.0128%208.85632V6.49585C10.0128%205.66783%2010.6854%204.99658%2011.5152%204.99658C11.7434%204.99658%2011.9686%205.04846%2012.1737%205.14828L23.0151%2010.4242C23.8852%2010.8476%2024.2466%2011.8948%2023.8223%2012.763C23.6508%2013.1139%2023.3667%2013.3974%2023.0151%2013.5685L12.1737%2018.8445C11.4279%2019.2075%2010.5285%2018.8984%2010.1648%2018.1541C10.0648%2017.9495%2010.0128%2017.7247%2010.0128%2017.497V15.1366Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0128%2015.1366L4.23664%2018.3654C3.51272%2018.7701%202.59715%2018.5125%202.19164%2017.7901C2.06598%2017.5663%202%2017.314%202%2017.0574L2%206.93556C2%206.10754%202.67265%205.4363%203.5024%205.4363C3.75951%205.4363%204.01231%205.50214%204.23662%205.62753L10.0128%208.85632V6.49585C10.0128%205.66783%2010.6854%204.99658%2011.5152%204.99658C11.7434%204.99658%2011.9686%205.04846%2012.1737%205.14828L23.0151%2010.4242C23.8852%2010.8476%2024.2466%2011.8948%2023.8223%2012.763C23.6508%2013.1139%2023.3667%2013.3974%2023.0151%2013.5685L12.1737%2018.8445C11.4279%2019.2075%2010.5285%2018.8984%2010.1648%2018.1541C10.0648%2017.9495%2010.0128%2017.7247%2010.0128%2017.497V15.1366Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Forward 10 Icon */
.gravity-icon-forward-10 {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.03146%200C10.819%200%2012.5252%200.520556%2013.9723%201.4647L15.3172%200.119821C15.4734%20-0.0363883%2015.7266%20-0.0363883%2015.8828%200.119821C15.9579%200.194836%2016%200.296578%2016%200.402664V4.59167C16%204.81221%2015.8215%204.99115%2015.6009%204.99167L11.402%205.00161C11.1811%205.00213%2011.0016%204.82347%2011.0011%204.60256C11.0008%204.49614%2011.043%204.39401%2011.1182%204.31877L12.6829%202.75406C11.592%202.12042%2010.3398%201.77465%209.03146%201.77465C5.02286%201.77465%201.77464%205.01032%201.77464%209C1.77464%2012.9897%205.02286%2016.2254%209.03146%2016.2254C12.7022%2016.2254%2015.7824%2013.4966%2016.2321%209.90387C16.293%209.41761%2016.7365%209.07276%2017.2228%209.13363C17.7091%209.1945%2018.0539%209.63804%2017.993%2010.1243C17.4323%2014.6036%2013.5985%2018%209.03146%2018C4.04429%2018%200%2013.9713%200%209C0%204.02867%204.04429%200%209.03146%200ZM11.0762%205.74902C11.8998%205.74902%2012.5224%206.06152%2012.9439%206.68652C13.3655%207.31153%2013.5762%208.22623%2013.5762%209.43066C13.5762%2010.6774%2013.372%2011.6003%2012.9634%2012.1992C12.5549%2012.7982%2011.9258%2013.0977%2011.0762%2013.0977C10.2527%2013.0977%209.63174%2012.7884%209.21344%2012.1699C8.79515%2011.5514%208.586%2010.6384%208.586%209.43066C8.586%208.17089%208.78945%207.24235%209.19635%206.64502C9.60326%206.04769%2010.2299%205.74902%2011.0762%205.74902ZM7.43086%205.86133V13H5.92207V8.86914L5.93672%208.19043L5.96113%207.44824L5.60638%207.79343C5.55974%207.83687%205.51935%207.87328%205.48521%207.90264L4.61836%208.60059L3.89082%207.69238L6.19062%205.86133H7.43086ZM11.0762%206.96973C10.7214%206.96973%2010.4675%207.16097%2010.3145%207.54346C10.1615%207.92595%2010.085%208.55501%2010.085%209.43066C10.085%2010.3063%2010.1607%2010.9338%2010.3121%2011.313C10.4634%2011.6922%2010.7182%2011.8818%2011.0762%2011.8818C11.4278%2011.8818%2011.6817%2011.6898%2011.838%2011.3057C11.9942%2010.9215%2012.0723%2010.2966%2012.0723%209.43066C12.0723%208.55501%2011.9934%207.92595%2011.8355%207.54346C11.6776%207.16097%2011.4245%206.96973%2011.0762%206.96973Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.03146%200C10.819%200%2012.5252%200.520556%2013.9723%201.4647L15.3172%200.119821C15.4734%20-0.0363883%2015.7266%20-0.0363883%2015.8828%200.119821C15.9579%200.194836%2016%200.296578%2016%200.402664V4.59167C16%204.81221%2015.8215%204.99115%2015.6009%204.99167L11.402%205.00161C11.1811%205.00213%2011.0016%204.82347%2011.0011%204.60256C11.0008%204.49614%2011.043%204.39401%2011.1182%204.31877L12.6829%202.75406C11.592%202.12042%2010.3398%201.77465%209.03146%201.77465C5.02286%201.77465%201.77464%205.01032%201.77464%209C1.77464%2012.9897%205.02286%2016.2254%209.03146%2016.2254C12.7022%2016.2254%2015.7824%2013.4966%2016.2321%209.90387C16.293%209.41761%2016.7365%209.07276%2017.2228%209.13363C17.7091%209.1945%2018.0539%209.63804%2017.993%2010.1243C17.4323%2014.6036%2013.5985%2018%209.03146%2018C4.04429%2018%200%2013.9713%200%209C0%204.02867%204.04429%200%209.03146%200ZM11.0762%205.74902C11.8998%205.74902%2012.5224%206.06152%2012.9439%206.68652C13.3655%207.31153%2013.5762%208.22623%2013.5762%209.43066C13.5762%2010.6774%2013.372%2011.6003%2012.9634%2012.1992C12.5549%2012.7982%2011.9258%2013.0977%2011.0762%2013.0977C10.2527%2013.0977%209.63174%2012.7884%209.21344%2012.1699C8.79515%2011.5514%208.586%2010.6384%208.586%209.43066C8.586%208.17089%208.78945%207.24235%209.19635%206.64502C9.60326%206.04769%2010.2299%205.74902%2011.0762%205.74902ZM7.43086%205.86133V13H5.92207V8.86914L5.93672%208.19043L5.96113%207.44824L5.60638%207.79343C5.55974%207.83687%205.51935%207.87328%205.48521%207.90264L4.61836%208.60059L3.89082%207.69238L6.19062%205.86133H7.43086ZM11.0762%206.96973C10.7214%206.96973%2010.4675%207.16097%2010.3145%207.54346C10.1615%207.92595%2010.085%208.55501%2010.085%209.43066C10.085%2010.3063%2010.1607%2010.9338%2010.3121%2011.313C10.4634%2011.6922%2010.7182%2011.8818%2011.0762%2011.8818C11.4278%2011.8818%2011.6817%2011.6898%2011.838%2011.3057C11.9942%2010.9215%2012.0723%2010.2966%2012.0723%209.43066C12.0723%208.55501%2011.9934%207.92595%2011.8355%207.54346C11.6776%207.16097%2011.4245%206.96973%2011.0762%206.96973Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-forward-10.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0224%200C14.3374%200%2016.5496%200.656809%2018.4415%201.85139L20.1464%200.146447C20.3417%20-0.0488155%2020.6583%20-0.0488155%2020.8536%200.146447C20.9473%200.240215%2021%200.367392%2021%200.5V5.48971C21%205.76537%2020.7769%205.98903%2020.5012%205.9897L15.4994%206.00184C15.2232%206.00251%2014.9988%205.77919%2014.9982%205.50305C14.9978%205.37002%2015.0505%205.24235%2015.1446%205.14829L16.9835%203.30941C15.4963%202.4618%2013.7965%202%2012.0224%202C6.48926%202%202.00374%206.47715%202.00374%2012C2.00374%2017.5228%206.48926%2022%2012.0224%2022C17.2164%2022%2021.5373%2018.0377%2022.0002%2012.9102C22.0499%2012.3602%2022.5369%2011.9545%2023.088%2012.004C23.6391%2012.0536%2024.0456%2012.5397%2023.9959%2013.0898C23.4401%2019.2458%2018.2556%2024%2012.0224%2024C5.38263%2024%200%2018.6274%200%2012C0%205.37258%205.38263%200%2012.0224%200ZM14.6091%207.57373C15.6798%207.57373%2016.4891%207.97998%2017.0371%208.79248C17.5851%209.60498%2017.8591%2010.7941%2017.8591%2012.3599C17.8591%2013.9806%2017.5936%2015.1803%2017.0625%2015.959C16.5314%2016.7376%2015.7136%2017.127%2014.6091%2017.127C13.5385%2017.127%2012.7313%2016.7249%2012.1875%2015.9209C11.6437%2015.1169%2011.3718%2013.9299%2011.3718%2012.3599C11.3718%2010.7222%2011.6363%209.51506%2012.1653%208.73853C12.6942%207.96199%2013.5088%207.57373%2014.6091%207.57373ZM9.87012%207.71973V17H7.90869V11.6299L7.92773%2010.7476L7.95947%209.78271L7.59532%2010.1399C7.45783%2010.2711%207.35282%2010.3658%207.28027%2010.4238L6.21387%2011.2808L5.26807%2010.1001L8.25781%207.71973H9.87012ZM14.6091%209.16064C14.1478%209.16064%2013.8178%209.40926%2013.6189%209.90649C13.42%2010.4037%2013.3205%2011.2215%2013.3205%2012.3599C13.3205%2013.4982%2013.4189%2014.3139%2013.6157%2014.8069C13.8125%2015.2999%2014.1436%2015.5464%2014.6091%2015.5464C15.0661%2015.5464%2015.3962%2015.2967%2015.5993%2014.7974C15.8025%2014.298%2015.904%2013.4855%2015.904%2012.3599C15.904%2011.2215%2015.8014%2010.4037%2015.5962%209.90649C15.3909%209.40926%2015.0619%209.16064%2014.6091%209.16064Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0224%200C14.3374%200%2016.5496%200.656809%2018.4415%201.85139L20.1464%200.146447C20.3417%20-0.0488155%2020.6583%20-0.0488155%2020.8536%200.146447C20.9473%200.240215%2021%200.367392%2021%200.5V5.48971C21%205.76537%2020.7769%205.98903%2020.5012%205.9897L15.4994%206.00184C15.2232%206.00251%2014.9988%205.77919%2014.9982%205.50305C14.9978%205.37002%2015.0505%205.24235%2015.1446%205.14829L16.9835%203.30941C15.4963%202.4618%2013.7965%202%2012.0224%202C6.48926%202%202.00374%206.47715%202.00374%2012C2.00374%2017.5228%206.48926%2022%2012.0224%2022C17.2164%2022%2021.5373%2018.0377%2022.0002%2012.9102C22.0499%2012.3602%2022.5369%2011.9545%2023.088%2012.004C23.6391%2012.0536%2024.0456%2012.5397%2023.9959%2013.0898C23.4401%2019.2458%2018.2556%2024%2012.0224%2024C5.38263%2024%200%2018.6274%200%2012C0%205.37258%205.38263%200%2012.0224%200ZM14.6091%207.57373C15.6798%207.57373%2016.4891%207.97998%2017.0371%208.79248C17.5851%209.60498%2017.8591%2010.7941%2017.8591%2012.3599C17.8591%2013.9806%2017.5936%2015.1803%2017.0625%2015.959C16.5314%2016.7376%2015.7136%2017.127%2014.6091%2017.127C13.5385%2017.127%2012.7313%2016.7249%2012.1875%2015.9209C11.6437%2015.1169%2011.3718%2013.9299%2011.3718%2012.3599C11.3718%2010.7222%2011.6363%209.51506%2012.1653%208.73853C12.6942%207.96199%2013.5088%207.57373%2014.6091%207.57373ZM9.87012%207.71973V17H7.90869V11.6299L7.92773%2010.7476L7.95947%209.78271L7.59532%2010.1399C7.45783%2010.2711%207.35282%2010.3658%207.28027%2010.4238L6.21387%2011.2808L5.26807%2010.1001L8.25781%207.71973H9.87012ZM14.6091%209.16064C14.1478%209.16064%2013.8178%209.40926%2013.6189%209.90649C13.42%2010.4037%2013.3205%2011.2215%2013.3205%2012.3599C13.3205%2013.4982%2013.4189%2014.3139%2013.6157%2014.8069C13.8125%2015.2999%2014.1436%2015.5464%2014.6091%2015.5464C15.0661%2015.5464%2015.3962%2015.2967%2015.5993%2014.7974C15.8025%2014.298%2015.904%2013.4855%2015.904%2012.3599C15.904%2011.2215%2015.8014%2010.4037%2015.5962%209.90649C15.3909%209.40926%2015.0619%209.16064%2014.6091%209.16064Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Fullscreen Off Icon */
.gravity-icon-fullscreen-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%2011C6.10457%2011%207%2011.8954%207%2013V16C7%2016.5523%206.55228%2017%206%2017C5.44772%2017%205%2016.5523%205%2016V13H2C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011H5ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012C17%2012.5523%2016.5523%2013%2016%2013H13V16C13%2016.5523%2012.5523%2017%2012%2017C11.4477%2017%2011%2016.5523%2011%2016V13C11%2011.8954%2011.8954%2011%2013%2011H16ZM6%201C6.55228%201%207%201.44772%207%202V5C7%206.10457%206.10457%207%205%207H2C1.44772%207%201%206.55228%201%206C1%205.44772%201.44772%205%202%205H5V2C5%201.44772%205.44772%201%206%201ZM12%201C12.5523%201%2013%201.44772%2013%202V5H16C16.5523%205%2017%205.44772%2017%206C17%206.55228%2016.5523%207%2016%207H13C11.8954%207%2011%206.10457%2011%205V2C11%201.44772%2011.4477%201%2012%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%2011C6.10457%2011%207%2011.8954%207%2013V16C7%2016.5523%206.55228%2017%206%2017C5.44772%2017%205%2016.5523%205%2016V13H2C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011H5ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012C17%2012.5523%2016.5523%2013%2016%2013H13V16C13%2016.5523%2012.5523%2017%2012%2017C11.4477%2017%2011%2016.5523%2011%2016V13C11%2011.8954%2011.8954%2011%2013%2011H16ZM6%201C6.55228%201%207%201.44772%207%202V5C7%206.10457%206.10457%207%205%207H2C1.44772%207%201%206.55228%201%206C1%205.44772%201.44772%205%202%205H5V2C5%201.44772%205.44772%201%206%201ZM12%201C12.5523%201%2013%201.44772%2013%202V5H16C16.5523%205%2017%205.44772%2017%206C17%206.55228%2016.5523%207%2016%207H13C11.8954%207%2011%206.10457%2011%205V2C11%201.44772%2011.4477%201%2012%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-fullscreen-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2014C22.5523%2014%2023%2014.4477%2023%2015C23%2015.5523%2022.5523%2016%2022%2016H17C16.4477%2016%2016%2016.4477%2016%2017V22C16%2022.5523%2015.5523%2023%2015%2023C14.4477%2023%2014%2022.5523%2014%2022V17C14%2015.3431%2015.3431%2014%2017%2014H22ZM7%2014C8.65685%2014%2010%2015.3431%2010%2017V22C10%2022.5523%209.55229%2023%209%2023C8.44772%2023%208%2022.5523%208%2022V17C8%2016.4477%207.55228%2016%207%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H7ZM15%201C15.5523%201%2016%201.44772%2016%202V7C16%207.55228%2016.4477%208%2017%208H22C22.5523%208%2023%208.44772%2023%209C23%209.55229%2022.5523%2010%2022%2010H17C15.3431%2010%2014%208.65685%2014%207V2C14%201.44772%2014.4477%201%2015%201ZM9%201C9.55229%201%2010%201.44772%2010%202V7C10%208.65685%208.65685%2010%207%2010H2C1.44772%2010%201%209.55229%201%209C1%208.44772%201.44772%208%202%208H7C7.55228%208%208%207.55228%208%207V2C8%201.44772%208.44772%201%209%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2014C22.5523%2014%2023%2014.4477%2023%2015C23%2015.5523%2022.5523%2016%2022%2016H17C16.4477%2016%2016%2016.4477%2016%2017V22C16%2022.5523%2015.5523%2023%2015%2023C14.4477%2023%2014%2022.5523%2014%2022V17C14%2015.3431%2015.3431%2014%2017%2014H22ZM7%2014C8.65685%2014%2010%2015.3431%2010%2017V22C10%2022.5523%209.55229%2023%209%2023C8.44772%2023%208%2022.5523%208%2022V17C8%2016.4477%207.55228%2016%207%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H7ZM15%201C15.5523%201%2016%201.44772%2016%202V7C16%207.55228%2016.4477%208%2017%208H22C22.5523%208%2023%208.44772%2023%209C23%209.55229%2022.5523%2010%2022%2010H17C15.3431%2010%2014%208.65685%2014%207V2C14%201.44772%2014.4477%201%2015%201ZM9%201C9.55229%201%2010%201.44772%2010%202V7C10%208.65685%208.65685%2010%207%2010H2C1.44772%2010%201%209.55229%201%209C1%208.44772%201.44772%208%202%208H7C7.55228%208%208%207.55228%208%207V2C8%201.44772%208.44772%201%209%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Fullscreen On Icon */
.gravity-icon-fullscreen-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2011C2.55228%2011%203%2011.4477%203%2012V15H6C6.55228%2015%207%2015.4477%207%2016C7%2016.5523%206.55228%2017%206%2017H3C1.89543%2017%201%2016.1046%201%2015V12C1%2011.4477%201.44772%2011%202%2011ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012V15C17%2016.1046%2016.1046%2017%2015%2017H12C11.4477%2017%2011%2016.5523%2011%2016C11%2015.4477%2011.4477%2015%2012%2015H15V12C15%2011.4477%2015.4477%2011%2016%2011ZM6%201C6.55228%201%207%201.44772%207%202C7%202.55228%206.55228%203%206%203H3V6C3%206.55228%202.55228%207%202%207C1.44772%207%201%206.55228%201%206V3C1%201.89543%201.89543%201%203%201H6ZM15%201C16.1046%201%2017%201.89543%2017%203V6C17%206.55228%2016.5523%207%2016%207C15.4477%207%2015%206.55228%2015%206V3H12C11.4477%203%2011%202.55228%2011%202C11%201.44772%2011.4477%201%2012%201H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2011C2.55228%2011%203%2011.4477%203%2012V15H6C6.55228%2015%207%2015.4477%207%2016C7%2016.5523%206.55228%2017%206%2017H3C1.89543%2017%201%2016.1046%201%2015V12C1%2011.4477%201.44772%2011%202%2011ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012V15C17%2016.1046%2016.1046%2017%2015%2017H12C11.4477%2017%2011%2016.5523%2011%2016C11%2015.4477%2011.4477%2015%2012%2015H15V12C15%2011.4477%2015.4477%2011%2016%2011ZM6%201C6.55228%201%207%201.44772%207%202C7%202.55228%206.55228%203%206%203H3V6C3%206.55228%202.55228%207%202%207C1.44772%207%201%206.55228%201%206V3C1%201.89543%201.89543%201%203%201H6ZM15%201C16.1046%201%2017%201.89543%2017%203V6C17%206.55228%2016.5523%207%2016%207C15.4477%207%2015%206.55228%2015%206V3H12C11.4477%203%2011%202.55228%2011%202C11%201.44772%2011.4477%201%2012%201H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-fullscreen-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2014C2.55228%2014%203%2014.4477%203%2015V20C3%2020.5523%203.44772%2021%204%2021H9C9.55229%2021%2010%2021.4477%2010%2022C10%2022.5523%209.55229%2023%209%2023H4C2.34315%2023%201%2021.6569%201%2020V15C1%2014.4477%201.44772%2014%202%2014ZM22%2014C22.5523%2014%2023%2014.4477%2023%2015V20C23%2021.6569%2021.6569%2023%2020%2023H15C14.4477%2023%2014%2022.5523%2014%2022C14%2021.4477%2014.4477%2021%2015%2021H20C20.5523%2021%2021%2020.5523%2021%2020V15C21%2014.4477%2021.4477%2014%2022%2014ZM9%201C9.55229%201%2010%201.44772%2010%202C10%202.55228%209.55229%203%209%203H4C3.44772%203%203%203.44772%203%204V9C3%209.55229%202.55228%2010%202%2010C1.44772%2010%201%209.55229%201%209V4C1%202.34315%202.34315%201%204%201H9ZM20%201C21.6569%201%2023%202.34315%2023%204V9C23%209.55229%2022.5523%2010%2022%2010C21.4477%2010%2021%209.55229%2021%209V4C21%203.44772%2020.5523%203%2020%203H15C14.4477%203%2014%202.55228%2014%202C14%201.44772%2014.4477%201%2015%201H20Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2014C2.55228%2014%203%2014.4477%203%2015V20C3%2020.5523%203.44772%2021%204%2021H9C9.55229%2021%2010%2021.4477%2010%2022C10%2022.5523%209.55229%2023%209%2023H4C2.34315%2023%201%2021.6569%201%2020V15C1%2014.4477%201.44772%2014%202%2014ZM22%2014C22.5523%2014%2023%2014.4477%2023%2015V20C23%2021.6569%2021.6569%2023%2020%2023H15C14.4477%2023%2014%2022.5523%2014%2022C14%2021.4477%2014.4477%2021%2015%2021H20C20.5523%2021%2021%2020.5523%2021%2020V15C21%2014.4477%2021.4477%2014%2022%2014ZM9%201C9.55229%201%2010%201.44772%2010%202C10%202.55228%209.55229%203%209%203H4C3.44772%203%203%203.44772%203%204V9C3%209.55229%202.55228%2010%202%2010C1.44772%2010%201%209.55229%201%209V4C1%202.34315%202.34315%201%204%201H9ZM20%201C21.6569%201%2023%202.34315%2023%204V9C23%209.55229%2022.5523%2010%2022%2010C21.4477%2010%2021%209.55229%2021%209V4C21%203.44772%2020.5523%203%2020%203H15C14.4477%203%2014%202.55228%2014%202C14%201.44772%2014.4477%201%2015%201H20Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Globe Icon */
.gravity-icon-globe {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%2012.25C8.40831%2012.25%207.83674%2012.2789%207.29185%2012.3321C7.45542%2013.217%207.68322%2014.0177%207.96373%2014.6909C8.42068%2015.7875%208.87625%2016.25%209%2016.25C9.12375%2016.25%209.57932%2015.7875%2010.0363%2014.6909C10.3168%2014.0177%2010.5446%2013.217%2010.7082%2012.3309C10.1633%2012.2789%209.59169%2012.25%209%2012.25ZM12.4402%2012.5875C12.2127%2013.8421%2011.8694%2014.9482%2011.4426%2015.8283C12.6599%2015.3928%2013.7267%2014.641%2014.5442%2013.6719L14.7433%2013.4252L14.8272%2013.3143C14.1984%2013.0363%2013.3857%2012.7788%2012.4402%2012.5875ZM5.56027%2012.5867C4.61429%2012.7788%203.80163%2013.0364%203.17321%2013.3149C4.01994%2014.4564%205.19412%2015.3404%206.55672%2015.8277C6.13028%2014.9479%205.78719%2013.842%205.56027%2012.5867ZM2.31808%206.17972L2.23246%206.394C1.92083%207.20274%201.75%208.08142%201.75%209C1.75%2010.0006%201.95268%2010.9538%202.31808%2011.8203C3.15282%2011.4094%204.17673%2011.0759%205.32914%2010.8481C5.27727%2010.2516%205.25%209.63344%205.25%209C5.25%208.3668%205.27725%207.74888%205.32877%207.15317C4.32073%206.95276%203.4108%206.67236%202.63986%206.33012L2.31808%206.17972ZM15.6818%206.17976C14.8471%206.59062%2013.8233%206.92412%2012.6709%207.15258C12.7228%207.74885%2012.75%208.36679%2012.75%209C12.75%209.63344%2012.7227%2010.2516%2012.6713%2010.8469C13.8233%2011.0759%2014.8471%2011.4094%2015.6808%2011.8208C16.0473%2010.9538%2016.25%2010.0006%2016.25%209C16.25%207.99944%2016.0473%207.04623%2015.6818%206.17976ZM10.936%207.40608L10.6555%207.43248C10.1189%207.47682%209.56552%207.5%209%207.5C8.33509%207.5%207.68703%207.46795%207.06403%207.40608C7.02192%207.92334%207%208.45681%207%209C7%209.54319%207.02192%2010.0767%207.06319%2010.5929C7.68703%2010.532%208.33509%2010.5%209%2010.5C9.66473%2010.5%2010.3126%2010.532%2010.936%2010.5939C10.9781%2010.0767%2011%209.54319%2011%209C11%208.63787%2010.9903%208.28007%2010.9713%207.9285L10.936%207.40608ZM9%201.75C8.87625%201.75%208.42068%202.21246%207.96373%203.30912C7.68322%203.98234%207.45542%204.78302%207.29177%205.66906C7.83674%205.7211%208.40831%205.75%209%205.75C9.59169%205.75%2010.1633%205.7211%2010.7081%205.66794C10.5446%204.78302%2010.3168%203.98234%2010.0363%203.30912C9.57932%202.21246%209.12375%201.75%209%201.75ZM11.4426%202.17175L11.6041%202.52394C11.9561%203.33945%2012.2418%204.31875%2012.4397%205.41333C13.3857%205.22121%2014.1984%204.96365%2014.8263%204.68458C14.04%203.62472%2012.9714%202.78687%2011.7317%202.28224L11.4426%202.17175ZM6.5569%202.17191L6.25165%202.28906C5.01897%202.79441%203.95639%203.62951%203.17375%204.68614C3.80248%204.96392%204.61478%205.22131%205.55987%205.4119C5.76207%204.29682%206.05563%203.29917%206.41788%202.47341L6.5569%202.17191Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%2012.25C8.40831%2012.25%207.83674%2012.2789%207.29185%2012.3321C7.45542%2013.217%207.68322%2014.0177%207.96373%2014.6909C8.42068%2015.7875%208.87625%2016.25%209%2016.25C9.12375%2016.25%209.57932%2015.7875%2010.0363%2014.6909C10.3168%2014.0177%2010.5446%2013.217%2010.7082%2012.3309C10.1633%2012.2789%209.59169%2012.25%209%2012.25ZM12.4402%2012.5875C12.2127%2013.8421%2011.8694%2014.9482%2011.4426%2015.8283C12.6599%2015.3928%2013.7267%2014.641%2014.5442%2013.6719L14.7433%2013.4252L14.8272%2013.3143C14.1984%2013.0363%2013.3857%2012.7788%2012.4402%2012.5875ZM5.56027%2012.5867C4.61429%2012.7788%203.80163%2013.0364%203.17321%2013.3149C4.01994%2014.4564%205.19412%2015.3404%206.55672%2015.8277C6.13028%2014.9479%205.78719%2013.842%205.56027%2012.5867ZM2.31808%206.17972L2.23246%206.394C1.92083%207.20274%201.75%208.08142%201.75%209C1.75%2010.0006%201.95268%2010.9538%202.31808%2011.8203C3.15282%2011.4094%204.17673%2011.0759%205.32914%2010.8481C5.27727%2010.2516%205.25%209.63344%205.25%209C5.25%208.3668%205.27725%207.74888%205.32877%207.15317C4.32073%206.95276%203.4108%206.67236%202.63986%206.33012L2.31808%206.17972ZM15.6818%206.17976C14.8471%206.59062%2013.8233%206.92412%2012.6709%207.15258C12.7228%207.74885%2012.75%208.36679%2012.75%209C12.75%209.63344%2012.7227%2010.2516%2012.6713%2010.8469C13.8233%2011.0759%2014.8471%2011.4094%2015.6808%2011.8208C16.0473%2010.9538%2016.25%2010.0006%2016.25%209C16.25%207.99944%2016.0473%207.04623%2015.6818%206.17976ZM10.936%207.40608L10.6555%207.43248C10.1189%207.47682%209.56552%207.5%209%207.5C8.33509%207.5%207.68703%207.46795%207.06403%207.40608C7.02192%207.92334%207%208.45681%207%209C7%209.54319%207.02192%2010.0767%207.06319%2010.5929C7.68703%2010.532%208.33509%2010.5%209%2010.5C9.66473%2010.5%2010.3126%2010.532%2010.936%2010.5939C10.9781%2010.0767%2011%209.54319%2011%209C11%208.63787%2010.9903%208.28007%2010.9713%207.9285L10.936%207.40608ZM9%201.75C8.87625%201.75%208.42068%202.21246%207.96373%203.30912C7.68322%203.98234%207.45542%204.78302%207.29177%205.66906C7.83674%205.7211%208.40831%205.75%209%205.75C9.59169%205.75%2010.1633%205.7211%2010.7081%205.66794C10.5446%204.78302%2010.3168%203.98234%2010.0363%203.30912C9.57932%202.21246%209.12375%201.75%209%201.75ZM11.4426%202.17175L11.6041%202.52394C11.9561%203.33945%2012.2418%204.31875%2012.4397%205.41333C13.3857%205.22121%2014.1984%204.96365%2014.8263%204.68458C14.04%203.62472%2012.9714%202.78687%2011.7317%202.28224L11.4426%202.17175ZM6.5569%202.17191L6.25165%202.28906C5.01897%202.79441%203.95639%203.62951%203.17375%204.68614C3.80248%204.96392%204.61478%205.22131%205.55987%205.4119C5.76207%204.29682%206.05563%203.29917%206.41788%202.47341L6.5569%202.17191Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-globe.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%2016C11.0735%2016%2010.1811%2016.0494%209.33577%2016.1384C9.91738%2019.6319%2011.133%2022%2012%2022C12.867%2022%2014.0826%2019.6319%2014.6635%2016.1371C13.819%2016.0494%2012.9265%2016%2012%2016ZM7.3503%2016.4269C5.85567%2016.7109%204.59333%2017.1094%203.672%2017.5377C4.91781%2019.4076%206.77658%2020.8341%208.96134%2021.5305C8.24894%2020.2202%207.68771%2018.4602%207.3503%2016.4269ZM16.6498%2016.4269L16.5829%2016.8061C16.2414%2018.6789%2015.7065%2020.302%2015.0389%2021.5299C17.2235%2020.8339%2019.0822%2019.4075%2020.3293%2017.5375C19.4906%2017.1484%2018.3711%2016.7836%2017.0516%2016.5071L16.6498%2016.4269ZM2.75254%208.18727C2.26756%209.36227%202%2010.6499%202%2012C2%2013.3504%202.26767%2014.6383%202.75367%2015.8128C3.92277%2015.2246%205.40893%2014.7498%207.103%2014.435C7.03547%2013.6487%207%2012.8343%207%2012C7%2011.4175%207.01729%2010.8447%207.05072%2010.2843L7.08947%209.72827L7.103%209.56673C5.40845%209.25074%203.92194%208.77579%202.75254%208.18727ZM21.2474%208.18737C20.0782%208.77573%2018.5918%209.25066%2016.897%209.56546C16.9645%2010.3516%2017%2011.1659%2017%2012C17%2012.8343%2016.9645%2013.6487%2016.8974%2014.434C18.5918%2014.75%2020.0782%2015.2249%2021.2476%2015.8125C21.7325%2014.6376%2022%2013.35%2022%2012C22%2010.65%2021.7325%209.36243%2021.2474%208.18737ZM14.911%209.8513L14.6047%209.88253C13.7661%209.95987%2012.8945%2010.0006%2012%2010.0006C10.9958%2010.0006%2010.0204%209.94925%209.08898%209.8513C9.03153%2010.5411%209%2011.2597%209%2012C9%2012.7407%209.03156%2013.4596%209.0882%2014.1482C10.0204%2014.0514%2010.9958%2014%2012%2014C13.0039%2014%2013.979%2014.0514%2014.9109%2014.1497C14.9684%2013.4596%2015%2012.7407%2015%2012C15%2011.4448%2014.9823%2010.9017%2014.9492%2010.3739L14.911%209.8513ZM12%202C11.133%202%209.91719%204.36843%209.33653%207.8635C10.1811%207.95127%2011.0735%208.00065%2012%208.00065C12.9265%208.00065%2013.819%207.95126%2014.6644%207.86242C14.0828%204.36843%2012.867%202%2012%202ZM8.96068%202.47072L8.78877%202.52675C6.67839%203.24189%204.88423%204.64243%203.67082%206.4632C4.59333%206.89122%205.85567%207.28977%207.35117%207.57349C7.66345%205.68604%208.16951%204.03384%208.81042%202.75832L8.96068%202.47072ZM15.0389%202.47011L15.2201%202.81947C15.8463%204.08606%2016.3412%205.71503%2016.6498%207.57377C18.1444%207.28974%2019.4068%206.89118%2020.3287%206.46337C19.1485%204.69152%2017.4179%203.31769%2015.3812%202.58606L15.0389%202.47011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%2016C11.0735%2016%2010.1811%2016.0494%209.33577%2016.1384C9.91738%2019.6319%2011.133%2022%2012%2022C12.867%2022%2014.0826%2019.6319%2014.6635%2016.1371C13.819%2016.0494%2012.9265%2016%2012%2016ZM7.3503%2016.4269C5.85567%2016.7109%204.59333%2017.1094%203.672%2017.5377C4.91781%2019.4076%206.77658%2020.8341%208.96134%2021.5305C8.24894%2020.2202%207.68771%2018.4602%207.3503%2016.4269ZM16.6498%2016.4269L16.5829%2016.8061C16.2414%2018.6789%2015.7065%2020.302%2015.0389%2021.5299C17.2235%2020.8339%2019.0822%2019.4075%2020.3293%2017.5375C19.4906%2017.1484%2018.3711%2016.7836%2017.0516%2016.5071L16.6498%2016.4269ZM2.75254%208.18727C2.26756%209.36227%202%2010.6499%202%2012C2%2013.3504%202.26767%2014.6383%202.75367%2015.8128C3.92277%2015.2246%205.40893%2014.7498%207.103%2014.435C7.03547%2013.6487%207%2012.8343%207%2012C7%2011.4175%207.01729%2010.8447%207.05072%2010.2843L7.08947%209.72827L7.103%209.56673C5.40845%209.25074%203.92194%208.77579%202.75254%208.18727ZM21.2474%208.18737C20.0782%208.77573%2018.5918%209.25066%2016.897%209.56546C16.9645%2010.3516%2017%2011.1659%2017%2012C17%2012.8343%2016.9645%2013.6487%2016.8974%2014.434C18.5918%2014.75%2020.0782%2015.2249%2021.2476%2015.8125C21.7325%2014.6376%2022%2013.35%2022%2012C22%2010.65%2021.7325%209.36243%2021.2474%208.18737ZM14.911%209.8513L14.6047%209.88253C13.7661%209.95987%2012.8945%2010.0006%2012%2010.0006C10.9958%2010.0006%2010.0204%209.94925%209.08898%209.8513C9.03153%2010.5411%209%2011.2597%209%2012C9%2012.7407%209.03156%2013.4596%209.0882%2014.1482C10.0204%2014.0514%2010.9958%2014%2012%2014C13.0039%2014%2013.979%2014.0514%2014.9109%2014.1497C14.9684%2013.4596%2015%2012.7407%2015%2012C15%2011.4448%2014.9823%2010.9017%2014.9492%2010.3739L14.911%209.8513ZM12%202C11.133%202%209.91719%204.36843%209.33653%207.8635C10.1811%207.95127%2011.0735%208.00065%2012%208.00065C12.9265%208.00065%2013.819%207.95126%2014.6644%207.86242C14.0828%204.36843%2012.867%202%2012%202ZM8.96068%202.47072L8.78877%202.52675C6.67839%203.24189%204.88423%204.64243%203.67082%206.4632C4.59333%206.89122%205.85567%207.28977%207.35117%207.57349C7.66345%205.68604%208.16951%204.03384%208.81042%202.75832L8.96068%202.47072ZM15.0389%202.47011L15.2201%202.81947C15.8463%204.08606%2016.3412%205.71503%2016.6498%207.57377C18.1444%207.28974%2019.4068%206.89118%2020.3287%206.46337C19.1485%204.69152%2017.4179%203.31769%2015.3812%202.58606L15.0389%202.47011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Grid View Icon */
.gravity-icon-grid-view {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.5%2010C7.77614%2010%208%2010.2239%208%2010.5V15.5C8%2015.7761%207.77614%2016%207.5%2016H2.5C2.22386%2016%202%2015.7761%202%2015.5V10.5C2%2010.2239%202.22386%2010%202.5%2010H7.5ZM15.5%2010C15.7761%2010%2016%2010.2239%2016%2010.5V15.5C16%2015.7761%2015.7761%2016%2015.5%2016H10.5C10.2239%2016%2010%2015.7761%2010%2015.5V10.5C10%2010.2239%2010.2239%2010%2010.5%2010H15.5ZM6.25%2011.75H3.75V14.25H6.25V11.75ZM14.25%2011.75H11.75V14.25H14.25V11.75ZM7.5%202C7.77614%202%208%202.22386%208%202.5V7.5C8%207.77614%207.77614%208%207.5%208H2.5C2.22386%208%202%207.77614%202%207.5V2.5C2%202.22386%202.22386%202%202.5%202H7.5ZM15.5%202C15.7761%202%2016%202.22386%2016%202.5V7.5C16%207.77614%2015.7761%208%2015.5%208H10.5C10.2239%208%2010%207.77614%2010%207.5V2.5C10%202.22386%2010.2239%202%2010.5%202H15.5ZM6.25%203.75H3.75V6.25H6.25V3.75ZM14.25%203.75H11.75V6.25H14.25V3.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.5%2010C7.77614%2010%208%2010.2239%208%2010.5V15.5C8%2015.7761%207.77614%2016%207.5%2016H2.5C2.22386%2016%202%2015.7761%202%2015.5V10.5C2%2010.2239%202.22386%2010%202.5%2010H7.5ZM15.5%2010C15.7761%2010%2016%2010.2239%2016%2010.5V15.5C16%2015.7761%2015.7761%2016%2015.5%2016H10.5C10.2239%2016%2010%2015.7761%2010%2015.5V10.5C10%2010.2239%2010.2239%2010%2010.5%2010H15.5ZM6.25%2011.75H3.75V14.25H6.25V11.75ZM14.25%2011.75H11.75V14.25H14.25V11.75ZM7.5%202C7.77614%202%208%202.22386%208%202.5V7.5C8%207.77614%207.77614%208%207.5%208H2.5C2.22386%208%202%207.77614%202%207.5V2.5C2%202.22386%202.22386%202%202.5%202H7.5ZM15.5%202C15.7761%202%2016%202.22386%2016%202.5V7.5C16%207.77614%2015.7761%208%2015.5%208H10.5C10.2239%208%2010%207.77614%2010%207.5V2.5C10%202.22386%2010.2239%202%2010.5%202H15.5ZM6.25%203.75H3.75V6.25H6.25V3.75ZM14.25%203.75H11.75V6.25H14.25V3.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-grid-view.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2013C10.7761%2013%2011%2013.2239%2011%2013.5V21.5C11%2021.7761%2010.7761%2022%2010.5%2022H2.5C2.22386%2022%202%2021.7761%202%2021.5V13.5C2%2013.2239%202.22386%2013%202.5%2013H10.5ZM21.5%2013C21.7761%2013%2022%2013.2239%2022%2013.5V21.5C22%2021.7761%2021.7761%2022%2021.5%2022H13.5C13.2239%2022%2013%2021.7761%2013%2021.5V13.5C13%2013.2239%2013.2239%2013%2013.5%2013H21.5ZM9%2015H4V20H9V15ZM20%2015H15V20H20V15ZM10.5%202C10.7761%202%2011%202.22386%2011%202.5V10.5C11%2010.7761%2010.7761%2011%2010.5%2011H2.5C2.22386%2011%202%2010.7761%202%2010.5V2.5C2%202.22386%202.22386%202%202.5%202H10.5ZM21.5%202C21.7761%202%2022%202.22386%2022%202.5V10.5C22%2010.7761%2021.7761%2011%2021.5%2011H13.5C13.2239%2011%2013%2010.7761%2013%2010.5V2.5C13%202.22386%2013.2239%202%2013.5%202H21.5ZM9%204H4V9H9V4ZM20%204H15V9H20V4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.5%2013C10.7761%2013%2011%2013.2239%2011%2013.5V21.5C11%2021.7761%2010.7761%2022%2010.5%2022H2.5C2.22386%2022%202%2021.7761%202%2021.5V13.5C2%2013.2239%202.22386%2013%202.5%2013H10.5ZM21.5%2013C21.7761%2013%2022%2013.2239%2022%2013.5V21.5C22%2021.7761%2021.7761%2022%2021.5%2022H13.5C13.2239%2022%2013%2021.7761%2013%2021.5V13.5C13%2013.2239%2013.2239%2013%2013.5%2013H21.5ZM9%2015H4V20H9V15ZM20%2015H15V20H20V15ZM10.5%202C10.7761%202%2011%202.22386%2011%202.5V10.5C11%2010.7761%2010.7761%2011%2010.5%2011H2.5C2.22386%2011%202%2010.7761%202%2010.5V2.5C2%202.22386%202.22386%202%202.5%202H10.5ZM21.5%202C21.7761%202%2022%202.22386%2022%202.5V10.5C22%2010.7761%2021.7761%2011%2021.5%2011H13.5C13.2239%2011%2013%2010.7761%2013%2010.5V2.5C13%202.22386%2013.2239%202%2013.5%202H21.5ZM9%204H4V9H9V4ZM20%204H15V9H20V4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Group Off Icon */
.gravity-icon-group-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%201C6.62951%201%207.22229%201.29639%207.6%201.8L8.5%203H15C16.1046%203%2017%203.89543%2017%205V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V3C1%201.89543%201.89543%201%203%201H6ZM6%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15.25H15.25V5C15.25%204.86193%2015.1381%204.75%2015%204.75H7.625L6.2%202.85C6.15279%202.78705%206.07869%202.75%206%202.75ZM12%209C12.5523%209%2013%209.44771%2013%2010C13%2010.5523%2012.5523%2011%2012%2011H6C5.44772%2011%205%2010.5523%205%2010C5%209.44771%205.44772%209%206%209H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%201C6.62951%201%207.22229%201.29639%207.6%201.8L8.5%203H15C16.1046%203%2017%203.89543%2017%205V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V3C1%201.89543%201.89543%201%203%201H6ZM6%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15.25H15.25V5C15.25%204.86193%2015.1381%204.75%2015%204.75H7.625L6.2%202.85C6.15279%202.78705%206.07869%202.75%206%202.75ZM12%209C12.5523%209%2013%209.44771%2013%2010C13%2010.5523%2012.5523%2011%2012%2011H6C5.44772%2011%205%2010.5523%205%2010C5%209.44771%205.44772%209%206%209H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-group-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.92963%202C8.59834%202%209.2228%202.3342%209.59373%202.8906L11%205H20.5C21.8807%205%2023%206.11929%2023%207.5V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V4.5C1%203.11929%202.11929%202%203.5%202H7.92963ZM7.92963%204H3.5C3.22386%204%203%204.22386%203%204.5V21H21V7.5C21%207.22386%2020.7761%207%2020.5%207H9.92963L7.92963%204ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H8C7.44772%2015%207%2014.5523%207%2014C7%2013.4477%207.44772%2013%208%2013H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.92963%202C8.59834%202%209.2228%202.3342%209.59373%202.8906L11%205H20.5C21.8807%205%2023%206.11929%2023%207.5V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V4.5C1%203.11929%202.11929%202%203.5%202H7.92963ZM7.92963%204H3.5C3.22386%204%203%204.22386%203%204.5V21H21V7.5C21%207.22386%2020.7761%207%2020.5%207H9.92963L7.92963%204ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H8C7.44772%2015%207%2014.5523%207%2014C7%2013.4477%207.44772%2013%208%2013H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Group On Icon */
.gravity-icon-group-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%201C6.62951%201%207.22229%201.29639%207.6%201.8L8.5%203H15C16.1046%203%2017%203.89543%2017%205V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V3C1%201.89543%201.89543%201%203%201H6ZM6%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15.25H15.25V5C15.25%204.86193%2015.1381%204.75%2015%204.75H7.625L6.2%202.85C6.15279%202.78705%206.07869%202.75%206%202.75ZM9%206C9.55229%206%2010%206.44772%2010%207V9H12C12.5523%209%2013%209.44771%2013%2010C13%2010.5523%2012.5523%2011%2012%2011H10V13C10%2013.5523%209.55229%2014%209%2014C8.44772%2014%208%2013.5523%208%2013V11H6C5.44772%2011%205%2010.5523%205%2010C5%209.44771%205.44772%209%206%209H8V7C8%206.44772%208.44772%206%209%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%201C6.62951%201%207.22229%201.29639%207.6%201.8L8.5%203H15C16.1046%203%2017%203.89543%2017%205V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V3C1%201.89543%201.89543%201%203%201H6ZM6%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V15.25H15.25V5C15.25%204.86193%2015.1381%204.75%2015%204.75H7.625L6.2%202.85C6.15279%202.78705%206.07869%202.75%206%202.75ZM9%206C9.55229%206%2010%206.44772%2010%207V9H12C12.5523%209%2013%209.44771%2013%2010C13%2010.5523%2012.5523%2011%2012%2011H10V13C10%2013.5523%209.55229%2014%209%2014C8.44772%2014%208%2013.5523%208%2013V11H6C5.44772%2011%205%2010.5523%205%2010C5%209.44771%205.44772%209%206%209H8V7C8%206.44772%208.44772%206%209%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-group-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.92963%202C8.59834%202%209.2228%202.3342%209.59373%202.8906L11%205H20.5C21.8807%205%2023%206.11929%2023%207.5V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V4.5C1%203.11929%202.11929%202%203.5%202H7.92963ZM7.92963%204H3.5C3.22386%204%203%204.22386%203%204.5V21H21V7.5C21%207.22386%2020.7761%207%2020.5%207H9.92963L7.92963%204ZM12%209C12.5523%209%2013%209.44772%2013%2010V13H16C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H13V18C13%2018.5523%2012.5523%2019%2012%2019C11.4477%2019%2011%2018.5523%2011%2018V15H8C7.44772%2015%207%2014.5523%207%2014C7%2013.4477%207.44772%2013%208%2013H11V10C11%209.44772%2011.4477%209%2012%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.92963%202C8.59834%202%209.2228%202.3342%209.59373%202.8906L11%205H20.5C21.8807%205%2023%206.11929%2023%207.5V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V4.5C1%203.11929%202.11929%202%203.5%202H7.92963ZM7.92963%204H3.5C3.22386%204%203%204.22386%203%204.5V21H21V7.5C21%207.22386%2020.7761%207%2020.5%207H9.92963L7.92963%204ZM12%209C12.5523%209%2013%209.44772%2013%2010V13H16C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H13V18C13%2018.5523%2012.5523%2019%2012%2019C11.4477%2019%2011%2018.5523%2011%2018V15H8C7.44772%2015%207%2014.5523%207%2014C7%2013.4477%207.44772%2013%208%2013H11V10C11%209.44772%2011.4477%209%2012%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Help Icon */
.gravity-icon-help {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%2012.75C9.55229%2012.75%2010%2013.1977%2010%2013.75C10%2014.3023%209.55229%2014.75%209%2014.75C8.44771%2014.75%208%2014.3023%208%2013.75C8%2013.1977%208.44771%2012.75%209%2012.75ZM9.44654%203.91329C10.8375%204.04474%2011.85%205.15852%2011.85%206.55C11.85%207.55611%2011.4362%208.4924%2010.7788%209.254L10.6229%209.42661C10.1965%209.87783%209.9126%2010.3947%209.85917%2010.8466L9.85001%2010.9947L9.85%2011.1356C9.84995%2011.605%209.46936%2011.9855%208.99992%2011.9855C8.56658%2011.9855%208.20902%2011.6612%208.15661%2011.242L8.15%2011.1354L8.15002%2010.9924C8.1524%2010.0763%208.57564%209.18352%209.23187%208.43024L9.38736%208.25894C9.85877%207.76013%2010.15%207.15181%2010.15%206.55C10.15%206.03507%209.8042%205.65466%209.28661%205.60575C8.71945%205.55216%208.21408%205.81287%207.98822%206.25561L7.93771%206.37001C7.77231%206.80935%207.28207%207.03142%206.84273%206.86602C6.40339%206.70062%206.18132%206.21038%206.34672%205.77104C6.81916%204.51617%208.09327%203.78541%209.44654%203.91329Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%2012.75C9.55229%2012.75%2010%2013.1977%2010%2013.75C10%2014.3023%209.55229%2014.75%209%2014.75C8.44771%2014.75%208%2014.3023%208%2013.75C8%2013.1977%208.44771%2012.75%209%2012.75ZM9.44654%203.91329C10.8375%204.04474%2011.85%205.15852%2011.85%206.55C11.85%207.55611%2011.4362%208.4924%2010.7788%209.254L10.6229%209.42661C10.1965%209.87783%209.9126%2010.3947%209.85917%2010.8466L9.85001%2010.9947L9.85%2011.1356C9.84995%2011.605%209.46936%2011.9855%208.99992%2011.9855C8.56658%2011.9855%208.20902%2011.6612%208.15661%2011.242L8.15%2011.1354L8.15002%2010.9924C8.1524%2010.0763%208.57564%209.18352%209.23187%208.43024L9.38736%208.25894C9.85877%207.76013%2010.15%207.15181%2010.15%206.55C10.15%206.03507%209.8042%205.65466%209.28661%205.60575C8.71945%205.55216%208.21408%205.81287%207.98822%206.25561L7.93771%206.37001C7.77231%206.80935%207.28207%207.03142%206.84273%206.86602C6.40339%206.70062%206.18132%206.21038%206.34672%205.77104C6.81916%204.51617%208.09327%203.78541%209.44654%203.91329Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-help.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2017C12.6213%2017%2013.125%2017.5037%2013.125%2018.125C13.125%2018.7463%2012.6213%2019.25%2012%2019.25C11.3787%2019.25%2010.875%2018.7463%2010.875%2018.125C10.875%2017.5037%2011.3787%2017%2012%2017ZM12.5498%205.27618C14.3822%205.43203%2015.75%207.0198%2015.75%208.77898C15.75%2010.0945%2015.1964%2011.3231%2014.2528%2012.3062L14.0589%2012.4995C13.4348%2013.0952%2013.0678%2013.7837%2013.0096%2014.4748L13.0015%2014.6633V15C13.0015%2015.5523%2012.5537%2016%2012.0015%2016C11.4886%2016%2011.066%2015.614%2011.0082%2015.1166L11.0015%2015L11.0015%2014.6609C11.0045%2013.4019%2011.5512%2012.2144%2012.4859%2011.2439L12.6779%2011.0527C13.3649%2010.3971%2013.75%209.59954%2013.75%208.77898C13.75%208.03203%2013.149%207.33437%2012.3803%207.26899C11.4904%207.1933%2010.6747%207.66784%2010.2722%208.5093L10.2016%208.67132L10.1803%208.72542C9.97769%209.2392%209.39695%209.49146%208.88316%209.28886C8.40608%209.10074%208.15449%208.58656%208.28319%208.1027L8.31971%207.99174L8.34104%207.93765C9.03514%206.17746%2010.7194%205.1205%2012.5498%205.27618Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%2017C12.6213%2017%2013.125%2017.5037%2013.125%2018.125C13.125%2018.7463%2012.6213%2019.25%2012%2019.25C11.3787%2019.25%2010.875%2018.7463%2010.875%2018.125C10.875%2017.5037%2011.3787%2017%2012%2017ZM12.5498%205.27618C14.3822%205.43203%2015.75%207.0198%2015.75%208.77898C15.75%2010.0945%2015.1964%2011.3231%2014.2528%2012.3062L14.0589%2012.4995C13.4348%2013.0952%2013.0678%2013.7837%2013.0096%2014.4748L13.0015%2014.6633V15C13.0015%2015.5523%2012.5537%2016%2012.0015%2016C11.4886%2016%2011.066%2015.614%2011.0082%2015.1166L11.0015%2015L11.0015%2014.6609C11.0045%2013.4019%2011.5512%2012.2144%2012.4859%2011.2439L12.6779%2011.0527C13.3649%2010.3971%2013.75%209.59954%2013.75%208.77898C13.75%208.03203%2013.149%207.33437%2012.3803%207.26899C11.4904%207.1933%2010.6747%207.66784%2010.2722%208.5093L10.2016%208.67132L10.1803%208.72542C9.97769%209.2392%209.39695%209.49146%208.88316%209.28886C8.40608%209.10074%208.15449%208.58656%208.28319%208.1027L8.31971%207.99174L8.34104%207.93765C9.03514%206.17746%2010.7194%205.1205%2012.5498%205.27618Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Hightlighter Icon */
.gravity-icon-hightlighter {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2015C16.5523%2015%2017%2015.4477%2017%2016V17C17%2017.5523%2016.5523%2018%2016%2018H2C1.44772%2018%201%2017.5523%201%2017V16C1%2015.4477%201.44772%2015%202%2015H16ZM13.3744%201.76779L14.7886%203.18201C15.5696%203.96306%2015.5696%205.22939%2014.7886%206.01043L8.95495%2011.8441C8.06486%2012.7342%206.71642%2012.8865%205.66939%2012.3012L4.97056%2013H3V12.1422L4.25518%2010.887C3.66984%209.83996%203.82222%208.49151%204.71231%207.60142L10.5459%201.76779C11.327%200.986745%2012.5933%200.986745%2013.3744%201.76779ZM7.11396%207.67465L5.94975%208.83886C5.55922%209.22939%205.55922%209.86255%205.94975%2010.2531L6.3033%2010.6066C6.69383%2010.9972%207.32699%2010.9972%207.71751%2010.6066L8.88173%209.44241L7.11396%207.67465ZM11.7834%203.00523L8.17462%206.61399L9.94239%208.38175L13.5511%204.773C13.6488%204.67537%2013.6488%204.51707%2013.5511%204.41944L12.1369%203.00523C12.0393%202.9076%2011.881%202.9076%2011.7834%203.00523Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2015C16.5523%2015%2017%2015.4477%2017%2016V17C17%2017.5523%2016.5523%2018%2016%2018H2C1.44772%2018%201%2017.5523%201%2017V16C1%2015.4477%201.44772%2015%202%2015H16ZM13.3744%201.76779L14.7886%203.18201C15.5696%203.96306%2015.5696%205.22939%2014.7886%206.01043L8.95495%2011.8441C8.06486%2012.7342%206.71642%2012.8865%205.66939%2012.3012L4.97056%2013H3V12.1422L4.25518%2010.887C3.66984%209.83996%203.82222%208.49151%204.71231%207.60142L10.5459%201.76779C11.327%200.986745%2012.5933%200.986745%2013.3744%201.76779ZM7.11396%207.67465L5.94975%208.83886C5.55922%209.22939%205.55922%209.86255%205.94975%2010.2531L6.3033%2010.6066C6.69383%2010.9972%207.32699%2010.9972%207.71751%2010.6066L8.88173%209.44241L7.11396%207.67465ZM11.7834%203.00523L8.17462%206.61399L9.94239%208.38175L13.5511%204.773C13.6488%204.67537%2013.6488%204.51707%2013.5511%204.41944L12.1369%203.00523C12.0393%202.9076%2011.881%202.9076%2011.7834%203.00523Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-hightlighter.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2021C21.5523%2021%2022%2021.4477%2022%2022V23C22%2023.5522%2021.5523%2024%2021%2024H3C2.44772%2024%202%2023.5522%202%2023V22C2%2021.4477%202.44772%2021%203%2021H21ZM17.6317%202.63168L20.4602%205.46011C21.2412%206.24116%2021.2412%207.50749%2020.4602%208.28854L11.3107%2017.438C10.1728%2018.5759%208.44642%2018.7665%207.11138%2018.0099L6.12132%2019H3V17.8786L5.01741%2015.8612C4.33741%2014.544%204.54954%2012.8854%205.65381%2011.7812L14.8033%202.63168C15.5843%201.85064%2016.8507%201.85064%2017.6317%202.63168ZM8.42462%2011.8388L7.06802%2013.1954C6.48223%2013.7812%206.48223%2014.7309%207.06802%2015.3167L7.77513%2016.0238C8.36091%2016.6096%209.31066%2016.6096%209.89645%2016.0238L11.253%2014.6672L8.42462%2011.8388ZM16.2175%204.0459L9.83883%2010.4246L12.6673%2013.253L19.0459%206.87433L16.2175%204.0459Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2021C21.5523%2021%2022%2021.4477%2022%2022V23C22%2023.5522%2021.5523%2024%2021%2024H3C2.44772%2024%202%2023.5522%202%2023V22C2%2021.4477%202.44772%2021%203%2021H21ZM17.6317%202.63168L20.4602%205.46011C21.2412%206.24116%2021.2412%207.50749%2020.4602%208.28854L11.3107%2017.438C10.1728%2018.5759%208.44642%2018.7665%207.11138%2018.0099L6.12132%2019H3V17.8786L5.01741%2015.8612C4.33741%2014.544%204.54954%2012.8854%205.65381%2011.7812L14.8033%202.63168C15.5843%201.85064%2016.8507%201.85064%2017.6317%202.63168ZM8.42462%2011.8388L7.06802%2013.1954C6.48223%2013.7812%206.48223%2014.7309%207.06802%2015.3167L7.77513%2016.0238C8.36091%2016.6096%209.31066%2016.6096%209.89645%2016.0238L11.253%2014.6672L8.42462%2011.8388ZM16.2175%204.0459L9.83883%2010.4246L12.6673%2013.253L19.0459%206.87433L16.2175%204.0459Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* History Icon */
.gravity-icon-history {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.4598%204.72499C18.807%208.79048%2017.4141%2013.989%2013.3486%2016.3362C9.28309%2018.6834%204.08457%2017.2905%201.73736%2013.225C1.49574%2012.8065%201.63913%2012.2713%202.05764%2012.0297C2.47614%2011.7881%203.01128%2011.9315%203.25291%2012.35C5.11687%2015.5785%209.2451%2016.6846%2012.4736%2014.8207C15.7021%2012.9567%2016.8082%208.82847%2014.9443%205.59999C13.0803%202.37152%208.95205%201.26536%205.72358%203.12932C4.45296%203.86291%203.48123%204.96534%202.91148%206.27499H5.07001C5.55326%206.27499%205.95001%206.66674%205.95001%207.14999C5.95001%207.63324%205.55326%208.02499%205.07001%208.02499H0.923576C0.681952%208.02499%200.463202%207.92705%200.304858%207.76871C0.146514%207.61036%200.0485764%207.39161%200.0485764%207.14999V2.99999C0.0485764%202.51674%200.440327%202.11999%200.923576%202.11999C1.40683%202.11999%201.79858%202.51674%201.79858%202.99999V4.61758C2.53075%203.38861%203.57029%202.35179%204.84858%201.61378C8.91407%20-0.733435%2014.1126%200.659504%2016.4598%204.72499ZM9%204.29999C9.55229%204.29999%2010%204.74771%2010%205.29999V9.59115L11.7082%2011.2994C12.0973%2011.6884%2012.0973%2012.3192%2011.7082%2012.7082C11.3192%2013.0973%2010.6884%2013.0973%2010.2994%2012.7082L8.35735%2010.7662C8.13888%2010.5827%208%2010.3076%208%209.99999V5.29999C8%204.74771%208.44771%204.29999%209%204.29999Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.4598%204.72499C18.807%208.79048%2017.4141%2013.989%2013.3486%2016.3362C9.28309%2018.6834%204.08457%2017.2905%201.73736%2013.225C1.49574%2012.8065%201.63913%2012.2713%202.05764%2012.0297C2.47614%2011.7881%203.01128%2011.9315%203.25291%2012.35C5.11687%2015.5785%209.2451%2016.6846%2012.4736%2014.8207C15.7021%2012.9567%2016.8082%208.82847%2014.9443%205.59999C13.0803%202.37152%208.95205%201.26536%205.72358%203.12932C4.45296%203.86291%203.48123%204.96534%202.91148%206.27499H5.07001C5.55326%206.27499%205.95001%206.66674%205.95001%207.14999C5.95001%207.63324%205.55326%208.02499%205.07001%208.02499H0.923576C0.681952%208.02499%200.463202%207.92705%200.304858%207.76871C0.146514%207.61036%200.0485764%207.39161%200.0485764%207.14999V2.99999C0.0485764%202.51674%200.440327%202.11999%200.923576%202.11999C1.40683%202.11999%201.79858%202.51674%201.79858%202.99999V4.61758C2.53075%203.38861%203.57029%202.35179%204.84858%201.61378C8.91407%20-0.733435%2014.1126%200.659504%2016.4598%204.72499ZM9%204.29999C9.55229%204.29999%2010%204.74771%2010%205.29999V9.59115L11.7082%2011.2994C12.0973%2011.6884%2012.0973%2012.3192%2011.7082%2012.7082C11.3192%2013.0973%2010.6884%2013.0973%2010.2994%2012.7082L8.35735%2010.7662C8.13888%2010.5827%208%2010.3076%208%209.99999V5.29999C8%204.74771%208.44771%204.29999%209%204.29999Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-history.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.9593%206.25C25.1349%2011.7504%2023.2504%2018.7837%2017.75%2021.9593C12.2496%2025.1349%205.21634%2023.2504%202.04071%2017.75C1.76457%2017.2717%201.92844%2016.6601%202.40673%2016.384C2.88503%2016.1078%203.49662%2016.2717%203.77276%2016.75C6.39611%2021.2938%2012.2062%2022.8506%2016.75%2020.2272C21.2938%2017.6039%2022.8506%2011.7938%2020.2272%207.25C17.6039%202.70622%2011.7938%201.1494%207.25%203.77276C5.52698%204.76754%204.19423%206.24464%203.38201%208H6.5C7.05228%208%207.5%208.44771%207.5%209C7.5%209.55228%207.05228%2010%206.5%2010H1C0.723858%2010%200.473858%209.88807%200.292893%209.7071C0.111929%209.52614%200%209.27614%200%209V3.5C0%202.94771%200.447715%202.5%201%202.5C1.55228%202.5%202%202.94771%202%203.5V6.31709C2.99561%204.56136%204.44725%203.08152%206.25%202.04071C11.7504%20-1.13493%2018.7837%200.749632%2021.9593%206.25ZM12%205.5C12.5523%205.5%2013%205.94771%2013%206.5V12.5858L15.7023%2015.288C16.0928%2015.6786%2016.0928%2016.3117%2015.7023%2016.7023C15.3117%2017.0928%2014.6786%2017.0928%2014.288%2016.7023L11.2929%2013.7071C11.1119%2013.5261%2011%2013.2761%2011%2013V6.5C11%205.94771%2011.4477%205.5%2012%205.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.9593%206.25C25.1349%2011.7504%2023.2504%2018.7837%2017.75%2021.9593C12.2496%2025.1349%205.21634%2023.2504%202.04071%2017.75C1.76457%2017.2717%201.92844%2016.6601%202.40673%2016.384C2.88503%2016.1078%203.49662%2016.2717%203.77276%2016.75C6.39611%2021.2938%2012.2062%2022.8506%2016.75%2020.2272C21.2938%2017.6039%2022.8506%2011.7938%2020.2272%207.25C17.6039%202.70622%2011.7938%201.1494%207.25%203.77276C5.52698%204.76754%204.19423%206.24464%203.38201%208H6.5C7.05228%208%207.5%208.44771%207.5%209C7.5%209.55228%207.05228%2010%206.5%2010H1C0.723858%2010%200.473858%209.88807%200.292893%209.7071C0.111929%209.52614%200%209.27614%200%209V3.5C0%202.94771%200.447715%202.5%201%202.5C1.55228%202.5%202%202.94771%202%203.5V6.31709C2.99561%204.56136%204.44725%203.08152%206.25%202.04071C11.7504%20-1.13493%2018.7837%200.749632%2021.9593%206.25ZM12%205.5C12.5523%205.5%2013%205.94771%2013%206.5V12.5858L15.7023%2015.288C16.0928%2015.6786%2016.0928%2016.3117%2015.7023%2016.7023C15.3117%2017.0928%2014.6786%2017.0928%2014.288%2016.7023L11.2929%2013.7071C11.1119%2013.5261%2011%2013.2761%2011%2013V6.5C11%205.94771%2011.4477%205.5%2012%205.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Home Icon */
.gravity-icon-home {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.49745%200.69086L17%207.34V15.5455C17%2016.3488%2016.3488%2017%2015.5455%2017H10.9773C10.5756%2017%2010.25%2016.6744%2010.25%2016.2727V12.5C10.25%2011.8096%209.69036%2011.25%209%2011.25C8.30964%2011.25%207.75%2011.8096%207.75%2012.5V16.2727C7.75%2016.6744%207.42439%2017%207.02273%2017H2.45455C1.65122%2017%201%2016.3488%201%2015.5455V7.34L8.50255%200.69086C8.78646%200.439249%209.21354%200.439249%209.49745%200.69086ZM9%202.588L2.75%208.126V15.249H6V12.5C6%2010.9023%207.24892%209.59634%208.82373%209.50509L9%209.5C10.5977%209.5%2011.9037%2010.7489%2011.9949%2012.3237L12%2012.5V15.249H15.25V8.127L9%202.588Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.49745%200.69086L17%207.34V15.5455C17%2016.3488%2016.3488%2017%2015.5455%2017H10.9773C10.5756%2017%2010.25%2016.6744%2010.25%2016.2727V12.5C10.25%2011.8096%209.69036%2011.25%209%2011.25C8.30964%2011.25%207.75%2011.8096%207.75%2012.5V16.2727C7.75%2016.6744%207.42439%2017%207.02273%2017H2.45455C1.65122%2017%201%2016.3488%201%2015.5455V7.34L8.50255%200.69086C8.78646%200.439249%209.21354%200.439249%209.49745%200.69086ZM9%202.588L2.75%208.126V15.249H6V12.5C6%2010.9023%207.24892%209.59634%208.82373%209.50509L9%209.5C10.5977%209.5%2011.9037%2010.7489%2011.9949%2012.3237L12%2012.5V15.249H15.25V8.127L9%202.588Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-home.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6633%200.837926L23%209.99999V21C23%2022.1046%2022.1046%2023%2021%2023H15C14.4477%2023%2014%2022.5523%2014%2022V17C14%2015.8954%2013.1046%2015%2012%2015C10.8954%2015%2010%2015.8954%2010%2017V22C10%2022.5523%209.55229%2023%209%2023H3C1.89543%2023%201%2022.1046%201%2021V9.99999L11.3367%200.837926C11.7152%200.502389%2012.2848%200.502389%2012.6633%200.837926ZM12%202.92199L3%2010.899V21L8%2020.999V17C8%2014.8578%209.68397%2013.1089%2011.8004%2013.0049L12%2013C14.1422%2013%2015.8911%2014.684%2015.9951%2016.8004L16%2017V20.999L21%2021V10.899L12%202.92199Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6633%200.837926L23%209.99999V21C23%2022.1046%2022.1046%2023%2021%2023H15C14.4477%2023%2014%2022.5523%2014%2022V17C14%2015.8954%2013.1046%2015%2012%2015C10.8954%2015%2010%2015.8954%2010%2017V22C10%2022.5523%209.55229%2023%209%2023H3C1.89543%2023%201%2022.1046%201%2021V9.99999L11.3367%200.837926C11.7152%200.502389%2012.2848%200.502389%2012.6633%200.837926ZM12%202.92199L3%2010.899V21L8%2020.999V17C8%2014.8578%209.68397%2013.1089%2011.8004%2013.0049L12%2013C14.1422%2013%2015.8911%2014.684%2015.9951%2016.8004L16%2017V20.999L21%2021V10.899L12%202.92199Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Hr Icon */
.gravity-icon-hr {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%208H15C15.5523%208%2016%208.44772%2016%209C16%209.55228%2015.5523%2010%2015%2010H3C2.44772%2010%202%209.55228%202%209C2%208.44772%202.44772%208%203%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%208H15C15.5523%208%2016%208.44772%2016%209C16%209.55228%2015.5523%2010%2015%2010H3C2.44772%2010%202%209.55228%202%209C2%208.44772%202.44772%208%203%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-hr.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Html Icon */
.gravity-icon-html {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.6228%204.0487C11.082%204.19968%2011.332%204.69509%2011.1814%205.15523L8.48145%2013.401C8.33079%2013.8612%207.83643%2014.1118%207.37727%2013.9608C6.9181%2013.8098%206.66802%2013.3144%206.81868%2012.8543L9.51861%204.60847C9.66927%204.14834%2010.1636%203.89772%2010.6228%204.0487ZM14.5435%204.33009L17.7994%208.43991C18.0579%208.75268%2018.0719%209.21603%2017.8101%209.54652L14.5435%2013.6699C14.2446%2014.0473%2013.6992%2014.1085%2013.3254%2013.8067C12.9516%2013.5049%2012.8909%2012.9542%2013.1899%2012.5768L16.0235%209L13.1899%205.42315C12.8909%205.04576%2012.9516%204.49513%2013.3254%204.19329C13.6992%203.89146%2014.2446%203.9527%2014.5435%204.33009ZM4.67462%204.19329C5.04842%204.49513%205.10909%205.04576%204.81011%205.42315L1.97651%209L4.81011%2012.5768C5.10909%2012.9542%205.04842%2013.5049%204.67462%2013.8067C4.30081%2014.1085%203.75542%2014.0473%203.45645%2013.6699L0.189886%209.54652C-0.0719334%209.21603%20-0.0579439%208.75268%200.200627%208.43991L3.45645%204.33009C3.75542%203.9527%204.30081%203.89146%204.67462%204.19329Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.6228%204.0487C11.082%204.19968%2011.332%204.69509%2011.1814%205.15523L8.48145%2013.401C8.33079%2013.8612%207.83643%2014.1118%207.37727%2013.9608C6.9181%2013.8098%206.66802%2013.3144%206.81868%2012.8543L9.51861%204.60847C9.66927%204.14834%2010.1636%203.89772%2010.6228%204.0487ZM14.5435%204.33009L17.7994%208.43991C18.0579%208.75268%2018.0719%209.21603%2017.8101%209.54652L14.5435%2013.6699C14.2446%2014.0473%2013.6992%2014.1085%2013.3254%2013.8067C12.9516%2013.5049%2012.8909%2012.9542%2013.1899%2012.5768L16.0235%209L13.1899%205.42315C12.8909%205.04576%2012.9516%204.49513%2013.3254%204.19329C13.6992%203.89146%2014.2446%203.9527%2014.5435%204.33009ZM4.67462%204.19329C5.04842%204.49513%205.10909%205.04576%204.81011%205.42315L1.97651%209L4.81011%2012.5768C5.10909%2012.9542%205.04842%2013.5049%204.67462%2013.8067C4.30081%2014.1085%203.75542%2014.0473%203.45645%2013.6699L0.189886%209.54652C-0.0719334%209.21603%20-0.0579439%208.75268%200.200627%208.43991L3.45645%204.33009C3.75542%203.9527%204.30081%203.89146%204.67462%204.19329Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-html.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.3162%205.05134C14.8402%205.22599%2015.1233%205.79231%2014.9487%206.31625L10.9487%2018.3163C10.774%2018.8402%2010.2077%2019.1234%209.68377%2018.9487C9.15983%2018.7741%208.87667%2018.2077%209.05132%2017.6838L13.0513%205.6838C13.226%205.15986%2013.7923%204.8767%2014.3162%205.05134ZM18.984%205.37778L23.7685%2011.3599C24.0669%2011.7174%2024.083%2012.2469%2023.7809%2012.6246L18.984%2018.6223C18.639%2019.0536%2018.0098%2019.1236%2017.5784%2018.7786C17.1471%2018.4337%2017.0772%2017.8044%2017.4221%2017.3731L21.7195%2012L17.4221%206.62699C17.0772%206.19569%2017.1471%205.5664%2017.5784%205.22144C18.0098%204.87649%2018.639%204.94648%2018.984%205.37778ZM6.42159%205.22144C6.85289%205.5664%206.92289%206.19569%206.57793%206.62699L2.28054%2012L6.57793%2017.3731C6.92289%2017.8044%206.85289%2018.4337%206.42159%2018.7786C5.99029%2019.1236%205.361%2019.0536%205.01604%2018.6223L0.219094%2012.6246C-0.0829982%2012.2469%20-0.0668569%2011.7174%200.231488%2011.3599L5.01604%205.37778C5.361%204.94648%205.99029%204.87649%206.42159%205.22144Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.3162%205.05134C14.8402%205.22599%2015.1233%205.79231%2014.9487%206.31625L10.9487%2018.3163C10.774%2018.8402%2010.2077%2019.1234%209.68377%2018.9487C9.15983%2018.7741%208.87667%2018.2077%209.05132%2017.6838L13.0513%205.6838C13.226%205.15986%2013.7923%204.8767%2014.3162%205.05134ZM18.984%205.37778L23.7685%2011.3599C24.0669%2011.7174%2024.083%2012.2469%2023.7809%2012.6246L18.984%2018.6223C18.639%2019.0536%2018.0098%2019.1236%2017.5784%2018.7786C17.1471%2018.4337%2017.0772%2017.8044%2017.4221%2017.3731L21.7195%2012L17.4221%206.62699C17.0772%206.19569%2017.1471%205.5664%2017.5784%205.22144C18.0098%204.87649%2018.639%204.94648%2018.984%205.37778ZM6.42159%205.22144C6.85289%205.5664%206.92289%206.19569%206.57793%206.62699L2.28054%2012L6.57793%2017.3731C6.92289%2017.8044%206.85289%2018.4337%206.42159%2018.7786C5.99029%2019.1236%205.361%2019.0536%205.01604%2018.6223L0.219094%2012.6246C-0.0829982%2012.2469%20-0.0668569%2011.7174%200.231488%2011.3599L5.01604%205.37778C5.361%204.94648%205.99029%204.87649%206.42159%205.22144Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Image Icon */
.gravity-icon-image {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.875%202C16.0486%202%2017%202.95139%2017%204.125V13.875C17%2015.0486%2016.0486%2016%2014.875%2016H3.125C1.95139%2016%201%2015.0486%201%2013.875V4.125C1%202.95139%201.95139%202%203.125%202H14.875ZM11.6051%208.35087L9.38967%2011.7168L9.33117%2011.7976C9.31568%2011.8171%209.29904%2011.8357%209.26575%2011.8729C8.83792%2012.3235%208.12584%2012.3419%207.67529%2011.9141L6.53957%2010.8356L3.91173%2014.25H14.875C15.0821%2014.25%2015.25%2014.0821%2015.25%2013.875V13.5023L11.6051%208.35087ZM14.875%203.75H3.125C2.91789%203.75%202.75%203.91789%202.75%204.125V12.8902L5.40648%209.43859C5.86964%208.83679%206.73295%208.72441%207.33475%209.18757L7.40393%209.2446L8.3386%2010.1306L10.4453%206.92984C10.8628%206.29552%2011.7155%206.11975%2012.3498%206.53726C12.493%206.6315%2012.6173%206.75168%2012.7163%206.89161L15.25%2010.4725V4.125C15.25%203.91789%2015.0821%203.75%2014.875%203.75ZM5.5%205C6.32843%205%207%205.67157%207%206.5C7%207.32843%206.32843%208%205.5%208C4.67157%208%204%207.32843%204%206.5C4%205.67157%204.67157%205%205.5%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.875%202C16.0486%202%2017%202.95139%2017%204.125V13.875C17%2015.0486%2016.0486%2016%2014.875%2016H3.125C1.95139%2016%201%2015.0486%201%2013.875V4.125C1%202.95139%201.95139%202%203.125%202H14.875ZM11.6051%208.35087L9.38967%2011.7168L9.33117%2011.7976C9.31568%2011.8171%209.29904%2011.8357%209.26575%2011.8729C8.83792%2012.3235%208.12584%2012.3419%207.67529%2011.9141L6.53957%2010.8356L3.91173%2014.25H14.875C15.0821%2014.25%2015.25%2014.0821%2015.25%2013.875V13.5023L11.6051%208.35087ZM14.875%203.75H3.125C2.91789%203.75%202.75%203.91789%202.75%204.125V12.8902L5.40648%209.43859C5.86964%208.83679%206.73295%208.72441%207.33475%209.18757L7.40393%209.2446L8.3386%2010.1306L10.4453%206.92984C10.8628%206.29552%2011.7155%206.11975%2012.3498%206.53726C12.493%206.6315%2012.6173%206.75168%2012.7163%206.89161L15.25%2010.4725V4.125C15.25%203.91789%2015.0821%203.75%2014.875%203.75ZM5.5%205C6.32843%205%207%205.67157%207%206.5C7%207.32843%206.32843%208%205.5%208C4.67157%208%204%207.32843%204%206.5C4%205.67157%204.67157%205%205.5%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-image.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202C21.8807%202%2023%203.11929%2023%204.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V4.5C1%203.11929%202.11929%202%203.5%202H20.5ZM21%2017.8305L15.713%2011.0934L12.2077%2015.8927C12.202%2015.8996%2012.1951%2015.9079%2012.1847%2015.9203C11.7358%2016.4447%2010.9467%2016.5058%2010.4223%2016.0568L8.43082%2014.3518L3.36276%2019.9809C3.40637%2019.9934%203.45241%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5V17.8305ZM20.5%204H3.5C3.22386%204%203%204.22386%203%204.5V17.3948L6.94448%2013.0136C7.67055%2012.2072%208.90724%2012.1269%209.73154%2012.8326L11.1073%2014.0105L14.0977%209.91415C14.7489%209.022%2016.0001%208.82673%2016.8923%209.478C17.0405%209.5862%2017.1731%209.71429%2017.2864%209.85866L21%2014.5909V4.5C21%204.22386%2020.7761%204%2020.5%204ZM7%206C8.10457%206%209%206.89543%209%208C9%209.10457%208.10457%2010%207%2010C5.89543%2010%205%209.10457%205%208C5%206.89543%205.89543%206%207%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202C21.8807%202%2023%203.11929%2023%204.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V4.5C1%203.11929%202.11929%202%203.5%202H20.5ZM21%2017.8305L15.713%2011.0934L12.2077%2015.8927C12.202%2015.8996%2012.1951%2015.9079%2012.1847%2015.9203C11.7358%2016.4447%2010.9467%2016.5058%2010.4223%2016.0568L8.43082%2014.3518L3.36276%2019.9809C3.40637%2019.9934%203.45241%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5V17.8305ZM20.5%204H3.5C3.22386%204%203%204.22386%203%204.5V17.3948L6.94448%2013.0136C7.67055%2012.2072%208.90724%2012.1269%209.73154%2012.8326L11.1073%2014.0105L14.0977%209.91415C14.7489%209.022%2016.0001%208.82673%2016.8923%209.478C17.0405%209.5862%2017.1731%209.71429%2017.2864%209.85866L21%2014.5909V4.5C21%204.22386%2020.7761%204%2020.5%204ZM7%206C8.10457%206%209%206.89543%209%208C9%209.10457%208.10457%2010%207%2010C5.89543%2010%205%209.10457%205%208C5%206.89543%205.89543%206%207%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Incorrect Icon */
.gravity-icon-incorrect {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%207.67193L12.3969%204.27505C12.7636%203.90832%2013.3582%203.90832%2013.7249%204.27505C14.0917%204.64179%2014.0917%205.23638%2013.7249%205.60312L10.3281%209L13.7249%2012.3969C14.0917%2012.7636%2014.0917%2013.3582%2013.7249%2013.7249C13.3582%2014.0917%2012.7636%2014.0917%2012.3969%2013.7249L9%2010.3281L5.60312%2013.7249C5.23638%2014.0917%204.64179%2014.0917%204.27505%2013.7249C3.90832%2013.3582%203.90832%2012.7636%204.27505%2012.3969L7.67193%209L4.27505%205.60312C3.90832%205.23638%203.90832%204.64179%204.27505%204.27505C4.64179%203.90832%205.23638%203.90832%205.60312%204.27505L9%207.67193Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%207.67193L12.3969%204.27505C12.7636%203.90832%2013.3582%203.90832%2013.7249%204.27505C14.0917%204.64179%2014.0917%205.23638%2013.7249%205.60312L10.3281%209L13.7249%2012.3969C14.0917%2012.7636%2014.0917%2013.3582%2013.7249%2013.7249C13.3582%2014.0917%2012.7636%2014.0917%2012.3969%2013.7249L9%2010.3281L5.60312%2013.7249C5.23638%2014.0917%204.64179%2014.0917%204.27505%2013.7249C3.90832%2013.3582%203.90832%2012.7636%204.27505%2012.3969L7.67193%209L4.27505%205.60312C3.90832%205.23638%203.90832%204.64179%204.27505%204.27505C4.64179%203.90832%205.23638%203.90832%205.60312%204.27505L9%207.67193Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-incorrect.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%206.75478L10.4969%204.25789C10.8407%203.91404%2011.3982%203.91404%2011.7421%204.25789C12.086%204.60175%2012.086%205.15926%2011.7421%205.50311L9.24522%208L11.7421%2010.4969C12.086%2010.8407%2012.086%2011.3982%2011.7421%2011.7421C11.3982%2012.086%2010.8407%2012.086%2010.4969%2011.7421L8%209.24522L5.50311%2011.7421C5.15926%2012.086%204.60175%2012.086%204.25789%2011.7421C3.91404%2011.3982%203.91404%2010.8407%204.25789%2010.4969L6.75478%208L4.25789%205.50311C3.91404%205.15926%203.91404%204.60175%204.25789%204.25789C4.60175%203.91404%205.15926%203.91404%205.50311%204.25789L8%206.75478Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%206.75478L10.4969%204.25789C10.8407%203.91404%2011.3982%203.91404%2011.7421%204.25789C12.086%204.60175%2012.086%205.15926%2011.7421%205.50311L9.24522%208L11.7421%2010.4969C12.086%2010.8407%2012.086%2011.3982%2011.7421%2011.7421C11.3982%2012.086%2010.8407%2012.086%2010.4969%2011.7421L8%209.24522L5.50311%2011.7421C5.15926%2012.086%204.60175%2012.086%204.25789%2011.7421C3.91404%2011.3982%203.91404%2010.8407%204.25789%2010.4969L6.75478%208L4.25789%205.50311C3.91404%205.15926%203.91404%204.60175%204.25789%204.25789C4.60175%203.91404%205.15926%203.91404%205.50311%204.25789L8%206.75478Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-incorrect.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2010.5858L17.2929%205.29289C17.6834%204.90237%2018.3166%204.90237%2018.7071%205.29289C19.0976%205.68342%2019.0976%206.31658%2018.7071%206.70711L13.4142%2012L18.7071%2017.2929C19.0976%2017.6834%2019.0976%2018.3166%2018.7071%2018.7071C18.3166%2019.0976%2017.6834%2019.0976%2017.2929%2018.7071L12%2013.4142L6.70711%2018.7071C6.31658%2019.0976%205.68342%2019.0976%205.29289%2018.7071C4.90237%2018.3166%204.90237%2017.6834%205.29289%2017.2929L10.5858%2012L5.29289%206.70711C4.90237%206.31658%204.90237%205.68342%205.29289%205.29289C5.68342%204.90237%206.31658%204.90237%206.70711%205.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2010.5858L17.2929%205.29289C17.6834%204.90237%2018.3166%204.90237%2018.7071%205.29289C19.0976%205.68342%2019.0976%206.31658%2018.7071%206.70711L13.4142%2012L18.7071%2017.2929C19.0976%2017.6834%2019.0976%2018.3166%2018.7071%2018.7071C18.3166%2019.0976%2017.6834%2019.0976%2017.2929%2018.7071L12%2013.4142L6.70711%2018.7071C6.31658%2019.0976%205.68342%2019.0976%205.29289%2018.7071C4.90237%2018.3166%204.90237%2017.6834%205.29289%2017.2929L10.5858%2012L5.29289%206.70711C4.90237%206.31658%204.90237%205.68342%205.29289%205.29289C5.68342%204.90237%206.31658%204.90237%206.70711%205.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Indent Decrease Icon */
.gravity-icon-indent-decrease {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H16ZM4.91879%206.26442C4.97148%206.33394%205%206.41879%205%206.50602V11.494C5%2011.7149%204.82091%2011.894%204.6%2011.894C4.51276%2011.894%204.42792%2011.8655%204.3584%2011.8128L1.27798%209.47819C1.01388%209.27803%200.962049%208.90169%201.1622%208.63759C1.19532%208.59389%201.23428%208.55494%201.27798%208.52182L4.3584%206.18723C4.53446%206.0538%204.78536%206.08835%204.91879%206.26442ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H16ZM4.91879%206.26442C4.97148%206.33394%205%206.41879%205%206.50602V11.494C5%2011.7149%204.82091%2011.894%204.6%2011.894C4.51276%2011.894%204.42792%2011.8655%204.3584%2011.8128L1.27798%209.47819C1.01388%209.27803%200.962049%208.90169%201.1622%208.63759C1.19532%208.59389%201.23428%208.55494%201.27798%208.52182L4.3584%206.18723C4.53446%206.0538%204.78536%206.08835%204.91879%206.26442ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-indent-decrease.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H10C9.44772%2017%209%2016.5523%209%2016C9%2015.4477%209.44772%2015%2010%2015H21ZM6.89882%208.64127C6.96448%208.7281%207%208.83398%207%208.94283V15.0572C7%2015.3333%206.77614%2015.5572%206.5%2015.5572C6.39115%2015.5572%206.28526%2015.5216%206.19844%2015.456L2.36626%2012.5584C2.05789%2012.3252%201.99693%2011.8862%202.2301%2011.5778C2.26899%2011.5264%202.31482%2011.4805%202.36626%2011.4417L6.19844%208.54401C6.4187%208.37746%206.73227%208.421%206.89882%208.64127ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H10C9.44772%2013%209%2012.5523%209%2012C9%2011.4477%209.44772%2011%2010%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H10C9.44772%209%209%208.55228%209%208C9%207.44772%209.44772%207%2010%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H10C9.44772%2017%209%2016.5523%209%2016C9%2015.4477%209.44772%2015%2010%2015H21ZM6.89882%208.64127C6.96448%208.7281%207%208.83398%207%208.94283V15.0572C7%2015.3333%206.77614%2015.5572%206.5%2015.5572C6.39115%2015.5572%206.28526%2015.5216%206.19844%2015.456L2.36626%2012.5584C2.05789%2012.3252%201.99693%2011.8862%202.2301%2011.5778C2.26899%2011.5264%202.31482%2011.4805%202.36626%2011.4417L6.19844%208.54401C6.4187%208.37746%206.73227%208.421%206.89882%208.64127ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H10C9.44772%2013%209%2012.5523%209%2012C9%2011.4477%209.44772%2011%2010%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H10C9.44772%209%209%208.55228%209%208C9%207.44772%209.44772%207%2010%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Indent Increase Icon */
.gravity-icon-indent-increase {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H16ZM1.6416%206.18723L4.72202%208.52182C4.76572%208.55494%204.80468%208.59389%204.8378%208.63759C5.03795%208.90169%204.98612%209.27803%204.72202%209.47819L1.6416%2011.8128C1.57208%2011.8655%201.48724%2011.894%201.4%2011.894C1.17909%2011.894%201%2011.7149%201%2011.494V6.50602C1%206.41879%201.02852%206.33394%201.08121%206.26442C1.21464%206.08835%201.46554%206.0538%201.6416%206.18723ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H16ZM1.6416%206.18723L4.72202%208.52182C4.76572%208.55494%204.80468%208.59389%204.8378%208.63759C5.03795%208.90169%204.98612%209.27803%204.72202%209.47819L1.6416%2011.8128C1.57208%2011.8655%201.48724%2011.894%201.4%2011.894C1.17909%2011.894%201%2011.7149%201%2011.494V6.50602C1%206.41879%201.02852%206.33394%201.08121%206.26442C1.21464%206.08835%201.46554%206.0538%201.6416%206.18723ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-indent-increase.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H10C9.44772%2017%209%2016.5523%209%2016C9%2015.4477%209.44772%2015%2010%2015H21ZM2.80156%208.54401L6.63374%2011.4417C6.68518%2011.4805%206.73101%2011.5264%206.7699%2011.5778C7.00307%2011.8862%206.94211%2012.3252%206.63374%2012.5584L2.80156%2015.456C2.71474%2015.5216%202.60885%2015.5572%202.5%2015.5572C2.22386%2015.5572%202%2015.3333%202%2015.0572V8.94283C2%208.83398%202.03552%208.7281%202.10118%208.64127C2.26773%208.421%202.5813%208.37746%202.80156%208.54401ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H10C9.44772%2013%209%2012.5523%209%2012C9%2011.4477%209.44772%2011%2010%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H10C9.44772%209%209%208.55228%209%208C9%207.44772%209.44772%207%2010%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H10C9.44772%2017%209%2016.5523%209%2016C9%2015.4477%209.44772%2015%2010%2015H21ZM2.80156%208.54401L6.63374%2011.4417C6.68518%2011.4805%206.73101%2011.5264%206.7699%2011.5778C7.00307%2011.8862%206.94211%2012.3252%206.63374%2012.5584L2.80156%2015.456C2.71474%2015.5216%202.60885%2015.5572%202.5%2015.5572C2.22386%2015.5572%202%2015.3333%202%2015.0572V8.94283C2%208.83398%202.03552%208.7281%202.10118%208.64127C2.26773%208.421%202.5813%208.37746%202.80156%208.54401ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H10C9.44772%2013%209%2012.5523%209%2012C9%2011.4477%209.44772%2011%2010%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H10C9.44772%209%209%208.55228%209%208C9%207.44772%209.44772%207%2010%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Information Icon */
.gravity-icon-information {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9.5%207C9.77614%207%2010%207.22386%2010%207.5V13.5C10%2013.7761%209.77614%2014%209.5%2014H8.5C8.22386%2014%208%2013.7761%208%2013.5V7.5C8%207.22386%208.22386%207%208.5%207H9.5ZM9.5%204C9.77614%204%2010%204.22386%2010%204.5V5.5C10%205.77614%209.77614%206%209.5%206H8.5C8.22386%206%208%205.77614%208%205.5V4.5C8%204.22386%208.22386%204%208.5%204H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9.5%207C9.77614%207%2010%207.22386%2010%207.5V13.5C10%2013.7761%209.77614%2014%209.5%2014H8.5C8.22386%2014%208%2013.7761%208%2013.5V7.5C8%207.22386%208.22386%207%208.5%207H9.5ZM9.5%204C9.77614%204%2010%204.22386%2010%204.5V5.5C10%205.77614%209.77614%206%209.5%206H8.5C8.22386%206%208%205.77614%208%205.5V4.5C8%204.22386%208.22386%204%208.5%204H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-information.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12.5%209C12.7761%209%2013%209.22386%2013%209.5V18.5C13%2018.7761%2012.7761%2019%2012.5%2019H11.5C11.2239%2019%2011%2018.7761%2011%2018.5V9.5C11%209.22386%2011.2239%209%2011.5%209H12.5ZM12.5%205C12.7761%205%2013%205.22386%2013%205.5V6.5C13%206.77614%2012.7761%207%2012.5%207H11.5C11.2239%207%2011%206.77614%2011%206.5V5.5C11%205.22386%2011.2239%205%2011.5%205H12.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12.5%209C12.7761%209%2013%209.22386%2013%209.5V18.5C13%2018.7761%2012.7761%2019%2012.5%2019H11.5C11.2239%2019%2011%2018.7761%2011%2018.5V9.5C11%209.22386%2011.2239%209%2011.5%209H12.5ZM12.5%205C12.7761%205%2013%205.22386%2013%205.5V6.5C13%206.77614%2012.7761%207%2012.5%207H11.5C11.2239%207%2011%206.77614%2011%206.5V5.5C11%205.22386%2011.2239%205%2011.5%205H12.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Italic Icon */
.gravity-icon-italic {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.1596%204L8.52325%2014H10C10.5523%2014%2011%2014.4477%2011%2015C11%2015.5523%2010.5523%2016%2010%2016H4C3.44772%2016%203%2015.5523%203%2015C3%2014.4477%203.44772%2014%204%2014H6.20403L9.84039%204H8C7.44772%204%207%203.55228%207%203C7%202.44772%207.44772%202%208%202H14C14.5523%202%2015%202.44772%2015%203C15%203.55228%2014.5523%204%2014%204H12.1596Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.1596%204L8.52325%2014H10C10.5523%2014%2011%2014.4477%2011%2015C11%2015.5523%2010.5523%2016%2010%2016H4C3.44772%2016%203%2015.5523%203%2015C3%2014.4477%203.44772%2014%204%2014H6.20403L9.84039%204H8C7.44772%204%207%203.55228%207%203C7%202.44772%207.44772%202%208%202H14C14.5523%202%2015%202.44772%2015%203C15%203.55228%2014.5523%204%2014%204H12.1596Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-italic.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.267%2020H13C13.5523%2020%2014%2020.4477%2014%2021C14%2021.5523%2013.5523%2022%2013%2022H5C4.44772%2022%204%2021.5523%204%2021C4%2020.4477%204.44772%2020%205%2020H7.733L13.733%204H11C10.4477%204%2010%203.55228%2010%203C10%202.44772%2010.4477%202%2011%202H19C19.5523%202%2020%202.44772%2020%203C20%203.55228%2019.5523%204%2019%204H16.267L10.267%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.267%2020H13C13.5523%2020%2014%2020.4477%2014%2021C14%2021.5523%2013.5523%2022%2013%2022H5C4.44772%2022%204%2021.5523%204%2021C4%2020.4477%204.44772%2020%205%2020H7.733L13.733%204H11C10.4477%204%2010%203.55228%2010%203C10%202.44772%2010.4477%202%2011%202H19C19.5523%202%2020%202.44772%2020%203C20%203.55228%2019.5523%204%2019%204H16.267L10.267%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Justify Center Icon */
.gravity-icon-justify-center {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2014C13.5523%2014%2014%2014.4477%2014%2015C14%2015.5523%2013.5523%2016%2013%2016H5C4.44772%2016%204%2015.5523%204%2015C4%2014.4477%204.44772%2014%205%2014H13ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM13%206C13.5523%206%2014%206.44772%2014%207C14%207.55228%2013.5523%208%2013%208H5C4.44772%208%204%207.55228%204%207C4%206.44772%204.44772%206%205%206H13ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2014C13.5523%2014%2014%2014.4477%2014%2015C14%2015.5523%2013.5523%2016%2013%2016H5C4.44772%2016%204%2015.5523%204%2015C4%2014.4477%204.44772%2014%205%2014H13ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM13%206C13.5523%206%2014%206.44772%2014%207C14%207.55228%2013.5523%208%2013%208H5C4.44772%208%204%207.55228%204%207C4%206.44772%204.44772%206%205%206H13ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-justify-center.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM17%2015C17.5523%2015%2018%2015.4477%2018%2016C18%2016.5523%2017.5523%2017%2017%2017H7C6.44772%2017%206%2016.5523%206%2016C6%2015.4477%206.44772%2015%207%2015H17ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM17%207C17.5523%207%2018%207.44772%2018%208C18%208.55228%2017.5523%209%2017%209H7C6.44772%209%206%208.55228%206%208C6%207.44772%206.44772%207%207%207H17ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM17%2015C17.5523%2015%2018%2015.4477%2018%2016C18%2016.5523%2017.5523%2017%2017%2017H7C6.44772%2017%206%2016.5523%206%2016C6%2015.4477%206.44772%2015%207%2015H17ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM17%207C17.5523%207%2018%207.44772%2018%208C18%208.55228%2017.5523%209%2017%209H7C6.44772%209%206%208.55228%206%208C6%207.44772%206.44772%207%207%207H17ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Justify Full Icon */
.gravity-icon-justify-full {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H2C1.44772%208%201%207.55228%201%207C1%206.44772%201.44772%206%202%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H2C1.44772%208%201%207.55228%201%207C1%206.44772%201.44772%206%202%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-justify-full.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H3C2.44772%2017%202%2016.5523%202%2016C2%2015.4477%202.44772%2015%203%2015H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H3C2.44772%209%202%208.55228%202%208C2%207.44772%202.44772%207%203%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H3C2.44772%2017%202%2016.5523%202%2016C2%2015.4477%202.44772%2015%203%2015H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H3C2.44772%209%202%208.55228%202%208C2%207.44772%202.44772%207%203%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Justify Left Icon */
.gravity-icon-justify-left {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%2014C10.5523%2014%2011%2014.4477%2011%2015C11%2015.5523%2010.5523%2016%2010%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H10ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM10%206C10.5523%206%2011%206.44772%2011%207C11%207.55228%2010.5523%208%2010%208H2C1.44772%208%201%207.55228%201%207C1%206.44772%201.44772%206%202%206H10ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%2014C10.5523%2014%2011%2014.4477%2011%2015C11%2015.5523%2010.5523%2016%2010%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H10ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM10%206C10.5523%206%2011%206.44772%2011%207C11%207.55228%2010.5523%208%2010%208H2C1.44772%208%201%207.55228%201%207C1%206.44772%201.44772%206%202%206H10ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-justify-left.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM15%2015C15.5523%2015%2016%2015.4477%2016%2016C16%2016.5523%2015.5523%2017%2015%2017H3C2.44772%2017%202%2016.5523%202%2016C2%2015.4477%202.44772%2015%203%2015H15ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM15%207C15.5523%207%2016%207.44772%2016%208C16%208.55228%2015.5523%209%2015%209H3C2.44772%209%202%208.55228%202%208C2%207.44772%202.44772%207%203%207H15ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM15%2015C15.5523%2015%2016%2015.4477%2016%2016C16%2016.5523%2015.5523%2017%2015%2017H3C2.44772%2017%202%2016.5523%202%2016C2%2015.4477%202.44772%2015%203%2015H15ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM15%207C15.5523%207%2016%207.44772%2016%208C16%208.55228%2015.5523%209%2015%209H3C2.44772%209%202%208.55228%202%208C2%207.44772%202.44772%207%203%207H15ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Justify Right Icon */
.gravity-icon-justify-right {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H8C7.44772%2016%207%2015.5523%207%2015C7%2014.4477%207.44772%2014%208%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H8C7.44772%2016%207%2015.5523%207%2015C7%2014.4477%207.44772%2014%208%2014H16ZM16%2010C16.5523%2010%2017%2010.4477%2017%2011C17%2011.5523%2016.5523%2012%2016%2012H2C1.44772%2012%201%2011.5523%201%2011C1%2010.4477%201.44772%2010%202%2010H16ZM16%206C16.5523%206%2017%206.44772%2017%207C17%207.55228%2016.5523%208%2016%208H8C7.44772%208%207%207.55228%207%207C7%206.44772%207.44772%206%208%206H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-justify-right.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H9C8.44772%2017%208%2016.5523%208%2016C8%2015.4477%208.44772%2015%209%2015H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H9C8.44772%209%208%208.55228%208%208C8%207.44772%208.44772%207%209%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2015C21.5523%2015%2022%2015.4477%2022%2016C22%2016.5523%2021.5523%2017%2021%2017H9C8.44772%2017%208%2016.5523%208%2016C8%2015.4477%208.44772%2015%209%2015H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%207C21.5523%207%2022%207.44772%2022%208C22%208.55228%2021.5523%209%2021%209H9C8.44772%209%208%208.55228%208%208C8%207.44772%208.44772%207%209%207H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Left Maximize Icon */
.gravity-icon-left-maximize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%202.00001C2.55228%202.00001%203%202.44773%203%203.00001V15C3%2015.5523%202.55228%2016%202%2016C1.44772%2016%201%2015.5523%201%2015V3.00001C1%202.44773%201.44772%202.00001%202%202.00001ZM10.7038%202.28943L16.7071%208.2899C17.0976%208.68024%2017.0976%209.31311%2016.7071%209.70344L10.7038%2015.7039C10.3132%2016.0943%209.68008%2016.0943%209.28956%2015.7039C8.89903%2015.3136%208.89903%2014.6807%209.28956%2014.2904L13.582%2010H5C4.44772%2010%204%209.55229%204%209.00001C4%208.44773%204.44772%208.00001%205%208.00001H13.5886L9.28956%203.70297C8.89903%203.31263%208.89903%202.67977%209.28956%202.28943C9.68008%201.89909%2010.3132%201.89909%2010.7038%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%202.00001C2.55228%202.00001%203%202.44773%203%203.00001V15C3%2015.5523%202.55228%2016%202%2016C1.44772%2016%201%2015.5523%201%2015V3.00001C1%202.44773%201.44772%202.00001%202%202.00001ZM10.7038%202.28943L16.7071%208.2899C17.0976%208.68024%2017.0976%209.31311%2016.7071%209.70344L10.7038%2015.7039C10.3132%2016.0943%209.68008%2016.0943%209.28956%2015.7039C8.89903%2015.3136%208.89903%2014.6807%209.28956%2014.2904L13.582%2010H5C4.44772%2010%204%209.55229%204%209.00001C4%208.44773%204.44772%208.00001%205%208.00001H13.5886L9.28956%203.70297C8.89903%203.31263%208.89903%202.67977%209.28956%202.28943C9.68008%201.89909%2010.3132%201.89909%2010.7038%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-left-maximize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.7056%202.29143L22.7071%2011.2929C23.0976%2011.6834%2023.0976%2012.3166%2022.7071%2012.7071L13.7059%2021.7088C13.3154%2022.0993%2012.6822%2022.0993%2012.2917%2021.7088C11.9011%2021.3183%2011.9011%2020.6851%2012.2916%2020.2946L19.5859%2013H6C5.44772%2013%205%2012.5523%205%2012C5%2011.4477%205.44772%2011%206%2011H19.5858L12.2914%203.70564C11.9009%203.31512%2011.9009%202.68195%2012.2914%202.29143C12.6819%201.9009%2013.3151%201.9009%2013.7056%202.29143ZM2%202C2.55228%202%203%202.44772%203%203V21C3%2021.5523%202.55228%2022%202%2022C1.44772%2022%201%2021.5523%201%2021V3C1%202.44772%201.44772%202%202%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.7056%202.29143L22.7071%2011.2929C23.0976%2011.6834%2023.0976%2012.3166%2022.7071%2012.7071L13.7059%2021.7088C13.3154%2022.0993%2012.6822%2022.0993%2012.2917%2021.7088C11.9011%2021.3183%2011.9011%2020.6851%2012.2916%2020.2946L19.5859%2013H6C5.44772%2013%205%2012.5523%205%2012C5%2011.4477%205.44772%2011%206%2011H19.5858L12.2914%203.70564C11.9009%203.31512%2011.9009%202.68195%2012.2914%202.29143C12.6819%201.9009%2013.3151%201.9009%2013.7056%202.29143ZM2%202C2.55228%202%203%202.44772%203%203V21C3%2021.5523%202.55228%2022%202%2022C1.44772%2022%201%2021.5523%201%2021V3C1%202.44772%201.44772%202%202%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Left Minimize Icon */
.gravity-icon-left-minimize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%202.00001C2.55228%202.00001%203%202.44773%203%203.00001V15C3%2015.5523%202.55228%2016%202%2016C1.44772%2016%201%2015.5523%201%2015V3.00001C1%202.44773%201.44772%202.00001%202%202.00001ZM11.7104%202.28943C12.101%202.67977%2012.101%203.31263%2011.7104%203.70297L7.41135%208.00001H16C16.5523%208.00001%2017%208.44773%2017%209.00001C17%209.55229%2016.5523%2010%2016%2010H7.41803L11.7104%2014.2904C12.101%2014.6807%2012.101%2015.3136%2011.7104%2015.7039C11.3199%2016.0943%2010.6868%2016.0943%2010.2962%2015.7039L4.29289%209.70344C3.90237%209.31311%203.90237%208.68024%204.29289%208.2899L10.2962%202.28943C10.6868%201.89909%2011.3199%201.89909%2011.7104%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%202.00001C2.55228%202.00001%203%202.44773%203%203.00001V15C3%2015.5523%202.55228%2016%202%2016C1.44772%2016%201%2015.5523%201%2015V3.00001C1%202.44773%201.44772%202.00001%202%202.00001ZM11.7104%202.28943C12.101%202.67977%2012.101%203.31263%2011.7104%203.70297L7.41135%208.00001H16C16.5523%208.00001%2017%208.44773%2017%209.00001C17%209.55229%2016.5523%2010%2016%2010H7.41803L11.7104%2014.2904C12.101%2014.6807%2012.101%2015.3136%2011.7104%2015.7039C11.3199%2016.0943%2010.6868%2016.0943%2010.2962%2015.7039L4.29289%209.70344C3.90237%209.31311%203.90237%208.68024%204.29289%208.2899L10.2962%202.28943C10.6868%201.89909%2011.3199%201.89909%2011.7104%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-left-minimize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.7086%202.29143C16.0991%202.68195%2016.0991%203.31512%2015.7086%203.70564L8.41421%2011H22C22.5523%2011%2023%2011.4477%2023%2012C23%2012.5523%2022.5523%2013%2022%2013H8.41413L15.7084%2020.2946C16.0989%2020.6851%2016.0989%2021.3183%2015.7083%2021.7088C15.3178%2022.0993%2014.6846%2022.0993%2014.2941%2021.7088L5.29288%2012.7071C4.90237%2012.3166%204.90238%2011.6834%205.29289%2011.2929L14.2944%202.29143C14.6849%201.9009%2015.3181%201.9009%2015.7086%202.29143ZM2%202C2.55228%202%203%202.44772%203%203V21C3%2021.5523%202.55228%2022%202%2022C1.44772%2022%201%2021.5523%201%2021V3C1%202.44772%201.44772%202%202%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.7086%202.29143C16.0991%202.68195%2016.0991%203.31512%2015.7086%203.70564L8.41421%2011H22C22.5523%2011%2023%2011.4477%2023%2012C23%2012.5523%2022.5523%2013%2022%2013H8.41413L15.7084%2020.2946C16.0989%2020.6851%2016.0989%2021.3183%2015.7083%2021.7088C15.3178%2022.0993%2014.6846%2022.0993%2014.2941%2021.7088L5.29288%2012.7071C4.90237%2012.3166%204.90238%2011.6834%205.29289%2011.2929L14.2944%202.29143C14.6849%201.9009%2015.3181%201.9009%2015.7086%202.29143ZM2%202C2.55228%202%203%202.44772%203%203V21C3%2021.5523%202.55228%2022%202%2022C1.44772%2022%201%2021.5523%201%2021V3C1%202.44772%201.44772%202%202%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Link Off Icon */
.gravity-icon-link-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.61872%202.38128L4.60628%203.36884C4.64831%203.45931%204.70665%203.54408%204.78128%203.61872L15.7937%2014.6312C15.9441%2014.9549%2015.8858%2015.3516%2015.6187%2015.6187C15.277%2015.9604%2014.723%2015.9604%2014.3813%2015.6187L12.7576%2013.995H11.0057C10.5225%2013.995%2010.1307%2013.6032%2010.1307%2013.12C10.1307%2012.6739%2010.4645%2012.3058%2010.896%2012.2518L11.0076%2012.245L8.76256%2010H6C5.44772%2010%205%209.55228%205%209C5%208.44772%205.44772%208%206%208H6.76256L4.56571%205.80314C3.04042%206.06848%201.88071%207.39881%201.88071%209C1.88071%2010.7922%203.33355%2012.245%205.12571%2012.245H6.99429C7.47753%2012.245%207.86929%2012.6368%207.86929%2013.12C7.86929%2013.6032%207.47753%2013.995%206.99429%2013.995H5.12571C2.36705%2013.995%200.130714%2011.7587%200.130714%209C0.130714%206.93677%201.38165%205.16571%203.16646%204.40389L2.38128%203.61872C2.03957%203.27701%202.03957%202.72299%202.38128%202.38128C2.72299%202.03957%203.27701%202.03957%203.61872%202.38128ZM12.8743%204.005C15.6329%204.005%2017.8693%206.24134%2017.8693%209C17.8693%2010.4396%2017.2603%2011.7369%2016.2859%2012.6484L15.0474%2011.4099C15.7056%2010.8161%2016.1193%209.95634%2016.1193%209C16.1193%207.20784%2014.6665%205.755%2012.8743%205.755H11.0057C10.5225%205.755%2010.1307%205.36325%2010.1307%204.88C10.1307%204.39675%2010.5225%204.005%2011.0057%204.005H12.8743Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.61872%202.38128L4.60628%203.36884C4.64831%203.45931%204.70665%203.54408%204.78128%203.61872L15.7937%2014.6312C15.9441%2014.9549%2015.8858%2015.3516%2015.6187%2015.6187C15.277%2015.9604%2014.723%2015.9604%2014.3813%2015.6187L12.7576%2013.995H11.0057C10.5225%2013.995%2010.1307%2013.6032%2010.1307%2013.12C10.1307%2012.6739%2010.4645%2012.3058%2010.896%2012.2518L11.0076%2012.245L8.76256%2010H6C5.44772%2010%205%209.55228%205%209C5%208.44772%205.44772%208%206%208H6.76256L4.56571%205.80314C3.04042%206.06848%201.88071%207.39881%201.88071%209C1.88071%2010.7922%203.33355%2012.245%205.12571%2012.245H6.99429C7.47753%2012.245%207.86929%2012.6368%207.86929%2013.12C7.86929%2013.6032%207.47753%2013.995%206.99429%2013.995H5.12571C2.36705%2013.995%200.130714%2011.7587%200.130714%209C0.130714%206.93677%201.38165%205.16571%203.16646%204.40389L2.38128%203.61872C2.03957%203.27701%202.03957%202.72299%202.38128%202.38128C2.72299%202.03957%203.27701%202.03957%203.61872%202.38128ZM12.8743%204.005C15.6329%204.005%2017.8693%206.24134%2017.8693%209C17.8693%2010.4396%2017.2603%2011.7369%2016.2859%2012.6484L15.0474%2011.4099C15.7056%2010.8161%2016.1193%209.95634%2016.1193%209C16.1193%207.20784%2014.6665%205.755%2012.8743%205.755H11.0057C10.5225%205.755%2010.1307%205.36325%2010.1307%204.88C10.1307%204.39675%2010.5225%204.005%2011.0057%204.005H12.8743Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-link-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.70711%203.29289L5.96534%204.55113C6.00182%204.60625%206.04434%204.65855%206.09289%204.70711L20.8347%2019.4489C21.0916%2019.8371%2021.0491%2020.3651%2020.7071%2020.7071C20.3166%2021.0976%2019.6834%2021.0976%2019.2929%2020.7071L16.5858%2018H14C13.4477%2018%2013%2017.5523%2013%2017C13%2016.4477%2013.4477%2016%2014%2016H14.5858L11.5858%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H9.58579L6.60504%208.01925C4.5813%208.21761%203%209.92414%203%2012C3%2014.2091%204.79086%2016%207%2016H10C10.5523%2016%2011%2016.4477%2011%2017C11%2017.5523%2010.5523%2018%2010%2018H7C3.68629%2018%201%2015.3137%201%2012C1%209.40763%202.64407%207.19925%204.94642%206.36064L3.29289%204.70711C2.90237%204.31658%202.90237%203.68342%203.29289%203.29289C3.68342%202.90237%204.31658%202.90237%204.70711%203.29289ZM17%206C20.3137%206%2023%208.68629%2023%2012C23%2013.8569%2022.1564%2015.5168%2020.8316%2016.6174L19.4083%2015.1941C20.3751%2014.4639%2021%2013.3049%2021%2012C21%209.79086%2019.2091%208%2017%208H14C13.4477%208%2013%207.55228%2013%207C13%206.44772%2013.4477%206%2014%206H17Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.70711%203.29289L5.96534%204.55113C6.00182%204.60625%206.04434%204.65855%206.09289%204.70711L20.8347%2019.4489C21.0916%2019.8371%2021.0491%2020.3651%2020.7071%2020.7071C20.3166%2021.0976%2019.6834%2021.0976%2019.2929%2020.7071L16.5858%2018H14C13.4477%2018%2013%2017.5523%2013%2017C13%2016.4477%2013.4477%2016%2014%2016H14.5858L11.5858%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H9.58579L6.60504%208.01925C4.5813%208.21761%203%209.92414%203%2012C3%2014.2091%204.79086%2016%207%2016H10C10.5523%2016%2011%2016.4477%2011%2017C11%2017.5523%2010.5523%2018%2010%2018H7C3.68629%2018%201%2015.3137%201%2012C1%209.40763%202.64407%207.19925%204.94642%206.36064L3.29289%204.70711C2.90237%204.31658%202.90237%203.68342%203.29289%203.29289C3.68342%202.90237%204.31658%202.90237%204.70711%203.29289ZM17%206C20.3137%206%2023%208.68629%2023%2012C23%2013.8569%2022.1564%2015.5168%2020.8316%2016.6174L19.4083%2015.1941C20.3751%2014.4639%2021%2013.3049%2021%2012C21%209.79086%2019.2091%208%2017%208H14C13.4477%208%2013%207.55228%2013%207C13%206.44772%2013.4477%206%2014%206H17Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Link On Icon */
.gravity-icon-link-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.8743%204.005C15.6329%204.005%2017.8693%206.24134%2017.8693%209C17.8693%2011.7587%2015.6329%2013.995%2012.8743%2013.995H11.0057C10.5225%2013.995%2010.1307%2013.6033%2010.1307%2013.12C10.1307%2012.6368%2010.5225%2012.245%2011.0057%2012.245H12.8743C14.6665%2012.245%2016.1193%2010.7922%2016.1193%209C16.1193%207.20784%2014.6665%205.755%2012.8743%205.755H11.0057C10.5225%205.755%2010.1307%205.36325%2010.1307%204.88C10.1307%204.39676%2010.5225%204.005%2011.0057%204.005H12.8743ZM6.99429%204.005C7.47753%204.005%207.86929%204.39676%207.86929%204.88C7.86929%205.36325%207.47753%205.755%206.99429%205.755H5.12571C3.33355%205.755%201.88071%207.20784%201.88071%209C1.88071%2010.7922%203.33355%2012.245%205.12571%2012.245H6.99429C7.47753%2012.245%207.86929%2012.6368%207.86929%2013.12C7.86929%2013.6033%207.47753%2013.995%206.99429%2013.995H5.12571C2.36705%2013.995%200.130714%2011.7587%200.130714%209C0.130714%206.24134%202.36705%204.005%205.12571%204.005H6.99429ZM12%208.00001C12.5523%208.00001%2013%208.44772%2013%209.00001C13%209.55229%2012.5523%2010%2012%2010H6C5.44772%2010%205%209.55229%205%209.00001C5%208.44772%205.44772%208.00001%206%208.00001H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.8743%204.005C15.6329%204.005%2017.8693%206.24134%2017.8693%209C17.8693%2011.7587%2015.6329%2013.995%2012.8743%2013.995H11.0057C10.5225%2013.995%2010.1307%2013.6033%2010.1307%2013.12C10.1307%2012.6368%2010.5225%2012.245%2011.0057%2012.245H12.8743C14.6665%2012.245%2016.1193%2010.7922%2016.1193%209C16.1193%207.20784%2014.6665%205.755%2012.8743%205.755H11.0057C10.5225%205.755%2010.1307%205.36325%2010.1307%204.88C10.1307%204.39676%2010.5225%204.005%2011.0057%204.005H12.8743ZM6.99429%204.005C7.47753%204.005%207.86929%204.39676%207.86929%204.88C7.86929%205.36325%207.47753%205.755%206.99429%205.755H5.12571C3.33355%205.755%201.88071%207.20784%201.88071%209C1.88071%2010.7922%203.33355%2012.245%205.12571%2012.245H6.99429C7.47753%2012.245%207.86929%2012.6368%207.86929%2013.12C7.86929%2013.6033%207.47753%2013.995%206.99429%2013.995H5.12571C2.36705%2013.995%200.130714%2011.7587%200.130714%209C0.130714%206.24134%202.36705%204.005%205.12571%204.005H6.99429ZM12%208.00001C12.5523%208.00001%2013%208.44772%2013%209.00001C13%209.55229%2012.5523%2010%2012%2010H6C5.44772%2010%205%209.55229%205%209.00001C5%208.44772%205.44772%208.00001%206%208.00001H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-link-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%206C20.3137%206%2023%208.68629%2023%2012C23%2015.3137%2020.3137%2018%2017%2018H14C13.4477%2018%2013%2017.5523%2013%2017C13%2016.4477%2013.4477%2016%2014%2016H17C19.2091%2016%2021%2014.2091%2021%2012C21%209.79086%2019.2091%208%2017%208H14C13.4477%208%2013%207.55228%2013%207C13%206.44772%2013.4477%206%2014%206H17ZM10%206C10.5523%206%2011%206.44772%2011%207C11%207.55228%2010.5523%208%2010%208H7C4.79086%208%203%209.79086%203%2012C3%2014.2091%204.79086%2016%207%2016H10C10.5523%2016%2011%2016.4477%2011%2017C11%2017.5523%2010.5523%2018%2010%2018H7C3.68629%2018%201%2015.3137%201%2012C1%208.68629%203.68629%206%207%206H10ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012C17%2012.5523%2016.5523%2013%2016%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%206C20.3137%206%2023%208.68629%2023%2012C23%2015.3137%2020.3137%2018%2017%2018H14C13.4477%2018%2013%2017.5523%2013%2017C13%2016.4477%2013.4477%2016%2014%2016H17C19.2091%2016%2021%2014.2091%2021%2012C21%209.79086%2019.2091%208%2017%208H14C13.4477%208%2013%207.55228%2013%207C13%206.44772%2013.4477%206%2014%206H17ZM10%206C10.5523%206%2011%206.44772%2011%207C11%207.55228%2010.5523%208%2010%208H7C4.79086%208%203%209.79086%203%2012C3%2014.2091%204.79086%2016%207%2016H10C10.5523%2016%2011%2016.4477%2011%2017C11%2017.5523%2010.5523%2018%2010%2018H7C3.68629%2018%201%2015.3137%201%2012C1%208.68629%203.68629%206%207%206H10ZM16%2011C16.5523%2011%2017%2011.4477%2017%2012C17%2012.5523%2016.5523%2013%2016%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Link Out Icon */
.gravity-icon-link-out {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.51334%204.12501C6.99659%204.12501%207.38834%204.51676%207.38834%205.00001C7.38834%205.48325%206.99659%205.87501%206.51334%205.87501H2.88C2.81097%205.87501%202.755%205.93097%202.755%206.00001V15.12C2.755%2015.189%202.81097%2015.245%202.88%2015.245H12C12.069%2015.245%2012.125%2015.189%2012.125%2015.12V11.4867C12.125%2011.0034%2012.5168%2010.6117%2013%2010.6117C13.4833%2010.6117%2013.875%2011.0034%2013.875%2011.4867V15.12C13.875%2016.1555%2013.0355%2016.995%2012%2016.995H2.88C1.84447%2016.995%201.005%2016.1555%201.005%2015.12V6.00001C1.005%204.96447%201.84447%204.12501%202.88%204.12501H6.51334ZM15.87%201.005C16.4499%201.005%2016.9273%201.44377%2016.9884%202.00742L16.995%202.13V8.12C16.995%208.60325%2016.6033%208.995%2016.12%208.995C15.6739%208.995%2015.3058%208.66121%2015.2518%208.22976L15.245%208.12L15.2443%203.992L8.08599%2011.1515C7.77276%2011.4647%207.28112%2011.4908%206.93816%2011.2298L6.84855%2011.1515C6.53532%2010.8382%206.50922%2010.3466%206.77024%2010.0036L6.84855%209.91402L14.0073%202.755H9.88C9.43393%202.755%209.06582%202.42121%209.01182%201.98976L9.005%201.88C9.005%201.43393%209.3388%201.06582%209.77025%201.01182L9.88%201.005H15.87Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.51334%204.12501C6.99659%204.12501%207.38834%204.51676%207.38834%205.00001C7.38834%205.48325%206.99659%205.87501%206.51334%205.87501H2.88C2.81097%205.87501%202.755%205.93097%202.755%206.00001V15.12C2.755%2015.189%202.81097%2015.245%202.88%2015.245H12C12.069%2015.245%2012.125%2015.189%2012.125%2015.12V11.4867C12.125%2011.0034%2012.5168%2010.6117%2013%2010.6117C13.4833%2010.6117%2013.875%2011.0034%2013.875%2011.4867V15.12C13.875%2016.1555%2013.0355%2016.995%2012%2016.995H2.88C1.84447%2016.995%201.005%2016.1555%201.005%2015.12V6.00001C1.005%204.96447%201.84447%204.12501%202.88%204.12501H6.51334ZM15.87%201.005C16.4499%201.005%2016.9273%201.44377%2016.9884%202.00742L16.995%202.13V8.12C16.995%208.60325%2016.6033%208.995%2016.12%208.995C15.6739%208.995%2015.3058%208.66121%2015.2518%208.22976L15.245%208.12L15.2443%203.992L8.08599%2011.1515C7.77276%2011.4647%207.28112%2011.4908%206.93816%2011.2298L6.84855%2011.1515C6.53532%2010.8382%206.50922%2010.3466%206.77024%2010.0036L6.84855%209.91402L14.0073%202.755H9.88C9.43393%202.755%209.06582%202.42121%209.01182%201.98976L9.005%201.88C9.005%201.43393%209.3388%201.06582%209.77025%201.01182L9.88%201.005H15.87Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-link-out.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.61111%204C9.1634%204%209.61111%204.44772%209.61111%205C9.61111%205.55228%209.1634%206%208.61111%206H3V21H18V15.3889C18%2014.8366%2018.4477%2014.3889%2019%2014.3889C19.5523%2014.3889%2020%2014.8366%2020%2015.3889V21C20%2022.1046%2019.1046%2023%2018%2023H3C1.89543%2023%201%2022.1046%201%2021V6C1%204.89543%201.89543%204%203%204H8.61111ZM21.75%201C22.3972%201%2022.9295%201.49187%2022.9935%202.12219L23%202.25V11C23%2011.5523%2022.5523%2012%2022%2012C21.4872%2012%2021.0645%2011.614%2021.0067%2011.1166L21%2011L20.9993%204.414L10.2924%2015.1219C9.93187%2015.4823%209.36464%2015.5101%208.97235%2015.205L8.87814%2015.1219C8.51766%2014.7614%208.48993%2014.1941%208.79495%2013.8019L8.87814%2013.7076L19.5842%203H13C12.4872%203%2012.0645%202.61396%2012.0067%202.11662L12%202C12%201.48716%2012.386%201.06449%2012.8834%201.00673L13%201H21.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.61111%204C9.1634%204%209.61111%204.44772%209.61111%205C9.61111%205.55228%209.1634%206%208.61111%206H3V21H18V15.3889C18%2014.8366%2018.4477%2014.3889%2019%2014.3889C19.5523%2014.3889%2020%2014.8366%2020%2015.3889V21C20%2022.1046%2019.1046%2023%2018%2023H3C1.89543%2023%201%2022.1046%201%2021V6C1%204.89543%201.89543%204%203%204H8.61111ZM21.75%201C22.3972%201%2022.9295%201.49187%2022.9935%202.12219L23%202.25V11C23%2011.5523%2022.5523%2012%2022%2012C21.4872%2012%2021.0645%2011.614%2021.0067%2011.1166L21%2011L20.9993%204.414L10.2924%2015.1219C9.93187%2015.4823%209.36464%2015.5101%208.97235%2015.205L8.87814%2015.1219C8.51766%2014.7614%208.48993%2014.1941%208.79495%2013.8019L8.87814%2013.7076L19.5842%203H13C12.4872%203%2012.0645%202.61396%2012.0067%202.11662L12%202C12%201.48716%2012.386%201.06449%2012.8834%201.00673L13%201H21.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* List Order Icon */
.gravity-icon-list-order {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.7%2012C3.41797%2012%204%2012.582%204%2013.3V14.7C4%2015.418%203.41797%2016%202.7%2016H1.5C1.22386%2016%201%2015.7761%201%2015.5C1%2015.2239%201.22386%2015%201.5%2015H2.7C2.86569%2015%203%2014.8657%203%2014.7V14.5H2.5C2.22386%2014.5%202%2014.2761%202%2014C2%2013.7239%202.22386%2013.5%202.5%2013.5H3V13.3C3%2013.1343%202.86569%2013%202.7%2013H1.5C1.22386%2013%201%2012.7761%201%2012.5C1%2012.2239%201.22386%2012%201.5%2012H2.7ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.7917%207C3.45903%207%204%207.54348%204%208.2139C4%208.56394%203.84959%208.89694%203.58737%209.12745L2.59477%2010H3.48617C3.76231%2010%203.98617%2010.2239%203.98617%2010.5C3.98617%2010.7761%203.76231%2011%203.48617%2011H1.5C1.22386%2011%201%2010.7761%201%2010.5C1%2010.2287%201.11657%209.97065%201.31978%209.79201L2.9319%208.37487C2.97811%208.33425%203.00461%208.27558%203.00461%208.2139C3.00461%208.09576%202.90929%208%202.7917%208H1.5C1.22386%208%201%207.77614%201%207.5C1%207.22386%201.22386%207%201.5%207H2.7917ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.3%202C2.6866%202%203%202.3134%203%202.7V5.5C3%205.77614%202.77614%206%202.5%206C2.22386%206%202%205.77614%202%205.5V3H1.5C1.22386%203%201%202.77614%201%202.5C1%202.22386%201.22386%202%201.5%202H2.3ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.7%2012C3.41797%2012%204%2012.582%204%2013.3V14.7C4%2015.418%203.41797%2016%202.7%2016H1.5C1.22386%2016%201%2015.7761%201%2015.5C1%2015.2239%201.22386%2015%201.5%2015H2.7C2.86569%2015%203%2014.8657%203%2014.7V14.5H2.5C2.22386%2014.5%202%2014.2761%202%2014C2%2013.7239%202.22386%2013.5%202.5%2013.5H3V13.3C3%2013.1343%202.86569%2013%202.7%2013H1.5C1.22386%2013%201%2012.7761%201%2012.5C1%2012.2239%201.22386%2012%201.5%2012H2.7ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.7917%207C3.45903%207%204%207.54348%204%208.2139C4%208.56394%203.84959%208.89694%203.58737%209.12745L2.59477%2010H3.48617C3.76231%2010%203.98617%2010.2239%203.98617%2010.5C3.98617%2010.7761%203.76231%2011%203.48617%2011H1.5C1.22386%2011%201%2010.7761%201%2010.5C1%2010.2287%201.11657%209.97065%201.31978%209.79201L2.9319%208.37487C2.97811%208.33425%203.00461%208.27558%203.00461%208.2139C3.00461%208.09576%202.90929%208%202.7917%208H1.5C1.22386%208%201%207.77614%201%207.5C1%207.22386%201.22386%207%201.5%207H2.7917ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.3%202C2.6866%202%203%202.3134%203%202.7V5.5C3%205.77614%202.77614%206%202.5%206C2.22386%206%202%205.77614%202%205.5V3H1.5C1.22386%203%201%202.77614%201%202.5C1%202.22386%201.22386%202%201.5%202H2.3ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-list-order.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.7%2016C4.41797%2016%205%2016.582%205%2017.3V18.7C5%2019.418%204.41797%2020%203.7%2020H2.5C2.22386%2020%202%2019.7761%202%2019.5C2%2019.2239%202.22386%2019%202.5%2019H3.7C3.86569%2019%204%2018.8657%204%2018.7V18.5H3.5C3.22386%2018.5%203%2018.2761%203%2018C3%2017.7239%203.22386%2017.5%203.5%2017.5H4V17.3C4%2017.1343%203.86569%2017%203.7%2017H2.5C2.22386%2017%202%2016.7761%202%2016.5C2%2016.2239%202.22386%2016%202.5%2016H3.7ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.7917%2010C4.45903%2010%205%2010.5435%205%2011.2139C5%2011.5639%204.84959%2011.8969%204.58737%2012.1274L3.59477%2013H4.48617C4.76231%2013%204.98617%2013.2239%204.98617%2013.5C4.98617%2013.7761%204.76231%2014%204.48617%2014H2.5C2.22386%2014%202%2013.7761%202%2013.5C2%2013.2287%202.11657%2012.9706%202.31978%2012.792L3.9319%2011.3749C3.97811%2011.3343%204.00461%2011.2756%204.00461%2011.2139C4.00461%2011.0958%203.90929%2011%203.7917%2011H2.5C2.22386%2011%202%2010.7761%202%2010.5C2%2010.2239%202.22386%2010%202.5%2010H3.7917ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.3%204C3.6866%204%204%204.3134%204%204.7V7.5C4%207.77614%203.77614%208%203.5%208C3.22386%208%203%207.77614%203%207.5V5H2.5C2.22386%205%202%204.77614%202%204.5C2%204.22386%202.22386%204%202.5%204H3.3ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.7%2016C4.41797%2016%205%2016.582%205%2017.3V18.7C5%2019.418%204.41797%2020%203.7%2020H2.5C2.22386%2020%202%2019.7761%202%2019.5C2%2019.2239%202.22386%2019%202.5%2019H3.7C3.86569%2019%204%2018.8657%204%2018.7V18.5H3.5C3.22386%2018.5%203%2018.2761%203%2018C3%2017.7239%203.22386%2017.5%203.5%2017.5H4V17.3C4%2017.1343%203.86569%2017%203.7%2017H2.5C2.22386%2017%202%2016.7761%202%2016.5C2%2016.2239%202.22386%2016%202.5%2016H3.7ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.7917%2010C4.45903%2010%205%2010.5435%205%2011.2139C5%2011.5639%204.84959%2011.8969%204.58737%2012.1274L3.59477%2013H4.48617C4.76231%2013%204.98617%2013.2239%204.98617%2013.5C4.98617%2013.7761%204.76231%2014%204.48617%2014H2.5C2.22386%2014%202%2013.7761%202%2013.5C2%2013.2287%202.11657%2012.9706%202.31978%2012.792L3.9319%2011.3749C3.97811%2011.3343%204.00461%2011.2756%204.00461%2011.2139C4.00461%2011.0958%203.90929%2011%203.7917%2011H2.5C2.22386%2011%202%2010.7761%202%2010.5C2%2010.2239%202.22386%2010%202.5%2010H3.7917ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.3%204C3.6866%204%204%204.3134%204%204.7V7.5C4%207.77614%203.77614%208%203.5%208C3.22386%208%203%207.77614%203%207.5V5H2.5C2.22386%205%202%204.77614%202%204.5C2%204.22386%202.22386%204%202.5%204H3.3ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* List Unorder Icon */
.gravity-icon-list-unorder {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%2012.75C2.94036%2012.75%203.5%2013.3096%203.5%2014C3.5%2014.6904%202.94036%2015.25%202.25%2015.25C1.55964%2015.25%201%2014.6904%201%2014C1%2013.3096%201.55964%2012.75%202.25%2012.75ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.25%207.75C2.94036%207.75%203.5%208.30964%203.5%209C3.5%209.69036%202.94036%2010.25%202.25%2010.25C1.55964%2010.25%201%209.69036%201%209C1%208.30964%201.55964%207.75%202.25%207.75ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.25%202.75C2.94036%202.75%203.5%203.30964%203.5%204C3.5%204.69036%202.94036%205.25%202.25%205.25C1.55964%205.25%201%204.69036%201%204C1%203.30964%201.55964%202.75%202.25%202.75ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%2012.75C2.94036%2012.75%203.5%2013.3096%203.5%2014C3.5%2014.6904%202.94036%2015.25%202.25%2015.25C1.55964%2015.25%201%2014.6904%201%2014C1%2013.3096%201.55964%2012.75%202.25%2012.75ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.25%207.75C2.94036%207.75%203.5%208.30964%203.5%209C3.5%209.69036%202.94036%2010.25%202.25%2010.25C1.55964%2010.25%201%209.69036%201%209C1%208.30964%201.55964%207.75%202.25%207.75ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.25%202.75C2.94036%202.75%203.5%203.30964%203.5%204C3.5%204.69036%202.94036%205.25%202.25%205.25C1.55964%205.25%201%204.69036%201%204C1%203.30964%201.55964%202.75%202.25%202.75ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-list-unorder.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2016.5C4.32843%2016.5%205%2017.1716%205%2018C5%2018.8284%204.32843%2019.5%203.5%2019.5C2.67157%2019.5%202%2018.8284%202%2018C2%2017.1716%202.67157%2016.5%203.5%2016.5ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.5%2010.5C4.32843%2010.5%205%2011.1716%205%2012C5%2012.8284%204.32843%2013.5%203.5%2013.5C2.67157%2013.5%202%2012.8284%202%2012C2%2011.1716%202.67157%2010.5%203.5%2010.5ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.5%204.5C4.32843%204.5%205%205.17157%205%206C5%206.82843%204.32843%207.5%203.5%207.5C2.67157%207.5%202%206.82843%202%206C2%205.17157%202.67157%204.5%203.5%204.5ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2016.5C4.32843%2016.5%205%2017.1716%205%2018C5%2018.8284%204.32843%2019.5%203.5%2019.5C2.67157%2019.5%202%2018.8284%202%2018C2%2017.1716%202.67157%2016.5%203.5%2016.5ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.5%2010.5C4.32843%2010.5%205%2011.1716%205%2012C5%2012.8284%204.32843%2013.5%203.5%2013.5C2.67157%2013.5%202%2012.8284%202%2012C2%2011.1716%202.67157%2010.5%203.5%2010.5ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.5%204.5C4.32843%204.5%205%205.17157%205%206C5%206.82843%204.32843%207.5%203.5%207.5C2.67157%207.5%202%206.82843%202%206C2%205.17157%202.67157%204.5%203.5%204.5ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* List View Icon */
.gravity-icon-list-view {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%2012.75C2.94036%2012.75%203.5%2013.3096%203.5%2014C3.5%2014.6904%202.94036%2015.25%202.25%2015.25C1.55964%2015.25%201%2014.6904%201%2014C1%2013.3096%201.55964%2012.75%202.25%2012.75ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.25%207.75C2.94036%207.75%203.5%208.30964%203.5%209C3.5%209.69036%202.94036%2010.25%202.25%2010.25C1.55964%2010.25%201%209.69036%201%209C1%208.30964%201.55964%207.75%202.25%207.75ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.25%202.75C2.94036%202.75%203.5%203.30964%203.5%204C3.5%204.69036%202.94036%205.25%202.25%205.25C1.55964%205.25%201%204.69036%201%204C1%203.30964%201.55964%202.75%202.25%202.75ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%2012.75C2.94036%2012.75%203.5%2013.3096%203.5%2014C3.5%2014.6904%202.94036%2015.25%202.25%2015.25C1.55964%2015.25%201%2014.6904%201%2014C1%2013.3096%201.55964%2012.75%202.25%2012.75ZM16%2013C16.5523%2013%2017%2013.4477%2017%2014C17%2014.5523%2016.5523%2015%2016%2015H7C6.44772%2015%206%2014.5523%206%2014C6%2013.4477%206.44772%2013%207%2013H16ZM2.25%207.75C2.94036%207.75%203.5%208.30964%203.5%209C3.5%209.69036%202.94036%2010.25%202.25%2010.25C1.55964%2010.25%201%209.69036%201%209C1%208.30964%201.55964%207.75%202.25%207.75ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H7C6.44772%2010%206%209.55228%206%209C6%208.44772%206.44772%208%207%208H16ZM2.25%202.75C2.94036%202.75%203.5%203.30964%203.5%204C3.5%204.69036%202.94036%205.25%202.25%205.25C1.55964%205.25%201%204.69036%201%204C1%203.30964%201.55964%202.75%202.25%202.75ZM16%203C16.5523%203%2017%203.44772%2017%204C17%204.55228%2016.5523%205%2016%205H7C6.44772%205%206%204.55228%206%204C6%203.44772%206.44772%203%207%203H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-list-view.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2016.5C4.32843%2016.5%205%2017.1716%205%2018C5%2018.8284%204.32843%2019.5%203.5%2019.5C2.67157%2019.5%202%2018.8284%202%2018C2%2017.1716%202.67157%2016.5%203.5%2016.5ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.5%2010.5C4.32843%2010.5%205%2011.1716%205%2012C5%2012.8284%204.32843%2013.5%203.5%2013.5C2.67157%2013.5%202%2012.8284%202%2012C2%2011.1716%202.67157%2010.5%203.5%2010.5ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.5%204.5C4.32843%204.5%205%205.17157%205%206C5%206.82843%204.32843%207.5%203.5%207.5C2.67157%207.5%202%206.82843%202%206C2%205.17157%202.67157%204.5%203.5%204.5ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2016.5C4.32843%2016.5%205%2017.1716%205%2018C5%2018.8284%204.32843%2019.5%203.5%2019.5C2.67157%2019.5%202%2018.8284%202%2018C2%2017.1716%202.67157%2016.5%203.5%2016.5ZM21%2017C21.5523%2017%2022%2017.4477%2022%2018C22%2018.5523%2021.5523%2019%2021%2019H8C7.44772%2019%207%2018.5523%207%2018C7%2017.4477%207.44772%2017%208%2017H21ZM3.5%2010.5C4.32843%2010.5%205%2011.1716%205%2012C5%2012.8284%204.32843%2013.5%203.5%2013.5C2.67157%2013.5%202%2012.8284%202%2012C2%2011.1716%202.67157%2010.5%203.5%2010.5ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H8C7.44772%2013%207%2012.5523%207%2012C7%2011.4477%207.44772%2011%208%2011H21ZM3.5%204.5C4.32843%204.5%205%205.17157%205%206C5%206.82843%204.32843%207.5%203.5%207.5C2.67157%207.5%202%206.82843%202%206C2%205.17157%202.67157%204.5%203.5%204.5ZM21%205C21.5523%205%2022%205.44772%2022%206C22%206.55228%2021.5523%207%2021%207H8C7.44772%207%207%206.55228%207%206C7%205.44772%207.44772%205%208%205H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Listen Icon */
.gravity-icon-listen {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%208.51341V7C2.25%203.68629%204.93629%201%208.25%201H9.75C13.0637%201%2015.75%203.68629%2015.75%207V8.51341C17.0899%209.23798%2018%2010.6556%2018%2012.2857V12.7143C18%2015.0812%2016.0812%2017%2013.7143%2017H13.5C12.6716%2017%2012%2016.3284%2012%2015.5V9.5C12%208.67157%2012.6716%208%2013.5%208H13.7143C13.8103%208%2013.9056%208.00316%2014%208.00937V7C14%204.65279%2012.0972%202.75%209.75%202.75H8.25C5.90279%202.75%204%204.65279%204%207V8.00937C4.09444%208.00316%204.18971%208%204.28571%208H4.5C5.32843%208%206%208.67157%206%209.5V15.5C6%2016.3284%205.32843%2017%204.5%2017H4.28571C1.91878%2017%200%2015.0812%200%2012.7143V12.2857C0%2010.6556%200.910143%209.23798%202.25%208.51341ZM1.75%2012.2857V12.7143C1.75%2014.1028%202.86603%2015.2306%204.25%2015.2498V9.75025C2.86603%209.76935%201.75%2010.8972%201.75%2012.2857ZM13.75%209.75025C15.134%209.76935%2016.25%2010.8972%2016.25%2012.2857V12.7143C16.25%2014.1028%2015.134%2015.2306%2013.75%2015.2498V9.75025Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.25%208.51341V7C2.25%203.68629%204.93629%201%208.25%201H9.75C13.0637%201%2015.75%203.68629%2015.75%207V8.51341C17.0899%209.23798%2018%2010.6556%2018%2012.2857V12.7143C18%2015.0812%2016.0812%2017%2013.7143%2017H13.5C12.6716%2017%2012%2016.3284%2012%2015.5V9.5C12%208.67157%2012.6716%208%2013.5%208H13.7143C13.8103%208%2013.9056%208.00316%2014%208.00937V7C14%204.65279%2012.0972%202.75%209.75%202.75H8.25C5.90279%202.75%204%204.65279%204%207V8.00937C4.09444%208.00316%204.18971%208%204.28571%208H4.5C5.32843%208%206%208.67157%206%209.5V15.5C6%2016.3284%205.32843%2017%204.5%2017H4.28571C1.91878%2017%200%2015.0812%200%2012.7143V12.2857C0%2010.6556%200.910143%209.23798%202.25%208.51341ZM1.75%2012.2857V12.7143C1.75%2014.1028%202.86603%2015.2306%204.25%2015.2498V9.75025C2.86603%209.76935%201.75%2010.8972%201.75%2012.2857ZM13.75%209.75025C15.134%209.76935%2016.25%2010.8972%2016.25%2012.2857V12.7143C16.25%2014.1028%2015.134%2015.2306%2013.75%2015.2498V9.75025Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-listen.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2011.6845C22.7865%2012.6506%2024%2014.5407%2024%2016.7143V17.2857C24%2020.4416%2021.4416%2023%2018.2857%2023H18C16.8954%2023%2016%2022.1046%2016%2021V13C16%2011.8954%2016.8954%2011%2018%2011H18.2857C18.5276%2011%2018.766%2011.015%2019%2011.0442V9C19%205.68629%2016.3137%203%2013%203H11C7.68629%203%205%205.68629%205%209V11.0442C5.234%2011.015%205.47239%2011%205.71429%2011H6C7.10457%2011%208%2011.8954%208%2013V21C8%2022.1046%207.10457%2023%206%2023H5.71429C2.55837%2023%200%2020.4416%200%2017.2857V16.7143C0%2014.5407%201.21352%2012.6506%203%2011.6845V9C3%204.58172%206.58172%201%2011%201H13C17.4183%201%2021%204.58172%2021%209V11.6845ZM18.2857%2013H18V21H18.2857C20.3371%2021%2022%2019.3371%2022%2017.2857V16.7143C22%2014.6629%2020.3371%2013%2018.2857%2013ZM2%2016.7143C2%2014.6629%203.66294%2013%205.71429%2013H6V21H5.71429C3.66294%2021%202%2019.3371%202%2017.2857V16.7143Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2011.6845C22.7865%2012.6506%2024%2014.5407%2024%2016.7143V17.2857C24%2020.4416%2021.4416%2023%2018.2857%2023H18C16.8954%2023%2016%2022.1046%2016%2021V13C16%2011.8954%2016.8954%2011%2018%2011H18.2857C18.5276%2011%2018.766%2011.015%2019%2011.0442V9C19%205.68629%2016.3137%203%2013%203H11C7.68629%203%205%205.68629%205%209V11.0442C5.234%2011.015%205.47239%2011%205.71429%2011H6C7.10457%2011%208%2011.8954%208%2013V21C8%2022.1046%207.10457%2023%206%2023H5.71429C2.55837%2023%200%2020.4416%200%2017.2857V16.7143C0%2014.5407%201.21352%2012.6506%203%2011.6845V9C3%204.58172%206.58172%201%2011%201H13C17.4183%201%2021%204.58172%2021%209V11.6845ZM18.2857%2013H18V21H18.2857C20.3371%2021%2022%2019.3371%2022%2017.2857V16.7143C22%2014.6629%2020.3371%2013%2018.2857%2013ZM2%2016.7143C2%2014.6629%203.66294%2013%205.71429%2013H6V21H5.71429C3.66294%2021%202%2019.3371%202%2017.2857V16.7143Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Lock Off Icon */
.gravity-icon-lock-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C11.419%200%2013.4367%201.71776%2013.9%204H11.8293C11.4175%202.83481%2010.3062%202%209%202C7.34315%202%206%203.34315%206%205V6H14.25C15.2165%206%2016%206.7835%2016%207.75V15.25C16%2016.2165%2015.2165%2017%2014.25%2017H3.75C2.7835%2017%202%2016.2165%202%2015.25V7.75C2%206.7835%202.7835%206%203.75%206H4V5C4%202.23858%206.23858%200%209%200ZM14.25%207.75H3.75V15.25H14.25V7.75ZM8.99762%209C9.9135%209%2010.6646%209.70534%2010.7375%2010.6025L10.7432%2010.7544C10.7432%2011.3454%2010.4495%2011.8679%2010%2012.1837V13.7C10%2013.8657%209.86569%2014%209.7%2014H8.3C8.13431%2014%208%2013.8657%208%2013.7V12.187C7.58894%2011.9002%207.30708%2011.4411%207.25923%2010.9143L7.252%2010.7456C7.252%209.78154%208.03354%209%208.99762%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C11.419%200%2013.4367%201.71776%2013.9%204H11.8293C11.4175%202.83481%2010.3062%202%209%202C7.34315%202%206%203.34315%206%205V6H14.25C15.2165%206%2016%206.7835%2016%207.75V15.25C16%2016.2165%2015.2165%2017%2014.25%2017H3.75C2.7835%2017%202%2016.2165%202%2015.25V7.75C2%206.7835%202.7835%206%203.75%206H4V5C4%202.23858%206.23858%200%209%200ZM14.25%207.75H3.75V15.25H14.25V7.75ZM8.99762%209C9.9135%209%2010.6646%209.70534%2010.7375%2010.6025L10.7432%2010.7544C10.7432%2011.3454%2010.4495%2011.8679%2010%2012.1837V13.7C10%2013.8657%209.86569%2014%209.7%2014H8.3C8.13431%2014%208%2013.8657%208%2013.7V12.187C7.58894%2011.9002%207.30708%2011.4411%207.25923%2010.9143L7.252%2010.7456C7.252%209.78154%208.03354%209%208.99762%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-lock-off.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C9.86384%201%2011.4299%202.27477%2011.874%204H10.0718C9.6998%203.23065%208.91187%202.7%208%202.7C6.72974%202.7%205.7%203.72974%205.7%205V6H12.5C13.3284%206%2014%206.67157%2014%207.5V13.5C14%2014.3284%2013.3284%2015%2012.5%2015H3.5C2.67157%2015%202%2014.3284%202%2013.5V7.5C2%206.67157%202.67157%206%203.5%206H4V5C4%202.79086%205.79086%201%208%201ZM12.3%207.7H3.7V13.3H12.3V7.7ZM8.5%209C8.77614%209%209%209.22386%209%209.5V11.5C9%2011.7761%208.77614%2012%208.5%2012H7.5C7.22386%2012%207%2011.7761%207%2011.5V9.5C7%209.22386%207.22386%209%207.5%209H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C9.86384%201%2011.4299%202.27477%2011.874%204H10.0718C9.6998%203.23065%208.91187%202.7%208%202.7C6.72974%202.7%205.7%203.72974%205.7%205V6H12.5C13.3284%206%2014%206.67157%2014%207.5V13.5C14%2014.3284%2013.3284%2015%2012.5%2015H3.5C2.67157%2015%202%2014.3284%202%2013.5V7.5C2%206.67157%202.67157%206%203.5%206H4V5C4%202.79086%205.79086%201%208%201ZM12.3%207.7H3.7V13.3H12.3V7.7ZM8.5%209C8.77614%209%209%209.22386%209%209.5V11.5C9%2011.7761%208.77614%2012%208.5%2012H7.5C7.22386%2012%207%2011.7761%207%2011.5V9.5C7%209.22386%207.22386%209%207.5%209H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-lock-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C15.171%200%2017.8496%202.10851%2018.7101%205H16.584C15.8124%203.2341%2014.0503%202%2012%202C9.23858%202%207%204.23858%207%207V8H20C21.1046%208%2022%208.89543%2022%2010V21C22%2022.1046%2021.1046%2023%2020%2023H4C2.89543%2023%202%2022.1046%202%2021V10C2%208.89543%202.89543%208%204%208H5V7C5%203.13401%208.13401%200%2012%200ZM20%2010H4V21H20V10ZM11.9961%2012C13.2326%2012%2014.2446%2012.9606%2014.3268%2014.1762L14.3322%2014.3639C14.3322%2015.1494%2013.9445%2015.8444%2013.35%2016.2679V18.5C13.35%2018.7761%2013.1261%2019%2012.85%2019H11.15C10.8739%2019%2010.65%2018.7761%2010.65%2018.5V16.2734C10.0972%2015.883%209.7214%2015.2585%209.66686%2014.5443L9.66%2014.3361C9.66%2013.0459%2010.7059%2012%2011.9961%2012Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C15.171%200%2017.8496%202.10851%2018.7101%205H16.584C15.8124%203.2341%2014.0503%202%2012%202C9.23858%202%207%204.23858%207%207V8H20C21.1046%208%2022%208.89543%2022%2010V21C22%2022.1046%2021.1046%2023%2020%2023H4C2.89543%2023%202%2022.1046%202%2021V10C2%208.89543%202.89543%208%204%208H5V7C5%203.13401%208.13401%200%2012%200ZM20%2010H4V21H20V10ZM11.9961%2012C13.2326%2012%2014.2446%2012.9606%2014.3268%2014.1762L14.3322%2014.3639C14.3322%2015.1494%2013.9445%2015.8444%2013.35%2016.2679V18.5C13.35%2018.7761%2013.1261%2019%2012.85%2019H11.15C10.8739%2019%2010.65%2018.7761%2010.65%2018.5V16.2734C10.0972%2015.883%209.7214%2015.2585%209.66686%2014.5443L9.66%2014.3361C9.66%2013.0459%2010.7059%2012%2011.9961%2012Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Lock On Icon */
.gravity-icon-lock-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%206V5C4%202.23858%206.23858%200%209%200C11.7614%200%2014%202.23858%2014%205V6H14.25C15.2165%206%2016%206.7835%2016%207.75V15.25C16%2016.2165%2015.2165%2017%2014.25%2017H3.75C2.7835%2017%202%2016.2165%202%2015.25V7.75C2%206.7835%202.7835%206%203.75%206H4ZM5.75%206H12.25V5C12.25%203.20507%2010.7949%201.75%209%201.75C7.20507%201.75%205.75%203.20507%205.75%205V6ZM10%2012.1837C10.4495%2011.8679%2010.7432%2011.3454%2010.7432%2010.7544V10.7456C10.7432%209.78154%209.96171%209%208.99762%209C8.03354%209%207.252%209.78154%207.252%2010.7456V10.7544C7.252%2011.3475%207.54783%2011.8716%208%2012.187V13.7C8%2013.8657%208.13431%2014%208.3%2014H9.7C9.86569%2014%2010%2013.8657%2010%2013.7V12.1837Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%206V5C4%202.23858%206.23858%200%209%200C11.7614%200%2014%202.23858%2014%205V6H14.25C15.2165%206%2016%206.7835%2016%207.75V15.25C16%2016.2165%2015.2165%2017%2014.25%2017H3.75C2.7835%2017%202%2016.2165%202%2015.25V7.75C2%206.7835%202.7835%206%203.75%206H4ZM5.75%206H12.25V5C12.25%203.20507%2010.7949%201.75%209%201.75C7.20507%201.75%205.75%203.20507%205.75%205V6ZM10%2012.1837C10.4495%2011.8679%2010.7432%2011.3454%2010.7432%2010.7544V10.7456C10.7432%209.78154%209.96171%209%208.99762%209C8.03354%209%207.252%209.78154%207.252%2010.7456V10.7544C7.252%2011.3475%207.54783%2011.8716%208%2012.187V13.7C8%2013.8657%208.13431%2014%208.3%2014H9.7C9.86569%2014%2010%2013.8657%2010%2013.7V12.1837Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-lock-on.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%206V5C4%202.79086%205.79086%201%208%201C10.2091%201%2012%202.79086%2012%205V6H12.5C13.3284%206%2014%206.67157%2014%207.5V13.5C14%2014.3284%2013.3284%2015%2012.5%2015H3.5C2.67157%2015%202%2014.3284%202%2013.5V7.5C2%206.67157%202.67157%206%203.5%206H4ZM5.75%206H10.25V5C10.25%203.75736%209.24264%202.75%208%202.75C6.75736%202.75%205.75%203.75736%205.75%205V6ZM7.5%209C7.22386%209%207%209.22386%207%209.5V11.5C7%2011.7761%207.22386%2012%207.5%2012H8.5C8.77614%2012%209%2011.7761%209%2011.5V9.5C9%209.22386%208.77614%209%208.5%209H7.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%206V5C4%202.79086%205.79086%201%208%201C10.2091%201%2012%202.79086%2012%205V6H12.5C13.3284%206%2014%206.67157%2014%207.5V13.5C14%2014.3284%2013.3284%2015%2012.5%2015H3.5C2.67157%2015%202%2014.3284%202%2013.5V7.5C2%206.67157%202.67157%206%203.5%206H4ZM5.75%206H10.25V5C10.25%203.75736%209.24264%202.75%208%202.75C6.75736%202.75%205.75%203.75736%205.75%205V6ZM7.5%209C7.22386%209%207%209.22386%207%209.5V11.5C7%2011.7761%207.22386%2012%207.5%2012H8.5C8.77614%2012%209%2011.7761%209%2011.5V9.5C9%209.22386%208.77614%209%208.5%209H7.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-lock-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%208V7C5%203.13401%208.13401%200%2012%200C15.866%200%2019%203.13401%2019%207V8H20C21.1046%208%2022%208.89543%2022%2010V21C22%2022.1046%2021.1046%2023%2020%2023H4C2.89543%2023%202%2022.1046%202%2021V10C2%208.89543%202.89543%208%204%208H5ZM7%208H17V7C17%204.23858%2014.7614%202%2012%202C9.23858%202%207%204.23858%207%207V8ZM13.35%2016.2679C13.9445%2015.8444%2014.3322%2015.1494%2014.3322%2014.3639V14.3361C14.3322%2013.0459%2013.2863%2012%2011.9961%2012C10.7059%2012%209.66%2013.0459%209.66%2014.3361V14.3639C9.66%2015.1528%2010.0511%2015.8505%2010.65%2016.2734V18.5C10.65%2018.7761%2010.8739%2019%2011.15%2019H12.85C13.1261%2019%2013.35%2018.7761%2013.35%2018.5V16.2679Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%208V7C5%203.13401%208.13401%200%2012%200C15.866%200%2019%203.13401%2019%207V8H20C21.1046%208%2022%208.89543%2022%2010V21C22%2022.1046%2021.1046%2023%2020%2023H4C2.89543%2023%202%2022.1046%202%2021V10C2%208.89543%202.89543%208%204%208H5ZM7%208H17V7C17%204.23858%2014.7614%202%2012%202C9.23858%202%207%204.23858%207%207V8ZM13.35%2016.2679C13.9445%2015.8444%2014.3322%2015.1494%2014.3322%2014.3639V14.3361C14.3322%2013.0459%2013.2863%2012%2011.9961%2012C10.7059%2012%209.66%2013.0459%209.66%2014.3361V14.3639C9.66%2015.1528%2010.0511%2015.8505%2010.65%2016.2734V18.5C10.65%2018.7761%2010.8739%2019%2011.15%2019H12.85C13.1261%2019%2013.35%2018.7761%2013.35%2018.5V16.2679Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Maximize Icon */
.gravity-icon-maximize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%201H15C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201ZM15.25%205.25H2.75V3C2.75%202.86193%202.86193%202.75%203%202.75H15C15.1381%202.75%2015.25%202.86193%2015.25%203V5.25ZM15.25%2015V7H2.75V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%201H15C16.1046%201%2017%201.89543%2017%203V15C17%2016.1046%2016.1046%2017%2015%2017H3C1.89543%2017%201%2016.1046%201%2015V3C1%201.89543%201.89543%201%203%201ZM15.25%205.25H2.75V3C2.75%202.86193%202.86193%202.75%203%202.75H15C15.1381%202.75%2015.25%202.86193%2015.25%203V5.25ZM15.25%2015V7H2.75V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H15C15.1381%2015.25%2015.25%2015.1381%2015.25%2015Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-maximize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%201H20.5C21.8807%201%2023%202.11929%2023%203.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V3.5C1%202.11929%202.11929%201%203.5%201ZM21%206H3V3.5C3%203.22386%203.22386%203%203.5%203H20.5C20.7761%203%2021%203.22386%2021%203.5V6ZM21%2019.5V8H3V19.5C3%2019.7761%203.22386%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%201H20.5C21.8807%201%2023%202.11929%2023%203.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V3.5C1%202.11929%202.11929%201%203.5%201ZM21%206H3V3.5C3%203.22386%203.22386%203%203.5%203H20.5C20.7761%203%2021%203.22386%2021%203.5V6ZM21%2019.5V8H3V19.5C3%2019.7761%203.22386%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Media Icon */
.gravity-icon-media {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.88%202C16.0508%202%2017%202.94916%2017%204.12V13.88C17%2015.0508%2016.0508%2016%2014.88%2016H3.12C1.94916%2016%201%2015.0508%201%2013.88V4.12C1%202.94916%201.94916%202%203.12%202H14.88ZM14.88%203.75H3.12C2.91565%203.75%202.75%203.91565%202.75%204.12V13.88C2.75%2014.0843%202.91565%2014.25%203.12%2014.25H14.88C15.0843%2014.25%2015.25%2014.0843%2015.25%2013.88V4.12C15.25%203.91565%2015.0843%203.75%2014.88%203.75ZM7.60891%206.3738L11.0616%208.48833C11.1425%208.53784%2011.2104%208.6058%2011.2599%208.68664C11.433%208.96923%2011.3442%209.33861%2011.0616%209.51167L7.60891%2011.6262C7.54603%2011.6647%207.47373%2011.6851%207.4%2011.6851C7.17909%2011.6851%207%2011.506%207%2011.2851V6.71491C7%206.64118%207.02038%206.56888%207.05889%206.506C7.17426%206.31761%207.42052%206.25842%207.60891%206.3738Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.88%202C16.0508%202%2017%202.94916%2017%204.12V13.88C17%2015.0508%2016.0508%2016%2014.88%2016H3.12C1.94916%2016%201%2015.0508%201%2013.88V4.12C1%202.94916%201.94916%202%203.12%202H14.88ZM14.88%203.75H3.12C2.91565%203.75%202.75%203.91565%202.75%204.12V13.88C2.75%2014.0843%202.91565%2014.25%203.12%2014.25H14.88C15.0843%2014.25%2015.25%2014.0843%2015.25%2013.88V4.12C15.25%203.91565%2015.0843%203.75%2014.88%203.75ZM7.60891%206.3738L11.0616%208.48833C11.1425%208.53784%2011.2104%208.6058%2011.2599%208.68664C11.433%208.96923%2011.3442%209.33861%2011.0616%209.51167L7.60891%2011.6262C7.54603%2011.6647%207.47373%2011.6851%207.4%2011.6851C7.17909%2011.6851%207%2011.506%207%2011.2851V6.71491C7%206.64118%207.02038%206.56888%207.05889%206.506C7.17426%206.31761%207.42052%206.25842%207.60891%206.3738Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-media.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202C21.8807%202%2023%203.11929%2023%204.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V4.5C1%203.11929%202.11929%202%203.5%202H20.5ZM20.5%204H3.5C3.22386%204%203%204.22386%203%204.5V19.5C3%2019.7761%203.22386%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5V4.5C21%204.22386%2020.7761%204%2020.5%204ZM10.7653%208.32458L15.6884%2011.4067C15.7782%2011.4629%2015.8541%2011.5388%2015.9103%2011.6286C16.1154%2011.9562%2016.0161%2012.3882%2015.6884%2012.5933L10.7653%2015.6754C10.6858%2015.7252%2010.5938%2015.7516%2010.5%2015.7516C10.2239%2015.7516%2010%2015.5278%2010%2015.2516V8.74838C10%208.65455%2010.0264%208.5626%2010.0762%208.48307C10.2227%208.24901%2010.5313%208.17805%2010.7653%208.32458Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202C21.8807%202%2023%203.11929%2023%204.5V19.5C23%2020.8807%2021.8807%2022%2020.5%2022H3.5C2.11929%2022%201%2020.8807%201%2019.5V4.5C1%203.11929%202.11929%202%203.5%202H20.5ZM20.5%204H3.5C3.22386%204%203%204.22386%203%204.5V19.5C3%2019.7761%203.22386%2020%203.5%2020H20.5C20.7761%2020%2021%2019.7761%2021%2019.5V4.5C21%204.22386%2020.7761%204%2020.5%204ZM10.7653%208.32458L15.6884%2011.4067C15.7782%2011.4629%2015.8541%2011.5388%2015.9103%2011.6286C16.1154%2011.9562%2016.0161%2012.3882%2015.6884%2012.5933L10.7653%2015.6754C10.6858%2015.7252%2010.5938%2015.7516%2010.5%2015.7516C10.2239%2015.7516%2010%2015.5278%2010%2015.2516V8.74838C10%208.65455%2010.0264%208.5626%2010.0762%208.48307C10.2227%208.24901%2010.5313%208.17805%2010.7653%208.32458Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Menu Icon */
.gravity-icon-menu {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H2C1.44772%2010%201%209.55228%201%209C1%208.44772%201.44772%208%202%208H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2014C16.5523%2014%2017%2014.4477%2017%2015C17%2015.5523%2016.5523%2016%2016%2016H2C1.44772%2016%201%2015.5523%201%2015C1%2014.4477%201.44772%2014%202%2014H16ZM16%208C16.5523%208%2017%208.44772%2017%209C17%209.55228%2016.5523%2010%2016%2010H2C1.44772%2010%201%209.55228%201%209C1%208.44772%201.44772%208%202%208H16ZM16%202C16.5523%202%2017%202.44772%2017%203C17%203.55228%2016.5523%204%2016%204H2C1.44772%204%201%203.55228%201%203C1%202.44772%201.44772%202%202%202H16Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-menu.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2019C21.5523%2019%2022%2019.4477%2022%2020C22%2020.5523%2021.5523%2021%2021%2021H3C2.44772%2021%202%2020.5523%202%2020C2%2019.4477%202.44772%2019%203%2019H21ZM21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H21ZM21%203C21.5523%203%2022%203.44772%2022%204C22%204.55228%2021.5523%205%2021%205H3C2.44772%205%202%204.55228%202%204C2%203.44772%202.44772%203%203%203H21Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Message Icon */
.gravity-icon-message {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.5978%201%2017.9037%202.24878%2017.9949%203.82371L18%204V11C18%2012.5978%2016.7512%2013.9037%2015.1763%2013.9949L15%2014H7.85L4.762%2017.631C4.564%2017.864%204.283%2017.984%204%2017.984C3.771%2017.984%203.54%2017.905%203.352%2017.745C3.16086%2017.5821%203.03878%2017.3546%203.0078%2017.1078L3%2016.983V14C1.40218%2014%200.0963291%2012.7512%200.00509216%2011.1763L0%2011V4C0%202.40218%201.24878%201.09633%202.82371%201.00509L3%201H15ZM15%202.75H3C2.35406%202.75%201.82062%203.24307%201.75647%203.87242L1.75%204V11C1.75%2011.6459%202.24307%2012.1794%202.87242%2012.2435L3%2012.25H4.75V14.944L7.041%2012.25H15C15.6459%2012.25%2016.1794%2011.7569%2016.2435%2011.1276L16.25%2011V4C16.25%203.35406%2015.7569%202.82062%2015.1276%202.75647L15%202.75ZM9%206.25C9.69036%206.25%2010.25%206.80964%2010.25%207.5C10.25%208.19036%209.69036%208.75%209%208.75C8.30964%208.75%207.75%208.19036%207.75%207.5C7.75%206.80964%208.30964%206.25%209%206.25ZM5.25%206.25C5.94036%206.25%206.5%206.80964%206.5%207.5C6.5%208.19036%205.94036%208.75%205.25%208.75C4.55964%208.75%204%208.19036%204%207.5C4%206.80964%204.55964%206.25%205.25%206.25ZM12.75%206.25C13.4404%206.25%2014%206.80964%2014%207.5C14%208.19036%2013.4404%208.75%2012.75%208.75C12.0596%208.75%2011.5%208.19036%2011.5%207.5C11.5%206.80964%2012.0596%206.25%2012.75%206.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201C16.5978%201%2017.9037%202.24878%2017.9949%203.82371L18%204V11C18%2012.5978%2016.7512%2013.9037%2015.1763%2013.9949L15%2014H7.85L4.762%2017.631C4.564%2017.864%204.283%2017.984%204%2017.984C3.771%2017.984%203.54%2017.905%203.352%2017.745C3.16086%2017.5821%203.03878%2017.3546%203.0078%2017.1078L3%2016.983V14C1.40218%2014%200.0963291%2012.7512%200.00509216%2011.1763L0%2011V4C0%202.40218%201.24878%201.09633%202.82371%201.00509L3%201H15ZM15%202.75H3C2.35406%202.75%201.82062%203.24307%201.75647%203.87242L1.75%204V11C1.75%2011.6459%202.24307%2012.1794%202.87242%2012.2435L3%2012.25H4.75V14.944L7.041%2012.25H15C15.6459%2012.25%2016.1794%2011.7569%2016.2435%2011.1276L16.25%2011V4C16.25%203.35406%2015.7569%202.82062%2015.1276%202.75647L15%202.75ZM9%206.25C9.69036%206.25%2010.25%206.80964%2010.25%207.5C10.25%208.19036%209.69036%208.75%209%208.75C8.30964%208.75%207.75%208.19036%207.75%207.5C7.75%206.80964%208.30964%206.25%209%206.25ZM5.25%206.25C5.94036%206.25%206.5%206.80964%206.5%207.5C6.5%208.19036%205.94036%208.75%205.25%208.75C4.55964%208.75%204%208.19036%204%207.5C4%206.80964%204.55964%206.25%205.25%206.25ZM12.75%206.25C13.4404%206.25%2014%206.80964%2014%207.5C14%208.19036%2013.4404%208.75%2012.75%208.75C12.0596%208.75%2011.5%208.19036%2011.5%207.5C11.5%206.80964%2012.0596%206.25%2012.75%206.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-message.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%201C22.6569%201%2024%202.34315%2024%204V15C24%2016.6569%2022.6569%2018%2021%2018H12.5505L7.7618%2023.6313C7.40402%2024.052%206.77292%2024.1031%206.35219%2023.7453C6.12876%2023.5553%206%2023.2768%206%2022.9835V18H3C1.34315%2018%200%2016.6569%200%2015V4C0%202.34315%201.34315%201%203%201H21ZM21%203H3C2.44772%203%202%203.44772%202%204V15C2%2015.5523%202.44772%2016%203%2016H8V20.2639L11.6259%2016H21C21.5523%2016%2022%2015.5523%2022%2015V4C22%203.44772%2021.5523%203%2021%203ZM6.6%207.9C7.48366%207.9%208.2%208.61634%208.2%209.5C8.2%2010.3837%207.48366%2011.1%206.6%2011.1C5.71634%2011.1%205%2010.3837%205%209.5C5%208.61634%205.71634%207.9%206.6%207.9ZM12%207.9C12.8837%207.9%2013.6%208.61634%2013.6%209.5C13.6%2010.3837%2012.8837%2011.1%2012%2011.1C11.1163%2011.1%2010.4%2010.3837%2010.4%209.5C10.4%208.61634%2011.1163%207.9%2012%207.9ZM17.4%207.9C18.2837%207.9%2019%208.61634%2019%209.5C19%2010.3837%2018.2837%2011.1%2017.4%2011.1C16.5163%2011.1%2015.8%2010.3837%2015.8%209.5C15.8%208.61634%2016.5163%207.9%2017.4%207.9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%201C22.6569%201%2024%202.34315%2024%204V15C24%2016.6569%2022.6569%2018%2021%2018H12.5505L7.7618%2023.6313C7.40402%2024.052%206.77292%2024.1031%206.35219%2023.7453C6.12876%2023.5553%206%2023.2768%206%2022.9835V18H3C1.34315%2018%200%2016.6569%200%2015V4C0%202.34315%201.34315%201%203%201H21ZM21%203H3C2.44772%203%202%203.44772%202%204V15C2%2015.5523%202.44772%2016%203%2016H8V20.2639L11.6259%2016H21C21.5523%2016%2022%2015.5523%2022%2015V4C22%203.44772%2021.5523%203%2021%203ZM6.6%207.9C7.48366%207.9%208.2%208.61634%208.2%209.5C8.2%2010.3837%207.48366%2011.1%206.6%2011.1C5.71634%2011.1%205%2010.3837%205%209.5C5%208.61634%205.71634%207.9%206.6%207.9ZM12%207.9C12.8837%207.9%2013.6%208.61634%2013.6%209.5C13.6%2010.3837%2012.8837%2011.1%2012%2011.1C11.1163%2011.1%2010.4%2010.3837%2010.4%209.5C10.4%208.61634%2011.1163%207.9%2012%207.9ZM17.4%207.9C18.2837%207.9%2019%208.61634%2019%209.5C19%2010.3837%2018.2837%2011.1%2017.4%2011.1C16.5163%2011.1%2015.8%2010.3837%2015.8%209.5C15.8%208.61634%2016.5163%207.9%2017.4%207.9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Mic Off Icon */
.gravity-icon-mic-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.61872%202.38128L15.6187%2014.3813C15.9604%2014.723%2015.9604%2015.277%2015.6187%2015.6187C15.277%2015.9604%2014.723%2015.9604%2014.3813%2015.6187L13.2924%2014.5299C12.3559%2015.2579%2011.2295%2015.7532%2010%2015.9291V17.5C10%2017.7761%209.77614%2018%209.5%2018H8.5C8.22386%2018%208%2017.7761%208%2017.5V15.9291C4.6866%2015.4552%202.12171%2012.6609%202.00421%209.24502L2%208.875C2%208.39175%202.39175%208%202.875%208C3.35825%208%203.75%208.39175%203.75%208.875V9C3.75%2011.8995%206.1005%2014.25%209%2014.25C10.1339%2014.25%2011.1838%2013.8906%2012.042%2013.2794L11.1416%2012.379C10.5224%2012.7723%209.7878%2013%209%2013C6.79086%2013%205%2011.2091%205%209V6.23744L2.38128%203.61872C2.03957%203.27701%202.03957%202.72299%202.38128%202.38128C2.72299%202.03957%203.27701%202.03957%203.61872%202.38128ZM15.125%208C15.6082%208%2016%208.39175%2016%208.875V9C16%2010.0501%2015.7688%2011.0462%2015.3544%2011.9402L14.0047%2010.5905C14.1641%2010.0888%2014.25%209.55445%2014.25%209V8.875C14.25%208.39175%2014.6418%208%2015.125%208ZM9%200C11.2091%200%2013%201.79086%2013%204V9C13%209.18607%2012.9873%209.36917%2012.9627%209.54849L5.49154%202.07732C6.17148%200.839209%207.48774%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.61872%202.38128L15.6187%2014.3813C15.9604%2014.723%2015.9604%2015.277%2015.6187%2015.6187C15.277%2015.9604%2014.723%2015.9604%2014.3813%2015.6187L13.2924%2014.5299C12.3559%2015.2579%2011.2295%2015.7532%2010%2015.9291V17.5C10%2017.7761%209.77614%2018%209.5%2018H8.5C8.22386%2018%208%2017.7761%208%2017.5V15.9291C4.6866%2015.4552%202.12171%2012.6609%202.00421%209.24502L2%208.875C2%208.39175%202.39175%208%202.875%208C3.35825%208%203.75%208.39175%203.75%208.875V9C3.75%2011.8995%206.1005%2014.25%209%2014.25C10.1339%2014.25%2011.1838%2013.8906%2012.042%2013.2794L11.1416%2012.379C10.5224%2012.7723%209.7878%2013%209%2013C6.79086%2013%205%2011.2091%205%209V6.23744L2.38128%203.61872C2.03957%203.27701%202.03957%202.72299%202.38128%202.38128C2.72299%202.03957%203.27701%202.03957%203.61872%202.38128ZM15.125%208C15.6082%208%2016%208.39175%2016%208.875V9C16%2010.0501%2015.7688%2011.0462%2015.3544%2011.9402L14.0047%2010.5905C14.1641%2010.0888%2014.25%209.55445%2014.25%209V8.875C14.25%208.39175%2014.6418%208%2015.125%208ZM9%200C11.2091%200%2013%201.79086%2013%204V9C13%209.18607%2012.9873%209.36917%2012.9627%209.54849L5.49154%202.07732C6.17148%200.839209%207.48774%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-mic-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70711%202.29289L21.7071%2020.2929C22.0976%2020.6834%2022.0976%2021.3166%2021.7071%2021.7071C21.3166%2022.0976%2020.6834%2022.0976%2020.2929%2021.7071L18.1535%2019.5677C16.7727%2020.862%2014.9835%2021.7258%2013%2021.9451V23.5C13%2023.7761%2012.7761%2024%2012.5%2024H11.5C11.2239%2024%2011%2023.7761%2011%2023.5V21.9451C6.50005%2021.4476%203%2017.6326%203%2013V12C3%2011.4477%203.44772%2011%204%2011C4.55228%2011%205%2011.4477%205%2012V13C5%2016.866%208.13401%2020%2012%2020C13.8276%2020%2015.4917%2019.2996%2016.7383%2018.1525L15.3224%2016.7366C14.4391%2017.5225%2013.2753%2018%2012%2018C9.23858%2018%207%2015.7614%207%2013V8.41421L2.29289%203.70711C1.90237%203.31658%201.90237%202.68342%202.29289%202.29289C2.68342%201.90237%203.31658%201.90237%203.70711%202.29289ZM20%2011C20.5523%2011%2021%2011.4477%2021%2012V13C21%2014.2485%2020.7458%2015.4377%2020.2863%2016.5185L18.7232%2014.9555C18.9034%2014.3349%2019%2013.6787%2019%2013V12C19%2011.4477%2019.4477%2011%2020%2011ZM12%200C14.7614%200%2017%202.23858%2017%205V13L16.9949%2013.2272L7.23827%203.4705C7.88444%201.4572%209.77205%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70711%202.29289L21.7071%2020.2929C22.0976%2020.6834%2022.0976%2021.3166%2021.7071%2021.7071C21.3166%2022.0976%2020.6834%2022.0976%2020.2929%2021.7071L18.1535%2019.5677C16.7727%2020.862%2014.9835%2021.7258%2013%2021.9451V23.5C13%2023.7761%2012.7761%2024%2012.5%2024H11.5C11.2239%2024%2011%2023.7761%2011%2023.5V21.9451C6.50005%2021.4476%203%2017.6326%203%2013V12C3%2011.4477%203.44772%2011%204%2011C4.55228%2011%205%2011.4477%205%2012V13C5%2016.866%208.13401%2020%2012%2020C13.8276%2020%2015.4917%2019.2996%2016.7383%2018.1525L15.3224%2016.7366C14.4391%2017.5225%2013.2753%2018%2012%2018C9.23858%2018%207%2015.7614%207%2013V8.41421L2.29289%203.70711C1.90237%203.31658%201.90237%202.68342%202.29289%202.29289C2.68342%201.90237%203.31658%201.90237%203.70711%202.29289ZM20%2011C20.5523%2011%2021%2011.4477%2021%2012V13C21%2014.2485%2020.7458%2015.4377%2020.2863%2016.5185L18.7232%2014.9555C18.9034%2014.3349%2019%2013.6787%2019%2013V12C19%2011.4477%2019.4477%2011%2020%2011ZM12%200C14.7614%200%2017%202.23858%2017%205V13L16.9949%2013.2272L7.23827%203.4705C7.88444%201.4572%209.77205%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Mic On Icon */
.gravity-icon-mic-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.125%208C15.6082%208%2016%208.39175%2016%208.875V9C16%2012.5265%2013.3923%2015.4439%2010%2015.9291V17.5C10%2017.7761%209.77614%2018%209.5%2018H8.5C8.22386%2018%208%2017.7761%208%2017.5V15.9291C4.6866%2015.4552%202.12171%2012.6609%202.00421%209.24502L2%208.875C2%208.39175%202.39175%208%202.875%208C3.35825%208%203.75%208.39175%203.75%208.875V9C3.75%2011.8995%206.1005%2014.25%209%2014.25C11.8995%2014.25%2014.25%2011.8995%2014.25%209V8.875C14.25%208.39175%2014.6418%208%2015.125%208ZM9%200C11.2091%200%2013%201.79086%2013%204V9C13%2011.2091%2011.2091%2013%209%2013C6.79086%2013%205%2011.2091%205%209V4C5%201.79086%206.79086%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.125%208C15.6082%208%2016%208.39175%2016%208.875V9C16%2012.5265%2013.3923%2015.4439%2010%2015.9291V17.5C10%2017.7761%209.77614%2018%209.5%2018H8.5C8.22386%2018%208%2017.7761%208%2017.5V15.9291C4.6866%2015.4552%202.12171%2012.6609%202.00421%209.24502L2%208.875C2%208.39175%202.39175%208%202.875%208C3.35825%208%203.75%208.39175%203.75%208.875V9C3.75%2011.8995%206.1005%2014.25%209%2014.25C11.8995%2014.25%2014.25%2011.8995%2014.25%209V8.875C14.25%208.39175%2014.6418%208%2015.125%208ZM9%200C11.2091%200%2013%201.79086%2013%204V9C13%2011.2091%2011.2091%2013%209%2013C6.79086%2013%205%2011.2091%205%209V4C5%201.79086%206.79086%200%209%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-mic-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2011C20.5523%2011%2021%2011.4477%2021%2012V13C21%2017.6326%2017.5%2021.4476%2013%2021.9451V23.5C13%2023.7761%2012.7761%2024%2012.5%2024H11.5C11.2239%2024%2011%2023.7761%2011%2023.5V21.9451C6.50005%2021.4476%203%2017.6326%203%2013V12C3%2011.4477%203.44772%2011%204%2011C4.55228%2011%205%2011.4477%205%2012V13C5%2016.866%208.13401%2020%2012%2020C15.866%2020%2019%2016.866%2019%2013V12C19%2011.4477%2019.4477%2011%2020%2011ZM12%200C14.7614%200%2017%202.23858%2017%205V13C17%2015.7614%2014.7614%2018%2012%2018C9.23858%2018%207%2015.7614%207%2013V5C7%202.23858%209.23858%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2011C20.5523%2011%2021%2011.4477%2021%2012V13C21%2017.6326%2017.5%2021.4476%2013%2021.9451V23.5C13%2023.7761%2012.7761%2024%2012.5%2024H11.5C11.2239%2024%2011%2023.7761%2011%2023.5V21.9451C6.50005%2021.4476%203%2017.6326%203%2013V12C3%2011.4477%203.44772%2011%204%2011C4.55228%2011%205%2011.4477%205%2012V13C5%2016.866%208.13401%2020%2012%2020C15.866%2020%2019%2016.866%2019%2013V12C19%2011.4477%2019.4477%2011%2020%2011ZM12%200C14.7614%200%2017%202.23858%2017%205V13C17%2015.7614%2014.7614%2018%2012%2018C9.23858%2018%207%2015.7614%207%2013V5C7%202.23858%209.23858%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Minimize Icon */
.gravity-icon-minimize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%207.75C2.86193%207.75%202.75%207.86193%202.75%208V10C2.75%2010.1381%202.86193%2010.25%203%2010.25H15C15.1381%2010.25%2015.25%2010.1381%2015.25%2010V8C15.25%207.86193%2015.1381%207.75%2015%207.75H3ZM3%206H15C16.1046%206%2017%206.89543%2017%208V10C17%2011.1046%2016.1046%2012%2015%2012H3C1.89543%2012%201%2011.1046%201%2010V8C1%206.89543%201.89543%206%203%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%207.75C2.86193%207.75%202.75%207.86193%202.75%208V10C2.75%2010.1381%202.86193%2010.25%203%2010.25H15C15.1381%2010.25%2015.25%2010.1381%2015.25%2010V8C15.25%207.86193%2015.1381%207.75%2015%207.75H3ZM3%206H15C16.1046%206%2017%206.89543%2017%208V10C17%2011.1046%2016.1046%2012%2015%2012H3C1.89543%2012%201%2011.1046%201%2010V8C1%206.89543%201.89543%206%203%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-minimize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2010C3.22386%2010%203%2010.2239%203%2010.5V12.5C3%2012.7761%203.22386%2013%203.5%2013H20.5C20.7761%2013%2021%2012.7761%2021%2012.5V10.5C21%2010.2239%2020.7761%2010%2020.5%2010H3.5ZM3.5%208H20.5C21.8807%208%2023%209.11929%2023%2010.5V12.5C23%2013.8807%2021.8807%2015%2020.5%2015H3.5C2.11929%2015%201%2013.8807%201%2012.5V10.5C1%209.11929%202.11929%208%203.5%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.5%2010C3.22386%2010%203%2010.2239%203%2010.5V12.5C3%2012.7761%203.22386%2013%203.5%2013H20.5C20.7761%2013%2021%2012.7761%2021%2012.5V10.5C21%2010.2239%2020.7761%2010%2020.5%2010H3.5ZM3.5%208H20.5C21.8807%208%2023%209.11929%2023%2010.5V12.5C23%2013.8807%2021.8807%2015%2020.5%2015H3.5C2.11929%2015%201%2013.8807%201%2012.5V10.5C1%209.11929%202.11929%208%203.5%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* More Icon */
.gravity-icon-more {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2013C9.82843%2013%2010.5%2013.6716%2010.5%2014.5C10.5%2015.3284%209.82843%2016%209%2016C8.17157%2016%207.5%2015.3284%207.5%2014.5C7.5%2013.6716%208.17157%2013%209%2013ZM9%207.5C9.82843%207.5%2010.5%208.17157%2010.5%209C10.5%209.82843%209.82843%2010.5%209%2010.5C8.17157%2010.5%207.5%209.82843%207.5%209C7.5%208.17157%208.17157%207.5%209%207.5ZM9%202C9.82843%202%2010.5%202.67157%2010.5%203.5C10.5%204.32843%209.82843%205%209%205C8.17157%205%207.5%204.32843%207.5%203.5C7.5%202.67157%208.17157%202%209%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2013C9.82843%2013%2010.5%2013.6716%2010.5%2014.5C10.5%2015.3284%209.82843%2016%209%2016C8.17157%2016%207.5%2015.3284%207.5%2014.5C7.5%2013.6716%208.17157%2013%209%2013ZM9%207.5C9.82843%207.5%2010.5%208.17157%2010.5%209C10.5%209.82843%209.82843%2010.5%209%2010.5C8.17157%2010.5%207.5%209.82843%207.5%209C7.5%208.17157%208.17157%207.5%209%207.5ZM9%202C9.82843%202%2010.5%202.67157%2010.5%203.5C10.5%204.32843%209.82843%205%209%205C8.17157%205%207.5%204.32843%207.5%203.5C7.5%202.67157%208.17157%202%209%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-more.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2011.45C8.69036%2011.45%209.25%2012.0096%209.25%2012.7C9.25%2013.3904%208.69036%2013.95%208%2013.95C7.30964%2013.95%206.75%2013.3904%206.75%2012.7C6.75%2012.0096%207.30964%2011.45%208%2011.45ZM8%206.75C8.69036%206.75%209.25%207.30964%209.25%208C9.25%208.69036%208.69036%209.25%208%209.25C7.30964%209.25%206.75%208.69036%206.75%208C6.75%207.30964%207.30964%206.75%208%206.75ZM8%202C8.69036%202%209.25%202.55964%209.25%203.25C9.25%203.94036%208.69036%204.5%208%204.5C7.30964%204.5%206.75%203.94036%206.75%203.25C6.75%202.55964%207.30964%202%208%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2011.45C8.69036%2011.45%209.25%2012.0096%209.25%2012.7C9.25%2013.3904%208.69036%2013.95%208%2013.95C7.30964%2013.95%206.75%2013.3904%206.75%2012.7C6.75%2012.0096%207.30964%2011.45%208%2011.45ZM8%206.75C8.69036%206.75%209.25%207.30964%209.25%208C9.25%208.69036%208.69036%209.25%208%209.25C7.30964%209.25%206.75%208.69036%206.75%208C6.75%207.30964%207.30964%206.75%208%206.75ZM8%202C8.69036%202%209.25%202.55964%209.25%203.25C9.25%203.94036%208.69036%204.5%208%204.5C7.30964%204.5%206.75%203.94036%206.75%203.25C6.75%202.55964%207.30964%202%208%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-more.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2018C13.1046%2018%2014%2018.8954%2014%2020C14%2021.1046%2013.1046%2022%2012%2022C10.8954%2022%2010%2021.1046%2010%2020C10%2018.8954%2010.8954%2018%2012%2018ZM12%2010C13.1046%2010%2014%2010.8954%2014%2012C14%2013.1046%2013.1046%2014%2012%2014C10.8954%2014%2010%2013.1046%2010%2012C10%2010.8954%2010.8954%2010%2012%2010ZM12%202C13.1046%202%2014%202.89543%2014%204C14%205.10457%2013.1046%206%2012%206C10.8954%206%2010%205.10457%2010%204C10%202.89543%2010.8954%202%2012%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2018C13.1046%2018%2014%2018.8954%2014%2020C14%2021.1046%2013.1046%2022%2012%2022C10.8954%2022%2010%2021.1046%2010%2020C10%2018.8954%2010.8954%2018%2012%2018ZM12%2010C13.1046%2010%2014%2010.8954%2014%2012C14%2013.1046%2013.1046%2014%2012%2014C10.8954%2014%2010%2013.1046%2010%2012C10%2010.8954%2010.8954%2010%2012%2010ZM12%202C13.1046%202%2014%202.89543%2014%204C14%205.10457%2013.1046%206%2012%206C10.8954%206%2010%205.10457%2010%204C10%202.89543%2010.8954%202%2012%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Multi Correct Icon */
.gravity-icon-multi-correct {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200ZM8.16346%2013.5879L13.8326%205.46131C14.1257%205.04113%2014.0239%204.46208%2013.6052%204.16795C13.1864%203.87383%2012.6094%203.97602%2012.3162%204.39619L7.28835%2011.6035L5.59944%209.80293C5.24913%209.42944%204.6634%209.41163%204.2912%209.76315C3.91899%2010.1147%203.90124%2010.7024%204.25155%2011.0759L6.72018%2013.7078C7.03346%2014.0418%207.53502%2014.0914%207.90376%2013.8467C7.98443%2013.7967%208.05966%2013.7275%208.12741%2013.6381C8.14005%2013.6217%208.15207%2013.605%208.16346%2013.5879Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200ZM8.16346%2013.5879L13.8326%205.46131C14.1257%205.04113%2014.0239%204.46208%2013.6052%204.16795C13.1864%203.87383%2012.6094%203.97602%2012.3162%204.39619L7.28835%2011.6035L5.59944%209.80293C5.24913%209.42944%204.6634%209.41163%204.2912%209.76315C3.91899%2010.1147%203.90124%2010.7024%204.25155%2011.0759L6.72018%2013.7078C7.03346%2014.0418%207.53502%2014.0914%207.90376%2013.8467C7.98443%2013.7967%208.05966%2013.7275%208.12741%2013.6381C8.14005%2013.6217%208.15207%2013.605%208.16346%2013.5879Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-multi-correct.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201ZM9.48055%2017.9018C9.91326%2018.1094%2010.4464%2017.9815%2010.7309%2017.5789L17.8197%207.55302C18.1354%207.10647%2018.0257%206.49108%2017.5747%206.17849C17.1237%205.86591%2016.5021%205.97451%2016.1864%206.42106L9.80033%2015.4531L7.72281%2013.2677C7.34548%2012.8708%206.71458%2012.8518%206.31366%2013.2254C5.91274%2013.599%205.89362%2014.2236%206.27096%2014.6205L9.17399%2017.6743C9.18396%2017.6852%209.19421%2017.6959%209.20473%2017.7065C9.32299%2017.8285%209.40712%2017.8888%209.48055%2017.9018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201ZM9.48055%2017.9018C9.91326%2018.1094%2010.4464%2017.9815%2010.7309%2017.5789L17.8197%207.55302C18.1354%207.10647%2018.0257%206.49108%2017.5747%206.17849C17.1237%205.86591%2016.5021%205.97451%2016.1864%206.42106L9.80033%2015.4531L7.72281%2013.2677C7.34548%2012.8708%206.71458%2012.8518%206.31366%2013.2254C5.91274%2013.599%205.89362%2014.2236%206.27096%2014.6205L9.17399%2017.6743C9.18396%2017.6852%209.19421%2017.6959%209.20473%2017.7065C9.32299%2017.8285%209.40712%2017.8888%209.48055%2017.9018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Multi Correct Ns Icon */
.gravity-icon-multi-correct-ns {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%200C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200H15ZM15%202H3C2.44772%202%202%202.44772%202%203V15C2%2015.5523%202.44772%2016%203%2016H15C15.5523%2016%2016%2015.5523%2016%2015V3C16%202.44772%2015.5523%202%2015%202ZM13.6052%204.16795C14.0239%204.46208%2014.1257%205.04113%2013.8326%205.46131L8.12741%2013.6381C8.05966%2013.7275%207.98443%2013.7967%207.90376%2013.8467C7.53502%2014.0914%207.03346%2014.0418%206.72018%2013.7078L4.25155%2011.0759C3.90124%2010.7024%203.91899%2010.1147%204.2912%209.76315C4.6634%209.41163%205.24913%209.42944%205.59944%209.80293L7.28835%2011.6035L12.3162%204.39619C12.6094%203.97602%2013.1864%203.87383%2013.6052%204.16795Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%200C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200H15ZM15%202H3C2.44772%202%202%202.44772%202%203V15C2%2015.5523%202.44772%2016%203%2016H15C15.5523%2016%2016%2015.5523%2016%2015V3C16%202.44772%2015.5523%202%2015%202ZM13.6052%204.16795C14.0239%204.46208%2014.1257%205.04113%2013.8326%205.46131L8.12741%2013.6381C8.05966%2013.7275%207.98443%2013.7967%207.90376%2013.8467C7.53502%2014.0914%207.03346%2014.0418%206.72018%2013.7078L4.25155%2011.0759C3.90124%2010.7024%203.91899%2010.1147%204.2912%209.76315C4.6634%209.41163%205.24913%209.42944%205.59944%209.80293L7.28835%2011.6035L12.3162%204.39619C12.6094%203.97602%2013.1864%203.87383%2013.6052%204.16795Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-multi-correct-ns.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%201C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201H19.5ZM19.5%203H4.5C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203ZM17.5747%206.1785C18.0257%206.49108%2018.1354%207.10648%2017.8197%207.55303L10.7232%2017.5901L10.7024%2017.6177C10.6526%2017.6819%2010.5996%2017.7352%2010.5439%2017.7782C10.1422%2018.103%209.54927%2018.0691%209.18834%2017.6895L6.27096%2014.6206C5.89362%2014.2237%205.91274%2013.5991%206.31366%2013.2255C6.71458%2012.8519%207.34548%2012.8708%207.72281%2013.2677L9.80033%2015.4531L16.1864%206.42106C16.5021%205.97451%2017.1237%205.86591%2017.5747%206.1785Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%201C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201H19.5ZM19.5%203H4.5C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203ZM17.5747%206.1785C18.0257%206.49108%2018.1354%207.10648%2017.8197%207.55303L10.7232%2017.5901L10.7024%2017.6177C10.6526%2017.6819%2010.5996%2017.7352%2010.5439%2017.7782C10.1422%2018.103%209.54927%2018.0691%209.18834%2017.6895L6.27096%2014.6206C5.89362%2014.2237%205.91274%2013.5991%206.31366%2013.2255C6.71458%2012.8519%207.34548%2012.8708%207.72281%2013.2677L9.80033%2015.4531L16.1864%206.42106C16.5021%205.97451%2017.1237%205.86591%2017.5747%206.1785Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Multi Empty Icon */
.gravity-icon-multi-empty {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%202C2.44772%202%202%202.44772%202%203V15C2%2015.5523%202.44772%2016%203%2016H15C15.5523%2016%2016%2015.5523%2016%2015V3C16%202.44772%2015.5523%202%2015%202H3ZM3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%202C2.44772%202%202%202.44772%202%203V15C2%2015.5523%202.44772%2016%203%2016H15C15.5523%2016%2016%2015.5523%2016%2015V3C16%202.44772%2015.5523%202%2015%202H3ZM3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-multi-empty.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5ZM4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%203C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203H4.5ZM4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Multi Incorrect Icon */
.gravity-icon-multi-incorrect {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200ZM7.75539%209L4.25777%2012.4976C3.91408%2012.8413%203.91408%2013.3985%204.25777%2013.7422C4.60146%2014.0859%205.15869%2014.0859%205.50237%2013.7422L9%2010.2446L12.4976%2013.7422C12.8413%2014.0859%2013.3985%2014.0859%2013.7422%2013.7422C14.0859%2013.3985%2014.0859%2012.8413%2013.7422%2012.4976L10.2446%209L13.7422%205.50237C14.0859%205.15869%2014.0859%204.60146%2013.7422%204.25777C13.3985%203.91408%2012.8413%203.91408%2012.4976%204.25777L9%207.75539L5.50237%204.25777C5.15869%203.91408%204.60146%203.91408%204.25777%204.25777C3.91408%204.60146%203.91408%205.15869%204.25777%205.50237L7.75539%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H15C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200ZM7.75539%209L4.25777%2012.4976C3.91408%2012.8413%203.91408%2013.3985%204.25777%2013.7422C4.60146%2014.0859%205.15869%2014.0859%205.50237%2013.7422L9%2010.2446L12.4976%2013.7422C12.8413%2014.0859%2013.3985%2014.0859%2013.7422%2013.7422C14.0859%2013.3985%2014.0859%2012.8413%2013.7422%2012.4976L10.2446%209L13.7422%205.50237C14.0859%205.15869%2014.0859%204.60146%2013.7422%204.25777C13.3985%203.91408%2012.8413%203.91408%2012.4976%204.25777L9%207.75539L5.50237%204.25777C5.15869%203.91408%204.60146%203.91408%204.25777%204.25777C3.91408%204.60146%203.91408%205.15869%204.25777%205.50237L7.75539%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-multi-incorrect.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201ZM12%2010.5858L7.70711%206.29289C7.31658%205.90237%206.68342%205.90237%206.29289%206.29289C5.90237%206.68342%205.90237%207.31658%206.29289%207.70711L10.5858%2012L6.29238%2016.2934C5.90186%2016.6839%205.90186%2017.3171%206.29238%2017.7076C6.68291%2018.0981%207.31607%2018.0981%207.7066%2017.7076L12%2013.4142L16.2929%2017.7071C16.6834%2018.0976%2017.3166%2018.0976%2017.7071%2017.7071C18.0976%2017.3166%2018.0976%2016.6834%2017.7071%2016.2929L13.4142%2012L17.7071%207.70711C18.0976%207.31658%2018.0976%206.68342%2017.7071%206.29289C17.3166%205.90237%2016.6834%205.90237%2016.2929%206.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.5%201H19.5C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201ZM12%2010.5858L7.70711%206.29289C7.31658%205.90237%206.68342%205.90237%206.29289%206.29289C5.90237%206.68342%205.90237%207.31658%206.29289%207.70711L10.5858%2012L6.29238%2016.2934C5.90186%2016.6839%205.90186%2017.3171%206.29238%2017.7076C6.68291%2018.0981%207.31607%2018.0981%207.7066%2017.7076L12%2013.4142L16.2929%2017.7071C16.6834%2018.0976%2017.3166%2018.0976%2017.7071%2017.7071C18.0976%2017.3166%2018.0976%2016.6834%2017.7071%2016.2929L13.4142%2012L17.7071%207.70711C18.0976%207.31658%2018.0976%206.68342%2017.7071%206.29289C17.3166%205.90237%2016.6834%205.90237%2016.2929%206.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Multi Selected Icon */
.gravity-icon-multi-selected {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%200C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200H15ZM14.75%202H3.25C2.55964%202%202%202.55964%202%203.25V14.75C2%2015.4404%202.55964%2016%203.25%2016H14.75C15.4404%2016%2016%2015.4404%2016%2014.75V3.25C16%202.55964%2015.4404%202%2014.75%202ZM14%204V14H4V4H14Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%200C16.6569%200%2018%201.34315%2018%203V15C18%2016.6569%2016.6569%2018%2015%2018H3C1.34315%2018%200%2016.6569%200%2015V3C0%201.34315%201.34315%200%203%200H15ZM14.75%202H3.25C2.55964%202%202%202.55964%202%203.25V14.75C2%2015.4404%202.55964%2016%203.25%2016H14.75C15.4404%2016%2016%2015.4404%2016%2014.75V3.25C16%202.55964%2015.4404%202%2014.75%202ZM14%204V14H4V4H14Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-multi-selected.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%201C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201H19.5ZM19.5%203H4.5C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203ZM19%205V19H5V5H19Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%201C21.433%201%2023%202.567%2023%204.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H4.5C2.567%2023%201%2021.433%201%2019.5V4.5C1%202.567%202.567%201%204.5%201H19.5ZM19.5%203H4.5C3.67157%203%203%203.67157%203%204.5V19.5C3%2020.3284%203.67157%2021%204.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V4.5C21%203.67157%2020.3284%203%2019.5%203ZM19%205V19H5V5H19Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Next Icon */
.gravity-icon-next {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6837%208.38128C13.0254%208.72299%2013.0254%209.27701%2012.6837%209.61872L6.56019%2015.7423C6.21848%2016.084%205.66446%2016.084%205.32275%2015.7423C4.98104%2015.4006%204.98104%2014.8465%205.32275%2014.5048L10.8276%209L5.32275%203.49518C4.98104%203.15347%204.98104%202.59945%205.32275%202.25774C5.66446%201.91603%206.21848%201.91603%206.56019%202.25774L12.6837%208.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.6837%208.38128C13.0254%208.72299%2013.0254%209.27701%2012.6837%209.61872L6.56019%2015.7423C6.21848%2016.084%205.66446%2016.084%205.32275%2015.7423C4.98104%2015.4006%204.98104%2014.8465%205.32275%2014.5048L10.8276%209L5.32275%203.49518C4.98104%203.15347%204.98104%202.59945%205.32275%202.25774C5.66446%201.91603%206.21848%201.91603%206.56019%202.25774L12.6837%208.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-next.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.1811%207.39896C11.513%207.7309%2011.513%208.26909%2011.1811%208.60104L6.03332%2013.7488C5.70137%2014.0807%205.16318%2014.0807%204.83123%2013.7488C4.49929%2013.4168%204.49929%2012.8786%204.83123%2012.5467L9.37793%208L4.83123%203.4533C4.49929%203.12136%204.49929%202.58317%204.83123%202.25122C5.16318%201.91928%205.70137%201.91928%206.03332%202.25122L11.1811%207.39896Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.1811%207.39896C11.513%207.7309%2011.513%208.26909%2011.1811%208.60104L6.03332%2013.7488C5.70137%2014.0807%205.16318%2014.0807%204.83123%2013.7488C4.49929%2013.4168%204.49929%2012.8786%204.83123%2012.5467L9.37793%208L4.83123%203.4533C4.49929%203.12136%204.49929%202.58317%204.83123%202.25122C5.16318%201.91928%205.70137%201.91928%206.03332%202.25122L11.1811%207.39896Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-next.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.2066%2011.2915C17.5978%2011.6828%2017.5978%2012.3172%2017.2066%2012.7085L8.21018%2021.7065C7.81895%2022.0978%207.18465%2022.0978%206.79342%2021.7065C6.40219%2021.3152%206.40219%2020.6808%206.79342%2020.2895L15.0814%2012L6.79342%203.71048C6.40219%203.31919%206.40219%202.68477%206.79342%202.29347C7.18465%201.90218%207.81895%201.90218%208.21018%202.29347L17.2066%2011.2915Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.2066%2011.2915C17.5978%2011.6828%2017.5978%2012.3172%2017.2066%2012.7085L8.21018%2021.7065C7.81895%2022.0978%207.18465%2022.0978%206.79342%2021.7065C6.40219%2021.3152%206.40219%2020.6808%206.79342%2020.2895L15.0814%2012L6.79342%203.71048C6.40219%203.31919%206.40219%202.68477%206.79342%202.29347C7.18465%201.90218%207.81895%201.90218%208.21018%202.29347L17.2066%2011.2915Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Notebook Icon */
.gravity-icon-notebook {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%202H14V1.875C14%201.39175%2013.6082%201%2013.125%201C12.6418%201%2012.25%201.39175%2012.25%201.875V2H11.25V1.875C11.25%201.39175%2010.8582%201%2010.375%201C9.89175%201%209.5%201.39175%209.5%201.875V2H8.5V1.875C8.5%201.39175%208.10825%201%207.625%201C7.14175%201%206.75%201.39175%206.75%201.875V2H5.75V1.875C5.75%201.39175%205.35825%201%204.875%201C4.39175%201%204%201.39175%204%201.875V2H3C1.89543%202%201%202.89543%201%204V15C1%2016.1046%201.89543%2017%203%2017H11.3787C11.7765%2017%2012.158%2016.842%2012.4393%2016.5607L16.5607%2012.4393C16.842%2012.158%2017%2011.7765%2017%2011.3787V4C17%202.89543%2016.1046%202%2015%202ZM13%2011H15.25V4C15.25%203.86193%2015.1381%203.75%2015%203.75H14V4.625C14%205.10825%2013.6082%205.5%2013.125%205.5C12.6418%205.5%2012.25%205.10825%2012.25%204.625V3.75H11.25V4.625C11.25%205.10825%2010.8582%205.5%2010.375%205.5C9.89175%205.5%209.5%205.10825%209.5%204.625V3.75H8.5V4.625C8.5%205.10825%208.10825%205.5%207.625%205.5C7.14175%205.5%206.75%205.10825%206.75%204.625V3.75H5.75V4.625C5.75%205.10825%205.35825%205.5%204.875%205.5C4.39175%205.5%204%205.10825%204%204.625V3.75H3C2.86193%203.75%202.75%203.86193%202.75%204V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H11V13C11%2011.8954%2011.8954%2011%2013%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%202H14V1.875C14%201.39175%2013.6082%201%2013.125%201C12.6418%201%2012.25%201.39175%2012.25%201.875V2H11.25V1.875C11.25%201.39175%2010.8582%201%2010.375%201C9.89175%201%209.5%201.39175%209.5%201.875V2H8.5V1.875C8.5%201.39175%208.10825%201%207.625%201C7.14175%201%206.75%201.39175%206.75%201.875V2H5.75V1.875C5.75%201.39175%205.35825%201%204.875%201C4.39175%201%204%201.39175%204%201.875V2H3C1.89543%202%201%202.89543%201%204V15C1%2016.1046%201.89543%2017%203%2017H11.3787C11.7765%2017%2012.158%2016.842%2012.4393%2016.5607L16.5607%2012.4393C16.842%2012.158%2017%2011.7765%2017%2011.3787V4C17%202.89543%2016.1046%202%2015%202ZM13%2011H15.25V4C15.25%203.86193%2015.1381%203.75%2015%203.75H14V4.625C14%205.10825%2013.6082%205.5%2013.125%205.5C12.6418%205.5%2012.25%205.10825%2012.25%204.625V3.75H11.25V4.625C11.25%205.10825%2010.8582%205.5%2010.375%205.5C9.89175%205.5%209.5%205.10825%209.5%204.625V3.75H8.5V4.625C8.5%205.10825%208.10825%205.5%207.625%205.5C7.14175%205.5%206.75%205.10825%206.75%204.625V3.75H5.75V4.625C5.75%205.10825%205.35825%205.5%204.875%205.5C4.39175%205.5%204%205.10825%204%204.625V3.75H3C2.86193%203.75%202.75%203.86193%202.75%204V15C2.75%2015.1381%202.86193%2015.25%203%2015.25H11V13C11%2011.8954%2011.8954%2011%2013%2011Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-notebook.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202H19C19%201.44772%2018.5523%201%2018%201C17.4477%201%2017%201.44772%2017%202H15C15%201.44772%2014.5523%201%2014%201C13.4477%201%2013%201.44772%2013%202H11C11%201.44772%2010.5523%201%2010%201C9.44771%201%209%201.44772%209%202H7C7%201.44772%206.55228%201%206%201C5.44772%201%205%201.44772%205%202H3.5C2.11929%202%201%203.11929%201%204.5V20.5C1%2021.8807%202.11929%2023%203.5%2023H15.1716C15.702%2023%2016.2107%2022.7893%2016.5858%2022.4142L22.4142%2016.5858C22.7893%2016.2107%2023%2015.702%2023%2015.1716V4.5C23%203.11929%2021.8807%202%2020.5%202ZM17.5%2015H21V4.5C21%204.22386%2020.7761%204%2020.5%204H19V5C19%205.55228%2018.5523%206%2018%206C17.4477%206%2017%205.55228%2017%205V4H15V5C15%205.55228%2014.5523%206%2014%206C13.4477%206%2013%205.55228%2013%205V4H11V5C11%205.55228%2010.5523%206%2010%206C9.44771%206%209%205.55228%209%205V4H7V5C7%205.55228%206.55228%206%206%206C5.44772%206%205%205.55228%205%205V4H3.5C3.22386%204%203%204.22386%203%204.5V20.5C3%2020.7761%203.22386%2021%203.5%2021H15V17.5C15%2016.1193%2016.1193%2015%2017.5%2015Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.5%202H19C19%201.44772%2018.5523%201%2018%201C17.4477%201%2017%201.44772%2017%202H15C15%201.44772%2014.5523%201%2014%201C13.4477%201%2013%201.44772%2013%202H11C11%201.44772%2010.5523%201%2010%201C9.44771%201%209%201.44772%209%202H7C7%201.44772%206.55228%201%206%201C5.44772%201%205%201.44772%205%202H3.5C2.11929%202%201%203.11929%201%204.5V20.5C1%2021.8807%202.11929%2023%203.5%2023H15.1716C15.702%2023%2016.2107%2022.7893%2016.5858%2022.4142L22.4142%2016.5858C22.7893%2016.2107%2023%2015.702%2023%2015.1716V4.5C23%203.11929%2021.8807%202%2020.5%202ZM17.5%2015H21V4.5C21%204.22386%2020.7761%204%2020.5%204H19V5C19%205.55228%2018.5523%206%2018%206C17.4477%206%2017%205.55228%2017%205V4H15V5C15%205.55228%2014.5523%206%2014%206C13.4477%206%2013%205.55228%2013%205V4H11V5C11%205.55228%2010.5523%206%2010%206C9.44771%206%209%205.55228%209%205V4H7V5C7%205.55228%206.55228%206%206%206C5.44772%206%205%205.55228%205%205V4H3.5C3.22386%204%203%204.22386%203%204.5V20.5C3%2020.7761%203.22386%2021%203.5%2021H15V17.5C15%2016.1193%2016.1193%2015%2017.5%2015Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Notification Icon */
.gravity-icon-notification {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%201C12.3137%201%2015%203.68629%2015%207V9.58579C15%2010.4913%2015.3597%2011.3597%2016%2012L16.4142%2012.4142C16.7893%2012.7893%2017%2013.298%2017%2013.8284V14C17%2014.5523%2016.5523%2015%2016%2015L11.4499%2015.0004C11.2181%2016.1413%2010.2093%2017%209%2017C7.79067%2017%206.7819%2016.1413%206.5501%2015.0004L2%2015C1.44772%2015%201%2014.5523%201%2014V13.8284C1%2013.298%201.21071%2012.7893%201.58579%2012.4142L2%2012C2.64029%2011.3597%203%2010.4913%203%209.58579V7C3%203.68629%205.68629%201%209%201ZM9%202.75C6.72183%202.75%204.86231%204.54251%204.7549%206.79408L4.75%207V9.58579C4.75%2010.8698%204.2718%2012.1045%203.41402%2013.0519L3.224%2013.25H14.775L14.7626%2013.2374C13.8546%2012.3295%2013.3197%2011.1183%2013.2563%209.84187L13.25%209.58579V7C13.25%204.65279%2011.3472%202.75%209%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%201C12.3137%201%2015%203.68629%2015%207V9.58579C15%2010.4913%2015.3597%2011.3597%2016%2012L16.4142%2012.4142C16.7893%2012.7893%2017%2013.298%2017%2013.8284V14C17%2014.5523%2016.5523%2015%2016%2015L11.4499%2015.0004C11.2181%2016.1413%2010.2093%2017%209%2017C7.79067%2017%206.7819%2016.1413%206.5501%2015.0004L2%2015C1.44772%2015%201%2014.5523%201%2014V13.8284C1%2013.298%201.21071%2012.7893%201.58579%2012.4142L2%2012C2.64029%2011.3597%203%2010.4913%203%209.58579V7C3%203.68629%205.68629%201%209%201ZM9%202.75C6.72183%202.75%204.86231%204.54251%204.7549%206.79408L4.75%207V9.58579C4.75%2010.8698%204.2718%2012.1045%203.41402%2013.0519L3.224%2013.25H14.775L14.7626%2013.2374C13.8546%2012.3295%2013.3197%2011.1183%2013.2563%209.84187L13.25%209.58579V7C13.25%204.65279%2011.3472%202.75%209%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-notification.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C16.4183%201%2020%204.58172%2020%209V13.3431C20%2014.404%2020.4214%2015.4214%2021.1716%2016.1716L22.4142%2017.4142C22.7893%2017.7893%2023%2018.298%2023%2018.8284V19.5C23%2020.3284%2022.3284%2021%2021.5%2021L14.829%2021.0009C14.4169%2022.1656%2013.3059%2023%2012%2023C10.6941%2023%209.58311%2022.1656%209.17102%2021.0009L2.5%2021C1.67157%2021%201%2020.3284%201%2019.5V18.8284C1%2018.298%201.21071%2017.7893%201.58579%2017.4142L2.82843%2016.1716C3.57857%2015.4214%204%2014.404%204%2013.3431V9C4%204.58172%207.58172%201%2012%201ZM12%203C8.7616%203%206.12243%205.56557%206.00414%208.77506L6%209V13.3431C6%2014.8408%205.44004%2016.2808%204.43606%2017.3831L4.24264%2017.5858L3%2018.8284V19H21V18.8284L19.7574%2017.5858C18.6983%2016.5268%2018.0761%2015.1126%2018.0065%2013.6232L18%2013.3431V9C18%205.68629%2015.3137%203%2012%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%201C16.4183%201%2020%204.58172%2020%209V13.3431C20%2014.404%2020.4214%2015.4214%2021.1716%2016.1716L22.4142%2017.4142C22.7893%2017.7893%2023%2018.298%2023%2018.8284V19.5C23%2020.3284%2022.3284%2021%2021.5%2021L14.829%2021.0009C14.4169%2022.1656%2013.3059%2023%2012%2023C10.6941%2023%209.58311%2022.1656%209.17102%2021.0009L2.5%2021C1.67157%2021%201%2020.3284%201%2019.5V18.8284C1%2018.298%201.21071%2017.7893%201.58579%2017.4142L2.82843%2016.1716C3.57857%2015.4214%204%2014.404%204%2013.3431V9C4%204.58172%207.58172%201%2012%201ZM12%203C8.7616%203%206.12243%205.56557%206.00414%208.77506L6%209V13.3431C6%2014.8408%205.44004%2016.2808%204.43606%2017.3831L4.24264%2017.5858L3%2018.8284V19H21V18.8284L19.7574%2017.5858C18.6983%2016.5268%2018.0761%2015.1126%2018.0065%2013.6232L18%2013.3431V9C18%205.68629%2015.3137%203%2012%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Page Break Icon */
.gravity-icon-page-break {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.88%2012C16.0508%2012%2017%2012.9492%2017%2014.12V17H15.25V14.12C15.25%2013.9157%2015.0843%2013.75%2014.88%2013.75H3.12C2.91565%2013.75%202.75%2013.9157%202.75%2014.12V17H1V14.12C1%2012.9492%201.94916%2012%203.12%2012H14.88ZM1%208C1.55228%208%202%208.44772%202%209C2%209.55229%201.55228%2010%201%2010C0.447715%2010%200%209.55229%200%209C0%208.44772%200.447715%208%201%208ZM12%208C12.5523%208%2013%208.44772%2013%209C13%209.55229%2012.5523%2010%2012%2010C11.4477%2010%2011%209.55229%2011%209C11%208.44772%2011.4477%208%2012%208ZM17%208C17.5523%208%2018%208.44772%2018%209C18%209.55229%2017.5523%2010%2017%2010C16.4477%2010%2016%209.55229%2016%209C16%208.44772%2016.4477%208%2017%208ZM6%208C6.55228%208%207%208.44772%207%209C7%209.55229%206.55228%2010%206%2010C5.44772%2010%205%209.55229%205%209C5%208.44772%205.44772%208%206%208ZM2.75%201V3.88C2.75%204.08435%202.91565%204.25%203.12%204.25H14.88C15.0843%204.25%2015.25%204.08435%2015.25%203.88V1H17V3.88C17%205.05084%2016.0508%206%2014.88%206H3.12C1.94916%206%201%205.05084%201%203.88V1H2.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.88%2012C16.0508%2012%2017%2012.9492%2017%2014.12V17H15.25V14.12C15.25%2013.9157%2015.0843%2013.75%2014.88%2013.75H3.12C2.91565%2013.75%202.75%2013.9157%202.75%2014.12V17H1V14.12C1%2012.9492%201.94916%2012%203.12%2012H14.88ZM1%208C1.55228%208%202%208.44772%202%209C2%209.55229%201.55228%2010%201%2010C0.447715%2010%200%209.55229%200%209C0%208.44772%200.447715%208%201%208ZM12%208C12.5523%208%2013%208.44772%2013%209C13%209.55229%2012.5523%2010%2012%2010C11.4477%2010%2011%209.55229%2011%209C11%208.44772%2011.4477%208%2012%208ZM17%208C17.5523%208%2018%208.44772%2018%209C18%209.55229%2017.5523%2010%2017%2010C16.4477%2010%2016%209.55229%2016%209C16%208.44772%2016.4477%208%2017%208ZM6%208C6.55228%208%207%208.44772%207%209C7%209.55229%206.55228%2010%206%2010C5.44772%2010%205%209.55229%205%209C5%208.44772%205.44772%208%206%208ZM2.75%201V3.88C2.75%204.08435%202.91565%204.25%203.12%204.25H14.88C15.0843%204.25%2015.25%204.08435%2015.25%203.88V1H17V3.88C17%205.05084%2016.0508%206%2014.88%206H3.12C1.94916%206%201%205.05084%201%203.88V1H2.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-page-break.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%2015C20.8807%2015%2022%2016.1193%2022%2017.5V22H20V17.5C20%2017.2239%2019.7761%2017%2019.5%2017H4.5C4.22386%2017%204%2017.2239%204%2017.5V22H2V17.5C2%2016.1193%203.11929%2015%204.5%2015H19.5ZM2%2011C2.55228%2011%203%2011.4477%203%2012C3%2012.5523%202.55228%2013%202%2013C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011ZM12%2011C12.5523%2011%2013%2011.4477%2013%2012C13%2012.5523%2012.5523%2013%2012%2013C11.4477%2013%2011%2012.5523%2011%2012C11%2011.4477%2011.4477%2011%2012%2011ZM22%2011C22.5523%2011%2023%2011.4477%2023%2012C23%2012.5523%2022.5523%2013%2022%2013C21.4477%2013%2021%2012.5523%2021%2012C21%2011.4477%2021.4477%2011%2022%2011ZM17%2011C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013C16.4477%2013%2016%2012.5523%2016%2012C16%2011.4477%2016.4477%2011%2017%2011ZM7%2011C7.55228%2011%208%2011.4477%208%2012C8%2012.5523%207.55228%2013%207%2013C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011ZM4%202V6.5C4%206.77614%204.22386%207%204.5%207H19.5C19.7761%207%2020%206.77614%2020%206.5V2H22V6.5C22%207.88071%2020.8807%209%2019.5%209H4.5C3.11929%209%202%207.88071%202%206.5V2H4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%2015C20.8807%2015%2022%2016.1193%2022%2017.5V22H20V17.5C20%2017.2239%2019.7761%2017%2019.5%2017H4.5C4.22386%2017%204%2017.2239%204%2017.5V22H2V17.5C2%2016.1193%203.11929%2015%204.5%2015H19.5ZM2%2011C2.55228%2011%203%2011.4477%203%2012C3%2012.5523%202.55228%2013%202%2013C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011ZM12%2011C12.5523%2011%2013%2011.4477%2013%2012C13%2012.5523%2012.5523%2013%2012%2013C11.4477%2013%2011%2012.5523%2011%2012C11%2011.4477%2011.4477%2011%2012%2011ZM22%2011C22.5523%2011%2023%2011.4477%2023%2012C23%2012.5523%2022.5523%2013%2022%2013C21.4477%2013%2021%2012.5523%2021%2012C21%2011.4477%2021.4477%2011%2022%2011ZM17%2011C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013C16.4477%2013%2016%2012.5523%2016%2012C16%2011.4477%2016.4477%2011%2017%2011ZM7%2011C7.55228%2011%208%2011.4477%208%2012C8%2012.5523%207.55228%2013%207%2013C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011ZM4%202V6.5C4%206.77614%204.22386%207%204.5%207H19.5C19.7761%207%2020%206.77614%2020%206.5V2H22V6.5C22%207.88071%2020.8807%209%2019.5%209H4.5C3.11929%209%202%207.88071%202%206.5V2H4Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Paste Icon */
.gravity-icon-paste {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.88%200C13.0508%200%2014%200.949156%2014%202.12V6H14.8563C14.9908%206%2015.1197%206.05423%2015.2138%206.15044L17.8575%208.85427C17.9489%208.94769%2018%209.07316%2018%209.20382V15.88C18%2017.0508%2017.0508%2018%2015.88%2018H9.12C7.98943%2018%207.06556%2017.115%207.00334%2016H2.12C0.949156%2016%200%2015.0508%200%2013.88V2.12C0%200.949156%200.949156%200%202.12%200H11.88ZM14%207.75H9.12C8.91565%207.75%208.75%207.91565%208.75%208.12V15.88C8.75%2016.0843%208.91565%2016.25%209.12%2016.25H15.88C16.0843%2016.25%2016.25%2016.0843%2016.25%2015.88V10H14.75C14.3358%2010%2014%209.66421%2014%209.25V7.75ZM11.88%201.75H2.12C1.91565%201.75%201.75%201.91565%201.75%202.12V13.88C1.75%2014.0843%201.91565%2014.25%202.12%2014.25H7V8.12C7%206.94916%207.94916%206%209.12%206H12.25V2.12C12.25%201.91565%2012.0843%201.75%2011.88%201.75ZM9%203C9.55229%203%2010%203.44772%2010%204C10%204.55228%209.55229%205%209%205H5C4.44772%205%204%204.55228%204%204C4%203.44772%204.44772%203%205%203H9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.88%200C13.0508%200%2014%200.949156%2014%202.12V6H14.8563C14.9908%206%2015.1197%206.05423%2015.2138%206.15044L17.8575%208.85427C17.9489%208.94769%2018%209.07316%2018%209.20382V15.88C18%2017.0508%2017.0508%2018%2015.88%2018H9.12C7.98943%2018%207.06556%2017.115%207.00334%2016H2.12C0.949156%2016%200%2015.0508%200%2013.88V2.12C0%200.949156%200.949156%200%202.12%200H11.88ZM14%207.75H9.12C8.91565%207.75%208.75%207.91565%208.75%208.12V15.88C8.75%2016.0843%208.91565%2016.25%209.12%2016.25H15.88C16.0843%2016.25%2016.25%2016.0843%2016.25%2015.88V10H14.75C14.3358%2010%2014%209.66421%2014%209.25V7.75ZM11.88%201.75H2.12C1.91565%201.75%201.75%201.91565%201.75%202.12V13.88C1.75%2014.0843%201.91565%2014.25%202.12%2014.25H7V8.12C7%206.94916%207.94916%206%209.12%206H12.25V2.12C12.25%201.91565%2012.0843%201.75%2011.88%201.75ZM9%203C9.55229%203%2010%203.44772%2010%204C10%204.55228%209.55229%205%209%205H5C4.44772%205%204%204.55228%204%204C4%203.44772%204.44772%203%205%203H9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-paste.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.5%200C17.8807%200%2019%201.11929%2019%202.5V8H19.5858C19.851%208%2020.1054%208.10536%2020.2929%208.29289L23.7071%2011.7071C23.8946%2011.8946%2024%2012.149%2024%2012.4142V21.5C24%2022.8807%2022.8807%2024%2021.5%2024H11.5C10.1193%2024%209%2022.8807%209%2021.5V21H2.5C1.11929%2021%200%2019.8807%200%2018.5V2.5C0%201.11929%201.11929%200%202.5%200H16.5ZM19%2010H11.5C11.2239%2010%2011%2010.2239%2011%2010.5V21.5C11%2021.7761%2011.2239%2022%2011.5%2022H21.5C21.7761%2022%2022%2021.7761%2022%2021.5V13H20C19.4477%2013%2019%2012.5523%2019%2012V10ZM16.5%202H2.5C2.22386%202%202%202.22386%202%202.5V18.5C2%2018.7761%202.22386%2019%202.5%2019H9V10.5C9%209.11929%2010.1193%208%2011.5%208H17V2.5C17%202.22386%2016.7761%202%2016.5%202ZM13%204C13.5523%204%2014%204.44772%2014%205C14%205.55228%2013.5523%206%2013%206H6C5.44772%206%205%205.55228%205%205C5%204.44772%205.44772%204%206%204H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.5%200C17.8807%200%2019%201.11929%2019%202.5V8H19.5858C19.851%208%2020.1054%208.10536%2020.2929%208.29289L23.7071%2011.7071C23.8946%2011.8946%2024%2012.149%2024%2012.4142V21.5C24%2022.8807%2022.8807%2024%2021.5%2024H11.5C10.1193%2024%209%2022.8807%209%2021.5V21H2.5C1.11929%2021%200%2019.8807%200%2018.5V2.5C0%201.11929%201.11929%200%202.5%200H16.5ZM19%2010H11.5C11.2239%2010%2011%2010.2239%2011%2010.5V21.5C11%2021.7761%2011.2239%2022%2011.5%2022H21.5C21.7761%2022%2022%2021.7761%2022%2021.5V13H20C19.4477%2013%2019%2012.5523%2019%2012V10ZM16.5%202H2.5C2.22386%202%202%202.22386%202%202.5V18.5C2%2018.7761%202.22386%2019%202.5%2019H9V10.5C9%209.11929%2010.1193%208%2011.5%208H17V2.5C17%202.22386%2016.7761%202%2016.5%202ZM13%204C13.5523%204%2014%204.44772%2014%205C14%205.55228%2013.5523%206%2013%206H6C5.44772%206%205%205.55228%205%205C5%204.44772%205.44772%204%206%204H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Pause Icon */
.gravity-icon-pause {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.7%203C14.418%203%2015%203.58203%2015%204.3V13.7C15%2014.418%2014.418%2015%2013.7%2015H11.3C10.582%2015%2010%2014.418%2010%2013.7V4.3C10%203.58203%2010.582%203%2011.3%203H13.7ZM6.7%203C7.41797%203%208%203.58203%208%204.3V13.7C8%2014.418%207.41797%2015%206.7%2015H4.3C3.58203%2015%203%2014.418%203%2013.7V4.3C3%203.58203%203.58203%203%204.3%203H6.7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.7%203C14.418%203%2015%203.58203%2015%204.3V13.7C15%2014.418%2014.418%2015%2013.7%2015H11.3C10.582%2015%2010%2014.418%2010%2013.7V4.3C10%203.58203%2010.582%203%2011.3%203H13.7ZM6.7%203C7.41797%203%208%203.58203%208%204.3V13.7C8%2014.418%207.41797%2015%206.7%2015H4.3C3.58203%2015%203%2014.418%203%2013.7V4.3C3%203.58203%203.58203%203%204.3%203H6.7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-pause.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%203C20.3284%203%2021%203.67157%2021%204.5V19.5C21%2020.3284%2020.3284%2021%2019.5%2021H15.5C14.6716%2021%2014%2020.3284%2014%2019.5V4.5C14%203.67157%2014.6716%203%2015.5%203H19.5ZM8.5%203C9.32843%203%2010%203.67157%2010%204.5V19.5C10%2020.3284%209.32843%2021%208.5%2021H4.5C3.67157%2021%203%2020.3284%203%2019.5V4.5C3%203.67157%203.67157%203%204.5%203H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5%203C20.3284%203%2021%203.67157%2021%204.5V19.5C21%2020.3284%2020.3284%2021%2019.5%2021H15.5C14.6716%2021%2014%2020.3284%2014%2019.5V4.5C14%203.67157%2014.6716%203%2015.5%203H19.5ZM8.5%203C9.32843%203%2010%203.67157%2010%204.5V19.5C10%2020.3284%209.32843%2021%208.5%2021H4.5C3.67157%2021%203%2020.3284%203%2019.5V4.5C3%203.67157%203.67157%203%204.5%203H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* People Icon */
.gravity-icon-people {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.75%209C8.678%209%2010.3633%2010.0393%2011.2761%2011.5882C11.9311%2011.2137%2012.6906%2011%2013.5%2011C15.9853%2011%2018%2013.0147%2018%2015.5V16C18%2016.5523%2017.5523%2017%2017%2017H1C0.447715%2017%200%2016.5523%200%2016V14.25C0%2011.3505%202.35051%209%205.25%209H6.75ZM13.5%2012.75L13.2792%2012.7587C12.7695%2012.7992%2012.299%2012.9788%2011.9067%2013.2595C11.9526%2013.5%2011.9821%2013.7465%2011.994%2013.9975L12%2014.25L11.9997%2015.25H16.237L16.2301%2015.1676L16.2044%2014.9987C15.9894%2013.8311%2015.0367%2012.9217%2013.8476%2012.7718L13.6675%2012.755L13.5%2012.75ZM6.75%2010.75H5.25C3.38144%2010.75%201.85487%2012.2143%201.75518%2014.058L1.75%2014.25V15.25H10.25V14.25C10.25%2012.3814%208.78572%2010.8549%206.94204%2010.7552L6.75%2010.75ZM13.5%204.125C15.1569%204.125%2016.5%205.46815%2016.5%207.125C16.5%208.78185%2015.1569%2010.125%2013.5%2010.125C11.8431%2010.125%2010.5%208.78185%2010.5%207.125C10.5%205.46815%2011.8431%204.125%2013.5%204.125ZM13.5%205.875C12.8096%205.875%2012.25%206.43464%2012.25%207.125C12.25%207.81536%2012.8096%208.375%2013.5%208.375C14.1904%208.375%2014.75%207.81536%2014.75%207.125C14.75%206.43464%2014.1904%205.875%2013.5%205.875ZM6%200.375C8.07107%200.375%209.75%202.05393%209.75%204.125C9.75%206.19607%208.07107%207.875%206%207.875C3.92893%207.875%202.25%206.19607%202.25%204.125C2.25%202.05393%203.92893%200.375%206%200.375ZM6%202.125C4.89543%202.125%204%203.02043%204%204.125C4%205.22957%204.89543%206.125%206%206.125C7.10457%206.125%208%205.22957%208%204.125C8%203.02043%207.10457%202.125%206%202.125Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.75%209C8.678%209%2010.3633%2010.0393%2011.2761%2011.5882C11.9311%2011.2137%2012.6906%2011%2013.5%2011C15.9853%2011%2018%2013.0147%2018%2015.5V16C18%2016.5523%2017.5523%2017%2017%2017H1C0.447715%2017%200%2016.5523%200%2016V14.25C0%2011.3505%202.35051%209%205.25%209H6.75ZM13.5%2012.75L13.2792%2012.7587C12.7695%2012.7992%2012.299%2012.9788%2011.9067%2013.2595C11.9526%2013.5%2011.9821%2013.7465%2011.994%2013.9975L12%2014.25L11.9997%2015.25H16.237L16.2301%2015.1676L16.2044%2014.9987C15.9894%2013.8311%2015.0367%2012.9217%2013.8476%2012.7718L13.6675%2012.755L13.5%2012.75ZM6.75%2010.75H5.25C3.38144%2010.75%201.85487%2012.2143%201.75518%2014.058L1.75%2014.25V15.25H10.25V14.25C10.25%2012.3814%208.78572%2010.8549%206.94204%2010.7552L6.75%2010.75ZM13.5%204.125C15.1569%204.125%2016.5%205.46815%2016.5%207.125C16.5%208.78185%2015.1569%2010.125%2013.5%2010.125C11.8431%2010.125%2010.5%208.78185%2010.5%207.125C10.5%205.46815%2011.8431%204.125%2013.5%204.125ZM13.5%205.875C12.8096%205.875%2012.25%206.43464%2012.25%207.125C12.25%207.81536%2012.8096%208.375%2013.5%208.375C14.1904%208.375%2014.75%207.81536%2014.75%207.125C14.75%206.43464%2014.1904%205.875%2013.5%205.875ZM6%200.375C8.07107%200.375%209.75%202.05393%209.75%204.125C9.75%206.19607%208.07107%207.875%206%207.875C3.92893%207.875%202.25%206.19607%202.25%204.125C2.25%202.05393%203.92893%200.375%206%200.375ZM6%202.125C4.89543%202.125%204%203.02043%204%204.125C4%205.22957%204.89543%206.125%206%206.125C7.10457%206.125%208%205.22957%208%204.125C8%203.02043%207.10457%202.125%206%202.125Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-people.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2012C11.6748%2012%2013.9992%2013.5002%2015.1776%2015.7051C16.0184%2015.2548%2016.9795%2015%2018%2015C21.3137%2015%2024%2017.6863%2024%2021V21.5C24%2022.3284%2023.3284%2023%2022.5%2023H1.5C0.671573%2023%200%2022.3284%200%2021.5V19C0%2015.134%203.13401%2012%207%2012H9ZM18%2017L17.74%2017.0083C17.0524%2017.0524%2016.4121%2017.2704%2015.8638%2017.6191C15.9308%2017.9539%2015.9739%2018.2974%2015.9913%2018.6476L16%2019L15.9998%2021H22L21.9948%2020.794C21.8944%2018.8149%2020.3556%2017.2154%2018.4031%2017.0201L18.1996%2017.0049L18%2017ZM9%2014H7C4.31124%2014%202.11818%2016.1223%202.00462%2018.7831L2%2019V21H14V19C14%2016.3112%2011.8777%2014.1182%209.21689%2014.0046L9%2014ZM18%205.5C20.2091%205.5%2022%207.29086%2022%209.5C22%2011.7091%2020.2091%2013.5%2018%2013.5C15.7909%2013.5%2014%2011.7091%2014%209.5C14%207.29086%2015.7909%205.5%2018%205.5ZM18%207.4C16.8402%207.4%2015.9%208.3402%2015.9%209.5C15.9%2010.6598%2016.8402%2011.6%2018%2011.6C19.1598%2011.6%2020.1%2010.6598%2020.1%209.5C20.1%208.3402%2019.1598%207.4%2018%207.4ZM8%200.5C10.7614%200.5%2013%202.73858%2013%205.5C13%208.26142%2010.7614%2010.5%208%2010.5C5.23858%2010.5%203%208.26142%203%205.5C3%202.73858%205.23858%200.5%208%200.5ZM8%202.5C6.34315%202.5%205%203.84315%205%205.5C5%207.15685%206.34315%208.5%208%208.5C9.65685%208.5%2011%207.15685%2011%205.5C11%203.84315%209.65685%202.5%208%202.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2012C11.6748%2012%2013.9992%2013.5002%2015.1776%2015.7051C16.0184%2015.2548%2016.9795%2015%2018%2015C21.3137%2015%2024%2017.6863%2024%2021V21.5C24%2022.3284%2023.3284%2023%2022.5%2023H1.5C0.671573%2023%200%2022.3284%200%2021.5V19C0%2015.134%203.13401%2012%207%2012H9ZM18%2017L17.74%2017.0083C17.0524%2017.0524%2016.4121%2017.2704%2015.8638%2017.6191C15.9308%2017.9539%2015.9739%2018.2974%2015.9913%2018.6476L16%2019L15.9998%2021H22L21.9948%2020.794C21.8944%2018.8149%2020.3556%2017.2154%2018.4031%2017.0201L18.1996%2017.0049L18%2017ZM9%2014H7C4.31124%2014%202.11818%2016.1223%202.00462%2018.7831L2%2019V21H14V19C14%2016.3112%2011.8777%2014.1182%209.21689%2014.0046L9%2014ZM18%205.5C20.2091%205.5%2022%207.29086%2022%209.5C22%2011.7091%2020.2091%2013.5%2018%2013.5C15.7909%2013.5%2014%2011.7091%2014%209.5C14%207.29086%2015.7909%205.5%2018%205.5ZM18%207.4C16.8402%207.4%2015.9%208.3402%2015.9%209.5C15.9%2010.6598%2016.8402%2011.6%2018%2011.6C19.1598%2011.6%2020.1%2010.6598%2020.1%209.5C20.1%208.3402%2019.1598%207.4%2018%207.4ZM8%200.5C10.7614%200.5%2013%202.73858%2013%205.5C13%208.26142%2010.7614%2010.5%208%2010.5C5.23858%2010.5%203%208.26142%203%205.5C3%202.73858%205.23858%200.5%208%200.5ZM8%202.5C6.34315%202.5%205%203.84315%205%205.5C5%207.15685%206.34315%208.5%208%208.5C9.65685%208.5%2011%207.15685%2011%205.5C11%203.84315%209.65685%202.5%208%202.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Person Icon */
.gravity-icon-person {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.5%2010C14.5376%2010%2017%2012.4624%2017%2015.5V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V15.5C1%2012.4624%203.46243%2010%206.5%2010H11.5ZM11.5%2011.75H6.5C4.56255%2011.75%202.96827%2013.2193%202.77062%2015.1044L2.759%2015.25H15.24L15.2294%2015.1044C15.0385%2013.2843%2013.5457%2011.8518%2011.6992%2011.7552L11.5%2011.75ZM9%200.5C11.3472%200.5%2013.25%202.40279%2013.25%204.75C13.25%207.09721%2011.3472%209%209%209C6.65279%209%204.75%207.09721%204.75%204.75C4.75%202.40279%206.65279%200.5%209%200.5ZM9%202.25C7.61929%202.25%206.5%203.36929%206.5%204.75C6.5%206.13071%207.61929%207.25%209%207.25C10.3807%207.25%2011.5%206.13071%2011.5%204.75C11.5%203.36929%2010.3807%202.25%209%202.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.5%2010C14.5376%2010%2017%2012.4624%2017%2015.5V16C17%2016.5523%2016.5523%2017%2016%2017H2C1.44772%2017%201%2016.5523%201%2016V15.5C1%2012.4624%203.46243%2010%206.5%2010H11.5ZM11.5%2011.75H6.5C4.56255%2011.75%202.96827%2013.2193%202.77062%2015.1044L2.759%2015.25H15.24L15.2294%2015.1044C15.0385%2013.2843%2013.5457%2011.8518%2011.6992%2011.7552L11.5%2011.75ZM9%200.5C11.3472%200.5%2013.25%202.40279%2013.25%204.75C13.25%207.09721%2011.3472%209%209%209C6.65279%209%204.75%207.09721%204.75%204.75C4.75%202.40279%206.65279%200.5%209%200.5ZM9%202.25C7.61929%202.25%206.5%203.36929%206.5%204.75C6.5%206.13071%207.61929%207.25%209%207.25C10.3807%207.25%2011.5%206.13071%2011.5%204.75C11.5%203.36929%2010.3807%202.25%209%202.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-person.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2013C19.4183%2013%2023%2016.5817%2023%2021V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V21C1%2016.5817%204.58172%2013%209%2013H15ZM15%2015H9C5.7616%2015%203.12243%2017.5656%203.00414%2020.7751L3%2021H21C21%2017.7616%2018.4344%2015.1224%2015.2249%2015.0041L15%2015ZM12%200.5C15.0376%200.5%2017.5%202.96243%2017.5%206C17.5%209.03757%2015.0376%2011.5%2012%2011.5C8.96243%2011.5%206.5%209.03757%206.5%206C6.5%202.96243%208.96243%200.5%2012%200.5ZM12%202.5C10.067%202.5%208.5%204.067%208.5%206C8.5%207.933%2010.067%209.5%2012%209.5C13.933%209.5%2015.5%207.933%2015.5%206C15.5%204.067%2013.933%202.5%2012%202.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2013C19.4183%2013%2023%2016.5817%2023%2021V22C23%2022.5523%2022.5523%2023%2022%2023H2C1.44772%2023%201%2022.5523%201%2022V21C1%2016.5817%204.58172%2013%209%2013H15ZM15%2015H9C5.7616%2015%203.12243%2017.5656%203.00414%2020.7751L3%2021H21C21%2017.7616%2018.4344%2015.1224%2015.2249%2015.0041L15%2015ZM12%200.5C15.0376%200.5%2017.5%202.96243%2017.5%206C17.5%209.03757%2015.0376%2011.5%2012%2011.5C8.96243%2011.5%206.5%209.03757%206.5%206C6.5%202.96243%208.96243%200.5%2012%200.5ZM12%202.5C10.067%202.5%208.5%204.067%208.5%206C8.5%207.933%2010.067%209.5%2012%209.5C13.933%209.5%2015.5%207.933%2015.5%206C15.5%204.067%2013.933%202.5%2012%202.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Plagiarism Icon */
.gravity-icon-plagiarism {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM3.29773%204.52215C2.32827%205.755%201.75%207.30997%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C10.6867%2016.25%2012.2389%2015.674%2013.4706%2014.708L11.7728%2013.0102C10.9787%2013.5594%2010.0192%2013.8751%208.99988%2013.8751C6.30749%2013.8751%204.12488%2011.6925%204.12488%209.00012C4.12488%207.96995%204.44441%207.01441%204.98978%206.22721L3.38128%204.61872C3.35069%204.58813%203.32284%204.55584%203.29773%204.52215ZM4.52215%203.29773C4.55584%203.32284%204.58813%203.35069%204.61872%203.38128L6.22726%204.98982C7.0144%204.44458%207.96984%204.12512%208.99988%204.12512C10.4133%204.12512%2011.7309%204.73119%2012.6499%205.76846C12.9703%206.13018%2012.9369%206.68318%2012.5752%207.00364C12.2134%207.32409%2011.6604%207.29064%2011.34%206.92893C10.7498%206.26272%209.90714%205.87512%208.99988%205.87512C8.45512%205.87512%207.94293%206.01451%207.497%206.25957L11.7408%2010.5033C11.8186%2010.3615%2011.886%2010.2126%2011.9418%2010.0574C12.1052%209.60261%2012.6064%209.36647%2013.0612%209.52993C13.5159%209.69339%2013.7521%2010.1946%2013.5886%2010.6493C13.4434%2011.0532%2013.248%2011.43%2013.0105%2011.7731L14.708%2013.4706C15.674%2012.2389%2016.25%2010.6867%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75C7.30997%201.75%205.755%202.32827%204.52215%203.29773ZM10.5029%2011.7404L6.2595%207.49693C6.01433%207.94293%205.87488%208.45524%205.87488%209.00012C5.87488%2010.726%207.27399%2012.1251%208.99988%2012.1251C9.5398%2012.1251%2010.0535%2011.9869%2010.5029%2011.7404Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM3.29773%204.52215C2.32827%205.755%201.75%207.30997%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C10.6867%2016.25%2012.2389%2015.674%2013.4706%2014.708L11.7728%2013.0102C10.9787%2013.5594%2010.0192%2013.8751%208.99988%2013.8751C6.30749%2013.8751%204.12488%2011.6925%204.12488%209.00012C4.12488%207.96995%204.44441%207.01441%204.98978%206.22721L3.38128%204.61872C3.35069%204.58813%203.32284%204.55584%203.29773%204.52215ZM4.52215%203.29773C4.55584%203.32284%204.58813%203.35069%204.61872%203.38128L6.22726%204.98982C7.0144%204.44458%207.96984%204.12512%208.99988%204.12512C10.4133%204.12512%2011.7309%204.73119%2012.6499%205.76846C12.9703%206.13018%2012.9369%206.68318%2012.5752%207.00364C12.2134%207.32409%2011.6604%207.29064%2011.34%206.92893C10.7498%206.26272%209.90714%205.87512%208.99988%205.87512C8.45512%205.87512%207.94293%206.01451%207.497%206.25957L11.7408%2010.5033C11.8186%2010.3615%2011.886%2010.2126%2011.9418%2010.0574C12.1052%209.60261%2012.6064%209.36647%2013.0612%209.52993C13.5159%209.69339%2013.7521%2010.1946%2013.5886%2010.6493C13.4434%2011.0532%2013.248%2011.43%2013.0105%2011.7731L14.708%2013.4706C15.674%2012.2389%2016.25%2010.6867%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75C7.30997%201.75%205.755%202.32827%204.52215%203.29773ZM10.5029%2011.7404L6.2595%207.49693C6.01433%207.94293%205.87488%208.45524%205.87488%209.00012C5.87488%2010.726%207.27399%2012.1251%208.99988%2012.1251C9.5398%2012.1251%2010.0535%2011.9869%2010.5029%2011.7404Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-plagiarism.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM4.25786%205.67028C2.84669%207.3943%202%209.59827%202%2012C2%2017.5228%206.47715%2022%2012%2022C14.4013%2022%2016.6049%2021.1536%2018.3287%2019.7429L16.1923%2017.6065C15.013%2018.4883%2013.555%2019.0001%2011.9999%2019.0001C8.13387%2019.0001%204.99986%2015.8661%204.99986%2012.0001C4.99986%2010.4277%205.51831%208.97642%206.3936%207.80781L4.29289%205.70711C4.28084%205.69506%204.26917%205.68278%204.25786%205.67028ZM5.67028%204.25786C5.68278%204.26917%205.69506%204.28084%205.70711%204.29289L7.80785%206.39363C8.9764%205.51849%2010.4276%205.00014%2011.9999%205.00014C14.0297%205.00014%2015.9212%205.87023%2017.2409%207.35987C17.6072%207.77326%2017.569%208.40527%2017.1556%208.77151C16.7422%209.13774%2016.1102%209.09951%2015.7439%208.68612C14.7999%207.62055%2013.4511%207.00014%2011.9999%207.00014C10.9809%207.00014%2010.033%207.30497%209.24264%207.82842L16.1722%2014.758C16.3896%2014.4295%2016.5699%2014.0724%2016.7068%2013.6917C16.8936%2013.172%2017.4663%2012.9021%2017.9861%2013.0889C18.5058%2013.2757%2018.7757%2013.8485%2018.5889%2014.3682C18.3502%2015.0322%2018.017%2015.645%2017.607%2016.1928L19.7429%2018.3287C21.1536%2016.6049%2022%2014.4013%2022%2012C22%206.47715%2017.5228%202%2012%202C9.59827%202%207.3943%202.84669%205.67028%204.25786ZM14.7574%2016.1716L7.82837%209.24258C7.30478%2010.033%206.99986%2010.981%206.99986%2012.0001C6.99986%2014.7616%209.23844%2017.0001%2011.9999%2017.0001C13.0086%2017.0001%2013.9602%2016.6987%2014.7574%2016.1716Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM4.25786%205.67028C2.84669%207.3943%202%209.59827%202%2012C2%2017.5228%206.47715%2022%2012%2022C14.4013%2022%2016.6049%2021.1536%2018.3287%2019.7429L16.1923%2017.6065C15.013%2018.4883%2013.555%2019.0001%2011.9999%2019.0001C8.13387%2019.0001%204.99986%2015.8661%204.99986%2012.0001C4.99986%2010.4277%205.51831%208.97642%206.3936%207.80781L4.29289%205.70711C4.28084%205.69506%204.26917%205.68278%204.25786%205.67028ZM5.67028%204.25786C5.68278%204.26917%205.69506%204.28084%205.70711%204.29289L7.80785%206.39363C8.9764%205.51849%2010.4276%205.00014%2011.9999%205.00014C14.0297%205.00014%2015.9212%205.87023%2017.2409%207.35987C17.6072%207.77326%2017.569%208.40527%2017.1556%208.77151C16.7422%209.13774%2016.1102%209.09951%2015.7439%208.68612C14.7999%207.62055%2013.4511%207.00014%2011.9999%207.00014C10.9809%207.00014%2010.033%207.30497%209.24264%207.82842L16.1722%2014.758C16.3896%2014.4295%2016.5699%2014.0724%2016.7068%2013.6917C16.8936%2013.172%2017.4663%2012.9021%2017.9861%2013.0889C18.5058%2013.2757%2018.7757%2013.8485%2018.5889%2014.3682C18.3502%2015.0322%2018.017%2015.645%2017.607%2016.1928L19.7429%2018.3287C21.1536%2016.6049%2022%2014.4013%2022%2012C22%206.47715%2017.5228%202%2012%202C9.59827%202%207.3943%202.84669%205.67028%204.25786ZM14.7574%2016.1716L7.82837%209.24258C7.30478%2010.033%206.99986%2010.981%206.99986%2012.0001C6.99986%2014.7616%209.23844%2017.0001%2011.9999%2017.0001C13.0086%2017.0001%2013.9602%2016.6987%2014.7574%2016.1716Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Play Icon */
.gravity-icon-play {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.84239%202.14773L16.2066%207.67967C16.9379%208.07001%2017.2134%208.97756%2016.8219%209.70672C16.682%209.96727%2016.4679%2010.1807%2016.2066%2010.3202L5.84238%2015.852C5.23294%2016.1773%204.47441%2015.9484%204.14817%2015.3408C4.0509%2015.1596%204%2014.9573%204%2014.7518L4%203.24796C4%202.55873%204.56038%202%205.25165%202C5.45776%202%205.66068%202.05075%205.84239%202.14773Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.84239%202.14773L16.2066%207.67967C16.9379%208.07001%2017.2134%208.97756%2016.8219%209.70672C16.682%209.96727%2016.4679%2010.1807%2016.2066%2010.3202L5.84238%2015.852C5.23294%2016.1773%204.47441%2015.9484%204.14817%2015.3408C4.0509%2015.1596%204%2014.9573%204%2014.7518L4%203.24796C4%202.55873%204.56038%202%205.25165%202C5.45776%202%205.66068%202.05075%205.84239%202.14773Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-play.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.19562%202.16875L22.0592%2010.4487C22.9164%2010.8961%2023.2484%2011.9533%2022.8007%2012.81C22.6351%2013.127%2022.3763%2013.3856%2022.0592%2013.5511L6.1956%2021.8309C5.46087%2022.2144%204.55419%2021.93%204.17049%2021.1957C4.05849%2020.9813%204%2020.7431%204%2020.5013L4%203.49835C4%202.66992%204.67195%201.99835%205.50085%201.99835C5.7428%201.99835%205.98116%202.05681%206.19562%202.16875Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.19562%202.16875L22.0592%2010.4487C22.9164%2010.8961%2023.2484%2011.9533%2022.8007%2012.81C22.6351%2013.127%2022.3763%2013.3856%2022.0592%2013.5511L6.1956%2021.8309C5.46087%2022.2144%204.55419%2021.93%204.17049%2021.1957C4.05849%2020.9813%204%2020.7431%204%2020.5013L4%203.49835C4%202.66992%204.67195%201.99835%205.50085%201.99835C5.7428%201.99835%205.98116%202.05681%206.19562%202.16875Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Previous Icon */
.gravity-icon-previous {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.31628%208.38128L11.4398%202.25774C11.7815%201.91603%2012.3356%201.91603%2012.6773%202.25774C13.019%202.59945%2013.019%203.15347%2012.6773%203.49518L7.17243%209L12.6773%2014.5048C13.019%2014.8465%2013.019%2015.4006%2012.6773%2015.7423C12.3356%2016.084%2011.7815%2016.084%2011.4398%2015.7423L5.31628%209.61872C4.97457%209.27701%204.97457%208.72299%205.31628%208.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.31628%208.38128L11.4398%202.25774C11.7815%201.91603%2012.3356%201.91603%2012.6773%202.25774C13.019%202.59945%2013.019%203.15347%2012.6773%203.49518L7.17243%209L12.6773%2014.5048C13.019%2014.8465%2013.019%2015.4006%2012.6773%2015.7423C12.3356%2016.084%2011.7815%2016.084%2011.4398%2015.7423L5.31628%209.61872C4.97457%209.27701%204.97457%208.72299%205.31628%208.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-previous.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.81897%207.39896L9.9667%202.25122C10.2986%201.91928%2010.8368%201.91928%2011.1688%202.25122C11.5007%202.58317%2011.5007%203.12136%2011.1688%203.4533L6.62209%208L11.1688%2012.5467C11.5007%2012.8786%2011.5007%2013.4168%2011.1688%2013.7488C10.8368%2014.0807%2010.2986%2014.0807%209.9667%2013.7488L4.81897%208.60104C4.48702%208.26909%204.48702%207.7309%204.81897%207.39896Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.81897%207.39896L9.9667%202.25122C10.2986%201.91928%2010.8368%201.91928%2011.1688%202.25122C11.5007%202.58317%2011.5007%203.12136%2011.1688%203.4533L6.62209%208L11.1688%2012.5467C11.5007%2012.8786%2011.5007%2013.4168%2011.1688%2013.7488C10.8368%2014.0807%2010.2986%2014.0807%209.9667%2013.7488L4.81897%208.60104C4.48702%208.26909%204.48702%207.7309%204.81897%207.39896Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-previous.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.79342%2011.2915L15.7898%202.29347C16.1811%201.90218%2016.8154%201.90218%2017.2066%202.29347C17.5978%202.68477%2017.5978%203.31919%2017.2066%203.71048L8.91855%2012L17.2066%2020.2895C17.5978%2020.6808%2017.5978%2021.3152%2017.2066%2021.7065C16.8154%2022.0978%2016.1811%2022.0978%2015.7898%2021.7065L6.79342%2012.7085C6.40219%2012.3172%206.40219%2011.6828%206.79342%2011.2915Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.79342%2011.2915L15.7898%202.29347C16.1811%201.90218%2016.8154%201.90218%2017.2066%202.29347C17.5978%202.68477%2017.5978%203.31919%2017.2066%203.71048L8.91855%2012L17.2066%2020.2895C17.5978%2020.6808%2017.5978%2021.3152%2017.2066%2021.7065C16.8154%2022.0978%2016.1811%2022.0978%2015.7898%2021.7065L6.79342%2012.7085C6.40219%2012.3172%206.40219%2011.6828%206.79342%2011.2915Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Print Icon */
.gravity-icon-print {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2017C14.5523%2017%2015%2016.5523%2015%2016H17C17.5523%2016%2018%2015.5523%2018%2015V8.5C18%207.11929%2016.8807%206%2015.5%206H15V2C15%201.44772%2014.5523%201%2014%201H4C3.44772%201%203%201.44772%203%202V6H2.5C1.11929%206%200%207.11929%200%208.5V15C0%2015.5523%200.447715%2016%201%2016H3C3%2016.5523%203.44772%2017%204%2017H14ZM16.25%2014.25H15V13C15%2012.4477%2014.5523%2012%2014%2012H4C3.44772%2012%203%2012.4477%203%2013V14.25H1.75V8.5C1.75%208.08579%202.08579%207.75%202.5%207.75H3V9C3%209.55229%203.44772%2010%204%2010H14C14.5523%2010%2015%209.55229%2015%209V7.75H15.5C15.9142%207.75%2016.25%208.08579%2016.25%208.5V14.25ZM4.75%202.75V8.25H13.25V2.75H4.75ZM4.75%2015.25V13.75H13.25V15.25H4.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14%2017C14.5523%2017%2015%2016.5523%2015%2016H17C17.5523%2016%2018%2015.5523%2018%2015V8.5C18%207.11929%2016.8807%206%2015.5%206H15V2C15%201.44772%2014.5523%201%2014%201H4C3.44772%201%203%201.44772%203%202V6H2.5C1.11929%206%200%207.11929%200%208.5V15C0%2015.5523%200.447715%2016%201%2016H3C3%2016.5523%203.44772%2017%204%2017H14ZM16.25%2014.25H15V13C15%2012.4477%2014.5523%2012%2014%2012H4C3.44772%2012%203%2012.4477%203%2013V14.25H1.75V8.5C1.75%208.08579%202.08579%207.75%202.5%207.75H3V9C3%209.55229%203.44772%2010%204%2010H14C14.5523%2010%2015%209.55229%2015%209V7.75H15.5C15.9142%207.75%2016.25%208.08579%2016.25%208.5V14.25ZM4.75%202.75V8.25H13.25V2.75H4.75ZM4.75%2015.25V13.75H13.25V15.25H4.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-print.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202V8H3.5C1.567%208%200%209.567%200%2011.5V19C0%2020.1046%200.89543%2021%202%2021H4V22C4%2022.5523%204.44772%2023%205%2023H19C19.5523%2023%2020%2022.5523%2020%2022V21H22C23.1046%2021%2024%2020.1046%2024%2019V11.5C24%209.567%2022.433%208%2020.5%208H20V2C20%201.44772%2019.5523%201%2019%201H5C4.44772%201%204%201.44772%204%202ZM3.5%2010H4V13C4%2013.5523%204.44772%2014%205%2014H19C19.5523%2014%2020%2013.5523%2020%2013V10H20.5C21.3284%2010%2022%2010.6716%2022%2011.5V19H20V18C20%2017.4477%2019.5523%2017%2019%2017H5C4.44772%2017%204%2017.4477%204%2018V19H2V11.5C2%2010.6716%202.67157%2010%203.5%2010ZM6%203V12H18V3H6ZM6%2021V19H18V21H6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202V8H3.5C1.567%208%200%209.567%200%2011.5V19C0%2020.1046%200.89543%2021%202%2021H4V22C4%2022.5523%204.44772%2023%205%2023H19C19.5523%2023%2020%2022.5523%2020%2022V21H22C23.1046%2021%2024%2020.1046%2024%2019V11.5C24%209.567%2022.433%208%2020.5%208H20V2C20%201.44772%2019.5523%201%2019%201H5C4.44772%201%204%201.44772%204%202ZM3.5%2010H4V13C4%2013.5523%204.44772%2014%205%2014H19C19.5523%2014%2020%2013.5523%2020%2013V10H20.5C21.3284%2010%2022%2010.6716%2022%2011.5V19H20V18C20%2017.4477%2019.5523%2017%2019%2017H5C4.44772%2017%204%2017.4477%204%2018V19H2V11.5C2%2010.6716%202.67157%2010%203.5%2010ZM6%203V12H18V3H6ZM6%2021V19H18V21H6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Redo Icon */
.gravity-icon-redo {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.0269%2010.25C12.8366%208.48258%2010.8494%207.37291%208.66197%207.37291C6.00801%207.37291%203.65109%209.00645%202.65233%2011.4602C2.47077%2011.9062%201.9684%2012.118%201.53024%2011.9332C1.09209%2011.7484%200.884081%2011.2369%201.06564%2010.7909C2.32805%207.6894%205.30741%205.62445%208.66197%205.62445C11.3116%205.62445%2013.7289%206.91269%2015.25%208.98609V6.875C15.25%206.39175%2015.6418%206%2016.125%206C16.6082%206%2017%206.39175%2017%206.875V11.125C17%2011.6083%2016.6082%2012%2016.125%2012H11.875C11.3918%2012%2011%2011.6083%2011%2011.125C11%2010.6418%2011.3918%2010.25%2011.875%2010.25H14.0269Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.0269%2010.25C12.8366%208.48258%2010.8494%207.37291%208.66197%207.37291C6.00801%207.37291%203.65109%209.00645%202.65233%2011.4602C2.47077%2011.9062%201.9684%2012.118%201.53024%2011.9332C1.09209%2011.7484%200.884081%2011.2369%201.06564%2010.7909C2.32805%207.6894%205.30741%205.62445%208.66197%205.62445C11.3116%205.62445%2013.7289%206.91269%2015.25%208.98609V6.875C15.25%206.39175%2015.6418%206%2016.125%206C16.6082%206%2017%206.39175%2017%206.875V11.125C17%2011.6083%2016.6082%2012%2016.125%2012H11.875C11.3918%2012%2011%2011.6083%2011%2011.125C11%2010.6418%2011.3918%2010.25%2011.875%2010.25H14.0269Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-redo.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.6%2014C17.0606%2011.6902%2014.4724%2010.25%2011.6296%2010.25C8.23241%2010.25%205.20987%2012.3077%203.89801%2015.4138C3.68351%2015.9217%203.10259%2016.1575%202.60049%2015.9406C2.09839%2015.7236%201.86524%2015.136%202.07974%2014.6281C3.69999%2010.7918%207.43364%208.25%2011.6296%208.25C14.9971%208.25%2018.0763%209.8869%2019.9998%2012.5374V10C19.9998%209.44772%2020.4475%209%2020.9998%209C21.5521%209%2021.9998%209.44772%2021.9998%2010V15C21.9998%2015.5523%2021.5521%2016%2020.9998%2016H15.9998C15.4475%2016%2014.9998%2015.5523%2014.9998%2015C14.9998%2014.4477%2015.4475%2014%2015.9998%2014H18.6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.6%2014C17.0606%2011.6902%2014.4724%2010.25%2011.6296%2010.25C8.23241%2010.25%205.20987%2012.3077%203.89801%2015.4138C3.68351%2015.9217%203.10259%2016.1575%202.60049%2015.9406C2.09839%2015.7236%201.86524%2015.136%202.07974%2014.6281C3.69999%2010.7918%207.43364%208.25%2011.6296%208.25C14.9971%208.25%2018.0763%209.8869%2019.9998%2012.5374V10C19.9998%209.44772%2020.4475%209%2020.9998%209C21.5521%209%2021.9998%209.44772%2021.9998%2010V15C21.9998%2015.5523%2021.5521%2016%2020.9998%2016H15.9998C15.4475%2016%2014.9998%2015.5523%2014.9998%2015C14.9998%2014.4477%2015.4475%2014%2015.9998%2014H18.6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Refresh Icon */
.gravity-icon-refresh {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1285%206.27501C14.5588%204.96535%2013.587%203.86293%2012.3164%203.12933C9.08795%201.26537%204.95971%202.37153%203.09575%205.60001C1.23179%208.82848%202.33795%2012.9567%205.56642%2014.8207C8.7949%2016.6846%2012.9231%2015.5785%2014.7871%2012.35C15.0287%2011.9315%2015.5639%2011.7881%2015.9824%2012.0297C16.4009%2012.2714%2016.5443%2012.8065%2016.3026%2013.225C13.9554%2017.2905%208.75691%2018.6834%204.69142%2016.3362C0.625934%2013.989%20-0.767004%208.79049%201.58021%204.72501C3.92742%200.659519%209.12593%20-0.73342%2013.1914%201.61379C14.4697%202.35181%2015.5093%203.38863%2016.2414%204.61759V1.50001C16.2414%201.01676%2016.6332%200.625006%2017.1164%200.625006C17.5997%200.625006%2017.9914%201.01676%2017.9914%201.50001V7.15001C17.9914%207.39163%2017.8935%207.61038%2017.7351%207.76872C17.5768%207.92707%2017.358%208.02501%2017.1164%208.02501H11.4664C10.9832%208.02501%2010.5914%207.63325%2010.5914%207.15001C10.5914%206.66676%2010.9832%206.27501%2011.4664%206.27501H15.1285Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1285%206.27501C14.5588%204.96535%2013.587%203.86293%2012.3164%203.12933C9.08795%201.26537%204.95971%202.37153%203.09575%205.60001C1.23179%208.82848%202.33795%2012.9567%205.56642%2014.8207C8.7949%2016.6846%2012.9231%2015.5785%2014.7871%2012.35C15.0287%2011.9315%2015.5639%2011.7881%2015.9824%2012.0297C16.4009%2012.2714%2016.5443%2012.8065%2016.3026%2013.225C13.9554%2017.2905%208.75691%2018.6834%204.69142%2016.3362C0.625934%2013.989%20-0.767004%208.79049%201.58021%204.72501C3.92742%200.659519%209.12593%20-0.73342%2013.1914%201.61379C14.4697%202.35181%2015.5093%203.38863%2016.2414%204.61759V1.50001C16.2414%201.01676%2016.6332%200.625006%2017.1164%200.625006C17.5997%200.625006%2017.9914%201.01676%2017.9914%201.50001V7.15001C17.9914%207.39163%2017.8935%207.61038%2017.7351%207.76872C17.5768%207.92707%2017.358%208.02501%2017.1164%208.02501H11.4664C10.9832%208.02501%2010.5914%207.63325%2010.5914%207.15001C10.5914%206.66676%2010.9832%206.27501%2011.4664%206.27501H15.1285Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-refresh.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.618%208C19.8058%206.24464%2018.473%204.76754%2016.75%203.77276C12.2062%201.1494%206.39611%202.70622%203.77276%207.25C1.1494%2011.7938%202.70622%2017.6039%207.25%2020.2272C11.7938%2022.8506%2017.6039%2021.2938%2020.2272%2016.75C20.5034%2016.2717%2021.115%2016.1078%2021.5933%2016.384C22.0716%2016.6601%2022.2354%2017.2717%2021.9593%2017.75C18.7837%2023.2504%2011.7504%2025.1349%206.25%2021.9593C0.749632%2018.7837%20-1.13493%2011.7504%202.04071%206.25C5.21634%200.749632%2012.2496%20-1.13493%2017.75%202.04071C19.5527%203.08152%2021.0044%204.56136%2022%206.31709V1.5C22%200.947713%2022.4477%200.499998%2023%200.499998C23.5523%200.499998%2024%200.947713%2024%201.5V9C24%209.27614%2023.8881%209.52614%2023.7071%209.7071C23.5261%209.88807%2023.2761%2010%2023%2010H15.5C14.9477%2010%2014.5%209.55228%2014.5%209C14.5%208.44771%2014.9477%208%2015.5%208H20.618Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.618%208C19.8058%206.24464%2018.473%204.76754%2016.75%203.77276C12.2062%201.1494%206.39611%202.70622%203.77276%207.25C1.1494%2011.7938%202.70622%2017.6039%207.25%2020.2272C11.7938%2022.8506%2017.6039%2021.2938%2020.2272%2016.75C20.5034%2016.2717%2021.115%2016.1078%2021.5933%2016.384C22.0716%2016.6601%2022.2354%2017.2717%2021.9593%2017.75C18.7837%2023.2504%2011.7504%2025.1349%206.25%2021.9593C0.749632%2018.7837%20-1.13493%2011.7504%202.04071%206.25C5.21634%200.749632%2012.2496%20-1.13493%2017.75%202.04071C19.5527%203.08152%2021.0044%204.56136%2022%206.31709V1.5C22%200.947713%2022.4477%200.499998%2023%200.499998C23.5523%200.499998%2024%200.947713%2024%201.5V9C24%209.27614%2023.8881%209.52614%2023.7071%209.7071C23.5261%209.88807%2023.2761%2010%2023%2010H15.5C14.9477%2010%2014.5%209.55228%2014.5%209C14.5%208.44771%2014.9477%208%2015.5%208H20.618Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Remove Item Icon */
.gravity-icon-remove-item {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM12%208C12.5523%208%2013%208.44771%2013%209C13%209.55229%2012.5523%2010%2012%2010H6C5.44772%2010%205%209.55229%205%209C5%208.44771%205.44772%208%206%208H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM12%208C12.5523%208%2013%208.44771%2013%209C13%209.55229%2012.5523%2010%2012%2010H6C5.44772%2010%205%209.55229%205%209C5%208.44771%205.44772%208%206%208H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-remove-item.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM8%201.65C4.49299%201.65%201.65%204.49299%201.65%208C1.65%2011.507%204.49299%2014.35%208%2014.35C11.507%2014.35%2014.35%2011.507%2014.35%208C14.35%204.49299%2011.507%201.65%208%201.65ZM11%207C11.5523%207%2012%207.44772%2012%208C12%208.55229%2011.5523%209%2011%209H5C4.44772%209%204%208.55229%204%208C4%207.44772%204.44772%207%205%207H11Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM8%201.65C4.49299%201.65%201.65%204.49299%201.65%208C1.65%2011.507%204.49299%2014.35%208%2014.35C11.507%2014.35%2014.35%2011.507%2014.35%208C14.35%204.49299%2011.507%201.65%208%201.65ZM11%207C11.5523%207%2012%207.44772%2012%208C12%208.55229%2011.5523%209%2011%209H5C4.44772%209%204%208.55229%204%208C4%207.44772%204.44772%207%205%207H11Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-remove-item.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM17%2011C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011H17Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM17%2011C17.5523%2011%2018%2011.4477%2018%2012C18%2012.5523%2017.5523%2013%2017%2013H7C6.44772%2013%206%2012.5523%206%2012C6%2011.4477%206.44772%2011%207%2011H17Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Rewind Icon */
.gravity-icon-rewind {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.97823%2011.0197V12.7512C9.97823%2012.9394%209.93545%2013.1253%209.85309%2013.2948C9.55144%2013.9155%208.80126%2014.1754%208.17751%2013.8752L0.85036%2010.3486C0.544864%2010.2016%200.298245%209.95614%200.150506%209.6521C-0.21147%208.90718%200.10187%208.01126%200.850371%207.65102L8.17752%204.12454C8.34781%204.04257%208.53453%204%208.7237%204C9.41656%204%209.97823%204.55899%209.97823%205.24854V6.97995L14.1339%204.67087C14.3208%204.567%2014.5314%204.51247%2014.7455%204.51247C15.4383%204.51247%2016%205.07146%2016%205.76101V12.2387C16%2012.4518%2015.9452%2012.6613%2015.8408%2012.8474C15.5031%2013.4495%2014.7388%2013.665%2014.1339%2013.3289L9.97823%2011.0197Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.97823%2011.0197V12.7512C9.97823%2012.9394%209.93545%2013.1253%209.85309%2013.2948C9.55144%2013.9155%208.80126%2014.1754%208.17751%2013.8752L0.85036%2010.3486C0.544864%2010.2016%200.298245%209.95614%200.150506%209.6521C-0.21147%208.90718%200.10187%208.01126%200.850371%207.65102L8.17752%204.12454C8.34781%204.04257%208.53453%204%208.7237%204C9.41656%204%209.97823%204.55899%209.97823%205.24854V6.97995L14.1339%204.67087C14.3208%204.567%2014.5314%204.51247%2014.7455%204.51247C15.4383%204.51247%2016%205.07146%2016%205.76101V12.2387C16%2012.4518%2015.9452%2012.6613%2015.8408%2012.8474C15.5031%2013.4495%2014.7388%2013.665%2014.1339%2013.3289L9.97823%2011.0197Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-rewind.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.9872%2015.1366V17.497C13.9872%2017.7247%2013.9352%2017.9495%2013.8352%2018.1541C13.4715%2018.8984%2012.5721%2019.2075%2011.8263%2018.8445L0.984894%2013.5685C0.63332%2013.3974%200.349198%2013.1139%200.177747%2012.763C-0.246566%2011.8948%200.114812%2010.8476%200.984907%2010.4242L11.8263%205.14828C12.0314%205.04846%2012.2566%204.99658%2012.4848%204.99658C13.3146%204.99658%2013.9872%205.66783%2013.9872%206.49585V8.85632L19.7634%205.62753C19.9877%205.50214%2020.2405%205.4363%2020.4976%205.4363C21.3274%205.4363%2022%206.10754%2022%206.93556V17.0574C22%2017.314%2021.934%2017.5663%2021.8084%2017.7901C21.4029%2018.5125%2020.4873%2018.7701%2019.7634%2018.3654L13.9872%2015.1366Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.9872%2015.1366V17.497C13.9872%2017.7247%2013.9352%2017.9495%2013.8352%2018.1541C13.4715%2018.8984%2012.5721%2019.2075%2011.8263%2018.8445L0.984894%2013.5685C0.63332%2013.3974%200.349198%2013.1139%200.177747%2012.763C-0.246566%2011.8948%200.114812%2010.8476%200.984907%2010.4242L11.8263%205.14828C12.0314%205.04846%2012.2566%204.99658%2012.4848%204.99658C13.3146%204.99658%2013.9872%205.66783%2013.9872%206.49585V8.85632L19.7634%205.62753C19.9877%205.50214%2020.2405%205.4363%2020.4976%205.4363C21.3274%205.4363%2022%206.10754%2022%206.93556V17.0574C22%2017.314%2021.934%2017.5663%2021.8084%2017.7901C21.4029%2018.5125%2020.4873%2018.7701%2019.7634%2018.3654L13.9872%2015.1366Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Rewind 10 Icon */
.gravity-icon-rewind-10 {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.96854%200C13.9557%200%2018%204.02867%2018%209C18%2013.9713%2013.9557%2018%208.96854%2018C4.4015%2018%200.567688%2014.6036%200.0069654%2010.1243C-0.0539056%209.63804%200.290939%209.1945%200.777196%209.13363C1.26345%209.07276%201.70699%209.41761%201.76786%209.90387C2.2176%2013.4966%205.29777%2016.2254%208.96854%2016.2254C12.9771%2016.2254%2016.2254%2012.9897%2016.2254%209C16.2254%205.01032%2012.9771%201.77465%208.96854%201.77465C7.66021%201.77465%206.40796%202.12042%205.31708%202.75406L6.88179%204.31877C6.95704%204.39401%206.9992%204.49614%206.99894%204.60256C6.99842%204.82347%206.81891%205.00213%206.598%205.00161L2.39905%204.99167C2.17851%204.99115%202%204.81221%202%204.59167V0.402664C2%200.296578%202.04214%200.194836%202.11716%200.119821C2.27337%20-0.0363883%202.52663%20-0.0363883%202.68284%200.119821L4.02772%201.4647C5.47485%200.520556%207.18099%200%208.96854%200ZM11.0762%205.74902C11.8998%205.74902%2012.5224%206.06152%2012.9439%206.68652C13.3655%207.31153%2013.5762%208.22623%2013.5762%209.43066C13.5762%2010.6774%2013.372%2011.6003%2012.9634%2012.1992C12.5549%2012.7982%2011.9258%2013.0977%2011.0762%2013.0977C10.2527%2013.0977%209.63174%2012.7884%209.21344%2012.1699C8.79515%2011.5514%208.586%2010.6384%208.586%209.43066C8.586%208.17089%208.78945%207.24235%209.19635%206.64502C9.60326%206.04769%2010.2299%205.74902%2011.0762%205.74902ZM7.43086%205.86133V13H5.92207V8.86914L5.93672%208.19043L5.96113%207.44824L5.60638%207.79343C5.55974%207.83687%205.51935%207.87328%205.48521%207.90264L4.61836%208.60059L3.89082%207.69238L6.19062%205.86133H7.43086ZM11.0762%206.96973C10.7214%206.96973%2010.4675%207.16097%2010.3145%207.54346C10.1615%207.92595%2010.085%208.55501%2010.085%209.43066C10.085%2010.3063%2010.1607%2010.9338%2010.3121%2011.313C10.4634%2011.6922%2010.7182%2011.8818%2011.0762%2011.8818C11.4278%2011.8818%2011.6817%2011.6898%2011.838%2011.3057C11.9942%2010.9215%2012.0723%2010.2966%2012.0723%209.43066C12.0723%208.55501%2011.9934%207.92595%2011.8355%207.54346C11.6776%207.16097%2011.4245%206.96973%2011.0762%206.96973Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.96854%200C13.9557%200%2018%204.02867%2018%209C18%2013.9713%2013.9557%2018%208.96854%2018C4.4015%2018%200.567688%2014.6036%200.0069654%2010.1243C-0.0539056%209.63804%200.290939%209.1945%200.777196%209.13363C1.26345%209.07276%201.70699%209.41761%201.76786%209.90387C2.2176%2013.4966%205.29777%2016.2254%208.96854%2016.2254C12.9771%2016.2254%2016.2254%2012.9897%2016.2254%209C16.2254%205.01032%2012.9771%201.77465%208.96854%201.77465C7.66021%201.77465%206.40796%202.12042%205.31708%202.75406L6.88179%204.31877C6.95704%204.39401%206.9992%204.49614%206.99894%204.60256C6.99842%204.82347%206.81891%205.00213%206.598%205.00161L2.39905%204.99167C2.17851%204.99115%202%204.81221%202%204.59167V0.402664C2%200.296578%202.04214%200.194836%202.11716%200.119821C2.27337%20-0.0363883%202.52663%20-0.0363883%202.68284%200.119821L4.02772%201.4647C5.47485%200.520556%207.18099%200%208.96854%200ZM11.0762%205.74902C11.8998%205.74902%2012.5224%206.06152%2012.9439%206.68652C13.3655%207.31153%2013.5762%208.22623%2013.5762%209.43066C13.5762%2010.6774%2013.372%2011.6003%2012.9634%2012.1992C12.5549%2012.7982%2011.9258%2013.0977%2011.0762%2013.0977C10.2527%2013.0977%209.63174%2012.7884%209.21344%2012.1699C8.79515%2011.5514%208.586%2010.6384%208.586%209.43066C8.586%208.17089%208.78945%207.24235%209.19635%206.64502C9.60326%206.04769%2010.2299%205.74902%2011.0762%205.74902ZM7.43086%205.86133V13H5.92207V8.86914L5.93672%208.19043L5.96113%207.44824L5.60638%207.79343C5.55974%207.83687%205.51935%207.87328%205.48521%207.90264L4.61836%208.60059L3.89082%207.69238L6.19062%205.86133H7.43086ZM11.0762%206.96973C10.7214%206.96973%2010.4675%207.16097%2010.3145%207.54346C10.1615%207.92595%2010.085%208.55501%2010.085%209.43066C10.085%2010.3063%2010.1607%2010.9338%2010.3121%2011.313C10.4634%2011.6922%2010.7182%2011.8818%2011.0762%2011.8818C11.4278%2011.8818%2011.6817%2011.6898%2011.838%2011.3057C11.9942%2010.9215%2012.0723%2010.2966%2012.0723%209.43066C12.0723%208.55501%2011.9934%207.92595%2011.8355%207.54346C11.6776%207.16097%2011.4245%206.96973%2011.0762%206.96973Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-rewind-10.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.9776%200C18.6174%200%2024%205.37258%2024%2012C24%2018.6274%2018.6174%2024%2011.9776%2024C5.74444%2024%200.559894%2019.2458%200.00410667%2013.0898C-0.0455542%2012.5397%200.36093%2012.0536%200.912014%2012.004C1.4631%2011.9545%201.9501%2012.3602%201.99976%2012.9102C2.46268%2018.0377%206.78365%2022%2011.9776%2022C17.5107%2022%2021.9963%2017.5228%2021.9963%2012C21.9963%206.47715%2017.5107%202%2011.9776%202C10.2035%202%208.50375%202.4618%207.01652%203.30941L8.85539%205.14829C8.94946%205.24235%209.00216%205.37002%209.00184%205.50305C9.00117%205.77919%208.77677%206.00251%208.50063%206.00184L3.49879%205.9897C3.22312%205.98903%203%205.76537%203%205.48971V0.5C3%200.367392%203.05268%200.240215%203.14645%200.146447C3.34171%20-0.0488155%203.65829%20-0.0488155%203.85355%200.146447L5.5585%201.85139C7.45043%200.656809%209.66255%200%2011.9776%200ZM14.6091%207.57373C15.6798%207.57373%2016.4891%207.97998%2017.0371%208.79248C17.5851%209.60498%2017.8591%2010.7941%2017.8591%2012.3599C17.8591%2013.9806%2017.5936%2015.1803%2017.0625%2015.959C16.5314%2016.7376%2015.7136%2017.127%2014.6091%2017.127C13.5385%2017.127%2012.7313%2016.7249%2012.1875%2015.9209C11.6437%2015.1169%2011.3718%2013.9299%2011.3718%2012.3599C11.3718%2010.7222%2011.6363%209.51506%2012.1653%208.73853C12.6942%207.96199%2013.5088%207.57373%2014.6091%207.57373ZM9.87012%207.71973V17H7.90869V11.6299L7.92773%2010.7476L7.95947%209.78271L7.59532%2010.1399C7.45783%2010.2711%207.35282%2010.3658%207.28027%2010.4238L6.21387%2011.2808L5.26807%2010.1001L8.25781%207.71973H9.87012ZM14.6091%209.16064C14.1478%209.16064%2013.8178%209.40926%2013.6189%209.90649C13.42%2010.4037%2013.3205%2011.2215%2013.3205%2012.3599C13.3205%2013.4982%2013.4189%2014.3139%2013.6157%2014.8069C13.8125%2015.2999%2014.1436%2015.5464%2014.6091%2015.5464C15.0661%2015.5464%2015.3962%2015.2967%2015.5993%2014.7974C15.8025%2014.298%2015.904%2013.4855%2015.904%2012.3599C15.904%2011.2215%2015.8014%2010.4037%2015.5962%209.90649C15.3909%209.40926%2015.0619%209.16064%2014.6091%209.16064Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.9776%200C18.6174%200%2024%205.37258%2024%2012C24%2018.6274%2018.6174%2024%2011.9776%2024C5.74444%2024%200.559894%2019.2458%200.00410667%2013.0898C-0.0455542%2012.5397%200.36093%2012.0536%200.912014%2012.004C1.4631%2011.9545%201.9501%2012.3602%201.99976%2012.9102C2.46268%2018.0377%206.78365%2022%2011.9776%2022C17.5107%2022%2021.9963%2017.5228%2021.9963%2012C21.9963%206.47715%2017.5107%202%2011.9776%202C10.2035%202%208.50375%202.4618%207.01652%203.30941L8.85539%205.14829C8.94946%205.24235%209.00216%205.37002%209.00184%205.50305C9.00117%205.77919%208.77677%206.00251%208.50063%206.00184L3.49879%205.9897C3.22312%205.98903%203%205.76537%203%205.48971V0.5C3%200.367392%203.05268%200.240215%203.14645%200.146447C3.34171%20-0.0488155%203.65829%20-0.0488155%203.85355%200.146447L5.5585%201.85139C7.45043%200.656809%209.66255%200%2011.9776%200ZM14.6091%207.57373C15.6798%207.57373%2016.4891%207.97998%2017.0371%208.79248C17.5851%209.60498%2017.8591%2010.7941%2017.8591%2012.3599C17.8591%2013.9806%2017.5936%2015.1803%2017.0625%2015.959C16.5314%2016.7376%2015.7136%2017.127%2014.6091%2017.127C13.5385%2017.127%2012.7313%2016.7249%2012.1875%2015.9209C11.6437%2015.1169%2011.3718%2013.9299%2011.3718%2012.3599C11.3718%2010.7222%2011.6363%209.51506%2012.1653%208.73853C12.6942%207.96199%2013.5088%207.57373%2014.6091%207.57373ZM9.87012%207.71973V17H7.90869V11.6299L7.92773%2010.7476L7.95947%209.78271L7.59532%2010.1399C7.45783%2010.2711%207.35282%2010.3658%207.28027%2010.4238L6.21387%2011.2808L5.26807%2010.1001L8.25781%207.71973H9.87012ZM14.6091%209.16064C14.1478%209.16064%2013.8178%209.40926%2013.6189%209.90649C13.42%2010.4037%2013.3205%2011.2215%2013.3205%2012.3599C13.3205%2013.4982%2013.4189%2014.3139%2013.6157%2014.8069C13.8125%2015.2999%2014.1436%2015.5464%2014.6091%2015.5464C15.0661%2015.5464%2015.3962%2015.2967%2015.5993%2014.7974C15.8025%2014.298%2015.904%2013.4855%2015.904%2012.3599C15.904%2011.2215%2015.8014%2010.4037%2015.5962%209.90649C15.3909%209.40926%2015.0619%209.16064%2014.6091%209.16064Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Right Maximize Icon */
.gravity-icon-right-maximize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%202.00001C16.5523%202.00001%2017%202.44773%2017%203.00001V15C17%2015.5523%2016.5523%2016%2016%2016C15.4477%2016%2015%2015.5523%2015%2015V3.00001C15%202.44773%2015.4477%202.00001%2016%202.00001ZM8.71044%202.28943C9.10097%202.67977%209.10097%203.31263%208.71044%203.70297L4.41135%208.00001H13C13.5523%208.00001%2014%208.44773%2014%209.00001C14%209.55229%2013.5523%2010%2013%2010H4.41803L8.71044%2014.2904C9.10097%2014.6807%209.10097%2015.3136%208.71044%2015.7039C8.31992%2016.0943%207.68675%2016.0943%207.29623%2015.7039L1.29289%209.70344C0.902369%209.31311%200.902369%208.68024%201.29289%208.2899L7.29623%202.28943C7.68675%201.89909%208.31992%201.89909%208.71044%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%202.00001C16.5523%202.00001%2017%202.44773%2017%203.00001V15C17%2015.5523%2016.5523%2016%2016%2016C15.4477%2016%2015%2015.5523%2015%2015V3.00001C15%202.44773%2015.4477%202.00001%2016%202.00001ZM8.71044%202.28943C9.10097%202.67977%209.10097%203.31263%208.71044%203.70297L4.41135%208.00001H13C13.5523%208.00001%2014%208.44773%2014%209.00001C14%209.55229%2013.5523%2010%2013%2010H4.41803L8.71044%2014.2904C9.10097%2014.6807%209.10097%2015.3136%208.71044%2015.7039C8.31992%2016.0943%207.68675%2016.0943%207.29623%2015.7039L1.29289%209.70344C0.902369%209.31311%200.902369%208.68024%201.29289%208.2899L7.29623%202.28943C7.68675%201.89909%208.31992%201.89909%208.71044%202.28943Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-right-maximize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.7086%202.29143C12.0991%202.68195%2012.0991%203.31512%2011.7086%203.70564L4.41421%2011H18C18.5523%2011%2019%2011.4477%2019%2012C19%2012.5523%2018.5523%2013%2018%2013H4.41413L11.7084%2020.2946C12.0989%2020.6851%2012.0989%2021.3183%2011.7083%2021.7088C11.3178%2022.0993%2010.6846%2022.0993%2010.2941%2021.7088L1.29288%2012.7071C0.902367%2012.3166%200.902377%2011.6834%201.29289%2011.2929L10.2944%202.29143C10.6849%201.9009%2011.3181%201.9009%2011.7086%202.29143ZM22%202C22.5523%202%2023%202.44772%2023%203V21C23%2021.5523%2022.5523%2022%2022%2022C21.4477%2022%2021%2021.5523%2021%2021V3C21%202.44772%2021.4477%202%2022%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.7086%202.29143C12.0991%202.68195%2012.0991%203.31512%2011.7086%203.70564L4.41421%2011H18C18.5523%2011%2019%2011.4477%2019%2012C19%2012.5523%2018.5523%2013%2018%2013H4.41413L11.7084%2020.2946C12.0989%2020.6851%2012.0989%2021.3183%2011.7083%2021.7088C11.3178%2022.0993%2010.6846%2022.0993%2010.2941%2021.7088L1.29288%2012.7071C0.902367%2012.3166%200.902377%2011.6834%201.29289%2011.2929L10.2944%202.29143C10.6849%201.9009%2011.3181%201.9009%2011.7086%202.29143ZM22%202C22.5523%202%2023%202.44772%2023%203V21C23%2021.5523%2022.5523%2022%2022%2022C21.4477%2022%2021%2021.5523%2021%2021V3C21%202.44772%2021.4477%202%2022%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Right Minimize Icon */
.gravity-icon-right-minimize {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%201.99998C16.5523%201.99998%2017%202.44769%2017%202.99998V15C17%2015.5523%2016.5523%2016%2016%2016C15.4477%2016%2015%2015.5523%2015%2015V2.99998C15%202.44769%2015.4477%201.99998%2016%201.99998ZM7.70377%202.2894L13.7071%208.28987C14.0976%208.68021%2014.0976%209.31307%2013.7071%209.70341L7.70377%2015.7039C7.31325%2016.0942%206.68008%2016.0942%206.28956%2015.7039C5.89903%2015.3136%205.89903%2014.6807%206.28956%2014.2903L10.582%209.99998H2C1.44772%209.99998%201%209.55226%201%208.99998C1%208.44769%201.44772%207.99998%202%207.99998H10.5886L6.28956%203.70294C5.89903%203.3126%205.89903%202.67974%206.28956%202.2894C6.68008%201.89906%207.31325%201.89906%207.70377%202.2894Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%201.99998C16.5523%201.99998%2017%202.44769%2017%202.99998V15C17%2015.5523%2016.5523%2016%2016%2016C15.4477%2016%2015%2015.5523%2015%2015V2.99998C15%202.44769%2015.4477%201.99998%2016%201.99998ZM7.70377%202.2894L13.7071%208.28987C14.0976%208.68021%2014.0976%209.31307%2013.7071%209.70341L7.70377%2015.7039C7.31325%2016.0942%206.68008%2016.0942%206.28956%2015.7039C5.89903%2015.3136%205.89903%2014.6807%206.28956%2014.2903L10.582%209.99998H2C1.44772%209.99998%201%209.55226%201%208.99998C1%208.44769%201.44772%207.99998%202%207.99998H10.5886L6.28956%203.70294C5.89903%203.3126%205.89903%202.67974%206.28956%202.2894C6.68008%201.89906%207.31325%201.89906%207.70377%202.2894Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-right-minimize.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.70564%202.29143L18.7071%2011.2929C19.0976%2011.6834%2019.0976%2012.3166%2018.7071%2012.7071L9.70588%2021.7088C9.31537%2022.0993%208.68221%2022.0993%208.29167%2021.7088C7.90114%2021.3183%207.90112%2020.6851%208.29164%2020.2946L15.5859%2013H2C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011H15.5858L8.29142%203.70564C7.9009%203.31512%207.9009%202.68195%208.29142%202.29143C8.68195%201.9009%209.31511%201.9009%209.70564%202.29143ZM22%202C22.5523%202%2023%202.44772%2023%203V21C23%2021.5523%2022.5523%2022%2022%2022C21.4477%2022%2021%2021.5523%2021%2021V3C21%202.44772%2021.4477%202%2022%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.70564%202.29143L18.7071%2011.2929C19.0976%2011.6834%2019.0976%2012.3166%2018.7071%2012.7071L9.70588%2021.7088C9.31537%2022.0993%208.68221%2022.0993%208.29167%2021.7088C7.90114%2021.3183%207.90112%2020.6851%208.29164%2020.2946L15.5859%2013H2C1.44772%2013%201%2012.5523%201%2012C1%2011.4477%201.44772%2011%202%2011H15.5858L8.29142%203.70564C7.9009%203.31512%207.9009%202.68195%208.29142%202.29143C8.68195%201.9009%209.31511%201.9009%209.70564%202.29143ZM22%202C22.5523%202%2023%202.44772%2023%203V21C23%2021.5523%2022.5523%2022%2022%2022C21.4477%2022%2021%2021.5523%2021%2021V3C21%202.44772%2021.4477%202%2022%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Scale Icon */
.gravity-icon-scale {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2016C13.5523%2016%2014%2016.4477%2014%2017C14%2017.5523%2013.5523%2018%2013%2018H5C4.44772%2018%204%2017.5523%204%2017C4%2016.4477%204.44772%2016%205%2016H13ZM9.4233%203.1988L11.3629%205.14725C11.5577%205.34296%2011.557%205.65954%2011.3613%205.85436C11.2676%205.94763%2011.1407%206%2011.0085%206H9.75V12H11.0085C11.1407%2012%2011.2676%2012.0524%2011.3613%2012.1456C11.557%2012.3405%2011.5577%2012.657%2011.3629%2012.8527L9.4233%2014.8012C9.18845%2015.035%208.80855%2015.0341%208.57477%2014.7993L6.63711%2012.8527C6.54383%2012.759%206.49147%2012.6322%206.49147%2012.5C6.49147%2012.2239%206.71532%2012%206.99147%2012H8.25V6H6.99147C6.71532%206%206.49147%205.77614%206.49147%205.5C6.49147%205.36779%206.54383%205.24096%206.63711%205.14725L8.57477%203.20074C8.80855%202.96589%209.18845%202.96502%209.4233%203.1988ZM13%200C13.5523%200%2014%200.447715%2014%201C14%201.55228%2013.5523%202%2013%202H5C4.44772%202%204%201.55228%204%201C4%200.447715%204.44772%200%205%200H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13%2016C13.5523%2016%2014%2016.4477%2014%2017C14%2017.5523%2013.5523%2018%2013%2018H5C4.44772%2018%204%2017.5523%204%2017C4%2016.4477%204.44772%2016%205%2016H13ZM9.4233%203.1988L11.3629%205.14725C11.5577%205.34296%2011.557%205.65954%2011.3613%205.85436C11.2676%205.94763%2011.1407%206%2011.0085%206H9.75V12H11.0085C11.1407%2012%2011.2676%2012.0524%2011.3613%2012.1456C11.557%2012.3405%2011.5577%2012.657%2011.3629%2012.8527L9.4233%2014.8012C9.18845%2015.035%208.80855%2015.0341%208.57477%2014.7993L6.63711%2012.8527C6.54383%2012.759%206.49147%2012.6322%206.49147%2012.5C6.49147%2012.2239%206.71532%2012%206.99147%2012H8.25V6H6.99147C6.71532%206%206.49147%205.77614%206.49147%205.5C6.49147%205.36779%206.54383%205.24096%206.63711%205.14725L8.57477%203.20074C8.80855%202.96589%209.18845%202.96502%209.4233%203.1988ZM13%200C13.5523%200%2014%200.447715%2014%201C14%201.55228%2013.5523%202%2013%202H5C4.44772%202%204%201.55228%204%201C4%200.447715%204.44772%200%205%200H13Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-scale.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2022C18.5523%2022%2019%2022.4477%2019%2023C19%2023.5523%2018.5523%2024%2018%2024H6C5.44772%2024%205%2023.5523%205%2023C5%2022.4477%205.44772%2022%206%2022H18ZM12.4944%203.29132L15.0994%205.8898C15.3536%206.14332%2015.3541%206.55488%2015.1006%206.80904C14.9786%206.93129%2014.813%207%2014.6404%207H13V17H14.6404C14.813%2017%2014.9786%2017.0687%2015.1006%2017.191C15.3541%2017.4451%2015.3536%2017.8567%2015.0994%2018.1102L12.4944%2020.7087C12.2211%2020.9812%2011.7789%2020.9812%2011.5057%2020.7087L8.90061%2018.1102C8.77835%2017.9883%208.70965%2017.8227%208.70965%2017.65C8.70965%2017.291%209.00066%2017%209.35965%2017H11V7H9.35965C9.00066%207%208.70965%206.70898%208.70965%206.35C8.70965%206.17733%208.77835%206.01175%208.90061%205.8898L11.5057%203.29132C11.7789%203.01879%2012.2211%203.01879%2012.4944%203.29132ZM18%200C18.5523%200%2019%200.447715%2019%201C19%201.55228%2018.5523%202%2018%202H6C5.44772%202%205%201.55228%205%201C5%200.447715%205.44772%200%206%200H18Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18%2022C18.5523%2022%2019%2022.4477%2019%2023C19%2023.5523%2018.5523%2024%2018%2024H6C5.44772%2024%205%2023.5523%205%2023C5%2022.4477%205.44772%2022%206%2022H18ZM12.4944%203.29132L15.0994%205.8898C15.3536%206.14332%2015.3541%206.55488%2015.1006%206.80904C14.9786%206.93129%2014.813%207%2014.6404%207H13V17H14.6404C14.813%2017%2014.9786%2017.0687%2015.1006%2017.191C15.3541%2017.4451%2015.3536%2017.8567%2015.0994%2018.1102L12.4944%2020.7087C12.2211%2020.9812%2011.7789%2020.9812%2011.5057%2020.7087L8.90061%2018.1102C8.77835%2017.9883%208.70965%2017.8227%208.70965%2017.65C8.70965%2017.291%209.00066%2017%209.35965%2017H11V7H9.35965C9.00066%207%208.70965%206.70898%208.70965%206.35C8.70965%206.17733%208.77835%206.01175%208.90061%205.8898L11.5057%203.29132C11.7789%203.01879%2012.2211%203.01879%2012.4944%203.29132ZM18%200C18.5523%200%2019%200.447715%2019%201C19%201.55228%2018.5523%202%2018%202H6C5.44772%202%205%201.55228%205%201C5%200.447715%205.44772%200%206%200H18Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Search Icon */
.gravity-icon-search {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.7305%2015.4291L13.5577%2012.2564C14.4624%2011.0769%2015%209.60125%2015%208C15%204.13401%2011.866%201%208%201C4.13401%201%201%204.13401%201%208C1%2011.866%204.13401%2015%208%2015C9.60125%2015%2011.0769%2014.4624%2012.2564%2013.5577L15.4291%2016.7305C15.7885%2017.0898%2016.3711%2017.0898%2016.7305%2016.7305C17.0898%2016.3711%2017.0898%2015.7885%2016.7305%2015.4291ZM13.15%208C13.15%2010.8443%2010.8443%2013.15%208%2013.15C5.15573%2013.15%202.85%2010.8443%202.85%208C2.85%205.15573%205.15573%202.85%208%202.85C10.8443%202.85%2013.15%205.15573%2013.15%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.7305%2015.4291L13.5577%2012.2564C14.4624%2011.0769%2015%209.60125%2015%208C15%204.13401%2011.866%201%208%201C4.13401%201%201%204.13401%201%208C1%2011.866%204.13401%2015%208%2015C9.60125%2015%2011.0769%2014.4624%2012.2564%2013.5577L15.4291%2016.7305C15.7885%2017.0898%2016.3711%2017.0898%2016.7305%2016.7305C17.0898%2016.3711%2017.0898%2015.7885%2016.7305%2015.4291ZM13.15%208C13.15%2010.8443%2010.8443%2013.15%208%2013.15C5.15573%2013.15%202.85%2010.8443%202.85%208C2.85%205.15573%205.15573%202.85%208%202.85C10.8443%202.85%2013.15%205.15573%2013.15%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-search.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.7441%2013.5085L11.8155%2010.5799C12.5596%209.58057%2013%208.34171%2013%207C13%203.68629%2010.3137%201%207%201C3.68629%201%201%203.68629%201%207C1%2010.3137%203.68629%2013%207%2013C8.34171%2013%209.58057%2012.5596%2010.5799%2011.8155L13.5085%2014.7441C13.8497%2015.0853%2014.4029%2015.0853%2014.7441%2014.7441C15.0853%2014.4029%2015.0853%2013.8497%2014.7441%2013.5085ZM11.25%207C11.25%209.34721%209.34721%2011.25%207%2011.25C4.65279%2011.25%202.75%209.34721%202.75%207C2.75%204.65279%204.65279%202.75%207%202.75C9.34721%202.75%2011.25%204.65279%2011.25%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.7441%2013.5085L11.8155%2010.5799C12.5596%209.58057%2013%208.34171%2013%207C13%203.68629%2010.3137%201%207%201C3.68629%201%201%203.68629%201%207C1%2010.3137%203.68629%2013%207%2013C8.34171%2013%209.58057%2012.5596%2010.5799%2011.8155L13.5085%2014.7441C13.8497%2015.0853%2014.4029%2015.0853%2014.7441%2014.7441C15.0853%2014.4029%2015.0853%2013.8497%2014.7441%2013.5085ZM11.25%207C11.25%209.34721%209.34721%2011.25%207%2011.25C4.65279%2011.25%202.75%209.34721%202.75%207C2.75%204.65279%204.65279%202.75%207%202.75C9.34721%202.75%2011.25%204.65279%2011.25%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-search.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.9098%2016.4457L22.6968%2021.2328C23.1011%2021.6371%2023.1011%2022.2925%2022.6968%2022.6968C22.2925%2023.1011%2021.6371%2023.1011%2021.2328%2022.6968L16.4457%2017.9098C14.8181%2019.2175%2012.7504%2020%2010.5%2020C5.25329%2020%201%2015.7467%201%2010.5C1%205.25329%205.25329%201%2010.5%201C15.7467%201%2020%205.25329%2020%2010.5C20%2012.7504%2019.2175%2014.8181%2017.9098%2016.4457ZM10.5%2017.9C14.5869%2017.9%2017.9%2014.5869%2017.9%2010.5C17.9%206.41309%2014.5869%203.1%2010.5%203.1C6.41309%203.1%203.1%206.41309%203.1%2010.5C3.1%2014.5869%206.41309%2017.9%2010.5%2017.9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.9098%2016.4457L22.6968%2021.2328C23.1011%2021.6371%2023.1011%2022.2925%2022.6968%2022.6968C22.2925%2023.1011%2021.6371%2023.1011%2021.2328%2022.6968L16.4457%2017.9098C14.8181%2019.2175%2012.7504%2020%2010.5%2020C5.25329%2020%201%2015.7467%201%2010.5C1%205.25329%205.25329%201%2010.5%201C15.7467%201%2020%205.25329%2020%2010.5C20%2012.7504%2019.2175%2014.8181%2017.9098%2016.4457ZM10.5%2017.9C14.5869%2017.9%2017.9%2014.5869%2017.9%2010.5C17.9%206.41309%2014.5869%203.1%2010.5%203.1C6.41309%203.1%203.1%206.41309%203.1%2010.5C3.1%2014.5869%206.41309%2017.9%2010.5%2017.9Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Settings Icon */
.gravity-icon-settings {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.99928%200C9.77728%200%2010.5323%200.098%2011.2523%200.283C11.6233%200.379%2011.8963%200.716%2011.8713%201.098C11.8313%201.7%2012.1293%202.301%2012.6883%202.623C12.9463%202.772%2013.2283%202.842%2013.5063%202.842C13.7763%202.842%2014.0428%202.77603%2014.2804%202.64987L14.4193%202.567C14.5463%202.482%2014.6903%202.442%2014.8343%202.442C15.0553%202.442%2015.2773%202.536%2015.4413%202.702C16.4893%203.769%2017.2723%205.096%2017.6863%206.577C17.7826%206.9226%2017.6513%207.28197%2017.3653%207.48452L17.2643%207.546C16.7373%207.819%2016.3773%208.368%2016.3773%209C16.3773%209.58025%2016.6798%2010.0891%2017.1361%2010.3801L17.2643%2010.454C17.6193%2010.638%2017.7933%2011.039%2017.6863%2011.423C17.2723%2012.904%2016.4893%2014.231%2015.4413%2015.298C15.2773%2015.464%2015.0553%2015.558%2014.8343%2015.558C14.6903%2015.558%2014.5463%2015.518%2014.4193%2015.433C14.1493%2015.253%2013.8303%2015.158%2013.5063%2015.158C13.2283%2015.158%2012.9463%2015.228%2012.6883%2015.377C12.1293%2015.699%2011.8313%2016.301%2011.8713%2016.902C11.8963%2017.284%2011.6233%2017.621%2011.2523%2017.717C10.5323%2017.902%209.77728%2018%208.99928%2018C8.22128%2018%207.46628%2017.902%206.74528%2017.717C6.40801%2017.6297%206.15173%2017.3433%206.1267%2017.0049L6.12628%2016.902C6.16628%2016.301%205.86828%2015.699%205.31028%2015.377C5.05128%2015.228%204.76928%2015.158%204.49128%2015.158C4.16728%2015.158%203.84928%2015.253%203.57828%2015.433C3.45128%2015.518%203.30828%2015.558%203.16328%2015.558C2.94228%2015.558%202.72028%2015.464%202.55628%2015.298C1.50828%2014.231%200.725284%2012.904%200.311284%2011.423C0.214984%2011.0774%200.346294%2010.718%200.632314%2010.5155L0.733284%2010.454C1.26128%2010.181%201.62128%209.633%201.62128%209C1.62128%208.42067%201.31878%207.91108%200.861673%207.61989L0.733284%207.546C0.378284%207.362%200.204284%206.961%200.311284%206.577C0.725284%205.096%201.50828%203.769%202.55628%202.702C2.72028%202.536%202.94228%202.442%203.16328%202.442C3.27203%202.442%203.37966%202.4645%203.48025%202.51161L3.57828%202.567C3.84928%202.747%204.16728%202.842%204.49128%202.842C4.76928%202.842%205.05128%202.772%205.31028%202.623C5.82178%202.32783%206.11481%201.79823%206.12929%201.24832L6.12628%201.098C6.10128%200.716%206.37428%200.379%206.74528%200.283C7.46628%200.098%208.22128%200%208.99928%200ZM8.99928%201.75C8.60328%201.75%208.20828%201.782%207.82028%201.845C7.64028%202.799%207.05628%203.636%206.18528%204.139C5.66828%204.436%205.08328%204.592%204.49128%204.592C4.10828%204.592%203.73228%204.529%203.37728%204.405C2.87628%205.015%202.47728%205.702%202.19828%206.437C2.93528%207.071%203.37128%207.999%203.37128%209C3.37128%2010.001%202.93528%2010.929%202.19828%2011.563C2.47628%2012.297%202.87528%2012.985%203.37728%2013.595C3.73328%2013.471%204.10828%2013.408%204.49128%2013.408C5.08328%2013.408%205.66828%2013.564%206.18228%2013.86C7.05528%2014.364%207.64028%2015.202%207.82128%2016.156C8.20828%2016.218%208.60328%2016.25%208.99928%2016.25C9.39528%2016.25%209.78928%2016.218%2010.1773%2016.156C10.3573%2015.201%2010.9423%2014.364%2011.8143%2013.861C12.3293%2013.564%2012.9143%2013.408%2013.5063%2013.408C13.8893%2013.408%2014.2653%2013.471%2014.6213%2013.595C15.1223%2012.985%2015.5213%2012.297%2015.8003%2011.563C15.0633%2010.928%2014.6273%2010.001%2014.6273%209C14.6273%207.999%2015.0633%207.072%2015.8003%206.437C15.5213%205.703%2015.1223%205.015%2014.6213%204.405C14.2653%204.529%2013.8893%204.592%2013.5063%204.592C12.9143%204.592%2012.3293%204.436%2011.8153%204.139C10.9423%203.636%2010.3573%202.799%2010.1763%201.844C9.78928%201.782%209.39528%201.75%208.99928%201.75ZM9%205C11.2091%205%2013%206.79086%2013%209C13%2011.2091%2011.2091%2013%209%2013C6.79086%2013%205%2011.2091%205%209C5%206.79086%206.79086%205%209%205ZM9%206.75C7.75736%206.75%206.75%207.75736%206.75%209C6.75%2010.2426%207.75736%2011.25%209%2011.25C10.2426%2011.25%2011.25%2010.2426%2011.25%209C11.25%207.75736%2010.2426%206.75%209%206.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.99928%200C9.77728%200%2010.5323%200.098%2011.2523%200.283C11.6233%200.379%2011.8963%200.716%2011.8713%201.098C11.8313%201.7%2012.1293%202.301%2012.6883%202.623C12.9463%202.772%2013.2283%202.842%2013.5063%202.842C13.7763%202.842%2014.0428%202.77603%2014.2804%202.64987L14.4193%202.567C14.5463%202.482%2014.6903%202.442%2014.8343%202.442C15.0553%202.442%2015.2773%202.536%2015.4413%202.702C16.4893%203.769%2017.2723%205.096%2017.6863%206.577C17.7826%206.9226%2017.6513%207.28197%2017.3653%207.48452L17.2643%207.546C16.7373%207.819%2016.3773%208.368%2016.3773%209C16.3773%209.58025%2016.6798%2010.0891%2017.1361%2010.3801L17.2643%2010.454C17.6193%2010.638%2017.7933%2011.039%2017.6863%2011.423C17.2723%2012.904%2016.4893%2014.231%2015.4413%2015.298C15.2773%2015.464%2015.0553%2015.558%2014.8343%2015.558C14.6903%2015.558%2014.5463%2015.518%2014.4193%2015.433C14.1493%2015.253%2013.8303%2015.158%2013.5063%2015.158C13.2283%2015.158%2012.9463%2015.228%2012.6883%2015.377C12.1293%2015.699%2011.8313%2016.301%2011.8713%2016.902C11.8963%2017.284%2011.6233%2017.621%2011.2523%2017.717C10.5323%2017.902%209.77728%2018%208.99928%2018C8.22128%2018%207.46628%2017.902%206.74528%2017.717C6.40801%2017.6297%206.15173%2017.3433%206.1267%2017.0049L6.12628%2016.902C6.16628%2016.301%205.86828%2015.699%205.31028%2015.377C5.05128%2015.228%204.76928%2015.158%204.49128%2015.158C4.16728%2015.158%203.84928%2015.253%203.57828%2015.433C3.45128%2015.518%203.30828%2015.558%203.16328%2015.558C2.94228%2015.558%202.72028%2015.464%202.55628%2015.298C1.50828%2014.231%200.725284%2012.904%200.311284%2011.423C0.214984%2011.0774%200.346294%2010.718%200.632314%2010.5155L0.733284%2010.454C1.26128%2010.181%201.62128%209.633%201.62128%209C1.62128%208.42067%201.31878%207.91108%200.861673%207.61989L0.733284%207.546C0.378284%207.362%200.204284%206.961%200.311284%206.577C0.725284%205.096%201.50828%203.769%202.55628%202.702C2.72028%202.536%202.94228%202.442%203.16328%202.442C3.27203%202.442%203.37966%202.4645%203.48025%202.51161L3.57828%202.567C3.84928%202.747%204.16728%202.842%204.49128%202.842C4.76928%202.842%205.05128%202.772%205.31028%202.623C5.82178%202.32783%206.11481%201.79823%206.12929%201.24832L6.12628%201.098C6.10128%200.716%206.37428%200.379%206.74528%200.283C7.46628%200.098%208.22128%200%208.99928%200ZM8.99928%201.75C8.60328%201.75%208.20828%201.782%207.82028%201.845C7.64028%202.799%207.05628%203.636%206.18528%204.139C5.66828%204.436%205.08328%204.592%204.49128%204.592C4.10828%204.592%203.73228%204.529%203.37728%204.405C2.87628%205.015%202.47728%205.702%202.19828%206.437C2.93528%207.071%203.37128%207.999%203.37128%209C3.37128%2010.001%202.93528%2010.929%202.19828%2011.563C2.47628%2012.297%202.87528%2012.985%203.37728%2013.595C3.73328%2013.471%204.10828%2013.408%204.49128%2013.408C5.08328%2013.408%205.66828%2013.564%206.18228%2013.86C7.05528%2014.364%207.64028%2015.202%207.82128%2016.156C8.20828%2016.218%208.60328%2016.25%208.99928%2016.25C9.39528%2016.25%209.78928%2016.218%2010.1773%2016.156C10.3573%2015.201%2010.9423%2014.364%2011.8143%2013.861C12.3293%2013.564%2012.9143%2013.408%2013.5063%2013.408C13.8893%2013.408%2014.2653%2013.471%2014.6213%2013.595C15.1223%2012.985%2015.5213%2012.297%2015.8003%2011.563C15.0633%2010.928%2014.6273%2010.001%2014.6273%209C14.6273%207.999%2015.0633%207.072%2015.8003%206.437C15.5213%205.703%2015.1223%205.015%2014.6213%204.405C14.2653%204.529%2013.8893%204.592%2013.5063%204.592C12.9143%204.592%2012.3293%204.436%2011.8153%204.139C10.9423%203.636%2010.3573%202.799%2010.1763%201.844C9.78928%201.782%209.39528%201.75%208.99928%201.75ZM9%205C11.2091%205%2013%206.79086%2013%209C13%2011.2091%2011.2091%2013%209%2013C6.79086%2013%205%2011.2091%205%209C5%206.79086%206.79086%205%209%205ZM9%206.75C7.75736%206.75%206.75%207.75736%206.75%209C6.75%2010.2426%207.75736%2011.25%209%2011.25C10.2426%2011.25%2011.25%2010.2426%2011.25%209C11.25%207.75736%2010.2426%206.75%209%206.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-settings.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0005%200C13.1976%200%2014.354%200.182182%2015.4439%200.520364C15.7022%200.6%2015.8565%200.874909%2015.7997%201.14436C15.6068%202.04655%2015.9948%203.01091%2016.8232%203.49745C17.6495%203.98291%2018.6611%203.84436%2019.3331%203.22582C19.5335%203.04145%2019.8475%203.04036%2020.0447%203.228C21.7283%204.82945%2022.9512%206.92618%2023.487%209.29127C23.5492%209.56509%2023.382%209.83891%2023.1205%209.92618C22.2642%2010.212%2021.6458%2011.0324%2021.6458%2012C21.6458%2012.9676%2022.2642%2013.788%2023.1205%2014.0738C23.382%2014.1611%2023.5492%2014.4349%2023.487%2014.7087C22.9512%2017.0727%2021.7283%2019.1705%2020.0447%2020.772C19.8475%2020.9596%2019.5335%2020.9585%2019.3331%2020.7742C18.6611%2020.1556%2017.6495%2020.0171%2016.8232%2020.5025C15.9948%2020.9891%2015.6068%2021.9535%2015.7997%2022.8556C15.8565%2023.124%2015.7022%2023.4%2015.4439%2023.4796C14.354%2023.8178%2013.1976%2024%2012.0005%2024C10.8024%2024%209.64601%2023.8178%208.55716%2023.4796C8.29781%2023.4%208.14349%2023.124%208.20136%2022.8556C8.39427%2021.9535%208.00524%2020.9891%207.17789%2020.5025C6.35054%2020.0171%205.33885%2020.1556%204.6669%2020.7742C4.46649%2020.9585%204.15355%2020.9596%203.95529%2020.772C2.27165%2019.1705%201.04884%2017.0727%200.51299%2014.7087C0.450831%2014.4349%200.618016%2014.1611%200.880583%2014.0738C1.73687%2013.788%202.35524%2012.9676%202.35524%2012C2.35524%2011.0324%201.73687%2010.212%200.880583%209.92618C0.618016%209.83891%200.450831%209.56509%200.51299%209.29127C1.04884%206.92618%202.27165%204.82945%203.95529%203.228C4.15355%203.04036%204.46649%203.04145%204.6669%203.22582C5.33885%203.84436%206.35054%203.98291%207.17789%203.49745C8.00524%203.01091%208.39427%202.04655%208.20136%201.14436C8.14349%200.874909%208.29781%200.6%208.55716%200.520364C9.64601%200.182182%2010.8024%200%2012.0005%200ZM12.0005%202C11.3819%202%2010.7717%202.05801%2010.1737%202.17244C10.0056%203.42309%209.28517%204.56694%208.156%205.23098C7.02733%205.89323%205.69623%205.95554%204.55002%205.47798C3.74977%206.42354%203.12889%207.51249%202.72284%208.69103C3.70344%209.46412%204.31648%2010.6716%204.31648%2012C4.31648%2013.328%203.70379%2014.5352%202.72284%2015.3086C3.12908%2016.4878%203.75037%2017.5775%204.54986%2018.5222C5.69634%2018.0445%207.02778%2018.107%208.15765%2018.77C9.28525%2019.4331%2010.0052%2020.5762%2010.1732%2021.8277C10.7704%2021.9419%2011.3813%2022%2012.0005%2022C12.6189%2022%2013.2292%2021.9419%2013.8272%2021.8275C13.995%2020.5765%2014.7151%2019.4327%2015.8441%2018.7696C16.9723%2018.1067%2018.3036%2018.0444%2019.4499%2018.522C20.2501%2017.5763%2020.8712%2016.4869%2021.2774%2015.3082C20.2972%2014.5351%2019.6846%2013.328%2019.6846%2012C19.6846%2010.672%2020.2973%209.4648%2021.2774%208.69167C20.8715%207.51309%2020.2505%206.42385%2019.4499%205.47793C18.3034%205.95564%2016.9723%205.89326%2015.8444%205.23057C14.7144%204.56694%2013.9941%203.42199%2013.8264%202.17222C13.2292%202.05808%2012.6189%202%2012.0005%202ZM12%206C15.3137%206%2018%208.68629%2018%2012C18%2015.3137%2015.3137%2018%2012%2018C8.68629%2018%206%2015.3137%206%2012C6%208.68629%208.68629%206%2012%206ZM12%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0005%200C13.1976%200%2014.354%200.182182%2015.4439%200.520364C15.7022%200.6%2015.8565%200.874909%2015.7997%201.14436C15.6068%202.04655%2015.9948%203.01091%2016.8232%203.49745C17.6495%203.98291%2018.6611%203.84436%2019.3331%203.22582C19.5335%203.04145%2019.8475%203.04036%2020.0447%203.228C21.7283%204.82945%2022.9512%206.92618%2023.487%209.29127C23.5492%209.56509%2023.382%209.83891%2023.1205%209.92618C22.2642%2010.212%2021.6458%2011.0324%2021.6458%2012C21.6458%2012.9676%2022.2642%2013.788%2023.1205%2014.0738C23.382%2014.1611%2023.5492%2014.4349%2023.487%2014.7087C22.9512%2017.0727%2021.7283%2019.1705%2020.0447%2020.772C19.8475%2020.9596%2019.5335%2020.9585%2019.3331%2020.7742C18.6611%2020.1556%2017.6495%2020.0171%2016.8232%2020.5025C15.9948%2020.9891%2015.6068%2021.9535%2015.7997%2022.8556C15.8565%2023.124%2015.7022%2023.4%2015.4439%2023.4796C14.354%2023.8178%2013.1976%2024%2012.0005%2024C10.8024%2024%209.64601%2023.8178%208.55716%2023.4796C8.29781%2023.4%208.14349%2023.124%208.20136%2022.8556C8.39427%2021.9535%208.00524%2020.9891%207.17789%2020.5025C6.35054%2020.0171%205.33885%2020.1556%204.6669%2020.7742C4.46649%2020.9585%204.15355%2020.9596%203.95529%2020.772C2.27165%2019.1705%201.04884%2017.0727%200.51299%2014.7087C0.450831%2014.4349%200.618016%2014.1611%200.880583%2014.0738C1.73687%2013.788%202.35524%2012.9676%202.35524%2012C2.35524%2011.0324%201.73687%2010.212%200.880583%209.92618C0.618016%209.83891%200.450831%209.56509%200.51299%209.29127C1.04884%206.92618%202.27165%204.82945%203.95529%203.228C4.15355%203.04036%204.46649%203.04145%204.6669%203.22582C5.33885%203.84436%206.35054%203.98291%207.17789%203.49745C8.00524%203.01091%208.39427%202.04655%208.20136%201.14436C8.14349%200.874909%208.29781%200.6%208.55716%200.520364C9.64601%200.182182%2010.8024%200%2012.0005%200ZM12.0005%202C11.3819%202%2010.7717%202.05801%2010.1737%202.17244C10.0056%203.42309%209.28517%204.56694%208.156%205.23098C7.02733%205.89323%205.69623%205.95554%204.55002%205.47798C3.74977%206.42354%203.12889%207.51249%202.72284%208.69103C3.70344%209.46412%204.31648%2010.6716%204.31648%2012C4.31648%2013.328%203.70379%2014.5352%202.72284%2015.3086C3.12908%2016.4878%203.75037%2017.5775%204.54986%2018.5222C5.69634%2018.0445%207.02778%2018.107%208.15765%2018.77C9.28525%2019.4331%2010.0052%2020.5762%2010.1732%2021.8277C10.7704%2021.9419%2011.3813%2022%2012.0005%2022C12.6189%2022%2013.2292%2021.9419%2013.8272%2021.8275C13.995%2020.5765%2014.7151%2019.4327%2015.8441%2018.7696C16.9723%2018.1067%2018.3036%2018.0444%2019.4499%2018.522C20.2501%2017.5763%2020.8712%2016.4869%2021.2774%2015.3082C20.2972%2014.5351%2019.6846%2013.328%2019.6846%2012C19.6846%2010.672%2020.2973%209.4648%2021.2774%208.69167C20.8715%207.51309%2020.2505%206.42385%2019.4499%205.47793C18.3034%205.95564%2016.9723%205.89326%2015.8444%205.23057C14.7144%204.56694%2013.9941%203.42199%2013.8264%202.17222C13.2292%202.05808%2012.6189%202%2012.0005%202ZM12%206C15.3137%206%2018%208.68629%2018%2012C18%2015.3137%2015.3137%2018%2012%2018C8.68629%2018%206%2015.3137%206%2012C6%208.68629%208.68629%206%2012%206ZM12%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Show Off Icon */
.gravity-icon-show-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.49873%202.26129L15.7317%2014.4942C16.0734%2014.8359%2016.0734%2015.39%2015.7317%2015.7317C15.39%2016.0734%2014.8359%2016.0734%2014.4942%2015.7317L12.9194%2014.1568C11.7219%2014.6964%2010.3956%2014.9963%209.00001%2014.9963C4.99037%2014.9963%201.55257%2012.5205%200.100006%208.99817C0.812313%207.27089%202.00201%205.79527%203.50242%204.73985L2.26129%203.49872C1.91958%203.15701%201.91958%202.603%202.26129%202.26129C2.603%201.91958%203.15702%201.91958%203.49873%202.26129ZM4.7628%206.00023C3.62487%206.73474%202.67672%207.76193%202.02927%208.99817C3.37992%2011.5771%206.03922%2013.2463%209.00001%2013.2463C9.89439%2013.2463%2010.7613%2013.094%2011.5729%2012.8103L10.4108%2011.6482C9.99028%2011.8727%209.51001%2012%209.00001%2012C7.34315%2012%206.00001%2010.6569%206.00001%209.00001C6.00001%208.49001%206.12727%208.00973%206.35177%207.5892L4.7628%206.00023ZM9.00001%203.00001C13.0096%203.00001%2016.4474%205.47582%2017.9%208.99817C17.4129%2010.1794%2016.7025%2011.2429%2015.8222%2012.1348L14.5857%2010.8983C15.1319%2010.3437%2015.6005%209.70512%2015.9707%208.99817C14.6201%206.41924%2011.9608%204.75001%209.00001%204.75001C8.81754%204.75001%208.63622%204.75635%208.45629%204.76885L6.91589%203.22845C7.58703%203.07886%208.28441%203.00001%209.00001%203.00001Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.49873%202.26129L15.7317%2014.4942C16.0734%2014.8359%2016.0734%2015.39%2015.7317%2015.7317C15.39%2016.0734%2014.8359%2016.0734%2014.4942%2015.7317L12.9194%2014.1568C11.7219%2014.6964%2010.3956%2014.9963%209.00001%2014.9963C4.99037%2014.9963%201.55257%2012.5205%200.100006%208.99817C0.812313%207.27089%202.00201%205.79527%203.50242%204.73985L2.26129%203.49872C1.91958%203.15701%201.91958%202.603%202.26129%202.26129C2.603%201.91958%203.15702%201.91958%203.49873%202.26129ZM4.7628%206.00023C3.62487%206.73474%202.67672%207.76193%202.02927%208.99817C3.37992%2011.5771%206.03922%2013.2463%209.00001%2013.2463C9.89439%2013.2463%2010.7613%2013.094%2011.5729%2012.8103L10.4108%2011.6482C9.99028%2011.8727%209.51001%2012%209.00001%2012C7.34315%2012%206.00001%2010.6569%206.00001%209.00001C6.00001%208.49001%206.12727%208.00973%206.35177%207.5892L4.7628%206.00023ZM9.00001%203.00001C13.0096%203.00001%2016.4474%205.47582%2017.9%208.99817C17.4129%2010.1794%2016.7025%2011.2429%2015.8222%2012.1348L14.5857%2010.8983C15.1319%2010.3437%2015.6005%209.70512%2015.9707%208.99817C14.6201%206.41924%2011.9608%204.75001%209.00001%204.75001C8.81754%204.75001%208.63622%204.75635%208.45629%204.76885L6.91589%203.22845C7.58703%203.07886%208.28441%203.00001%209.00001%203.00001Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-show-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.7071%202.29289L21.7383%2020.3241C22.1289%2020.7146%2022.1289%2021.3478%2021.7383%2021.7383C21.3478%2022.1289%2020.7146%2022.1289%2020.3241%2021.7383L17.3922%2018.8064C15.7517%2019.5694%2013.9251%2019.9951%2012%2019.9951C6.63881%2019.9951%202.0422%2016.694%200.0999985%2011.9976C1.07627%209.63681%202.72323%207.62864%204.80087%206.21508L2.29289%203.70711C1.90237%203.31658%201.90237%202.68342%202.29289%202.29289C2.68342%201.90237%203.31658%201.90237%203.7071%202.29289ZM6.24543%207.65964C4.585%208.70372%203.21038%2010.1942%202.29877%2011.9976C4.13575%2015.6314%207.8528%2017.9951%2012%2017.9951C13.3511%2017.9951%2014.6565%2017.7442%2015.8661%2017.2803L14.7574%2016.1716C13.967%2016.6951%2013.0191%2017%2012%2017C9.23857%2017%207%2014.7614%207%2012C7%2010.9809%207.30487%2010.033%207.82839%209.24261L6.24543%207.65964ZM12%204C17.3612%204%2021.9578%207.30109%2023.9%2011.9976C23.1819%2013.734%2022.1009%2015.2797%2020.7526%2016.5384L19.3385%2015.1243C20.2942%2014.2443%2021.0988%2013.1892%2021.7012%2011.9976C19.8642%208.36373%2016.1472%206%2012%206C11.4381%206%2010.8841%206.04339%2010.3417%206.12745L8.65598%204.44177C9.72242%204.15363%2010.8434%204%2012%204ZM9.29237%2010.7066C9.10495%2011.0982%209%2011.5369%209%2012C9%2013.6569%2010.3431%2015%2012%2015C12.4631%2015%2012.9018%2014.895%2013.2934%2014.7076L9.29237%2010.7066ZM12%207C14.7614%207%2017%209.23858%2017%2012C17%2012.2488%2016.9818%2012.4934%2016.9467%2012.7325L11.2675%207.05328C11.5066%207.01818%2011.7512%207%2012%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.7071%202.29289L21.7383%2020.3241C22.1289%2020.7146%2022.1289%2021.3478%2021.7383%2021.7383C21.3478%2022.1289%2020.7146%2022.1289%2020.3241%2021.7383L17.3922%2018.8064C15.7517%2019.5694%2013.9251%2019.9951%2012%2019.9951C6.63881%2019.9951%202.0422%2016.694%200.0999985%2011.9976C1.07627%209.63681%202.72323%207.62864%204.80087%206.21508L2.29289%203.70711C1.90237%203.31658%201.90237%202.68342%202.29289%202.29289C2.68342%201.90237%203.31658%201.90237%203.7071%202.29289ZM6.24543%207.65964C4.585%208.70372%203.21038%2010.1942%202.29877%2011.9976C4.13575%2015.6314%207.8528%2017.9951%2012%2017.9951C13.3511%2017.9951%2014.6565%2017.7442%2015.8661%2017.2803L14.7574%2016.1716C13.967%2016.6951%2013.0191%2017%2012%2017C9.23857%2017%207%2014.7614%207%2012C7%2010.9809%207.30487%2010.033%207.82839%209.24261L6.24543%207.65964ZM12%204C17.3612%204%2021.9578%207.30109%2023.9%2011.9976C23.1819%2013.734%2022.1009%2015.2797%2020.7526%2016.5384L19.3385%2015.1243C20.2942%2014.2443%2021.0988%2013.1892%2021.7012%2011.9976C19.8642%208.36373%2016.1472%206%2012%206C11.4381%206%2010.8841%206.04339%2010.3417%206.12745L8.65598%204.44177C9.72242%204.15363%2010.8434%204%2012%204ZM9.29237%2010.7066C9.10495%2011.0982%209%2011.5369%209%2012C9%2013.6569%2010.3431%2015%2012%2015C12.4631%2015%2012.9018%2014.895%2013.2934%2014.7076L9.29237%2010.7066ZM12%207C14.7614%207%2017%209.23858%2017%2012C17%2012.2488%2016.9818%2012.4934%2016.9467%2012.7325L11.2675%207.05328C11.5066%207.01818%2011.7512%207%2012%207Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Show On Icon */
.gravity-icon-show-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.00001%203C13.0096%203%2016.4474%205.47581%2017.9%208.99816C16.4474%2012.5205%2013.0096%2014.9963%209.00001%2014.9963C4.99037%2014.9963%201.55257%2012.5205%200.100006%208.99816C1.55257%205.47581%204.99037%203%209.00001%203ZM9.00001%204.75C6.03922%204.75%203.37992%206.41924%202.02927%208.99816C3.37992%2011.5771%206.03922%2013.2463%209.00001%2013.2463C11.9608%2013.2463%2014.6201%2011.5771%2015.9707%208.99816C14.6201%206.41924%2011.9608%204.75%209.00001%204.75ZM9.00001%205.5C10.933%205.5%2012.5%207.067%2012.5%209C12.5%2010.933%2010.933%2012.5%209.00001%2012.5C7.06701%2012.5%205.50001%2010.933%205.50001%209C5.50001%207.067%207.06701%205.5%209.00001%205.5ZM9.00001%207.25C8.03351%207.25%207.25001%208.0335%207.25001%209C7.25001%209.9665%208.03351%2010.75%209.00001%2010.75C9.96651%2010.75%2010.75%209.9665%2010.75%209C10.75%208.0335%209.96651%207.25%209.00001%207.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.00001%203C13.0096%203%2016.4474%205.47581%2017.9%208.99816C16.4474%2012.5205%2013.0096%2014.9963%209.00001%2014.9963C4.99037%2014.9963%201.55257%2012.5205%200.100006%208.99816C1.55257%205.47581%204.99037%203%209.00001%203ZM9.00001%204.75C6.03922%204.75%203.37992%206.41924%202.02927%208.99816C3.37992%2011.5771%206.03922%2013.2463%209.00001%2013.2463C11.9608%2013.2463%2014.6201%2011.5771%2015.9707%208.99816C14.6201%206.41924%2011.9608%204.75%209.00001%204.75ZM9.00001%205.5C10.933%205.5%2012.5%207.067%2012.5%209C12.5%2010.933%2010.933%2012.5%209.00001%2012.5C7.06701%2012.5%205.50001%2010.933%205.50001%209C5.50001%207.067%207.06701%205.5%209.00001%205.5ZM9.00001%207.25C8.03351%207.25%207.25001%208.0335%207.25001%209C7.25001%209.9665%208.03351%2010.75%209.00001%2010.75C9.96651%2010.75%2010.75%209.9665%2010.75%209C10.75%208.0335%209.96651%207.25%209.00001%207.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-show-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%204C17.3612%204%2021.9578%207.30109%2023.9%2011.9976C21.9578%2016.694%2017.3612%2019.9951%2012%2019.9951C6.63881%2019.9951%202.0422%2016.694%200.0999985%2011.9976C2.0422%207.30109%206.63881%204%2012%204ZM12%206C7.8528%206%204.13575%208.36373%202.29877%2011.9976C4.13575%2015.6314%207.8528%2017.9951%2012%2017.9951C16.1472%2017.9951%2019.8642%2015.6314%2021.7012%2011.9976C19.8642%208.36373%2016.1472%206%2012%206ZM12%207C14.7614%207%2017%209.23858%2017%2012C17%2014.7614%2014.7614%2017%2012%2017C9.23857%2017%207%2014.7614%207%2012C7%209.23858%209.23857%207%2012%207ZM12%209C10.3431%209%209%2010.3431%209%2012C9%2013.6569%2010.3431%2015%2012%2015C13.6569%2015%2015%2013.6569%2015%2012C15%2010.3431%2013.6569%209%2012%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%204C17.3612%204%2021.9578%207.30109%2023.9%2011.9976C21.9578%2016.694%2017.3612%2019.9951%2012%2019.9951C6.63881%2019.9951%202.0422%2016.694%200.0999985%2011.9976C2.0422%207.30109%206.63881%204%2012%204ZM12%206C7.8528%206%204.13575%208.36373%202.29877%2011.9976C4.13575%2015.6314%207.8528%2017.9951%2012%2017.9951C16.1472%2017.9951%2019.8642%2015.6314%2021.7012%2011.9976C19.8642%208.36373%2016.1472%206%2012%206ZM12%207C14.7614%207%2017%209.23858%2017%2012C17%2014.7614%2014.7614%2017%2012%2017C9.23857%2017%207%2014.7614%207%2012C7%209.23858%209.23857%207%2012%207ZM12%209C10.3431%209%209%2010.3431%209%2012C9%2013.6569%2010.3431%2015%2012%2015C13.6569%2015%2015%2013.6569%2015%2012C15%2010.3431%2013.6569%209%2012%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Correct Icon */
.gravity-icon-single-correct {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM8.46893%2013.0145L13.3322%206.06698C13.6252%205.64847%2013.5234%205.0717%2013.1049%204.77874C12.6864%204.48578%2012.1096%204.58756%2011.8166%205.00608L7.59428%2011.038L5.90627%209.24452C5.55614%208.87251%204.97073%208.85477%204.59872%209.2049C4.22671%209.55502%204.20897%2010.1404%204.5591%2010.5124L7.02641%2013.134C7.35039%2013.4782%207.87581%2013.5191%208.24721%2013.2459C8.31125%2013.2065%208.37492%2013.1441%208.44076%2013.0542C8.45053%2013.0412%208.45992%2013.028%208.46893%2013.0145Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM8.46893%2013.0145L13.3322%206.06698C13.6252%205.64847%2013.5234%205.0717%2013.1049%204.77874C12.6864%204.48578%2012.1096%204.58756%2011.8166%205.00608L7.59428%2011.038L5.90627%209.24452C5.55614%208.87251%204.97073%208.85477%204.59872%209.2049C4.22671%209.55502%204.20897%2010.1404%204.5591%2010.5124L7.02641%2013.134C7.35039%2013.4782%207.87581%2013.5191%208.24721%2013.2459C8.31125%2013.2065%208.37492%2013.1441%208.44076%2013.0542C8.45053%2013.0412%208.45992%2013.028%208.46893%2013.0145Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-correct.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM11.0413%2017.2563L17.5667%207.93422C17.8834%207.48177%2017.7734%206.85824%2017.3209%206.54152C16.8685%206.22481%2016.245%206.33485%2015.9282%206.78729L10.0957%2015.1195L8.01169%2012.9052C7.63317%2012.503%207.0003%2012.4839%206.59813%2012.8624C6.19595%2013.2409%206.17677%2013.8738%206.55529%2014.276L9.4818%2017.3854C9.78426%2017.7067%2010.2491%2017.7835%2010.6289%2017.6083C10.7602%2017.5775%2010.8825%2017.4775%2011.0139%2017.295C11.0234%2017.2823%2011.0325%2017.2693%2011.0413%2017.2563Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM11.0413%2017.2563L17.5667%207.93422C17.8834%207.48177%2017.7734%206.85824%2017.3209%206.54152C16.8685%206.22481%2016.245%206.33485%2015.9282%206.78729L10.0957%2015.1195L8.01169%2012.9052C7.63317%2012.503%207.0003%2012.4839%206.59813%2012.8624C6.19595%2013.2409%206.17677%2013.8738%206.55529%2014.276L9.4818%2017.3854C9.78426%2017.7067%2010.2491%2017.7835%2010.6289%2017.6083C10.7602%2017.5775%2010.8825%2017.4775%2011.0139%2017.295C11.0234%2017.2823%2011.0325%2017.2693%2011.0413%2017.2563Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Correct Ns Icon */
.gravity-icon-single-correct-ns {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM13.1049%204.77874C13.5234%205.0717%2013.6252%205.64847%2013.3322%206.06698L8.46893%2013.0145C8.43086%2013.0713%208.38586%2013.1247%208.33396%2013.1736C7.96195%2013.5237%207.37654%2013.506%207.02641%2013.134L4.5591%2010.5124C4.20897%2010.1404%204.22671%209.55502%204.59872%209.2049C4.97073%208.85477%205.55614%208.87251%205.90627%209.24452L7.59428%2011.038L11.8166%205.00608C12.1096%204.58756%2012.6864%204.48578%2013.1049%204.77874Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM13.1049%204.77874C13.5234%205.0717%2013.6252%205.64847%2013.3322%206.06698L8.46893%2013.0145C8.43086%2013.0713%208.38586%2013.1247%208.33396%2013.1736C7.96195%2013.5237%207.37654%2013.506%207.02641%2013.134L4.5591%2010.5124C4.20897%2010.1404%204.22671%209.55502%204.59872%209.2049C4.97073%208.85477%205.55614%208.87251%205.90627%209.24452L7.59428%2011.038L11.8166%205.00608C12.1096%204.58756%2012.6864%204.48578%2013.1049%204.77874Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-correct-ns.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM17.3209%206.54152C17.7734%206.85824%2017.8834%207.48177%2017.5667%207.93422L11.0111%2017.2988C10.9379%2017.3988%2010.8676%2017.4674%2010.7969%2017.5098C10.3956%2017.8014%209.83068%2017.756%209.4818%2017.3854L6.55529%2014.276C6.17677%2013.8738%206.19595%2013.2409%206.59813%2012.8624C7.0003%2012.4839%207.63317%2012.503%208.01169%2012.9052L10.0957%2015.1195L15.9282%206.78729C16.245%206.33485%2016.8685%206.22481%2017.3209%206.54152Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM17.3209%206.54152C17.7734%206.85824%2017.8834%207.48177%2017.5667%207.93422L11.0111%2017.2988C10.9379%2017.3988%2010.8676%2017.4674%2010.7969%2017.5098C10.3956%2017.8014%209.83068%2017.756%209.4818%2017.3854L6.55529%2014.276C6.17677%2013.8738%206.19595%2013.2409%206.59813%2012.8624C7.0003%2012.4839%207.63317%2012.503%208.01169%2012.9052L10.0957%2015.1195L15.9282%206.78729C16.245%206.33485%2016.8685%206.22481%2017.3209%206.54152Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Empty Icon */
.gravity-icon-single-empty {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25ZM9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25ZM9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-empty.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022ZM12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022ZM12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Incorrect Icon */
.gravity-icon-single-incorrect {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM7.80785%209L5.2469%2011.5609C4.9177%2011.8902%204.9177%2012.4239%205.2469%2012.7531C5.5761%2013.0823%206.10985%2013.0823%206.43905%2012.7531L9%2010.1921L11.5609%2012.7531C11.8902%2013.0823%2012.4239%2013.0823%2012.7531%2012.7531C13.0823%2012.4239%2013.0823%2011.8902%2012.7531%2011.5609L10.1921%209L12.7531%206.43905C13.0823%206.10985%2013.0823%205.5761%2012.7531%205.2469C12.4239%204.9177%2011.8902%204.9177%2011.5609%205.2469L9%207.80785L6.43905%205.2469C6.10985%204.9177%205.5761%204.9177%205.2469%205.2469C4.9177%205.5761%204.9177%206.10985%205.2469%206.43905L7.80785%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018ZM7.80785%209L5.2469%2011.5609C4.9177%2011.8902%204.9177%2012.4239%205.2469%2012.7531C5.5761%2013.0823%206.10985%2013.0823%206.43905%2012.7531L9%2010.1921L11.5609%2012.7531C11.8902%2013.0823%2012.4239%2013.0823%2012.7531%2012.7531C13.0823%2012.4239%2013.0823%2011.8902%2012.7531%2011.5609L10.1921%209L12.7531%206.43905C13.0823%206.10985%2013.0823%205.5761%2012.7531%205.2469C12.4239%204.9177%2011.8902%204.9177%2011.5609%205.2469L9%207.80785L6.43905%205.2469C6.10985%204.9177%205.5761%204.9177%205.2469%205.2469C4.9177%205.5761%204.9177%206.10985%205.2469%206.43905L7.80785%209Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-incorrect.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM12%2010.5858L8.70711%207.29289C8.31658%206.90237%207.68342%206.90237%207.29289%207.29289C6.90237%207.68342%206.90237%208.31658%207.29289%208.70711L10.5858%2012L7.29249%2015.2933C6.90196%2015.6838%206.90196%2016.317%207.29249%2016.7075C7.68301%2017.098%208.31617%2017.098%208.7067%2016.7075L12%2013.4142L15.2929%2016.7071C15.6834%2017.0976%2016.3166%2017.0976%2016.7071%2016.7071C17.0976%2016.3166%2017.0976%2015.6834%2016.7071%2015.2929L13.4142%2012L16.7071%208.70711C17.0976%208.31658%2017.0976%207.68342%2016.7071%207.29289C16.3166%206.90237%2015.6834%206.90237%2015.2929%207.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024ZM12%2010.5858L8.70711%207.29289C8.31658%206.90237%207.68342%206.90237%207.29289%207.29289C6.90237%207.68342%206.90237%208.31658%207.29289%208.70711L10.5858%2012L7.29249%2015.2933C6.90196%2015.6838%206.90196%2016.317%207.29249%2016.7075C7.68301%2017.098%208.31617%2017.098%208.7067%2016.7075L12%2013.4142L15.2929%2016.7071C15.6834%2017.0976%2016.3166%2017.0976%2016.7071%2016.7071C17.0976%2016.3166%2017.0976%2015.6834%2016.7071%2015.2929L13.4142%2012L16.7071%208.70711C17.0976%208.31658%2017.0976%207.68342%2016.7071%207.29289C16.3166%206.90237%2015.6834%206.90237%2015.2929%207.29289L12%2010.5858Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Partial Icon */
.gravity-icon-single-partial {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.6801%209.23236C17.0694%209.57389%2017.1089%2010.1672%2016.7682%2010.5575L11.6856%2016.6724C11.6702%2016.6904%2011.654%2016.7079%2011.637%2016.7249C11.2994%2017.0635%2010.768%2017.0895%2010.4006%2016.8031L10.3123%2016.7249C10.3109%2016.7235%209.63155%2016.0416%208.27436%2014.6793C7.90855%2014.3125%207.90855%2013.7179%208.27436%2013.3512C8.64016%2012.9845%209.23325%2012.9845%209.59906%2013.3512L10.9291%2014.6871L15.3583%209.32071C15.699%208.93039%2016.2908%208.89084%2016.6801%209.23236ZM15.7367%202.26325C16.0878%202.61425%2016.0878%203.18333%2015.7367%203.53434L3.53434%2015.7367C3.18333%2016.0878%202.61425%2016.0878%202.26325%2015.7367C1.91225%2015.3857%201.91225%2014.8167%202.26325%2014.4657L14.4657%202.26325C14.8167%201.91225%2015.3857%201.91225%2015.7367%202.26325ZM7.61872%201.38128C7.96043%201.72299%207.96043%202.27701%207.61872%202.61872L5.73744%204.5L7.61872%206.38128C7.96043%206.72299%207.96043%207.27701%207.61872%207.61872C7.27701%207.96043%206.72299%207.96043%206.38128%207.61872L4.5%205.73744L2.61872%207.61872C2.27701%207.96043%201.72299%207.96043%201.38128%207.61872C1.03957%207.27701%201.03957%206.72299%201.38128%206.38128L3.26256%204.5L1.38128%202.61872C1.03957%202.27701%201.03957%201.72299%201.38128%201.38128C1.72299%201.03957%202.27701%201.03957%202.61872%201.38128L4.5%203.26256L6.38128%201.38128C6.72299%201.03957%207.27701%201.03957%207.61872%201.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.6801%209.23236C17.0694%209.57389%2017.1089%2010.1672%2016.7682%2010.5575L11.6856%2016.6724C11.6702%2016.6904%2011.654%2016.7079%2011.637%2016.7249C11.2994%2017.0635%2010.768%2017.0895%2010.4006%2016.8031L10.3123%2016.7249C10.3109%2016.7235%209.63155%2016.0416%208.27436%2014.6793C7.90855%2014.3125%207.90855%2013.7179%208.27436%2013.3512C8.64016%2012.9845%209.23325%2012.9845%209.59906%2013.3512L10.9291%2014.6871L15.3583%209.32071C15.699%208.93039%2016.2908%208.89084%2016.6801%209.23236ZM15.7367%202.26325C16.0878%202.61425%2016.0878%203.18333%2015.7367%203.53434L3.53434%2015.7367C3.18333%2016.0878%202.61425%2016.0878%202.26325%2015.7367C1.91225%2015.3857%201.91225%2014.8167%202.26325%2014.4657L14.4657%202.26325C14.8167%201.91225%2015.3857%201.91225%2015.7367%202.26325ZM7.61872%201.38128C7.96043%201.72299%207.96043%202.27701%207.61872%202.61872L5.73744%204.5L7.61872%206.38128C7.96043%206.72299%207.96043%207.27701%207.61872%207.61872C7.27701%207.96043%206.72299%207.96043%206.38128%207.61872L4.5%205.73744L2.61872%207.61872C2.27701%207.96043%201.72299%207.96043%201.38128%207.61872C1.03957%207.27701%201.03957%206.72299%201.38128%206.38128L3.26256%204.5L1.38128%202.61872C1.03957%202.27701%201.03957%201.72299%201.38128%201.38128C1.72299%201.03957%202.27701%201.03957%202.61872%201.38128L4.5%203.26256L6.38128%201.38128C6.72299%201.03957%207.27701%201.03957%207.61872%201.38128Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-partial.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22.6702%2013.2628C23.0789%2013.6343%2023.109%2014.2667%2022.7375%2014.6754L15.7071%2022.7071C15.3466%2023.0676%2014.7794%2023.0953%2014.3871%2022.7903L14.2929%2022.7071C14.2917%2022.706%2013.2917%2021.706%2011.2929%2019.7071C10.9024%2019.3166%2010.9024%2018.6834%2011.2929%2018.2929C11.6834%2017.9024%2012.3166%2017.9024%2012.7071%2018.2929L14.9655%2020.5513L21.2576%2013.33C21.6291%2012.9214%2022.2616%2012.8912%2022.6702%2013.2628ZM21.7053%202.29473C22.0982%202.68769%2022.0982%203.32482%2021.7053%203.71779L3.71779%2021.7053C3.32482%2022.0982%202.68769%2022.0982%202.29473%2021.7053C1.90176%2021.3123%201.90176%2020.6752%202.29473%2020.2822L20.2822%202.29473C20.6752%201.90176%2021.3123%201.90176%2021.7053%202.29473ZM2.70711%201.29289L5.5%204.08579L8.29289%201.29289C8.68342%200.902369%209.31658%200.902369%209.70711%201.29289C10.0976%201.68342%2010.0976%202.31658%209.70711%202.70711L6.91421%205.5L9.70711%208.29289C10.0976%208.68342%2010.0976%209.31658%209.70711%209.70711C9.31658%2010.0976%208.68342%2010.0976%208.29289%209.70711L5.5%206.91421L2.70711%209.70711C2.31658%2010.0976%201.68342%2010.0976%201.29289%209.70711C0.902369%209.31658%200.902369%208.68342%201.29289%208.29289L4.08579%205.5L1.29289%202.70711C0.902369%202.31658%200.902369%201.68342%201.29289%201.29289C1.68342%200.902369%202.31658%200.902369%202.70711%201.29289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22.6702%2013.2628C23.0789%2013.6343%2023.109%2014.2667%2022.7375%2014.6754L15.7071%2022.7071C15.3466%2023.0676%2014.7794%2023.0953%2014.3871%2022.7903L14.2929%2022.7071C14.2917%2022.706%2013.2917%2021.706%2011.2929%2019.7071C10.9024%2019.3166%2010.9024%2018.6834%2011.2929%2018.2929C11.6834%2017.9024%2012.3166%2017.9024%2012.7071%2018.2929L14.9655%2020.5513L21.2576%2013.33C21.6291%2012.9214%2022.2616%2012.8912%2022.6702%2013.2628ZM21.7053%202.29473C22.0982%202.68769%2022.0982%203.32482%2021.7053%203.71779L3.71779%2021.7053C3.32482%2022.0982%202.68769%2022.0982%202.29473%2021.7053C1.90176%2021.3123%201.90176%2020.6752%202.29473%2020.2822L20.2822%202.29473C20.6752%201.90176%2021.3123%201.90176%2021.7053%202.29473ZM2.70711%201.29289L5.5%204.08579L8.29289%201.29289C8.68342%200.902369%209.31658%200.902369%209.70711%201.29289C10.0976%201.68342%2010.0976%202.31658%209.70711%202.70711L6.91421%205.5L9.70711%208.29289C10.0976%208.68342%2010.0976%209.31658%209.70711%209.70711C9.31658%2010.0976%208.68342%2010.0976%208.29289%209.70711L5.5%206.91421L2.70711%209.70711C2.31658%2010.0976%201.68342%2010.0976%201.29289%209.70711C0.902369%209.31658%200.902369%208.68342%201.29289%208.29289L4.08579%205.5L1.29289%202.70711C0.902369%202.31658%200.902369%201.68342%201.29289%201.29289C1.68342%200.902369%202.31658%200.902369%202.70711%201.29289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Single Selected Icon */
.gravity-icon-single-selected {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%202C5.13401%202%202%205.13401%202%209C2%2012.866%205.13401%2016%209%2016C12.866%2016%2016%2012.866%2016%209C16%205.13401%2012.866%202%209%202ZM9%203.7C11.9271%203.7%2014.3%206.07289%2014.3%209C14.3%2011.9271%2011.9271%2014.3%209%2014.3C6.07289%2014.3%203.7%2011.9271%203.7%209C3.7%206.07289%206.07289%203.7%209%203.7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%202C5.13401%202%202%205.13401%202%209C2%2012.866%205.13401%2016%209%2016C12.866%2016%2016%2012.866%2016%209C16%205.13401%2012.866%202%209%202ZM9%203.7C11.9271%203.7%2014.3%206.07289%2014.3%209C14.3%2011.9271%2011.9271%2014.3%209%2014.3C6.07289%2014.3%203.7%2011.9271%203.7%209C3.7%206.07289%206.07289%203.7%209%203.7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-single-selected.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%204C16.4183%204%2020%207.58172%2020%2012C20%2016.4183%2016.4183%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%204C16.4183%204%2020%207.58172%2020%2012C20%2016.4183%2016.4183%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Sortable Icon */
.gravity-icon-sortable {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.73%2010.6409C13.0912%2011.0022%2013.0912%2011.5878%2012.73%2011.9491L9.65407%2015.025C9.29284%2015.3862%208.70716%2015.3862%208.34593%2015.025L5.27001%2011.9491C4.90878%2011.5878%204.90878%2011.0022%205.27001%2010.6409C5.63125%2010.2797%206.21692%2010.2797%206.57816%2010.6409L9%2013.0628L11.4218%2010.6409C11.7831%2010.2797%2012.3688%2010.2797%2012.73%2010.6409ZM9.65407%202.97593L12.73%206.05184C13.0912%206.41308%2013.0912%206.99875%2012.73%207.35999C12.3688%207.72123%2011.7831%207.72123%2011.4218%207.35999L9%204.93815L6.57816%207.35999C6.21692%207.72123%205.63125%207.72123%205.27001%207.35999C4.90878%206.99875%204.90878%206.41308%205.27001%206.05184L8.34593%202.97593C8.70716%202.61469%209.29284%202.61469%209.65407%202.97593Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.73%2010.6409C13.0912%2011.0022%2013.0912%2011.5878%2012.73%2011.9491L9.65407%2015.025C9.29284%2015.3862%208.70716%2015.3862%208.34593%2015.025L5.27001%2011.9491C4.90878%2011.5878%204.90878%2011.0022%205.27001%2010.6409C5.63125%2010.2797%206.21692%2010.2797%206.57816%2010.6409L9%2013.0628L11.4218%2010.6409C11.7831%2010.2797%2012.3688%2010.2797%2012.73%2010.6409ZM9.65407%202.97593L12.73%206.05184C13.0912%206.41308%2013.0912%206.99875%2012.73%207.35999C12.3688%207.72123%2011.7831%207.72123%2011.4218%207.35999L9%204.93815L6.57816%207.35999C6.21692%207.72123%205.63125%207.72123%205.27001%207.35999C4.90878%206.99875%204.90878%206.41308%205.27001%206.05184L8.34593%202.97593C8.70716%202.61469%209.29284%202.61469%209.65407%202.97593Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-sortable.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.74731%2014.2929L12%2017.5456L15.2527%2014.2929C15.6432%2013.9024%2016.2764%2013.9024%2016.6669%2014.2929C17.0574%2014.6834%2017.0574%2015.3166%2016.6669%2015.7071L12.7071%2019.6669C12.3166%2020.0574%2011.6834%2020.0574%2011.2929%2019.6669L7.3331%2015.7071C6.94258%2015.3166%206.94258%2014.6834%207.3331%2014.2929C7.72362%2013.9024%208.35679%2013.9024%208.74731%2014.2929ZM12.7071%204.29289L16.6669%208.25269C17.0574%208.64322%2017.0574%209.27638%2016.6669%209.6669C16.2764%2010.0574%2015.6432%2010.0574%2015.2527%209.6669L12%206.41421L8.74731%209.6669C8.35679%2010.0574%207.72362%2010.0574%207.3331%209.6669C6.94258%209.27638%206.94258%208.64322%207.3331%208.25269L11.2929%204.29289C11.6834%203.90237%2012.3166%203.90237%2012.7071%204.29289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.74731%2014.2929L12%2017.5456L15.2527%2014.2929C15.6432%2013.9024%2016.2764%2013.9024%2016.6669%2014.2929C17.0574%2014.6834%2017.0574%2015.3166%2016.6669%2015.7071L12.7071%2019.6669C12.3166%2020.0574%2011.6834%2020.0574%2011.2929%2019.6669L7.3331%2015.7071C6.94258%2015.3166%206.94258%2014.6834%207.3331%2014.2929C7.72362%2013.9024%208.35679%2013.9024%208.74731%2014.2929ZM12.7071%204.29289L16.6669%208.25269C17.0574%208.64322%2017.0574%209.27638%2016.6669%209.6669C16.2764%2010.0574%2015.6432%2010.0574%2015.2527%209.6669L12%206.41421L8.74731%209.6669C8.35679%2010.0574%207.72362%2010.0574%207.3331%209.6669C6.94258%209.27638%206.94258%208.64322%207.3331%208.25269L11.2929%204.29289C11.6834%203.90237%2012.3166%203.90237%2012.7071%204.29289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Star Off Icon */
.gravity-icon-star-off {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.38873%207.22741L3.54894%207.81742L6.33424%2010.6898L5.70144%2014.5928L8.99977%2012.7586L12.2985%2014.5928L11.6653%2010.6898L14.4511%207.81737L10.6117%207.22743L9.00002%203.77331L7.38873%207.22741ZM8.09369%201.57663C8.19302%201.36369%208.36417%201.19253%208.5771%201.09318C9.07759%200.859652%209.67262%201.07607%209.90614%201.57655L11.802%205.63979L16.1527%206.30829C16.3578%206.33981%2016.5481%206.43436%2016.697%206.57884C17.0935%206.96334%2017.1032%207.59643%2016.7187%207.99289L13.5335%2011.2772L14.2738%2015.8402C14.3098%2016.0622%2014.2699%2016.2898%2014.1607%2016.4863C13.8923%2016.969%2013.2834%2017.1428%2012.8007%2016.8744L8.99983%2014.761L5.19943%2016.8743C5.00293%2016.9836%204.77533%2017.0235%204.55339%2016.9875C4.00822%2016.8991%203.63793%2016.3855%203.72632%2015.8403L4.46615%2011.2772L1.28141%207.99286C1.13696%207.8439%201.04243%207.65369%201.01092%207.44859C0.92704%206.90271%201.30157%206.3922%201.84744%206.30832L6.19829%205.63979L8.09369%201.57663Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.38873%207.22741L3.54894%207.81742L6.33424%2010.6898L5.70144%2014.5928L8.99977%2012.7586L12.2985%2014.5928L11.6653%2010.6898L14.4511%207.81737L10.6117%207.22743L9.00002%203.77331L7.38873%207.22741ZM8.09369%201.57663C8.19302%201.36369%208.36417%201.19253%208.5771%201.09318C9.07759%200.859652%209.67262%201.07607%209.90614%201.57655L11.802%205.63979L16.1527%206.30829C16.3578%206.33981%2016.5481%206.43436%2016.697%206.57884C17.0935%206.96334%2017.1032%207.59643%2016.7187%207.99289L13.5335%2011.2772L14.2738%2015.8402C14.3098%2016.0622%2014.2699%2016.2898%2014.1607%2016.4863C13.8923%2016.969%2013.2834%2017.1428%2012.8007%2016.8744L8.99983%2014.761L5.19943%2016.8743C5.00293%2016.9836%204.77533%2017.0235%204.55339%2016.9875C4.00822%2016.8991%203.63793%2016.3855%203.72632%2015.8403L4.46615%2011.2772L1.28141%207.99286C1.13696%207.8439%201.04243%207.65369%201.01092%207.44859C0.92704%206.90271%201.30157%206.3922%201.84744%206.30832L6.19829%205.63979L8.09369%201.57663Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-star-off.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.00002%203.55392L6.62833%206.49505L3.34414%206.9998L5.72685%209.45753L5.18702%2012.7879L7.9998%2011.2233L10.8129%2012.7879L10.2728%209.45753L12.6559%206.99975L9.37204%206.49507L8.00002%203.55392ZM7.18503%201.51935C7.27436%201.32782%207.42828%201.17387%207.6198%201.08453C8.06984%200.874569%208.60487%201.06921%208.81482%201.51927L10.4594%205.0448L14.2374%205.62543C14.4218%205.65377%2014.5928%205.73877%2014.7268%205.86865C15.0833%206.21437%2015.0921%206.78366%2014.7464%207.1402L11.9792%209.99403L12.6219%2013.9566C12.6543%2014.1562%2012.6185%2014.3609%2012.5202%2014.5377C12.2788%2014.9717%2011.7313%2015.1279%2011.2973%2014.8865L7.99985%2013.0526L4.70281%2014.8865C4.52611%2014.9847%204.32144%2015.0206%204.12185%2014.9882C3.63165%2014.9088%203.29867%2014.4469%203.37814%2013.9567L4.02047%209.99403L1.25373%207.14017C1.12388%207.00623%201.0389%206.83522%201.01056%206.65083C0.935126%206.15997%201.27188%205.70089%201.76273%205.62545L5.54083%205.0448L7.18503%201.51935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.00002%203.55392L6.62833%206.49505L3.34414%206.9998L5.72685%209.45753L5.18702%2012.7879L7.9998%2011.2233L10.8129%2012.7879L10.2728%209.45753L12.6559%206.99975L9.37204%206.49507L8.00002%203.55392ZM7.18503%201.51935C7.27436%201.32782%207.42828%201.17387%207.6198%201.08453C8.06984%200.874569%208.60487%201.06921%208.81482%201.51927L10.4594%205.0448L14.2374%205.62543C14.4218%205.65377%2014.5928%205.73877%2014.7268%205.86865C15.0833%206.21437%2015.0921%206.78366%2014.7464%207.1402L11.9792%209.99403L12.6219%2013.9566C12.6543%2014.1562%2012.6185%2014.3609%2012.5202%2014.5377C12.2788%2014.9717%2011.7313%2015.1279%2011.2973%2014.8865L7.99985%2013.0526L4.70281%2014.8865C4.52611%2014.9847%204.32144%2015.0206%204.12185%2014.9882C3.63165%2014.9088%203.29867%2014.4469%203.37814%2013.9567L4.02047%209.99403L1.25373%207.14017C1.12388%207.00623%201.0389%206.83522%201.01056%206.65083C0.935126%206.15997%201.27188%205.70089%201.76273%205.62545L5.54083%205.0448L7.18503%201.51935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-star-off.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%203.95694L9.53314%209.24294L3.74828%2010.1315L7.94184%2014.4543L6.97993%2020.3849L11.9997%2017.5945L17.0201%2020.3849L16.0575%2014.4543L20.2518%2010.1314L14.4674%209.24296L12%203.95694ZM10.8213%201.75093C10.9505%201.47412%2011.1729%201.25161%2011.4497%201.1224C12.1006%200.818544%2012.8746%201.0999%2013.1784%201.75083L15.8282%207.42743L21.8968%208.35953C22.1637%208.40052%2022.4113%208.52359%2022.6051%208.71165C23.1206%209.21188%2023.133%2010.0353%2022.6328%2010.5509L18.1937%2015.1262L19.2267%2021.4907C19.2735%2021.7793%2019.2218%2022.0753%2019.0797%2022.3309C18.7308%2022.9588%2017.9389%2023.1849%2017.311%2022.836L11.9997%2019.8839L6.68918%2022.8359C6.43362%2022.978%206.13765%2023.0298%205.84904%2022.983C5.13998%2022.868%204.65842%2022.1999%204.77343%2021.4908L5.80574%2015.1262L1.36729%2010.5509C1.17928%2010.3571%201.05625%2010.1095%201.01526%209.84264C0.906212%209.13261%201.39338%208.46861%202.10337%208.35956L8.17223%207.42743L10.8213%201.75093Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%203.95694L9.53314%209.24294L3.74828%2010.1315L7.94184%2014.4543L6.97993%2020.3849L11.9997%2017.5945L17.0201%2020.3849L16.0575%2014.4543L20.2518%2010.1314L14.4674%209.24296L12%203.95694ZM10.8213%201.75093C10.9505%201.47412%2011.1729%201.25161%2011.4497%201.1224C12.1006%200.818544%2012.8746%201.0999%2013.1784%201.75083L15.8282%207.42743L21.8968%208.35953C22.1637%208.40052%2022.4113%208.52359%2022.6051%208.71165C23.1206%209.21188%2023.133%2010.0353%2022.6328%2010.5509L18.1937%2015.1262L19.2267%2021.4907C19.2735%2021.7793%2019.2218%2022.0753%2019.0797%2022.3309C18.7308%2022.9588%2017.9389%2023.1849%2017.311%2022.836L11.9997%2019.8839L6.68918%2022.8359C6.43362%2022.978%206.13765%2023.0298%205.84904%2022.983C5.13998%2022.868%204.65842%2022.1999%204.77343%2021.4908L5.80574%2015.1262L1.36729%2010.5509C1.17928%2010.3571%201.05625%2010.1095%201.01526%209.84264C0.906212%209.13261%201.39338%208.46861%202.10337%208.35956L8.17223%207.42743L10.8213%201.75093Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Star On Icon */
.gravity-icon-star-on {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09369%201.57663C8.19302%201.36369%208.36417%201.19253%208.5771%201.09318C9.07759%200.859652%209.67262%201.07607%209.90614%201.57655L11.802%205.63979L16.1527%206.30829C16.3578%206.33981%2016.5481%206.43436%2016.697%206.57884C17.0935%206.96334%2017.1032%207.59643%2016.7187%207.99289L13.5335%2011.2772L14.2738%2015.8402C14.3098%2016.0622%2014.2699%2016.2898%2014.1607%2016.4863C13.8923%2016.969%2013.2834%2017.1428%2012.8007%2016.8744L8.99983%2014.761L5.19943%2016.8743C5.00293%2016.9836%204.77533%2017.0235%204.55339%2016.9875C4.00822%2016.8991%203.63793%2016.3855%203.72632%2015.8403L4.46615%2011.2772L1.28141%207.99286C1.13696%207.8439%201.04243%207.65369%201.01092%207.44859C0.92704%206.90271%201.30157%206.3922%201.84744%206.30832L6.19829%205.63979L8.09369%201.57663Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.09369%201.57663C8.19302%201.36369%208.36417%201.19253%208.5771%201.09318C9.07759%200.859652%209.67262%201.07607%209.90614%201.57655L11.802%205.63979L16.1527%206.30829C16.3578%206.33981%2016.5481%206.43436%2016.697%206.57884C17.0935%206.96334%2017.1032%207.59643%2016.7187%207.99289L13.5335%2011.2772L14.2738%2015.8402C14.3098%2016.0622%2014.2699%2016.2898%2014.1607%2016.4863C13.8923%2016.969%2013.2834%2017.1428%2012.8007%2016.8744L8.99983%2014.761L5.19943%2016.8743C5.00293%2016.9836%204.77533%2017.0235%204.55339%2016.9875C4.00822%2016.8991%203.63793%2016.3855%203.72632%2015.8403L4.46615%2011.2772L1.28141%207.99286C1.13696%207.8439%201.04243%207.65369%201.01092%207.44859C0.92704%206.90271%201.30157%206.3922%201.84744%206.30832L6.19829%205.63979L8.09369%201.57663Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-star-on.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.18503%201.51935C7.27436%201.32782%207.42828%201.17387%207.6198%201.08453C8.06984%200.874569%208.60487%201.06921%208.81482%201.51927L10.4594%205.0448L14.2374%205.62543C14.4218%205.65377%2014.5928%205.73877%2014.7268%205.86865C15.0833%206.21437%2015.0921%206.78366%2014.7464%207.1402L11.9792%209.99403L12.6219%2013.9566C12.6543%2014.1562%2012.6185%2014.3609%2012.5202%2014.5377C12.2788%2014.9717%2011.7313%2015.1279%2011.2973%2014.8865L7.99985%2013.0526L4.70281%2014.8865C4.52611%2014.9847%204.32144%2015.0206%204.12185%2014.9882C3.63165%2014.9088%203.29867%2014.4469%203.37814%2013.9567L4.02047%209.99403L1.25373%207.14017C1.12388%207.00623%201.0389%206.83522%201.01056%206.65083C0.935126%206.15997%201.27188%205.70089%201.76273%205.62545L5.54083%205.0448L7.18503%201.51935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.18503%201.51935C7.27436%201.32782%207.42828%201.17387%207.6198%201.08453C8.06984%200.874569%208.60487%201.06921%208.81482%201.51927L10.4594%205.0448L14.2374%205.62543C14.4218%205.65377%2014.5928%205.73877%2014.7268%205.86865C15.0833%206.21437%2015.0921%206.78366%2014.7464%207.1402L11.9792%209.99403L12.6219%2013.9566C12.6543%2014.1562%2012.6185%2014.3609%2012.5202%2014.5377C12.2788%2014.9717%2011.7313%2015.1279%2011.2973%2014.8865L7.99985%2013.0526L4.70281%2014.8865C4.52611%2014.9847%204.32144%2015.0206%204.12185%2014.9882C3.63165%2014.9088%203.29867%2014.4469%203.37814%2013.9567L4.02047%209.99403L1.25373%207.14017C1.12388%207.00623%201.0389%206.83522%201.01056%206.65083C0.935126%206.15997%201.27188%205.70089%201.76273%205.62545L5.54083%205.0448L7.18503%201.51935Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-star-on.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.8213%201.75093C10.9505%201.47412%2011.1729%201.25161%2011.4497%201.1224C12.1006%200.818544%2012.8746%201.0999%2013.1784%201.75083L15.8282%207.42743L21.8968%208.35953C22.1637%208.40052%2022.4113%208.52359%2022.6051%208.71165C23.1206%209.21188%2023.133%2010.0353%2022.6328%2010.5509L18.1937%2015.1262L19.2267%2021.4907C19.2735%2021.7793%2019.2218%2022.0753%2019.0797%2022.3309C18.7308%2022.9588%2017.9389%2023.1849%2017.311%2022.836L11.9997%2019.8839L6.68918%2022.8359C6.43362%2022.978%206.13765%2023.0298%205.84904%2022.983C5.13998%2022.868%204.65842%2022.1999%204.77343%2021.4908L5.80574%2015.1262L1.36729%2010.5509C1.17928%2010.3571%201.05625%2010.1095%201.01526%209.84264C0.906212%209.13261%201.39338%208.46861%202.10337%208.35956L8.17223%207.42743L10.8213%201.75093Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.8213%201.75093C10.9505%201.47412%2011.1729%201.25161%2011.4497%201.1224C12.1006%200.818544%2012.8746%201.0999%2013.1784%201.75083L15.8282%207.42743L21.8968%208.35953C22.1637%208.40052%2022.4113%208.52359%2022.6051%208.71165C23.1206%209.21188%2023.133%2010.0353%2022.6328%2010.5509L18.1937%2015.1262L19.2267%2021.4907C19.2735%2021.7793%2019.2218%2022.0753%2019.0797%2022.3309C18.7308%2022.9588%2017.9389%2023.1849%2017.311%2022.836L11.9997%2019.8839L6.68918%2022.8359C6.43362%2022.978%206.13765%2023.0298%205.84904%2022.983C5.13998%2022.868%204.65842%2022.1999%204.77343%2021.4908L5.80574%2015.1262L1.36729%2010.5509C1.17928%2010.3571%201.05625%2010.1095%201.01526%209.84264C0.906212%209.13261%201.39338%208.46861%202.10337%208.35956L8.17223%207.42743L10.8213%201.75093Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Strikethrough Icon */
.gravity-icon-strikethrough {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.03954%208.00001C4.46462%207.27895%204.12476%206.39395%204.12476%205.43C4.12476%202.95789%206.36002%201.005%209.06307%201.005C11.2163%201.005%2013.1208%202.25154%2013.7707%204.08838C13.9319%204.54396%2013.6932%205.04394%2013.2376%205.20513C12.7821%205.36632%2012.2821%205.12767%2012.1209%204.67209C11.7271%203.55913%2010.4986%202.755%209.06307%202.755C7.27791%202.755%205.87476%203.9809%205.87476%205.43C5.87476%206.62827%206.83418%207.67391%208.17566%208.00001H16C16.5523%208.00001%2017%208.44772%2017%209.00001C17%209.55229%2016.5523%2010%2016%2010H12.9602C13.5351%2010.7211%2013.875%2011.6061%2013.875%2012.57C13.875%2015.0421%2011.6397%2016.995%208.93669%2016.995C6.78343%2016.995%204.87896%2015.7485%204.22908%2013.9116C4.06789%2013.456%204.30654%2012.9561%204.76212%2012.7949C5.21769%2012.6337%205.71767%2012.8723%205.87886%2013.3279C6.27263%2014.4409%207.50118%2015.245%208.93669%2015.245C10.7219%2015.245%2012.125%2014.0191%2012.125%2012.57C12.125%2011.3717%2011.1656%2010.3261%209.82411%2010H2C1.44772%2010%201%209.55229%201%209.00001C1%208.44772%201.44772%208.00001%202%208.00001H5.03954Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.03954%208.00001C4.46462%207.27895%204.12476%206.39395%204.12476%205.43C4.12476%202.95789%206.36002%201.005%209.06307%201.005C11.2163%201.005%2013.1208%202.25154%2013.7707%204.08838C13.9319%204.54396%2013.6932%205.04394%2013.2376%205.20513C12.7821%205.36632%2012.2821%205.12767%2012.1209%204.67209C11.7271%203.55913%2010.4986%202.755%209.06307%202.755C7.27791%202.755%205.87476%203.9809%205.87476%205.43C5.87476%206.62827%206.83418%207.67391%208.17566%208.00001H16C16.5523%208.00001%2017%208.44772%2017%209.00001C17%209.55229%2016.5523%2010%2016%2010H12.9602C13.5351%2010.7211%2013.875%2011.6061%2013.875%2012.57C13.875%2015.0421%2011.6397%2016.995%208.93669%2016.995C6.78343%2016.995%204.87896%2015.7485%204.22908%2013.9116C4.06789%2013.456%204.30654%2012.9561%204.76212%2012.7949C5.21769%2012.6337%205.71767%2012.8723%205.87886%2013.3279C6.27263%2014.4409%207.50118%2015.245%208.93669%2015.245C10.7219%2015.245%2012.125%2014.0191%2012.125%2012.57C12.125%2011.3717%2011.1656%2010.3261%209.82411%2010H2C1.44772%2010%201%209.55229%201%209.00001C1%208.44772%201.44772%208.00001%202%208.00001H5.03954Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-strikethrough.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.38645%2011C6.52164%2010.053%205.99973%208.8366%205.99973%207.5C5.99973%204.43366%208.74659%202%2012.0789%202C14.7351%202%2017.0797%203.55624%2017.8765%205.83989C18.0584%206.36135%2017.7831%206.93156%2017.2617%207.11349C16.7402%207.29543%2016.17%207.02019%2015.9881%206.49873C15.4803%205.04319%2013.9086%204%2012.0789%204C9.80087%204%207.99973%205.59577%207.99973%207.5C7.99973%209.40423%209.80087%2011%2012.0789%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H16.6133C17.4781%2013.947%2018%2015.1634%2018%2016.5C18%2019.5663%2015.2531%2022%2011.9209%2022C9.26463%2022%206.92003%2020.4438%206.12328%2018.1601C5.94134%2017.6387%206.21658%2017.0684%206.73804%2016.8865C7.2595%2016.7046%207.82971%2016.9798%208.01164%2017.5013C8.51947%2018.9568%2010.0911%2020%2011.9209%2020C14.1989%2020%2016%2018.4042%2016%2016.5C16%2014.5958%2014.1989%2013%2011.9209%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H7.38645Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.38645%2011C6.52164%2010.053%205.99973%208.8366%205.99973%207.5C5.99973%204.43366%208.74659%202%2012.0789%202C14.7351%202%2017.0797%203.55624%2017.8765%205.83989C18.0584%206.36135%2017.7831%206.93156%2017.2617%207.11349C16.7402%207.29543%2016.17%207.02019%2015.9881%206.49873C15.4803%205.04319%2013.9086%204%2012.0789%204C9.80087%204%207.99973%205.59577%207.99973%207.5C7.99973%209.40423%209.80087%2011%2012.0789%2011H21C21.5523%2011%2022%2011.4477%2022%2012C22%2012.5523%2021.5523%2013%2021%2013H16.6133C17.4781%2013.947%2018%2015.1634%2018%2016.5C18%2019.5663%2015.2531%2022%2011.9209%2022C9.26463%2022%206.92003%2020.4438%206.12328%2018.1601C5.94134%2017.6387%206.21658%2017.0684%206.73804%2016.8865C7.2595%2016.7046%207.82971%2016.9798%208.01164%2017.5013C8.51947%2018.9568%2010.0911%2020%2011.9209%2020C14.1989%2020%2016%2018.4042%2016%2016.5C16%2014.5958%2014.1989%2013%2011.9209%2013H3C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011H7.38645Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Structure Icon */
.gravity-icon-structure {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2012H16C17.1046%2012%2018%2012.8954%2018%2014V16C18%2017.1046%2017.1046%2018%2016%2018H12C10.8954%2018%2010%2017.1046%2010%2016V14C10%2012.8954%2010.8954%2012%2012%2012H13V10H5V12H6C7.10457%2012%208%2012.8954%208%2014V16C8%2017.1046%207.10457%2018%206%2018H2C0.89543%2018%200%2017.1046%200%2016V14C0%2012.8954%200.89543%2012%202%2012H3V8H8V6H7C5.89543%206%205%205.10457%205%204V2C5%200.89543%205.89543%200%207%200H11C12.1046%200%2013%200.89543%2013%202V4C13%205.10457%2012.1046%206%2011%206H10V8H15V12ZM2%2013.75C1.86193%2013.75%201.75%2013.8619%201.75%2014V16C1.75%2016.1381%201.86193%2016.25%202%2016.25H6C6.13807%2016.25%206.25%2016.1381%206.25%2016V14C6.25%2013.8619%206.13807%2013.75%206%2013.75H2ZM7%201.75C6.86193%201.75%206.75%201.86193%206.75%202V4C6.75%204.13807%206.86193%204.25%207%204.25H11C11.1381%204.25%2011.25%204.13807%2011.25%204V2C11.25%201.86193%2011.1381%201.75%2011%201.75H7ZM12%2013.75C11.8619%2013.75%2011.75%2013.8619%2011.75%2014V16C11.75%2016.1381%2011.8619%2016.25%2012%2016.25H16C16.1381%2016.25%2016.25%2016.1381%2016.25%2016V14C16.25%2013.8619%2016.1381%2013.75%2016%2013.75H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2012H16C17.1046%2012%2018%2012.8954%2018%2014V16C18%2017.1046%2017.1046%2018%2016%2018H12C10.8954%2018%2010%2017.1046%2010%2016V14C10%2012.8954%2010.8954%2012%2012%2012H13V10H5V12H6C7.10457%2012%208%2012.8954%208%2014V16C8%2017.1046%207.10457%2018%206%2018H2C0.89543%2018%200%2017.1046%200%2016V14C0%2012.8954%200.89543%2012%202%2012H3V8H8V6H7C5.89543%206%205%205.10457%205%204V2C5%200.89543%205.89543%200%207%200H11C12.1046%200%2013%200.89543%2013%202V4C13%205.10457%2012.1046%206%2011%206H10V8H15V12ZM2%2013.75C1.86193%2013.75%201.75%2013.8619%201.75%2014V16C1.75%2016.1381%201.86193%2016.25%202%2016.25H6C6.13807%2016.25%206.25%2016.1381%206.25%2016V14C6.25%2013.8619%206.13807%2013.75%206%2013.75H2ZM7%201.75C6.86193%201.75%206.75%201.86193%206.75%202V4C6.75%204.13807%206.86193%204.25%207%204.25H11C11.1381%204.25%2011.25%204.13807%2011.25%204V2C11.25%201.86193%2011.1381%201.75%2011%201.75H7ZM12%2013.75C11.8619%2013.75%2011.75%2013.8619%2011.75%2014V16C11.75%2016.1381%2011.8619%2016.25%2012%2016.25H16C16.1381%2016.25%2016.25%2016.1381%2016.25%2016V14C16.25%2013.8619%2016.1381%2013.75%2016%2013.75H12Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-structure.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19%2016H20.5C21.8807%2016%2023%2017.1193%2023%2018.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H15.5C14.1193%2023%2013%2021.8807%2013%2020.5V18.5C13%2017.1193%2014.1193%2016%2015.5%2016H17V13H7V16H8.5C9.88071%2016%2011%2017.1193%2011%2018.5V20.5C11%2021.8807%209.88071%2023%208.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V18.5C1%2017.1193%202.11929%2016%203.5%2016H5V11H11V8H9.5C8.11929%208%207%206.88071%207%205.5V3.5C7%202.11929%208.11929%201%209.5%201H14.5C15.8807%201%2017%202.11929%2017%203.5V5.5C17%206.88071%2015.8807%208%2014.5%208H13V11H19V16ZM3.5%2018C3.22386%2018%203%2018.2239%203%2018.5V20.5C3%2020.7761%203.22386%2021%203.5%2021H8.5C8.77614%2021%209%2020.7761%209%2020.5V18.5C9%2018.2239%208.77614%2018%208.5%2018H3.5ZM15.5%2018C15.2239%2018%2015%2018.2239%2015%2018.5V20.5C15%2020.7761%2015.2239%2021%2015.5%2021H20.5C20.7761%2021%2021%2020.7761%2021%2020.5V18.5C21%2018.2239%2020.7761%2018%2020.5%2018H15.5ZM9.5%203C9.22386%203%209%203.22386%209%203.5V5.5C9%205.77614%209.22386%206%209.5%206H14.5C14.7761%206%2015%205.77614%2015%205.5V3.5C15%203.22386%2014.7761%203%2014.5%203H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19%2016H20.5C21.8807%2016%2023%2017.1193%2023%2018.5V20.5C23%2021.8807%2021.8807%2023%2020.5%2023H15.5C14.1193%2023%2013%2021.8807%2013%2020.5V18.5C13%2017.1193%2014.1193%2016%2015.5%2016H17V13H7V16H8.5C9.88071%2016%2011%2017.1193%2011%2018.5V20.5C11%2021.8807%209.88071%2023%208.5%2023H3.5C2.11929%2023%201%2021.8807%201%2020.5V18.5C1%2017.1193%202.11929%2016%203.5%2016H5V11H11V8H9.5C8.11929%208%207%206.88071%207%205.5V3.5C7%202.11929%208.11929%201%209.5%201H14.5C15.8807%201%2017%202.11929%2017%203.5V5.5C17%206.88071%2015.8807%208%2014.5%208H13V11H19V16ZM3.5%2018C3.22386%2018%203%2018.2239%203%2018.5V20.5C3%2020.7761%203.22386%2021%203.5%2021H8.5C8.77614%2021%209%2020.7761%209%2020.5V18.5C9%2018.2239%208.77614%2018%208.5%2018H3.5ZM15.5%2018C15.2239%2018%2015%2018.2239%2015%2018.5V20.5C15%2020.7761%2015.2239%2021%2015.5%2021H20.5C20.7761%2021%2021%2020.7761%2021%2020.5V18.5C21%2018.2239%2020.7761%2018%2020.5%2018H15.5ZM9.5%203C9.22386%203%209%203.22386%209%203.5V5.5C9%205.77614%209.22386%206%209.5%206H14.5C14.7761%206%2015%205.77614%2015%205.5V3.5C15%203.22386%2014.7761%203%2014.5%203H9.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Study Tools Icon */
.gravity-icon-study-tools {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.803%202.47956L16.4939%206.39783C17.394%206.91567%2018%207.88706%2018%209V15C18%2016.6569%2016.6569%2018%2015%2018H5C3.34315%2018%202%2016.6569%202%2015V12.8435C1.53745%2012.4142%201.20599%2011.8361%201.08797%2011.1668L0.0460783%205.25793C-0.241631%203.62625%200.847874%202.07027%202.47956%201.78256L12.3276%200.0460783C13.9593%20-0.241631%2015.5153%200.847874%2015.803%202.47956ZM15%207.75H5C4.30964%207.75%203.75%208.30964%203.75%209V15C3.75%2015.6904%204.30964%2016.25%205%2016.25H15C15.6904%2016.25%2016.25%2015.6904%2016.25%2015V9C16.25%208.30964%2015.6904%207.75%2015%207.75ZM11.475%2012.6C11.7649%2012.6%2012%2012.9134%2012%2013.3C12%2013.6866%2011.7649%2014%2011.475%2014H6.525C6.23505%2014%206%2013.6866%206%2013.3C6%2012.9134%206.23505%2012.6%206.525%2012.6H11.475ZM13.3%2010C13.6866%2010%2014%2010.3134%2014%2010.7C14%2011.0866%2013.6866%2011.4%2013.3%2011.4H6.7C6.3134%2011.4%206%2011.0866%206%2010.7C6%2010.3134%206.3134%2010%206.7%2010H13.3ZM12.6315%201.76949L2.78344%203.50597C2.10357%203.62585%201.64961%204.27418%201.76949%204.95404L2.26515%207.76508C2.73589%206.72422%203.78337%206%205%206H14.6468L14.0796%202.78344C13.9597%202.10357%2013.3114%201.64961%2012.6315%201.76949Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.803%202.47956L16.4939%206.39783C17.394%206.91567%2018%207.88706%2018%209V15C18%2016.6569%2016.6569%2018%2015%2018H5C3.34315%2018%202%2016.6569%202%2015V12.8435C1.53745%2012.4142%201.20599%2011.8361%201.08797%2011.1668L0.0460783%205.25793C-0.241631%203.62625%200.847874%202.07027%202.47956%201.78256L12.3276%200.0460783C13.9593%20-0.241631%2015.5153%200.847874%2015.803%202.47956ZM15%207.75H5C4.30964%207.75%203.75%208.30964%203.75%209V15C3.75%2015.6904%204.30964%2016.25%205%2016.25H15C15.6904%2016.25%2016.25%2015.6904%2016.25%2015V9C16.25%208.30964%2015.6904%207.75%2015%207.75ZM11.475%2012.6C11.7649%2012.6%2012%2012.9134%2012%2013.3C12%2013.6866%2011.7649%2014%2011.475%2014H6.525C6.23505%2014%206%2013.6866%206%2013.3C6%2012.9134%206.23505%2012.6%206.525%2012.6H11.475ZM13.3%2010C13.6866%2010%2014%2010.3134%2014%2010.7C14%2011.0866%2013.6866%2011.4%2013.3%2011.4H6.7C6.3134%2011.4%206%2011.0866%206%2010.7C6%2010.3134%206.3134%2010%206.7%2010H13.3ZM12.6315%201.76949L2.78344%203.50597C2.10357%203.62585%201.64961%204.27418%201.76949%204.95404L2.26515%207.76508C2.73589%206.72422%203.78337%206%205%206H14.6468L14.0796%202.78344C13.9597%202.10357%2013.3114%201.64961%2012.6315%201.76949Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-study-tools.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.7499%203.89282L21.5971%208.69759C22.4489%209.336%2023%2010.3536%2023%2011.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H6.5C4.567%2023%203%2021.433%203%2019.5V16.6126C2.72683%2016.2137%202.53237%2015.7514%202.44294%2015.2442L1.05376%207.36578C0.718097%205.46215%201.98919%203.64685%203.89282%203.31118L16.6953%201.05376C18.5989%200.718097%2020.4143%201.98919%2020.7499%203.89282ZM19.5%2010H6.5C5.67157%2010%205%2010.6716%205%2011.5V19.5C5%2020.3284%205.67157%2021%206.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V11.5C21%2010.6716%2020.3284%2010%2019.5%2010ZM15%2016C15.5523%2016%2016%2016.4477%2016%2017C16%2017.5523%2015.5523%2018%2015%2018H9C8.44772%2018%208%2017.5523%208%2017C8%2016.4477%208.44772%2016%209%2016H15ZM17%2013C17.5523%2013%2018%2013.4477%2018%2014C18%2014.5523%2017.5523%2015%2017%2015H9C8.44772%2015%208%2014.5523%208%2014C8%2013.4477%208.44772%2013%209%2013H17ZM17.0426%203.02337L4.24011%205.2808C3.42427%205.42465%202.87952%206.20264%203.02337%207.01848L3.49654%209.70196C4.10825%208.68236%205.22444%208%206.5%208H19.4433L18.7803%204.24011C18.6364%203.42427%2017.8585%202.87952%2017.0426%203.02337Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.7499%203.89282L21.5971%208.69759C22.4489%209.336%2023%2010.3536%2023%2011.5V19.5C23%2021.433%2021.433%2023%2019.5%2023H6.5C4.567%2023%203%2021.433%203%2019.5V16.6126C2.72683%2016.2137%202.53237%2015.7514%202.44294%2015.2442L1.05376%207.36578C0.718097%205.46215%201.98919%203.64685%203.89282%203.31118L16.6953%201.05376C18.5989%200.718097%2020.4143%201.98919%2020.7499%203.89282ZM19.5%2010H6.5C5.67157%2010%205%2010.6716%205%2011.5V19.5C5%2020.3284%205.67157%2021%206.5%2021H19.5C20.3284%2021%2021%2020.3284%2021%2019.5V11.5C21%2010.6716%2020.3284%2010%2019.5%2010ZM15%2016C15.5523%2016%2016%2016.4477%2016%2017C16%2017.5523%2015.5523%2018%2015%2018H9C8.44772%2018%208%2017.5523%208%2017C8%2016.4477%208.44772%2016%209%2016H15ZM17%2013C17.5523%2013%2018%2013.4477%2018%2014C18%2014.5523%2017.5523%2015%2017%2015H9C8.44772%2015%208%2014.5523%208%2014C8%2013.4477%208.44772%2013%209%2013H17ZM17.0426%203.02337L4.24011%205.2808C3.42427%205.42465%202.87952%206.20264%203.02337%207.01848L3.49654%209.70196C4.10825%208.68236%205.22444%208%206.5%208H19.4433L18.7803%204.24011C18.6364%203.42427%2017.8585%202.87952%2017.0426%203.02337Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Subscript Icon */
.gravity-icon-subscript {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.3889%2011C16.2787%2011%2017%2011.6793%2017%2012.5173C17%2012.9549%2016.7995%2013.3711%2016.4498%2013.6593L15.1264%2014.75H16.3566C16.7017%2014.75%2016.9816%2015.0298%2016.9816%2015.375C16.9816%2015.7201%2016.7017%2016%2016.3566%2016H13.625C13.2798%2016%2013%2015.7201%2013%2015.375C13%2015.0359%2013.1554%2014.7133%2013.4264%2014.49L15.5759%2012.7185C15.6375%2012.6678%2015.6728%2012.5944%2015.6728%2012.5173C15.6728%2012.3697%2015.5457%2012.25%2015.3889%2012.25H13.625C13.2798%2012.25%2013%2011.9701%2013%2011.625C13%2011.2798%2013.2798%2011%2013.625%2011H15.3889ZM11.6541%204.34588C12.0153%204.70711%2012.0153%205.29279%2011.6541%205.65402L8.30816%208.99995L11.6541%2012.3459C12.0153%2012.7071%2012.0153%2013.2928%2011.6541%2013.654C11.2929%2014.0153%2010.7072%2014.0153%2010.3459%2013.654L7.00001%2010.3081L3.65409%2013.654C3.29285%2014.0153%202.70717%2014.0153%202.34594%2013.654C1.9847%2013.2928%201.9847%2012.7071%202.34594%2012.3459L5.69186%208.99995L2.34594%205.65402C1.9847%205.29279%201.9847%204.70711%202.34594%204.34588C2.70717%203.98464%203.29285%203.98464%203.65409%204.34588L7.00001%207.6918L10.3459%204.34588C10.7072%203.98464%2011.2929%203.98464%2011.6541%204.34588Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.3889%2011C16.2787%2011%2017%2011.6793%2017%2012.5173C17%2012.9549%2016.7995%2013.3711%2016.4498%2013.6593L15.1264%2014.75H16.3566C16.7017%2014.75%2016.9816%2015.0298%2016.9816%2015.375C16.9816%2015.7201%2016.7017%2016%2016.3566%2016H13.625C13.2798%2016%2013%2015.7201%2013%2015.375C13%2015.0359%2013.1554%2014.7133%2013.4264%2014.49L15.5759%2012.7185C15.6375%2012.6678%2015.6728%2012.5944%2015.6728%2012.5173C15.6728%2012.3697%2015.5457%2012.25%2015.3889%2012.25H13.625C13.2798%2012.25%2013%2011.9701%2013%2011.625C13%2011.2798%2013.2798%2011%2013.625%2011H15.3889ZM11.6541%204.34588C12.0153%204.70711%2012.0153%205.29279%2011.6541%205.65402L8.30816%208.99995L11.6541%2012.3459C12.0153%2012.7071%2012.0153%2013.2928%2011.6541%2013.654C11.2929%2014.0153%2010.7072%2014.0153%2010.3459%2013.654L7.00001%2010.3081L3.65409%2013.654C3.29285%2014.0153%202.70717%2014.0153%202.34594%2013.654C1.9847%2013.2928%201.9847%2012.7071%202.34594%2012.3459L5.69186%208.99995L2.34594%205.65402C1.9847%205.29279%201.9847%204.70711%202.34594%204.34588C2.70717%203.98464%203.29285%203.98464%203.65409%204.34588L7.00001%207.6918L10.3459%204.34588C10.7072%203.98464%2011.2929%203.98464%2011.6541%204.34588Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-subscript.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.0819%2016C21.0935%2016%2021.9135%2016.8404%2021.9135%2017.8771C21.9135%2018.4955%2021.6164%2019.0741%2021.119%2019.4243L19.4512%2020.5985H21.3162C21.6939%2020.5985%2022%2020.9123%2022%2021.2993C22%2021.6863%2021.6939%2022%2021.3162%2022H17.7007C17.3137%2022%2017%2021.6863%2017%2021.2993C17%2020.8765%2017.2032%2020.4809%2017.5432%2020.2415L20.3447%2018.2691C20.4707%2018.1804%2020.546%2018.0338%2020.546%2017.8771C20.546%2017.6144%2020.3382%2017.4015%2020.0819%2017.4015H17.6838C17.3061%2017.4015%2017%2017.0877%2017%2016.7007C17%2016.3137%2017.3061%2016%2017.6838%2016H20.0819ZM3.70711%205.79289L8.5%2010.5858L13.2929%205.79289C13.6834%205.40237%2014.3166%205.40237%2014.7071%205.79289C15.0976%206.18342%2015.0976%206.81658%2014.7071%207.20711L9.91421%2012L14.7071%2016.7929C15.0976%2017.1834%2015.0976%2017.8166%2014.7071%2018.2071C14.3166%2018.5976%2013.6834%2018.5976%2013.2929%2018.2071L8.5%2013.4142L3.70711%2018.2071C3.31658%2018.5976%202.68342%2018.5976%202.29289%2018.2071C1.90237%2017.8166%201.90237%2017.1834%202.29289%2016.7929L7.08579%2012L2.29289%207.20711C1.90237%206.81658%201.90237%206.18342%202.29289%205.79289C2.68342%205.40237%203.31658%205.40237%203.70711%205.79289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.0819%2016C21.0935%2016%2021.9135%2016.8404%2021.9135%2017.8771C21.9135%2018.4955%2021.6164%2019.0741%2021.119%2019.4243L19.4512%2020.5985H21.3162C21.6939%2020.5985%2022%2020.9123%2022%2021.2993C22%2021.6863%2021.6939%2022%2021.3162%2022H17.7007C17.3137%2022%2017%2021.6863%2017%2021.2993C17%2020.8765%2017.2032%2020.4809%2017.5432%2020.2415L20.3447%2018.2691C20.4707%2018.1804%2020.546%2018.0338%2020.546%2017.8771C20.546%2017.6144%2020.3382%2017.4015%2020.0819%2017.4015H17.6838C17.3061%2017.4015%2017%2017.0877%2017%2016.7007C17%2016.3137%2017.3061%2016%2017.6838%2016H20.0819ZM3.70711%205.79289L8.5%2010.5858L13.2929%205.79289C13.6834%205.40237%2014.3166%205.40237%2014.7071%205.79289C15.0976%206.18342%2015.0976%206.81658%2014.7071%207.20711L9.91421%2012L14.7071%2016.7929C15.0976%2017.1834%2015.0976%2017.8166%2014.7071%2018.2071C14.3166%2018.5976%2013.6834%2018.5976%2013.2929%2018.2071L8.5%2013.4142L3.70711%2018.2071C3.31658%2018.5976%202.68342%2018.5976%202.29289%2018.2071C1.90237%2017.8166%201.90237%2017.1834%202.29289%2016.7929L7.08579%2012L2.29289%207.20711C1.90237%206.81658%201.90237%206.18342%202.29289%205.79289C2.68342%205.40237%203.31658%205.40237%203.70711%205.79289Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Summary Icon */
.gravity-icon-summary {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2014V9.75C2%209.33579%202.33579%209%202.75%209H6V5.75C6%205.33579%206.33579%205%206.75%205H10V2.75C10%202.33579%2010.3358%202%2010.75%202H15.25C15.6642%202%2016%202.33579%2016%202.75V14H17C17.5523%2014%2018%2014.4477%2018%2015C18%2015.5523%2017.5523%2016%2017%2016H1C0.447715%2016%200%2015.5523%200%2015C0%2014.4477%200.447715%2014%201%2014H2ZM3.75%2010.75V14.25H6.25V10.75H3.75ZM7.75%206.75V14.25H10.25V6.75H7.75ZM11.75%203.75V14.25H14.25V3.75H11.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2014V9.75C2%209.33579%202.33579%209%202.75%209H6V5.75C6%205.33579%206.33579%205%206.75%205H10V2.75C10%202.33579%2010.3358%202%2010.75%202H15.25C15.6642%202%2016%202.33579%2016%202.75V14H17C17.5523%2014%2018%2014.4477%2018%2015C18%2015.5523%2017.5523%2016%2017%2016H1C0.447715%2016%200%2015.5523%200%2015C0%2014.4477%200.447715%2014%201%2014H2ZM3.75%2010.75V14.25H6.25V10.75H3.75ZM7.75%206.75V14.25H10.25V6.75H7.75ZM11.75%203.75V14.25H14.25V3.75H11.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-summary.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2019V14C3%2013.4477%203.44772%2013%204%2013H8V9C8%208.44772%208.44772%208%209%208H13V4C13%203.44772%2013.4477%203%2014%203H20C20.5523%203%2021%203.44772%2021%204V19H22C22.5523%2019%2023%2019.4477%2023%2020C23%2020.5523%2022.5523%2021%2022%2021H2C1.44772%2021%201%2020.5523%201%2020C1%2019.4477%201.44772%2019%202%2019H3ZM5%2015V19H8V15H5ZM10%2010V19H13V10H10ZM15%205V19H19V5H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2019V14C3%2013.4477%203.44772%2013%204%2013H8V9C8%208.44772%208.44772%208%209%208H13V4C13%203.44772%2013.4477%203%2014%203H20C20.5523%203%2021%203.44772%2021%204V19H22C22.5523%2019%2023%2019.4477%2023%2020C23%2020.5523%2022.5523%2021%2022%2021H2C1.44772%2021%201%2020.5523%201%2020C1%2019.4477%201.44772%2019%202%2019H3ZM5%2015V19H8V15H5ZM10%2010V19H13V10H10ZM15%205V19H19V5H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Superscript Icon */
.gravity-icon-superscript {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.6541%204.34593C12.0153%204.70716%2012.0153%205.29284%2011.6541%205.65407L8.30816%209L11.6541%2012.3459C12.0153%2012.7072%2012.0153%2013.2928%2011.6541%2013.6541C11.2929%2014.0153%2010.7072%2014.0153%2010.3459%2013.6541L7.00001%2010.3081L3.65409%2013.6541C3.29285%2014.0153%202.70717%2014.0153%202.34594%2013.6541C1.9847%2013.2928%201.9847%2012.7072%202.34594%2012.3459L5.69186%209L2.34594%205.65407C1.9847%205.29284%201.9847%204.70716%202.34594%204.34593C2.70717%203.98469%203.29285%203.98469%203.65409%204.34593L7.00001%207.69185L10.3459%204.34593C10.7072%203.98469%2011.2929%203.98469%2011.6541%204.34593ZM15.3889%202C16.2787%202%2017%202.67935%2017%203.51737C17%203.95492%2016.7995%204.37118%2016.4498%204.65931L15.1264%205.75H16.3566C16.7017%205.75%2016.9816%206.02982%2016.9816%206.375C16.9816%206.72018%2016.7017%207%2016.3566%207H13.625C13.2798%207%2013%206.72018%2013%206.375C13%206.0359%2013.1554%205.71331%2013.4264%205.49001L15.5759%203.71859C15.6375%203.66782%2015.6728%203.59447%2015.6728%203.51737C15.6728%203.36971%2015.5457%203.25%2015.3889%203.25H13.625C13.2798%203.25%2013%202.97018%2013%202.625C13%202.27982%2013.2798%202%2013.625%202H15.3889Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.6541%204.34593C12.0153%204.70716%2012.0153%205.29284%2011.6541%205.65407L8.30816%209L11.6541%2012.3459C12.0153%2012.7072%2012.0153%2013.2928%2011.6541%2013.6541C11.2929%2014.0153%2010.7072%2014.0153%2010.3459%2013.6541L7.00001%2010.3081L3.65409%2013.6541C3.29285%2014.0153%202.70717%2014.0153%202.34594%2013.6541C1.9847%2013.2928%201.9847%2012.7072%202.34594%2012.3459L5.69186%209L2.34594%205.65407C1.9847%205.29284%201.9847%204.70716%202.34594%204.34593C2.70717%203.98469%203.29285%203.98469%203.65409%204.34593L7.00001%207.69185L10.3459%204.34593C10.7072%203.98469%2011.2929%203.98469%2011.6541%204.34593ZM15.3889%202C16.2787%202%2017%202.67935%2017%203.51737C17%203.95492%2016.7995%204.37118%2016.4498%204.65931L15.1264%205.75H16.3566C16.7017%205.75%2016.9816%206.02982%2016.9816%206.375C16.9816%206.72018%2016.7017%207%2016.3566%207H13.625C13.2798%207%2013%206.72018%2013%206.375C13%206.0359%2013.1554%205.71331%2013.4264%205.49001L15.5759%203.71859C15.6375%203.66782%2015.6728%203.59447%2015.6728%203.51737C15.6728%203.36971%2015.5457%203.25%2015.3889%203.25H13.625C13.2798%203.25%2013%202.97018%2013%202.625C13%202.27982%2013.2798%202%2013.625%202H15.3889Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-superscript.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70711%205.79289L8.5%2010.5858L13.2929%205.79289C13.6834%205.40237%2014.3166%205.40237%2014.7071%205.79289C15.0976%206.18342%2015.0976%206.81658%2014.7071%207.20711L9.91421%2012L14.7071%2016.7929C15.0976%2017.1834%2015.0976%2017.8166%2014.7071%2018.2071C14.3166%2018.5976%2013.6834%2018.5976%2013.2929%2018.2071L8.5%2013.4142L3.70711%2018.2071C3.31658%2018.5976%202.68342%2018.5976%202.29289%2018.2071C1.90237%2017.8166%201.90237%2017.1834%202.29289%2016.7929L7.08579%2012L2.29289%207.20711C1.90237%206.81658%201.90237%206.18342%202.29289%205.79289C2.68342%205.40237%203.31658%205.40237%203.70711%205.79289ZM20.0819%202C21.0935%202%2021.9135%202.84041%2021.9135%203.8771C21.9135%204.49546%2021.6164%205.07414%2021.119%205.42428L19.4512%206.59854H21.3162C21.6939%206.59854%2022%206.91227%2022%207.29927C22%207.68627%2021.6939%208%2021.3162%208H17.7007C17.3137%208%2017%207.68627%2017%207.29927C17%206.87653%2017.2032%206.48091%2017.5432%206.24154L20.3447%204.26915C20.4707%204.18042%2020.546%204.03379%2020.546%203.8771C20.546%203.61441%2020.3382%203.40146%2020.0819%203.40146H17.6838C17.3061%203.40146%2017%203.08773%2017%202.70073C17%202.31373%2017.3061%202%2017.6838%202H20.0819Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.70711%205.79289L8.5%2010.5858L13.2929%205.79289C13.6834%205.40237%2014.3166%205.40237%2014.7071%205.79289C15.0976%206.18342%2015.0976%206.81658%2014.7071%207.20711L9.91421%2012L14.7071%2016.7929C15.0976%2017.1834%2015.0976%2017.8166%2014.7071%2018.2071C14.3166%2018.5976%2013.6834%2018.5976%2013.2929%2018.2071L8.5%2013.4142L3.70711%2018.2071C3.31658%2018.5976%202.68342%2018.5976%202.29289%2018.2071C1.90237%2017.8166%201.90237%2017.1834%202.29289%2016.7929L7.08579%2012L2.29289%207.20711C1.90237%206.81658%201.90237%206.18342%202.29289%205.79289C2.68342%205.40237%203.31658%205.40237%203.70711%205.79289ZM20.0819%202C21.0935%202%2021.9135%202.84041%2021.9135%203.8771C21.9135%204.49546%2021.6164%205.07414%2021.119%205.42428L19.4512%206.59854H21.3162C21.6939%206.59854%2022%206.91227%2022%207.29927C22%207.68627%2021.6939%208%2021.3162%208H17.7007C17.3137%208%2017%207.68627%2017%207.29927C17%206.87653%2017.2032%206.48091%2017.5432%206.24154L20.3447%204.26915C20.4707%204.18042%2020.546%204.03379%2020.546%203.8771C20.546%203.61441%2020.3382%203.40146%2020.0819%203.40146H17.6838C17.3061%203.40146%2017%203.08773%2017%202.70073C17%202.31373%2017.3061%202%2017.6838%202H20.0819Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Symbols Icon */
.gravity-icon-symbols {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%2013.2424C12.5642%2012.083%2013.5%2010.2443%2013.5%208.27661V7.29666C13.5%205.90363%2012.6956%204.63588%2011.4352%204.04257C9.89291%203.31654%208.10709%203.31654%206.56478%204.04257C5.30441%204.63588%204.5%205.90363%204.5%207.29666V8.27661C4.5%2010.2443%205.43576%2012.083%207%2013.2424V16.0001H2C1.44772%2016.0001%201%2015.5523%201%2015.0001V14.2501C1%2013.6978%201.44772%2013.2501%202%2013.2501H3.56571C2.56214%2011.8139%202%2010.084%202%208.27661V7.29666C2%204.93534%203.36356%202.78637%205.5%201.78066C7.71667%200.737177%2010.2833%200.737177%2012.5%201.78066C14.6364%202.78637%2016%204.93534%2016%207.29666V8.27661C16%2010.084%2015.4379%2011.8139%2014.4343%2013.2501H16C16.5523%2013.2501%2017%2013.6978%2017%2014.2501V15.0001C17%2015.5523%2016.5523%2016.0001%2016%2016.0001H11V13.2424Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%2013.2424C12.5642%2012.083%2013.5%2010.2443%2013.5%208.27661V7.29666C13.5%205.90363%2012.6956%204.63588%2011.4352%204.04257C9.89291%203.31654%208.10709%203.31654%206.56478%204.04257C5.30441%204.63588%204.5%205.90363%204.5%207.29666V8.27661C4.5%2010.2443%205.43576%2012.083%207%2013.2424V16.0001H2C1.44772%2016.0001%201%2015.5523%201%2015.0001V14.2501C1%2013.6978%201.44772%2013.2501%202%2013.2501H3.56571C2.56214%2011.8139%202%2010.084%202%208.27661V7.29666C2%204.93534%203.36356%202.78637%205.5%201.78066C7.71667%200.737177%2010.2833%200.737177%2012.5%201.78066C14.6364%202.78637%2016%204.93534%2016%207.29666V8.27661C16%2010.084%2015.4379%2011.8139%2014.4343%2013.2501H16C16.5523%2013.2501%2017%2013.6978%2017%2014.2501V15.0001C17%2015.5523%2016.5523%2016.0001%2016%2016.0001H11V13.2424Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-symbols.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2022V18.7682C16.895%2017.03%2018%2014.5612%2018%2011.9446V10.3505C18%208.40239%2016.8997%206.62142%2015.1575%205.74969C13.17%204.75515%2010.83%204.75515%208.84246%205.74969C7.10032%206.62142%206%208.40239%206%2010.3505V11.9446C6%2014.5612%207.10503%2017.03%209%2018.7682V22H3C2.44772%2022%202%2021.5523%202%2021V20C2%2019.4477%202.44772%2019%203%2019H5.23352C3.80082%2016.9636%203%2014.5076%203%2011.9446V10.3505C3%207.2664%204.74196%204.44689%207.5%203.06682C10.3326%201.64944%2013.6674%201.64944%2016.5%203.06682C19.258%204.44689%2021%207.2664%2021%2010.3505V11.9446C21%2014.5076%2020.1992%2016.9636%2018.7665%2019H21C21.5523%2019%2022%2019.4477%2022%2020V21C22%2021.5523%2021.5523%2022%2021%2022H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2022V18.7682C16.895%2017.03%2018%2014.5612%2018%2011.9446V10.3505C18%208.40239%2016.8997%206.62142%2015.1575%205.74969C13.17%204.75515%2010.83%204.75515%208.84246%205.74969C7.10032%206.62142%206%208.40239%206%2010.3505V11.9446C6%2014.5612%207.10503%2017.03%209%2018.7682V22H3C2.44772%2022%202%2021.5523%202%2021V20C2%2019.4477%202.44772%2019%203%2019H5.23352C3.80082%2016.9636%203%2014.5076%203%2011.9446V10.3505C3%207.2664%204.74196%204.44689%207.5%203.06682C10.3326%201.64944%2013.6674%201.64944%2016.5%203.06682C19.258%204.44689%2021%207.2664%2021%2010.3505V11.9446C21%2014.5076%2020.1992%2016.9636%2018.7665%2019H21C21.5523%2019%2022%2019.4477%2022%2020V21C22%2021.5523%2021.5523%2022%2021%2022H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Synonym Icon */
.gravity-icon-synonym {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1711%2016.7696C10.0822%2016.9082%209.92684%2017%209.75%2017H8.25C8.07316%2017%207.91776%2016.9082%207.82887%2016.7696C6.71938%2016.2659%205.50865%2016%204.27273%2016H2C1.44772%2016%201%2015.5523%201%2015L1%203C1%202.44772%201.44772%202%202%202L4.27273%202C5.96167%202%207.60357%202.49655%209%203.4142C10.3964%202.49655%2012.0383%202%2013.7273%202L16%202C16.5523%202%2017%202.44772%2017%203V15C17%2015.5523%2016.5523%2016%2016%2016H13.7273C12.4914%2016%2011.2806%2016.2659%2010.1711%2016.7696ZM8%2014.9439V4.85129C6.89594%204.13644%205.60264%203.75%204.27273%203.75H2.75V14.25H4.27273C5.55792%2014.25%206.82047%2014.4889%208%2014.9439ZM10%204.85129V14.9439C11.1795%2014.4889%2012.4421%2014.25%2013.7273%2014.25H15.25V3.75H13.7273C12.3974%203.75%2011.1041%204.13644%2010%204.85129Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1711%2016.7696C10.0822%2016.9082%209.92684%2017%209.75%2017H8.25C8.07316%2017%207.91776%2016.9082%207.82887%2016.7696C6.71938%2016.2659%205.50865%2016%204.27273%2016H2C1.44772%2016%201%2015.5523%201%2015L1%203C1%202.44772%201.44772%202%202%202L4.27273%202C5.96167%202%207.60357%202.49655%209%203.4142C10.3964%202.49655%2012.0383%202%2013.7273%202L16%202C16.5523%202%2017%202.44772%2017%203V15C17%2015.5523%2016.5523%2016%2016%2016H13.7273C12.4914%2016%2011.2806%2016.2659%2010.1711%2016.7696ZM8%2014.9439V4.85129C6.89594%204.13644%205.60264%203.75%204.27273%203.75H2.75V14.25H4.27273C5.55792%2014.25%206.82047%2014.4889%208%2014.9439ZM10%204.85129V14.9439C11.1795%2014.4889%2012.4421%2014.25%2013.7273%2014.25H15.25V3.75H13.7273C12.3974%203.75%2011.1041%204.13644%2010%204.85129Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-synonym.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.25%2022.3777C13.25%2022.3777%2013%2023%2012.5%2023H11.5C11%2023%2010.75%2022.3777%2010.75%2022.3777C9.111%2021.4806%207.2606%2021%205.36364%2021H2C1.44772%2021%201%2020.5523%201%2020L1%203C1%202.44772%201.44772%202%202%202L5.36364%202C7.76104%202%2010.0841%202.76764%2012%204.1735C14.826%202.7245%2017.0381%202%2018.6364%202L22%202C22.5523%202%2023%202.44772%2023%203V20C23%2020.5523%2022.5523%2021%2022%2021H18.6364C16.7394%2021%2014.889%2021.4806%2013.25%2022.3777ZM11%205.92393C9.3917%204.68108%207.41067%204%205.36364%204H3V19H5.36364C7.32884%2019%209.25163%2019.4378%2011%2020.2619V5.92393ZM13%205.92393V20.2619C14.7484%2019.4378%2016.6712%2019%2018.6364%2019H21V4H18.6364C16.5893%204%2014.6083%204.68108%2013%205.92393Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.25%2022.3777C13.25%2022.3777%2013%2023%2012.5%2023H11.5C11%2023%2010.75%2022.3777%2010.75%2022.3777C9.111%2021.4806%207.2606%2021%205.36364%2021H2C1.44772%2021%201%2020.5523%201%2020L1%203C1%202.44772%201.44772%202%202%202L5.36364%202C7.76104%202%2010.0841%202.76764%2012%204.1735C14.826%202.7245%2017.0381%202%2018.6364%202L22%202C22.5523%202%2023%202.44772%2023%203V20C23%2020.5523%2022.5523%2021%2022%2021H18.6364C16.7394%2021%2014.889%2021.4806%2013.25%2022.3777ZM11%205.92393C9.3917%204.68108%207.41067%204%205.36364%204H3V19H5.36364C7.32884%2019%209.25163%2019.4378%2011%2020.2619V5.92393ZM13%205.92393V20.2619C14.7484%2019.4378%2016.6712%2019%2018.6364%2019H21V4H18.6364C16.5893%204%2014.6083%204.68108%2013%205.92393Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Table Icon */
.gravity-icon-table {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.12%201H14.88C16.0508%201%2017%201.94916%2017%203.12V15.88C17%2017.0508%2016.0508%2018%2014.88%2018H2.12C0.949156%2018%200%2017.0508%200%2015.88V3.12C0%201.94916%200.949156%201%202.12%201ZM5%203H2.12C2.05373%203%202%203.05373%202%203.12V6H5V3ZM7%203V6H10V3H7ZM12%203V6H15V3.12C15%203.05373%2014.9463%203%2014.88%203H12ZM15%208H12V11H15V8ZM15%2013H12V16H14.88C14.9463%2016%2015%2015.9463%2015%2015.88V13ZM10%2016V13H7V16H10ZM5%2016V13H2V15.88C2%2015.9463%202.05373%2016%202.12%2016H5ZM2%2011H5V8H2V11ZM7%208V11H10V8H7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.12%201H14.88C16.0508%201%2017%201.94916%2017%203.12V15.88C17%2017.0508%2016.0508%2018%2014.88%2018H2.12C0.949156%2018%200%2017.0508%200%2015.88V3.12C0%201.94916%200.949156%201%202.12%201ZM5%203H2.12C2.05373%203%202%203.05373%202%203.12V6H5V3ZM7%203V6H10V3H7ZM12%203V6H15V3.12C15%203.05373%2014.9463%203%2014.88%203H12ZM15%208H12V11H15V8ZM15%2013H12V16H14.88C14.9463%2016%2015%2015.9463%2015%2015.88V13ZM10%2016V13H7V16H10ZM5%2016V13H2V15.88C2%2015.9463%202.05373%2016%202.12%2016H5ZM2%2011H5V8H2V11ZM7%208V11H10V8H7Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-table.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.5%201H20.5C21.8807%201%2023%202.11929%2023%203.5V21.5C23%2022.8807%2021.8807%2024%2020.5%2024H2.5C1.11929%2024%200%2022.8807%200%2021.5V3.5C0%202.11929%201.11929%201%202.5%201ZM14%2015V10H9V15H14ZM7%203H2.5C2.22386%203%202%203.22386%202%203.5V8H7V3ZM9%203V8H14V3H9ZM16%203V8H21V3.5C21%203.22386%2020.7761%203%2020.5%203H16ZM21%2010H16V15H21V10ZM21%2017H16V22H20.5C20.7761%2022%2021%2021.7761%2021%2021.5V17ZM14%2022V17H9V22H14ZM7%2022V17H2V21.5C2%2021.7761%202.22386%2022%202.5%2022H7ZM2%2015H7V10H2V15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2.5%201H20.5C21.8807%201%2023%202.11929%2023%203.5V21.5C23%2022.8807%2021.8807%2024%2020.5%2024H2.5C1.11929%2024%200%2022.8807%200%2021.5V3.5C0%202.11929%201.11929%201%202.5%201ZM14%2015V10H9V15H14ZM7%203H2.5C2.22386%203%202%203.22386%202%203.5V8H7V3ZM9%203V8H14V3H9ZM16%203V8H21V3.5C21%203.22386%2020.7761%203%2020.5%203H16ZM21%2010H16V15H21V10ZM21%2017H16V22H20.5C20.7761%2022%2021%2021.7761%2021%2021.5V17ZM14%2022V17H9V22H14ZM7%2022V17H2V21.5C2%2021.7761%202.22386%2022%202.5%2022H7ZM2%2015H7V10H2V15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Tag Icon */
.gravity-icon-tag {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.38657%201C8.917%201%209.42571%201.21071%209.80079%201.58579L16.4002%208.18521C17.1813%208.96626%2017.1813%2010.2326%2016.4002%2011.0136L11.0136%2016.4002C10.2326%2017.1813%208.96626%2017.1813%208.18521%2016.4002L1.58579%209.80079C1.21071%209.42571%201%208.917%201%208.38657V3C1%201.89543%201.89543%201%203%201H8.38657ZM8.38657%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V8.38657C2.75%208.45288%202.77634%208.51646%202.82322%208.56335L9.42265%2015.1628C9.52028%2015.2604%209.67857%2015.2604%209.77621%2015.1628L15.1628%209.77621C15.2604%209.67857%2015.2604%209.52028%2015.1628%209.42265L8.56335%202.82322C8.51646%202.77634%208.45288%202.75%208.38657%202.75ZM5.75%204.5C6.44036%204.5%207%205.05964%207%205.75C7%206.44036%206.44036%207%205.75%207C5.05964%207%204.5%206.44036%204.5%205.75C4.5%205.05964%205.05964%204.5%205.75%204.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.38657%201C8.917%201%209.42571%201.21071%209.80079%201.58579L16.4002%208.18521C17.1813%208.96626%2017.1813%2010.2326%2016.4002%2011.0136L11.0136%2016.4002C10.2326%2017.1813%208.96626%2017.1813%208.18521%2016.4002L1.58579%209.80079C1.21071%209.42571%201%208.917%201%208.38657V3C1%201.89543%201.89543%201%203%201H8.38657ZM8.38657%202.75H3C2.86193%202.75%202.75%202.86193%202.75%203V8.38657C2.75%208.45288%202.77634%208.51646%202.82322%208.56335L9.42265%2015.1628C9.52028%2015.2604%209.67857%2015.2604%209.77621%2015.1628L15.1628%209.77621C15.2604%209.67857%2015.2604%209.52028%2015.1628%209.42265L8.56335%202.82322C8.51646%202.77634%208.45288%202.75%208.38657%202.75ZM5.75%204.5C6.44036%204.5%207%205.05964%207%205.75C7%206.44036%206.44036%207%205.75%207C5.05964%207%204.5%206.44036%204.5%205.75C4.5%205.05964%205.05964%204.5%205.75%204.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-tag.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.1154%201C11.911%201%2012.6741%201.31607%2013.2367%201.87868L22.1262%2010.7682C23.2978%2011.9398%2023.2978%2013.8393%2022.1262%2015.0108L15.0108%2022.1262C13.8393%2023.2978%2011.9398%2023.2978%2010.7682%2022.1262L1.87868%2013.2367C1.31607%2012.6741%201%2011.911%201%2011.1154V4C1%202.34315%202.34315%201%204%201H11.1154ZM11.1154%203H4C3.44772%203%203%203.44772%203%204V11.1154C3%2011.3806%203.10536%2011.6349%203.29289%2011.8225L12.1824%2020.712C12.5729%2021.1025%2013.2061%2021.1025%2013.5966%2020.712L20.712%2013.5966C21.1025%2013.2061%2021.1025%2012.5729%2020.712%2012.1824L11.8225%203.29289C11.6349%203.10536%2011.3806%203%2011.1154%203ZM6.5%205C7.32843%205%208%205.67157%208%206.5C8%207.32843%207.32843%208%206.5%208C5.67157%208%205%207.32843%205%206.5C5%205.67157%205.67157%205%206.5%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.1154%201C11.911%201%2012.6741%201.31607%2013.2367%201.87868L22.1262%2010.7682C23.2978%2011.9398%2023.2978%2013.8393%2022.1262%2015.0108L15.0108%2022.1262C13.8393%2023.2978%2011.9398%2023.2978%2010.7682%2022.1262L1.87868%2013.2367C1.31607%2012.6741%201%2011.911%201%2011.1154V4C1%202.34315%202.34315%201%204%201H11.1154ZM11.1154%203H4C3.44772%203%203%203.44772%203%204V11.1154C3%2011.3806%203.10536%2011.6349%203.29289%2011.8225L12.1824%2020.712C12.5729%2021.1025%2013.2061%2021.1025%2013.5966%2020.712L20.712%2013.5966C21.1025%2013.2061%2021.1025%2012.5729%2020.712%2012.1824L11.8225%203.29289C11.6349%203.10536%2011.3806%203%2011.1154%203ZM6.5%205C7.32843%205%208%205.67157%208%206.5C8%207.32843%207.32843%208%206.5%208C5.67157%208%205%207.32843%205%206.5C5%205.67157%205.67157%205%206.5%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Time Icon */
.gravity-icon-time {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%204C9.55229%204%2010%204.44772%2010%205V9.59116L11.7082%2011.2994C12.0973%2011.6884%2012.0973%2012.3192%2011.7082%2012.7082C11.3192%2013.0973%2010.6884%2013.0973%2010.2994%2012.7082L8.35735%2010.7662C8.13888%2010.5827%208%2010.3076%208%2010V5C8%204.44772%208.44771%204%209%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%200C13.9706%200%2018%204.02944%2018%209C18%2013.9706%2013.9706%2018%209%2018C4.02944%2018%200%2013.9706%200%209C0%204.02944%204.02944%200%209%200ZM9%201.75C4.99594%201.75%201.75%204.99594%201.75%209C1.75%2013.0041%204.99594%2016.25%209%2016.25C13.0041%2016.25%2016.25%2013.0041%2016.25%209C16.25%204.99594%2013.0041%201.75%209%201.75ZM9%204C9.55229%204%2010%204.44772%2010%205V9.59116L11.7082%2011.2994C12.0973%2011.6884%2012.0973%2012.3192%2011.7082%2012.7082C11.3192%2013.0973%2010.6884%2013.0973%2010.2994%2012.7082L8.35735%2010.7662C8.13888%2010.5827%208%2010.3076%208%2010V5C8%204.44772%208.44771%204%209%204Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-time.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%205C12.5523%205%2013%205.44772%2013%206V12.5858L16.7023%2016.288C17.0928%2016.6786%2017.0928%2017.3117%2016.7023%2017.7023C16.3117%2018.0928%2015.6786%2018.0928%2015.288%2017.7023L11.2929%2013.7071C11.1119%2013.5261%2011%2013.2761%2011%2013V6C11%205.44772%2011.4477%205%2012%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%200C18.6274%200%2024%205.37258%2024%2012C24%2018.6274%2018.6274%2024%2012%2024C5.37258%2024%200%2018.6274%200%2012C0%205.37258%205.37258%200%2012%200ZM12%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202ZM12%205C12.5523%205%2013%205.44772%2013%206V12.5858L16.7023%2016.288C17.0928%2016.6786%2017.0928%2017.3117%2016.7023%2017.7023C16.3117%2018.0928%2015.6786%2018.0928%2015.288%2017.7023L11.2929%2013.7071C11.1119%2013.5261%2011%2013.2761%2011%2013V6C11%205.44772%2011.4477%205%2012%205Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Unarchive Icon */
.gravity-icon-unarchive {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.2925%201C15.0588%201%2015.7578%201.43789%2016.0921%202.12745L17%204V14.25C17%2015.7688%2015.7688%2017%2014.25%2017H3.75C2.23122%2017%201%2015.7688%201%2014.25V4L1.9079%202.12745C2.24223%201.43789%202.94119%201%203.70753%201H14.2925ZM15.25%205.75H2.75V14.25C2.75%2014.7628%203.13604%2015.1855%203.63338%2015.2433L3.75%2015.25H14.25C14.7628%2015.25%2015.1855%2014.864%2015.2433%2014.3666L15.25%2014.25V5.75ZM9.62053%207.2567L12.7428%2010.3772C13.0857%2010.7199%2013.0857%2011.2755%2012.7428%2011.6182C12.4%2011.9609%2011.844%2011.9609%2011.5011%2011.6182L9.875%209.99298V13.1225C9.875%2013.6071%209.48325%2014%209%2014C8.51675%2014%208.125%2013.6071%208.125%2013.1225V9.99298L6.49886%2011.6182C6.15598%2011.9609%205.60005%2011.9609%205.25716%2011.6182C4.91428%2011.2755%204.91428%2010.7199%205.25716%2010.3772L8.37915%207.25702C8.72193%206.91443%209.27762%206.91433%209.62053%207.2567ZM14.2925%202.75H3.70753C3.6309%202.75%203.55965%202.78503%203.51282%202.84318L3.48258%202.89093L2.94485%204H15.0552L14.5174%202.89093C14.4756%202.80474%2014.3883%202.75%2014.2925%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.2925%201C15.0588%201%2015.7578%201.43789%2016.0921%202.12745L17%204V14.25C17%2015.7688%2015.7688%2017%2014.25%2017H3.75C2.23122%2017%201%2015.7688%201%2014.25V4L1.9079%202.12745C2.24223%201.43789%202.94119%201%203.70753%201H14.2925ZM15.25%205.75H2.75V14.25C2.75%2014.7628%203.13604%2015.1855%203.63338%2015.2433L3.75%2015.25H14.25C14.7628%2015.25%2015.1855%2014.864%2015.2433%2014.3666L15.25%2014.25V5.75ZM9.62053%207.2567L12.7428%2010.3772C13.0857%2010.7199%2013.0857%2011.2755%2012.7428%2011.6182C12.4%2011.9609%2011.844%2011.9609%2011.5011%2011.6182L9.875%209.99298V13.1225C9.875%2013.6071%209.48325%2014%209%2014C8.51675%2014%208.125%2013.6071%208.125%2013.1225V9.99298L6.49886%2011.6182C6.15598%2011.9609%205.60005%2011.9609%205.25716%2011.6182C4.91428%2011.2755%204.91428%2010.7199%205.25716%2010.3772L8.37915%207.25702C8.72193%206.91443%209.27762%206.91433%209.62053%207.2567ZM14.2925%202.75H3.70753C3.6309%202.75%203.55965%202.78503%203.51282%202.84318L3.48258%202.89093L2.94485%204H15.0552L14.5174%202.89093C14.4756%202.80474%2014.3883%202.75%2014.2925%202.75Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-unarchive.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.6459%201C20.4637%201%2021.1992%201.4979%2021.5029%202.25722L23%206V20.25C23%2021.7688%2021.7688%2023%2020.25%2023H3.75C2.23122%2023%201%2021.7688%201%2020.25V6L2.49711%202.25722C2.80084%201.4979%203.53626%201%204.35407%201H19.6459ZM21%208H3V20.25C3%2020.6297%203.28215%2020.9435%203.64823%2020.9932L3.75%2021H20.25C20.6297%2021%2020.9435%2020.7178%2020.9932%2020.3518L21%2020.25V8ZM12%2010C12.2761%2010%2012.5261%2010.1119%2012.7071%2010.2929L16.7071%2014.2929C17.0976%2014.6834%2017.0976%2015.3166%2016.7071%2015.7071C16.3166%2016.0976%2015.6834%2016.0976%2015.2929%2015.7071L13%2013.4142V18C13%2018.5523%2012.5523%2019%2012%2019C11.4477%2019%2011%2018.5523%2011%2018V13.4142L8.70711%2015.7071C8.31658%2016.0976%207.68342%2016.0976%207.29289%2015.7071C6.90237%2015.3166%206.90237%2014.6834%207.29289%2014.2929L11.2929%2010.2929C11.4739%2010.1119%2011.7239%2010%2012%2010ZM19.6459%203H4.35407L3.15407%206H20.8459L19.6459%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.6459%201C20.4637%201%2021.1992%201.4979%2021.5029%202.25722L23%206V20.25C23%2021.7688%2021.7688%2023%2020.25%2023H3.75C2.23122%2023%201%2021.7688%201%2020.25V6L2.49711%202.25722C2.80084%201.4979%203.53626%201%204.35407%201H19.6459ZM21%208H3V20.25C3%2020.6297%203.28215%2020.9435%203.64823%2020.9932L3.75%2021H20.25C20.6297%2021%2020.9435%2020.7178%2020.9932%2020.3518L21%2020.25V8ZM12%2010C12.2761%2010%2012.5261%2010.1119%2012.7071%2010.2929L16.7071%2014.2929C17.0976%2014.6834%2017.0976%2015.3166%2016.7071%2015.7071C16.3166%2016.0976%2015.6834%2016.0976%2015.2929%2015.7071L13%2013.4142V18C13%2018.5523%2012.5523%2019%2012%2019C11.4477%2019%2011%2018.5523%2011%2018V13.4142L8.70711%2015.7071C8.31658%2016.0976%207.68342%2016.0976%207.29289%2015.7071C6.90237%2015.3166%206.90237%2014.6834%207.29289%2014.2929L11.2929%2010.2929C11.4739%2010.1119%2011.7239%2010%2012%2010ZM19.6459%203H4.35407L3.15407%206H20.8459L19.6459%203Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Underline Icon */
.gravity-icon-underline {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2016C15.5523%2016%2016%2016.4477%2016%2017C16%2017.5523%2015.5523%2018%2015%2018H3C2.44772%2018%202%2017.5523%202%2017C2%2016.4477%202.44772%2016%203%2016H15ZM14%202C14.5523%202%2015%202.44772%2015%203V9C15%2011.7614%2012.7614%2014%2010%2014H8C5.23858%2014%203%2011.7614%203%209V3C3%202.44772%203.44772%202%204%202C4.55228%202%205%202.44772%205%203V9C5%2010.6569%206.34315%2012%208%2012H10C11.6569%2012%2013%2010.6569%2013%209V3C13%202.44772%2013.4477%202%2014%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2016C15.5523%2016%2016%2016.4477%2016%2017C16%2017.5523%2015.5523%2018%2015%2018H3C2.44772%2018%202%2017.5523%202%2017C2%2016.4477%202.44772%2016%203%2016H15ZM14%202C14.5523%202%2015%202.44772%2015%203V9C15%2011.7614%2012.7614%2014%2010%2014H8C5.23858%2014%203%2011.7614%203%209V3C3%202.44772%203.44772%202%204%202C4.55228%202%205%202.44772%205%203V9C5%2010.6569%206.34315%2012%208%2012H10C11.6569%2012%2013%2010.6569%2013%209V3C13%202.44772%2013.4477%202%2014%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-underline.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2022C20.5523%2022%2021%2022.4477%2021%2023C21%2023.5523%2020.5523%2024%2020%2024H4C3.44772%2024%203%2023.5523%203%2023C3%2022.4477%203.44772%2022%204%2022H20ZM19%202C19.5523%202%2020%202.44772%2020%203V13C20%2016.866%2016.866%2020%2013%2020H11C7.13401%2020%204%2016.866%204%2013V3C4%202.44772%204.44772%202%205%202C5.55228%202%206%202.44772%206%203V13C6%2015.7614%208.23858%2018%2011%2018H13C15.7614%2018%2018%2015.7614%2018%2013V3C18%202.44772%2018.4477%202%2019%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2022C20.5523%2022%2021%2022.4477%2021%2023C21%2023.5523%2020.5523%2024%2020%2024H4C3.44772%2024%203%2023.5523%203%2023C3%2022.4477%203.44772%2022%204%2022H20ZM19%202C19.5523%202%2020%202.44772%2020%203V13C20%2016.866%2016.866%2020%2013%2020H11C7.13401%2020%204%2016.866%204%2013V3C4%202.44772%204.44772%202%205%202C5.55228%202%206%202.44772%206%203V13C6%2015.7614%208.23858%2018%2011%2018H13C15.7614%2018%2018%2015.7614%2018%2013V3C18%202.44772%2018.4477%202%2019%202Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Undo Icon */
.gravity-icon-undo {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.97306%2010.25H6.125C6.60825%2010.25%207%2010.6418%207%2011.125C7%2011.6083%206.60825%2012%206.125%2012H1.875C1.39175%2012%201%2011.6083%201%2011.125V6.875C1%206.39175%201.39175%206%201.875%206C2.35825%206%202.75%206.39175%202.75%206.875V8.98609C4.27114%206.91269%206.68843%205.62445%209.33803%205.62445C12.6926%205.62445%2015.6719%207.6894%2016.9344%2010.7909C17.1159%2011.2369%2016.9079%2011.7484%2016.4698%2011.9332C16.0316%2012.118%2015.5292%2011.9062%2015.3477%2011.4602C14.3489%209.00645%2011.992%207.37291%209.33803%207.37291C7.15055%207.37291%205.16344%208.48258%203.97306%2010.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.97306%2010.25H6.125C6.60825%2010.25%207%2010.6418%207%2011.125C7%2011.6083%206.60825%2012%206.125%2012H1.875C1.39175%2012%201%2011.6083%201%2011.125V6.875C1%206.39175%201.39175%206%201.875%206C2.35825%206%202.75%206.39175%202.75%206.875V8.98609C4.27114%206.91269%206.68843%205.62445%209.33803%205.62445C12.6926%205.62445%2015.6719%207.6894%2016.9344%2010.7909C17.1159%2011.2369%2016.9079%2011.7484%2016.4698%2011.9332C16.0316%2012.118%2015.5292%2011.9062%2015.3477%2011.4602C14.3489%209.00645%2011.992%207.37291%209.33803%207.37291C7.15055%207.37291%205.16344%208.48258%203.97306%2010.25Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-undo.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.39974%2014H8C8.55228%2014%209%2014.4477%209%2015C9%2015.5523%208.55228%2016%208%2016H3C2.44772%2016%202%2015.5523%202%2015V10C2%209.44772%202.44772%209%203%209C3.55228%209%204%209.44772%204%2010V12.5374C5.9235%209.8869%209.00268%208.25%2012.3702%208.25C16.5661%208.25%2020.2998%2010.7918%2021.92%2014.6281C22.1345%2015.136%2021.9014%2015.7236%2021.3993%2015.9406C20.8972%2016.1575%2020.3163%2015.9217%2020.1018%2015.4138C18.7899%2012.3077%2015.7674%2010.25%2012.3702%2010.25C9.52738%2010.25%206.93919%2011.6902%205.39974%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.39974%2014H8C8.55228%2014%209%2014.4477%209%2015C9%2015.5523%208.55228%2016%208%2016H3C2.44772%2016%202%2015.5523%202%2015V10C2%209.44772%202.44772%209%203%209C3.55228%209%204%209.44772%204%2010V12.5374C5.9235%209.8869%209.00268%208.25%2012.3702%208.25C16.5661%208.25%2020.2998%2010.7918%2021.92%2014.6281C22.1345%2015.136%2021.9014%2015.7236%2021.3993%2015.9406C20.8972%2016.1575%2020.3163%2015.9217%2020.1018%2015.4138C18.7899%2012.3077%2015.7674%2010.25%2012.3702%2010.25C9.52738%2010.25%206.93919%2011.6902%205.39974%2014Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Upload Icon */
.gravity-icon-upload {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2011C16.5523%2011%2017%2011.4477%2017%2012V14.5C17%2015.8807%2015.8807%2017%2014.5%2017H3.5C2.11929%2017%201%2015.8807%201%2014.5V12C1%2011.4477%201.44772%2011%202%2011C2.55228%2011%203%2011.4477%203%2012V14.5C3%2014.7761%203.22386%2015%203.5%2015H14.5C14.7761%2015%2015%2014.7761%2015%2014.5V12C15%2011.4477%2015.4477%2011%2016%2011ZM9.66501%200.277767L13.725%204.37877C14.0917%204.74913%2014.0917%205.3496%2013.725%205.71995C13.3584%206.09031%2012.7639%206.09031%2012.3972%205.71995L10%203.2985V11C10%2011.5523%209.55229%2012%209%2012C8.44772%2012%208%2011.5523%208%2011V3.30078L5.60276%205.72223C5.23611%206.09259%204.64164%206.09259%204.27499%205.72223C3.90834%205.35188%203.90834%204.75141%204.27499%204.38105L8.33724%200.277767C8.7039%20-0.0925891%209.29836%20-0.0925891%209.66501%200.277767Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2011C16.5523%2011%2017%2011.4477%2017%2012V14.5C17%2015.8807%2015.8807%2017%2014.5%2017H3.5C2.11929%2017%201%2015.8807%201%2014.5V12C1%2011.4477%201.44772%2011%202%2011C2.55228%2011%203%2011.4477%203%2012V14.5C3%2014.7761%203.22386%2015%203.5%2015H14.5C14.7761%2015%2015%2014.7761%2015%2014.5V12C15%2011.4477%2015.4477%2011%2016%2011ZM9.66501%200.277767L13.725%204.37877C14.0917%204.74913%2014.0917%205.3496%2013.725%205.71995C13.3584%206.09031%2012.7639%206.09031%2012.3972%205.71995L10%203.2985V11C10%2011.5523%209.55229%2012%209%2012C8.44772%2012%208%2011.5523%208%2011V3.30078L5.60276%205.72223C5.23611%206.09259%204.64164%206.09259%204.27499%205.72223C3.90834%205.35188%203.90834%204.75141%204.27499%204.38105L8.33724%200.277767C8.7039%20-0.0925891%209.29836%20-0.0925891%209.66501%200.277767Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-upload.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2015C22.5523%2015%2023%2015.4477%2023%2016V20C23%2021.6569%2021.6569%2023%2020%2023H4C2.34315%2023%201%2021.6569%201%2020V16C1%2015.4477%201.44772%2015%202%2015C2.55228%2015%203%2015.4477%203%2016V20C3%2020.5523%203.44772%2021%204%2021H20C20.5523%2021%2021%2020.5523%2021%2020V16C21%2015.4477%2021.4477%2015%2022%2015ZM12%200C12.2559%200%2012.5118%200.0976311%2012.7071%200.292893L17.7071%205.29289C18.0976%205.68342%2018.0976%206.31658%2017.7071%206.70711C17.3166%207.09763%2016.6834%207.09763%2016.2929%206.70711L13%203.41421V15C13%2015.5523%2012.5523%2016%2012%2016C11.4477%2016%2011%2015.5523%2011%2015V3.41421L7.70711%206.70711C7.31658%207.09763%206.68342%207.09763%206.29289%206.70711C5.90237%206.31658%205.90237%205.68342%206.29289%205.29289L11.2929%200.292893C11.4882%200.0976311%2011.7441%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22%2015C22.5523%2015%2023%2015.4477%2023%2016V20C23%2021.6569%2021.6569%2023%2020%2023H4C2.34315%2023%201%2021.6569%201%2020V16C1%2015.4477%201.44772%2015%202%2015C2.55228%2015%203%2015.4477%203%2016V20C3%2020.5523%203.44772%2021%204%2021H20C20.5523%2021%2021%2020.5523%2021%2020V16C21%2015.4477%2021.4477%2015%2022%2015ZM12%200C12.2559%200%2012.5118%200.0976311%2012.7071%200.292893L17.7071%205.29289C18.0976%205.68342%2018.0976%206.31658%2017.7071%206.70711C17.3166%207.09763%2016.6834%207.09763%2016.2929%206.70711L13%203.41421V15C13%2015.5523%2012.5523%2016%2012%2016C11.4477%2016%2011%2015.5523%2011%2015V3.41421L7.70711%206.70711C7.31658%207.09763%206.68342%207.09763%206.29289%206.70711C5.90237%206.31658%205.90237%205.68342%206.29289%205.29289L11.2929%200.292893C11.4882%200.0976311%2011.7441%200%2012%200Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Virtual Reality Icon */
.gravity-icon-virtual-reality {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%202C16.6569%202%2018%203.34315%2018%205V13C18%2014.6569%2016.6569%2016%2015%2016H12.2718C11.6301%2016%2011.0273%2015.692%2010.6512%2015.172L10.0799%2014.382L10.1749%2014.2505C10.1437%2014.2937%2010.1101%2014.3351%2010.0744%2014.3745L9.24309%2013.225C9.146%2013.0908%208.95845%2013.0606%208.82419%2013.1577C8.79833%2013.1764%208.77562%2013.1991%208.75691%2013.225L7.92549%2014.3746C7.89018%2014.3356%207.85664%2014.2942%207.82507%2014.2505L7.92015%2014.382L7.34879%2015.172C6.97272%2015.692%206.36995%2016%205.7282%2016H3C1.34315%2016%200%2014.6569%200%2013V5C0%203.34315%201.34315%202%203%202H15ZM15%203.75H3C2.30964%203.75%201.75%204.30964%201.75%205V13C1.75%2013.6904%202.30964%2014.25%203%2014.25H5.7282C5.80842%2014.25%205.88376%2014.2115%205.93077%2014.1465L7.33889%2012.1995C7.46671%2012.0227%207.62192%2011.8675%207.79866%2011.7397C8.71607%2011.0762%209.99763%2011.2821%2010.6611%2012.1995L12.0692%2014.1465C12.1162%2014.2115%2012.1916%2014.25%2012.2718%2014.25H15C15.6904%2014.25%2016.25%2013.6904%2016.25%2013V5C16.25%204.30964%2015.6904%203.75%2015%203.75ZM5.5%206C6.88071%206%208%207.11929%208%208.5C8%209.88071%206.88071%2011%205.5%2011C4.11929%2011%203%209.88071%203%208.5C3%207.11929%204.11929%206%205.5%206ZM12.5%206C13.8807%206%2015%207.11929%2015%208.5C15%209.88071%2013.8807%2011%2012.5%2011C11.1193%2011%2010%209.88071%2010%208.5C10%207.11929%2011.1193%206%2012.5%206ZM5.5%207.6C5.00294%207.6%204.6%208.00294%204.6%208.5C4.6%208.99706%205.00294%209.4%205.5%209.4C5.99706%209.4%206.4%208.99706%206.4%208.5C6.4%208.00294%205.99706%207.6%205.5%207.6ZM12.5%207.6C12.0029%207.6%2011.6%208.00294%2011.6%208.5C11.6%208.99706%2012.0029%209.4%2012.5%209.4C12.9971%209.4%2013.4%208.99706%2013.4%208.5C13.4%208.00294%2012.9971%207.6%2012.5%207.6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%202C16.6569%202%2018%203.34315%2018%205V13C18%2014.6569%2016.6569%2016%2015%2016H12.2718C11.6301%2016%2011.0273%2015.692%2010.6512%2015.172L10.0799%2014.382L10.1749%2014.2505C10.1437%2014.2937%2010.1101%2014.3351%2010.0744%2014.3745L9.24309%2013.225C9.146%2013.0908%208.95845%2013.0606%208.82419%2013.1577C8.79833%2013.1764%208.77562%2013.1991%208.75691%2013.225L7.92549%2014.3746C7.89018%2014.3356%207.85664%2014.2942%207.82507%2014.2505L7.92015%2014.382L7.34879%2015.172C6.97272%2015.692%206.36995%2016%205.7282%2016H3C1.34315%2016%200%2014.6569%200%2013V5C0%203.34315%201.34315%202%203%202H15ZM15%203.75H3C2.30964%203.75%201.75%204.30964%201.75%205V13C1.75%2013.6904%202.30964%2014.25%203%2014.25H5.7282C5.80842%2014.25%205.88376%2014.2115%205.93077%2014.1465L7.33889%2012.1995C7.46671%2012.0227%207.62192%2011.8675%207.79866%2011.7397C8.71607%2011.0762%209.99763%2011.2821%2010.6611%2012.1995L12.0692%2014.1465C12.1162%2014.2115%2012.1916%2014.25%2012.2718%2014.25H15C15.6904%2014.25%2016.25%2013.6904%2016.25%2013V5C16.25%204.30964%2015.6904%203.75%2015%203.75ZM5.5%206C6.88071%206%208%207.11929%208%208.5C8%209.88071%206.88071%2011%205.5%2011C4.11929%2011%203%209.88071%203%208.5C3%207.11929%204.11929%206%205.5%206ZM12.5%206C13.8807%206%2015%207.11929%2015%208.5C15%209.88071%2013.8807%2011%2012.5%2011C11.1193%2011%2010%209.88071%2010%208.5C10%207.11929%2011.1193%206%2012.5%206ZM5.5%207.6C5.00294%207.6%204.6%208.00294%204.6%208.5C4.6%208.99706%205.00294%209.4%205.5%209.4C5.99706%209.4%206.4%208.99706%206.4%208.5C6.4%208.00294%205.99706%207.6%205.5%207.6ZM12.5%207.6C12.0029%207.6%2011.6%208.00294%2011.6%208.5C11.6%208.99706%2012.0029%209.4%2012.5%209.4C12.9971%209.4%2013.4%208.99706%2013.4%208.5C13.4%208.00294%2012.9971%207.6%2012.5%207.6Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-virtual-reality.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%203C22.2091%203%2024%204.79086%2024%207V17C24%2019.2091%2022.2091%2021%2020%2021H16.5C15.5557%2021%2014.6666%2020.5554%2014.1%2019.8L12.4%2017.5333C12.2343%2017.3124%2011.9209%2017.2676%2011.7%2017.4333C11.6621%2017.4618%2011.6284%2017.4954%2011.6%2017.5333L9.9%2019.8C9.33344%2020.5554%208.44427%2021%207.5%2021H4C1.79086%2021%200%2019.2091%200%2017V7C0%204.79086%201.79086%203%204%203H20ZM20%205H4C2.89543%205%202%205.89543%202%207V17C2%2018.1046%202.89543%2019%204%2019H7.5C7.81476%2019%208.11115%2018.8518%208.3%2018.6L10%2016.3333C10.1421%2016.1438%2010.3105%2015.9755%2010.5%2015.8333C11.6046%2015.0049%2013.1716%2015.2288%2014%2016.3333L15.7%2018.6C15.8889%2018.8518%2016.1852%2019%2016.5%2019H20C21.1046%2019%2022%2018.1046%2022%2017V7C22%205.89543%2021.1046%205%2020%205ZM7.5%208C9.433%208%2011%209.567%2011%2011.5C11%2013.433%209.433%2015%207.5%2015C5.567%2015%204%2013.433%204%2011.5C4%209.567%205.567%208%207.5%208ZM16.5%208C18.433%208%2020%209.567%2020%2011.5C20%2013.433%2018.433%2015%2016.5%2015C14.567%2015%2013%2013.433%2013%2011.5C13%209.567%2014.567%208%2016.5%208ZM7.5%2010C6.67157%2010%206%2010.6716%206%2011.5C6%2012.3284%206.67157%2013%207.5%2013C8.32843%2013%209%2012.3284%209%2011.5C9%2010.6716%208.32843%2010%207.5%2010ZM16.5%2010C15.6716%2010%2015%2010.6716%2015%2011.5C15%2012.3284%2015.6716%2013%2016.5%2013C17.3284%2013%2018%2012.3284%2018%2011.5C18%2010.6716%2017.3284%2010%2016.5%2010Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%203C22.2091%203%2024%204.79086%2024%207V17C24%2019.2091%2022.2091%2021%2020%2021H16.5C15.5557%2021%2014.6666%2020.5554%2014.1%2019.8L12.4%2017.5333C12.2343%2017.3124%2011.9209%2017.2676%2011.7%2017.4333C11.6621%2017.4618%2011.6284%2017.4954%2011.6%2017.5333L9.9%2019.8C9.33344%2020.5554%208.44427%2021%207.5%2021H4C1.79086%2021%200%2019.2091%200%2017V7C0%204.79086%201.79086%203%204%203H20ZM20%205H4C2.89543%205%202%205.89543%202%207V17C2%2018.1046%202.89543%2019%204%2019H7.5C7.81476%2019%208.11115%2018.8518%208.3%2018.6L10%2016.3333C10.1421%2016.1438%2010.3105%2015.9755%2010.5%2015.8333C11.6046%2015.0049%2013.1716%2015.2288%2014%2016.3333L15.7%2018.6C15.8889%2018.8518%2016.1852%2019%2016.5%2019H20C21.1046%2019%2022%2018.1046%2022%2017V7C22%205.89543%2021.1046%205%2020%205ZM7.5%208C9.433%208%2011%209.567%2011%2011.5C11%2013.433%209.433%2015%207.5%2015C5.567%2015%204%2013.433%204%2011.5C4%209.567%205.567%208%207.5%208ZM16.5%208C18.433%208%2020%209.567%2020%2011.5C20%2013.433%2018.433%2015%2016.5%2015C14.567%2015%2013%2013.433%2013%2011.5C13%209.567%2014.567%208%2016.5%208ZM7.5%2010C6.67157%2010%206%2010.6716%206%2011.5C6%2012.3284%206.67157%2013%207.5%2013C8.32843%2013%209%2012.3284%209%2011.5C9%2010.6716%208.32843%2010%207.5%2010ZM16.5%2010C15.6716%2010%2015%2010.6716%2015%2011.5C15%2012.3284%2015.6716%2013%2016.5%2013C17.3284%2013%2018%2012.3284%2018%2011.5C18%2010.6716%2017.3284%2010%2016.5%2010Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Warning Icon */
.gravity-icon-warning {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.3204%201.76323L17.7947%2014.7066C18.2166%2015.4371%2017.9674%2016.372%2017.2381%2016.7946C17.0059%2016.9292%2016.7425%2017%2016.4742%2017H1.52551C0.682995%2017%200%2016.3158%200%2015.4718C0%2015.2031%200.0707206%2014.9391%200.205031%2014.7066L7.67939%201.76323C8.10127%201.03266%209.03447%200.783021%209.76376%201.20565C9.99478%201.33953%2010.1867%201.53179%2010.3204%201.76323ZM8.5%2013C8.22386%2013%208%2013.2239%208%2013.5V14.5C8%2014.7761%208.22386%2015%208.5%2015H9.5C9.77614%2015%2010%2014.7761%2010%2014.5V13.5C10%2013.2239%209.77614%2013%209.5%2013H8.5ZM8.5%207C8.22386%207%208%207.22386%208%207.5V11.5C8%2011.7761%208.22386%2012%208.5%2012H9.5C9.77614%2012%2010%2011.7761%2010%2011.5V7.5C10%207.22386%209.77614%207%209.5%207H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.3204%201.76323L17.7947%2014.7066C18.2166%2015.4371%2017.9674%2016.372%2017.2381%2016.7946C17.0059%2016.9292%2016.7425%2017%2016.4742%2017H1.52551C0.682995%2017%200%2016.3158%200%2015.4718C0%2015.2031%200.0707206%2014.9391%200.205031%2014.7066L7.67939%201.76323C8.10127%201.03266%209.03447%200.783021%209.76376%201.20565C9.99478%201.33953%2010.1867%201.53179%2010.3204%201.76323ZM8.5%2013C8.22386%2013%208%2013.2239%208%2013.5V14.5C8%2014.7761%208.22386%2015%208.5%2015H9.5C9.77614%2015%2010%2014.7761%2010%2014.5V13.5C10%2013.2239%209.77614%2013%209.5%2013H8.5ZM8.5%207C8.22386%207%208%207.22386%208%207.5V11.5C8%2011.7761%208.22386%2012%208.5%2012H9.5C9.77614%2012%2010%2011.7761%2010%2011.5V7.5C10%207.22386%209.77614%207%209.5%207H8.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-warning.gravity-icon-sm {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.10394%201.63075L15.8257%2013.0887C16.1814%2013.695%2015.9754%2014.4732%2015.3657%2014.8269C15.1702%2014.9403%2014.9479%2015%2014.7216%2015H1.27815C0.572247%2015%200%2014.431%200%2013.7291C0%2013.504%200.0600838%2013.2831%200.174111%2013.0887L6.89586%201.63075C7.25154%201.02445%208.03417%200.819659%208.64392%201.17333C8.83437%201.2838%208.99284%201.44138%209.10394%201.63075ZM7.5%206C7.22386%206%207%206.22386%207%206.5V9.5C7%209.77614%207.22386%2010%207.5%2010H8.5C8.77614%2010%209%209.77614%209%209.5V6.5C9%206.22386%208.77614%206%208.5%206H7.5ZM7.5%2011C7.22386%2011%207%2011.2239%207%2011.5V12.5C7%2012.7761%207.22386%2013%207.5%2013H8.5C8.77614%2013%209%2012.7761%209%2012.5V11.5C9%2011.2239%208.77614%2011%208.5%2011H7.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.10394%201.63075L15.8257%2013.0887C16.1814%2013.695%2015.9754%2014.4732%2015.3657%2014.8269C15.1702%2014.9403%2014.9479%2015%2014.7216%2015H1.27815C0.572247%2015%200%2014.431%200%2013.7291C0%2013.504%200.0600838%2013.2831%200.174111%2013.0887L6.89586%201.63075C7.25154%201.02445%208.03417%200.819659%208.64392%201.17333C8.83437%201.2838%208.99284%201.44138%209.10394%201.63075ZM7.5%206C7.22386%206%207%206.22386%207%206.5V9.5C7%209.77614%207.22386%2010%207.5%2010H8.5C8.77614%2010%209%209.77614%209%209.5V6.5C9%206.22386%208.77614%206%208.5%206H7.5ZM7.5%2011C7.22386%2011%207%2011.2239%207%2011.5V12.5C7%2012.7761%207.22386%2013%207.5%2013H8.5C8.77614%2013%209%2012.7761%209%2012.5V11.5C9%2011.2239%208.77614%2011%208.5%2011H7.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-warning.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.5595%201.91845L23.7769%2020.3591C24.2534%2021.2191%2023.9414%2022.3019%2023.0801%2022.7776C22.816%2022.9235%2022.5191%2023%2022.2173%2023H1.78236C0.797988%2023%200%2022.2033%200%2021.2205C0%2020.9192%200.0766396%2020.6228%200.222734%2020.3591L10.4402%201.91845C10.9167%201.05847%2012.0013%200.74697%2012.8626%201.22271C13.1558%201.38462%2013.3973%201.62575%2013.5595%201.91845ZM11.5%209C11.2239%209%2011%209.22386%2011%209.5V15.5C11%2015.7761%2011.2239%2016%2011.5%2016H12.5C12.7761%2016%2013%2015.7761%2013%2015.5V9.5C13%209.22386%2012.7761%209%2012.5%209H11.5ZM11.5%2018C11.2239%2018%2011%2018.2239%2011%2018.5V19.5C11%2019.7761%2011.2239%2020%2011.5%2020H12.5C12.7761%2020%2013%2019.7761%2013%2019.5V18.5C13%2018.2239%2012.7761%2018%2012.5%2018H11.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M13.5595%201.91845L23.7769%2020.3591C24.2534%2021.2191%2023.9414%2022.3019%2023.0801%2022.7776C22.816%2022.9235%2022.5191%2023%2022.2173%2023H1.78236C0.797988%2023%200%2022.2033%200%2021.2205C0%2020.9192%200.0766396%2020.6228%200.222734%2020.3591L10.4402%201.91845C10.9167%201.05847%2012.0013%200.74697%2012.8626%201.22271C13.1558%201.38462%2013.3973%201.62575%2013.5595%201.91845ZM11.5%209C11.2239%209%2011%209.22386%2011%209.5V15.5C11%2015.7761%2011.2239%2016%2011.5%2016H12.5C12.7761%2016%2013%2015.7761%2013%2015.5V9.5C13%209.22386%2012.7761%209%2012.5%209H11.5ZM11.5%2018C11.2239%2018%2011%2018.2239%2011%2018.5V19.5C11%2019.7761%2011.2239%2020%2011.5%2020H12.5C12.7761%2020%2013%2019.7761%2013%2019.5V18.5C13%2018.2239%2012.7761%2018%2012.5%2018H11.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Zoom In Icon */
.gravity-icon-zoom-in {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C11.866%201%2015%204.13401%2015%208C15%209.59952%2014.4635%2011.0737%2013.5607%2012.2525L16.7603%2015.4522C17.1216%2015.8134%2017.1216%2016.3991%2016.7603%2016.7603C16.3991%2017.1216%2015.8134%2017.1216%2015.4522%2016.7603L12.2525%2013.5607C11.0737%2014.4635%209.59952%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.13401%204.13401%201%208%201ZM8%202.85C5.15573%202.85%202.85%205.15573%202.85%208C2.85%2010.8443%205.15573%2013.15%208%2013.15C10.8443%2013.15%2013.15%2010.8443%2013.15%208C13.15%205.15573%2010.8443%202.85%208%202.85ZM8%204.625C8.48325%204.625%208.875%205.01675%208.875%205.5V7.125H10.6786C11.1963%207.125%2011.6161%207.54473%2011.6161%208.0625C11.6161%208.58027%2011.1963%209%2010.6786%209H8.875V10.5C8.875%2010.9832%208.48325%2011.375%208%2011.375C7.51675%2011.375%207.125%2010.9832%207.125%2010.5V9H5.32143C4.80366%209%204.38393%208.58027%204.38393%208.0625C4.38393%207.54473%204.80366%207.125%205.32143%207.125H7.125V5.5C7.125%205.01675%207.51675%204.625%208%204.625Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C11.866%201%2015%204.13401%2015%208C15%209.59952%2014.4635%2011.0737%2013.5607%2012.2525L16.7603%2015.4522C17.1216%2015.8134%2017.1216%2016.3991%2016.7603%2016.7603C16.3991%2017.1216%2015.8134%2017.1216%2015.4522%2016.7603L12.2525%2013.5607C11.0737%2014.4635%209.59952%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.13401%204.13401%201%208%201ZM8%202.85C5.15573%202.85%202.85%205.15573%202.85%208C2.85%2010.8443%205.15573%2013.15%208%2013.15C10.8443%2013.15%2013.15%2010.8443%2013.15%208C13.15%205.15573%2010.8443%202.85%208%202.85ZM8%204.625C8.48325%204.625%208.875%205.01675%208.875%205.5V7.125H10.6786C11.1963%207.125%2011.6161%207.54473%2011.6161%208.0625C11.6161%208.58027%2011.1963%209%2010.6786%209H8.875V10.5C8.875%2010.9832%208.48325%2011.375%208%2011.375C7.51675%2011.375%207.125%2010.9832%207.125%2010.5V9H5.32143C4.80366%209%204.38393%208.58027%204.38393%208.0625C4.38393%207.54473%204.80366%207.125%205.32143%207.125H7.125V5.5C7.125%205.01675%207.51675%204.625%208%204.625Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-zoom-in.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.5C16.2467%201.5%2020.5%205.75329%2020.5%2011C20.5%2013.2451%2019.7212%2015.3083%2018.4191%2016.9341L22.7425%2021.2575C23.1525%2021.6676%2023.1525%2022.3324%2022.7425%2022.7425C22.3324%2023.1525%2021.6676%2023.1525%2021.2575%2022.7425L16.9341%2018.4191C15.3083%2019.7212%2013.2451%2020.5%2011%2020.5C5.75329%2020.5%201.5%2016.2467%201.5%2011C1.5%205.75329%205.75329%201.5%2011%201.5ZM11%203.6C6.91309%203.6%203.6%206.91309%203.6%2011C3.6%2015.0869%206.91309%2018.4%2011%2018.4C15.0869%2018.4%2018.4%2015.0869%2018.4%2011C18.4%206.91309%2015.0869%203.6%2011%203.6ZM11%206C11.5523%206%2012%206.44772%2012%207V10H15C15.5523%2010%2016%2010.4477%2016%2011C16%2011.5523%2015.5523%2012%2015%2012H12V15C12%2015.5523%2011.5523%2016%2011%2016C10.4477%2016%2010%2015.5523%2010%2015V12H7C6.44772%2012%206%2011.5523%206%2011C6%2010.4477%206.44772%2010%207%2010H10V7C10%206.44772%2010.4477%206%2011%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.5C16.2467%201.5%2020.5%205.75329%2020.5%2011C20.5%2013.2451%2019.7212%2015.3083%2018.4191%2016.9341L22.7425%2021.2575C23.1525%2021.6676%2023.1525%2022.3324%2022.7425%2022.7425C22.3324%2023.1525%2021.6676%2023.1525%2021.2575%2022.7425L16.9341%2018.4191C15.3083%2019.7212%2013.2451%2020.5%2011%2020.5C5.75329%2020.5%201.5%2016.2467%201.5%2011C1.5%205.75329%205.75329%201.5%2011%201.5ZM11%203.6C6.91309%203.6%203.6%206.91309%203.6%2011C3.6%2015.0869%206.91309%2018.4%2011%2018.4C15.0869%2018.4%2018.4%2015.0869%2018.4%2011C18.4%206.91309%2015.0869%203.6%2011%203.6ZM11%206C11.5523%206%2012%206.44772%2012%207V10H15C15.5523%2010%2016%2010.4477%2016%2011C16%2011.5523%2015.5523%2012%2015%2012H12V15C12%2015.5523%2011.5523%2016%2011%2016C10.4477%2016%2010%2015.5523%2010%2015V12H7C6.44772%2012%206%2011.5523%206%2011C6%2010.4477%206.44772%2010%207%2010H10V7C10%206.44772%2010.4477%206%2011%206Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Zoom Out Icon */
.gravity-icon-zoom-out {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C11.866%201%2015%204.13401%2015%208C15%209.59952%2014.4635%2011.0737%2013.5607%2012.2525L16.7603%2015.4522C17.1216%2015.8134%2017.1216%2016.3991%2016.7603%2016.7603C16.3991%2017.1216%2015.8134%2017.1216%2015.4522%2016.7603L12.2525%2013.5607C11.0737%2014.4635%209.59952%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.13401%204.13401%201%208%201ZM8%202.85C5.15573%202.85%202.85%205.15573%202.85%208C2.85%2010.8443%205.15573%2013.15%208%2013.15C10.8443%2013.15%2013.15%2010.8443%2013.15%208C13.15%205.15573%2010.8443%202.85%208%202.85ZM10.5%207.125C10.9832%207.125%2011.375%207.51675%2011.375%208C11.375%208.48325%2010.9832%208.875%2010.5%208.875H5.5C5.01675%208.875%204.625%208.48325%204.625%208C4.625%207.51675%205.01675%207.125%205.5%207.125H10.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201C11.866%201%2015%204.13401%2015%208C15%209.59952%2014.4635%2011.0737%2013.5607%2012.2525L16.7603%2015.4522C17.1216%2015.8134%2017.1216%2016.3991%2016.7603%2016.7603C16.3991%2017.1216%2015.8134%2017.1216%2015.4522%2016.7603L12.2525%2013.5607C11.0737%2014.4635%209.59952%2015%208%2015C4.13401%2015%201%2011.866%201%208C1%204.13401%204.13401%201%208%201ZM8%202.85C5.15573%202.85%202.85%205.15573%202.85%208C2.85%2010.8443%205.15573%2013.15%208%2013.15C10.8443%2013.15%2013.15%2010.8443%2013.15%208C13.15%205.15573%2010.8443%202.85%208%202.85ZM10.5%207.125C10.9832%207.125%2011.375%207.51675%2011.375%208C11.375%208.48325%2010.9832%208.875%2010.5%208.875H5.5C5.01675%208.875%204.625%208.48325%204.625%208C4.625%207.51675%205.01675%207.125%205.5%207.125H10.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

.gravity-icon-zoom-out.gravity-icon-lg {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.5C16.2467%201.5%2020.5%205.75329%2020.5%2011C20.5%2013.2451%2019.7212%2015.3083%2018.4191%2016.9341L22.7425%2021.2575C23.1525%2021.6676%2023.1525%2022.3324%2022.7425%2022.7425C22.3324%2023.1525%2021.6676%2023.1525%2021.2575%2022.7425L16.9341%2018.4191C15.3083%2019.7212%2013.2451%2020.5%2011%2020.5C5.75329%2020.5%201.5%2016.2467%201.5%2011C1.5%205.75329%205.75329%201.5%2011%201.5ZM11%203.6C6.91309%203.6%203.6%206.91309%203.6%2011C3.6%2015.0869%206.91309%2018.4%2011%2018.4C15.0869%2018.4%2018.4%2015.0869%2018.4%2011C18.4%206.91309%2015.0869%203.6%2011%203.6ZM15%2010C15.5523%2010%2016%2010.4477%2016%2011C16%2011.5523%2015.5523%2012%2015%2012H7C6.44772%2012%206%2011.5523%206%2011C6%2010.4477%206.44772%2010%207%2010H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%201.5C16.2467%201.5%2020.5%205.75329%2020.5%2011C20.5%2013.2451%2019.7212%2015.3083%2018.4191%2016.9341L22.7425%2021.2575C23.1525%2021.6676%2023.1525%2022.3324%2022.7425%2022.7425C22.3324%2023.1525%2021.6676%2023.1525%2021.2575%2022.7425L16.9341%2018.4191C15.3083%2019.7212%2013.2451%2020.5%2011%2020.5C5.75329%2020.5%201.5%2016.2467%201.5%2011C1.5%205.75329%205.75329%201.5%2011%201.5ZM11%203.6C6.91309%203.6%203.6%206.91309%203.6%2011C3.6%2015.0869%206.91309%2018.4%2011%2018.4C15.0869%2018.4%2018.4%2015.0869%2018.4%2011C18.4%206.91309%2015.0869%203.6%2011%203.6ZM15%2010C15.5523%2010%2016%2010.4477%2016%2011C16%2011.5523%2015.5523%2012%2015%2012H7C6.44772%2012%206%2011.5523%206%2011C6%2010.4477%206.44772%2010%207%2010H15Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* ========================================
 * icons/icon-variables.css
 * ======================================== */

/*
 * Gravity UI 2.0 Icon Variables
 * 
 * CSS Custom Properties for the icon system based on PDF Pages 6, 7, and 8
 * Provides consistent sizing, colors, and state management for all icons
 */

:root {
  /* ========================================
   * ICON SIZING TOKENS (From PDF Page 6)
   * ======================================== */
  
  /* Icon sizes matching the three provided sets */
  --gravity-icon-size-sm: 16px;      /* Small icons - limited set */
  --gravity-icon-size-md: 18px;      /* Medium icons - primary size */
  --gravity-icon-size-lg: 24px;      /* Large icons - secondary size */
  
  /* Icon sizing for specific contexts */
  --gravity-icon-size-button-sm: var(--gravity-icon-size-sm);
  --gravity-icon-size-button-md: var(--gravity-icon-size-md);
  --gravity-icon-size-button-lg: var(--gravity-icon-size-lg);
  
  /* ========================================
   * ICON COLOR TOKENS (From PDF Pages 7-8)
   * ======================================== */
  
  /* Base icon colors from PDF specifications */
  --gravity-icon-color-inactive: #6A7070;           /* Gray for inactive state */
  --gravity-icon-color-active: var(--gravity-brand-primary);  /* Teal for active state */
  --gravity-icon-color-disabled: var(--gravity-gray-400);     /* Light gray for disabled */
  --gravity-icon-color-hover: var(--gravity-color-primary-cyan);  /* Cyan for hover */
  --gravity-icon-color-focus: var(--gravity-brand-primary);   /* Teal for focus */
  --gravity-icon-color-pressed: var(--gravity-color-primary-navy);  /* Navy for pressed */
  
  /* Semantic icon colors */
  --gravity-icon-color-success: var(--gravity-state-success);
  --gravity-icon-color-warning: var(--gravity-state-warning);
  --gravity-icon-color-error: var(--gravity-state-error);
  --gravity-icon-color-info: var(--gravity-state-info);
  
  /* Icon colors for different backgrounds */
  --gravity-icon-color-on-light: var(--gravity-icon-color-inactive);
  --gravity-icon-color-on-dark: var(--gravity-color-white);
  --gravity-icon-color-on-primary: var(--gravity-color-white);
  --gravity-icon-color-on-secondary: var(--gravity-text-primary);
  
  /* ========================================
   * ICON STATE BACKGROUNDS (From PDF Pages 7-8)
   * ======================================== */
  
  /* Background colors for state indicators - matching PDF nested symbols */
  --gravity-icon-bg-inactive: transparent;
  --gravity-icon-bg-active-light: rgba(20, 164, 182, 0.1);    /* Light cyan background */
  --gravity-icon-bg-hover-light: rgba(20, 164, 182, 0.2);     /* Hover background */
  --gravity-icon-bg-focus-light: transparent;                  /* Focus uses border */
  --gravity-icon-bg-pressed-light: rgba(20, 164, 182, 0.3);   /* Pressed background */
  
  /* Dark theme backgrounds */
  --gravity-icon-bg-active-dark: rgba(255, 255, 255, 0.15);
  --gravity-icon-bg-hover-dark: rgba(0, 0, 0, 0.3);
  --gravity-icon-bg-pressed-dark: rgba(255, 255, 255, 0.2);
  
  /* ========================================
   * ICON SPACING AND LAYOUT
   * ======================================== */
  
  /* Spacing around icons in different contexts */
  --gravity-icon-margin-inline: 8px;     /* Horizontal spacing when inline with text */
  --gravity-icon-margin-stack: 8px;      /* Vertical spacing when stacked */
  --gravity-icon-padding-clickable: 8px; /* Padding for clickable icon containers */
  
  /* Icon container sizing for different contexts */
  --gravity-icon-container-sm: 32px;     /* Container for small icons */
  --gravity-icon-container-md: 36px;     /* Container for medium icons */
  --gravity-icon-container-lg: 48px;     /* Container for large icons */
  
  /* ========================================
   * ICON BORDER AND FOCUS STYLES
   * ======================================== */
  
  /* Focus ring styling for icons - matching PDF Page 7-8 */
  --gravity-icon-focus-ring-width: 2px;
  --gravity-icon-focus-ring-color: var(--gravity-brand-primary);
  --gravity-icon-focus-ring-offset: 2px;
  --gravity-icon-focus-ring-style: solid;
  
  /* Border radius for icon containers */
  --gravity-icon-border-radius: var(--gravity-radius-default);
  --gravity-icon-border-radius-circular: 50%;
  
  /* ========================================
   * ICON ANIMATION AND TRANSITIONS
   * ======================================== */
  
  /* Smooth transitions for icon state changes */
  --gravity-icon-transition-duration: var(--gravity-duration-fast);
  --gravity-icon-transition-easing: var(--gravity-ease-out);
  --gravity-icon-hover-transform: scale(1.05);    /* Subtle scale on hover */
  --gravity-icon-pressed-transform: scale(0.95);  /* Subtle scale when pressed */
  
  /* ========================================
   * ICON CATEGORIES (From PDF Page 6)
   * ======================================== */
  
  /* Icon categories for organization and documentation */
  --gravity-icon-category-navigation: "Navigation Icons";
  --gravity-icon-category-general: "General Icons";
  --gravity-icon-category-course: "Course Content Icons";
  --gravity-icon-category-assessment: "Assessment Icons";
  --gravity-icon-category-media: "Media Player Icons";
  --gravity-icon-category-editor: "Text Editor Icons";
}

/* ========================================
 * DARK THEME OVERRIDES
 * ======================================== */

[data-theme="dark"] {
  /* Adjust icon colors for dark theme */
  --gravity-icon-color-inactive: var(--gravity-color-gray-400);
  --gravity-icon-color-active: var(--gravity-color-primary-cyan);
  --gravity-icon-color-disabled: var(--gravity-color-gray-600);
  --gravity-icon-color-hover: var(--gravity-color-primary-teal);
  
  /* Dark theme background adjustments */
  --gravity-icon-bg-active-light: var(--gravity-icon-bg-active-dark);
  --gravity-icon-bg-hover-light: var(--gravity-icon-bg-hover-dark);
  --gravity-icon-bg-pressed-light: var(--gravity-icon-bg-pressed-dark);
}

/* ========================================
 * HIGH CONTRAST MODE SUPPORT
 * ======================================== */

@media (prefers-contrast: high) {
  :root {
    --gravity-icon-color-inactive: var(--gravity-text-primary);
    --gravity-icon-color-active: var(--gravity-brand-primary);
    --gravity-icon-focus-ring-width: 3px;
    --gravity-icon-hover-transform: scale(1.1);
  }
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --gravity-icon-transition-duration: 0ms;
    --gravity-icon-hover-transform: none;
    --gravity-icon-pressed-transform: none;
  }
}

/* ========================================
 * icons/icons.css
 * ======================================== */

/*
 * Gravity UI 2.0 Icon System
 * 
 * Complete icon implementation using CSS mask technique for dynamic color control
 * Based on PDF Pages 6, 7, and 8 specifications with 297 icons in 3 sizes
 * 
 * Features:
 * - CSS mask-based coloring for theme support
 * - State management (inactive, active, disabled, hover, focus, pressed)
 * - Accessibility compliance with ARIA support
 * - Dark mode and high contrast support
 * - Semantic naming matching PDF categories
 */

/* ================================
 * BASE ICON STYLES
 * ================================ */

.gravity-icon {
  /* Base icon display and sizing */
  display: inline-block;
  width: var(--gravity-icon-size-md);
  height: var(--gravity-icon-size-md);
  
  /* CSS mask technique for color control */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  
  /* Default color - inactive state */
  background-color: #333333;
  
  /* Improved vertical alignment */
  vertical-align: text-top;
  margin-top: 1px;
  
  /* Smooth transitions for state changes */
  transition: 
    background-color var(--gravity-icon-transition-duration) var(--gravity-icon-transition-easing),
    transform var(--gravity-icon-transition-duration) var(--gravity-icon-transition-easing);
  
  /* Prevent icon from being selected */
  user-select: none;
  pointer-events: none;
  
  /* Ensure crisp rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Clickable icon container */
.gravity-icon-clickable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--gravity-icon-border-radius);
  padding: var(--gravity-icon-padding-clickable);
  transition: background-color var(--gravity-icon-transition-duration);
  pointer-events: auto;
}

.gravity-icon-clickable .gravity-icon {
  pointer-events: none;
}

/* ================================
 * ICON SIZING VARIANTS
 * ================================ */

.gravity-icon-sm {
  width: var(--gravity-icon-size-sm);
  height: var(--gravity-icon-size-sm);
}

.gravity-icon-md {
  width: var(--gravity-icon-size-md);
  height: var(--gravity-icon-size-md);
}

.gravity-icon-lg {
  width: var(--gravity-icon-size-lg);
  height: var(--gravity-icon-size-lg);
}

/* ================================
 * ICON STATE VARIANTS (PDF Pages 7-8)
 * ================================ */

/* Active state - teal color */
.gravity-icon-active {
  background-color: var(--gravity-icon-color-active);
}

/* Disabled state - light gray */
.gravity-icon-disabled {
  background-color: var(--gravity-icon-color-disabled);
  opacity: 0.6;
}

/* Hover state - cyan color */
.gravity-icon-clickable:hover .gravity-icon,
.gravity-icon-hover {
  background-color: var(--gravity-icon-color-hover);
  transform: var(--gravity-icon-hover-transform);
}

/* Focus state - with ring */
.gravity-icon-clickable:focus {
  outline: var(--gravity-icon-focus-ring-width) var(--gravity-icon-focus-ring-style) var(--gravity-icon-focus-ring-color);
  outline-offset: var(--gravity-icon-focus-ring-offset);
}

.gravity-icon-clickable:focus .gravity-icon,
.gravity-icon-focus {
  background-color: var(--gravity-icon-color-focus);
}

/* Pressed state - navy color */
.gravity-icon-clickable:active .gravity-icon,
.gravity-icon-pressed {
  background-color: var(--gravity-icon-color-pressed);
  transform: var(--gravity-icon-pressed-transform);
}

/* ================================
 * SEMANTIC COLOR VARIANTS
 * ================================ */

.gravity-icon-success {
  background-color: var(--gravity-icon-color-success);
}

.gravity-icon-warning {
  background-color: var(--gravity-icon-color-warning);
}

.gravity-icon-error {
  background-color: var(--gravity-icon-color-error);
}

.gravity-icon-info {
  background-color: var(--gravity-icon-color-info);
}

/* ================================
 * BACKGROUND COLOR VARIANTS
 * ================================ */

.gravity-icon-on-light {
  background-color: var(--gravity-icon-color-on-light);
}

.gravity-icon-on-dark {
  background-color: var(--gravity-icon-color-on-dark);
}

.gravity-icon-on-primary {
  background-color: var(--gravity-icon-color-on-primary);
}

.gravity-icon-on-secondary {
  background-color: var(--gravity-icon-color-on-secondary);
}

/* ================================
 * ICON CONTAINER STYLES (PDF Pages 7-8)
 * ================================ */

/* Base icon container - provides flexbox centering */
.gravity-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--gravity-icon-transition-duration);
}

/* Circular container for state indicators */
.gravity-icon-container-circular {
  border-radius: var(--gravity-icon-border-radius-circular);
}

/* Rounded container variant */
.gravity-icon-container-rounded {
  border-radius: var(--gravity-radius-md, 6px);
}

/* Legacy standalone circular (for backwards compatibility) */
.gravity-icon-container-circular:not(.gravity-icon-container) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gravity-icon-bg-inactive);
  transition: background-color var(--gravity-icon-transition-duration);
}

.gravity-icon-container-circular.gravity-icon-active {
  background-color: var(--gravity-icon-bg-active-light);
}

.gravity-icon-container-circular:hover {
  background-color: var(--gravity-icon-bg-hover-light);
}

.gravity-icon-container-circular:active {
  background-color: var(--gravity-icon-bg-pressed-light);
}

/* Container sizing */
.gravity-icon-container-sm {
  width: var(--gravity-icon-container-sm);
  height: var(--gravity-icon-container-sm);
}

.gravity-icon-container-md {
  width: var(--gravity-icon-container-md);
  height: var(--gravity-icon-container-md);
}

.gravity-icon-container-lg {
  width: var(--gravity-icon-container-lg);
  height: var(--gravity-icon-container-lg);
}

/* ================================
 * ACCESSIBILITY ENHANCEMENTS
 * ================================ */

/* Screen reader only text for icons without labels */
.gravity-icon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .gravity-icon {
    filter: contrast(2);
  }
  
  .gravity-icon-clickable:focus {
    outline-width: var(--gravity-icon-focus-ring-width);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .gravity-icon,
  .gravity-icon-clickable {
    transition: none;
  }
}

/* ================================
 * ICON SPACING UTILITIES
 * ================================ */

/* Inline spacing - icon next to text */
.gravity-icon-inline-start {
  margin-right: var(--gravity-icon-margin-inline);
}

.gravity-icon-inline-end {
  margin-left: var(--gravity-icon-margin-inline);
}

/* Stack spacing - icon above/below content */
.gravity-icon-stack-top {
  margin-bottom: var(--gravity-icon-margin-stack);
}

.gravity-icon-stack-bottom {
  margin-top: var(--gravity-icon-margin-stack);
}

/* ================================
 * BUTTON INTEGRATION
 * ================================ */

/* Icons inside buttons */
.gravity-btn .gravity-icon {
  vertical-align: middle;
}

.gravity-btn .gravity-icon:first-child {
  margin-right: var(--gravity-space-2);
}

.gravity-btn .gravity-icon:last-child {
  margin-left: var(--gravity-space-2);
}

.gravity-btn .gravity-icon:only-child {
  margin: 0;
}

/* Icon-only buttons */
.gravity-btn-icon {
  min-width: auto;
  width: var(--gravity-button-height-md);
  height: var(--gravity-button-height-md);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gravity-btn-icon.gravity-btn-sm {
  width: var(--gravity-button-height-sm);
  height: var(--gravity-button-height-sm);
}

.gravity-btn-icon.gravity-btn-lg {
  width: var(--gravity-button-height-lg);
  height: var(--gravity-button-height-lg);
}

/* ================================
 * PRINT STYLES
 * ================================ */

@media print {
  .gravity-icon {
    background-color: black !important;
    print-color-adjust: exact;
  }
  
  .gravity-icon-clickable {
    background-color: transparent !important;
  }
}

/* ========================================
 * icons/index.css
 * ======================================== */

/*
 * Gravity UI 2.0 Icon System - Main Entry Point
 * 
 * Complete icon system based on PDF Pages 6, 7, and 8 specifications
 * Imports all necessary files for the icon system
 */

/* Import icon variables and design tokens */
/* Import base icon system styles */
/* Import all individual icon classes */