:root { /* Spacing scale (4px base) */ --space-0: 0rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Font sizes (modular scale) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; --text-10xl: 9rem; /* Border radius */ --radius-sm: 0.25rem; --radius: 0.5rem; /* Z-index */ --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --leading-normal: 1.5rem; --leading-xl: 1.75rem; --leading-2xl: 2rem; --leading-3xl: 2.25rem; --leading-4xl: 2.5rem; --leading-5xl: 1; --leading-6xl: 1; --leading-7xl: 1; --leading-8xl: 1; --leading-9xl: 1; --leading-10xl: 1; --leading-none: 0; /* default colors */ --page-bg: #FFFFFF ; /* Page background color */ --text-color: #000000; /* Text color */ --raiseThemes:rgba(255, 255, 255 , 0.7); /* Raised element color */ --raiseOpaque:rgba(255, 255, 255 , 0.9); /* Raised element color */ --raiseBackdrop:blur(20px); /* Raised element color */ --borderRgb: 204, 204, 204; /* i want to chnage the opacity for someplaces*/ --borderColor:rgb(var(--borderRgb)); /* Border color */ --lighter: #F1F1F1 ; --hoverable: #fcfcfc ; --muted: #78716c; --dark: #121212; --cardBg: var(--page-bg); --card: 8px 8px 10rem -2rem rgba(0, 0 , 0 , 0.1), /* soft shadow */ -8px -8px 4rem 0rem #F2F2F2; /* soft highlight */ --linkColor:rgb(58, 58, 58); /* Primary Colors */ --primary: #6366f1; --primary50: #eef2ff; --primary100: #e0e7ff; --primary200: #c7d2fe; --primary300: #a5b4fc; --primary400: #818cf8; --primary500: #6366f1; --primary600: #4f46e5; --primary700: #4338ca; --primary800: #3730a3; --primary900: #312e81; /* Secondary Colors */ --secondary: #ec4899; --secondary50: #fdf2f8; --secondary100: #fce7f3; --secondary200: #fbcfe8; --secondary300: #f9a8d4; --secondary400: #f472b6; --secondary500: #ec4899; --secondary600: #db2777; --secondary700: #be185d; --secondary800: #9d174d; --secondary900: #831843; /* Accent Colors */ --accent: #ffc300; --accent50: #ffc300; --accent50: #fff9e6; --accent100: #fff3cc; --accent200: #ffe999; --accent300: #ffdf66; --accent400: #ffd633; --accent500: #ffc300; /* Base */ --accent600: #e6af00; --accent700: #cc9c00; --accent800: #b38800; --accent900: #8f6e00; /* Error Colors */ --error: #ef4444; --error50: #fef2f2; --error100: #fee2e2; --error200: #fecaca; --error300: #fca5a5; --error400: #f87171; --error500: #ef4444; --error600: #dc2626; --error700: #b91c1c; --error800: #991b1b; --error900: #7f1d1d; /* Success Colors */ --success: #22c55e; --success50: #f0fdf4; --success100: #dcfce7; --success200: #bbf7d0; --success300: #86efac; --success400: #4ade80; --success500: #22c55e; --success600: #16a34a; --success700: #15803d; --success800: #166534; --success900: #14532d; /* Warning Colors */ --warning: #fb923c; --warning50: #fff7ed; --warning100: #ffedd5; --warning200: #fed7aa; --warning300: #fdba74; --warning400: #fb923c; --warning500: #f97316; --warning600: #ea580c; --warning700: #c2410c; --warning800: #9a3412; --warning900: #7c2d12; /* Info Colors */ --info: #0ea5e9; --info50: #f0f9ff; --info100: #e0f2fe; --info200: #bae6fd; --info300: #7dd3fc; --info400: #38bdf8; --info500: #0ea5e9; --info600: #0284c7; --info700: #0369a1; --info800: #075985; --info900: #0c4a6e; /* Singletons */ --white: #FFFFFF; --black: #000000; --lightText: #FFFFFF; --darkText: #27272a; --light: var(--lighter); --gradient:linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); --gradientColors:90deg, var(--secondary) 0%, var(--primary) 100%; --danger:var(--error); --bd-font-weight: 400; --bdfontSize: 1rem; --minifiedFontSize:0.88rem; --bd-line-height: normal; --smallFont: .79rem ; --smallerFont: .7rem; --navHeight: fit-content ; --borderWidth:0.1rem; --border: var(--borderWidth) solid var(--borderColor); --inputBorder:0.12rem; --input_outline_size:0.1rem; --borderRadius:1rem; --borderRadiusSmall:0.5rem; --borderRadiusMax:2rem; --radius:0.5rem; --hoverable: brightness(90%); --linkHover:(139, 185, 254;); --sideBarZindex:13; --navBarZindex:12; --modalZIndex:15; --loaderZindex:100; --snackBarZindex:20; --notificationZindex:29; --inputButtonHeight:2.7rem; --inputPadding:1rem; --inputRoundedPadding:0.5rem 1rem; --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1); --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3); --spacingScale:1rem; /* medium Screen body */ } :root { /* ===== Base Font Sizes ===== */ --font-size-smaller: 0.75rem; --font-size-small: 0.875rem; --font-size-base: 1rem; --font-size-h6: 1rem; --font-size-h5: 1.25rem; --font-size-h4: 1.5rem; --font-size-h3: 1.75rem; --font-size-h2: 2rem; --font-size-h1: 2.5rem; --font-size-big: 3rem; --font-size-bigger: 3.5rem; --font-size-jumbo: 4rem; /* ===== Text Scale (for utility classes) ===== */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; --text-10xl: 10rem; /* ===== Base Line Heights ===== */ --line-height-tight: 1.1; --line-height-snug: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.6; --line-height-loose: 1.8; /* Element-specific line heights */ --line-height-smaller: var(--line-height-loose); --line-height-small: var(--line-height-relaxed); --line-height-body: var(--line-height-normal); --line-height-big: var(--line-height-tight); --line-height-bigger: var(--line-height-tight); --line-height-h6: var(--line-height-normal); --line-height-h5: var(--line-height-normal); --line-height-h4: var(--line-height-normal); --line-height-h3: var(--line-height-snug); --line-height-h2: var(--line-height-snug); --line-height-h1: var(--line-height-tight); --line-height-jumbo: var(--line-height-tight); /* ===== Leading Scale (for utility classes) ===== */ --leading-xs: var(--line-height-loose); --leading-sm: var(--line-height-relaxed); --leading-base: var(--line-height-normal); --leading-lg: var(--line-height-normal); --leading-xl: var(--line-height-normal); --leading-2xl: var(--line-height-normal); --leading-3xl: var(--line-height-snug); --leading-4xl: var(--line-height-snug); --leading-5xl: var(--line-height-tight); --leading-6xl: var(--line-height-tight); --leading-7xl: var(--line-height-tight); --leading-8xl: var(--line-height-tight); --leading-9xl: 1; --leading-10xl: 1; /* ===== Responsive Scaling Factors ===== */ --scale-mobile: 1; --scale-tablet: 1.1; --scale-desktop: 1.2; --scale-large-desktop: 1.3; /* ===== Responsive Font Size Variables ===== */ /* Headings */ --font-size-h1-responsive: var(--font-size-h1); --font-size-h2-responsive: var(--font-size-h2); --font-size-h3-responsive: var(--font-size-h3); --font-size-h4-responsive: var(--font-size-h4); --font-size-h5-responsive: var(--font-size-h5); --font-size-h6-responsive: var(--font-size-h6); /* Special sizes */ --font-size-big-responsive: var(--font-size-big); --font-size-bigger-responsive: var(--font-size-bigger); --font-size-jumbo-responsive: var(--font-size-jumbo); /* Text utilities */ --text-xs-responsive: var(--text-xs); --text-sm-responsive: var(--text-sm); --text-base-responsive: var(--text-base); --text-lg-responsive: var(--text-lg); --text-xl-responsive: var(--text-xl); --text-2xl-responsive: var(--text-2xl); --text-3xl-responsive: var(--text-3xl); --text-4xl-responsive: var(--text-4xl); --text-5xl-responsive: var(--text-5xl); --text-6xl-responsive: var(--text-6xl); --text-7xl-responsive: var(--text-7xl); --text-8xl-responsive: var(--text-8xl); --text-9xl-responsive: var(--text-9xl); --text-10xl-responsive: var(--text-10xl); /* ===== Responsive Line Height Variables ===== */ /* Headings */ --line-height-h1-responsive: var(--line-height-h1); --line-height-h2-responsive: var(--line-height-h2); --line-height-h3-responsive: var(--line-height-h3); --line-height-h4-responsive: var(--line-height-h4); --line-height-h5-responsive: var(--line-height-h5); --line-height-h6-responsive: var(--line-height-h6); /* Special sizes */ --line-height-big-responsive: var(--line-height-big); --line-height-bigger-responsive: var(--line-height-bigger); --line-height-jumbo-responsive: var(--line-height-jumbo); /* Text utilities */ --leading-xs-responsive: var(--leading-xs); --leading-sm-responsive: var(--leading-sm); --leading-base-responsive: var(--leading-base); --leading-lg-responsive: var(--leading-lg); --leading-xl-responsive: var(--leading-xl); --leading-2xl-responsive: var(--leading-2xl); --leading-3xl-responsive: var(--leading-3xl); --leading-4xl-responsive: var(--leading-4xl); --leading-5xl-responsive: var(--leading-5xl); --leading-6xl-responsive: var(--leading-6xl); --leading-7xl-responsive: var(--leading-7xl); --leading-8xl-responsive: var(--leading-8xl); --leading-9xl-responsive: var(--leading-9xl); --leading-10xl-responsive: var(--leading-10xl); /* ===== Font Weights ===== */ --font-weight-thin: 100; --font-weight-extra-light: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; /* Element-specific font weights */ --font-weight-smaller: var(--font-weight-normal); --font-weight-small: var(--font-weight-normal); --font-weight-body: var(--font-weight-normal); --font-weight-big: var(--font-weight-bold); --font-weight-bigger: var(--font-weight-bold); --font-weight-h6: var(--font-weight-medium); --font-weight-h5: var(--font-weight-medium); --font-weight-h4: var(--font-weight-medium); --font-weight-h3: var(--font-weight-semibold); --font-weight-h2: var(--font-weight-semibold); --font-weight-h1: var(--font-weight-bold); --font-weight-jumbo: var(--font-weight-black); /* ===== Text Decoration ===== */ --text-decoration-none: none; --text-decoration-underline: underline; --text-decoration-overline: overline; --text-decoration-line-through: line-through; /* Element-specific text decoration */ --text-decoration-smaller: var(--text-decoration-none); --text-decoration-small: var(--text-decoration-none); --text-decoration-body: var(--text-decoration-none); --text-decoration-big: var(--text-decoration-none); --text-decoration-bigger: var(--text-decoration-none); --text-decoration-h6: var(--text-decoration-none); --text-decoration-h5: var(--text-decoration-none); --text-decoration-h4: var(--text-decoration-none); --text-decoration-h3: var(--text-decoration-none); --text-decoration-h2: var(--text-decoration-none); --text-decoration-h1: var(--text-decoration-none); --text-decoration-jumbo: var(--text-decoration-none); /* ===== Font Style ===== */ --font-style-normal: normal; --font-style-italic: italic; --font-style-oblique: oblique; /* Element-specific font styles */ --font-style-smaller: var(--font-style-normal); --font-style-small: var(--font-style-normal); --font-style-body: var(--font-style-normal); --font-style-big: var(--font-style-normal); --font-style-bigger: var(--font-style-normal); --font-style-h6: var(--font-style-normal); --font-style-h5: var(--font-style-normal); --font-style-h4: var(--font-style-normal); --font-style-h3: var(--font-style-normal); --font-style-h2: var(--font-style-normal); --font-style-h1: var(--font-style-normal); --font-style-jumbo: var(--font-style-normal); /* ===== Text Transform ===== */ --text-transform-none: none; --text-transform-uppercase: uppercase; --text-transform-lowercase: lowercase; --text-transform-capitalize: capitalize; /* Element-specific text transforms */ --text-transform-smaller: var(--text-transform-none); --text-transform-small: var(--text-transform-none); --text-transform-body: var(--text-transform-none); --text-transform-big: var(--text-transform-none); --text-transform-bigger: var(--text-transform-none); --text-transform-h6: var(--text-transform-none); --text-transform-h5: var(--text-transform-none); --text-transform-h4: var(--text-transform-none); --text-transform-h3: var(--text-transform-none); --text-transform-h2: var(--text-transform-none); --text-transform-h1: var(--text-transform-none); --text-transform-jumbo: var(--text-transform-none); /* ===== Letter Spacing ===== */ --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* Element-specific letter spacing */ --letter-spacing-smaller: var(--letter-spacing-normal); --letter-spacing-small: var(--letter-spacing-normal); --letter-spacing-body: var(--letter-spacing-normal); --letter-spacing-big: var(--letter-spacing-tight); --letter-spacing-bigger: var(--letter-spacing-tight); --letter-spacing-h6: var(--letter-spacing-normal); --letter-spacing-h5: var(--letter-spacing-normal); --letter-spacing-h4: var(--letter-spacing-normal); --letter-spacing-h3: var(--letter-spacing-normal); --letter-spacing-h2: var(--letter-spacing-tight); --letter-spacing-h1: var(--letter-spacing-tight); --letter-spacing-jumbo: var(--letter-spacing-tighter); } /* Tablet and above */ @media (min-width: 768px) { :root { /* Responsive font sizes */ --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-tablet)); --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-tablet)); --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-tablet)); --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-tablet)); --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-tablet)); --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-tablet)); --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-tablet)); --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-tablet)); --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-tablet)); /* Text utilities */ --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-tablet)); --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-tablet)); --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-tablet)); --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-tablet)); --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-tablet)); --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-tablet)); --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-tablet)); --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-tablet)); /* Responsive line heights - tighter for larger screens */ --line-height-h1-responsive: calc(var(--line-height-h1) - 0.1); --line-height-h2-responsive: calc(var(--line-height-h2) - 0.05); --line-height-h3-responsive: calc(var(--line-height-h3) - 0.05); --line-height-big-responsive: calc(var(--line-height-big) - 0.1); --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.1); --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.1); --leading-4xl-responsive: calc(var(--leading-4xl) - 0.1); --leading-5xl-responsive: calc(var(--leading-5xl) - 0.1); --leading-6xl-responsive: calc(var(--leading-6xl) - 0.1); --leading-7xl-responsive: calc(var(--leading-7xl) - 0.1); --leading-8xl-responsive: calc(var(--leading-8xl) - 0.1); --leading-9xl-responsive: 0.9; --leading-10xl-responsive: 0.9; } } /* Desktop and above */ @media (min-width: 1024px) { :root { /* Responsive font sizes */ --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-desktop)); --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-desktop)); --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-desktop)); --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-desktop)); --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-desktop)); --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-desktop)); --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-desktop)); --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-desktop)); --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-desktop)); /* Text utilities */ --text-2xl-responsive: calc(var(--text-2xl) * var(--scale-desktop)); --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-desktop)); --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-desktop)); --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-desktop)); --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-desktop)); --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-desktop)); --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-desktop)); --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-desktop)); --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-desktop)); /* Responsive line heights - even tighter for desktop */ --line-height-h1-responsive: calc(var(--line-height-h1) - 0.15); --line-height-h2-responsive: calc(var(--line-height-h2) - 0.1); --line-height-h3-responsive: calc(var(--line-height-h3) - 0.1); --line-height-big-responsive: calc(var(--line-height-big) - 0.15); --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.15); --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.15); --leading-3xl-responsive: calc(var(--leading-3xl) - 0.05); --leading-4xl-responsive: calc(var(--leading-4xl) - 0.15); --leading-5xl-responsive: calc(var(--leading-5xl) - 0.15); --leading-6xl-responsive: calc(var(--leading-6xl) - 0.15); --leading-7xl-responsive: calc(var(--leading-7xl) - 0.15); --leading-8xl-responsive: calc(var(--leading-8xl) - 0.15); --leading-9xl-responsive: 0.85; --leading-10xl-responsive: 0.85; } } /* Large desktop */ @media (min-width: 1440px) { :root { /* Responsive font sizes */ --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-large-desktop)); --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-large-desktop)); --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-large-desktop)); --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-large-desktop)); --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-large-desktop)); --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-large-desktop)); /* Text utilities */ --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-large-desktop)); --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-large-desktop)); --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-large-desktop)); --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-large-desktop)); --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-large-desktop)); --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-large-desktop)); /* Responsive line heights - tightest for large desktop */ --line-height-h1-responsive: calc(var(--line-height-h1) - 0.2); --line-height-h2-responsive: calc(var(--line-height-h2) - 0.15); --line-height-big-responsive: calc(var(--line-height-big) - 0.2); --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.2); --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.2); --leading-5xl-responsive: calc(var(--leading-5xl) - 0.2); --leading-6xl-responsive: calc(var(--leading-6xl) - 0.2); --leading-7xl-responsive: calc(var(--leading-7xl) - 0.2); --leading-8xl-responsive: calc(var(--leading-8xl) - 0.2); --leading-9xl-responsive: 0.8; --leading-10xl-responsive: 0.8; } } /* Mobile adjustments for very large fonts */ @media (max-width: 480px) { :root { /* Reduce huge fonts slightly for mobile */ --font-size-big-responsive: calc(var(--font-size-big) * 0.8); --font-size-bigger-responsive: calc(var(--font-size-bigger) * 0.8); --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * 0.8); --text-8xl-responsive: calc(var(--text-8xl) * 0.8); --text-9xl-responsive: calc(var(--text-9xl) * 0.8); --text-10xl-responsive: calc(var(--text-10xl) * 0.8); /* Slightly increase line heights for mobile readability */ --line-height-big-responsive: calc(var(--line-height-big) + 0.1); --line-height-bigger-responsive: calc(var(--line-height-bigger) + 0.1); --line-height-jumbo-responsive: calc(var(--line-height-jumbo) + 0.1); } } /* ===== APPLY RESPONSIVE VARIABLES TO ELEMENTS ===== */ /* Font utilities with matching line heights */ .text-xs { font-size: var(--text-xs-responsive) !important; line-height: var(--leading-xs-responsive); } .text-sm { font-size: var(--text-sm-responsive) !important; line-height: var(--leading-sm-responsive); } .text-base { font-size: var(--text-base-responsive) !important; line-height: var(--leading-base-responsive); } .text-lg { font-size: var(--text-lg-responsive) !important; line-height: var(--leading-lg-responsive); } .text-xl { font-size: var(--text-xl-responsive) !important; line-height: var(--leading-xl-responsive); font-weight: 400; } .text-2xl { font-size: var(--text-2xl-responsive) !important; line-height: var(--leading-2xl-responsive); font-weight: 500; } .text-3xl { font-size: var(--text-3xl-responsive) !important; line-height: var(--leading-3xl-responsive); font-weight: 500; } .text-4xl { font-size: var(--text-4xl-responsive) !important; line-height: var(--leading-4xl-responsive); font-weight: 600; } .text-5xl { font-size: var(--text-5xl-responsive) !important; line-height: var(--leading-5xl-responsive); font-weight: 600; } .text-6xl { font-size: var(--text-6xl-responsive) !important; line-height: var(--leading-6xl-responsive); font-weight: 600; } .text-7xl { font-size: var(--text-7xl-responsive) !important; line-height: var(--leading-7xl-responsive); font-weight: 600; } .text-8xl { font-size: var(--text-8xl-responsive) !important; line-height: var(--leading-8xl-responsive); font-weight: 800; } .text-9xl { font-size: var(--text-9xl-responsive) !important; line-height: var(--leading-9xl-responsive); font-weight: 900; } .text-10xl { font-size: var(--text-10xl-responsive) !important; line-height: var(--leading-10xl-responsive); font-weight: 900; } .text-big { font-size: var(--font-size-big-responsive) !important; line-height: var(--line-height-big-responsive); font-weight: var(--font-weight-big); font-style: var(--font-style-big); text-decoration: var(--text-decoration-big); text-transform: var(--text-transform-big); letter-spacing: var(--letter-spacing-big); } .text-bigger { font-size: var(--font-size-bigger-responsive) !important; line-height: var(--line-height-bigger-responsive); font-weight: var(--font-weight-bigger); font-style: var(--font-style-bigger); text-decoration: var(--text-decoration-bigger); text-transform: var(--text-transform-bigger); letter-spacing: var(--letter-spacing-bigger); } .text-jumbo { font-size: var(--font-size-jumbo-responsive) !important; line-height: var(--line-height-jumbo-responsive); font-weight: var(--font-weight-jumbo); font-style: var(--font-style-jumbo); text-decoration: var(--text-decoration-jumbo); text-transform: var(--text-transform-jumbo); letter-spacing: var(--letter-spacing-jumbo); } .important{ font-weight: 700; color: var(--primary); } /* Mini sizes */ .text-small { font-size: var(--font-size-small) !important; line-height: var(--line-height-small); font-weight: var(--font-weight-small); font-style: var(--font-style-small); text-decoration: var(--text-decoration-small); text-transform: var(--text-transform-small); letter-spacing: var(--letter-spacing-small); } .text-smaller { font-size: var(--font-size-smaller) !important; line-height: var(--line-height-smaller); font-weight: var(--font-weight-smaller); font-style: var(--font-style-smaller); text-decoration: var(--text-decoration-smaller); text-transform: var(--text-transform-smaller); letter-spacing: var(--letter-spacing-smaller); } /* Headings */ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.3rem; line-height: var(--line-height-h1-responsive); /* Fallback */ font-weight: normal; } h1, .h1 { font-size: var(--font-size-h1-responsive) !important; line-height: var(--line-height-h1-responsive); font-weight: var(--font-weight-h1); font-style: var(--font-style-h1); text-decoration: var(--text-decoration-h1); text-transform: var(--text-transform-h1); letter-spacing: var(--letter-spacing-h1); } h2, .h2 { font-size: var(--font-size-h2-responsive) !important; line-height: var(--line-height-h2-responsive); font-weight: var(--font-weight-h2); font-style: var(--font-style-h2); text-decoration: var(--text-decoration-h2); text-transform: var(--text-transform-h2); letter-spacing: var(--letter-spacing-h2); } h3, .h3 { font-size: var(--font-size-h3-responsive) !important; line-height: var(--line-height-h3-responsive); font-weight: var(--font-weight-h3); font-style: var(--font-style-h3); text-decoration: var(--text-decoration-h3); text-transform: var(--text-transform-h3); letter-spacing: var(--letter-spacing-h3); } h4, .h4 { font-size: var(--font-size-h4-responsive) !important; line-height: var(--line-height-h4-responsive); font-weight: var(--font-weight-h4); font-style: var(--font-style-h4); text-decoration: var(--text-decoration-h4); text-transform: var(--text-transform-h4); letter-spacing: var(--letter-spacing-h4); } h5, .h5 { font-size: var(--font-size-h5-responsive) !important; line-height: var(--line-height-h5-responsive); font-weight: var(--font-weight-h5); font-style: var(--font-style-h5); text-decoration: var(--text-decoration-h5); text-transform: var(--text-transform-h5); letter-spacing: var(--letter-spacing-h5); } h6, .h6 { font-size: var(--font-size-h6-responsive) !important; line-height: var(--line-height-h6-responsive); font-weight: var(--font-weight-h6); font-style: var(--font-style-h6); text-decoration: var(--text-decoration-h6); text-transform: var(--text-transform-h6); letter-spacing: var(--letter-spacing-h6); } *{ font-family: var(--font-font); scroll-behavior: smooth; transition: 0.3s ease-in-out all !important; } .card, .input, .navigation-bar , .modal , .modal-content, .button, .text, .div, .table, .table-head, .table-body, .table-row, .table-cell, .list, .list-item, .breadcrumb, .breadcrumb-link, .breadcrumb-item, .loader, .grid, .col, .container, .step-container, .step, .step-header, .step-line, .dropdown, .dropdown-menu, .dropdown-item, .accordion, .accordion-header, .accordion-content, .progress-bar{ color: var(--text-color) ; } *, *::before, *::after { box-sizing: border-box !important; } body { padding: 0px; margin: 0px; font-size: var(--text-base); font-weight: var(--bd-font-weight) !important; line-height: var(--leading-normal) !important; letter-spacing: normal; background-color: var(--page-bg) !important; color: var(--text-color) !important; } /* Background Color */ .pop{ background: var(--lighter) !important; } input:disabled, select:disabled, button:disabled { background-color: var(--muted) !important; color: var(--white) !important; cursor: not-allowed; opacity: 0.6 !important; } /* Typography */ .baseColor, .text-base{ color: var(--text-color) !important;} .bg, .page-bg{ background-color: var(--page-bg) !important; } .theme{ background-color: var(--bd-theme); } .raiseTheme{ background-color: var(--raiseThemes) !important; } /* links and href */ a, Link { text-decoration: none; background: transparent; transition: 0.3s; color: var(--linkColor); } a:hover { color: var(--primary); } button { -webkit-appearance: button; } link { text-decoration: none; } link:hover { text-decoration: none; } /*buttons*/ .button { border: none; padding:0.7rem 1rem; background-color: inherit; border-radius: var(--radius); transition: all 0.5s linear; cursor: pointer; font-size: var(--minifiedFontSize); position: relative; overflow: visible; z-index: 1; line-height: 1 !important; height: var(--inputButtonHeight); } /* Ripple effect */ .button::after { content: ''; position: absolute; border-radius: var(--radius); transform: scale(0); background: rgba(255, 255, 255, 0.1); /* dark ripple with opacity */ width: 100%; height: 100%; top: 0; left: 0; opacity: 0; pointer-events: none; transition: transform 0.1s ease, opacity 1s ease; } .button:active::after { transform: scale(1); opacity: 1; transition: 0s; } .button-fill { background-color: transparent; position: relative; transition: 0.3s; overflow: hidden !important; } .button_fill_span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; transition: 0.3s; border-radius: 0.5rem; } .fill-left .button_fill_span{ transform: scaleX(0); transform-origin: left; } .fill-right .button_fill_span { transform: scaleX(0); transform-origin: right; } .fill-top .button_fill_span { transform: scaleY(0); transform-origin: top; } .fill-bottom .button_fill_span{ transform: scaleY(0); transform-origin: bottom; } .button-fill:hover .button_fill_span { transform: scale(1, 1); } .raisedBtn , .raised{ box-shadow: var(--raised); } .button.iconic{ display: inline-flex; gap: 0.5rem; align-items: center !important; justify-content: center; } .button:hover { cursor: pointer; filter: brightness(90%); } .button.hoverless:hover{ filter: none !important; } .block-button { width: 100%; } .floatBtn { border-radius: 50%; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0; } .floatBtn > *{margin: 0;} .button.full-width,.fullwidth { width: 100%; } .roundBtn { border-radius: 100rem; } .button.outlined { background-color: transparent; } .button.outlined:hover { filter: var(--hoverable); } .button.smallBtn { padding: 0.5rem 0.6rem !important; font-size: var(--smallerFont) ; height: fit-content !important; border-radius: calc(var(--radius) / 1.5); } .smallBtn.roundBtn{ padding: 0.3rem 0.8rem !important; } .smallBtn.iconic , .smallerBtn.iconic{gap: 0.3rem;} .button.smallerBtn{ padding: 0.2rem 0.6rem !important; font-size: var(--smallerFont) ; } .smallerBtn.roundBtn{ padding: 0.2rem 0.7rem !important; } .button.bigBtn { padding: 1.2rem 1.8rem; font-size: var(--text-xl); height: calc(var(--inputButtonHeight) * 1.4) !important; border-radius: calc( var(--radius) * 1.4) !important; } .button.biggerBtn { padding: 1.2rem 1.8rem; font-size: var(--text-2xl); height: calc(var(--inputButtonHeight) * 1.5) !important; border-radius: calc( var(--radius) * 1.5) !important; } .button.jumboBtn { padding: 2rem 2.5rem; font-size: var(--text-4xl); height: calc(var(--inputButtonHeight) * 1.7) !important; border-radius: calc( var(--radius) * 1.6) !important; } .button.flat{border-radius: none !important;} .button.hoverNone:hover{background-color: initial !important;} /*cards*/ .card { background: var(--cardBg); box-shadow: var(--card); transition: 0.3s; backdrop-filter: var(--raiseBackdrop) ; color: var(--text-color); border-radius: var(--borderRadius); } .card.xl{ box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important; } .shadowless{ box-shadow: none !important; } .card_flex{ display: flex; flex-direction:column; gap: 1rem; } .card.no-gap{gap: 0;} .card.lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); } .card-image { width: 100%; height: auto; } .card-fab { position: absolute; bottom: 0; transform: translateY(40%); } .card-fab.right { right: 10px; } .card-fab.left { left: 10px; } .card.horizontalCard { display: flex; flex-direction: row; justify-content: flex-start; overflow: hidden; align-items: center; } .card.horizontalCard .leftHorizontal { display: flex; flex-direction: column; height: 100%; flex-grow: 1; flex-basis: 0; } .card.horizontalCard .rightHorizontal { display: flex; flex-direction: column; height: 100%; flex-grow: 1; flex-basis: 0; } .leftHorizontal, .rightHorizontal .card-image { height: 100% !important; width: auto; max-width: 100%; } .pointer { cursor: pointer; } .zoom-in { cursor: zoom-in; } .zoom-out { cursor: zoom-out; } /* Video Component Styles */ .video_player { border-radius: 1rem; width: 100%; cursor: pointer; } .video_container { position: relative; width: fit-content; height: fit-content; padding: 0; border-radius: 1rem; color: var(--text-color); cursor: pointer; transition: all 0.3s ease; } .video_controls { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem 1rem 1rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 1rem; transition: all 0.3s ease; opacity: 1; transform: translateY(0); } .video_controls.hide_controls { opacity: 0; transform: translateY(10px); pointer-events: none; } .video_controls.show_controls { opacity: 1; transform: translateY(0); pointer-events: all; } .video_poster { position: absolute; top: 0; width: 100%; height: 100%; border-radius: 1rem; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; cursor: pointer; z-index: 1; } /* Beautiful Progress Bar */ .progress-container { width: 100%; } .progress-wrapper { position: relative; width: 100%; } .video-progress { -webkit-appearance: none; appearance: none; width: 100%; padding: 0 !important; height: 8px !important; border-radius: 10px; background: linear-gradient( to right, var(--primary) 0%, var(--primary) var(--progress-percent), rgba(255, 255, 255, 0.3) var(--progress-percent), rgba(255, 255, 255, 0.3) 100% ); outline: none; cursor: pointer; transition: all 0.3s ease; position: relative; } .video-progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; /* opacity: 0 !important; */ width: 16px; height: 16px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; opacity: 0; } .video-progress:hover::-webkit-slider-thumb { opacity: 1; transform: scale(1.1); } .video-progress::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; opacity: 0; } .video-progress:hover::-moz-range-thumb { opacity: 1; transform: scale(1.1); } /* Beautiful Volume Control */ .volume-control-wrapper { display: flex; align-items: center; gap: 8px; position: relative; } .volume-slider-wrapper { width: 80px; padding: 8px 0; } .volume-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 15px !important; padding: 0 !important; border-radius: 10px; background: linear-gradient( to right, var(--primary) 0%, var(--primary) var(--volume-percent), rgba(255, 255, 255, 0.3) var(--volume-percent), rgba(255, 255, 255, 0.3) 100% ); outline: none; cursor: pointer; transition: all 0.3s ease; } .volume-slider:hover { height: 6px; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; opacity: 0 !important; height: 14px; border-radius: 50%; background: var(--primary); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } .volume-slider:hover::-webkit-slider-thumb { opacity: 1; transform: scale(1.1); } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid white; transition: all 0.2s ease; opacity: 0; } .volume-slider:hover::-moz-range-thumb { opacity: 1; transform: scale(1.1); } /* Control buttons hover effects */ .video_container .circle { transition: all 0.2s ease; } .videoProgressContainer, .videoRightContainer, .videoLeftContainer{ background-color: var(--dark); height: 30px !important; display: flex; align-items: center !important; align-content: center !important; justify-content: center !important; line-height: 0rem; color: var(--white) !important; border-radius: 0.5rem; padding: 0 0.5rem; } .video_container .circle:hover { background-color: var(--primary) !important; color: var(--white) !important; transform: scale(1.1); } /* Responsive design */ @media (max-width: 768px) { .video_controls { padding: 1rem 0.5rem 0.5rem; } .video_time { padding: 0.25rem 0.75rem; font-size: 0.75rem; } .controls-row { gap: 0.5rem !important; } .volume-slider-wrapper { width: 60px; } } /* Fullscreen adjustments */ .video_container:fullscreen { width: 100vw; height: 100vh; border-radius: 0; } .video_container:fullscreen .video_player { border-radius: 0; } .video_container:fullscreen .video_controls { border-radius: 0; padding: 2rem 1.5rem 1rem; } .navigation-bar { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0.5rem 5%; gap: 2rem; backdrop-filter: blur(0.2rem); transition: all 0.3s ease; max-height: 100vh; overflow-y: auto; } .linkWrapper { display: none; } .sidebar-trigger { display: block; cursor: pointer; } /* AppBar Dropdown Styles */ .nav_item { position: relative; } .nav_item.has-dropdown .nav_link { cursor: pointer; } .nav_link-arrow { transition: transform 0.3s ease; margin-left: 0.25rem; } .nav_item.dropdown-open .nav_link-arrow { transform: rotate(180deg); } /* Dropdown Menu */ .nav_dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--page-bg); border: var(--border); border-radius: 0.5rem; box-shadow: var(--card); min-width: 200px; z-index: 1000; opacity: 0; transform: translateY(-10px); font-size: var(--minifiedFontSize); visibility: hidden; transition: all 0.3s ease; } .nav_item.dropdown-open .nav_dropdown-menu { opacity: 1; transform: translateY(0); visibility: visible; } /* Dropdown Links */ .nav_dropdown-menu .nav_item { border-bottom: var(--border); } .nav_dropdown-menu .nav_item:last-child { border-bottom: none; } .nav_dropdown-menu .nav_link { display: block; text-decoration: none; transition: all 0.2s ease; border-radius: 0; } .nav_dropdown-menu .nav_link:hover { background: var(--lighter); color: var(--primary) !important; } .nav_dropdown-menu .nav_link.active { background: var(--primary100); color: var(--primary); font-weight: 500; } /* Nested Dropdowns */ .nav_dropdown-menu .nav_dropdown-menu { top: 0; left: 100%; margin-left: 0.25rem; } .nav_dropdown-menu .nav_item.has-dropdown .nav_link { display: flex; justify-content: space-between; align-items: center; } /* Mobile Dropdown Styles */ .nav_dropdown-mobile { position: static !important; box-shadow: none !important; border: none !important; background: var(--raiseOpaque) !important; margin-left: 1rem; margin-top: 0.5rem; opacity: 1 !important; transform: none !important; visibility: visible !important; max-height: 0; overflow: hidden; transition: 0.3s ease; } .nav_item.dropdown-open .nav_dropdown-mobile { max-height: 500px; } .nav_mobile-menu .nav_links { align-items: flex-start !important; } .nav_mobile-menu .nav_item { width: 100%; } .nav_mobile-menu .nav_link { width: 100%; justify-content: space-between; padding: 1rem !important; border-bottom: var(--border); } /* Active Link Styles */ .nav_link.active { color: var(--primary) !important; font-weight: 500; } /* Hover Effects */ .nav_link:hover { color: var(--primary) !important; } /* Icon Styles */ .nav_link-icon { display: flex; align-items: center; transition: transform 0.2s ease; } .nav_link:hover .nav_link-icon.prefix { transform: translateX(-2px); } .nav_link:hover .nav_link-icon.suffix { transform: translateX(2px); } /* Smooth Transitions */ .nav_link, .nav_link-content, .nav_dropdown-menu { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Focus States */ .nav_link:focus { outline-offset: 2px; } /* Mobile layout when menu is open */ .navbar-mobile-open { flex-direction: column; height: 100vh; } .navbar-mobile-open .linkWrapper { display: flex !important; flex-direction: column; gap: 1rem; } .logoWrapper{ display: flex; flex-direction: row; align-items: center; justify-content:space-between ; width: 100%; gap: 0.5rem;} ._closeNav{display: block;} /* Desktop layout */ @media screen and (min-width: 992px) { .navigation-bar { flex-direction: row; height: var(--navHeight) !important; justify-content: space-between !important; overflow-y: visible !important; } .linkWrapper { display: flex !important; flex-direction: row; gap: 1rem; } .sidebar-trigger { display: none; } ._closeNav{display: none !important;} .logoWrapper{display: block; width:fit-content !important;} } /* Show links vertically when toggled on mobile */ .navbar-links-visible { display: flex !important; flex-direction: column; gap: 0.5rem; } .fixed_top_navbar , .fixedTop { position: fixed; top: 0; width: 100%; left: 0; z-index: var(--navBarZindex); background-color: var(--raiseThemes) ; backdrop-filter: var(--raiseBackdrop) ; } .navigation-bar.transparent{ backdrop-filter: none !important ;} .navhamburger { width: 32px; height: 24px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; } .navline { height: 2px; background-color: var(--text-color); border-radius: 4rem !important; width: 100%; } /* Middle line shorter and centered */ .navmiddle { width: 60%; align-self: flex-start; background-color: var(--primary600); } .navbottom{ width: 90%; align-self: flex-start; } /* Animate open state */ .navopen .navtop { animation: topLineOpen 0.5s forwards; } .navopen .navmiddle { animation: middleLineOpen 0.5s forwards; } .navopen .navbottom { animation: bottomLineOpen 0.5s forwards; } /* Animate close state (optional for toggle) */ .navhamburger:not(.navopen) .navtop { animation: topLineClose 0.5s forwards; } .navhamburger:not(.navopen) .navmiddle { animation: middleLineClose 0.5s forwards; } .navhamburger:not(.navopen) .navbottom { animation: bottomLineClose 0.5s forwards; } /* KEYFRAMES */ @keyframes topLineOpen { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(10px) rotate(45deg); background-color: var(--error); width: 100% !important; } } @keyframes middleLineOpen { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes bottomLineOpen { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-10px) rotate(-45deg); background-color: var(--error); width: 100% !important; } } /* Reverse animations (optional) */ @keyframes topLineClose { 0% { transform: translateY(10px) rotate(45deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes middleLineClose { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bottomLineClose { 0% { transform: translateY(-10px) rotate(-45deg); } 100% { transform: translateY(0) rotate(0deg); } } .sidebar-container { display: flex; width: 100%; height: 100vh; position: relative; } .sidebar { background-color: var(--raiseThemes) !important; backdrop-filter: var(--raiseBackdrop) !important; padding: 1rem; z-index: 5; position: fixed; transition: all 0.3s; overflow-x: hidden !important; } @keyframes SlideDownBar { from { opacity: 0; } to { opacity: 1; } } .sidebar:hover{overflow-y: auto;} .nav_overlay { display: flex; flex-direction: column; align-items: center !important; justify-content: flex-start !important; } .sidebar.left { order: 0; } .sidebar.right { order: 2; } .main-content { flex: 1; overflow-y: auto; } .sidebar-link { text-align: left !important; justify-content: flex-start !important; text-decoration: none; } /* Responsive Fixes */ @media (max-width: 992px) { .with-content .main-content { margin: 0 !important; } .sidebar-container.with-content { display: block; } } /* Alerts */ .alert { position: relative; display: flex; flex-direction: row; align-items: center !important; padding: 0.4rem 1rem; border-radius: var(--radius); gap: 0.3rem; font-size: var(--minifiedFontSize) ; width: fit-content; height: fit-content; min-height: 2rem; font-weight: 500; } .alert.top-success{ border-top: 0.2rem solid var(--success); background-color: var(--raiseThemes); backdrop-filter: var(--raiseBackdrop) ; } .alert.top-warning{ border-top: 0.2rem solid var(--warning); background-color: var(--raiseThemes); backdrop-filter: var(--raiseBackdrop) ; } .alert.top-info{ border-top: 0.2rem solid var(--info); background-color: var(--raiseThemes); backdrop-filter: var(--raiseBackdrop) ; } .alert.top-error{ border-top: 0.2rem solid var(--error); background-color: var(--raiseThemes); backdrop-filter: var(--raiseBackdrop) ; } .alert-container > .alert{ box-shadow: var(--card); background: var(--cardBg); } .alert-container { position: fixed; z-index: var(--snackBarZindex); width: 100%; height: 100%; top: 0; left: 0; display: flex; padding: 2rem; backdrop-filter: blur(0.3rem); } .alert-container.top-middle{ justify-content: center; } .alert-container.bottom-middle{ align-items: flex-end; justify-content: center; } .alert-container.top-right{ justify-content: flex-end; } .alert-container.top-left{ justify-content: flex-start; } .alert-container.bottom-right{ align-items: flex-end; justify-content: flex-end; } .alert-container.bottom-left{ align-items: flex-end; justify-content: flex-start; } .alert-container.middle-alert{ align-items: center; justify-content: center; } /*border radius and borders*/ .round, .circle { border-radius: 50%; } .round-edge, .roundEdge { border-radius: var(--borderRadius) !important; } .roundEdgeSmall{ border-radius: var(--borderRadiusSmall) !important; } .roundEdgeMax{ border-radius: var(--borderRadiusMax) !important; } .leftEdge{ border-top-right-radius: 0 ; border-bottom-right-radius: 0; border-top-left-radius: var(--borderRadius); border-bottom-left-radius: var(--borderRadius); } .rightEdge{ border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius:var(--borderRadius); border-bottom-right-radius: var(--borderRadius); } .leftRounded{ border-top-right-radius: 0 ; border-bottom-right-radius: 0; border-top-left-radius: 100rem; border-bottom-left-radius: 100rem; } .rightRounded{ border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 100rem; border-bottom-right-radius: 100rem; } .topEdge{ border-top-right-radius: var(--borderRadius); border-top-left-radius: var(--borderRadius); } .bottomEdge{ border-bottom-right-radius: var(--borderRadius); border-bottom-left-radius: var(--borderRadius); } .round-top-left-edge { border-top-left-radius: 10px; } .round-top-right-edge { border-top-right-radius: 10px; } .round-top-edge { border-top-left-radius: 10px; border-top-right-radius: 10px; } .round-left-edge { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .round-right-edge { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .round-button-left-edge { border-bottom-left-radius: 10px; } .round-button-right-edge { border-bottom-right-radius: 10px; } .round-button-edge { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .border-left-red-1 { border-left: 1px solid; } /*images */ .circle { border-radius: 50%; } .avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background-color: var(--raiseOpaque); backdrop-filter: var(--raiseBackdrop); color: var(--text-color); } /* Dropdown Container */ .dropdown-container { position: relative; width: fit-content; display: inline-block; } /* Dropdown Menu - Base Styles */ .dropdown-menu { background-color: var(--page-bg); border: var(--border); border-radius: 0.5rem; box-shadow: var(--card); overflow: auto; z-index: 9999; animation: fadeIn 0.15s ease-out; } /* For non-portal mode (absolute positioning within container) */ .dropdown-container .dropdown-menu:not([style*="position: fixed"]) { position: absolute; } /* Position Variants - For non-portal mode */ .dropdown-container .dropdown-menu.bottom-left:not([style*="position: fixed"]) { top: calc(100% + 8px); left: 0; } .dropdown-container .dropdown-menu.bottom-right:not([style*="position: fixed"]) { top: calc(100% + 8px); right: 0; } .dropdown-container .dropdown-menu.bottom:not([style*="position: fixed"]) { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .dropdown-container .dropdown-menu.top-left:not([style*="position: fixed"]) { bottom: calc(100% + 8px); left: 0; } .dropdown-container .dropdown-menu.top-right:not([style*="position: fixed"]) { bottom: calc(100% + 8px); right: 0; } .dropdown-container .dropdown-menu.top:not([style*="position: fixed"]) { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .dropdown-container .dropdown-menu.left:not([style*="position: fixed"]) { right: calc(100% + 8px); top: 0; } .dropdown-container .dropdown-menu.right:not([style*="position: fixed"]) { left: calc(100% + 8px); top: 0; } /* Dropdown Item */ .dropdown-item { padding: 0.4rem 0.8rem; cursor: pointer; display: flex; align-items: center; border-bottom: var(--border); gap: 0.5rem; flex-wrap: nowrap; font-size: var(--smallFont); transition: background-color 0.15s ease; white-space: nowrap; } .dropdown-item:hover { background-color: var(--dark800); } .dropdown-item.disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; } .dropdown-item:last-child { border-bottom: none; } /* Dropdown Item Icons */ .dropdown-item-icon { line-height: 0; display: flex; align-items: center; } .dropdown-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* Dropdown Divider */ .dropdown-divider { height: 1px; background-color: var(--border-color, #e5e7eb); margin: 0.25rem 0; } /* Simple fade-in animation only */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*inputs*/ /*inputs*/ .input { padding: var(--inputPadding); outline: none; border: var(--inputBorder) transparent; border-bottom: var(--inputBorder) solid var(--borderColor); color: var(--text-color); font-size: var(--minifiedFontSize); background-color: var(--page-bg); transition: all 0.2s ease; border-radius: var(--radius); padding-top: 1rem !important; height: var(--inputButtonHeight); } .smallInput { font-size: var(--smallFont); } /* Input wrapper and container */ .input-wrapper { display: flex; flex-direction: column; gap: 0.375rem; position: relative; } .input-wrapper.full-width { width: 100%; } .input-container-with-label { position: relative; display: flex; flex-direction: column; } /* Floating Label Styles */ .floating-label { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--minifiedFontSize); color: var(--text-color); opacity: 0.6; left: 0.9rem; pointer-events: none; transition: all 0.2s ease; background-color: transparent; z-index: 1; } .floating-label.active { top: 0.25rem; font-size: 0.625rem; opacity: 1; background-color: transparent; color: var(--primary); font-weight: 600; transform: translateY(0); line-height: 1; } .floating-label.label-left{left: 2.2rem ;} /* Label status colors */ .floating-label.label-success.active { color: var(--success); } .floating-label.label-warning.active { color: var(--warning); } .floating-label.label-danger.active { color: var(--danger); } .floating-label.label-info.active { color: var(--info, var(--primary)); } /* For bordered inputs, adjust label positioning */ .input.borderedInput ~ .floating-label, .input.borderedInput + .floating-label { left: 0.8rem; } .input.borderedInput ~ .floating-label.active, .input.borderedInput + .floating-label.active { left: 0.8rem; top: 0.35rem; background-color: transparent; } .no_label{ padding:var(--inputPadding) !important; } /* Status Input Styles */ .input.success-input, .input.warning-input, .input.danger-input, .input.info-input { outline: none !important; } .input.success-input { border-bottom-color: var(--success); } .input.warning-input { border-bottom-color: var(--warning); } .input.danger-input { border-bottom-color: var(--danger); } .input.info-input { border-bottom-color: var(--info, var(--primary)); } /* When no label, use normal padding */ input:not(:placeholder-shown), input:focus { padding-top: 1.2rem; padding-bottom: 0.4rem; } /* Reset padding when there's no label */ .input-container-with-label:not(:has(.floating-label)) input, .input-container-with-label:not(:has(.floating-label)) select { padding-top: 0.6rem; padding-bottom: 0.6rem; } textarea { border-radius: var(--radius) !important; height: fit-content !important; min-height: 4rem; padding-top: 0.8rem !important; } /* Reset padding when there's no label for textarea */ .input-container-with-label:not(:has(.floating-label)) textarea { padding-top: 0.6rem; padding-bottom: 0.6rem; } .input.flat { border-radius: 0 !important; } /* Focus states */ .input:focus { border-bottom: var(--inputBorder) solid var(--primary); } .input.success-input:focus { border-bottom-color: var(--success); } .input.warning-input:focus { border-bottom-color: var(--warning); } .input.danger-input:focus { border-bottom-color: var(--danger); } .input.info-input:focus { border-bottom-color: var(--info, var(--primary)); } select:focus { color: var(--text-color) !important; background-color: var(--raiseThemes) !important; backdrop-filter: var(--raiseBackdrop) !important; outline: none; } /* Bordered Input Styles */ .input.borderedInput, .input.borderless { padding: 0.6rem 0.8rem; } .input.borderedInput { border: var(--border); transition: all 0.2s ease; padding: 0.6rem 0.8rem; } .input.borderedInput:focus { outline: var(--input_outline_size) solid var(--primary); box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1); border-color: var(--primary); } /* Status bordered inputs */ .input.success-input.borderedInput { border: var(--inputBorder) solid var(--success) !important; } .input.success-input.borderedInput:focus { outline: var(--input_outline_size) solid var(--success); box-shadow: 0 0 0 3px rgba(var(--success-rgb, 34, 197, 94), 0.1); } .input.warning-input.borderedInput { border: var(--inputBorder) solid var(--warning) !important; } .input.warning-input.borderedInput:focus { outline: var(--input_outline_size) solid var(--warning); box-shadow: 0 0 0 3px rgba(var(--warning-rgb, 234, 179, 8), 0.1); } .input.danger-input.borderedInput { border: var(--inputBorder) solid var(--danger) !important; } .input.danger-input.borderedInput:focus { outline: var(--input_outline_size) solid var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb, 239, 68, 68), 0.1); } .input.info-input.borderedInput { border: var(--inputBorder) solid var(--info, var(--primary)) !important; } .input.info-input.borderedInput:focus { outline: var(--input_outline_size) solid var(--info, var(--primary)); box-shadow: 0 0 0 3px rgba(var(--info-rgb, var(--borderRgb)), 0.1); } /* Borderless styles */ .input.borderless { border: none !important; outline: none !important; background-color: var(--light); } .input.borderless:focus { border: none !important; outline: none !important; background-color: rgba(var(--borderRgb), 0.3); } /* No outline */ .input.no-outline { outline: none; } /* Full width */ .full-width { width: 100%; } /* Rounded inputs */ .input.round, .input.rounded { border-radius: 100rem !important; padding: var(--inputRoundedPadding); } .input.rounded ~ .floating-label { left: 1.2rem; } .input.rounded ~ .floating-label.active { left: 1.2rem; top: 0.35rem; } /* Helper Text Styles */ .input-helper-text { display: flex; align-items: center; gap: 0.375rem; font-size: var(--smallFont); color: var(--text-color); opacity: 0.7; animation: slideDown 0.2s ease; } .helper-icon { display: inline-flex; align-items: center; line-height: 0; } /* Status helper text colors */ .input-helper-text.helper-success { color: var(--success); opacity: 1; } .input-helper-text.helper-warning { color: var(--warning); opacity: 1; } .input-helper-text.helper-danger { color: var(--danger); opacity: 1; } .input-helper-text.helper-info { color: var(--info, var(--primary)); opacity: 1; } /* Icon container adjustments for labeled inputs */ .icon-container { position: relative; width: 100%; } .icon-container > .input, .icon-container > input, .icon-container > select, .icon-container > textarea { width: 100%; } .leftIcon, .rightIcon { position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; z-index: 2; pointer-events: auto; top: 0; cursor: default; } .leftIcon { left: 0; } .rightIcon { right: 0; } /* Make icons clickable when they have interactive elements */ .leftIcon > *, .rightIcon > * { max-width: 1.25rem; max-height: 1.25rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; } /* Inherit cursor from parent elements (for .pointer class) */ .leftIcon .pointer, .rightIcon .pointer, .leftIcon [class*="pointer"], .rightIcon [class*="pointer"] { cursor: pointer; } /* If icon is an SVG, apply size directly */ .leftIcon svg, .rightIcon svg { width: 1.25rem; height: 1.25rem; pointer-events: auto; } /* Adjust padding for inputs with icons and labels */ .icon-container.has-left-icon > .input, .icon-container.has-left-icon > input, .icon-container.has-left-icon > select { padding-left: 2.2rem; padding-top: 1.3rem; } .icon-container:has(.rightIcon) > .input, .icon-container:has(.rightIcon) > input, .icon-container:has(.rightIcon) > select { padding-right: 2.75rem; padding-top: 1.2rem; } /* Reset padding when no label */ .input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > .input, .input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > input, .input-container-with-label:not(:has(.floating-label)) .icon-container.has-left-icon > select { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 2.75rem; } .input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > .input, .input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > input, .input-container-with-label:not(:has(.floating-label)) .icon-container:has(.rightIcon) > select { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-right: 2.75rem; } /* Label positioning with icons */ .icon-container .floating-label { left: 0.8rem; } /* When input has left icon, move the label to match where typing starts */ .icon-container.has-left-icon .floating-label { left: 3rem; z-index: 3; } /* When active, bring label back to normal position (above the icon) */ .icon-container .floating-label.active { left: 0.8rem; top: 0.35rem; } .icon-container.has-left-icon .floating-label.active { left: 0.8rem; top: 0.35rem; } /* Select specific adjustments */ select.input { appearance: none; 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='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.5rem; } /* Disabled state */ .input:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--light); } .input:disabled ~ .floating-label { opacity: 0.4; } /* Responsive adjustments */ @media (max-width: 768px) { .floating-label { font-size: 0.875rem; } .floating-label.active { font-size: 0.563rem; top: 0.3rem; } input, select { padding-top: 1.1rem; padding-bottom: 0.35rem; } textarea { padding-top: 1.3rem; padding-bottom: 0.5rem; } }/* Enhanced File Upload Styles */ .fileInput { position: relative; width: fit-content !important; cursor: pointer; } .filedInput { position: absolute; top: 0; left: 0; width: fit-content; max-width: 100%; height: 100%; opacity: 0; cursor: pointer !important; z-index: 2; } ._upload_container { border: 0.17rem dashed var(--borderColor); border-radius: 16px; padding: var(--space-5); text-align: center; transition: all 0.3s ease; cursor: pointer; margin: auto; color: var(--text-color); position: relative; overflow: hidden; } ._upload_container:hover { border-color: var(--primary); background-color: var(--lighter); } ._upload_container.drag-over { border-color: var(--primary); background-color: var(--lighter); transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } ._upload_label { display: block; cursor: pointer; position: relative; z-index: 1; } ._upload_icon { font-size: 2.4rem; color: var(--primary); margin-bottom: 0.5rem; transition: all 0.3s ease; } ._upload_input { display: none; } /* Drag and drop overlay */ .drag-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--primary); opacity: 0.1; border-radius: 14px; pointer-events: none; } /* File info display */ .file-info { margin-top: var(--space-3); padding: var(--space-3); background-color: var(--light); border-radius: 8px; border: 1px solid var(--borderColor); display: flex; align-items: center; gap: var(--space-3); justify-content: center; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Status colors */ ._upload_container.success { border-color: var(--success); } ._upload_container.warning { border-color: var(--warning); } ._upload_container.danger { border-color: var(--danger); } ._upload_container.info { border-color: var(--info); } .custom-select { position: relative; width: 100%; border-radius: var(--radius); } .custom-select.fullWidth {max-width: none;} .select-trigger { display: flex; align-items: center; justify-content: space-between; padding: var(--inputRoundedPadding); background: var(--page-bg); border: var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 14px; user-select: none; outline: none; } .select-trigger.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select-trigger.borderless { border: none !important; background: var(--lighter); } .select-trigger.rounded { border-radius: 24px; } .select-trigger.rounded.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select-trigger.flat { box-shadow: none; } .select-trigger.flat:hover:not(.disabled), .select-trigger.flat:focus:not(.disabled) { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .select-trigger.success { border-color: var(--success); } .select-trigger.warning { border-color: var(--warning); } .select-trigger.danger { border-color: var(--error); } .select-trigger.disabled { background: var(--gray); cursor: not-allowed; opacity: 0.6; } .select-value { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select-placeholder { color: inherit; } .select-arrow { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; flex-shrink: 0; margin-left: 8px; } .select-arrow.open { transform: rotate(180deg); } .select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--page-bg); border-top: none; border-radius: 0 0 0.5rem 0.5rem; max-height: 250px; overflow: hidden; /* opacity: 0; */ visibility: hidden; transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--card); /* FIX: Increased z-index and ensure it's above the parent's stacking context */ z-index: 1001 !important; } .select-dropdown.open { /* opacity: 1; */ visibility: visible; transform: translateY(0); } .select-dropdown.rounded { border-radius: 0 0 24px 24px; } .select-search { padding: 12px 16px; border: none; width: 100%; font-size: 14px; outline: none; background: var(--page-bg); color: inherit; } .select-search:focus { background: var(--lighter); } .select-options { max-height: 200px; overflow-y: auto; } .select-options::-webkit-scrollbar { width: 6px; } .select-option { padding: 12px 16px; cursor: pointer; transition: all 0.15s ease; font-size: 14px; color: inherit; border: none; background: none; width: 100%; text-align: left; display: flex; align-items: center; } .select-option:hover { background: var(--lighter); } .select-option.selected { background: var(--page-bg); font-weight: 500; } .select-option.focused { background: var(--lighter); outline: none; } .select-option.no-results { cursor: default; font-style: italic; } .select-option.no-results:hover { background: transparent; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .select-option { animation: fadeInUp 0.1s ease forwards; } .icon-container { position: relative; display: flex; align-items: center; width: 100%; } .icon_input_wrapper{ width: 100%; } .icon_input_wrapper.lefticon .input{ padding-left: 2.5rem; } .icon_input_wrapper.righticon .input{ padding-right: 2.5rem; } .icon-container .leftIcon,.rightIcon { height: calc(100%) !important; width: 2.5rem; display: flex; align-items: center; justify-content: center; } .icon-container .leftIcon { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .icon-container .rightIcon { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .icon-container .leftIcon { position: absolute; left: 0rem; overflow: hidden; min-width: 1.9rem; } .icon-container .rightIcon { position: absolute; right: 0rem; bottom: 0; overflow: hidden; min-width: 1.9rem; } /* Main wrapper */ .searchable-input-wrapper { position: relative; display: inline-block; font-family: inherit; } .searchable-input-wrapper.full-width { display: block; width: 100%; } /* Label styles */ .searchable-input__label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-color); line-height: 1.4; } /* Container for input and dropdown */ .searchable-input__container { position: relative; display: block; } /* Input wrapper with icons */ .searchable-input__input-wrapper { position: relative; display: flex; align-items: center; } /* Base input styles */ .searchable-input { width: 100%; height: var(--inputButtonHeight); padding: 0.6rem 0.8rem; font-size: inherit; line-height: 1.5; color: var(--text-color); background-color: var(--background-color); border: none; border-bottom: var(--inputBorder) solid var(--border-color); border-radius: 0; outline: none; transition: 0.1s linear; } .searchable-input:focus { border-bottom: var(--inputBorder) solid var(--primary); } .searchable-input::placeholder { color: var(--text-muted); } /* Full width modifier */ .searchable-input.full-width { width: 100%; } /* Status modifiers */ .searchable-input.success-input { border-bottom: var(--inputBorder) solid var(--success) !important; } .searchable-input.warning-input { border-bottom: var(--inputBorder) solid var(--warning) !important; } .searchable-input.danger-input { border-bottom: var(--inputBorder) solid var(--danger) !important; } .searchable-input.success-input:focus, .searchable-input.warning-input:focus, .searchable-input.danger-input:focus { outline: none !important; } /* Bordered input styles */ .searchable-input.borderedInput { border: var(--border); border-radius: var(--radius); transition: 0.1s linear; padding: 0.6rem 0.5rem; } .searchable-input.borderedInput:focus { outline: var(--input_outline_size) solid var(--primary); box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1); } .searchable-input.success-input.borderedInput { border: var(--inputBorder) solid var(--success) !important; outline: var(--input_outline_size) solid var(--success); } .searchable-input.warning-input.borderedInput { border: var(--inputBorder) solid var(--warning) !important; outline: var(--input_outline_size) solid var(--warning); } .searchable-input.danger-input.borderedInput { border: var(--inputBorder) solid var(--danger) !important; outline: var(--input_outline_size) solid var(--danger); } /* Borderless input styles */ .searchable-input.borderless { border: none !important; outline: none !important; background-color: var(--light); } .searchable-input.borderless:focus { border: none !important; outline: none !important; background-color: rgba(var(--borderRgb), 0.3); } /* Flat modifier */ .searchable-input.flat { border-radius: 0; } /* No outline */ .searchable-input.no-outline { outline: none; } /* Rounded modifiers */ .searchable-input.round, .searchable-input.rounded { border-radius: 100rem !important; padding: var(--inputRoundedPadding); } .searchable-input.left-rounded { border-top-left-radius: 100rem !important; border-bottom-left-radius: 100rem !important; padding-left: var(--inputRoundedPadding); } .searchable-input.right-rounded { border-top-right-radius: 100rem !important; border-bottom-right-radius: 100rem !important; padding-right: var(--inputRoundedPadding); } /* Icon spacing modifiers */ .searchable-input.with-left-icon { padding-left: 2.5rem; } .searchable-input.with-clear { padding-right: 4.5rem; } /* Disabled state */ .searchable-input:disabled { background-color: var(--disabled-bg, var(--light)); color: var(--text-muted); cursor: not-allowed; opacity: 0.6; } /* Left icon */ .searchable-input__icon { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--text-muted); z-index: 1; } .searchable-input__icon--left { left: 0.75rem; top: 50%; transform: translateY(-50%); } /* Right actions container */ .searchable-input__actions { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.25rem; z-index: 1; } /* Clear button */ .searchable-input__clear-btn { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: none; border: none; border-radius: 0.25rem; color: var(--text-muted); cursor: pointer; transition: 0.1s linear; } .searchable-input__clear-btn:hover { color: var(--text-color); background-color: rgba(var(--borderRgb), 0.1); } .searchable-input__clear-btn:focus { outline: var(--input_outline_size) solid var(--primary); } /* Caret container */ .searchable-input__caret { display: flex; align-items: center; justify-content: center; color: var(--text-muted); } /* Caret icon */ .searchable-input__caret-icon { transition: transform 0.2s ease; } .searchable-input__caret-icon--open { transform: rotate(180deg); } /* Loading spinner */ .searchable-input__spinner { width: 1rem; height: 1rem; border: 2px solid rgba(var(--borderRgb), 0.3); border-top: 2px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Dropdown */ .searchable-input__dropdown { position: absolute; left: 0; right: 0; z-index: 1000; background-color: var(--raiseThemes); backdrop-filter: var(--raiseBackdrop); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: dropdown-appear 0.15s ease-out; } .searchable-input__dropdown--up { bottom: 100%; margin-bottom: 0.25rem; } .searchable-input__dropdown--down { top: 100%; margin-top: 0.25rem; } @keyframes dropdown-appear { 0% { opacity: 0; transform: translateY(-0.25rem); } 100% { opacity: 1; transform: translateY(0); } } /* Dropdown content */ .searchable-input__dropdown-content { padding: 0.25rem 0; overflow-y: auto; max-height: 12.5rem; } .searchable-input__dropdown-content::-webkit-scrollbar { width: 0.375rem; } .searchable-input__dropdown-content::-webkit-scrollbar-track { background: rgba(var(--borderRgb), 0.1); } .searchable-input__dropdown-content::-webkit-scrollbar-thumb { background: rgba(var(--borderRgb), 0.3); border-radius: 0.1875rem; } .searchable-input__dropdown-content::-webkit-scrollbar-thumb:hover { background: rgba(var(--borderRgb), 0.5); } /* Option item */ .searchable-input__option { padding: 0.75rem 1rem; cursor: pointer; transition: 0.1s linear; border-bottom: 1px solid rgba(var(--borderRgb), 0.1); color: var(--text-color); } .searchable-input__option:last-child { border-bottom: none; } .searchable-input__option:hover { background-color: rgba(var(--borderRgb), 0.1); } .searchable-input__option--highlighted { background-color: rgba(var(--primaryRgb), 0.1); } .searchable-input__option--selected { background-color: rgba(var(--primaryRgb), 0.2); color: var(--primary); font-weight: 500; } /* Option text */ .searchable-input__option-text { font-size: 0.875rem; line-height: 1.4; color: inherit; margin-bottom: 0.125rem; } /* Option value (when different from text) */ .searchable-input__option-value { font-size: 0.75rem; line-height: 1.3; color: var(--text-muted); } .searchable-input__option--selected .searchable-input__option-value { color: var(--primary); } /* Highlight matching text */ .searchable-input__highlight { background-color: var(--warning); color: var(--text-color); font-weight: 600; padding: 0.0625rem 0.125rem; border-radius: 0.125rem; } /* No data message */ .searchable-input__no-data { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; font-style: italic; } /* Extra content */ .searchable-input__extra { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.4; } /* Responsive design */ @media (max-width: 640px) { .searchable-input-wrapper { width: 100%; } .searchable-input { min-height: var(--inputButtonHeight); font-size: 1rem; /* Prevents zoom on iOS */ } .searchable-input__dropdown { left: -0.25rem; right: -0.25rem; } } /* Focus-visible for better accessibility */ .searchable-input:focus-visible { outline: var(--input_outline_size) solid var(--primary); outline-offset: 0.125rem; } .searchable-input__clear-btn:focus-visible { outline: var(--input_outline_size) solid var(--primary); outline-offset: 0.0625rem; } /* High contrast mode support */ @media (prefers-contrast: high) { .searchable-input { border-width: 0.1875rem; } .searchable-input__option--highlighted { background-color: var(--text-color); color: var(--background-color); } .searchable-input__highlight { background-color: var(--warning); color: var(--text-color); border: 1px solid var(--text-color); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .searchable-input, .searchable-input__caret-icon, .searchable-input__clear-btn, .searchable-input__option { transition: none; } .searchable-input__dropdown { animation: none; } .searchable-input__spinner { animation: none; } } @media screen and (max-width: 800px){ .input , input, textarea , .bubble-editor , .bubble-editor-container{ font-size: 16px !important; } } /*flex*/ .flex { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; width: 100%; } .flex-10 { flex: 10%; } .flex-20 { flex: 20%; } .flex-30 { flex: 30%; } .flex-40 { flex: 40%; } .flex-50 { flex: 50%; } .flex-60 { flex: 60%; } .flex-70 { flex: 70%; } .flex-80 { flex: 80%; } .flex-90 { flex: 90%; } .flex-100 { flex: 100%; } .top-0 { top: 0px; } .top-10 { top: 10px !important; } .top-20 { top: 20px !important; } .top-30 { top: 30px !important; } .top-40 { top: 40px !important; } .top-50 { top: 50px !important; } .top-60 { top: 60px !important; } .top-70 { top: 70px !important; } .top-80 { top: 80px !important; } .top-90 { top: 90px !important; } .bottom-0 { bottom: 0px; } .bottom-10 { bottom: 10px !important; } .bottom-20 { bottom: 20px !important; } .bottom-30 { bottom: 30px !important; } .bottom-40 { bottom: 40px !important; } .bottom-50 { bottom: 50px !important; } .bottom-60 { bottom: 60px !important; } .bottom-70 { bottom: 70px !important; } .bottom-80 { bottom: 80px !important; } .bottom-90 { bottom: 90px !important; } .left-0 { left: 0px; } .left-10 { left: 10px !important; } .left-20 { left: 20px !important; } .left-30 { left: 30px !important; } .left-40 { left: 40px !important; } .left-50 { left: 50px !important; } .left-60 { left: 60px !important; } .left-70 { left: 70px !important; } .left-80 { left: 80px !important; } .left-90 { left: 90px !important; } .right-0 { right: 0px; } .right-10 { right: 10px !important; } .right-20 { right: 20px !important; } .right-30 { right: 30px !important; } .right-40 { right: 40px !important; } .right-50 { right: 50px !important; } .right-60 { right: 60px !important; } .right-70 { right: 70px !important; } .right-80 { right: 80px !important; } .right-90 { right: 90px !important; } /* Base Table Grid */ .table-grid { width: 100%; background: var(--page-bg); border-radius: var(--radius); overflow: hidden; position: relative; } /* Table Head */ .table-head { display: grid; gap: 1px; background-color: var(--lighter); position: sticky; top: 0; margin-bottom: var(--space-2); padding: 0; z-index: 10; } /* Table Body */ .table-body { display: flex; flex-direction: column; gap: 1px; } /* Table Row */ .table-row { display: grid; gap: 1px; align-items: stretch; position: relative; background: var(--white); padding: 0; overflow: visible !important; } /* Header and Cell Styles */ .table-header, .table-cell { padding: 0.75rem 1rem; display: flex; align-items: center; min-height: 3rem; box-sizing: border-box; } /* Header specific */ .table-header { background-color: var(--lighter); border: none; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.05em; overflow: hidden; } /* Cell specific */ .table-cell { border-bottom: 0.5px solid var(--borderColor); overflow: visible; } /* Text handling classes */ .table-cell.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-cell.wrap { white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* Modifier Classes */ .table-grid.bordered { border: var(--border); border-radius: var(--radius); } .table-grid.bordered .table-header, .table-grid.bordered .table-cell { border-right: var(--border); } .table-grid.bordered .table-header:last-child, .table-grid.bordered .table-cell:last-child { border-right: none; } .table-grid.stripped .table-row:nth-child(odd) .table-cell { background-color: var(--lighter); } .table-grid.hoverableTr .table-row { transition: all 0.3s ease; cursor: pointer; } .table-grid.hoverableTr .table-row:hover .table-cell { background-color: var(--hoverable) !important; } .table-grid.hoverableTr .table-row:hover { transform: translateY(-1px); box-shadow: var(--raised); } /* Dark Theme */ .table-grid.dark .table-header { background-color: var(--darker); color: var(--white); } .table-grid.dark .table-cell { background-color: var(--dark); color: var(--white); border-bottom-color: var(--dark-border); } .table-grid.dark.stripped .table-row:nth-child(odd) .table-cell { background-color: var(--darker); } /* Skeleton Loading */ .table-row.skeleton .table-cell { background: linear-gradient(90deg, var(--lighter) 25%, var(--light) 50%, var(--lighter) 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 2px; min-height: 1rem; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Mobile Responsive */ @media (max-width: 768px) { .table-head { display: none !important; } .table-body { gap: 0.5rem; } .table-row { display: flex !important; flex-direction: column; gap: 0.25rem; padding: 1rem; border: var(--border); border-radius: var(--radius); background: var(--page-bg); margin-bottom: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .table-cell { display: grid !important; grid-template-columns: 1fr 2fr; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--light); width: 100% !important; min-width: 100% !important; max-width: 100% !important; } .table-cell:first-child { border-top: none; } .table-cell:last-child { border-bottom: none; } .table-cell::before { content: attr(data-label); font-weight: 600; color: var(--secondary); font-size: 0.875rem; display: flex; align-items: center; } .table-cell.truncate, .table-cell.wrap { white-space: normal; overflow: visible; text-overflow: clip; } .table-grid.hoverableTr .table-row:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } } @media (max-width: 480px) { .table-row { padding: 0.75rem; } .table-cell { grid-template-columns: 1fr; gap: 0.25rem; } .table-cell::before { font-size: 0.8rem; margin-bottom: 0.25rem; } } .pagination-item{ height: 30px !important; width: 30px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; } /* Empty State */ .table-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1rem; color: var(--secondary); width: 100%; } .table-empty .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } /* Animations */ .animated.slide-up { animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .first_table_data { border-top-left-radius: var(--radius); } .last_table_data { border-top-right-radius: var(--radius); } /*list*/ .list { margin: 0; padding: 0; display:flex; flex-direction: column; } .list li { list-style: none; padding: 5px; border-collapse: collapse; transition: 0.3s linear; } .list.hoverableList li:hover { filter: var(--hoverable); } .list.bordered li { border-top: var(--border); } .list.bordered { border: var(--border); } .list.bordered li:last-of-type { border-bottom: none; } .list.bordered li:first-of-type{ border-top: none; } .list.stripped li:nth-child(even) { background-color: var(--lighter); } .list.stripped.dark li:nth-child(even) { background-color: var(--dark200); } .list.roundItems li { border-radius: 300rem; } /*animation*/ .scale-up { transition: transform 0.5s ease-in; } .scale-up:hover { transform: scale(1.1); } .scale-down { transition: transform 0.5s ease-in; } .scale-down:hover { transform: scale(0.8); } .hover-up { transition: transform 0.3s ease-in-out; } .hover-up:hover { transform: translateY(-5%); } .hover-down { transition: transform 0.3s ease-in-out; } .hover-down:hover { transform: translateY(5%); } .hover-left { transition: transform 0.3s ease-in-out; } .hover-left:hover { transform: translateX(-5%); } .hover-right { transition: transform 0.3s ease-in-out; } .hover-right:hover { transform: translateX(5%); } .animate-up-down { animation: updown 5s linear infinite; } @keyframes updown { 50% { transform: translateY(-10%); } 100% { transform: translateY(0%); } } .accordion { width: 100%; overflow: visible !important; } .accordion-item { margin: 0.5rem 0; border: var(--border); background-color: var(--lighter); border-radius: 1rem; padding: 0.5rem 1rem; } .accordion-header { background: none; border: none; width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-radius: 0.5rem; cursor: pointer; } .accordion-rotated { display: inline-block; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); transform: rotate(180deg); } .accordion-header .iconClass { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); /* Optional: set transform: rotate(0deg); for closed state if needed */ } .accordion-content { max-height: 0; transition: max-height 1s ease-in-out, opacity 0.3s ease; opacity: 0; } .accordion-content.open { max-height: 10000px; /* large enough to contain most content */ opacity: 1; } /* Base Animation Setup */ .animated { animation-duration: 0.4s; animation-fill-mode: both; animation-timing-function: ease; will-change: transform, opacity; } /* Slide Animations */ .slide-up { animation-name: slideUp; } .slide-down { animation-name: slideDown; } .slide-left { animation-name: slideLeft; } .slide-right { animation-name: slideRight; } /* Fade Animation */ .fade-in { animation-name: fadeIn; } /* Keyframes */ @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideLeft { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideRight { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*icons*/ .icon.size-smaller { font-size: 0.5em; } .icon.size-small { font-size: 0.8em; } .icon.size-big { font-size: 2em; } .icon.size-bigger { font-size: 3em; } .icon.size-jumbo { font-size: 4em; } /*parallax*/ .parallax { background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; height: 100vh; width: 100%; } /*modal*/ .modal { position: fixed; top: 0; display: flex; justify-content: center; left: 0; padding: 2rem; z-index: var(--modalZIndex); width: 100%; height: 100%; min-height: 100vh; transition: 0.5s; overflow: auto; backdrop-filter: blur(9px); /* The x overflow is hidden form smooth slide transitions */ background-color: rgba(0, 0, 0, 0.5); overflow-x: hidden; } .modal.top-right{ justify-content: flex-end !important; align-items: flex-start !important; } .modal.right{ justify-content: flex-end !important; } .modal.left{ justify-content: flex-start !important; } .modal.top-left{ justify-content: flex-start !important; align-items: flex-start !important; } .modal.top-middle{ justify-content: center !important; align-items: flex-start !important; } .modal.bottom-right{ justify-content: flex-end !important; align-items: flex-end !important; } .modal.bottom-left{ justify-content: flex-start !important; align-items: flex-end !important; } .modal.bottom-middle{ justify-content: center !important; align-items: flex-end !important; } .modal-title { height: fit-content; display: flex; flex-direction: row; width: 100%; align-items: flex-start; justify-content: space-between; gap: 1rem; } .modal-content { background: var(--page-bg); backdrop-filter: blur(20rem) ; max-width: 700px; padding: 1rem 1.5rem; border-radius: 0.5rem; height: fit-content ; } .modal-body { height: 100%; } .modal-action { height: fit-content; } .closeModal:hover { filter: brightness(90%); } .notification{ position: fixed; background-color: var(--raiseThemes); backdrop-filter:var(--raiseBackdrop) ; width: fit-content; max-width: calc(100vw - 4rem) !important; padding: 1rem; border-radius: 0.3rem; box-shadow: var(--raised); z-index: var(--notificationZindex); display: flex; flex-direction: column; gap: 1rem; } .notificationBody{ font-size: var(--smallFont); } .notification.bottom-left{ bottom: 2rem; left: 2rem; } .notification.bottom-right{ bottom: 2rem; right: 2rem; } .notification.top-left{ top: 2rem; left: 2rem; } .notification.top-right{ top: 2rem; right: 2rem; } /*background image*/ .background.no-repeat { background-repeat: no-repeat; } .background.repeat { background-repeat: repeat; } .background.cover { background-size: cover; } .background.contain { background-size: contain; } .background.center { background-position: center; } .background.top { background-position: top; } .background.left { background-position: left; } .background.right { background-position: right; } .background.bottom { background-position: bottom; } .darken { background-color: black; opacity: 0.1; } .progressBar { background-color: var(--light100); position: relative; border-radius: 0.2rem; height: 1rem; } .progressInner { position: absolute; top: 0; left: 0; border-radius: 0.2rem; height: 100%; font-size: var(--smallerFont); overflow: hidden; display: flex; align-items: center; justify-content: flex-start; transition: 0.2s ease-in-out; background-image: linear-gradient( 45deg, var(--hoverable) 25%, transparent 25%, transparent 50%, var(--hoverable) 50%, var(--hoverable) 75%, transparent 75%, transparent ); color: var(--darkText); font-weight: bold; padding-left: 0.5rem; } .circularProgressWrapper { position: relative; display: inline-block; } .circularProgress { transform: rotate(-90deg); } .circularProgressCircle { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease-in-out; } /* affects rounded progress */ .rounded{ border-radius: 500rem; } /* darken */ .darken-10 { background-color: rgba(0, 0, 0, 0.1); } .darken-9 { background-color: rgba(0, 0, 0, 0.9); } .darken-8 { background-color: rgba(0, 0, 0, 0.8); } .darken-7 { background-color: rgba(0, 0, 0, 0.7); } .darken-6 { background-color: rgba(0, 0, 0, 0.6); } .darken-5 { background-color: rgba(0, 0, 0, 0.5); } .darken-4 { background-color: rgba(0, 0, 0, 0.4); } .darken-3 { background-color: rgba(0, 0, 0, 0.3); } .darken-2 { background-color: rgba(0, 0, 0, 0.2); } .darken-1 { background-color: rgba(0, 0, 0, 0.1); } /* Portal tooltip specific styles */ .tip[style*="position: fixed"] { position: fixed !important; z-index: 9999 !important; background-color: var(--dark) !important; color: var(--white) !important; padding: 0.4rem 0.75rem !important; border-radius: var(--radius) !important; box-shadow: var(--raised) !important; font-size: var(--smallFont) !important; max-width: 200px !important; white-space: nowrap !important; pointer-events: none !important; } /* Arrow for portal tooltips */ .tip[style*="position: fixed"]::after { content: "" !important; position: absolute !important; border-style: solid !important; } /* Top arrow */ .tip-top[style*="position: fixed"]::after { bottom: -6px !important; left: 50% !important; transform: translateX(-50%) !important; border-width: 6px 6px 0 6px !important; border-color: var(--dark) transparent transparent transparent !important; } /* Bottom arrow */ .tip-bottom[style*="position: fixed"]::after { top: -6px !important; left: 50% !important; transform: translateX(-50%) !important; border-width: 0 6px 6px 6px !important; border-color: transparent transparent var(--dark) transparent !important; } /* Left arrow */ .tip-left[style*="position: fixed"]::after { right: -6px !important; top: 50% !important; transform: translateY(-50%) !important; border-width: 6px 0 6px 6px !important; border-color: transparent transparent transparent var(--dark) !important; } /* Right arrow */ .tip-right[style*="position: fixed"]::after { left: -6px !important; top: 50% !important; transform: translateY(-50%) !important; border-width: 6px 6px 6px 0 !important; border-color: transparent var(--dark) transparent transparent !important; } .snackbar { position: fixed !important; background-color: var(--dark) !important; color: var(--white) !important; border-radius: var(--radius); max-width: 90vw; width: fit-content; max-height: 2.5rem; font-weight: 500; line-height: normal; height: 100%; box-shadow: var(--raised); z-index: var(--snackBarZindex); padding: 0.3rem 0.5rem; font-size: var(--minifiedFontSize); } .snackbar.default { bottom: 20px; left: 20px; } .snackbar.top-left { top: 20px !important; left: 20px !important; } .snackbar.top-right { top: 20px !important; right: 20px !important; } .snackbar.bottom-left { bottom: 20px !important; left: 20px !important; } .snackbar.bottom-right { bottom: 20px !important; right: 20px !important; } .snackbar-content { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; gap: 1rem; padding: 0.2rem 0.5rem; } /* glassmophisiam */ .glass , .glassy{ background-color: transparent !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @keyframes ScaleUp { from { transform: scale(0); } to { transform: scale(1); } } @keyframes ScaleDown { from { transform: scale(1); } to { transform: scale(0); } } @keyframes Opacity { from { opacity: 0; } to { opacity: 1; } } @keyframes FadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes FadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes SlideBottom { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes SlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes SlideTop { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes SlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes SlideLeft { from { transform: translateX(100%); } to { transform: translateX(0%); } } @keyframes SlideRight { from { transform: translateX(-100%); } to { transform: translateX(0%); } } /* Container */ .datepicker { background-color: var(--raiseOpaque); border-radius: 0.5rem; padding: 1rem; width: 100%; } /* Header */ .datepicker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .datepicker-header button { background-color: var(--lighter); border: none; padding: 0.4rem 0.6rem; border-radius: 50%; font-weight: bold; cursor: pointer; } .datepicker-header button:hover { background-color: var(--lighter); } .datepicker-header span { font-weight: 600; font-size: 1rem; } /* Week Days */ .datepicker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.85rem; color: var(--primary); font-weight: 500; margin-bottom: 0.5rem; } /* Dates Grid */ .datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } /* Date Cell */ .datepicker-day { cursor: pointer; transition: background-color 0.3s ease; } .datepicker-day:hover { background-color: var(--primary100); color: var(--primary); } .datepicker-day.in-range { background-color: var(--lighter); color: var(--text-color); } .datepicker-day.selected { background-color: var(--primary) !important; color: var(--primary50); } .datepicker-day.empty { cursor: default; background: transparent; } .datepicker-selected{display: flex;justify-content: space-between;align-items: center;} .calendar { width: 100%; /* border: var(--border); */ border-radius: 1rem; overflow: hidden; } .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .calendar-title{ display: flex; gap: 0.5rem; } .weekday-header{ background: var(--lighter); border-radius: 0.5rem; color: var(--primary); } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.9rem; font-weight: bold; padding: 0.5rem 0; margin-bottom: 0.2rem; grid-gap: 0.2rem; border-radius: 1rem; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 0.2rem; } .calendar-cell { min-height: 80px; background-color: var(--lighter); position: relative; border-radius: 1rem !important; padding: 5px; border: 0.1rem solid transparent; } .calendar-cell:hover{border: var(--border);} .calendar-cell.empty{ background-color: transparent !important; border: none !important; } .day-box { position: relative; } .day-number { font-weight: 400; opacity: 0.8; } .activities { margin-top: 4px; display: flex; flex-direction: column; gap: 0.2rem; } .activity-tag { font-size: 0.75rem; background: var(--page-bg); font-weight: 500; padding: 2px 4px; border-radius: 0.5rem; line-height: 1 !important; cursor: pointer; } .add-icon { position: absolute; bottom: 4px; right: 4px; } .calendar-cell.today .day-number{ color: var(--primary) !important; } @media (max-width: 768px) { .calendar-cell { width: 2.5rem !important; height: 2.5rem !important; min-height: 2.5rem !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; margin: 0 auto; cursor: pointer; } .calendar-cell.selected{ background-color: var(--primary) !important; color: var(--primary50) !important; } .activity-tag{ margin-top: 0.5rem; cursor: pointer; padding: 0.5rem; } } /* Loader */ .funLoader{ color: var(--primary); } .fixedLoader{ position: fixed; z-index: var(--loaderZindex); height: 100%; width: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(0.5rem); } .fixedLoader.backdropLoader{ background-color: rgba(0, 0, 0, 0.2); } .rotate{ animation: loader4 1s infinite linear; display: inline-block !important; line-height: 0 !important; } @keyframes loader4 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-webkit-keyframes loader4 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .skeleton { background-color: var(--lighter) !important; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) ; background-size: 200% 100%; background-position-x: 180%; animation: 0.8s Skeleton ease-in-out infinite; } @keyframes Skeleton { to { background-position-x: -20%; } } /* steps */ .stepContainer{ display: flex; flex-direction: row; gap: 1rem; width: 100%; justify-content: space-evenly; align-items: center; } .stepLined{ padding: 0rem !important; background-color: var(--borderColor); height: 0.02rem; border-radius: 0; max-width: 400px; min-width: 100px; margin-left: 0; } @media (max-width:600px) { .stepResponsiveSmall.stepContainer{ align-items: flex-start; } .stepResponsiveSmall{ flex-direction: column; } .stepContainer{width: fit-content;} .stepLined{ min-height: 50px; width: 0.02rem !important; min-width: 0 !important; max-width: 0.02rem !important; margin: 0rem auto; } } @media only screen and (max-width:1000px) { .stepResponsiveMedium.stepContainer{ align-items: flex-start; } .stepResponsiveMedium{ flex-direction: column; } .stepContainer{width: fit-content;} .stepLined{ min-height: 50px; width: 0.02rem !important; min-width: 0 !important; max-width: 0.02rem !important; margin: 0rem auto; } } .range-slider-container { width: 100%; } .range-wrapper { position: relative; } .range-tooltip { position: absolute; top: -32px; background-color: var(--raiseOpaque); border: var(--border); backdrop-filter: blur(0.5rem); z-index: 5; color: var(--text-color); padding: 4px 8px; border-radius: 5rem !important; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; line-height: 1; font-size: var(--text-sm); } .range-tooltip.visible { opacity: 1; } .range-slider { width: 100%; height: 8px !important; appearance: none; background: var(--borderColor); border-radius: 5rem; outline: none; padding: 0 !important; } .range-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background-color: var(--primary300); border: 0.1rem solid var(--primary500); border-radius: 50%; cursor: pointer; transition: background 0.3s; position: relative; z-index: 2; cursor:grab; } .range-slider::-moz-range-thumb { background-color: var(--primary300); border: 0.1rem solid var(--primary500); border-radius: 50%; cursor: pointer; border: none; cursor:grab; } .range-slider::-ms-thumb { width: 20px; height: 20px; background-color: var(--primary200); border: 0.1rem solid var(--primary500); border-radius: 50%; cursor: pointer; border: none; cursor:grab; } /* feature Section */ /* Feature Section Base Styles */ .feature-section { position: relative; width: 100%; } .feature-section__container { width: 100%; } /* Header Styles */ .feature-section__header { text-align: center; } .feature-section__subtitle { opacity: 0.8; } .feature-section__main-title { line-height: 1.2; } .feature-section__section-description { line-height: 1.6; opacity: 0.8; } /* Icon Styles */ .feature-section__icon-container { display: flex; align-items: center; } .feature-section__icon-wrapper { display: inline-flex; align-items: center; justify-content: center; } .feature-section__icon, .feature-section__checkmark { transition: all 0.3s ease; } .feature-section__image { border-radius: 50%; object-fit: cover; } /* Item Styles */ .feature-section__item { height: 100%; } .feature-section__title { font-weight: 600; line-height: 1.3; } .feature-section__description { line-height: 1.5; opacity: 0.8; } .feature-section__additional-content { line-height: 1.6; } /* Card Styles */ .feature-section__card { transition: all 0.3s ease; height: 100%; box-shadow: var(--card); } .feature-section__card--hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .feature-section__card--hover-glow:hover { box-shadow: 0 0 20px rgba(var(--primary-rgb, 59, 130, 246), 0.15); } .feature-section__card--hover-scale:hover { transform: scale(1.02); } /* Grid Layout */ .feature-section__grid { display: grid; width: 100%; } .feature-section__grid-item { height: 100%; } /* Centered Layout */ .feature-section--centered .feature-section__item { text-align: center; max-width: 48rem; margin: 0 auto; } .feature-section--centered .feature-section__icon-container { justify-content: center; } /* Checklist Layout */ .feature-section--checklist .feature-section__item { display: flex; align-items: flex-start; gap: 1rem; text-align: left; } .feature-section--checklist .feature-section__icon-container { margin-bottom: 0; flex-shrink: 0; } .feature-section--checklist .feature-section__title { margin-bottom: 0.25rem; } /* CTA Styles */ .feature-section__item-cta { transition: all 0.2s ease; } .feature-section__item-cta:hover { opacity: 0.9; } .feature-section__cta-container { text-align: center; } /* Carousel Layout */ .feature-section--carousel .feature-section__content { width: 100%; } .feature-section__carousel-slide { padding: 0 0.5rem; } /* Responsive Styles */ @media (max-width: 640px) { .feature-section__grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .feature-section__container { padding: 0 0.75rem; } .feature-section__header { margin-bottom: 2rem; } .feature-section__main-title { font-size: 1.5rem; } .feature-section__section-description { font-size: 1rem; } } @media (min-width: 641px) and (max-width: 768px) { .feature-section__grid { grid-template-columns: repeat(2, 1fr) !important; } .feature-section--checklist .feature-section__grid { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1024px) { .feature-section__grid { grid-template-columns: repeat(2, 1fr) !important; } .feature-section__grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr) !important; } .feature-section__grid[data-columns="4"] { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1025px) { .feature-section__grid { grid-template-columns: repeat(3, 1fr) !important; } .feature-section__grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr) !important; } .feature-section__grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr) !important; } .feature-section__grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr) !important; } .feature-section__grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr) !important; } } /* Print Styles */ @media print { .feature-section { break-inside: avoid; } .feature-section__card { border: 1px solid #ddd !important; box-shadow: none !important; } .feature-section__item-cta { display: none; } } /* store */ /* Hero Section */ .store-hero-section { position: relative; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transition: opacity 0.3s ease; } .hero-content { position: relative; z-index: 2; padding: 2rem; width: 100%; } /* Products Grid */ .funui_products_grid { display: grid; grid-gap: 2rem; padding: 0; width: 100%; } /* For devices smaller than 640px */ .grid-cols-1 { grid-template-columns: repeat(1, 1fr); } /* Small devices (640px and up) */ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } } /* Medium devices (768px and up) */ @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } } /* Large devices (1024px and up) */ @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } } /* Product Card Container */ .funui_store_product-card { overflow: hidden; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } /* Image Container */ .funui_store_image-container { position: relative; width: 100%; padding-top: 100%; /* Creates 1:1 aspect ratio square */ overflow: hidden; background-color: var(--lighter, #f8fafc); } .funui_store_image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .funui_store_product-card:hover .funui_store_image-container img { transform: scale(1.05); } /* Fallback for no image */ .funui_store_no-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } /* Optional: Add loading animation */ @keyframes imageLoading { 0% { opacity: 0.3; } 50% { opacity: 0.7; } 100% { opacity: 0.3; } } .funui_store_no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5; animation: imageLoading 1.5s infinite; } /* Badges */ .funui_store_product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .funui_store_badge { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: white; display: inline-block; white-space: nowrap; } .funui_store_badge.new { background-color: var(--success, #10b981); } .funui_store_badge.sale { background-color: #ef4444; } .funui_store_badge.discount { background-color: #3b82f6; } /* Prices */ .funui_store_price-container { display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; } .funui_store_price { font-size: 1.25rem; font-weight: 700; color: var(--text, #1e293b); } .funui_store_compare-price { font-size: 0.875rem; color: var(--text-light, #64748b); text-decoration: line-through; } .funui_store_discount-percent { font-size: 0.875rem; font-weight: 600; color: var(--success, #10b981); } /* Stock Info */ .funui_store_stock-info.out { color: #dc2626; } .funui_store_stock-info.low { color: #d97706; } .funui_store_stock-info.in { color: #059669; } /* Cart Icon */ .cart-icon { position: relative; background: none; border: none; cursor: pointer; padding: 0.75rem; border-radius: 50%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .cart-icon:hover { color: var(--primary) !important; } .cart-icon:disabled { opacity: 0.5; cursor: not-allowed; } .cart-badge { position: absolute; top: 0; right: 0; min-width: 33px; height: 33px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; transform: translate(30%, -30%); } /* Search and Header */ .store-header { background: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-color, #e2e8f0); } .store-search-container { margin-bottom: 1.5rem; } /* Filter Options */ .filter-options { display: flex; flex-direction: column; } .filter-option { cursor: pointer; transition: all 0.2s ease; font-size: var(--smallerFont); padding: 0.3rem; border-radius: 0.3rem; } .filter-option:hover { background-color: var(--lighter); color: var(--primary); } /* Mobile Filters Button */ .mobile-filters-button { width: 100%; margin-bottom: 1.5rem; } .pagination-numbers { display: flex; gap: 0.25rem; align-items: center; } /* Accordion Custom Styles */ .store-accordion-item { border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; background: white; } .store-accordion-header { padding: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background-color 0.2s ease; font-weight: 600; color: var(--text, #1e293b); } .store-accordion-header:hover { background-color: var(--lighter, #f8fafc); } .store-accordion-content { padding: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease; } .store-accordion-content.open { padding: 1rem; max-height: 500px; } /* Scrollbar styling for filters sidebar */ .store-filters-sidebar::-webkit-scrollbar { width: 6px; } .store-filters-sidebar::-webkit-scrollbar-track { background: var(--lighter, #f1f5f9); border-radius: 3px; } .store-filters-sidebar::-webkit-scrollbar-thumb { background: var(--light, #cbd5e1); border-radius: 3px; } .store-filters-sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-light, #94a3b8); } /* Responsive Design */ @media (max-width: 1024px) { .store-layout { gap: 1.5rem; } .store-filters-sidebar { width: 250px; min-width: 250px; } .hero-title { font-size: 2.75rem; } .hero-description { font-size: 1.125rem; } } @media (max-width: 768px) { .store-hero-section { height: 50vh; min-height: 400px; } .hero-title { font-size: 2.25rem; } .hero-description { font-size: 1rem; } .store-main-content { padding: 1.5rem 0; } .store-layout { flex-direction: column; gap: 1.5rem; } .store-filters-sidebar { width: 100%; min-width: 100%; position: static; max-height: none; margin-right: 0; } .store-products-area { width: 100%; } .funui_products_grid { gap: 1rem; } } @media (max-width: 640px) { .store-hero-section { height: 40vh; min-height: 350px; } .hero-title { font-size: 1.875rem; } .hero-description { font-size: 0.9375rem; } .store-main-container { padding: 0 0.75rem; } .store-main-content { padding: 1rem 0; } .funui_store_product-info { padding: 1rem; } .funui_store_product-name { font-size: 0.9375rem; } .funui_store_price { font-size: 1.125rem; } } @media (max-width: 480px) { .store-hero-section { min-height: 300px; } .hero-title { font-size: 1.5rem; } .hero-content { padding: 1.5rem; } .funui_products_grid { gap: 0.75rem; } .funui_store_product-actions { flex-direction: column; gap: 0.5rem; } } /* form */ /* Form Component CSS */ .funui-form { width: 100%; } .funui-form-wrapper { width: 100%; max-width: 100%; } /* Form Labels */ .funui-form-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text); } .funui-form-label.required::after { content: " *"; color: var(--danger); } /* Form Fields */ .funui-form-field { margin-bottom: 1.5rem; width: 100%; } .funui-form-field-error { animation: shake 0.3s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Checkbox Styles */ .funui-form-checkbox { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; padding: 0.5rem 0; transition: all 0.2s ease; width: fit-content; border-radius: 0.375rem; } .funui-form-checkbox:hover { background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05); } .funui-form-checkbox.disabled { cursor: not-allowed; opacity: 0.6; } .funui-form-checkbox-box { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-radius: 0.375rem; background-color: white; position: relative; transition: all 0.2s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .funui-form-checkbox-box:hover { border-color: var(--primary-light); } .funui-form-checkbox-box.checked { border-color: var(--primary); background-color: var(--primary); } .funui-form-checkbox-box.checked::after { content: ''; position: absolute; width: 0.75rem; height: 0.75rem; background-color: white; border-radius: 0.125rem; transform: scale(1); transition: transform 0.2s ease; } /* Alternative checkmark style (using SVG-like pseudo-element) */ .funui-form-checkbox-box.checked.checkmark::after { content: ''; width: 0.375rem; height: 0.75rem; border: solid white; border-width: 0 2px 2px 0; background-color: transparent; border-radius: 0; transform: rotate(45deg) translate(-1px, -1px); margin-top: -2px; } .funui-form-checkbox-label { font-size: 0.9375rem; color: var(--text); font-weight: 400; line-height: 1.4; } .funui-form-checkbox-label.checked { font-weight: 500; color: var(--primary); } .funui-form-checkbox-label.required::after { content: " *"; color: var(--danger); } /* Radio Button Styles */ .funui-form-radio { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; padding: 0.5rem 0; transition: all 0.2s ease; width: fit-content; border-radius: 0.375rem; } .funui-form-radio:hover { background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05); } .funui-form-radio.disabled { cursor: not-allowed; opacity: 0.6; } .funui-form-radio-circle { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-radius: 50%; background-color: white; position: relative; transition: all 0.2s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .funui-form-radio-circle:hover { border-color: var(--primary-light); } .funui-form-radio-circle.checked { border-color: var(--primary); } .funui-form-radio-circle.checked::after { content: ''; position: absolute; width: 0.75rem; height: 0.75rem; background-color: var(--primary); border-radius: 50%; transform: scale(1); transition: transform 0.2s ease; } .funui-form-radio-label { font-size: 0.9375rem; color: var(--text); font-weight: 400; line-height: 1.4; } .funui-form-radio-label.checked { font-weight: 500; color: var(--primary); } .funui-form-radio-label.required::after { content: " *"; color: var(--danger); } /* Form Groups (for multiple checkboxes/radios) */ .funui-form-group { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .funui-form-group.horizontal { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; } /* Form States */ .funui-form-checkbox-box.error, .funui-form-radio-circle.error { border-color: var(--danger); animation: pulse-error 1.5s ease-in-out infinite; } .funui-form-checkbox-box.success, .funui-form-radio-circle.success { border-color: var(--success); } .funui-form-checkbox-box.warning, .funui-form-radio-circle.warning { border-color: var(--warning); } @keyframes pulse-error { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 239, 68, 68), 0.4); } 50% { box-shadow: 0 0 0 4px rgba(var(--danger-rgb, 239, 68, 68), 0); } } /* Focus States */ .funui-form-checkbox input[type="checkbox"]:focus + .funui-form-checkbox-box, .funui-form-radio input[type="radio"]:focus + .funui-form-radio-circle { outline: 2px solid var(--primary-light); outline-offset: 2px; } /* Compact Variant */ .funui-form-checkbox.compact, .funui-form-radio.compact { padding: 0.25rem 0; gap: 0.5rem; } .funui-form-checkbox.compact .funui-form-checkbox-box, .funui-form-radio.compact .funui-form-radio-circle { width: 1rem; height: 1rem; } .funui-form-checkbox.compact .funui-form-checkbox-box.checked::after, .funui-form-radio.compact .funui-form-radio-circle.checked::after { width: 0.5rem; height: 0.5rem; } /* Full Width Variant */ .funui-form-checkbox.full-width, .funui-form-radio.full-width { width: 100%; justify-content: space-between; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background-color: white; } .funui-form-checkbox.full-width:hover, .funui-form-radio.full-width:hover { border-color: var(--primary-light); background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.03); } .funui-form-checkbox.full-width.checked, .funui-form-radio.full-width.checked { border-color: var(--primary); background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.08); } /* Accessibility */ .funui-form-checkbox input[type="checkbox"], .funui-form-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Form Error States */ .funui-form-error { padding: 0.75rem; background-color: var(--danger-light); border: 1px solid var(--danger); border-radius: 0.375rem; margin-bottom: 1rem; animation: slideDown 0.3s ease; } /* Spinner Animation */ .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .flex-center { display: flex; align-items: center; justify-content: center; } /* Spinner Animation */ .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .store-hero-section { height: 40vh; min-height: 300px; } .hero-title { font-size: 2rem; } .hero-description { font-size: 1rem; } .funui_products_grid { gap: 1rem; } .store-main-content { padding: 1rem; } } @media (max-width: 480px) { .hero-title { font-size: 1.75rem; } .hero-description { font-size: 0.9rem; } .store-hero-section { min-height: 250px; } } /* Custom scrollbar for filters sidebar */ .store-filters-sidebar::-webkit-scrollbar { width: 6px; } .store-filters-sidebar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .store-filters-sidebar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .store-filters-sidebar::-webkit-scrollbar-thumb:hover { background: #a1a1a1; } /* components */ .image-scaler-container { position: relative; overflow: hidden; } .image-scaler-img { width: 100%; height: 100%; transition: transform 0.3s ease-in-out; display: block; object-fit: cover; } .image-scaler-container:hover .image-scaler-img { transform: scale(1.1); } /* width */ .w-vw{ width: 100vw !important; } .min-w-vw { min-width: 100vw !important; } .min-h-vh { min-height: 100vh !important; } .max-h-vh { max-height: 100vh !important; } .w-100-vw { width: 100vw !important; } .w-90-vw { width: 90vw !important; } .w-80-vw { width: 80vw !important; } .w-70-vw { width: 70vw !important; } .w-60-vw { width: 60vw !important; } .w-50-vw { width: 50vw !important; } .w-40-vw { width: 40vw !important; } .w-30-vw { width: 30vw !important; } .w-20-vw { width: 20vw !important; } .w-10-vw { width: 10vw !important; } .min-w-10-vw { min-width: 10vw !important; } .min-w-20-vw { min-width: 20vw !important; } .min-w-30-vw { min-width: 30vw !important; } .min-w-40-vw { min-width: 40vw !important; } .min-w-50-vw { min-width: 50vw !important; } .min-w-60-vw { min-width: 60vw !important; } .min-w-70-vw { min-width: 70vw !important; } .min-w-80-vw { min-width: 80vw !important; } .min-w-90-vw { min-width: 90vw !important; } .min-w-100-vw { min-width: 100vw !important; } /* Absolute widths (no max-width) */ .w-5 { width: 5px !important; } .w-10 { width: 10px !important; } .w-15 { width: 15px !important; } .w-20 { width: 20px !important; } /* Increments of 5 from 25-95 */ .w-25 { width: 25px !important; } .w-30 { width: 30px !important; } .w-35 { width: 35px !important; } .w-40 { width: 40px !important; } .w-45 { width: 45px !important; } .w-50 { width: 50px !important; } .w-55 { width: 55px !important; } .w-60 { width: 60px !important; } .w-65 { width: 65px !important; } .w-70 { width: 70px !important; } .w-75 { width: 75px !important; } .w-80 { width: 80px !important; } .w-85 { width: 85px !important; } .w-90 { width: 90px !important; } .w-95 { width: 95px !important; } .w-100 { width: 100px !important; } .w-150 { width: 150px !important; } .w-200 { width: 200px !important; } .w-250 { width: 250px !important; } .w-300 { width: 300px !important; } .w-350 { width: 350px !important; } .w-400 { width: 400px !important; } .w-450 { width: 450px !important; } .w-500 { width: 500px !important; } .w-550 { width: 550px !important; } .w-600 { width: 600px !important; } .w-650 { width: 650px !important; } .w-700 { width: 700px !important; } .w-750 { width: 750px !important; } .w-800 { width: 800px !important; } .w-850 { width: 850px !important; } .w-900 { width: 900px !important; } .w-950 { width: 950px !important; } .w-1000 { width: 1000px !important; } .w-1050 { width: 1050px !important; } .w-1100 { width: 1100px !important; } .w-1150 { width: 1150px !important; } .w-1200 { width: 1200px !important; } .w-1250 { width: 1250px !important; } .w-1300 { width: 1300px !important; } .w-1350 { width: 1350px !important; } .w-1400 { width: 1400px !important; } .w-1450 { width: 1450px !important; } .w-1500 { width: 1500px !important; } /* Relative width versions (max-width with width: 100%) */ .w-5-r { max-width: 5px; width: 100% !important; } .w-10-r { max-width: 10px; width: 100% !important; } .w-15-r { max-width: 15px; width: 100% !important; } .w-20-r { max-width: 20px; width: 100% !important; } /* Increments of 5 from 25-95 */ .w-25-r { max-width: 25px; width: 100% !important; } .w-30-r { max-width: 30px; width: 100% !important; } .w-35-r { max-width: 35px; width: 100% !important; } .w-40-r { max-width: 40px; width: 100% !important; } .w-45-r { max-width: 45px; width: 100% !important; } .w-50-r { max-width: 50px; width: 100% !important; } .w-55-r { max-width: 55px; width: 100% !important; } .w-60-r { max-width: 60px; width: 100% !important; } .w-65-r { max-width: 65px; width: 100% !important; } .w-70-r { max-width: 70px; width: 100% !important; } .w-75-r { max-width: 75px; width: 100% !important; } .w-80-r { max-width: 80px; width: 100% !important; } .w-85-r { max-width: 85px; width: 100% !important; } .w-90-r { max-width: 90px; width: 100% !important; } .w-95-r { max-width: 95px; width: 100% !important; } .w-100-r { max-width: 100px; width: 100% !important; } .w-150-r { max-width: 150px; width: 100% !important; } .w-200-r { max-width: 200px; width: 100% !important; } .w-250-r { max-width: 250px; width: 100% !important; } .w-300-r { max-width: 300px; width: 100% !important; } .w-350-r { max-width: 350px; width: 100% !important; } .w-400-r { max-width: 400px; width: 100% !important; } .w-450-r { max-width: 450px; width: 100% !important; } .w-500-r { max-width: 500px; width: 100% !important; } .w-550-r { max-width: 550px; width: 100% !important; } .w-600-r { max-width: 600px; width: 100% !important; } .w-650-r { max-width: 650px; width: 100% !important; } .w-700-r { max-width: 700px; width: 100% !important; } .w-750-r { max-width: 750px; width: 100% !important; } .w-800-r { max-width: 800px; width: 100% !important; } .w-850-r { max-width: 850px; width: 100% !important; } .w-900-r { max-width: 900px; width: 100% !important; } .w-950-r { max-width: 950px; width: 100% !important; } .w-1000-r { max-width: 1000px; width: 100% !important; } .w-1050-r { max-width: 1050px; width: 100% !important; } .w-1100-r { max-width: 1100px; width: 100% !important; } .w-1150-r { max-width: 1150px; width: 100% !important; } .w-1200-r { max-width: 1200px; width: 100% !important; } .w-1250-r { max-width: 1250px; width: 100% !important; } .w-1300-r { max-width: 1300px; width: 100% !important; } .w-1350-r { max-width: 1350px; width: 100% !important; } .w-1400-r { max-width: 1400px; width: 100% !important; } .w-1450-r { max-width: 1450px; width: 100% !important; } .w-1500-r { max-width: 1500px; width: 100% !important; } /* Max-width and Min-width */ .max-w-10 { max-width: 0.625rem !important; } .max-w-20 { max-width: 1.25rem !important; } .max-w-30 { max-width: 1.875rem !important; } .max-w-40 { max-width: 2.5rem !important; } .max-w-50 { max-width: 3.125rem !important; } .max-w-60 { max-width: 3.75rem !important; } .max-w-70 { max-width: 4.375rem !important; } .max-w-80 { max-width: 5rem !important; } .max-w-90 { max-width: 5.625rem !important; } .max-w-100 { max-width: 6.25rem !important; } .max-w-200 { max-width: 12.5rem !important; } .max-w-300 { max-width: 18.75rem !important; } .max-w-400 { max-width: 25rem !important; } .max-w-500 { max-width: 31.25rem !important; } .max-w-600 { max-width: 37.5rem !important; } .max-w-700 { max-width: 43.75rem !important; } .max-w-800 { max-width: 50rem !important; } .max-w-900 { max-width: 56.25rem !important; } .max-w-1000 { max-width: 62.5rem !important; } .min-w-10 { min-width: 0.625rem !important; } .min-w-20 { min-width: 1.25rem !important; } .min-w-30 { min-width: 1.875rem !important; } .min-w-40 { min-width: 2.5rem !important; } .min-w-50 { min-width: 3.125rem !important; } .min-w-60 { min-width: 3.75rem !important; } .min-w-70 { min-width: 4.375rem !important; } .min-w-80 { min-width: 5rem !important; } .min-w-90 { min-width: 5.625rem !important; } .min-w-100 { min-width: 6.25rem !important; } .min-w-200 { min-width: 12.5rem !important; } .min-w-300 { min-width: 18.75rem !important; } .min-w-400 { min-width: 25rem !important; } .min-w-500 { min-width: 31.25rem !important; } .min-w-600 { min-width: 37.5rem !important; } .min-w-700 { min-width: 43.75rem !important; } .min-w-800 { min-width: 50rem !important; } .min-w-900 { min-width: 56.25rem !important; } .min-w-1000 { min-width: 62.5rem !important; } .width-10 { width: 10px; } .width-20 { width: 20px; } .width-30 { width: 30px; } .width-40 { width: 40px; } .width-50 { width: 50px; } .width-60 { width: 60px; } .width-70 { width: 70px; } .width-80 { width: 80px; } .width-90 { width: 90px; } .width-100 { width: 100px; } .width-200 { width: 200px; } .width-300 { width: 300px; } .width-400 { width: 400px; } .width-500 { width: 500px; } .width-600 { width: 600px; } .width-700 { width: 700px; } .width-800 { width: 800px; } .width-900 { width: 900px; } .width-10-max { max-width: 10px; } .width-20-max { max-width: 20px; } .width-30-max { width: 30px; } .width-40-max { max-width: 40px; } .width-50-max { max-width: 50px; } .width-60-max { width: 60px; } .width-70-max { max-width: 70px; } .width-80-max { max-width: 80px; } .width-90-max { max-width: 90px; } .width-100-max { max-width: 100px; } .width-200-max { max-width: 200px; } .width-300-max { max-width: 300px; } .width-400-max { max-width: 400px; } .width-500-max { max-width: 500px; } .width-600-max { max-width: 600px; } .width-700-max { max-width: 700px; } .width-800-max { max-width: 800px; } .width-900-max { max-width: 900px; } .width-10-min { min-width: 10px; } .width-20-min { min-width: 20px; } .width-30-min { min-width: 30px; } .width-40-min { min-width: 40px; } .width-50-min { min-width: 50px; } .width-60-min { min-width: 60px; } .width-70-min { min-width: 70px; } .width-80-min { min-width: 80px; } .width-90-min { min-width: 90px; } .width-100-min { min-width: 100px; } .width-200-min { min-width: 200px; } .width-300-min { min-width: 300px; } .width-400-min { min-width: 400px; } .width-500-min { min-width: 500px; } .width-600-min { min-width: 600px; } .width-700-min { min-width: 700px; } .width-800-min { min-width: 800px; } .width-900-min { min-width: 900px; } .width-10-max { max-width: 10px; } .width-20-max { max-width: 20px; } .width-30-max { width: 30px; } .width-40-max { max-width: 40px; } .width-50-max { max-width: 50px; } .width-60-max { width: 60px; } .width-70-max { max-width: 70px; } .width-80-max { max-width: 80px; } .width-90-max { max-width: 90px; } .width-100-max { max-width: 100px; } .width-200-max { max-width: 200px; } .width-300-max { max-width: 300px; } .width-400-max { max-width: 400px; } .width-500-max { max-width: 500px; } .width-600-max { max-width: 600px; } .width-700-max { max-width: 700px; } .width-800-max { max-width: 800px; } .width-900-max { max-width: 900px; } .width-10-min { min-width: 10px; } .width-20-min { min-width: 20px; } .width-30-min { min-width: 30px; } .width-40-min { min-width: 40px; } .width-50-min { min-width: 50px; } .width-60-min { min-width: 60px; } .width-70-min { min-width: 70px; } .width-80-min { min-width: 80px; } .width-90-min { min-width: 90px; } .width-100-min { min-width: 100px; } .width-200-min { min-width: 200px; } .width-300-min { min-width: 300px; } .width-400-min { min-width: 400px; } .width-500-min { min-width: 500px; } .width-600-min { min-width: 600px; } .width-700-min { min-width: 700px; } .width-800-min { min-width: 800px; } .width-900-min { min-width: 900px; } .width-min-vw { min-width: 100vw; } /*Heights*/ .height{height:var(--height)} .w-vw { width: 100vw !important; } .h-vh { height: 100vh !important; } .h-100-vh { height: 100vh !important; } .h-90-vh { height: 90vh !important; } .h-80-vh { height: 80vh !important; } .h-70-vh { height: 70vh !important; } .h-60-vh { height: 60vh !important; } .h-50-vh { height: 50vh !important; } .h-40-vh { height: 40vh !important; } .h-30-vh { height: 30vh !important; } .h-20-vh { height: 20vh !important; } .h-10-vh { height: 10vh !important; } .min-h-10-vh { min-height: 10vh !important; } .min-h-20-vh { min-height: 20vh !important; } .min-h-30-vh { min-height: 30vh !important; } .min-h-40-vh { min-height: 40vh !important; } .min-h-50-vh { min-height: 50vh !important; } .min-h-60-vh { min-height: 60vh !important; } .min-h-70-vh { min-height: 70vh !important; } .min-h-80-vh { min-height: 80vh !important; } .min-h-90-vh { min-height: 90vh !important; } .min-h-100-vh { min-height: 100vh !important; } .min-h-vh {min-height: 100vh !important;} .max-h-vh { max-height: 100vh !important; } /* Max-height */ .max-h-10 { max-height: 0.625rem !important; } .max-h-20 { max-height: 1.25rem !important; } .max-h-30 { max-height: 1.875rem !important; } .max-h-40 { max-height: 2.5rem !important; } .max-h-50 { max-height: 3.125rem !important; } .max-h-60 { max-height: 3.75rem !important; } .max-h-70 { max-height: 4.375rem !important; } .max-h-80 { max-height: 5rem !important; } .max-h-90 { max-height: 5.625rem !important; } .max-h-100 { max-height: 6.25rem !important; } .max-h-200 { max-height: 12.5rem !important; } .max-h-300 { max-height: 18.75rem !important; } .max-h-400 { max-height: 25rem !important; } .max-h-500 { max-height: 31.25rem !important; } .max-h-600 { max-height: 37.5rem !important; } .max-h-700 { max-height: 43.75rem !important; } .max-h-800 { max-height: 50rem !important; } .max-h-900 { max-height: 56.25rem !important; } /* min height */ .min-h-10 { min-height: 0.625rem !important; } .min-h-20 { min-height: 1.25rem !important; } .min-h-30 { min-height: 1.875rem !important; } .min-h-40 { min-height: 2.5rem !important; } .min-h-50 { min-height: 3.125rem !important; } .min-h-60 { min-height: 3.75rem !important; } .min-h-70 { min-height: 4.375rem !important; } .min-h-80 { min-height: 5rem !important; } .min-h-90 { min-height: 5.625rem !important; } .min-h-100 { min-height: 6.25rem !important; } .min-h-200 { min-height: 12.5rem !important; } .min-h-300 { min-height: 18.75rem !important; } .min-h-400 { min-height: 25rem !important; } .min-h-500 { min-height: 31.25rem !important; } .min-h-600 { min-height: 37.5rem !important; } .min-h-700 { min-height: 43.75rem !important; } .min-h-800 { min-height: 50rem !important; } .min-h-900 { min-height: 56.25rem !important; } /* height */ /* Absolute heights (no max-height) */ .h-5 { height: 5px !important; } .h-10 { height: 10px !important; } .h-15 { height: 15px !important; } .h-20 { height: 20px !important; } /* Increments of 5 from 25-95 */ .h-25 { height: 25px !important; } .h-30 { height: 30px !important; } .h-35 { height: 35px !important; } .h-40 { height: 40px !important; } .h-45 { height: 45px !important; } .h-50 { height: 50px !important; } .h-55 { height: 55px !important; } .h-60 { height: 60px !important; } .h-65 { height: 65px !important; } .h-70 { height: 70px !important; } .h-75 { height: 75px !important; } .h-80 { height: 80px !important; } .h-85 { height: 85px !important; } .h-90 { height: 90px !important; } .h-95 { height: 95px !important; } .h-100 { height: 100px !important; } .h-150 { height: 150px !important; } .h-200 { height: 200px !important; } .h-250 { height: 250px !important; } .h-300 { height: 300px !important; } .h-350 { height: 350px !important; } .h-400 { height: 400px !important; } .h-450 { height: 450px !important; } .h-500 { height: 500px !important; } .h-550 { height: 550px !important; } .h-600 { height: 600px !important; } .h-650 { height: 650px !important; } .h-700 { height: 700px !important; } .h-750 { height: 750px !important; } .h-800 { height: 800px !important; } .h-850 { height: 850px !important; } .h-900 { height: 900px !important; } .h-950 { height: 950px !important; } .h-1000 { height: 1000px !important; } .h-1050 { height: 1050px !important; } .h-1100 { height: 1100px !important; } .h-1150 { height: 1150px !important; } .h-1200 { height: 1200px !important; } .h-1250 { height: 1250px !important; } .h-1300 { height: 1300px !important; } .h-1350 { height: 1350px !important; } .h-1400 { height: 1400px !important; } .h-1450 { height: 1450px !important; } .h-1500 { height: 1500px !important; } /* Relative height versions (max-height with height: 100%) */ .h-5-r { max-height: 5px; height: 100% !important; } .h-10-r { max-height: 10px; height: 100% !important; } .h-15-r { max-height: 15px; height: 100% !important; } .h-20-r { max-height: 20px; height: 100% !important; } /* Increments of 5 from 25-95 */ .h-25-r { max-height: 25px; height: 100% !important; } .h-30-r { max-height: 30px; height: 100% !important; } .h-35-r { max-height: 35px; height: 100% !important; } .h-40-r { max-height: 40px; height: 100% !important; } .h-45-r { max-height: 45px; height: 100% !important; } .h-50-r { max-height: 50px; height: 100% !important; } .h-55-r { max-height: 55px; height: 100% !important; } .h-60-r { max-height: 60px; height: 100% !important; } .h-65-r { max-height: 65px; height: 100% !important; } .h-70-r { max-height: 70px; height: 100% !important; } .h-75-r { max-height: 75px; height: 100% !important; } .h-80-r { max-height: 80px; height: 100% !important; } .h-85-r { max-height: 85px; height: 100% !important; } .h-90-r { max-height: 90px; height: 100% !important; } .h-95-r { max-height: 95px; height: 100% !important; } .h-100-r { max-height: 100px; height: 100% !important; } .h-150-r { max-height: 150px; height: 100% !important; } .h-200-r { max-height: 200px; height: 100% !important; } .h-250-r { max-height: 250px; height: 100% !important; } .h-300-r { max-height: 300px; height: 100% !important; } .h-350-r { max-height: 350px; height: 100% !important; } .h-400-r { max-height: 400px; height: 100% !important; } .h-450-r { max-height: 450px; height: 100% !important; } .h-500-r { max-height: 500px; height: 100% !important; } .h-550-r { max-height: 550px; height: 100% !important; } .h-600-r { max-height: 600px; height: 100% !important; } .h-650-r { max-height: 650px; height: 100% !important; } .h-700-r { max-height: 700px; height: 100% !important; } .h-750-r { max-height: 750px; height: 100% !important; } .h-800-r { max-height: 800px; height: 100% !important; } .h-850-r { max-height: 850px; height: 100% !important; } .h-900-r { max-height: 900px; height: 100% !important; } .h-950-r { max-height: 950px; height: 100% !important; } .h-1000-r { max-height: 1000px; height: 100% !important; } .h-1050-r { max-height: 1050px; height: 100% !important; } .h-1100-r { max-height: 1100px; height: 100% !important; } .h-1150-r { max-height: 1150px; height: 100% !important; } .h-1200-r { max-height: 1200px; height: 100% !important; } .h-1250-r { max-height: 1250px; height: 100% !important; } .h-1300-r { max-height: 1300px; height: 100% !important; } .h-1350-r { max-height: 1350px; height: 100% !important; } .h-1400-r { max-height: 1400px; height: 100% !important; } .h-1450-r { max-height: 1450px; height: 100% !important; } .h-1500-r { max-height: 1500px; height: 100% !important; } /* percentage */ .h-10-p { height: 10% !important; } .h-20-p { height: 20% !important; } .h-30-p { height: 30% !important; } .h-40-p { height: 40% !important; } .h-50-p { height: 50% !important; } .h-60-p { height: 60% !important; } .h-70-p { height: 70% !important; } .h-80-p { height: 80% !important; } .h-90-p { height: 90% !important; } .h-100-p , .h-full { height: 100% !important; } .height-10-p { height: 10%; } .height-20-p { height: 20%; } .height-30-p { height: 30%; } .height-40-p { height: 40%; } .height-50-p { height: 50%; } .height-60-p { height: 60%; } .height-70-p { height: 70%; } .height-80-p { height: 80%; } .height-90-p { height: 90%; } .width-100-p { width: 100%; } .height-10 { height: 10px; } .height-20 { height: 20px; } .height-30 { height: 30px; } .height-40 { height: 40px; } .height-50 { height: 50px; } .height-60 { height: 60px; } .height-70 { height: 70px; } .height-80 { height: 80px; } .height-90 { height: 90px; } .height-100 { height: 100px; } .height-200 { height: 200px; } .height-300 { height: 300px; } .height-400 { height: 400px; } .height-500 { height: 500px; } .height-600 { height: 600px; } .height-700 { height: 700px; } .height-800 { height: 800px; } .height-900 { height: 900px; } .height-100-vh { height: 100vh; } .height-10-max { max-height: 10px; } .height-20-max { max-width: 20px; } .height-30-max { width: 30px; } .height-40-max { max-height: 40px; } .height-50-max { max-width: 50px; } .height-60-max { width: 60px; } .height-70-max { max-height: 70px; } .height-80-max { max-height: 80px; } .height-90-max { max-height: 90px; } .height-100-max { max-height: 100px; } .height-200-max { max-height: 200px; } .height-300-max { max-height: 300px; } .height-400-max { max-height: 400px; } .height-500-max { max-height: 500px; } .height-600-max { max-height: 600px; } .height-700-max { max-height: 700px; } .height-800-max { max-height: 800px; } .height-900-max { max-height: 900px; } .height-10-min { min-height: 10px; } .height-20-min { min-height: 20px; } .height-30-min { min-height: 30px; } .height-40-min { min-height: 40px; } .height-50-min { min-height: 50px; } .height-60-min { min-height: 60px; } .height-70-min { min-height: 70px; } .height-80-min { min-height: 80px; } .height-90-min { min-height: 90px; } .height-100-min { min-height: 100px; } .height-200-min { min-height: 200px; } .height-300-min { min-height: 300px; } .height-400-min { min-height: 400px; } .height-500-min { min-height: 500px; } .height-600-min { min-height: 600px; } .height-700-min { min-height: 700px; } .height-800-min { min-height: 800px; } .height-900-min { min-height: 900px; } .height-min-vh { min-height: 100vh; } /*margin*/ .margin , .m{margin:var(--spacingScale)} .mt , .margin-top{margin-top:var(--spacingScale)} .mb , .margin-bottom{margin-bottom:var(--spacingScale)} .ml , .margin-left{margin-left:var(--spacingScale)} .mr , .margin-right{margin-right:var(--spacingScale)} .margin-top-5{margin:5px!important}.margin-top-10{margin-top:10px!important} .margin-top-20{margin-top:20px!important}.margin-top-30{margin-top:30px!important} .margin-top-40{margin-top:40px!important}.margin-top-50{margin-top:50px!important} .margin-top-60{margin-top:60px!important}.margin-top-70{margin-top:70px!important} .margin-top-80{margin-top:80px!important}.margin-top-90{margin-top:90px!important} .margin-top-100-{margin-top:-100px}.margin-top-10-{margin-top:-10px!important} .margin-top-20-{margin-top:-20px!important}.margin-top-30-{margin-top:-30px!important} .margin-top-40-{margin-top:-40px!important}.margin-top-50-{margin-top:-50px!important} .margin-top-60-{margin-top:-60px!important}.margin-top-70-{margin-top:-70px!important} .margin-top-80-{margin-top:-80px!important}.margin-top-90-{margin-top:-90px!important} .margin-top-100{margin-top:100px}.margin-bottom-5{margin:5px!important} .margin-10{margin:10px!important}.margin-20{margin:20px!important} .margin-30{margin:30px!important}.margin-40{margin:40px!important} .margin-50{margin:50px!important}.margin-bottom-10{margin-bottom:10px!important} .margin-bottom-20{margin-bottom:20px!important}.margin-bottom-30{margin-bottom:30px!important} .margin-bottom-40{margin-bottom:40px!important}.margin-bottom-50{margin-bottom:50px!important} .margin-bottom-60{margin-bottom:60px!important}.margin-bottom-70{margin-bottom:70px!important} .margin-bottom-80{margin-bottom:80px!important}.margin-bottom-90{margin-bottom:90px!important} .margin-bottom-100{margin-bottom:100px}.margin-left-10{margin-left:10px!important} .margin-left-20{margin-left:20px!important}.margin-left-30{margin-left:30px!important} .margin-left-40{margin-left:40px!important}.margin-left-50{margin-left:50px!important} .margin-left-60{margin-left:60px!important}.margin-left-70{margin-left:70px!important} .margin-left-80{margin-left:80px!important}.margin-left-90{margin-left:90px!important} .margin-left-100{margin-left:100px}.margin-right-10{margin-right:10px!important} .margin-right-20{margin-right:20px!important}.margin-right-30{margin-right:30px!important} .margin-right-40{margin-right:40px!important}.margin-right-50{margin-right:50px!important} .margin-right-60{margin-right:60px!important}.margin-right-70{margin-right:70px!important} .margin-right-80{margin-right:80px!important}.margin-right-90{margin-right:90px!important} .margin-right-100{margin-bottom:100px} /* --------- MARGIN --------- */ .margin , .m{margin: var(--spacingScale) !important;} .m-0 { margin: var(--space-0) !important; } .m-1 { margin: var(--space-1) !important; } .m-2 { margin: var(--space-2) !important; } .m-3 { margin: var(--space-3) !important; } .m-4 { margin: var(--space-4) !important; } .m-5 { margin: var(--space-5) !important; } .m-6 { margin: var(--space-6) !important; } .m-8 { margin: var(--space-8) !important; } .m-10 { margin: var(--space-10) !important; } .m-12 { margin: var(--space-12) !important; } .m-16 { margin: var(--space-16) !important; } .m-20 { margin: var(--space-20) !important; } .mt-0 { margin-top: var(--space-0) !important; } .mt-1 { margin-top: var(--space-1) !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; } .mt-6 { margin-top: var(--space-6) !important; } .mt-8 { margin-top: var(--space-8) !important; } .mt-10 { margin-top: var(--space-10) !important; } .mt-12 { margin-top: var(--space-12) !important; } .mt-16 { margin-top: var(--space-16) !important; } .mt-20 { margin-top: var(--space-20) !important; } .mr-0 { margin-right: var(--space-0) !important; } .mr-1 { margin-right: var(--space-1) !important; } .mr-2 { margin-right: var(--space-2) !important; } .mr-3 { margin-right: var(--space-3) !important; } .mr-4 { margin-right: var(--space-4) !important; } .mr-5 { margin-right: var(--space-5) !important; } .mr-6 { margin-right: var(--space-6) !important; } .mr-8 { margin-right: var(--space-8) !important; } .mr-10 { margin-right: var(--space-10) !important; } .mr-12 { margin-right: var(--space-12) !important; } .mr-16 { margin-right: var(--space-16) !important; } .mr-20 { margin-right: var(--space-20) !important; } .mb-0 { margin-bottom: var(--space-0) !important; } .mb-1 { margin-bottom: var(--space-1) !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-3 { margin-bottom: var(--space-3) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-5 { margin-bottom: var(--space-5) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .mb-8 { margin-bottom: var(--space-8) !important; } .mb-10 { margin-bottom: var(--space-10) !important; } .mb-12 { margin-bottom: var(--space-12) !important; } .mb-16 { margin-bottom: var(--space-16) !important; } .mb-20 { margin-bottom: var(--space-20) !important; } .ml-0 { margin-left: var(--space-0) !important; } .ml-1 { margin-left: var(--space-1) !important; } .ml-2 { margin-left: var(--space-2) !important; } .ml-3 { margin-left: var(--space-3) !important; } .ml-4 { margin-left: var(--space-4) !important; } .ml-5 { margin-left: var(--space-5) !important; } .ml-6 { margin-left: var(--space-6) !important; } .ml-8 { margin-left: var(--space-8) !important; } .ml-10 { margin-left: var(--space-10) !important; } .ml-12 { margin-left: var(--space-12) !important; } .ml-16 { margin-left: var(--space-16) !important; } .ml-20 { margin-left: var(--space-20) !important; } .mt-0- { margin-top: calc(var(--space-0) * -1) !important; } .mt-1- { margin-top: calc(var(--space-1) * -1) !important; } .mt-2- { margin-top: calc(var(--space-2) * -1) !important; } .mt-3- { margin-top: calc(var(--space-3) * -1) !important; } .mt-4- { margin-top: calc(var(--space-4) * -1) !important; } .mt-5- { margin-top: calc(var(--space-5) * -1) !important; } .mt-6- { margin-top: calc(var(--space-6) * -1) !important; } .mt-8- { margin-top: calc(var(--space-8) * -1) !important; } .mt-10- { margin-top: calc(var(--space-10) * -1) !important; } .mt-12- { margin-top: calc(var(--space-12) * -1) !important; } .mt-16- { margin-top: calc(var(--space-16) * -1) !important; } .mt-20- { margin-top: calc(var(--space-20) * -1) !important; } .mr-0- { margin-right: calc(var(--space-0) * -1) !important; } .mr-1- { margin-right: calc(var(--space-1) * -1) !important; } .mr-2- { margin-right: calc(var(--space-2) * -1) !important; } .mr-3- { margin-right: calc(var(--space-3) * -1) !important; } .mr-4- { margin-right: calc(var(--space-4) * -1) !important; } .mr-5- { margin-right: calc(var(--space-5) * -1) !important; } .mr-6- { margin-right: calc(var(--space-6) * -1) !important; } .mr-8- { margin-right: calc(var(--space-8) * -1) !important; } .mr-10- { margin-right: calc(var(--space-10) * -1) !important; } .mr-12- { margin-right: calc(var(--space-12) * -1) !important; } .mr-16- { margin-right: calc(var(--space-16) * -1) !important; } .mr-20- { margin-right: calc(var(--space-20) * -1) !important; } .mb-0- { margin-bottom: calc(var(--space-0) * -1) !important; } .mb-1- { margin-bottom: calc(var(--space-1) * -1) !important; } .mb-2- { margin-bottom: calc(var(--space-2) * -1) !important; } .mb-3- { margin-bottom: calc(var(--space-3) * -1) !important; } .mb-4- { margin-bottom: calc(var(--space-4) * -1) !important; } .mb-5- { margin-bottom: calc(var(--space-5) * -1) !important; } .mb-6- { margin-bottom: calc(var(--space-6) * -1) !important; } .mb-8- { margin-bottom: calc(var(--space-8) * -1) !important; } .mb-10- { margin-bottom: calc(var(--space-10) * -1) !important; } .mb-12- { margin-bottom: calc(var(--space-12) * -1) !important; } .mb-16- { margin-bottom: calc(var(--space-16) * -1) !important; } .mb-20- { margin-bottom: calc(var(--space-20) * -1) !important; } .ml-0- { margin-left: calc(var(--space-0) * -1) !important; } .ml-1- { margin-left: calc(var(--space-1) * -1) !important; } .ml-2- { margin-left: calc(var(--space-2) * -1) !important; } .ml-3- { margin-left: calc(var(--space-3) * -1) !important; } .ml-4- { margin-left: calc(var(--space-4) * -1) !important; } .ml-5- { margin-left: calc(var(--space-5) * -1) !important; } .ml-6- { margin-left: calc(var(--space-6) * -1) !important; } .ml-8- { margin-left: calc(var(--space-8) * -1) !important; } .ml-10- { margin-left: calc(var(--space-10) * -1) !important; } .ml-12- { margin-left: calc(var(--space-12) * -1) !important; } .ml-16- { margin-left: calc(var(--space-16) * -1) !important; } .ml-20- { margin-left: calc(var(--space-20) * -1) !important; } /* --------- PADDING --------- */ .padding , .p{padding:var(--spacingScale)} .pt{padding-top: var(--spacingScale);} .pr{padding-right: var(--spacingScale);} .pb{padding-bottom: var(--spacingScale);} .pl{padding-left: var(--spacingScale);} .p-0 { padding: var(--space-0) !important; } .p-1 { padding: var(--space-1) !important; } .p-2 { padding: var(--space-2) !important; } .p-3 { padding: var(--space-3) !important; } .p-4 { padding: var(--space-4) !important; } .p-5 { padding: var(--space-5) !important; } .p-6 { padding: var(--space-6) !important; } .p-8 { padding: var(--space-8) !important; } .p-10 { padding: var(--space-10) !important; } .p-12 { padding: var(--space-12) !important; } .p-16 { padding: var(--space-16) !important; } .p-20 { padding: var(--space-20) !important; } .pt-0 { padding-top: var(--space-0) !important; } .pt-1 { padding-top: var(--space-1) !important; } .pt-2 { padding-top: var(--space-2) !important; } .pt-3 { padding-top: var(--space-3) !important; } .pt-4 { padding-top: var(--space-4) !important; } .pt-5 { padding-top: var(--space-5) !important; } .pt-6 { padding-top: var(--space-6) !important; } .pt-8 { padding-top: var(--space-8) !important; } .pt-10 { padding-top: var(--space-10) !important; } .pt-12 { padding-top: var(--space-12) !important; } .pt-16 { padding-top: var(--space-16) !important; } .pt-20 { padding-top: var(--space-20) !important; } .pr-0 { padding-right: var(--space-0) !important; } .pr-1 { padding-right: var(--space-1) !important; } .pr-2 { padding-right: var(--space-2) !important; } .pr-3 { padding-right: var(--space-3) !important; } .pr-4 { padding-right: var(--space-4) !important; } .pr-5 { padding-right: var(--space-5) !important; } .pr-6 { padding-right: var(--space-6) !important; } .pr-8 { padding-right: var(--space-8) !important; } .pr-10 { padding-right: var(--space-10) !important; } .pr-12 { padding-right: var(--space-12) !important; } .pr-16 { padding-right: var(--space-16) !important; } .pr-20 { padding-right: var(--space-20) !important; } .pb-0 { padding-bottom: var(--space-0) !important; } .pb-1 { padding-bottom: var(--space-1) !important; } .pb-2 { padding-bottom: var(--space-2) !important; } .pb-3 { padding-bottom: var(--space-3) !important; } .pb-4 { padding-bottom: var(--space-4) !important; } .pb-5 { padding-bottom: var(--space-5) !important; } .pb-6 { padding-bottom: var(--space-6) !important; } .pb-8 { padding-bottom: var(--space-8) !important; } .pb-10 { padding-bottom: var(--space-10) !important; } .pb-12 { padding-bottom: var(--space-12) !important; } .pb-16 { padding-bottom: var(--space-16) !important; } .pb-20 { padding-bottom: var(--space-20) !important; } .pl-0 { padding-left: var(--space-0) !important; } .pl-1 { padding-left: var(--space-1) !important; } .pl-2 { padding-left: var(--space-2) !important; } .pl-3 { padding-left: var(--space-3) !important; } .pl-4 { padding-left: var(--space-4) !important; } .pl-5 { padding-left: var(--space-5) !important; } .pl-6 { padding-left: var(--space-6) !important; } .pl-8 { padding-left: var(--space-8) !important; } .pl-10 { padding-left: var(--space-10) !important; } .pl-12 { padding-left: var(--space-12) !important; } .pl-16 { padding-left: var(--space-16) !important; } .pl-20 { padding-left: var(--space-20) !important; } .padding{padding: var(--spacingScale) !important}.padding-5{padding:5px!important} .padding-top-10{padding-top:10px!important}.padding-top-20{padding-top:20px!important} .padding-top-30{padding-top:30px!important}.padding-top-40{padding-top:40px!important} .padding-top-50{padding-top:50px!important}.padding-top-60{padding-top:60px!important} .padding-top-70{padding-top:70px!important}.padding-top-80{padding-top:80px!important} .padding-top-90{padding-top:90px!important}.padding-top-100{padding-top:100px} .padding-10{padding:10px!important}.padding-20{padding:20px!important} .padding-30{padding:30px!important}.padding-40{padding:40px!important} .padding-50{padding:50px!important}.padding-60{padding:60px!important} .padding-70{padding:70px!important}.padding-80{padding:80px!important} .padding-90{padding:90px!important}.padding-100{padding:100px} .padding-bottom-10{padding-bottom:10px!important}.padding-bottom-20{padding-bottom:20px!important} .padding-bottom-30{padding-bottom:30px!important}.padding-bottom-40{padding-bottom:40px!important} .padding-bottom-50{padding-bottom:50px!important}.padding-bottom-60{padding-bottom:60px!important} .padding-bottom-70{padding-bottom:70px!important}.padding-bottom-80{padding-bottom:80px!important} .padding-bottom-90{padding-bottom:90px!important}.padding-bottom-100{padding-bottom:100px} .padding-left-10{padding-left:10px!important}.padding-left-20{padding-left:20px!important} .padding-left-30{padding-left:30px!important}.padding-left-40{padding-left:40px!important} .padding-left-50{padding-left:50px!important}.padding-left-60{padding-left:60px!important} .padding-left-70{padding-left:70px!important}.padding-left-80{padding-left:80px!important} .padding-left-90{padding-left:90px!important}.padding-left-100{padding-left:100px} .padding-right-10{padding-right:10px!important}.padding-right-20{padding-right:20px!important} .padding-right-30{padding-right:30px!important}.padding-right-40{padding-right:40px!important} .padding-right-50{padding-right:50px!important}.padding-right-60{padding-right:60px!important} .padding-right-70{padding-right:70px!important}.padding-right-80{padding-right:80px!important} .padding-right-90{padding-right:90px!important}.padding-right-100{padding-bottom:100px} /* carousel */ /* Hide scrollbar for all carousel containers */ .scrollbar-hide { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .carousel-wrapper{width: 100%; position: relative;} /* Scrollable carousel container */ .carousel-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .carouselLeft{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 10; } .carouselRight{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10; } .carousel-item {scroll-snap-align: start;flex: 0 0 auto;} /* small screens */ @media only screen and (max-width: 767px) { .col.sm-order-1 { order: 1; } .col.sm-order-2 { order: 2; } .col.sm-order-3 { order: 3; } .col.sm-order-4 { order: 4; } .col.sm-order-5 { order: 5; } .col.sm-order-6 { order: 6; } .col.sm-order-7 { order: 7; } .col.sm-order-8 { order: 8; } .col.sm-order-9 { order: 9; } .col.sm-order-10 { order: 10; } .col.sm-order-11 { order: 11; } .col.sm-order-12 { order: 12; } /* cols and grid */ .col.sm-12 { flex: 99.99999%; -ms-flex: 0 0 99.99999%; } .col.sm-11 { flex: 0 0 91.66666%; -ms-flex: 0 0 91.66666%; } .col.sm-10 { flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; } .col.sm-9 { flex: 0 0 74.99999%; -ms-flex: 0 0 74.99999%; } .col.sm-8 { flex: 0 0 66.66666%; -ms-flex: 0 0 66.66666%; } .col.sm-7 { flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; } .col.sm-6 { flex: 0 0 49.99999%; -ms-flex: 0 0 49.99999%; } .col.sm-5 { flex: 0 0 41.66666%; -ms-flex: 0 0 41.66666%; } .col.sm-4 { flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; } .col.sm-3 { flex: 0 0 24.99999%; -ms-flex: 0 0 24.99999%; } .col.sm-2 { flex: 0 0 16.66666%; -ms-flex: 0 0 16.66666%; } .col.sm-1 { flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; } /* responsive small */ /* i added .responsive medium so that it will affect the class on small screesn and not only medium */ .responsiveSmall , .responsiveMedium{ flex-direction: column !important; } .row-flex.responsiveSmall , .row-flex.responsiveMedium{ align-items: stretch; } .card.responsiveMedium , .card.responsiveSmall{ width: fit-content; } /* hiding and showing */ .hide-small { display: none; } .show-small { display: block; } .hide-medium { display: block; } .hide-medium-down { display: none; } .show-medium { display: none; } .show-medium-up { display: none; } .show-medium-down { display: block; } .hide-medium-up { display: block; } .show-large { display: none; } } .row { display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; width: 100%; flex-direction: row; } .col{ flex: 1 0 0%; } .row.gap .col{ padding: 0.5rem; } /* medium screens */ @media only screen and (min-width: 768px) and (max-width: 991px) { /* medium screen cols */ /* For md-order */ .col.md-order-1 { order: 1; } .col.md-order-2 { order: 2; } .col.md-order-3 { order: 3; } .col.md-order-4 { order: 4; } .col.md-order-5 { order: 5; } .col.md-order-6 { order: 6; } .col.md-order-7 { order: 7; } .col.md-order-8 { order: 8; } .col.md-order-9 { order: 9; } .col.md-order-10 { order: 10; } .col.md-order-11 { order: 11; } .col.md-order-12 { order: 12; } .col.md-12 { flex: 99.99999%; -ms-flex: 0 0 99.99999%; } .col.md-11 { flex: 0 0 91.66666%; -ms-flex: 0 0 91.66666%; } .col.md-10 { flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; } .col.md-9 { flex: 0 0 74.99999%; -ms-flex: 0 0 74.99999%; } .col.md-8 { flex: 0 0 66.66666%; -ms-flex: 0 0 66.66666%; } .col.md-7 { flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; } .col.md-6 { flex: 0 0 49.99999%; -ms-flex: 0 0 49.99999%; } .col.md-5 { flex: 0 0 41.66666%; -ms-flex: 0 0 41.66666%; } .col.md-4 { flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; } .col.md-3 { flex: 0 0 24.99999%; -ms-flex: 0 0 24.99999%; } .col.md-2 { flex: 0 0 16.66666%; -ms-flex: 0 0 16.66666%; } .col.md-1 { flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; } .responsiveMedium { flex-direction: column !important; } .row-flex.responsiveMedium { align-items: stretch; } .hide-medium { display: none; } .hide-small { display: block; } .show-small { display: none; } .hide-medium-down { display: none; } .show-medium-down { display: block; } .hide-medium-up { display: none; } .show-medium { display: block; } .show-large { display: none; } } /* large screens */ @media screen and (min-width: 992px) { /* For lg-order */ .col.lg-order-1 { order: 1; } .col.lg-order-2 { order: 2; } .col.lg-order-3 { order: 3; } .col.lg-order-4 { order: 4; } .col.lg-order-5 { order: 5; } .col.lg-order-6 { order: 6; } .col.lg-order-7 { order: 7; } .col.lg-order-8 { order: 8; } .col.lg-order-9 { order: 9; } .col.lg-order-10 { order: 10; } .col.lg-order-11 { order: 11; } .col.lg-order-12 { order: 12; } /* cols */ .col.lg-12 { flex: 99.99999%; -ms-flex: 0 0 99.99999%; } .col.lg-11 { flex: 0 0 91.66666%; -ms-flex: 0 0 91.66666%; } .col.lg-10 { flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; } .col.lg-9 { flex: 0 0 74.99999%; -ms-flex: 0 0 74.99999%; } .col.lg-8 { flex: 0 0 66.66666%; -ms-flex: 0 0 66.66666%; } .col.lg-7 { flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; } .col.lg-6 { flex: 0 0 49.99999%; -ms-flex: 0 0 49.99999%; } .col.lg-5 { flex: 0 0 41.66666%; -ms-flex: 0 0 41.66666%; } .col.lg-4 { flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; } .col.lg-3 { flex: 0 0 24.99999%; -ms-flex: 0 0 24.99999%; } .col.lg-2 { flex: 0 0 16.66666%; -ms-flex: 0 0 16.66666%; } .col.lg-1 { flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; } /* showing and hiding */ .show-large { display: block; } .hide-medium { display: block; } .hide-small { display: block; } .show-small { display: none; } .hide-medium-down { display: block; } .show-medium { display: none; } .hide-large { display: none; } .show-medium-down { display: none; } .hide-medium-up { display: none; } } /* Text Area */ .ql-container { box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 13px; height: 100%; margin: 0px; position: relative; } .ql-container.ql-disabled .ql-tooltip { visibility: hidden; } .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { pointer-events: none; } .ql-clipboard { left: -100000px; height: 1px; overflow-y: hidden; position: absolute; top: 50%; } .ql-clipboard p { margin: 0; padding: 0; } .ql-editor { box-sizing: border-box; line-height: 1.42; height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; tab-size: 4; -moz-tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word; } .ql-editor > * { cursor: text; } .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol, .ql-editor ul { padding-left: 1.5em; } .ql-editor ol > li, .ql-editor ul > li { list-style-type: none; } .ql-editor ul > li::before { content: '\2022'; } .ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] { pointer-events: none; } .ql-editor ul[data-checked=true] > li *, .ql-editor ul[data-checked=false] > li * { pointer-events: all; } .ql-editor ul[data-checked=true] > li::before, .ql-editor ul[data-checked=false] > li::before { color: #777; cursor: pointer; pointer-events: all; } .ql-editor ul[data-checked=true] > li::before { content: '\2611'; } .ql-editor ul[data-checked=false] > li::before { content: '\2610'; } .ql-editor li::before { display: inline-block; white-space: nowrap; width: 1.2em; } .ql-editor li:not(.ql-direction-rtl)::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; } .ql-editor li.ql-direction-rtl::before { margin-left: 0.3em; margin-right: -1.5em; } .ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) { padding-left: 1.5em; } .ql-editor ol li.ql-direction-rtl, .ql-editor ul li.ql-direction-rtl { padding-right: 1.5em; } .ql-editor ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .ql-editor ol li:before { content: counter(list-0, decimal) '. '; } .ql-editor ol li.ql-indent-1 { counter-increment: list-1; } .ql-editor ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .ql-editor ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-2 { counter-increment: list-2; } .ql-editor ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .ql-editor ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-3 { counter-increment: list-3; } .ql-editor ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .ql-editor ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-4 { counter-increment: list-4; } .ql-editor ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .ql-editor ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-5 { counter-increment: list-5; } .ql-editor ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .ql-editor ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-6 { counter-increment: list-6; } .ql-editor ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .ql-editor ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .ql-editor ol li.ql-indent-7 { counter-increment: list-7; } .ql-editor ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .ql-editor ol li.ql-indent-7 { counter-reset: list-8 list-9; } .ql-editor ol li.ql-indent-8 { counter-increment: list-8; } .ql-editor ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .ql-editor ol li.ql-indent-8 { counter-reset: list-9; } .ql-editor ol li.ql-indent-9 { counter-increment: list-9; } .ql-editor ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; } .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3em; } .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 4.5em; } .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; } .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; } .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 6em; } .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 7.5em; } .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; } .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; } .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 9em; } .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 10.5em; } .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; } .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; } .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 12em; } .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 13.5em; } .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; } .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; } .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 15em; } .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 16.5em; } .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; } .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; } .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 18em; } .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 19.5em; } .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; } .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; } .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 21em; } .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 22.5em; } .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; } .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; } .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 24em; } .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 25.5em; } .ql-editor .ql-indent-9:not(.ql-direction-rtl) { padding-left: 27em; } .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 28.5em; } .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 27em; } .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 28.5em; } .ql-editor .ql-video { display: block; max-width: 100%; } .ql-editor .ql-video.ql-align-center { margin: 0 auto; } .ql-editor .ql-video.ql-align-right { margin: 0 0 0 auto; } .ql-editor .ql-bg-black { background-color: #000; } .ql-editor .ql-bg-red { background-color: #e60000; } .ql-editor .ql-bg-orange { background-color: #f90; } .ql-editor .ql-bg-yellow { background-color: #ff0; } .ql-editor .ql-bg-green { background-color: #008a00; } .ql-editor .ql-bg-blue { background-color: #06c; } .ql-editor .ql-bg-purple { background-color: #93f; } .ql-editor .ql-color-white { color: #fff; } .ql-editor .ql-color-red { color: #e60000; } .ql-editor .ql-color-orange { color: #f90; } .ql-editor .ql-color-yellow { color: #ff0; } .ql-editor .ql-color-green { color: #008a00; } .ql-editor .ql-color-blue { color: #06c; } .ql-editor .ql-color-purple { color: #93f; } .ql-editor .ql-font-serif { font-family: Georgia, Times New Roman, serif; } .ql-editor .ql-font-monospace { font-family: Monaco, Courier New, monospace; } .ql-editor .ql-size-small { font-size: 0.75em; } .ql-editor .ql-size-large { font-size: 1.5em; } .ql-editor .ql-size-huge { font-size: 2.5em; } .ql-editor .ql-direction-rtl { direction: rtl; text-align: inherit; } .ql-editor .ql-align-center { text-align: center; } .ql-editor .ql-align-justify { text-align: justify; } .ql-editor .ql-align-right { text-align: right; } .ql-editor.ql-blank::before { color: rgba(0,0,0,0.6); content: attr(data-placeholder); font-style: italic; left: 15px; pointer-events: none; position: absolute; right: 15px; } .ql-bubble.ql-toolbar:after, .ql-bubble .ql-toolbar:after { clear: both; content: ''; display: table; } .ql-bubble.ql-toolbar button, .ql-bubble .ql-toolbar button { background: none; border: none; cursor: pointer; display: inline-block; float: left; height: 24px; padding: 3px 5px; width: 28px; } .ql-bubble.ql-toolbar button svg, .ql-bubble .ql-toolbar button svg { float: left; height: 100%; } .ql-bubble.ql-toolbar button:active:hover, .ql-bubble .ql-toolbar button:active:hover { outline: none; } .ql-bubble.ql-toolbar input.ql-image[type=file], .ql-bubble .ql-toolbar input.ql-image[type=file] { display: none; } .ql-bubble.ql-toolbar button:hover, .ql-bubble .ql-toolbar button:hover, .ql-bubble.ql-toolbar button:focus, .ql-bubble .ql-toolbar button:focus, .ql-bubble.ql-toolbar button.ql-active, .ql-bubble .ql-toolbar button.ql-active, .ql-bubble.ql-toolbar .ql-picker-label:hover, .ql-bubble .ql-toolbar .ql-picker-label:hover, .ql-bubble.ql-toolbar .ql-picker-label.ql-active, .ql-bubble .ql-toolbar .ql-picker-label.ql-active, .ql-bubble.ql-toolbar .ql-picker-item:hover, .ql-bubble .ql-toolbar .ql-picker-item:hover, .ql-bubble.ql-toolbar .ql-picker-item.ql-selected, .ql-bubble .ql-toolbar .ql-picker-item.ql-selected { color: #fff; } .ql-bubble.ql-toolbar button:hover .ql-fill, .ql-bubble .ql-toolbar button:hover .ql-fill, .ql-bubble.ql-toolbar button:focus .ql-fill, .ql-bubble .ql-toolbar button:focus .ql-fill, .ql-bubble.ql-toolbar button.ql-active .ql-fill, .ql-bubble .ql-toolbar button.ql-active .ql-fill, .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: #fff; } .ql-bubble.ql-toolbar button:hover .ql-stroke, .ql-bubble .ql-toolbar button:hover .ql-stroke, .ql-bubble.ql-toolbar button:focus .ql-stroke, .ql-bubble .ql-toolbar button:focus .ql-stroke, .ql-bubble.ql-toolbar button.ql-active .ql-stroke, .ql-bubble .ql-toolbar button.ql-active .ql-stroke, .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-bubble.ql-toolbar button:hover .ql-stroke-miter, .ql-bubble .ql-toolbar button:hover .ql-stroke-miter, .ql-bubble.ql-toolbar button:focus .ql-stroke-miter, .ql-bubble .ql-toolbar button:focus .ql-stroke-miter, .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter, .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter, .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: #fff; } @media (pointer: coarse) { .ql-bubble.ql-toolbar button:hover:not(.ql-active), .ql-bubble .ql-toolbar button:hover:not(.ql-active) { color: #ccc; } .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { fill: #ccc; } .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { stroke: #ccc; } } .ql-bubble { box-sizing: border-box; } .ql-bubble * { box-sizing: border-box; } .ql-bubble .ql-hidden { display: none; } .ql-bubble .ql-out-bottom, .ql-bubble .ql-out-top { visibility: hidden; } .ql-bubble .ql-tooltip { position: absolute; transform: translateY(10px); } .ql-bubble .ql-tooltip a { cursor: pointer; text-decoration: none; } .ql-bubble .ql-tooltip.ql-flip { transform: translateY(-10px); } .ql-bubble .ql-formats { display: inline-block; vertical-align: middle; } .ql-bubble .ql-formats:after { clear: both; content: ''; display: table; } .ql-bubble .ql-stroke { fill: none; stroke: #ccc; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ql-bubble .ql-stroke-miter { fill: none; stroke: #ccc; stroke-miterlimit: 10; stroke-width: 2; } .ql-bubble .ql-fill, .ql-bubble .ql-stroke.ql-fill { fill: #ccc; } .ql-bubble .ql-empty { fill: none; } .ql-bubble .ql-even { fill-rule: evenodd; } .ql-bubble .ql-thin, .ql-bubble .ql-stroke.ql-thin { stroke-width: 1; } .ql-bubble .ql-transparent { opacity: 0.4; } .ql-bubble .ql-direction svg:last-child { display: none; } .ql-bubble .ql-direction.ql-active svg:last-child { display: inline; } .ql-bubble .ql-direction.ql-active svg:first-child { display: none; } .ql-bubble .ql-editor h1 { font-size: 2em; } .ql-bubble .ql-editor h2 { font-size: 1.5em; } .ql-bubble .ql-editor h3 { font-size: 1.17em; } .ql-bubble .ql-editor h4 { font-size: 1em; } .ql-bubble .ql-editor h5 { font-size: 0.83em; } .ql-bubble .ql-editor h6 { font-size: 0.67em; } .ql-bubble .ql-editor a { text-decoration: underline; } .ql-bubble .ql-editor blockquote { border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px; } .ql-bubble .ql-editor code, .ql-bubble .ql-editor pre { background-color: #f0f0f0; border-radius: 3px; } .ql-bubble .ql-editor pre { white-space: pre-wrap; margin-bottom: 5px; margin-top: 5px; padding: 5px 10px; } .ql-bubble .ql-editor code { font-size: 85%; padding: 2px 4px; } .ql-bubble .ql-editor pre.ql-syntax { background-color: #23241f; color: #f8f8f2; overflow: visible; } .ql-bubble .ql-editor img { max-width: 100%; } .ql-bubble .ql-picker { color: #ccc; display: inline-block; float: left; font-size: 14px; font-weight: 500; height: 24px; position: relative; vertical-align: middle; } .ql-bubble .ql-picker-label { cursor: pointer; display: inline-block; height: 100%; padding-left: 8px; padding-right: 2px; position: relative; width: 100%; } .ql-bubble .ql-picker-label::before { display: inline-block; line-height: 22px; } .ql-bubble .ql-picker-options { background-color: #444; display: none; min-width: 100%; padding: 4px 8px; position: absolute; white-space: nowrap; } .ql-bubble .ql-picker-options .ql-picker-item { cursor: pointer; display: block; padding-bottom: 5px; padding-top: 5px; } .ql-bubble .ql-picker.ql-expanded .ql-picker-label { color: #777; z-index: 2; } .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: #777; } .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: #777; } .ql-bubble .ql-picker.ql-expanded .ql-picker-options { display: block; margin-top: -1px; top: 100%; z-index: 1; } .ql-bubble .ql-color-picker, .ql-bubble .ql-icon-picker { width: 28px; } .ql-bubble .ql-color-picker .ql-picker-label, .ql-bubble .ql-icon-picker .ql-picker-label { padding: 2px 4px; } .ql-bubble .ql-color-picker .ql-picker-label svg, .ql-bubble .ql-icon-picker .ql-picker-label svg { right: 4px; } .ql-bubble .ql-icon-picker .ql-picker-options { padding: 4px 0px; } .ql-bubble .ql-icon-picker .ql-picker-item { height: 24px; width: 24px; padding: 2px 4px; } .ql-bubble .ql-color-picker .ql-picker-options { padding: 3px 5px; width: 152px; } .ql-bubble .ql-color-picker .ql-picker-item { border: 1px solid transparent; float: left; height: 16px; margin: 2px; padding: 0px; width: 16px; } .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { position: absolute; margin-top: -9px; right: 0; top: 50%; width: 18px; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { content: attr(data-label); } .ql-bubble .ql-picker.ql-header { width: 98px; } .ql-bubble .ql-picker.ql-header .ql-picker-label::before, .ql-bubble .ql-picker.ql-header .ql-picker-item::before { content: 'Normal'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'Heading 1'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Heading 2'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Heading 3'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: 'Heading 4'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: 'Heading 5'; } .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: 'Heading 6'; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { font-size: 2em; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { font-size: 1.5em; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { font-size: 1.17em; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { font-size: 1em; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { font-size: 0.83em; } .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { font-size: 0.67em; } .ql-bubble .ql-picker.ql-font { width: 108px; } .ql-bubble .ql-picker.ql-font .ql-picker-label::before, .ql-bubble .ql-picker.ql-font .ql-picker-item::before { content: 'Sans Serif'; } .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { content: 'Serif'; } .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { content: 'Monospace'; } .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { font-family: Georgia, Times New Roman, serif; } .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { font-family: Monaco, Courier New, monospace; } .ql-bubble .ql-picker.ql-size { width: 98px; } .ql-bubble .ql-picker.ql-size .ql-picker-label::before, .ql-bubble .ql-picker.ql-size .ql-picker-item::before { content: 'Normal'; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: 'Small'; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: 'Large'; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: 'Huge'; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before { font-size: 10px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before { font-size: 18px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { font-size: 32px; } .ql-bubble .ql-color-picker.ql-background .ql-picker-item { background-color: #fff; } .ql-bubble .ql-color-picker.ql-color .ql-picker-item { background-color: #000; } .ql-bubble .ql-toolbar .ql-formats { margin: 8px 12px 8px 0px; } .ql-bubble .ql-toolbar .ql-formats:first-child { margin-left: 12px; } .ql-bubble .ql-color-picker svg { margin: 1px; } .ql-bubble .ql-color-picker .ql-picker-item.ql-selected, .ql-bubble .ql-color-picker .ql-picker-item:hover { border-color: #fff; } .ql-bubble .ql-tooltip { background-color: #444; border-radius: 25px; color: #fff; z-index: 5 !important; } .ql-bubble .ql-tooltip-arrow { border-left: 6px solid transparent; border-right: 6px solid transparent; content: " "; display: block; left: 50%; margin-left: -6px; position: absolute; } .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow { border-bottom: 6px solid #444; top: -6px; } .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow { border-top: 6px solid #444; bottom: -6px; } .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor { display: block; } .ql-bubble .ql-tooltip.ql-editing .ql-formats { visibility: hidden; } .ql-bubble .ql-tooltip-editor { display: none; } .ql-bubble .ql-tooltip-editor input[type=text] { background: transparent; border: none; color: #fff; font-size: 13px; height: 100%; outline: none; padding: 10px 20px; position: absolute; width: 100%; } .ql-bubble .ql-tooltip-editor a { top: 10px; position: absolute; right: 20px; } .ql-bubble .ql-tooltip-editor a:before { color: #ccc; content: "\D7"; font-size: 16px; font-weight: bold; } .ql-container.ql-bubble:not(.ql-disabled) a { position: relative; white-space: nowrap; } .ql-container.ql-bubble:not(.ql-disabled) a::before { background-color: #444; border-radius: 15px; top: -5px; font-size: 12px; color: #fff; content: attr(href); font-weight: normal; overflow: hidden; padding: 5px 15px; text-decoration: none; z-index: 1; } .ql-container.ql-bubble:not(.ql-disabled) a::after { border-top: 6px solid #444; border-left: 6px solid transparent; border-right: 6px solid transparent; top: 0; content: " "; height: 0; width: 0; } .ql-container.ql-bubble:not(.ql-disabled) a::before, .ql-container.ql-bubble:not(.ql-disabled) a::after { left: 0; margin-left: 50%; position: absolute; transform: translate(-50%, -100%); transition: visibility 0s ease 200ms; visibility: hidden; } .ql-container.ql-bubble:not(.ql-disabled) a:hover::before, .ql-container.ql-bubble:not(.ql-disabled) a:hover::after { visibility: visible; } /* text editor snow */ .ql-container { box-sizing: border-box; font-size: 13px; height: 100%; margin: 0px; position: relative; } .ql-container.ql-disabled .ql-tooltip { visibility: hidden; } .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { pointer-events: none; } .ql-clipboard { left: -100000px; height: 1px; overflow-y: hidden; position: absolute; top: 50%; } .ql-clipboard p { margin: 0; padding: 0; } .ql-editor { box-sizing: border-box; line-height: 1.42; height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; tab-size: 4; -moz-tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word; } .ql-editor > * { cursor: text; } .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol, .ql-editor ul { padding-left: 1.5em; } .ql-editor ol > li, .ql-editor ul > li { list-style-type: none; } .ql-editor ul > li::before { content: '\2022'; } .ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] { pointer-events: none; } .ql-editor ul[data-checked=true] > li *, .ql-editor ul[data-checked=false] > li * { pointer-events: all; } .ql-editor ul[data-checked=true] > li::before, .ql-editor ul[data-checked=false] > li::before { color: #777; cursor: pointer; pointer-events: all; } .ql-editor ul[data-checked=true] > li::before { content: '\2611'; } .ql-editor ul[data-checked=false] > li::before { content: '\2610'; } .ql-editor li::before { display: inline-block; white-space: nowrap; width: 1.2em; } .ql-editor li:not(.ql-direction-rtl)::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; } .ql-editor li.ql-direction-rtl::before { margin-left: 0.3em; margin-right: -1.5em; } .ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) { padding-left: 1.5em; } .ql-editor ol li.ql-direction-rtl, .ql-editor ul li.ql-direction-rtl { padding-right: 1.5em; } .ql-editor ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .ql-editor ol li:before { content: counter(list-0, decimal) '. '; } .ql-editor ol li.ql-indent-1 { counter-increment: list-1; } .ql-editor ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .ql-editor ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-2 { counter-increment: list-2; } .ql-editor ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .ql-editor ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-3 { counter-increment: list-3; } .ql-editor ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .ql-editor ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-4 { counter-increment: list-4; } .ql-editor ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .ql-editor ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-5 { counter-increment: list-5; } .ql-editor ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .ql-editor ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .ql-editor ol li.ql-indent-6 { counter-increment: list-6; } .ql-editor ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .ql-editor ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .ql-editor ol li.ql-indent-7 { counter-increment: list-7; } .ql-editor ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .ql-editor ol li.ql-indent-7 { counter-reset: list-8 list-9; } .ql-editor ol li.ql-indent-8 { counter-increment: list-8; } .ql-editor ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .ql-editor ol li.ql-indent-8 { counter-reset: list-9; } .ql-editor ol li.ql-indent-9 { counter-increment: list-9; } .ql-editor ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; } .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3em; } .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 4.5em; } .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; } .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; } .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 6em; } .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 7.5em; } .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; } .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; } .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 9em; } .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 10.5em; } .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; } .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; } .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 12em; } .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 13.5em; } .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; } .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; } .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 15em; } .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 16.5em; } .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; } .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; } .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 18em; } .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 19.5em; } .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; } .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; } .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 21em; } .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 22.5em; } .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; } .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; } .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 24em; } .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 25.5em; } .ql-editor .ql-indent-9:not(.ql-direction-rtl) { padding-left: 27em; } .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 28.5em; } .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 27em; } .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 28.5em; } .ql-editor .ql-video { display: block; max-width: 100%; } .ql-editor .ql-video.ql-align-center { margin: 0 auto; } .ql-editor .ql-video.ql-align-right { margin: 0 0 0 auto; } .ql-editor .ql-bg-black { background-color: #000; } .ql-editor .ql-bg-red { background-color: #e60000; } .ql-editor .ql-bg-orange { background-color: #f90; } .ql-editor .ql-bg-yellow { background-color: #ff0; } .ql-editor .ql-bg-green { background-color: #008a00; } .ql-editor .ql-bg-blue { background-color: #06c; } .ql-editor .ql-bg-purple { background-color: #93f; } .ql-editor .ql-color-white { color: #fff; } .ql-editor .ql-color-red { color: #e60000; } .ql-editor .ql-color-orange { color: #f90; } .ql-editor .ql-color-yellow { color: #ff0; } .ql-editor .ql-color-green { color: #008a00; } .ql-editor .ql-color-blue { color: #06c; } .ql-editor .ql-color-purple { color: #93f; } .ql-editor .ql-font-serif { font-family: Georgia, Times New Roman, serif; } .ql-editor .ql-font-monospace { font-family: Monaco, Courier New, monospace; } .ql-editor .ql-size-small { font-size: 0.75em; } .ql-editor .ql-size-large { font-size: 1.5em; } .ql-editor .ql-size-huge { font-size: 2.5em; } .ql-editor .ql-direction-rtl { direction: rtl; text-align: inherit; } .ql-editor .ql-align-center { text-align: center; } .ql-editor .ql-align-justify { text-align: justify; } .ql-editor .ql-align-right { text-align: right; } .ql-editor.ql-blank::before { color: rgba(0,0,0,0.6); content: attr(data-placeholder); font-style: italic; left: 15px; pointer-events: none; position: absolute; right: 15px; } .ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after { clear: both; content: ''; display: table; } .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { background: none; border: none; cursor: pointer; display: inline-block; float: left; height: 24px; padding: 3px 5px; width: 28px; } .ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg { float: left; height: 100%; } .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover { outline: none; } .ql-snow.ql-toolbar input.ql-image[type=file], .ql-snow .ql-toolbar input.ql-image[type=file] { display: none; } .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: #06c; } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: #06c; } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: #06c; } @media (pointer: coarse) { .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) { color: #444; } .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { fill: #444; } .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { stroke: #444; } } .ql-snow { box-sizing: border-box; } .ql-snow * { box-sizing: border-box; } .ql-snow .ql-hidden { display: none; } .ql-snow .ql-out-bottom, .ql-snow .ql-out-top { visibility: hidden; } .ql-snow .ql-tooltip { position: absolute; transform: translateY(10px); } .ql-snow .ql-tooltip a { cursor: pointer; text-decoration: none; } .ql-snow .ql-tooltip.ql-flip { transform: translateY(-10px); } .ql-snow .ql-formats { display: inline-block; vertical-align: middle; } .ql-snow .ql-formats:after { clear: both; content: ''; display: table; } .ql-snow .ql-stroke { fill: none; stroke: #444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .ql-snow .ql-stroke-miter { fill: none; stroke: #444; stroke-miterlimit: 10; stroke-width: 2; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #444; } .ql-snow .ql-empty { fill: none; } .ql-snow .ql-even { fill-rule: evenodd; } .ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin { stroke-width: 1; } .ql-snow .ql-transparent { opacity: 0.4; } .ql-snow .ql-direction svg:last-child { display: none; } .ql-snow .ql-direction.ql-active svg:last-child { display: inline; } .ql-snow .ql-direction.ql-active svg:first-child { display: none; } .ql-snow .ql-editor h1 { font-size: 2em; } .ql-snow .ql-editor h2 { font-size: 1.5em; } .ql-snow .ql-editor h3 { font-size: 1.17em; } .ql-snow .ql-editor h4 { font-size: 1em; } .ql-snow .ql-editor h5 { font-size: 0.83em; } .ql-snow .ql-editor h6 { font-size: 0.67em; } .ql-snow .ql-editor a { text-decoration: underline; } .ql-snow .ql-editor blockquote { border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px; } .ql-snow .ql-editor code, .ql-snow .ql-editor pre { background-color: #f0f0f0; border-radius: 3px; } .ql-snow .ql-editor pre { white-space: pre-wrap; margin-bottom: 5px; margin-top: 5px; padding: 5px 10px; } .ql-snow .ql-editor code { font-size: 85%; padding: 2px 4px; } .ql-snow .ql-editor pre.ql-syntax { background-color: #23241f; color: #f8f8f2; overflow: visible; } .ql-snow .ql-editor img { max-width: 100%; } .ql-snow .ql-picker { color: #444; display: inline-block; float: left; font-size: 14px; font-weight: 500; height: 24px; position: relative; vertical-align: middle; } .ql-snow .ql-picker-label { cursor: pointer; display: inline-block; height: 100%; padding-left: 8px; padding-right: 2px; position: relative; width: 100%; } .ql-snow .ql-picker-label::before { display: inline-block; line-height: 22px; } .ql-snow .ql-picker-options { background-color: #fff; display: none; min-width: 100%; padding: 4px 8px; position: absolute; white-space: nowrap; } .ql-snow .ql-picker-options .ql-picker-item { cursor: pointer; display: block; padding-bottom: 5px; padding-top: 5px; } .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: #ccc; z-index: 2; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block; margin-top: -1px; top: 100%; z-index: 1; } .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker { width: 28px; } .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label { padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg { right: 4px; } .ql-snow .ql-icon-picker .ql-picker-options { padding: 4px 0px; } .ql-snow .ql-icon-picker .ql-picker-item { height: 24px; width: 24px; padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-options { padding: 3px 5px; width: 152px; } .ql-snow .ql-color-picker .ql-picker-item { border: 1px solid transparent; float: left; height: 16px; margin: 2px; padding: 0px; width: 16px; } .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { position: absolute; margin-top: -9px; right: 0; top: 50%; width: 18px; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { content: attr(data-label); } .ql-snow .ql-picker.ql-header { width: 98px; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Normal'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'Heading 1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Heading 2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Heading 3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: 'Heading 4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: 'Heading 5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: 'Heading 6'; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { font-size: 2em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { font-size: 1.5em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { font-size: 1.17em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { font-size: 1em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { font-size: 0.83em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { font-size: 0.67em; } .ql-snow .ql-picker.ql-font { width: 108px; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Sans Serif'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { content: 'Serif'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { content: 'Monospace'; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before { font-family: Georgia, Times New Roman, serif; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before { font-family: Monaco, Courier New, monospace; } .ql-snow .ql-picker.ql-size { width: 98px; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Normal'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { content: 'Small'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { content: 'Large'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { content: 'Huge'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before { font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before { font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before { font-size: 32px; } .ql-snow .ql-color-picker.ql-background .ql-picker-item { background-color: #fff; } .ql-snow .ql-color-picker.ql-color .ql-picker-item { background-color: #000; } .ql-toolbar.ql-snow { border: 1px solid #ccc; box-sizing: border-box; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 8px; } .ql-toolbar.ql-snow .ql-formats { margin-right: 15px; } .ql-toolbar.ql-snow .ql-picker-label { border: 1px solid transparent; } .ql-toolbar.ql-snow .ql-picker-options { border: 1px solid transparent; box-shadow: rgba(0,0,0,0.2) 0 2px 8px; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: #ccc; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: #ccc; } .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { border-color: #000; } .ql-toolbar.ql-snow + .ql-container.ql-snow { border-top: 0px; } .ql-snow .ql-tooltip { background-color: #fff; border: 1px solid #ccc; box-shadow: 0px 0px 5px #ddd; color: #444; padding: 5px 12px; white-space: nowrap; } .ql-snow .ql-tooltip::before { content: "Visit URL:"; line-height: 26px; margin-right: 8px; } .ql-snow .ql-tooltip input[type=text] { display: none; border: 1px solid #ccc; font-size: 13px; height: 26px; margin: 0px; padding: 3px 5px; width: 170px; } .ql-snow .ql-tooltip a.ql-preview { display: inline-block; max-width: 200px; overflow-x: hidden; text-overflow: ellipsis; vertical-align: top; } .ql-snow .ql-tooltip a.ql-action::after { border-right: 1px solid #ccc; content: 'Edit'; margin-left: 16px; padding-right: 8px; } .ql-snow .ql-tooltip a.ql-remove::before { content: 'Remove'; margin-left: 8px; } .ql-snow .ql-tooltip a { line-height: 26px; } .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove { display: none; } .ql-snow .ql-tooltip.ql-editing input[type=text] { display: inline-block; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: 'Save'; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "Enter link:"; } .ql-snow .ql-tooltip[data-mode=formula]::before { content: "Enter formula:"; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "Enter video:"; } .ql-snow a { color: #06c; } .ql-container.ql-snow { border: 1px solid #ccc; } /* Footer Base Styles */ .funui-footer { width: 100%; position: relative; } .funui-footer__container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Top Section */ .funui-footer__top { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: 2rem; } /* Brand Section */ .funui-footer__brand { display: flex; flex-direction: column; gap: 1rem; } .funui-footer__logo-link { display: inline-block; text-decoration: none; transition: opacity 0.2s ease; } .funui-footer__logo-link:hover { opacity: 0.8; } .funui-footer__logo-image { max-width: 100%; height: auto; } .funui-footer__description { line-height: 1.6; } .funui-footer__description p { margin: 0; } /* Contact Info */ .funui-footer__contact { display: flex; flex-direction: column; gap: 0.75rem; } .funui-footer__contact-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; } .funui-footer__contact-icon { display: flex; align-items: center; flex-shrink: 0; margin-top: 0.125rem; } .funui-footer__contact-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .funui-footer__contact-link:hover { color: var(--primary); text-decoration: underline; } .funui-footer__contact-text { line-height: 1.4; } /* Social Links */ .funui-footer__socials { display: flex; gap: 0.75rem; flex-wrap: wrap; } .funui-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: inherit; background-color: var(--lighter); transition: all 0.2s ease; text-decoration: none; } .funui-footer__social-link:hover { color: var(--primary); transform: translateY(-2px); } .funui-footer__social-icon { display: flex; align-items: center; justify-content: center; } /* Link Sections */ .funui-footer__section { display: flex; flex-direction: column; gap: 1rem; } .funui-footer__section-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; color: inherit; opacity: 0.9; } .funui-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .funui-footer__link-item { margin: 0; } .funui-footer__link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .funui-footer__link:hover { color: var(--primary) !important; text-decoration: underline; } .funui-footer__link-icon { display: inline-flex; align-items: center; } /* Divider */ /* .funui-footer__divider { width: 100%; height: 1px; background-color: var(--borderColor) !important; opacity: 0.1; margin: 0; } */ /* Bottom Section */ .funui-footer__bottom { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 0.875rem; } .funui-footer__copyright { color: inherit; opacity: 0.8; } .funui-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; } .funui-footer__legal-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .funui-footer__legal-link:hover { color: var(--primary); text-decoration: underline; } /* Screen Reader Only */ .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; } /* Responsive Layouts */ /* Default Layout (Desktop First) */ .funui-footer--default .funui-footer__top { grid-template-columns: minmax(250px, 1fr) repeat(auto-fit, minmax(150px, 1fr)); } /* Centered Layout */ .funui-footer--centered { text-align: center; } .funui-footer--centered .funui-footer__top { grid-template-columns: 1fr; } .funui-footer--centered .funui-footer__brand { align-items: center; max-width: 600px; margin-left: auto; margin-right: auto; } .funui-footer--centered .funui-footer__contact-item { justify-content: center; } .funui-footer--centered .funui-footer__socials { justify-content: center; } .funui-footer--centered .funui-footer__bottom { align-items: center; text-align: center; } /* Compact Layout */ .funui-footer--compact .funui-footer__top { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* Stacked Layout */ .funui-footer--stacked .funui-footer__top { grid-template-columns: 1fr; } .funui-footer--stacked .funui-footer__section { text-align: center; } .funui-footer--stacked .funui-footer__section-title { margin-bottom: 0.5rem; } .funui-footer--stacked .funui-footer__links { align-items: center; } /* Responsive Breakpoints */ /* Tablet (768px and up) */ @media (min-width: 768px) { .funui-footer__container { padding-left: 1.5rem; padding-right: 1.5rem; } .funui-footer__top { gap: 3rem; } .funui-footer--default .funui-footer__top { grid-template-columns: minmax(300px, 1fr) repeat(auto-fit, minmax(180px, 1fr)); } .funui-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } .funui-footer--centered .funui-footer__bottom { flex-direction: column; gap: 1.5rem; } } /* Desktop (1024px and up) */ @media (min-width: 1024px) { .funui-footer__container { padding-left: 2rem; padding-right: 2rem; } .funui-footer__top { padding-top: 3rem; padding-bottom: 3rem; } .funui-footer--default .funui-footer__top { grid-template-columns: minmax(350px, 1fr) repeat(auto-fit, minmax(200px, 1fr)); } } /* Mobile (below 640px) */ @media (max-width: 639px) { .funui-footer { padding-left: 1rem; padding-right: 1rem; } .funui-footer__container { padding-left: 0; padding-right: 0; } .funui-footer__top { grid-template-columns: 1fr !important; gap: 2rem; } .funui-footer__section { text-align: center; } .funui-footer__links { align-items: center; } .funui-footer__contact-item { justify-content: center; } .funui-footer__socials { justify-content: center; } .funui-footer__legal { justify-content: center; } .funui-footer__bottom { text-align: center; gap: 1rem; } } /* Small Mobile (below 480px) */ @media (max-width: 479px) { .funui-footer__socials { gap: 0.5rem; } .funui-footer__social-link { width: 2rem; height: 2rem; } .funui-footer__legal { gap: 1rem; justify-content: center; } .funui-footer__description { text-align: center; } } /* Accessibility Improvements */ .funui-footer__link:focus-visible, .funui-footer__social-link:focus-visible, .funui-footer__legal-link:focus-visible, .funui-footer__contact-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } @media print { .funui-footer { border-top: 1px solid var(--borderColor); background-color: transparent !important; color: #000 !important; } .funui-footer__social-link, .funui-footer__link:hover, .funui-footer__legal-link:hover { color: #000 !important; text-decoration: none; } .funui-footer__social-link { background-color: transparent !important; border: 1px solid var(--borderColor); } } /* colors */ .gradient, .hover-gradient:hover { background: var(--gradient) !important; color: var(--white); } .primary, .hover-primary:hover { background-color: var(--primary) !important; color: var(--white); } .dark, .hover-dark:hover { background-color: var(--dark) !important; color: var(--white); } .secondary, .hover-secondary:hover { background-color: var(--secondary) !important; color: var(--white); } .success, .hover-success:hover { background-color: var(--success) !important; color: var(--white); } .light-success, .hover-light-success:hover { background-color: var(--success100) !important; color: var(--success); } .lighter, .hover-lighter:hover { background-color: var(--lighter) !important; color: var(--text-color); } .info, .hover-info:hover { background-color: var(--info) !important; color: var(--white); } .light-info, .hover-light-info:hover { background-color: var(--infoLight) !important; color: var(--info); } .warning, .hover-warning:hover { background-color: var(--warning) !important; color: var(--white); } .light-warning, .hover-light-warning:hover { background-color: var(--warningLight) !important; color: var(--warning); } .danger, .error, .hover-danger:hover { background-color: var(--danger) !important; color: var(--white); } /* ui 3 */ /* Primary Color */ .primary, .hover-primary:hover { background-color: var(--primary) !important; color: var(--white) !important; stroke: var(--primary); } /* Primary 50 */ .primary50, .hover-primary50:hover { background-color: var(--primary50) !important; color: var(--primary) !important; stroke: var(--primary50); } /* Primary 100 */ .primary100, .hover-primary100:hover { background-color: var(--primary100) !important; color: var(--primary) !important; stroke: var(--primary100); } /* Primary 200 */ .primary200, .hover-primary200:hover { background-color: var(--primary200) !important; color: var(--primary) !important; stroke: var(--primary200); } /* Primary 300 */ .primary300, .hover-primary300:hover { background-color: var(--primary300) !important; color: var(--primary) !important; stroke: var(--primary300); } /* Primary 400 */ .primary400, .hover-primary400:hover { background-color: var(--primary400) !important; color: var(--white) !important; stroke: var(--primary400); } /* Primary 500 */ .primary500, .hover-primary500:hover { background-color: var(--primary500) !important; color: var(--white) !important; stroke: var(--primary500); } /* Primary 600 */ .primary600, .hover-primary600:hover { background-color: var(--primary600) !important; color: var(--white) !important; stroke: var(--primary600); } /* Primary 700 */ .primary700, .hover-primary700:hover { background-color: var(--primary700) !important; color: var(--white) !important; stroke: var(--primary700); } /* Primary 800 */ .primary800, .hover-primary800:hover { background-color: var(--primary800) !important; color: var(--white) !important; stroke: var(--primary800); } /* Primary 900 */ .primary900, .hover-primary900:hover { background-color: var(--primary900) !important; color: var(--white) !important; stroke: var(--primary900); } /* Secondary Color */ .secondary, .hover-secondary:hover { background-color: var(--secondary) !important; color: var(--white) !important; stroke: var(--secondary); } /* Secondary 50 */ .secondary50, .hover-secondary50:hover { background-color: var(--secondary50) !important; color: var(--secondary) !important; stroke: var(--secondary50); } /* Secondary 100 */ .secondary100, .hover-secondary100:hover { background-color: var(--secondary100) !important; color: var(--secondary) !important; stroke: var(--secondary100); } /* Secondary 200 */ .secondary200, .hover-secondary200:hover { background-color: var(--secondary200) !important; color: var(--secondary) !important; stroke: var(--secondary200); } /* Secondary 300 */ .secondary300, .hover-secondary300:hover { background-color: var(--secondary300) !important; color: var(--secondary) !important; stroke: var(--secondary300); } /* Secondary 400 */ .secondary400, .hover-secondary400:hover { background-color: var(--secondary400) !important; color: var(--white) !important; stroke: var(--secondary400); } /* Secondary 500 */ .secondary500, .hover-secondary500:hover { background-color: var(--secondary500) !important; color: var(--white) !important; stroke: var(--secondary500); } /* Secondary 600 */ .secondary600, .hover-secondary600:hover { background-color: var(--secondary600) !important; color: var(--white); stroke: var(--secondary600); } /* Secondary 700 */ .secondary700, .hover-secondary700:hover { background-color: var(--secondary700) !important; color: var(--white) !important; stroke: var(--secondary700); } /* Secondary 800 */ .secondary800, .hover-secondary800:hover { background-color: var(--secondary800) !important; color: var(--white) !important; stroke: var(--secondary800); } /* Secondary 900 */ .secondary900, .hover-secondary900:hover { background-color: var(--secondary900) !important; color: var(--white); stroke: var(--secondary900); } .accent, .hover-accent:hover { background-color: var(--accent) !important; color: var(--white) !important; stroke: var(--accent); } .accent50, .hover-accent50:hover { background-color: var(--accent50) !important; color: var(--accent900) !important; stroke: var(--accent50); } .accent100, .hover-accent100:hover { background-color: var(--accent100) !important; color: var(--accent900) !important; stroke: var(--accent100); } .accent200, .hover-accent200:hover { background-color: var(--accent200) !important; color: var(--accent800) !important; stroke: var(--accent200); } .accent300, .hover-accent300:hover { background-color: var(--accent300) !important; color: var(--accent700) !important; stroke: var(--accent300); } .accent400, .hover-accent400:hover { background-color: var(--accent400) !important; color: var(--white) !important; stroke: var(--accent400); } .accent500, .hover-accent500:hover { background-color: var(--accent500) !important; color: var(--white); stroke: var(--accent500); } .accent600, .hover-accent600:hover { background-color: var(--accent600) !important; color: var(--white) !important; stroke: var(--accent600); } .accent700, .hover-accent700:hover { background-color: var(--accent700) !important; color: var(--white); stroke: var(--accent700); } .accent800, .hover-accent800:hover { background-color: var(--accent800) !important; color: var(--white) !important; stroke: var(--accent800); } .accent900, .hover-accent900:hover { background-color: var(--accent900) !important; color: var(--white) !important; stroke: var(--accent900); } /* Error Color */ .error, .hover-error:hover { background-color: var(--error) !important; color: var(--white) !important; stroke: var(--error); } /* Error 50 */ .error50, .hover-error50:hover { background-color: var(--error50) !important; color: var(--error) !important; stroke: var(--error50); } /* Error 100 */ .error100, .hover-error100:hover { background-color: var(--error100) !important; color: var(--error) !important; stroke: var(--error100); } /* Error 200 */ .error200, .hover-error200:hover { background-color: var(--error200) !important; color: var(--error) !important; stroke: var(--error200); } /* Error 300 */ .error300, .hover-error300:hover { background-color: var(--error300) !important; color: var(--error) !important; stroke: var(--error300); } /* Error 400 */ .error400, .hover-error400:hover { background-color: var(--error400) !important; color: var(--white) !important; stroke: var(--error400); } /* Error 500 */ .error500, .hover-error500:hover { background-color: var(--error500) !important; color: var(--white) !important; stroke: var(--error500); } /* Error 600 */ .error600, .hover-error600:hover { background-color: var(--error600) !important; color: var(--white) !important; stroke: var(--error600); } /* Error 700 */ .error700, .hover-error700:hover { background-color: var(--error700) !important; color: var(--white) !important; stroke: var(--error700); } /* Error 800 */ .error800, .hover-error800:hover { background-color: var(--error800) !important; color: var(--white) !important; stroke: var(--error800); } /* Error 900 */ .error900, .hover-error900:hover { background-color: var(--error900) !important; color: var(--white); stroke: var(--error900); } /* Success Color */ .success, .hover-success:hover { background-color: var(--success) !important; color: var(--white) !important; stroke: var(--success); } /* Success 50 */ .success50, .hover-success50:hover { background-color: var(--success50) !important; color: var(--success) !important; stroke: var(--success50); } /* Success 100 */ .success100, .hover-success100:hover { background-color: var(--success100) !important; color: var(--success) !important; stroke: var(--success100); } /* Success 200 */ .success200, .hover-success200:hover { background-color: var(--success200) !important; color: var(--success) !important; stroke: var(--success200); } /* Success 300 */ .success300, .hover-success300:hover { background-color: var(--success300) !important; color: var(--success) !important; stroke: var(--success300); } /* Success 400 */ .success400, .hover-success400:hover { background-color: var(--success400) !important; color: var(--white) !important; stroke: var(--success400); } /* Success 500 */ .success500, .hover-success500:hover { background-color: var(--success500) !important; color: var(--white); stroke: var(--success500); } /* Success 600 */ .success600, .hover-success600:hover { background-color: var(--success600) !important; color: var(--white) !important; stroke: var(--success600); } /* Success 700 */ .success700, .hover-success700:hover { background-color: var(--success700) !important; color: var(--white); stroke: var(--success700); } /* Success 800 */ .success800, .hover-success800:hover { background-color: var(--success800) !important; color: var(--white) !important; stroke: var(--success800); } /* Success 900 */ .success900, .hover-success900:hover { background-color: var(--success900) !important; color: var(--white) !important; stroke: var(--success900); } /* Warning Color */ .warning, .hover-warning:hover { background-color: var(--warning) !important; color: var(--white) !important; stroke: var(--warning); } /* Warning 50 */ .warning50, .hover-warning50:hover { background-color: var(--warning50) !important; color: var(--warning) !important; stroke: var(--warning50); } /* Warning 100 */ .warning100, .hover-warning100:hover { background-color: var(--warning100) !important; color: var(--warning) !important; stroke: var(--warning100); } /* Warning 200 */ .warning200, .hover-warning200:hover { background-color: var(--warning200) !important; color: var(--warning); stroke: var(--warning200); } /* Warning 300 */ .warning300, .hover-warning300:hover { background-color: var(--warning300) !important; color: var(--warning) !important; stroke: var(--warning300); } /* Warning 400 */ .warning400, .hover-warning400:hover { background-color: var(--warning400) !important; color: var(--white) !important; stroke: var(--warning400); } /* Warning 500 */ .warning500, .hover-warning500:hover { background-color: var(--warning500) !important; color: var(--white) !important; stroke: var(--warning500); } /* Warning 600 */ .warning600, .hover-warning600:hover { background-color: var(--warning600) !important; color: var(--white); stroke: var(--warning600); } /* Warning 700 */ .warning700, .hover-warning700:hover { background-color: var(--warning700) !important; color: var(--white) !important; stroke: var(--warning700); } /* Warning 800 */ .warning800, .hover-warning800:hover { background-color: var(--warning800) !important; color: var(--white); stroke: var(--warning800); } /* Warning 900 */ .warning900, .hover-warning900:hover { background-color: var(--warning900) !important; color: var(--white) !important; stroke: var(--warning900); } /* Muted Color */ .muted, .hover-muted:hover { background-color: var(--muted) !important; color: var(--white); stroke: var(--muted); } /* Muted 50 */ .muted50, .hover-muted50:hover { background-color: var(--muted50) !important; color: var(--muted) !important; stroke: var(--muted50); } /* Muted 100 */ .muted100, .hover-muted100:hover { background-color: var(--muted100) !important; color: var(--muted); stroke: var(--muted100); } /* Muted 200 */ .muted200, .hover-muted200:hover { background-color: var(--muted200) !important; color: var(--muted); stroke: var(--muted200); } /* Muted 300 */ .muted300, .hover-muted300:hover { background-color: var(--muted300) !important; color: var(--muted) !important; stroke: var(--muted300); } /* Muted 400 */ .muted400, .hover-muted400:hover { background-color: var(--muted400) !important; color: var(--white) !important; stroke: var(--muted400); } /* Muted 500 */ .muted500, .hover-muted500:hover { background-color: var(--muted500) !important; color: var(--white) !important; stroke: var(--muted500); } /* Muted 600 */ .muted600, .hover-muted600:hover { background-color: var(--muted600) !important; color: var(--white) !important; stroke: var(--muted600); } /* Muted 700 */ .muted700, .hover-muted700:hover { background-color: var(--muted700) !important; color: var(--white); stroke: var(--muted700) !important; } /* Muted 800 */ .muted800, .hover-muted800:hover { background-color: var(--muted800) !important; color: var(--white) !important; stroke: var(--muted800); } /* Muted 900 */ .muted900, .hover-muted900:hover { background-color: var(--muted900) !important; color: var(--white) !important; stroke: var(--muted900); } /* Info Color */ .info, .hover-info:hover { background-color: var(--info) !important; color: var(--white) !important; stroke: var(--info); } /* Info 50 */ .info50, .hover-info50:hover { background-color: var(--info50) !important; color: var(--info) !important; stroke: var(--info50); } /* Info 100 */ .info100, .hover-info100:hover { background-color: var(--info100) !important; color: var(--info) !important; stroke: var(--info100); } /* Info 200 */ .info200, .hover-info200:hover { background-color: var(--info200) !important; color: var(--info) !important; stroke: var(--info200); } /* Info 300 */ .info300, .hover-info300:hover { background-color: var(--info300) !important; color: var(--info); stroke: var(--info300); } /* Info 400 */ .info400, .hover-info400:hover { background-color: var(--info400) !important; color: var(--white) !important; stroke: var(--info400); } /* Info 500 */ .info500, .hover-info500:hover { background-color: var(--info500) !important; color: var(--white) !important; stroke: var(--info500); } /* Info 600 */ .info600, .hover-info600:hover { background-color: var(--info600) !important; color: var(--white) !important; stroke: var(--info600); } /* Info 700 */ .info700, .hover-info700:hover { background-color: var(--info700) !important; color: var(--white) !important; stroke: var(--info700); } /* Info 800 */ .info800, .hover-info800:hover { background-color: var(--info800) !important; color: var(--white) !important; stroke: var(--info800); } /* Info 900 */ .info900, .hover-info900:hover { background-color: var(--info900) !important; color: var(--white) !important; stroke: var(--info900); } /* Dark Colors */ .dark, .hover-dark:hover { background-color: var(--dark) !important; color: var(--white) !important; stroke: var(--dark); } .black, .hover-black:hover { background-color: var(--black) !important; color: var(--white) !important; stroke: var(--black); } .white, .hover-white:hover { background-color: var(--white) !important; color: var(--dark) !important; stroke: var(--white) !important; } /* outlines */ .success-outline { border: 1px solid var(--success) !important; } .light-success-outline { border: 1px solid var(--successLight) !important; } .primary-outline { border: 1px solid var(--primary) !important; } .light-outline { border: 1px solid var(--light) !important; } .dark-outline { border: 1px solid var(--dark) !important; } .light-dark-outline { border: 1px solid var(--lightDark) !important; } .secondary-outline { border: 1px solid var(--secondary) !important; } .light-outline { border: 1px solid var(--light) !important; } .info-outline { border: 1px solid var(--info) !important; } .light-info-outline { border: 1px solid var(--infoLight) !important; } .warning-outline { border: 1px solid var(--warning) !important; } .light-warning-outline { border: 1px solid var(--warningLight) !important; } .danger-outline { border: 1px solid var(--danger) !important; } .light-danger-outline { border: 1px solid var(--dangerLight) !important; } .lighter-outline { border: 1px solid var(--dangerLight) !important; } /* outlined */ .outline-primary { border: 1px solid var(--primary) !important; } .outline-primary50 { border: 1px solid var(--primary50) !important; } .outline-primary100 { border: 1px solid var(--primary100) !important; } .outline-primary200 { border: 1px solid var(--primary200) !important; } .outline-primary300 { border: 1px solid var(--primary300) !important; } .outline-primary400 { border: 1px solid var(--primary400) !important; } .outline-primary500 { border: 1px solid var(--primary500) !important; } .outline-primary600 { border: 1px solid var(--primary600) !important; } .outline-primary700 { border: 1px solid var(--primary700) !important; } .outline-primary800 { border: 1px solid var(--primary800) !important; } .outline-primary900 { border: 1px solid var(--primary900) !important; } .outline-secondary { border: 1px solid var(--secondary) !important; } .outline-secondary50 { border: 1px solid var(--secondary50) !important; } .outline-secondary100 { border: 1px solid var(--secondary100) !important; } .outline-secondary200 { border: 1px solid var(--secondary200) !important; } .outline-secondary300 { border: 1px solid var(--secondary300) !important; } .outline-secondary400 { border: 1px solid var(--secondary400) !important; } .outline-secondary500 { border: 1px solid var(--secondary500) !important; } .outline-secondary600 { border: 1px solid var(--secondary600) !important; } .outline-secondary700 { border: 1px solid var(--secondary700) !important; } .outline-secondary800 { border: 1px solid var(--secondary800) !important; } .outline-secondary900 { border: 1px solid var(--secondary900) !important; } .outline-accent { border: 1px solid var(--accent) !important; } .outline-accent50 { border: 1px solid var(--accent50) !important; } .outline-accent100 { border: 1px solid var(--accent100) !important; } .outline-accent200 { border: 1px solid var(--accent200) !important; } .outline-accent300 { border: 1px solid var(--accent300) !important; } .outline-accent400 { border: 1px solid var(--accent400) !important; } .outline-accent500 { border: 1px solid var(--accent500) !important; } .outline-accent600 { border: 1px solid var(--accent600) !important; } .outline-accent700 { border: 1px solid var(--accent700) !important; } .outline-accent800 { border: 1px solid var(--accent800) !important; } .outline-accent900 { border: 1px solid var(--accent900) !important; } .outline-dark { border: 1px solid var(--dark) !important; } .outline-muted { border: 1px solid var(--muted) !important; } .outline-error { border: 1px solid var(--error) !important; } .outline-error50 { border: 1px solid var(--error50) !important; } .outline-error100 { border: 1px solid var(--error100) !important; } .outline-error200 { border: 1px solid var(--error200) !important; } .outline-error300 { border: 1px solid var(--error300) !important; } .outline-error400 { border: 1px solid var(--error400) !important; } .outline-error500 { border: 1px solid var(--error500) !important; } .outline-error600 { border: 1px solid var(--error600) !important; } .outline-error700 { border: 1px solid var(--error700) !important; } .outline-error800 { border: 1px solid var(--error800) !important; } .outline-error900 { border: 1px solid var(--error900) !important; } .outline-success { border: 1px solid var(--success) !important; } .outline-success50 { border: 1px solid var(--success50) !important; } .outline-success100 { border: 1px solid var(--success100) !important; } .outline-success200 { border: 1px solid var(--success200) !important; } .outline-success300 { border: 1px solid var(--success300) !important; } .outline-success400 { border: 1px solid var(--success400) !important; } .outline-success500 { border: 1px solid var(--success500) !important; } .outline-success600 { border: 1px solid var(--success600) !important; } .outline-success700 { border: 1px solid var(--success700) !important; } .outline-success800 { border: 1px solid var(--success800) !important; } .outline-success900 { border: 1px solid var(--success900) !important; } .outline-warning { border: 1px solid var(--warning) !important; } .outline-warning50 { border: 1px solid var(--warning50) !important; } .outline-warning100 { border: 1px solid var(--warning100) !important; } .outline-warning200 { border: 1px solid var(--warning200) !important; } .outline-warning300 { border: 1px solid var(--warning300) !important; } .outline-warning400 { border: 1px solid var(--warning400) !important; } .outline-warning500 { border: 1px solid var(--warning500) !important; } .outline-warning600 { border: 1px solid var(--warning600) !important; } .outline-warning700 { border: 1px solid var(--warning700) !important; } .outline-warning800 { border: 1px solid var(--warning800) !important; } .outline-warning900 { border: 1px solid var(--warning900) !important; } .outline-info { border: 1px solid var(--info) !important; } .outline-info50 { border: 1px solid var(--info50) !important; } .outline-info100 { border: 1px solid var(--info100) !important; } .outline-info200 { border: 1px solid var(--info200) !important; } .outline-info300 { border: 1px solid var(--info300) !important; } .outline-info400 { border: 1px solid var(--info400) !important; } .outline-info500 { border: 1px solid var(--info500) !important; } .outline-info600 { border: 1px solid var(--info600) !important; } .outline-info700 { border: 1px solid var(--info700) !important; } .outline-info800 { border: 1px solid var(--info800) !important; } .outline-info900 { border: 1px solid var(--info900) !important; } /* text color */ .text-primary, .hover-text-primary:hover { color: var(--primary) !important; } .text-primary50, .hover-text-primary50:hover { color: var(--primary50) !important; } .text-primary100, .hover-text-primary100:hover { color: var(--primary100) !important; } .text-primary200, .hover-text-primary200:hover { color: var(--primary200) !important; } .text-primary300, .hover-text-primary300:hover { color: var(--primary300) !important; } .text-primary400, .hover-text-primary400:hover { color: var(--primary400) !important; } .text-primary500, .hover-text-primary500:hover { color: var(--primary500) !important; } .text-primary600, .hover-text-primary600:hover { color: var(--primary600) !important; } .text-primary700, .hover-text-primary700:hover { color: var(--primary700) !important; } .text-primary800, .hover-text-primary800:hover { color: var(--primary800) !important; } .text-primary900, .hover-text-primary900:hover { color: var(--primary900) !important; } /* Secondary Colors */ .text-secondary, .hover-text-secondary:hover { color: var(--secondary) !important; } .text-secondary50, .hover-text-secondary50:hover { color: var(--secondary50) !important; } .text-secondary100, .hover-text-secondary100:hover { color: var(--secondary100) !important; } .text-secondary200, .hover-text-secondary200:hover { color: var(--secondary200) !important; } .text-secondary300, .hover-text-secondary300:hover { color: var(--secondary300) !important; } .text-secondary400, .hover-text-secondary400:hover { color: var(--secondary400) !important; } .text-secondary500, .hover-text-secondary500:hover { color: var(--secondary500) !important; } .text-secondary600, .hover-text-secondary600:hover { color: var(--secondary600) !important; } .text-secondary700, .hover-text-secondary700:hover { color: var(--secondary700) !important; } .text-secondary800, .hover-text-secondary800:hover { color: var(--secondary800) !important; } .text-secondary900, .hover-text-secondary900:hover { color: var(--secondary900) !important; } .text-accent, .hover-text-accent:hover { color: var(--accent) !important; } .text-accent50, .hover-text-accent50:hover { color: var(--accent50) !important; } .text-accent100, .hover-text-accent100:hover { color: var(--accent100) !important; } .text-accent200, .hover-text-accent200:hover { color: var(--accent200) !important; } .text-accent300, .hover-text-accent300:hover { color: var(--accent300) !important; } .text-accent400, .hover-text-accent400:hover { color: var(--accent400) !important; } .text-accent500, .hover-text-accent500:hover { color: var(--accent500) !important; } .text-accent600, .hover-text-accent600:hover { color: var(--accent600) !important; } .text-accent700, .hover-text-accent700:hover { color: var(--accent700) !important; } .text-accent800, .hover-text-accent800:hover { color: var(--accent800) !important; } .text-accent900, .hover-text-accent900:hover { color: var(--accent900) !important; } /* Error Colors */ .text-error, .hover-text-error:hover { color: var(--error) !important; } .text-error50, .hover-text-error50:hover { color: var(--error50) !important; } .text-error100, .hover-text-error100:hover { color: var(--error100) !important; } .text-error200, .hover-text-error200:hover { color: var(--error200) !important; } .text-error300, .hover-text-error300:hover { color: var(--error300) !important; } .text-error400, .hover-text-error400:hover { color: var(--error400) !important; } .text-error500, .hover-text-error500:hover { color: var(--error500) !important; } .text-error600, .hover-text-error600:hover { color: var(--error600) !important; } .text-error700, .hover-text-error700:hover { color: var(--error700) !important; } .text-error800, .hover-text-error800:hover { color: var(--error800) !important; } .text-error900, .hover-text-error900:hover { color: var(--error900) !important; } /* Success Colors */ .text-success, .hover-text-success:hover { color: var(--success) !important; } .text-success50, .hover-text-success50:hover { color: var(--success50) !important; } .text-success100, .hover-text-success100:hover { color: var(--success100) !important; } .text-success200, .hover-text-success200:hover { color: var(--success200) !important; } .text-success300, .hover-text-success300:hover { color: var(--success300) !important; } .text-success400, .hover-text-success400:hover { color: var(--success400) !important; } .text-success500, .hover-text-success500:hover { color: var(--success500) !important; } .text-success600, .hover-text-success600:hover { color: var(--success600) !important; } .text-success700, .hover-text-success700:hover { color: var(--success700) !important; } .text-success800, .hover-text-success800:hover { color: var(--success800) !important; } .text-success900, .hover-text-success900:hover { color: var(--success900) !important; } /* Warning Colors */ .text-warning, .hover-text-warning:hover { color: var(--warning) !important; } .text-warning50, .hover-text-warning50:hover { color: var(--warning50) !important; } .text-warning100, .hover-text-warning100:hover { color: var(--warning100) !important; } .text-warning200, .hover-text-warning200:hover { color: var(--warning200) !important; } .text-warning300, .hover-text-warning300:hover { color: var(--warning300) !important; } .text-warning400, .hover-text-warning400:hover { color: var(--warning400) !important; } .text-warning500, .hover-text-warning500:hover { color: var(--warning500) !important; } .text-warning600, .hover-text-warning600:hover { color: var(--warning600) !important; } .text-warning700, .hover-text-warning700:hover { color: var(--warning700) !important; } .text-warning800, .hover-text-warning800:hover { color: var(--warning800) !important; } .text-warning900, .hover-text-warning900:hover { color: var(--warning900) !important; } /* Info Colors */ .text-info, .hover-text-info:hover { color: var(--info) !important; } .text-info50, .hover-text-info50:hover { color: var(--info50) !important; } .text-info100, .hover-text-info100:hover { color: var(--info100) !important; } .text-info200, .hover-text-info200:hover { color: var(--info200) !important; } .text-info300, .hover-text-info300:hover { color: var(--info300) !important; } .text-info400, .hover-text-info400:hover { color: var(--info400) !important; } .text-info500, .hover-text-info500:hover { color: var(--info500) !important; } .text-info600, .hover-text-info600:hover { color: var(--info600) !important; } .text-info700, .hover-text-info700:hover { color: var(--info700) !important; } .text-info800, .hover-text-info800:hover { color: var(--info800) !important; } .text-info900, .hover-text-info900:hover { color: var(--info900) !important; } .text-white , .hover-text-white:hover{ color: var(--white) !important; } .text-dark , .hover-text-dark:hover{ color: var(--dark) !important; } .text-default{ color: var(--text-color) !important; } .text-gradient, .hover-text-gradient:hover { background: -webkit-linear-gradient(var(--gradientColors)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } /* HELPERS */ .text-minified , .text-md{ font-size: var(--minifiedFontSize); line-height: 1rem; } /* Content formatting */ .article { line-height: 1.7rem; letter-spacing: normal; } /* Typography */ .text-bold { font-weight: bold !important; } .text-bolder { font-weight: bolder !important; } .lightText { font-weight: 300 !important; } .lighterText { font-weight: 200 !important; } .underlineText { text-decoration: underline; } .emp { font-style: italic; } .italicText { font-style: italic; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .monospace { font-family: monospace !important; } /* Scroll */ .scroll-y { overflow-y: auto !important; overflow-x: visible !important; } .scroll-x { overflow-x: auto !important; overflow-y: visible !important; } .scroll { overflow: auto !important; } .vertical-scroll { overflow-y: scroll; } .horizontal-scroll { overflow-x: scroll; } /* Helpers */ .glassy { backdrop-filter: blur(0.3rem); background-color: transparent !important; } .transparent { background-color: transparent !important; } .flat { border-radius: 0rem !important; } .no-padding { padding: 0px !important; } .no-margin { margin: 0px; } .line-through { text-decoration: line-through; } .underline { text-decoration: underline; } .overline { text-decoration: overline; } .wavy { text-decoration: wavy; } .borderless { border: none; } .border { border: var(--border); } .hide { display: none; } .show { display: block; } .center { margin: 0px auto; } .float-right { float: right; } .float-left { float: left; } .clear-both { clear: both; } .responsive { width: 100%; height: auto; } /* Text Alignment */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } /* Sections */ .section { margin-top: 1rem; margin-bottom: 1rem; } .minSection { margin-top: 0.5rem; margin-bottom: 0.5rem; } .maxSection { margin-top: 2rem; margin-bottom: 2rem; } /* Opacity */ .opacity-1, .hover-opacity-1:hover { opacity: 1; } .opacity-2, .hover-opacity-2:hover { opacity: 0.9; } .opacity-3, .hover-opacity-3:hover { opacity: 0.8; } .opacity-4, .hover-opacity-4:hover { opacity: 0.7; } .opacity-5, .hover-opacity-5:hover { opacity: 0.6; } .opacity-6, .hover-opacity-6:hover { opacity: 0.5; } .opacity-7, .hover-opacity-7:hover { opacity: 0.4; } .opacity-8, .hover-opacity-8:hover { opacity: 0.2; } .opacity-9, .hover-opacity-9:hover { opacity: 0.1; } /* Borders */ .hr, .bb { border-bottom: var(--border); } .vr, .bl { border-left: var(--border); } .bt { border-top: var(--border); } .br { border-right: var(--border); } .top-border { border-top: var(--border); } .bottom-border { border-bottom: var(--border); } .right-border { border-right: var(--border); } .left-border { border-left: var(--border); } /* Border Radius */ .rounded-0 { border-radius: 0rem !important; } .rounded-1 { border-radius: 0.125rem !important; } .rounded-2 { border-radius: 0.25rem !important; } .rounded-3 { border-radius: 0.375rem !important; } .rounded-4 { border-radius: 0.5rem !important; } .rounded-5 { border-radius: 0.625rem !important; } .rounded-6 { border-radius: 0.75rem !important; } .rounded-8 { border-radius: 1rem !important; } .rounded-10 { border-radius: 1.25rem !important; } .rounded-12 { border-radius: 1.5rem !important; } .rounded-16 { border-radius: 2rem !important; } .rounded-20 { border-radius: 2.5rem !important; } .rounded-24 { border-radius: 3rem !important; } .rounded-full { border-radius: 9999px !important; } /* Individual Corner Radius */ .rounded-t-0 { border-top-left-radius: 0rem !important; border-top-right-radius: 0rem !important; } .rounded-t-1 { border-top-left-radius: 0.125rem !important; border-top-right-radius: 0.125rem !important; } .rounded-t-2 { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } .rounded-t-4 { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; } .rounded-t-8 { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; } .rounded-b-0 { border-bottom-left-radius: 0rem !important; border-bottom-right-radius: 0rem !important; } .rounded-b-1 { border-bottom-left-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; } .rounded-b-2 { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-b-4 { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } .rounded-b-8 { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; } .rounded-l-0 { border-top-left-radius: 0rem !important; border-bottom-left-radius: 0rem !important; } .rounded-l-1 { border-top-left-radius: 0.125rem !important; border-bottom-left-radius: 0.125rem !important; } .rounded-l-2 { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-l-4 { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } .rounded-l-8 { border-top-left-radius: 1rem !important; border-bottom-left-radius: 1rem !important; } .rounded-r-0 { border-top-right-radius: 0rem !important; border-bottom-right-radius: 0rem !important; } .rounded-r-1 { border-top-right-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; } .rounded-r-2 { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-r-4 { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } .rounded-r-8 { border-top-right-radius: 1rem !important; border-bottom-right-radius: 1rem !important; } /* Individual Corners */ .rounded-tl-0 { border-top-left-radius: 0rem !important; } .rounded-tl-1 { border-top-left-radius: 0.125rem !important; } .rounded-tl-2 { border-top-left-radius: 0.25rem !important; } .rounded-tl-4 { border-top-left-radius: 0.5rem !important; } .rounded-tl-8 { border-top-left-radius: 1rem !important; } .rounded-tr-0 { border-top-right-radius: 0rem !important; } .rounded-tr-1 { border-top-right-radius: 0.125rem !important; } .rounded-tr-2 { border-top-right-radius: 0.25rem !important; } .rounded-tr-4 { border-top-right-radius: 0.5rem !important; } .rounded-tr-8 { border-top-right-radius: 1rem !important; } .rounded-bl-0 { border-bottom-left-radius: 0rem !important; } .rounded-bl-1 { border-bottom-left-radius: 0.125rem !important; } .rounded-bl-2 { border-bottom-left-radius: 0.25rem !important; } .rounded-bl-4 { border-bottom-left-radius: 0.5rem !important; } .rounded-bl-8 { border-bottom-left-radius: 1rem !important; } .rounded-br-0 { border-bottom-right-radius: 0rem !important; } .rounded-br-1 { border-bottom-right-radius: 0.125rem !important; } .rounded-br-2 { border-bottom-right-radius: 0.25rem !important; } .rounded-br-4 { border-bottom-right-radius: 0.5rem !important; } .rounded-br-8 { border-bottom-right-radius: 1rem !important; } /* Z-Index */ .z-index-1 { z-index: 1; } .z-index-2 { z-index: 2; } .z-index-3 { z-index: 3; } .z-index-4 { z-index: 4; } .z-index-5 { z-index: 5; } .z-index-6 { z-index: 6; } .z-index-7 { z-index: 7; } .z-index-8 { z-index: 8; } .z-index-9 { z-index: 9; } .z-index-10 { z-index: 10; } /* Positioning */ .top-right { position: absolute; top: 0px; right: 0px; } .top-left { position: absolute; top: 0px; left: 0px; } .top { position: absolute; top: 0px; } .bottom-right { position: absolute; bottom: 0px; right: 0px; } .bottom-left { position: absolute; bottom: 0px; left: 0px; } .bottom { position: absolute; bottom: 0px; } .middle { display: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .relative { position: relative; } .fixed { position: fixed; } .sticky { position: sticky; } .absolute { position: absolute; } .sticky-top { position: -webkit-sticky; position: sticky; top: 0px; z-index: var(--navBarZindex); width: 100%; } .fixed-top { position: fixed; top: 0px; z-index: var(--navBarZindex); width: 100%; } .fixedBottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--navBarZindex); } .fixedTop { position: fixed; bottom: 0; top: 0; width: 100%; z-index: var(--navBarZindex); } /* Display */ .block { display: block; } .inline-block { display: inline-block; } .content-middle { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .central { display: flex; align-items: center; justify-content: center; } /* Flexbox */ .row-flex { display: flex !important; flex-direction: row !important; align-items: center; } .row-flex.gap { grid-gap: 0.5rem; gap: 0.2rem; } .row-flex.space-between { justify-content: space-between; } .row-flex.stretch { align-items: stretch !important; } .row-flex.space-around { justify-content: space-around; } .row-flex.center { justify-content: center; } /* Shadows */ .shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .shadow-bingo { box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5), 0px 40px 40px 0px rgba(225, 225, 255, 0.6); } /* Fit */ .fit { height: 100%; width: 100%; } .fit-width { width: fit-content; } .fit-height { height: fit-content; } /* Rounded */ .rightRounded { border-top-right-radius: 300rem !important; border-bottom-right-radius: 300rem !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } .leftRounded { border-top-left-radius: 300rem !important; border-bottom-left-radius: 300rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Hover Effects */ .hoverable { transition: 0.1s linear; } .hoverable:hover { background-color: var(--hoverable) !important; } .hoverable-border { border: 0.1rem solid transparent; transition: 0.3s ease-in-out; } .hoverable-border:hover { border: var(--border); } /* Cursor */ .cursor-pointer { cursor: pointer; } .cursor-copy { cursor: copy; } .cursor-none { cursor: none; } .cursor-move { cursor: move; } /* Containers */ .container { margin: 0 10%; } @media (max-width: 600px) { .container { margin: 0 5%; } } .page { min-height: 80vh; padding: 2rem 0; } /* ===== BLUR EFFECTS ===== */ .blur-0 { filter: blur(0) !important; } .blur-xs { filter: blur(0.125rem) !important; } .blur-sm { filter: blur(0.25rem) !important; } .blur-md { filter: blur(0.5rem) !important; } .blur-lg { filter: blur(1rem) !important; } .blur-xl { filter: blur(1.5rem) !important; } .blur-2xl { filter: blur(2rem) !important; } /* Backdrop Blur */ .backdrop-blur-0 { backdrop-filter: blur(0) !important; } .backdrop-blur-xs { backdrop-filter: blur(0.125rem) !important; } .backdrop-blur-sm { backdrop-filter: blur(0.25rem) !important; } .backdrop-blur-md { backdrop-filter: blur(0.5rem) !important; } .backdrop-blur-lg { backdrop-filter: blur(1rem) !important; } .backdrop-blur-xl { backdrop-filter: blur(1.5rem) !important; } .backdrop-blur-2xl { backdrop-filter: blur(2rem) !important; } /* ===== ENTRANCE ANIMATIONS ===== */ /* Fade In */ .fade-in { animation: fadeIn 0.6s ease-in-out !important; } .fade-in-up { animation: fadeInUp 0.8s ease-out !important; } .fade-in-down { animation: fadeInDown 0.8s ease-out !important; } .fade-in-left { animation: fadeInLeft 0.8s ease-out !important; } .fade-in-right { animation: fadeInRight 0.8s ease-out !important; } .fade-in-scale { animation: fadeInScale 0.8s ease-out !important; } .fade-in-blur { animation: fadeInBlur 0.8s ease-out !important; } /* Slide In */ .slide-in-up { animation: slideInUp 0.8s ease-out !important; } .slide-in-down { animation: slideInDown 0.8s ease-out !important; } .slide-in-left { animation: slideInLeft 0.8s ease-out !important; } .slide-in-right { animation: slideInRight 0.8s ease-out !important; } .slide-in-diagonal { animation: slideInDiagonal 0.8s ease-out !important; } /* Zoom In */ .zoom-in { animation: zoomIn 0.6s ease-out !important; } .zoom-in-up { animation: zoomInUp 0.8s ease-out !important; } .zoom-in-down { animation: zoomInDown 0.8s ease-out !important; } .zoom-in-left { animation: zoomInLeft 0.8s ease-out !important; } .zoom-in-right { animation: zoomInRight 0.8s ease-out !important; } .zoom-in-rotate { animation: zoomInRotate 0.8s ease-out !important; } /* Bounce In */ .bounce-in { animation: bounceIn 0.8s ease-out !important; } .bounce-in-up { animation: bounceInUp 0.8s ease-out !important; } .bounce-in-down { animation: bounceInDown 0.8s ease-out !important; } .bounce-in-left { animation: bounceInLeft 0.8s ease-out !important; } .bounce-in-right { animation: bounceInRight 0.8s ease-out !important; } /* Flip In */ .flip-in-x { animation: flipInX 0.8s ease-out !important; } .flip-in-y { animation: flipInY 0.8s ease-out !important; } .flip-in-diagonal { animation: flipInDiagonal 0.8s ease-out !important; } /* Rotate In */ .rotate-in { animation: rotateIn 0.8s ease-out !important; } .rotate-in-up { animation: rotateInUp 0.8s ease-out !important; } .rotate-in-down { animation: rotateInDown 0.8s ease-out !important; } .rotate-in-scale { animation: rotateInScale 0.8s ease-out !important; } /* Special Entrance */ .roll-in { animation: rollIn 0.8s ease-out !important; } .light-speed-in { animation: lightSpeedIn 0.8s ease-out !important; } .swing-in { animation: swingIn 0.8s ease-out !important; } .wobble-in { animation: wobbleIn 0.8s ease-out !important; } .pulse-in { animation: pulseIn 0.8s ease-out !important; } .unfold-in { animation: unfoldIn 0.8s ease-out !important; } .spiral-in { animation: spiralIn 0.8s ease-out !important; } /* ===== HOVER ANIMATIONS ===== */ /* Scale Hover */ .hover-scale { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-scale:hover { transform: scale(1.05) !important; } .hover-scale-lg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-scale-lg:hover { transform: scale(1.1) !important; } .hover-scale-sm { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-scale-sm:hover { transform: scale(1.02) !important; } /* Scale & Rotate Combined */ .hover-scale-rotate { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-scale-rotate:hover { transform: scale(1.05) rotate(3deg) !important; } .hover-scale-rotate-rev { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-scale-rotate-rev:hover { transform: scale(1.05) rotate(-3deg) !important; } /* Lift Hover */ .hover-lift { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-lift:hover { transform: translateY(-0.5rem) !important; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important; } .hover-lift-lg { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-lift-lg:hover { transform: translateY(-1rem) !important; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2) !important; } /* Lift & Rotate Combined */ .hover-lift-rotate { transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-lift-rotate:hover { transform: translateY(-0.5rem) rotate(2deg) !important; box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15) !important; } /* Tilt Hover */ .hover-tilt-left { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-tilt-left:hover { transform: perspective(1000px) rotateY(-10deg) !important; } .hover-tilt-right { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-tilt-right:hover { transform: perspective(1000px) rotateY(10deg) !important; } .hover-tilt-up { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-tilt-up:hover { transform: perspective(1000px) rotateX(10deg) !important; } /* Skew Hover */ .hover-skew { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .hover-skew:hover { transform: skewX(-5deg) scale(1.02) !important; } /* Glow Hover */ .hover-glow { transition: all 0.3s ease !important; } .hover-glow:hover { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.5) !important; transform: translateY(-0.25rem) !important; } .hover-glow-intense { transition: all 0.3s ease !important; } .hover-glow-intense:hover { box-shadow: 0 0 3rem rgba(59, 130, 246, 0.8), 0 0 1rem rgba(59, 130, 246, 0.4) inset !important; transform: scale(1.05) !important; } /* Bounce & Scale */ .hover-bounce-scale:hover { animation: bounceScale 0.6s ease !important; } /* Shake & Wobble */ .hover-shake:hover { animation: shake 0.5s ease-in-out !important; } .hover-wobble:hover { animation: wobble 0.5s ease-in-out !important; } .hover-bounce:hover { animation: bounce 0.5s ease-in-out !important; } .hover-jello:hover { animation: jello 0.6s ease-in-out !important; } .hover-rubber:hover { animation: rubberBand 0.6s ease-in-out !important; } /* Border Hover */ .hover-border-grow { transition: all 0.3s ease !important; border: 2px solid transparent !important; } .hover-border-grow:hover { border-color: rgb(59, 130, 246) !important; transform: scale(1.02) !important; } .hover-border-glow { transition: all 0.3s ease !important; } .hover-border-glow:hover { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; } /* Shadow Hover */ .hover-shadow-soft { transition: box-shadow 0.3s ease !important; } .hover-shadow-soft:hover { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important; } .hover-shadow-hard { transition: box-shadow 0.3s ease !important; } .hover-shadow-hard:hover { box-shadow: 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2) !important; } .hover-shadow-neon { transition: all 0.3s ease !important; } .hover-shadow-neon:hover { box-shadow: 0 0 1rem rgba(59, 130, 246, 0.6), 0 0 2rem rgba(59, 130, 246, 0.4) !important; } /* Text Hover */ .hover-text-glow:hover { text-shadow: 0 0 1rem currentColor !important; transition: text-shadow 0.3s ease !important; } .hover-text-lift { transition: all 0.3s ease !important; } .hover-text-lift:hover { transform: translateY(-0.125rem) !important; text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2) !important; } .hover-text-scale { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: inline-block !important; } .hover-text-scale:hover { transform: scale(1.1) !important; } /* Flip Hover */ .hover-flip-x { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; } .hover-flip-x:hover { transform: rotateX(360deg) !important; } .hover-flip-y { transition: transform 0.6s ease !important; transform-style: preserve-3d !important; } .hover-flip-y:hover { transform: rotateY(360deg) !important; } /* Swing Hover */ .hover-swing:hover { animation: swing 0.8s ease !important; transform-origin: top center !important; } /* Pulse Hover */ .hover-pulse:hover { animation: pulseHover 0.6s ease !important; } .hover-heartbeat:hover { animation: heartbeat 0.8s ease-in-out !important; } /* ===== CONTINUOUS ANIMATIONS ===== */ .animate-float { animation: float 3s ease-in-out infinite !important; } .animate-float-slow { animation: float 5s ease-in-out infinite !important; } .animate-bounce-slow { animation: bounce 2s ease-in-out infinite !important; } .animate-spin-slow { animation: spin 3s linear infinite !important; } .animate-ping-slow { animation: ping 3s ease-out infinite !important; } .animate-breath { animation: breath 4s ease-in-out infinite !important; } .animate-wave { animation: wave 2s ease-in-out infinite !important; } .animate-glow { animation: glow 2s ease-in-out infinite !important; } .animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite !important; } .animate-drift { animation: drift 6s ease-in-out infinite !important; } .animate-sway { animation: sway 3s ease-in-out infinite !important; } .animate-rotate-slow { animation: rotateSlow 20s linear infinite !important; } .animate-bob { animation: bob 2s ease-in-out infinite !important; } /* ===== ANIMATION KEYFRAMES ===== */ /* Fade Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes fadeInBlur { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } } /* Slide Animations */ @keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideInDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideInDiagonal { from { transform: translate(-100%, -100%); opacity: 0; } to { transform: translate(0, 0); opacity: 1; } } /* Zoom Animations */ @keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes zoomInUp { from { opacity: 0; transform: scale(0.5) translateY(2rem); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes zoomInDown { from { opacity: 0; transform: scale(0.5) translateY(-2rem); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes zoomInLeft { from { opacity: 0; transform: scale(0.5) translateX(-2rem); } to { opacity: 1; transform: scale(1) translateX(0); } } @keyframes zoomInRight { from { opacity: 0; transform: scale(0.5) translateX(2rem); } to { opacity: 1; transform: scale(1) translateX(0); } } @keyframes zoomInRotate { from { opacity: 0; transform: scale(0.5) rotate(-45deg); } to { opacity: 1; transform: scale(1) rotate(0); } } /* Bounce Animations */ @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2rem) scale(0.3); } 50% { opacity: 1; transform: translateY(-1rem) scale(1.05); } 70% { transform: translateY(0.5rem) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2rem) scale(0.3); } 50% { opacity: 1; transform: translateY(1rem) scale(1.05); } 70% { transform: translateY(-0.5rem) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2rem) scale(0.3); } 50% { opacity: 1; transform: translateX(1rem) scale(1.05); } 70% { transform: translateX(-0.5rem) scale(0.9); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2rem) scale(0.3); } 50% { opacity: 1; transform: translateX(-1rem) scale(1.05); } 70% { transform: translateX(0.5rem) scale(0.9); } 100% { opacity: 1; transform: translateX(0) scale(1); } } /* Flip Animations */ @keyframes flipInX { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInY { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInDiagonal { from { transform: perspective(400px) rotate3d(1, 1, 0, 90deg); opacity: 0; } to { transform: perspective(400px) rotate3d(1, 1, 0, 0deg); opacity: 1; } } /* Rotate Animations */ @keyframes rotateIn { from { transform: rotate(-180deg); opacity: 0; } to { transform: rotate(0deg); opacity: 1; } } @keyframes rotateInUp { from { transform: rotate(-180deg) translateY(2rem); opacity: 0; } to { transform: rotate(0deg) translateY(0); opacity: 1; } } @keyframes rotateInDown { from { transform: rotate(180deg) translateY(-2rem); opacity: 0; } to { transform: rotate(0deg) translateY(0); opacity: 1; } } @keyframes rotateInScale { from { transform: rotate(-180deg) scale(0.5); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } } /* Special Entrance Animations */ @keyframes rollIn { from { opacity: 0; transform: translateX(-100%) rotate(-120deg); } to { opacity: 1; transform: translateX(0px) rotate(0deg); } } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0, 0, 0); } } @keyframes swingIn { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } @keyframes wobbleIn { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) rotate3d(0, 0, 1, -45deg); } 50% { opacity: 1; transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 15deg); } 70% { transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); } to { opacity: 1; transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); } } @keyframes pulseIn { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); opacity: 0; } 50% { transform: scaleY(0.005) scaleX(1); opacity: 0.5; } 100% { transform: scaleY(1) scaleX(1); opacity: 1; } } @keyframes spiralIn { 0% { transform: rotate(960deg) scale(0); opacity: 0; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } } /* Hover Effect Keyframes */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-0.5rem); } 40%, 80% { transform: translateX(0.5rem); } } @keyframes wobble { 0%, 100% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1rem); } } @keyframes jello { 0%, 100% { transform: skewX(0deg) skewY(0deg); } 30% { transform: skewX(25deg) skewY(25deg); } 40% { transform: skewX(-15deg) skewY(-15deg); } 50% { transform: skewX(15deg) skewY(15deg); } 65% { transform: skewX(-5deg) skewY(-5deg); } 75% { transform: skewX(5deg) skewY(5deg); } } @keyframes rubberBand { 0% { transform: scale(1); } 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 50% { transform: scale(1.15, 0.85); } 65% { transform: scale(0.95, 1.05); } 75% { transform: scale(1.05, 0.95); } 100% { transform: scale(1); } } @keyframes bounceScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes pulseHover { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } } /* Continuous Animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-1rem); } } @keyframes breath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.5rem); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 0.5rem rgba(59, 130, 246, 0.5); } 50% { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.8); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 1rem rgba(59, 130, 246, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 2rem rgba(59, 130, 246, 0.8); transform: scale(1.02); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes drift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0.5rem, -0.5rem); } 50% { transform: translate(0, -1rem); } 75% { transform: translate(-0.5rem, -0.5rem); } } @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ===== UTILITY CLASSES ===== */ .delay-100 { animation-delay: 0.1s !important; } .delay-200 { animation-delay: 0.2s !important; } .delay-300 { animation-delay: 0.3s !important; } .delay-500 { animation-delay: 0.5s !important; } .delay-700 { animation-delay: 0.7s !important; } .delay-1000 { animation-delay: 1s !important; } .duration-fast { animation-duration: 0.3s !important; } .duration-normal { animation-duration: 0.6s !important; } .duration-slow { animation-duration: 1s !important; } .duration-slower { animation-duration: 1.5s !important; } .ease-smooth { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; } /* Make all scrollbars thin */ * { scrollbar-width: thin; scrollbar-color: var(--borderColor,#aaa) transparent; } /* Chrome / Safari / Edge */ ::-webkit-scrollbar { width: 6px !important; } ::-webkit-scrollbar-thumb { background-color: var(--borderColor,#aaa) !important; border-radius: 20px !important; border: 2px solid transparent !important; background-clip: content-box !important; /* <<— Force thumb to always appear shorter visually */ min-height: 40px !important; } ::-webkit-scrollbar-thumb:hover { background-color: var(--dark500,#666) !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-button { display: none !important; } /* Make content scroll more so thumb shrinks */ *::-webkit-scrollbar-thumb { min-height: 40px !important; }