diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index d1b972f..5794172 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -4,6 +4,23 @@ ## Change Summary +## Changelog Entry + +> **Instructions:** Add your changelog entry below in Keep a Changelog format. This will be used to update CHANGELOG.md when the PR is merged. +> +> **Format:** +> ```markdown +> ### [Category] +> - Brief description of change (#PR-number) +> ``` +> +> **Categories:** Added, Changed, Deprecated, Removed, Fixed, Security + +```markdown +### [Category] +- Your changelog entry here +``` + ## Testing Evidence ## Risk and Rollback @@ -14,6 +31,7 @@ - [ ] Documentation updated if required - [ ] License header present where applicable - [ ] Linked issue(s) referenced +- [ ] Changelog entry provided above ## Reviewer Notes diff --git a/.github/workflows/changelog-validation.yml b/.github/workflows/changelog-validation.yml new file mode 100644 index 0000000..e47b4f6 --- /dev/null +++ b/.github/workflows/changelog-validation.yml @@ -0,0 +1,194 @@ +# Copyright (C) 2026 Moko Consulting +# +# This file is part of a Moko Consulting project. +# +# SPDX-License-Identifier: GPL-3.0-or-later + +name: Changelog Validation + +on: + pull_request: + types: [opened, edited, synchronize, reopened] + branches: + - main + - 'dev/**' + - 'rc/**' + - 'version/**' + +permissions: + contents: read + pull-requests: write + +jobs: + validate-changelog-entry: + name: Validate Changelog Entry + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Check for changelog entry in PR description + id: check_changelog + uses: actions/github-script@v7 + with: + script: | + const prBody = context.payload.pull_request.body || ''; + const prNumber = context.payload.pull_request.number; + const prAuthor = context.payload.pull_request.user.login; + + // Skip for automated PRs (e.g., Dependabot) + const automatedAuthors = ['dependabot[bot]', 'github-actions[bot]']; + if (automatedAuthors.includes(prAuthor)) { + console.log('Skipping changelog check for automated PR'); + core.setOutput('has_entry', 'true'); + core.setOutput('skip', 'true'); + return; + } + + // Check if PR body contains changelog entry section + const changelogSection = prBody.match(/## Changelog Entry[\s\S]*?```markdown([\s\S]*?)```/); + + if (!changelogSection) { + console.log('No changelog entry section found in PR template'); + core.setOutput('has_entry', 'false'); + core.setOutput('skip', 'false'); + return; + } + + const changelogContent = changelogSection[1].trim(); + + // Check if changelog entry is not just the template placeholder + const isPlaceholder = changelogContent.includes('[Category]') || + changelogContent.includes('Your changelog entry here') || + changelogContent.length < 20; + + if (isPlaceholder) { + console.log('Changelog entry appears to be placeholder text'); + core.setOutput('has_entry', 'false'); + core.setOutput('skip', 'false'); + return; + } + + // Validate that it contains a category + const validCategories = ['Added', 'Changed', 'Deprecated', 'Removed', 'Fixed', 'Security']; + const hasValidCategory = validCategories.some(cat => changelogContent.includes(`### ${cat}`)); + + if (!hasValidCategory) { + console.log('Changelog entry does not contain a valid category'); + core.setOutput('has_entry', 'false'); + core.setOutput('skip', 'false'); + core.setOutput('reason', 'missing_category'); + return; + } + + console.log('Valid changelog entry found'); + core.setOutput('has_entry', 'true'); + core.setOutput('skip', 'false'); + core.setOutput('entry', changelogContent); + + - name: Comment on PR if changelog entry is missing + if: steps.check_changelog.outputs.has_entry == 'false' && steps.check_changelog.outputs.skip == 'false' + uses: actions/github-script@v7 + with: + script: | + const reason = '${{ steps.check_changelog.outputs.reason }}'; + let message = '## ⚠️ Changelog Entry Required\n\n'; + + if (reason === 'missing_category') { + message += 'Your PR includes a changelog entry, but it does not contain a valid category.\n\n'; + } else { + message += 'This PR is missing a changelog entry or contains only placeholder text.\n\n'; + } + + message += 'Please add a changelog entry in the "Changelog Entry" section of the PR description.\n\n'; + message += '### Valid Categories\n'; + message += '- **Added** - New features or files\n'; + message += '- **Changed** - Modifications to existing functionality\n'; + message += '- **Deprecated** - Features marked for future removal\n'; + message += '- **Removed** - Deleted features or files\n'; + message += '- **Fixed** - Bug fixes\n'; + message += '- **Security** - Security-related changes\n\n'; + message += '### Example\n'; + message += '```markdown\n'; + message += '### Added\n'; + message += '- New feature description (#' + context.payload.pull_request.number + ')\n\n'; + message += '### Changed\n'; + message += '- Modified behavior description (#' + context.payload.pull_request.number + ')\n'; + message += '```\n\n'; + message += 'See [CHANGELOG_PROCESS.md](https://github.com/mokoconsulting-tech/moko-cassiopeia/blob/main/docs/CHANGELOG_PROCESS.md) for detailed guidelines.'; + + // Check if we already commented + const comments = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.payload.pull_request.number + }); + + const botComment = comments.data.find(comment => + comment.user.login === 'github-actions[bot]' && + comment.body.includes('Changelog Entry Required') + ); + + if (botComment) { + // Update existing comment + await github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: botComment.id, + body: message + }); + } else { + // Create new comment + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.payload.pull_request.number, + body: message + }); + } + + - name: Add label if changelog is missing + if: steps.check_changelog.outputs.has_entry == 'false' && steps.check_changelog.outputs.skip == 'false' + uses: actions/github-script@v7 + continue-on-error: true + with: + script: | + await github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.payload.pull_request.number, + labels: ['needs-changelog'] + }); + + - name: Remove label if changelog is present + if: steps.check_changelog.outputs.has_entry == 'true' && steps.check_changelog.outputs.skip == 'false' + uses: actions/github-script@v7 + continue-on-error: true + with: + script: | + try { + await github.rest.issues.removeLabel({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.payload.pull_request.number, + name: 'needs-changelog' + }); + } catch (error) { + // Label might not exist, that's okay + console.log('Label does not exist or already removed'); + } + + - name: Set status + if: steps.check_changelog.outputs.skip == 'false' + run: | + if [ "${{ steps.check_changelog.outputs.has_entry }}" == "true" ]; then + echo "✅ Changelog entry found and validated" + exit 0 + else + echo "❌ Changelog entry is missing or invalid" + echo "Please add a changelog entry to your PR description" + exit 1 + fi diff --git a/CHANGELOG.md b/CHANGELOG.md index b7ed2cf..b5b54b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,11 +8,31 @@ DEFGROUP: Joomla.Template.Site INGROUP: Moko-Cassiopeia.Documentation PATH: ./CHANGELOG.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Changelog file documenting version history of Moko-Cassiopeia --> -# Changelog — Moko-Cassiopeia (VERSION: 03.05.00) +# Changelog — Moko-Cassiopeia (VERSION: 03.06.00) + +## [Unreleased] +### Added +- PR-based changelog process with comprehensive documentation (#66) + - Created CHANGELOG_PROCESS.md guide with detailed workflow + - Added changelog entry section to PR template + - Integrated changelog guidance into CONTRIBUTING.md and WORKFLOW_GUIDE.md +- GitHub Actions workflow for automatic changelog validation and PR labeling (#66) + - Validates changelog entries in PR descriptions + - Automatically comments with guidance on missing/invalid entries + - Smart detection skips automated PRs + +### Changed +- Updated roadmap documentation based on current open pull requests (#66) +- Added document generation system as planned feature (#66) +- Synchronized roadmap version timeline with active development branches (#66) + +## [03.06.00] 2026-01-28 +### Changed +- Updated version to 03.06.00 across all files ## [03.05.01] 2026-01-09 ### Added diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 8ece2af..5f44283 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: CODE_OF_CONDUCT.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Contributor code of conduct for the Moko-Cassiopeia project. PATH: /CODE_OF_CONDUCT.md NOTE: This document defines behavioral expectations and enforcement processes. @@ -86,7 +86,7 @@ This project is managed from Tennessee, USA. This statement is informational and * **Repository:** [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * **Path:** /CODE_OF_CONDUCT.md * **Owner:** Moko Consulting -* **Version:** 03.05.00 +* **Version:** 03.06.00 * **Status:** Active * **Effective Date:** 2025-12-18 * **Last Reviewed:** 2025-12-18 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 44dd89c..39f47a8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: CONTRIBUTING.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Contribution guidelines for the Moko-Cassiopeia project. PATH: /CONTRIBUTING.md NOTE: This document defines contribution workflow, standards, and governance alignment. @@ -61,6 +61,7 @@ The repository provides several tools to streamline development: 2. Create a branch from the active development branch. 3. Make focused, minimal changes that address a single concern. 4. Submit a pull request with a clear description of intent and impact. +5. **Include a changelog entry** in the PR template describing your changes (see [CHANGELOG_PROCESS.md](./docs/CHANGELOG_PROCESS.md)). Direct commits to protected branches are not permitted. @@ -88,6 +89,16 @@ Documentation changes must: * Avoid embedding version numbers in revision history tables. * Preserve existing structure unless a structural change is explicitly proposed. +## Changelog Maintenance + +All changes must be documented in the changelog: + +* **Include a changelog entry** in every pull request (see the PR template) +* Follow [Keep a Changelog](https://keepachangelog.com/) format +* Use appropriate categories: Added, Changed, Deprecated, Removed, Fixed, Security +* Write from a user perspective, not implementation details +* See [docs/CHANGELOG_PROCESS.md](./docs/CHANGELOG_PROCESS.md) for complete guidelines + ## Commit Messages Commit messages should: @@ -133,7 +144,7 @@ Participation in this project is governed by the Code of Conduct. Unacceptable b * **Repository:** [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * **Path:** /CONTRIBUTING.md * **Owner:** Moko Consulting -* **Version:** 03.05.00 +* **Version:** 03.06.00 * **Status:** Active * **Effective Date:** 2025-12-18 * **Last Reviewed:** 2025-12-18 diff --git a/GOVERNANCE.md b/GOVERNANCE.md index deb3de2..22329d8 100644 --- a/GOVERNANCE.md +++ b/GOVERNANCE.md @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: GOVERNANCE.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Project governance model, roles, and decision processes for Moko-Cassiopeia. PATH: /GOVERNANCE.md NOTE: This document defines authority, decision making, and escalation paths. @@ -103,7 +103,7 @@ This project is managed from Tennessee, USA. This statement is informational and * **Repository:** [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * **Path:** /GOVERNANCE.md * **Owner:** Moko Consulting -* **Version:** 03.05.00 +* **Version:** 03.06.00 * **Status:** Active * **Effective Date:** 2025-12-18 * **Last Reviewed:** 2025-12-18 diff --git a/README.md b/README.md index 4f2ce21..3776fbe 100644 --- a/README.md +++ b/README.md @@ -9,11 +9,11 @@ INGROUP: Moko-Cassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: ./README.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Documentation for Moko-Cassiopeia template --> -# Moko-Cassiopeia (VERSION: 03.05.00) +# Moko-Cassiopeia (VERSION: 03.06.00) A modern, lightweight enhancement layer for Joomla's Cassiopeia template. diff --git a/SECURITY.md b/SECURITY.md index 1dab51e..fca253d 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia.Governance REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: SECURITY.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Security policy and vulnerability reporting process for Moko-Cassiopeia. PATH: /SECURITY.md NOTE: This policy is process oriented and does not replace secure engineering practices. @@ -153,7 +153,7 @@ If you want credit, include the name or handle to list in an advisory. If you pr * **Repository:** [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * **Path:** /SECURITY.md * **Owner:** Moko Consulting -* **Version:** 03.05.00 +* **Version:** 03.06.00 * **Status:** Active * **Effective Date:** 2025-12-18 * **Last Reviewed:** 2025-12-18 diff --git a/docs/CHANGELOG_PROCESS.md b/docs/CHANGELOG_PROCESS.md new file mode 100644 index 0000000..ce8664b --- /dev/null +++ b/docs/CHANGELOG_PROCESS.md @@ -0,0 +1,424 @@ + + +# Changelog Process Guide + +This guide explains how to maintain the changelog based on pull requests, ensuring that all changes are properly documented. + +## Table of Contents + +- [Overview](#overview) +- [Changelog Format](#changelog-format) +- [PR-Based Changelog Workflow](#pr-based-changelog-workflow) +- [Writing Good Changelog Entries](#writing-good-changelog-entries) +- [Categories Explained](#categories-explained) +- [Examples](#examples) +- [Automation](#automation) +- [Best Practices](#best-practices) +- [Troubleshooting](#troubleshooting) +- [Quick Reference](#quick-reference) +- [Resources](#resources) +- [Related Documentation](#related-documentation) + +## Overview + +The Moko-Cassiopeia project follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) format for maintaining the CHANGELOG.md file. This ensures that changes are: + +- **Human-readable** - Users can quickly understand what changed +- **Grouped by category** - Changes are organized by type (Added, Changed, etc.) +- **Version-based** - Changes are associated with specific releases +- **PR-linked** - Each entry references the pull request that introduced it + +## Changelog Format + +The changelog follows this structure: + +```markdown +# Changelog — Moko-Cassiopeia (VERSION: X.Y.Z) + +## [Unreleased] +### Added +- New feature description (#123) + +### Changed +- Modified functionality description (#124) + +### Fixed +- Bug fix description (#125) + +## [X.Y.Z] YYYY-MM-DD +### Added +- Released feature description (#120) + +### Changed +- Released modification description (#121) +``` + +## PR-Based Changelog Workflow + +### For Contributors + +When creating a pull request: + +1. **Fill out the PR template** - Include all required sections +2. **Add a Changelog Entry** - In the "Changelog Entry" section of the PR template, provide: + ```markdown + ### Added + - New feature that does X (#PR-number) + ``` +3. **Use the correct category** - Choose from: Added, Changed, Deprecated, Removed, Fixed, Security +4. **Be descriptive** - Explain what changed from a user's perspective +5. **Check the changelog checkbox** - Confirm you've provided an entry + +### For Maintainers + +When merging a pull request: + +1. **Review the changelog entry** - Ensure it's clear and accurate +2. **Copy to CHANGELOG.md** - Add the entry to the `[Unreleased]` section +3. **Add PR number** - Include the PR number in parentheses: `(#123)` +4. **Maintain category order** - Keep categories in standard order +5. **Update version on release** - Move `[Unreleased]` entries to versioned section + +### Release Process + +When creating a new release: + +1. **Move unreleased entries** - Transfer from `[Unreleased]` to `[X.Y.Z] YYYY-MM-DD` +2. **Update version header** - Change the top-level version number +3. **Add release date** - Use format: `[X.Y.Z] YYYY-MM-DD` +4. **Clear unreleased section** - Leave `[Unreleased]` empty or remove it +5. **Commit changelog** - Include in the release commit + +## Writing Good Changelog Entries + +### DO ✅ + +- **Use imperative mood** - "Add feature" not "Added feature" +- **Be specific** - Mention what component/file changed +- **Focus on user impact** - What does this mean for users? +- **Include PR reference** - Always add `(#123)` +- **Keep it concise** - One line per change when possible + +**Good examples:** +```markdown +### Added +- Installation script for automated media folder cleanup during updates (#65) +- Document generation system as planned feature (#66) + +### Changed +- Asset minification now linked to Joomla's global cache system (#62) +- Updated version to 03.08.00 across 24+ files (#65) + +### Fixed +- Corrected stylesheet inconsistencies between Bootstrap 5 helpers and template overrides (#42) +``` + +### DON'T ❌ + +- **Be vague** - "Fixed bug" or "Updated file" +- **Use past tense** - "Added feature" should be "Add feature" +- **Skip the PR number** - Always include it +- **Duplicate entries** - Combine related changes +- **Include implementation details** - Focus on user-facing changes + +**Bad examples:** +```markdown +### Changed +- Updated some files (no PR reference) +- Fixed it (too vague) +- Modified AssetMinifier.php parameter logic (implementation detail) +``` + +## Categories Explained + +### Added +New features, files, or capabilities added to the template. + +**Examples:** +- New template parameters +- New layout options +- New helper classes +- New documentation files +- New configuration options + +### Changed +Modifications to existing functionality that change behavior. + +**Examples:** +- Updated dependencies +- Modified default settings +- Changed CSS styles +- Refactored code (when it affects behavior) +- Updated documentation + +### Deprecated +Features that will be removed in future versions but still work. + +**Examples:** +- Template parameters marked for removal +- Old API methods still supported +- Legacy configuration options + +### Removed +Features, files, or capabilities that have been deleted. + +**Examples:** +- Removed deprecated parameters +- Deleted unused files +- Removed old workarounds +- Deleted legacy code + +### Fixed +Bug fixes and corrections. + +**Examples:** +- Fixed CSS rendering issues +- Corrected PHP errors +- Fixed broken links +- Resolved accessibility issues +- Patched security vulnerabilities (use Security for serious ones) + +### Security +Security-related changes and vulnerability fixes. + +**Examples:** +- Patched XSS vulnerabilities +- Updated vulnerable dependencies +- Fixed security misconfigurations +- Added security hardening + +## Examples + +### Example 1: Feature Addition PR + +**PR #65: Add Installation Script** + +In the PR template: +```markdown +### Changelog Entry + +### Added +- Installation script for automated media folder cleanup during template updates (#65) + - Implements InstallerScriptInterface with lifecycle hooks + - Recursive cleanup of empty directories + - Operation logging to logs/moko_cassiopeia_cleanup.php + +### Changed +- Updated version to 03.08.00 across 24+ files (#65) +``` + +In CHANGELOG.md (after merge): +```markdown +## [Unreleased] +### Added +- Installation script for automated media folder cleanup during template updates (#65) + - Implements InstallerScriptInterface with lifecycle hooks + - Recursive cleanup of empty directories + - Operation logging to logs/moko_cassiopeia_cleanup.php + +### Changed +- Updated version to 03.08.00 across 24+ files (#65) +``` + +### Example 2: Bug Fix PR + +**PR #123: Fix Dark Mode Toggle** + +In the PR template: +```markdown +### Changelog Entry + +### Fixed +- Dark mode toggle not persisting user preference in localStorage (#123) +- Toggle switch visual state not syncing with system theme preference (#123) +``` + +### Example 3: Multiple Changes PR + +**PR #62: Cache Integration** + +In the PR template: +```markdown +### Changelog Entry + +### Changed +- Asset minification now linked to Joomla's global cache system (#62) + - Cache enabled: minified assets (`.min` suffix) created and used + - Cache disabled: non-minified assets used, minified files deleted + +### Deprecated +- Template-specific `developmentmode` parameter (replaced by Joomla cache setting) (#62) +``` + +## Automation + +### Current Automation + +The repository now includes automated changelog validation: + +- ✅ **GitHub Actions workflow** validates changelog entries in PRs +- ✅ **Automatic PR labeling** based on changelog status +- ✅ **PR comments** with guidance for missing/invalid entries +- ✅ **Smart detection** skips automated PRs (Dependabot, bots) + +**Workflow:** `.github/workflows/changelog-validation.yml` + +The workflow: +1. Checks PR description for changelog entry +2. Validates entry format and category +3. Comments on PR if entry is missing or invalid +4. Adds/removes "needs-changelog" label +5. Fails check if changelog is missing (except for automated PRs) + +### Future Automation (Planned) + +Future enhancements may include: + +- **Semi-automated CHANGELOG.md updates** on PR merge +- **Release notes generation** from changelog entries +- **Changelog preview** in PR comments showing how entry will appear +- **Multi-format export** for release notes + +## Best Practices + +### For All Contributors + +1. ✅ **Always provide a changelog entry** - Every PR should document its changes +2. ✅ **Review existing entries** - Check for similar changes to maintain consistency +3. ✅ **Test your entry format** - Ensure markdown renders correctly +4. ✅ **Link the PR** - Always include `(#PR-number)` at the end +5. ✅ **Think user-first** - Write from the perspective of someone using the template + +### For Maintainers + +1. ✅ **Review every changelog entry** - Don't merge PRs with poor/missing entries +2. ✅ **Keep categories in order** - Added, Changed, Deprecated, Removed, Fixed, Security +3. ✅ **Merge related entries** - Combine multiple PRs for the same feature +4. ✅ **Update promptly** - Add entries to CHANGELOG.md as PRs are merged +5. ✅ **Version regularly** - Move unreleased entries to version sections on release + +### Version Management + +1. ✅ **Use semantic versioning** - Major.Minor.Patch (03.06.00) +2. ✅ **Update version header** - Keep VERSION comment in sync +3. ✅ **Date releases** - Use YYYY-MM-DD format +4. ✅ **Link releases** - Add GitHub release links at bottom of changelog +5. ✅ **Keep history** - Never delete old version entries + +### Quality Control + +1. ✅ **Consistent language** - Maintain similar writing style across entries +2. ✅ **No duplicates** - Check for existing entries before adding +3. ✅ **Proper grammar** - Proofread entries before committing +4. ✅ **Clear categorization** - Ensure changes are in the right category +5. ✅ **Complete information** - Include all necessary context + +## Troubleshooting + +### Missing Changelog Entry + +**Problem:** PR merged without changelog entry + +**Solution:** +1. Create a follow-up commit to CHANGELOG.md +2. Add the missing entry with PR reference +3. Consider making changelog entry mandatory in PR checks + +### Wrong Category + +**Problem:** Entry is in the wrong category + +**Solution:** +1. Move entry to correct category +2. Update PR template guidance if confusion is common +3. Provide examples in code review + +### Duplicate Entries + +**Problem:** Same change documented multiple times + +**Solution:** +1. Consolidate entries into one comprehensive entry +2. Keep all PR references: `(#123, #124, #125)` +3. Ensure the combined entry captures all aspects + +### Unclear Description + +**Problem:** Changelog entry is too vague or technical + +**Solution:** +1. Rewrite from user perspective +2. Ask the PR author for clarification +3. Add more context about the impact + +## Quick Reference + +### Changelog Entry Template + +```markdown +### [Category] +- [Brief description of what changed from user perspective] (#PR-number) + - [Optional: Additional detail] + - [Optional: Additional detail] +``` + +### Common Phrases + +- "Add [feature] to [component]" +- "Update [component] to [new behavior]" +- "Fix [issue] in [component]" +- "Remove [feature] from [component]" +- "Deprecate [feature] in favor of [replacement]" +- "Improve [component] performance/accessibility/security" + +### Checklist + +Before submitting PR: +- [ ] Changelog entry provided in PR template +- [ ] Entry uses correct category +- [ ] Entry is user-focused, not implementation-focused +- [ ] Entry includes PR number +- [ ] Entry uses imperative mood +- [ ] Entry is clear and concise + +Before merging PR: +- [ ] Changelog entry is accurate +- [ ] Changelog entry is well-written +- [ ] Category is appropriate +- [ ] PR number is correct +- [ ] Entry will be copied to CHANGELOG.md + +## Resources + +- [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - Official format guide +- [Semantic Versioning](https://semver.org/) - Version numbering standard +- [Conventional Commits](https://www.conventionalcommits.org/) - Commit message format +- [GitHub Flow](https://guides.github.com/introduction/flow/) - Branch and PR workflow + +## Related Documentation + +- [WORKFLOW_GUIDE.md](./WORKFLOW_GUIDE.md) - GitHub Actions and development workflows +- [CONTRIBUTING.md](../CONTRIBUTING.md) - General contribution guidelines +- [README.md](../README.md) - Project overview +- [ROADMAP.md](./ROADMAP.md) - Feature planning and version timeline + +--- + +**Document Version:** 1.0.0 +**Last Updated:** 2026-01-28 +**Maintained by:** Moko Consulting Engineering diff --git a/docs/QUICK_START.md b/docs/QUICK_START.md index 6b63364..879b739 100644 --- a/docs/QUICK_START.md +++ b/docs/QUICK_START.md @@ -271,7 +271,7 @@ make test ### Version Management -- Use semantic versioning: Major.Minor.Patch (03.05.00) +- Use semantic versioning: Major.Minor.Patch (03.06.00) - Update CHANGELOG.md with all changes - Follow the version hierarchy: dev → rc → version → main - Never skip stages in the release process diff --git a/docs/README.md b/docs/README.md index 48ff528..1d24aa6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: docs/README.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Documentation index for Moko-Cassiopeia template PATH: /docs/README.md --> @@ -34,6 +34,12 @@ This directory contains comprehensive documentation for the Moko-Cassiopeia Joom * Release process * Pull request guidelines +* **[Changelog Process Guide](CHANGELOG_PROCESS.md)** - Maintaining the changelog + * PR-based changelog workflow + * Writing good changelog entries + * Categories and formatting + * Automation and best practices + * **[Joomla Development Guide](JOOMLA_DEVELOPMENT.md)** - Joomla-specific development * Testing with Codeception * PHP quality checks (PHPStan, PHPCS) @@ -41,7 +47,7 @@ This directory contains comprehensive documentation for the Moko-Cassiopeia Joom * Multi-version testing * **[Roadmap](ROADMAP.md)** - Version-specific roadmap - * Current features (v03.05.00) + * Current features (v03.06.00) * Feature evolution timeline * Planned enhancements * Development priorities @@ -58,6 +64,7 @@ moko-cassiopeia/ │ ├── README.md # This file - documentation index │ ├── QUICK_START.md # Quick start guide for developers │ ├── WORKFLOW_GUIDE.md # Development workflow guide +│ ├── CHANGELOG_PROCESS.md # Changelog maintenance guide │ ├── JOOMLA_DEVELOPMENT.md # Joomla-specific development guide │ └── ROADMAP.md # Version-specific roadmap ├── src/ # Template source code @@ -105,7 +112,7 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M * Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * Path: /docs/README.md * Owner: Moko Consulting -* Version: 03.05.00 +* Version: 03.06.00 * Status: Active * Effective Date: 2026-01-09 @@ -113,5 +120,6 @@ This project adheres to [MokoStandards](https://github.com/mokoconsulting-tech/M | Date | Change Summary | Author | | ---------- | ----------------------------------------------------- | --------------- | -| 2026-01-09 | Initial documentation index created for MokoStandards compliance. | GitHub Copilot | +| 2026-01-28 | Added CHANGELOG_PROCESS.md reference and link. | GitHub Copilot | | 2026-01-27 | Updated with roadmap link and version to 03.05.01. | GitHub Copilot | +| 2026-01-09 | Initial documentation index created for MokoStandards compliance. | GitHub Copilot | diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 7fea464..9de6018 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -10,12 +10,12 @@ INGROUP: Moko-Cassiopeia.Documentation REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia FILE: docs/ROADMAP.md - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Version-specific roadmap for Moko-Cassiopeia template PATH: /docs/ROADMAP.md --> -# Moko-Cassiopeia Roadmap (VERSION: 03.05.00) +# Moko-Cassiopeia Roadmap (VERSION: 03.06.00) This document provides a comprehensive, version-specific roadmap for the Moko-Cassiopeia Joomla template, tracking feature evolution, current capabilities, and planned enhancements. @@ -24,7 +24,7 @@ This document provides a comprehensive, version-specific roadmap for the Moko-Ca - [Version Timeline](#version-timeline) - [Past Releases](#past-releases) - [Future Roadmap (5-Year Plan)](#future-roadmap-5-year-plan) -- [Current Release (v03.05.00)](#current-release-v030500) +- [Current Release (v03.06.00)](#current-release-v030600) - [Implemented Features](#implemented-features) - [Planned Features](#planned-features) - [Development Priorities](#development-priorities) @@ -51,8 +51,42 @@ This document provides a comprehensive, version-specific roadmap for the Moko-Ca - Enforced repository compliance with MokoStandards - Improved security posture with automated scanning +### v03.07.00 (2026-01-28) - Roadmap Update +**Status**: In Development (Open PR #66) + +**Changed**: +- Updated roadmap documentation based on current open pull requests +- Added document generation system as planned feature +- Synchronized roadmap version timeline with active development branches +- Enhanced future roadmap planning with documentation capabilities + +### v03.08.00 (2026-01-28) - Installation Automation & Cache Integration +**Status**: In Development (Open PR #65, #62) + +**Added**: +- Installation script (`src/templates/script.php`) for automated media folder cleanup during template updates (PR #65) + - Implements `InstallerScriptInterface` with lifecycle hooks + - Automatic removal of deprecated files/folders during updates + - Recursive cleanup of empty directories + - Operation logging to `logs/moko_cassiopeia_cleanup.php` + - Validates Joomla 4.0+ and PHP 7.4+ requirements + +**Changed**: +- Asset minification now linked to Joomla's global cache system (PR #62) + - When cache enabled: minified assets (`.min` suffix) are created and used + - When cache disabled: non-minified assets used, minified files deleted + - Replaced template-specific `developmentmode` parameter with Joomla cache configuration + - `AssetMinifier.php` updated with inverted parameter logic for cache semantics +- Updated version to 03.08.00 across 24+ files (CSS/JS, PHP/Config, templateDetails.xml, joomla.asset.json) (PR #65) + +### v03.06.00 (2026-01-28) - Version Update +**Status**: Released + +**Changed**: +- Updated version to 03.06.00 across all files + ### v03.05.00 (2026-01-04) - Workflow & Governance -**Status**: Current Release (in code) +**Status**: Mentioned in CHANGELOG (v03.05.00) **Added**: - `.github/workflows` directory structure @@ -163,7 +197,8 @@ The following versions represent our planned annual major releases, each buildin - Live reload during development - Enhanced error logging and diagnostics - Template debugging tools - - Style guide generator + - Document generation system (style guides, API docs, parameter reference) + - Automated documentation from code annotations - **Content Display Features** - Soft offline mode (category-based access during maintenance) @@ -294,7 +329,7 @@ The following versions represent our planned annual major releases, each buildin - Template backup/restore functionality - Template A/B testing support - Multi-language template variations -- Template documentation generator +- Enhanced document generation (multi-format export, interactive docs) --- @@ -355,7 +390,7 @@ The following versions represent our planned annual major releases, each buildin **Template Infrastructure**: - Template pattern library - Design token system -- Template component documentation +- Advanced document generation with live previews - Automated template testing suite - Template performance monitoring @@ -431,7 +466,9 @@ The following versions represent our planned annual major releases, each buildin --- -## Current Release (v03.05.00) +## Current Release (v03.06.00) + +**Note**: v03.07.00 (PR #66), v03.08.00 (PR #65, #62) are currently in development. ### System Requirements - **Joomla**: 4.4.x or 5.x @@ -542,8 +579,11 @@ The following versions represent our planned annual major releases, each buildin #### Asset Management - **Joomla WAM**: Complete asset registry in `joomla.asset.json` -- **Development/Production Modes**: Minified and unminified assets +- **Cache-Based Minification**: Asset minification controlled by Joomla cache system + - Cache enabled: Minified assets (`.min` suffix) created and used + - Cache disabled: Non-minified assets used, minified files automatically removed - **Dependency Management**: Automatic script/style loading +- **Installation Script**: Automated cleanup of deprecated files during updates ### 🏗️ Template Overrides @@ -671,6 +711,23 @@ The following versions represent our planned annual major releases, each buildin **Description**: Separate TODO tracking file **Purpose**: Centralized issue and feature tracking outside changelog +#### Document Generation System +**Status**: Planned +**Description**: Automated documentation generation from template code and configuration +**Potential Features**: +- Template documentation generator from inline code comments +- Automatic parameter reference documentation +- Style guide generation from CSS/SCSS files +- Module position documentation with visual layout diagrams +- Template override documentation +- Configuration guide generation +- API documentation for template helper classes +**Use Cases**: +- Maintain up-to-date documentation automatically +- Generate user-friendly configuration guides +- Create developer reference documentation +- Export documentation in multiple formats (HTML, PDF, Markdown) + ### 🔮 Future Enhancements #### Development Mode (Commented Out) @@ -709,11 +766,15 @@ The following versions represent our planned annual major releases, each buildin ## Development Priorities ### Immediate Focus (v03.x - 2026) -1. **TODO Tracking System**: Implement separate file for issue tracking -2. **Soft Offline Mode**: Complete category-based offline access -3. **Security Updates**: Maintain Dependabot and CodeQL scans -4. **Documentation**: Keep docs synchronized with features -5. **Bug Fixes**: Address reported issues and edge cases +1. **Roadmap Documentation** (v03.07.00): Update roadmap with current development status (PR #66) +2. **Installation Automation** (v03.08.00): Complete installation script for automated cleanup (PR #65) +3. **Cache-Based Asset Minification** (v03.08.00): Finalize integration with Joomla cache system (PR #62) +4. **Document Generation System**: Implement automated documentation generation +5. **TODO Tracking System**: Implement separate file for issue tracking +6. **Soft Offline Mode**: Complete category-based offline access +7. **Security Updates**: Maintain Dependabot and CodeQL scans +8. **Documentation**: Keep docs synchronized with features +9. **Bug Fixes**: Address reported issues and edge cases ### v04.00.00 Priorities (2027) - Template Foundation 1. **WCAG 2.1 AA Compliance**: Full template accessibility audit and implementation @@ -835,15 +896,18 @@ Have ideas for future features? We welcome community input! * Repository: [https://github.com/mokoconsulting-tech/moko-cassiopeia](https://github.com/mokoconsulting-tech/moko-cassiopeia) * Path: /docs/ROADMAP.md * Owner: Moko Consulting -* Version: 03.05.00 +* Version: 03.06.00 * Status: Active -* Last Updated: 2026-01-27 +* Last Updated: 2026-01-28 * Classification: Public Open Source Documentation ## Revision History | Date | Change Summary | Author | | ---------- | ----------------------------------------------------- | --------------- | -| 2026-01-27 | Initial version-specific roadmap generated from codebase scan. | GitHub Copilot | -| 2026-01-27 | Added 5-year future roadmap with annual major version releases (v04-v08). | GitHub Copilot | +| 2026-01-28 | Clarified version numbers: PR #66 (v03.07.00), PR #65 (v03.08.00). | GitHub Copilot | +| 2026-01-28 | Added document generation system as planned feature. | GitHub Copilot | +| 2026-01-28 | Updated roadmap based on open PRs #62, #65, and #66. | GitHub Copilot | | 2026-01-27 | Refocused roadmap to concentrate on template-oriented features only. | GitHub Copilot | +| 2026-01-27 | Added 5-year future roadmap with annual major version releases (v04-v08). | GitHub Copilot | +| 2026-01-27 | Initial version-specific roadmap generated from codebase scan. | GitHub Copilot | diff --git a/docs/WORKFLOW_GUIDE.md b/docs/WORKFLOW_GUIDE.md index f538784..becdce2 100644 --- a/docs/WORKFLOW_GUIDE.md +++ b/docs/WORKFLOW_GUIDE.md @@ -134,7 +134,7 @@ codecept run **How to run:** 1. Go to Actions → Create version branch 2. Click "Run workflow" -3. Enter version (e.g., 03.05.00) +3. Enter version (e.g., 03.06.00) 4. Select branch prefix (dev/, rc/, or version/) 5. Click "Run workflow" @@ -283,7 +283,30 @@ unzip -l dist/moko-cassiopeia-*.zip ### Updating CHANGELOG -Update CHANGELOG.md manually or via pull request following the existing format. +The changelog is maintained based on pull requests. Every PR should include a changelog entry. + +**Process:** +1. When creating a PR, fill out the "Changelog Entry" section in the PR template +2. Follow the Keep a Changelog format (Added, Changed, Fixed, etc.) +3. Maintainers will copy the entry to CHANGELOG.md upon merge +4. See [CHANGELOG_PROCESS.md](./CHANGELOG_PROCESS.md) for detailed guidelines + +**Example changelog entry in PR:** +```markdown +### Added +- Installation script for automated media folder cleanup (#65) + +### Changed +- Asset minification linked to Joomla cache system (#62) +``` + +**Quick reference:** +- **Added** - New features or files +- **Changed** - Modifications to existing functionality +- **Deprecated** - Features marked for future removal +- **Removed** - Deleted features or files +- **Fixed** - Bug fixes +- **Security** - Security-related changes ## Troubleshooting @@ -322,7 +345,7 @@ make validate-required git branch -r | grep dev/ # Delete remote branch if needed (carefully!) -git push origin --delete dev/03.05.00 +git push origin --delete dev/03.06.00 ``` #### "Missing required secrets" @@ -381,7 +404,7 @@ phpcs --standard=phpcs.xml --report=source src/ 1. **Always use version branches:** dev/X.Y.Z, rc/X.Y.Z, version/X.Y.Z 2. **Follow hierarchy:** dev → rc → version → main 3. **Update CHANGELOG:** Document all changes in Unreleased section -4. **Semantic versioning:** Major.Minor.Patch (03.05.00) +4. **Semantic versioning:** Major.Minor.Patch (03.06.00) ### Code Quality diff --git a/src/language/en-GB/tpl_moko-cassiopeia.ini b/src/language/en-GB/tpl_moko-cassiopeia.ini index 03d6e7e..d896db4 100644 --- a/src/language/en-GB/tpl_moko-cassiopeia.ini +++ b/src/language/en-GB/tpl_moko-cassiopeia.ini @@ -1,4 +1,4 @@ -; ; Copyright (C) 2025 Moko Consulting +; Copyright (C) 2025 Moko Consulting ; ; This file is part of a Moko Consulting project. ; diff --git a/src/media/css/colors/dark/colors_alternative.css b/src/media/css/colors/dark/colors_alternative.css index a2243c7..988b0a9 100644 --- a/src/media/css/colors/dark/colors_alternative.css +++ b/src/media/css/colors/dark/colors_alternative.css @@ -185,7 +185,7 @@ --dark-border-subtle: #2b323b; /* Typography & layout */ - --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; diff --git a/src/media/css/colors/dark/colors_standard.css b/src/media/css/colors/dark/colors_standard.css index d197b55..9876df2 100644 --- a/src/media/css/colors/dark/colors_standard.css +++ b/src/media/css/colors/dark/colors_standard.css @@ -186,7 +186,7 @@ --dark-border-subtle: #2b323b; /* Typography & layout */ - --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); + --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; diff --git a/src/media/css/colors/light/colors_alternative.css b/src/media/css/colors/light/colors_alternative.css index 8eb6350..49b5675 100644 --- a/src/media/css/colors/light/colors_alternative.css +++ b/src/media/css/colors/light/colors_alternative.css @@ -172,7 +172,7 @@ --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; diff --git a/src/media/css/colors/light/colors_standard.css b/src/media/css/colors/light/colors_standard.css index 0b6691a..c9daa6c 100644 --- a/src/media/css/colors/light/colors_standard.css +++ b/src/media/css/colors/light/colors_standard.css @@ -172,7 +172,7 @@ --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --gradient: linear-gradient(180deg, #ffffff26, #fff0); - --body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); --body-font-size: 1rem; --body-font-weight: 400; --body-line-height: 1.5; diff --git a/src/media/css/gable.css b/src/media/css/gable.css deleted file mode 100644 index 9939d25..0000000 --- a/src/media/css/gable.css +++ /dev/null @@ -1,556 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: Moko-Cassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/gable.css - VERSION: 03.05.00 - BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia - */ - -:root { - --gab-blue: transparent; - --gab-green: #7ac143; - --gab-red: #3f8ff0; - --gab-orange: #F9A541; - --gab-gray1: #DDDDDD; - --gab-gray2: #AAAAAA; - --gab-gray3: #777777; -} - -code { - background-color: var(--gab-gray1); -} - -#view_gabble { - background-color: var(--gab-blue); - padding: 6px; - border-radius: 6px; -} - -#mod_gabble { - background-color: var(--gab-blue); - padding: 3px; - border-radius: 6px; -} - -#lists_gabble { - position: relative; - height: 100%; - border: 4px solid var(--gab-red); - background-color: var(--gab-green); - padding: 4px; - border-radius: 6px; -} - -#select_list { - margin-left: 0px; - width: 100%; - padding: 4px; - border-radius: 6px 6px 0px 0px; -} - -#options_list { - width: 100%; - padding: 4px; -} - -#frame_list { - width: 100%; - height: 484px; - padding: 4px; - border-radius: 0px 0px 6px 6px; -} - -#windows_list { - margin-left: 0px; - width: 100%; - border: 4px solid var(--gab-red); - background-color: var(--gab-green); - padding: 4px; - border-radius: 6px; -} - -#frame_window { - width: 100%; -} - -#openai_btn { - position: absolute; - right: 10px; - bottom: 10px; - visibility: hidden; - width: 34px; - height: 34px; - cursor: pointer; - border: 3px solid var(--gab-gray3); - background-color: #FFF; - border-radius: 17px; -} - -#openai_btn:hover { - width: 36px; - height: 36px; - border: 3px solid var(--gab-gray3); - border-radius: 18px; -} - -#openai_logo_anim { - position: absolute; - top: 15px; - right: 15px; - width: 35px; - height: 35px; - padding: 2px; - z-index: 1; - border-radius: 10px; -} - -.openai_logo_sm { - width: 22px; - height: 22px; - background-color: #FFF; - border: 3px solid #FFF; - border-radius: 11px; -} - -.openai_logo_md { - width: 34px; - height: 34px; - background-color: #FFF; - border: 4px solid #FFF; - border-radius: 17px; -} - -.btn_on_com { - position: absolute; - bottom: -2px; - left: -2px; - width: 12px; - height: 12px; - background-color: #448344; - border-radius: 6px; -} - -.btn_on_mod { - position: absolute; - top: 0px; - left: 0px; - width: 12px; - height: 12px; - background-color: #448344; - border-radius: 6px; -} - -.button_list { - border: none; - width:100%; - outline: none; - background-color: var(--gab-gray1); - padding: 6px; - border-radius: 6px; -} - -.button_list:hover { - background-color: var(--gab-gray2); -} - -.button_list_s { - border: none; - width: 100%; - outline: none; - cursor: pointer; - color: #FFF; - background-color: var(--gab-red); - padding: 6px; - border-radius: 6px; -} - -.window_list { - position: relative; - margin: 4px; - width: 100%; - border: none; - outline: none; - cursor: pointer; - text-align: left; - background-color: var(--gab-gray1); - padding: 6px; - border-radius: 6px; -} - -.window_list:hover { - background-color: var(--gab-gray2); -} - -.window_list_s { - position: relative; - margin: 4px; - width: 100%; - border: none; - outline: none; - cursor: pointer; - text-align: left; - color: #FFF; - background-color: var(--gab-red); - padding: 6px; - border-radius: 6px; -} - -.btn_close { - position: absolute; - right: 4px; - top: 10px; - padding-left: 1px; - width: 16px; - height: 16px; - color: #000; - font-size: 10px; - text-align: center; - background-color: var(--gab-gray2); - border-radius: 8px; -} - -.btn_close:hover { - background-color: var(--gab-gray3); -} - -.iframe_list { - width: 100%; - height: 100%; - background-color: #FFF; - border: 4px solid var(--gab-red); - border-radius: 6px; -} - -.iframe_messages { - width: 100%; - height: 100%; - background-color: #FFF; - border: 4px solid var(--gab-red); - border-radius: 6px; -} - -.input_box { - position: relative; -} - -.input_emoji { - position: absolute; - right: 48px; - top: 11px; - cursor: pointer; - color: var(--gab-gray2); -} - -.input_emoji:hover { - color: var(--gab-gray3); -} - -.emoji { - display: inline-block; - float: left; - cursor: pointer; - padding: 2px; - background-color: #FFF; -} - -.emoji:hover { - background-color: var(--gab-orange); -} - -.emojis_div { - position: absolute; - top: -92px; - right: 0px; - width: 200px; - height: 92px; - border: 4px solid var(--gab-red); - background-color: var(--gab-gray1); - border-radius: 6px; -} - -.msg-button-on { - margin-left: 5px; - width: 30px; - height: 30px; - font-size: 20px; - text-align: center; - color: #FFF; - background-color: var(--gab-orange); - border-radius: 15px; -} - -.msg-button-off { - margin-left: 5px; - width: 30px; - height: 30px; - font-size: 20px; - text-align: center; - color: #FFF; - background-color: var(--gab-gray2); - border-radius: 15px; -} - -.taba-content { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.msg-input { - padding-left: 10px; - padding-right: 26px; - width: calc(100% - 35px); - height: 30px; - border-radius: 15px; -} - -.main-windows { - position: fixed; - margin-bottom: 10px; - bottom: 0px; - right: 90px; - z-index: 901; -} - -.list-windows { - position: fixed; - bottom: 0px; - right: 0px; - width: 50px; - margin-bottom: 20px; - margin-right: 20px; - z-index: 901; -} - -.item-list { - display: inline-block; - color: #F5F5F5; - margin-top: 5px; - width: 50px; - height: 50px; - font-size: 30px; - text-align: center; - border: 3px solid var(--gab-red); - background-color: var(--gab-blue); - border-radius: 25px; -} - -.button { - opacity: 1; -} - -.button:hover { - cursor: pointer; - opacity: .6; -} - -.notifications { - position: relative; -} - -.n-notifications { - position: absolute; - bottom: -6px; - right: -2px; - width: 18px; - height: 18px; - color: #FFF; - font-size: 11px; - font-weight: bold; - text-align: center; - background-color: #a51f18; - border-radius: 9px; -} - -.m-notifications { - position: absolute; - top: -6px; - right: -2px; - width: 18px; - height: 18px; - color: #FFF; - font-size: 11px; - font-weight: bold; - text-align: center; - background-color: #a51f18; - border-radius: 9px; -} - -.window { - display: inline-block; - margin-left: 8px; - width: 280px; - height: 420px; -} - -.window-com { - margin-top: 6px; - width: 100%; - height: 480px; -} - -.window-title { - margin-left: 5px; - display: inline-block; - color: #FFF; -} - -.window-title-com { - margin-left: 5px; - display: inline-block; - color: #000; -} - -.window-icon { - display: inline-block; - color: #FFF; -} - -.window-header { - padding: 6px; - width: 100%; - height: 40px; - background-color: var(--gab-blue); - border-radius: 8px 8px 0px 0px; -} - -.window-header-com { - padding: 4px; - width: 100%; - height: 35px; - background-color: var(--gab-red); - border-radius: 8px 8px 0px 0px; -} - -.window-content { - position: relative; - display: block; - width: 100%; - height: calc(100% - 80px); - background-color: #DDD; -} - -.content-footer { - position: relative; - padding: 5px; - width: 100%; - height: 40px; - background-color: #DDD; - border-radius: 0px 0px 8px 8px; -} - -.taba-btn { - text-align: center; - display: inline-block; - margin-left: 5px; - float: right; - width: 24px; - height: 24px; - background-color: #DDD; - border-radius: 12px; -} - -.taba-hover { - cursor: pointer; - opacity: 1; -} - -.taba-hover:hover { - opacity: 0.6; -} - -.taba-self { - border: 1px solid #FFF; - background-color: #7ac143; - padding: 6px; - padding-top: 9px; - border-radius: 10px; -} - -.taba-others { - border: 1px solid #FFF; - background-color: #5091cd; - padding: 6px; - padding-top: 9px; - border-radius: 10px; -} - - - -.taba-bot { - border: 1px solid #FFF; - background-color: var(--gab-gray3); - padding: 6px; - padding-top: 9px; - border-radius: 10px; -} - -.taba-dice { - border: 1px solid #FFF; - background-color: #f44321; - padding: 6px; - border-radius: 10px; -} - -.taba-emoji { - border: 1px solid #FFF; - background-color: #5091cd; - padding: 6px; - border-radius: 10px; -} - -.taba-user { - border: 1px solid #FFF; - background-color: #FFF; - padding: 6px; - border-radius: 6px; - word-wrap: break-word; -} - -.taba-user-on { - border: 1px solid #FFF; - background-color: var(--gab-green); - padding: 6px; - border-radius: 8px; -} - -.taba-feed { - border: 1px solid #FFF; - background-color: var(--gab-blue); - padding: 6px; - border-radius: 8px; -} - -.openai_error { - border: 1px solid #FFF; - background-color: var(--gab-red); - padding: 6px; - border-radius: 8px; -} - -.taba-msgsystem { - border: 1px solid #FFF; - background-color: #AAA; - padding: 6px; - border-radius: 10px; -} - -.taba-msghead { - background-color: #f5f5f5; - padding: 4px; - padding-left: 10px; - padding-right: 6px; - border-radius: 6px 6px 0px 0px; -} - -.taba-msg { - background-color: #f5f5f5; - padding: 8px; - border-radius: 0px 8px 8px 8px; - word-wrap: break-word; -} diff --git a/src/media/css/global/social-media-demo.css b/src/media/css/global/social-media-demo.css deleted file mode 100644 index 40a3357..0000000 --- a/src/media/css/global/social-media-demo.css +++ /dev/null @@ -1,222 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: Moko-Cassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/global/social-media-demo.css - VERSION: 03.05.00 - BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template - */ - -/* -====================================================================== -Social Media Demo — FULL CSS (Joomla-safe, fully scoped) -Scope: All selectors prefixed with .social-media-demo to avoid leakage -Usage: Wrap your article markup in -Version: 2.0 (2025-08-23) - -How it’s organized: - 1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below. - 2) Base/layout styles (sections, header shell, placeholders, buttons). - 3) Platform brand colors (hard-coded) and cover height tweaks. - 4) Image assignments (map classes like .fb-cover → variable --fb-cover-img). - -INSTRUCTIONS: - - Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names. - - For circle images, sue a square image t fille the entire space - - All images are center and miiddle aligned when loaded. -====================================================================== -REQUIRED IMAGE SIZES — Social Media Demo Wireframes - - Facebook - --fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe) - --fb-avatar-img → Profile: 176×176 (shown as circle, but use square image) - - Twitter / X - --x-cover-img → Header: 1500×500 - --x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image) - - LinkedIn Company - --li-cover-img → Banner: ~1128×191 - --li-logo-img → Logo: up to 300×300 (rounded square) - - Google Business Profile - --gmb-cover-img → Banner: ~960×200 (mobile ~960×140) - --gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image) - - Instagram Business - --ig-cover-img → Not always visible, safe 1080×608 for highlight background - --ig-avatar-img → Profile: 320×320 (shown as circle, but use square image) - - YouTube Channel - --yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center) - --yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image) - - TikTok Business - --tt-cover-img → Profile header: ~900×500 (safe area ~720×405) - --tt-avatar-img → Profile: 200×200 (shown as circle, but use square image) - - Pinterest Business - --pin-cover-img → Board/brand banner: ~800×450 - --pin-avatar-img → Profile: 165×165 (shown as circle, but use square image) - - Snapchat Public Profile - --sc-cover-img → Banner: ~1080×1920 (stories/poster) - --sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image) - - Reddit Community - --rd-cover-img → Banner: 1920×384 - --rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image) - ====================================================================== */ - -/* Container variables — IMAGES ONLY (safe-scoped) */ -.social-media-demo { - --fb-cover-img: url('../../../../../image/social/fb-cover.jpg'); - --fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg'); - - --x-cover-img: url('../../../../../image/social/x-cover.jpg'); - --x-avatar-img: url('../../../../../image/social/x-avatar.jpg'); - - --li-cover-img: url('../../../../../image/social/li-cover.jpg'); - --li-logo-img: url('../../../../../image/social/li-logo.jpg'); - - --gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg'); - --gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg'); - - --ig-cover-img: url('../../../../../image/social/ig-cover.jpg'); - --ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg'); - - --yt-cover-img: url('../../../../../image/social/yt-cover.jpg'); - --yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg'); - - --tt-cover-img: url('../../../../../image/social/tt-cover.jpg'); - --tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg'); - - --pin-cover-img: url('../../../../../image/social/pin-cover.jpg'); - --pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg'); - - --sc-cover-img: url('../../../../../image/social/sc-cover.jpg'); - --sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg'); - - --rd-cover-img: url('../../../../../image/social/rd-cover.jpg'); - --rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg'); -} - -/* DO NOT TOUCH */ -.social-media-demo * { box-sizing: border-box; } -.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; } -.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; } -.social-media-demo .preview { padding: 16px; } - -/* Header shell */ -.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; } -.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; } -.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; } -.social-media-demo .avatar, -.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; } -.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; } -.social-media-demo .logo.rounded { border-radius: 16px; } - -/* Meta */ -.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; } -.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; } -.social-media-demo .subline { font-size: 13px; color: #666; } - -/* Buttons */ -.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; } -.social-media-demo .btn.primary { color: #fff; border-color: transparent; } - -/* Placeholder visuals (used until you swap in real images) */ -.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; } -.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; } - -/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */ -/* Facebook */ -.social-media-demo #fb .btn.primary { background: #1877F2; } -.social-media-demo #fb .cover { height: 312px; } -@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } } - -/* Twitter / X */ -.social-media-demo #x .btn.primary { background: #1D9BF0; } -.social-media-demo #x .cover { height: 200px; background-color: #22303C; } -@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } } - -/* LinkedIn */ -.social-media-demo #li .btn.primary { background: #0A66C2; } -.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; } -@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } } - -/* Google Business Profile */ -.social-media-demo #gmb .btn.primary { background: #4285F4; } -.social-media-demo #gmb .cover { height: 200px; } -@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } } - -/* Instagram Business */ -.social-media-demo #ig .btn.primary { background: #E1306C; } -.social-media-demo #ig .cover { height: 200px; } - -/* YouTube Channel */ -.social-media-demo #yt .btn.primary { background: #FF0000; } -.social-media-demo #yt .cover { height: 180px; } - -/* TikTok Business */ -.social-media-demo #tt .btn.primary { background: #000000; color: #fff; } -.social-media-demo #tt .cover { height: 200px; } - -/* Pinterest Business */ -.social-media-demo #pin .btn.primary { background: #E60023; } -.social-media-demo #pin .cover { height: 200px; } - -/* Snapchat Public Profile */ -.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; } -.social-media-demo #sc .cover { height: 160px; } - -/* Reddit Community */ -.social-media-demo #rd .btn.primary { background: #FF4500; } -.social-media-demo #rd .cover { height: 180px; } - -/* 4) Image assignments — map classes to variables (swap vars to change images) */ -/* Facebook */ -.social-media-demo .fb-cover { background-image: var(--fb-cover-img); } -.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); } - -/* X */ -.social-media-demo .x-cover { background-image: var(--x-cover-img); } -.social-media-demo .x-avatar { background-image: var(--x-avatar-img); } - -/* LinkedIn */ -.social-media-demo .li-cover { background-image: var(--li-cover-img); } -.social-media-demo .li-logo { background-image: var(--li-logo-img); } - -/* Google Business */ -.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); } -.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); } - -/* Instagram */ -.social-media-demo .ig-cover { background-image: var(--ig-cover-img); } -.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); } - -/* YouTube */ -.social-media-demo .yt-cover { background-image: var(--yt-cover-img); } -.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); } - -/* TikTok */ -.social-media-demo .tt-cover { background-image: var(--tt-cover-img); } -.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); } - -/* Pinterest */ -.social-media-demo .pin-cover { background-image: var(--pin-cover-img); } -.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); } - -/* Snapchat */ -.social-media-demo .sc-cover { background-image: var(--sc-cover-img); } -.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); } - -/* Reddit */ -.social-media-demo .rd-cover { background-image: var(--rd-cover-img); } -.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); } diff --git a/src/media/css/template.css b/src/media/css/template.css index a43a73a..e025344 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -38,9 +38,8 @@ .container-bottom-b, #lhc_container_v2 *, footer, - .fb-comments, - { - display: none !important; + .fb-comments { + display: none ; } } @@ -52,7 +51,7 @@ body { line-height: var(--body-line-height); color: var(--body-color); text-align: var(--body-text-align); - background-color: var(--body-bg); + background: var(--body-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -71,7 +70,7 @@ form { font-size: 2em; font-weight: bold; background-color: var(--gray-500); - padding: var(--btn-padding-y); + padding: var(--btn-padding-y) var(--btn-padding-x); color: var(--color-link); text-align: center; } @@ -95,28 +94,29 @@ form { width: 280px; } -.drawer-toggle-left { - position: fixed; - top: 250px; - left: 0px; - z-index: 1050; - background-color: var(--nav-bg-color) !important; - color: var(--nav-text-color) !important; - padding-left: calc(var(--btn-padding-x)*0.5) !important; - padding-right: calc(var(--btn-padding-x)*0.5) !important; +.drawer-toggle-left{ + position: fixed !important; + top: 250px !important; + left: 0px !important; + z-index: 1050 !important; + background-color: var(--nav-bg-color) !important; + color: var(--nav-text-color) !important; + padding-left: .5rem !important; + padding-right: .5rem !important; } -.drawer-toggle-right { - position: fixed; - top: 250px; - right: 0px; - z-index: 1050; - background-color: var(--nav-bg-color) !important; - color: var(--nav-text-color) !important; - padding-left: calc(var(--btn-padding-x)*0.5) !important; - padding-right: calc(var(--btn-padding-x)*0.5) !important; +.drawer-toggle-right{ + position: fixed !important; + top: 250px !important; + right: 0px !important; + z-index: 1050 !important; + background-color: var(--nav-bg-color) !important; + color: var(--nav-text-color) !important; + padding-left: .5rem !important; + padding-right: .5rem !important; } + .offcanvas-body { background-color: var(--offcanvas-color); } @@ -430,7 +430,7 @@ select:disabled { } [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator { - display: none !important; + display: none ; } button, @@ -545,7 +545,7 @@ progress { } [hidden] { - display: none !important; + display: none ; } .lead { @@ -675,7 +675,7 @@ progress { .img-thumbnail { padding: 0.25rem; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); border: 1px solid var(--border-color); border-radius: 0.25rem; max-width: 100%; @@ -785,26 +785,13 @@ progress { margin-left: calc(-0.5 * var(--gutter-x)); } -.row>* { +.row > * { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 100%; - padding-right: 0.25em; - padding-left: 0.25em; - margin-top: var(--gutter-y); -} - -.product-container { - margin-right: calc(var(--gutter-x) * .25); - margin-left: calc(var(--gutter-x) * .25); - padding-right: calc(var(--gutter-x) * .25); - padding-left: calc(var(--gutter-x) * .25); - margin-top: var(--gutter-y); - //background-color: var(--gray-200); - -webkit-border-radius: var(--border-radius); - -moz-border-radius: var(--border-radius); - border-radius: var(--border-radius); + padding-right: calc(0.25 * var(--gutter-x)); + padding-left: calc(0.25 * var(--gutter-x)); } .latest-view { @@ -2522,15 +2509,15 @@ progress { } .table-dark { - --table-color: hsl(0, 0%, 100%); + --table-color: var(--body-color); --table-bg: hsl(210, 10%, 23%); --table-border-color: #494f54; --table-striped-bg: #3f454b; - --table-striped-color: hsl(0, 0%, 100%); + --table-striped-color: var(--body-color); --table-active-bg: #494f54; - --table-active-color: hsl(0, 0%, 100%); + --table-active-color: var(--body-color); --table-active-bg: #444a4f; - --table-active-color: hsl(0, 0%, 100%); + --table-active-color: var(--body-color); color: var(--table-color); border-color: var(--table-border-color); } @@ -2613,7 +2600,7 @@ progress { font-weight: 400; line-height: 1; color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); background-clip: padding-box; border: 1px solid hsl(210, 14%, 83%); -webkit-appearance: none; @@ -2645,7 +2632,7 @@ progress { .form-control:focus { color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); border-color: #8894aa; outline: 0; -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); @@ -2833,7 +2820,7 @@ textarea.form-control-lg { } .form-control-color::-moz-color-swatch { - border: 0 !important; + border: 0 ; border-radius: 0.25rem; } @@ -2958,7 +2945,7 @@ textarea.form-control-lg { height: 1em; margin-top: 0.25em; vertical-align: top; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); background-repeat: no-repeat; background-position: center; background-size: contain; @@ -3098,12 +3085,12 @@ textarea.form-control-lg { } .form-range:focus::-webkit-slider-thumb { - -webkit-box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + -webkit-box-shadow: 0 0 0 1px var(--body-color), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + box-shadow: 0 0 0 1px var(--body-color), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); } .form-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px hsl(0, 0%, 100%), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + box-shadow: 0 0 0 1px var(--body-color), 0 0 0 0.25rem rgba(1, 1, 86, 0.25); } .form-range::-moz-focus-outer { @@ -3461,7 +3448,7 @@ textarea.form-control-lg { padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: rgba(68, 131, 68, 0.9); border-radius: 0.25rem; } @@ -3584,7 +3571,7 @@ textarea.form-control.is-valid { padding: 0.25rem 0.5rem; margin-top: 0.1rem; font-size: 0.875rem; - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: rgba(165, 31, 24, 0.9); border-radius: 0.25rem; } @@ -3885,7 +3872,7 @@ fieldset:disabled .btn { --dropdown-spacer: 0.125rem; --dropdown-font-size: 1rem; --dropdown-color: hsl(210, 11%, 15%); - --dropdown-bg: hsl(0, 0%, 100%); + --dropdown-bg: var(--body-color); --dropdown-border-color: var(--border-color-translucent); --dropdown-border-radius: 0.25rem; --dropdown-border-width: 1px; @@ -3896,7 +3883,7 @@ fieldset:disabled .btn { --dropdown-link-color: hsl(210, 11%, 15%); --dropdown-link-active-color: #1f2226; --dropdown-link-active-bg: hsl(210, 16%, 93%); - --dropdown-link-active-color: hsl(0, 0%, 100%); + --dropdown-link-active-color: var(--body-color); --dropdown-link-active-bg: hsl(240, 98%, 17%); --dropdown-link-disabled-color: hsl(210, 11%, 71%); --dropdown-item-padding-x: 1rem; @@ -4197,10 +4184,10 @@ fieldset:disabled .btn { --dropdown-border-color: var(--border-color-translucent); --dropdown-box-shadow: ; --dropdown-link-color: hsl(210, 14%, 89%); - --dropdown-link-active-color: hsl(0, 0%, 100%); + --dropdown-link-active-color: var(--body-color); --dropdown-divider-bg: var(--border-color-translucent); --dropdown-link-active-bg: rgba(255, 255, 255, 0.15); - --dropdown-link-active-color: hsl(0, 0%, 100%); + --dropdown-link-active-color: var(--body-color); --dropdown-link-active-bg: hsl(240, 98%, 17%); --dropdown-link-disabled-color: hsl(210, 11%, 71%); --dropdown-header-color: hsl(210, 11%, 71%); @@ -4392,8 +4379,8 @@ fieldset:disabled .btn { --nav-tabs-border-radius: 0.25rem; --nav-tabs-link-active-border-color: hsl(210, 16%, 93%) hsl(210, 16%, 93%) hsl(210, 14%, 89%); --nav-tabs-link-active-color: hsl(210, 9%, 31%); - --nav-tabs-link-active-bg: hsl(0, 0%, 100%); - --nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) hsl(0, 0%, 100%); + --nav-tabs-link-active-bg: var(--body-color); + --nav-tabs-link-active-border-color: hsl(210, 14%, 89%) hsl(210, 14%, 89%) var(--body-color); border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color); } @@ -4433,7 +4420,7 @@ fieldset:disabled .btn { .nav-pills { --nav-pills-border-radius: 0.25rem; - --nav-pills-link-active-color: hsl(0, 0%, 100%); + --nav-pills-link-active-color: var(--body-color); --nav-pills-link-active-bg: hsl(240, 98%, 17%); } @@ -4487,26 +4474,6 @@ fieldset:disabled .btn { } .navbar { - --navbar-padding-x: 0; - --navbar-padding-y: 0.5rem; - --navbar-color: rgba(0, 0, 0, 0.55); - --navbar-active-color: rgba(0, 0, 0, 0.7); - --navbar-disabled-color: rgba(0, 0, 0, 0.3); - --navbar-active-color: rgba(0, 0, 0, 0.9); - --navbar-brand-padding-y: 0.3125rem; - --navbar-brand-margin-end: 0; - --navbar-brand-font-size: 1.25rem; - --navbar-brand-color: rgba(0, 0, 0, 0.9); - --navbar-brand-active-color: rgba(0, 0, 0, 0.9); - --navbar-nav-link-padding-x: 0.5rem; - --navbar-toggler-padding-y: 0.25rem; - --navbar-toggler-padding-x: 0.75rem; - --navbar-toggler-font-size: 1.25rem; - --navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); - --navbar-toggler-border-color: rgba(0, 0, 0, 0.1); - --navbar-toggler-border-radius: 0.25rem; - --navbar-toggler-focus-width: 0.25rem; - --navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; display: -webkit-box; display: -ms-flexbox; @@ -4558,12 +4525,6 @@ fieldset:disabled .btn { } .navbar-nav { - --nav-link-padding-x: 0; - --nav-link-padding-y: 0.5rem; - --nav-link-font-weight: ; - --nav-link-color: var(--navbar-color); - --nav-link-active-color: var(--navbar-active-color); - --nav-link-disabled-color: var(--navbar-disabled-color); display: -webkit-box; display: -ms-flexbox; display: flex; @@ -4614,8 +4575,7 @@ fieldset:disabled .btn { line-height: 1; color: var(--navbar-color); background-color: transparent; - border: var(--border-width) solid var(--navbar-toggler-border-color); - border-radius: var(--navbar-toggler-border-radius); + border: 0; -webkit-transition: var(--navbar-toggler-transition); -o-transition: var(--navbar-toggler-transition); transition: var(--navbar-toggler-transition); @@ -4636,8 +4596,7 @@ fieldset:disabled .btn { .navbar-toggler:focus { text-decoration: none; outline: 0; - -webkit-box-shadow: 0 0 0 var(--navbar-toggler-focus-width); - box-shadow: 0 0 0 var(--navbar-toggler-focus-width); + color: var(--color-primary); } .navbar-toggler-icon { @@ -4645,7 +4604,6 @@ fieldset:disabled .btn { width: 1.5em; height: 1.5em; vertical-align: middle; - background-image: var(--navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 100%; @@ -4686,9 +4644,9 @@ fieldset:disabled .btn { } .navbar-expand-sm .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -4703,13 +4661,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -4761,9 +4719,9 @@ fieldset:disabled .btn { } .navbar-expand-md .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -4778,13 +4736,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -4836,9 +4794,9 @@ fieldset:disabled .btn { } .navbar-expand-lg .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -4853,13 +4811,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -4911,9 +4869,9 @@ fieldset:disabled .btn { } .navbar-expand-xl .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -4928,13 +4886,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -4986,9 +4944,9 @@ fieldset:disabled .btn { } .navbar-expand-xxl .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -5003,13 +4961,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -5060,9 +5018,9 @@ fieldset:disabled .btn { } .navbar-expand .navbar-collapse { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; -ms-flex-preferred-size: auto; flex-basis: auto; } @@ -5077,13 +5035,13 @@ fieldset:disabled .btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - width: auto !important; - height: auto !important; - visibility: visible !important; - background-color: transparent !important; - border: 0 !important; - -webkit-transform: none !important; - transform: none !important; + width: auto ; + height: auto ; + visibility: visible ; + background-color: transparent ; + border: 0 ; + -webkit-transform: none ; + transform: none ; -webkit-transition: none; -o-transition: none; transition: none; @@ -5104,35 +5062,7 @@ fieldset:disabled .btn { overflow-y: visible; } -.navbar-dark { - --navbar-color: rgba(255, 255, 255, 0.55); - --navbar-active-color: rgba(255, 255, 255, 0.75); - --navbar-disabled-color: rgba(255, 255, 255, 0.25); - --navbar-active-color: hsl(0, 0%, 100%); - --navbar-brand-color: hsl(0, 0%, 100%); - --navbar-brand-active-color: hsl(0, 0%, 100%); - --navbar-toggler-border-color: rgba(255, 255, 255, 0.1); - --navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); -} - .card { - --card-spacer-y: 1rem; - --card-spacer-x: 1rem; - --card-title-spacer-y: 0.5rem; - --card-border-width: 1px; - --card-border-color: var(--color-secondary); - --card-border-radius: 0.25rem; - --card-box-shadow: ; - --card-inner-border-radius: calc(0.25rem - 1px); - --card-cap-padding-y: 0.5rem; - --card-cap-padding-x: 1rem; - --card-cap-bg: rgba(0, 0, 0, 0.03); - --card-cap-color: var(--color-primary); - --card-height: ; - --card-color: ; - --card-bg: var(--nav-text-color); - --card-img-overlay-padding: 1rem; - --card-group-margin: 0.5em; position: relative; display: -webkit-box; display: -ms-flexbox; @@ -5330,7 +5260,7 @@ fieldset:disabled .btn { .accordion { --accordion-color: hsl(210, 11%, 15%); - --accordion-bg: hsl(0, 0%, 100%); + --accordion-bg: var(--body-color); --accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; --accordion-border-color: var(--border-color); --accordion-border-width: 1px; @@ -5505,7 +5435,7 @@ fieldset:disabled .btn { --breadcrumb-border-radius: ; --breadcrumb-divider-color: hsl(210, 7%, 46%); --breadcrumb-item-padding-x: 0.5rem; - --breadcrumb-item-active-color: val(var(--link-color)); + --breadcrumb-item-active-color: var(--link-color); display: -webkit-box; display: -ms-flexbox; display: flex; @@ -5541,7 +5471,7 @@ fieldset:disabled .btn { --pagination-padding-y: 0.375rem; --pagination-font-size: 1rem; --pagination-color: var(--link-color); - --pagination-bg: hsl(0, 0%, 100%); + --pagination-bg: var(--body-color); --pagination-border-width: 1px; --pagination-border-color: hsl(210, 14%, 89%); --pagination-border-radius: 0.25rem; @@ -5551,11 +5481,11 @@ fieldset:disabled .btn { --pagination-focus-color: var(--link-active-color); --pagination-focus-bg: hsl(210, 16%, 93%); --pagination-focus-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - --pagination-active-color: hsl(0, 0%, 100%); + --pagination-active-color: var(--body-color); --pagination-active-bg: hsl(240, 98%, 17%); --pagination-active-border-color: hsl(240, 98%, 17%); --pagination-disabled-color: hsl(210, 7%, 46%); - --pagination-disabled-bg: hsl(0, 0%, 100%); + --pagination-disabled-bg: var(--body-color); --pagination-disabled-border-color: hsl(210, 14%, 89%); display: -webkit-box; display: -ms-flexbox; @@ -5653,7 +5583,7 @@ fieldset:disabled .btn { --badge-padding-y: 0.35em; --badge-font-size: 0.75em; --badge-font-weight: 700; - --badge-color: hsl(0, 0%, 100%); + --badge-color: var(--body-color); --badge-border-radius: 0.25rem; display: inline-block; padding: var(--badge-padding-y) var(--badge-padding-x); @@ -5812,7 +5742,7 @@ fieldset:disabled .btn { --progress-bg: hsl(210, 16%, 93%); --progress-border-radius: 0.25rem; --progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); - --progress-bar-color: hsl(0, 0%, 100%); + --progress-bar-color: var(--body-color); --progress-bar-bg: hsl(240, 98%, 17%); --progress-bar-transition: width 0.6s ease; display: -webkit-box; @@ -5874,7 +5804,7 @@ fieldset:disabled .btn { .list-group { --list-group-color: hsl(210, 11%, 15%); - --list-group-bg: hsl(0, 0%, 100%); + --list-group-bg: var(--body-color); --list-group-border-color: rgba(0, 0, 0, 0.125); --list-group-border-width: 1px; --list-group-border-radius: 0.25rem; @@ -5886,8 +5816,8 @@ fieldset:disabled .btn { --list-group-action-active-color: hsl(210, 11%, 15%); --list-group-action-active-bg: hsl(210, 16%, 93%); --list-group-disabled-color: hsl(210, 7%, 46%); - --list-group-disabled-bg: hsl(0, 0%, 100%); - --list-group-active-color: hsl(0, 0%, 100%); + --list-group-disabled-bg: var(--body-color); + --list-group-active-color: var(--body-color); --list-group-active-bg: hsl(240, 98%, 17%); --list-group-active-border-color: hsl(240, 98%, 17%); display: -webkit-box; @@ -6194,7 +6124,7 @@ fieldset:disabled .btn { } .list-group-item-primary.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #010134; border-color: #010134; } @@ -6211,7 +6141,7 @@ fieldset:disabled .btn { } .list-group-item-secondary.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #41464c; border-color: #41464c; } @@ -6228,7 +6158,7 @@ fieldset:disabled .btn { } .list-group-item-success.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #294f29; border-color: #294f29; } @@ -6245,7 +6175,7 @@ fieldset:disabled .btn { } .list-group-item-info.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #1d3b55; border-color: #1d3b55; } @@ -6262,7 +6192,7 @@ fieldset:disabled .btn { } .list-group-item-warning.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #683b00; border-color: #683b00; } @@ -6279,7 +6209,7 @@ fieldset:disabled .btn { } .list-group-item-danger.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #63130e; border-color: #63130e; } @@ -6296,7 +6226,7 @@ fieldset:disabled .btn { } .list-group-item-light.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #646464; border-color: #646464; } @@ -6313,7 +6243,7 @@ fieldset:disabled .btn { } .list-group-item-dark.list-group-item-action.active { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: #202327; border-color: #202327; } @@ -6443,7 +6373,7 @@ fieldset:disabled .btn { --modal-padding: 1rem; --modal-margin: 0.5rem; --modal-color: ; - --modal-bg: hsl(0, 0%, 100%); + --modal-bg: var(--body-color); --modal-border-color: var(--border-color-translucent); --modal-border-width: 1px; --modal-border-radius: 0.3rem; @@ -6810,7 +6740,7 @@ fieldset:disabled .btn { --tooltip-padding-y: 0.25rem; --tooltip-margin: ; --tooltip-font-size: 0.875rem; - --tooltip-color: hsl(0, 0%, 100%); + --tooltip-color: var(--body-color); --tooltip-bg: hsl(0, 0%, 0%); --tooltip-border-radius: 0.25rem; --tooltip-opacity: 0.9; @@ -6820,7 +6750,7 @@ fieldset:disabled .btn { display: block; padding: var(--tooltip-arrow-height); margin: var(--tooltip-margin); - font-family: var(--font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-family: v-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-style: normal; font-weight: 400; line-height: 1.5; @@ -6925,7 +6855,7 @@ fieldset:disabled .btn { --popover-zindex: 1060; --popover-max-width: 276px; --popover-font-size: 0.875rem; - --popover-bg: hsl(0, 0%, 100%); + --popover-bg: var(--body-color); --popover-border-width: 1px; --popover-border-color: var(--border-color-translucent); --popover-border-radius: 0.3rem; @@ -7233,7 +7163,7 @@ fieldset:disabled .btn { justify-content: center; width: 15%; padding: 0; - color: hsl(0, 0%, 100%); + color: var(--body-color); text-align: center; background: none; border: 0; @@ -7257,7 +7187,7 @@ fieldset:disabled .btn { .carousel-control-prev:focus, .carousel-control-next:active, .carousel-control-next:focus { - color: hsl(0, 0%, 100%); + color: var(--body-color); text-decoration: none; outline: 0; opacity: 0.9; @@ -7329,7 +7259,7 @@ fieldset:disabled .btn { margin-left: 3px; text-indent: -999px; cursor: pointer; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); background-clip: padding-box; border: 0; border-top: 10px solid transparent; @@ -7359,7 +7289,7 @@ fieldset:disabled .btn { left: 15%; padding-top: 1.25rem; padding-bottom: 1.25rem; - color: hsl(0, 0%, 100%); + color: var(--body-color); text-align: center; } @@ -7488,7 +7418,7 @@ fieldset:disabled .btn { --offcanvas-padding-x: 1rem; --offcanvas-padding-y: 1rem; --offcanvas-color: ; - --offcanvas-bg: hsl(0, 0%, 100%); + --offcanvas-bg: var(--body-color); --offcanvas-border-width: 1px; --offcanvas-border-color: var(--border-color-translucent); --offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); @@ -7597,7 +7527,7 @@ fieldset:disabled .btn { .offcanvas-sm { --offcanvas-height: auto; --offcanvas-border-width: 0; - background-color: transparent !important; + background-color: transparent ; } .offcanvas-sm .offcanvas-header { @@ -7613,7 +7543,7 @@ fieldset:disabled .btn { flex-grow: 0; padding: 0; overflow-y: visible; - background-color: transparent !important; + background-color: transparent ; } } @@ -7720,7 +7650,7 @@ fieldset:disabled .btn { .offcanvas-md { --offcanvas-height: auto; --offcanvas-border-width: 0; - background-color: transparent !important; + background-color: transparent ; } .offcanvas-md .offcanvas-header { @@ -7736,7 +7666,7 @@ fieldset:disabled .btn { flex-grow: 0; padding: 0; overflow-y: visible; - background-color: transparent !important; + background-color: transparent ; } } @@ -7843,7 +7773,7 @@ fieldset:disabled .btn { .offcanvas-lg { --offcanvas-height: auto; --offcanvas-border-width: 0; - background-color: transparent !important; + background-color: transparent ; } .offcanvas-lg .offcanvas-header { @@ -7859,7 +7789,7 @@ fieldset:disabled .btn { flex-grow: 0; padding: 0; overflow-y: visible; - background-color: transparent !important; + background-color: transparent ; } } @@ -7966,7 +7896,7 @@ fieldset:disabled .btn { .offcanvas-xl { --offcanvas-height: auto; --offcanvas-border-width: 0; - background-color: transparent !important; + background-color: transparent ; } .offcanvas-xl .offcanvas-header { @@ -7982,7 +7912,7 @@ fieldset:disabled .btn { flex-grow: 0; padding: 0; overflow-y: visible; - background-color: transparent !important; + background-color: transparent ; } } @@ -8089,7 +8019,7 @@ fieldset:disabled .btn { .offcanvas-xxl { --offcanvas-height: auto; --offcanvas-border-width: 0; - background-color: transparent !important; + background-color: transparent ; } .offcanvas-xxl .offcanvas-header { @@ -8105,7 +8035,7 @@ fieldset:disabled .btn { flex-grow: 0; padding: 0; overflow-y: visible; - background-color: transparent !important; + background-color: transparent ; } } @@ -8316,115 +8246,116 @@ fieldset:disabled .btn { } .text-bg-primary { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(1, 1, 86, var(--bg-opacity, 1)) !important; + color: var(--body-color); + background-color: var(--primary); } + .text-bg-secondary { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(109, 117, 126, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(109, 117, 126, var(--bg-opacity, 1)) ; } .text-bg-success { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(68, 131, 68, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(68, 131, 68, var(--bg-opacity, 1)) ; } .text-bg-info { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(48, 99, 141, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(48, 99, 141, var(--bg-opacity, 1)) ; } .text-bg-warning { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(173, 98, 0, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(173, 98, 0, var(--bg-opacity, 1)) ; } .text-bg-danger { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(165, 31, 24, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(165, 31, 24, var(--bg-opacity, 1)) ; } .text-bg-light { - color: hsl(0, 0%, 0%) !important; - background-color: RGBA(249, 250, 251, var(--bg-opacity, 1)) !important; + color: hsl(0, 0%, 0%) ; + background-color: RGBA(249, 250, 251, var(--bg-opacity, 1)) ; } .text-bg-dark { - color: hsl(0, 0%, 100%) !important; - background-color: RGBA(53, 59, 65, var(--bg-opacity, 1)) !important; + color: var(--body-color) ; + background-color: RGBA(53, 59, 65, var(--bg-opacity, 1)) ; } .link-primary { - color: hsl(240, 98%, 17%) !important; + color: hsl(240, 98%, 17%) ; } .link-primary:active, .link-primary:focus { - color: #010145 !important; + color: #010145 ; } .link-secondary { - color: hsl(210, 7%, 46%) !important; + color: hsl(210, 7%, 46%) ; } .link-secondary:active, .link-secondary:focus { - color: #575e65 !important; + color: #575e65 ; } .link-success { - color: hsl(120, 32%, 39%) !important; + color: hsl(120, 32%, 39%) ; } .link-success:active, .link-success:focus { - color: #366936 !important; + color: #366936 ; } .link-info { - color: hsl(207, 49%, 37%) !important; + color: hsl(207, 49%, 37%) ; } .link-info:active, .link-info:focus { - color: #264f71 !important; + color: #264f71 ; } .link-warning { - color: hsl(34, 100%, 34%) !important; + color: hsl(34, 100%, 34%) ; } .link-warning:active, .link-warning:focus { - color: #8a4e00 !important; + color: #8a4e00 ; } .link-danger { - color: hsl(3, 75%, 37%) !important; + color: hsl(3, 75%, 37%) ; } .link-danger:active, .link-danger:focus { - color: #841913 !important; + color: #841913 ; } .link-light { - color: hsl(210, 17%, 98%) !important; + color: hsl(210, 17%, 98%) ; } .link-light:active, .link-light:focus { - color: #fafbfc !important; + color: #fafbfc ; } .link-dark { - color: hsl(210, 10%, 23%) !important; + color: hsl(210, 10%, 23%) ; } .link-dark:active, .link-dark:focus { - color: #2a2f34 !important; + color: #2a2f34 ; } .ratio { @@ -8479,7 +8410,7 @@ fieldset:disabled .btn { } .sticky-top { - position: sticky !important; + position: sticky ; top: 0; z-index: 1020; } @@ -8593,15 +8524,15 @@ fieldset:disabled .btn { .visually-hidden, .sr-only, .visually-hidden-focusable:not(:focus):not(:focus-within) { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; + position: absolute ; + width: 1px ; + height: 1px ; + padding: 0 ; + margin: -1px ; + overflow: hidden ; + clip: rect(0, 0, 0, 0) ; + white-space: nowrap ; + border: 0 ; } .stretched-link::after { @@ -8632,307 +8563,307 @@ fieldset:disabled .btn { } .align-baseline { - vertical-align: baseline !important; + vertical-align: baseline ; } .align-top { - vertical-align: top !important; + vertical-align: top ; } .align-middle { - vertical-align: middle !important; + vertical-align: middle ; } .align-bottom { - vertical-align: bottom !important; + vertical-align: bottom ; } .align-text-bottom { - vertical-align: text-bottom !important; + vertical-align: text-bottom ; } .align-text-top { - vertical-align: text-top !important; + vertical-align: text-top ; } .float-start { - float: left !important; + float: left ; } .float-end { - float: right !important; + float: right ; } .float-none { - float: none !important; + float: none ; } .opacity-0 { - opacity: 0 !important; + opacity: 0 ; } .opacity-25 { - opacity: 0.25 !important; + opacity: 0.25 ; } .opacity-50 { - opacity: 0.5 !important; + opacity: 0.5 ; } .opacity-75 { - opacity: 0.75 !important; + opacity: 0.75 ; } .opacity-100 { - opacity: 1 !important; + opacity: 1 ; } .overflow-auto { - overflow: auto !important; + overflow: auto ; } .overflow-hidden { - overflow: hidden !important; + overflow: hidden ; } .overflow-visible { - overflow: visible !important; + overflow: visible ; } .overflow-scroll { - overflow: scroll !important; + overflow: scroll ; } .d-inline { - display: inline !important; + display: inline ; } .d-inline-block { - display: inline-block !important; + display: inline-block ; } .d-block { - display: block !important; + display: block ; } .d-grid { - display: grid !important; + display: grid ; } .d-table { - display: table !important; + display: table ; } .d-table-row { - display: table-row !important; + display: table-row ; } .d-table-cell { - display: table-cell !important; + display: table-cell ; } .d-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-none { - display: none !important; + display: none ; } .shadow { - -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; + -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ; } .shadow-sm { - -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) ; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) ; } .shadow-lg { - -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; + -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) ; + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) ; } .shadow-none { - -webkit-box-shadow: none !important; - box-shadow: none !important; + -webkit-box-shadow: none ; + box-shadow: none ; } .position-static { - position: static !important; + position: static ; } .position-relative { - position: relative !important; + position: relative ; } .position-absolute { - position: absolute !important; + position: absolute ; } .position-fixed { - position: fixed !important; + position: fixed ; } .position-sticky { - position: sticky !important; + position: sticky ; } .top-0 { - top: 0 !important; + top: 0 ; } .top-50 { - top: 50% !important; + top: 50% ; } .top-100 { - top: 100% !important; + top: 100% ; } .bottom-0 { - bottom: 0 !important; + bottom: 0 ; } .bottom-50 { - bottom: 50% !important; + bottom: 50% ; } .bottom-100 { - bottom: 100% !important; + bottom: 100% ; } .start-0 { - left: 0 !important; + left: 0 ; } .start-50 { - left: 50% !important; + left: 50% ; } .start-100 { - left: 100% !important; + left: 100% ; } .end-0 { - right: 0 !important; + right: 0 ; } .end-50 { - right: 50% !important; + right: 50% ; } .end-100 { - right: 100% !important; + right: 100% ; } .translate-middle { - -webkit-transform: translate(-50%, -50%) !important; - transform: translate(-50%, -50%) !important; + -webkit-transform: translate(-50%, -50%) ; + transform: translate(-50%, -50%) ; } .translate-middle-x { - -webkit-transform: translateX(-50%) !important; - transform: translateX(-50%) !important; + -webkit-transform: translateX(-50%) ; + transform: translateX(-50%) ; } .translate-middle-y { - -webkit-transform: translateY(-50%) !important; - transform: translateY(-50%) !important; + -webkit-transform: translateY(-50%) ; + transform: translateY(-50%) ; } .border { - border: var(--border-width) var(--border-style) var(--border-color) !important; + border: var(--border-width) var(--border-style) var(--border-color) ; } .border-0 { - border: 0 !important; + border: 0 ; } .border-top { - border-top: var(--border-width) var(--border-style) var(--border-color) !important; + border-top: var(--border-width) var(--border-style) var(--border-color) ; } .border-top-0 { - border-top: 0 !important; + border-top: 0 ; } .border-end { - border-right: var(--border-width) var(--border-style) var(--border-color) !important; + border-right: var(--border-width) var(--border-style) var(--border-color) ; } .border-end-0 { - border-right: 0 !important; + border-right: 0 ; } .border-bottom { - border-bottom: var(--border-width) var(--border-style) var(--border-color) !important; + border-bottom: var(--border-width) var(--border-style) var(--border-color) ; } .border-bottom-0 { - border-bottom: 0 !important; + border-bottom: 0 ; } .border-start { - border-left: var(--border-width) var(--border-style) var(--border-color) !important; + border-left: var(--border-width) var(--border-style) var(--border-color) ; } .border-start-0 { - border-left: 0 !important; + border-left: 0 ; } .border-primary { --border-opacity: 1; - border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--primary-rgb), var(--border-opacity)) ; } .border-secondary { --border-opacity: 1; - border-color: rgba(var(--secondary-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--secondary-rgb), var(--border-opacity)) ; } .border-success { --border-opacity: 1; - border-color: rgba(var(--success-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--success-rgb), var(--border-opacity)) ; } .border-info { --border-opacity: 1; - border-color: rgba(var(--info-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--info-rgb), var(--border-opacity)) ; } .border-warning { --border-opacity: 1; - border-color: rgba(var(--warning-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--warning-rgb), var(--border-opacity)) ; } .border-danger { --border-opacity: 1; - border-color: rgba(var(--danger-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--danger-rgb), var(--border-opacity)) ; } .border-light { --border-opacity: 1; - border-color: rgba(var(--light-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--light-rgb), var(--border-opacity)) ; } .border-dark { --border-opacity: 1; - border-color: rgba(var(--dark-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--dark-rgb), var(--border-opacity)) ; } .border-white { --border-opacity: 1; - border-color: rgba(var(--white-rgb), var(--border-opacity)) !important; + border-color: rgba(var(--white-rgb), var(--border-opacity)) ; } .border-1 { @@ -8976,928 +8907,928 @@ fieldset:disabled .btn { } .w-25 { - width: 25% !important; + width: 25% ; } .w-50 { - width: 50% !important; + width: 50% ; } .w-75 { - width: 75% !important; + width: 75% ; } .w-100 { - width: 100% !important; + width: 100% ; } .w-auto { - width: auto !important; + width: auto ; } .mw-100 { - max-width: 100% !important; + max-width: 100% ; } .vw-100 { - width: 100vw !important; + width: 100vw ; } .min-vw-100 { - min-width: 100vw !important; + min-width: 100vw ; } .h-25 { - height: 25% !important; + height: 25% ; } .h-50 { - height: 50% !important; + height: 50% ; } .h-75 { - height: 75% !important; + height: 75% ; } .h-100 { - height: 100% !important; + height: 100% ; } .h-auto { - height: auto !important; + height: auto ; } .mh-100 { - max-height: 100% !important; + max-height: 100% ; } .vh-100 { - height: 100vh !important; + height: 100vh ; } .min-vh-100 { - min-height: 100vh !important; + min-height: 100vh ; } .flex-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-0 { - margin: 0 !important; + margin: 0 ; } .m-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-3 { - margin: 1rem !important; + margin: 1rem ; } .m-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-5 { - margin: 3rem !important; + margin: 3rem ; } .m-auto { - margin: auto !important; + margin: auto ; } .mx-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-auto { - margin-top: auto !important; + margin-top: auto ; } .me-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-3, .form-group { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-auto { - margin-left: auto !important; + margin-left: auto ; } .p-0 { - padding: 0 !important; + padding: 0 ; } .p-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-3 { - padding: 1rem !important; + padding: 1rem ; } .p-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-5 { - padding: 3rem !important; + padding: 3rem ; } .px-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-0 { - gap: 0 !important; + gap: 0 ; } .gap-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-5 { - gap: 3rem !important; + gap: 3rem ; } .font-monospace { - font-family: var(--font-monospace) !important; + font-family: var(--font-monospace) ; } .fs-1 { - font-size: calc(1.375rem + 1.5vw) !important; + font-size: calc(1.375rem + 1.5vw) ; } .fs-2 { - font-size: calc(1.325rem + 0.9vw) !important; + font-size: calc(1.325rem + 0.9vw) ; } .fs-3 { - font-size: calc(1.3rem + 0.6vw) !important; + font-size: calc(1.3rem + 0.6vw) ; } .fs-4 { - font-size: calc(1.275rem + 0.3vw) !important; + font-size: calc(1.275rem + 0.3vw) ; } .fs-5 { - font-size: 1.25rem !important; + font-size: 1.25rem ; } .fs-6 { - font-size: 1rem !important; + font-size: 1rem ; } .fst-italic { - font-style: italic !important; + font-style: italic ; } .fst-normal { - font-style: normal !important; + font-style: normal ; } .fw-light { - font-weight: 300 !important; + font-weight: 300 ; } .fw-lighter { - font-weight: lighter !important; + font-weight: lighter ; } .fw-normal { - font-weight: 400 !important; + font-weight: 400 ; } .fw-bold { - font-weight: 700 !important; + font-weight: 700 ; } .fw-semibold { - font-weight: 600 !important; + font-weight: 600 ; } .fw-bolder { - font-weight: bolder !important; + font-weight: bolder ; } .lh-1 { - line-height: 1 !important; + line-height: 1 ; } .lh-sm { - line-height: 1.25 !important; + line-height: 1.25 ; } .lh-base { - line-height: 1.5 !important; + line-height: 1.5 ; } .lh-lg { - line-height: 2 !important; + line-height: 2 ; } .text-start { - text-align: left !important; + text-align: left; } .text-end { - text-align: right !important; + text-align: right; } .text-center { - text-align: center !important; + text-align: center ; } .text-decoration-none { - text-decoration: none !important; + text-decoration: none ; } .text-decoration-underline { - text-decoration: underline !important; + text-decoration: underline ; } .text-decoration-line-through { - text-decoration: line-through !important; + text-decoration: line-through ; } .text-lowercase { - text-transform: lowercase !important; + text-transform: lowercase ; } .text-uppercase { - text-transform: uppercase !important; + text-transform: uppercase ; } .text-capitalize { - text-transform: capitalize !important; + text-transform: capitalize ; } .text-wrap { - white-space: normal !important; + white-space: normal ; } .text-nowrap { - white-space: nowrap !important; + white-space: nowrap ; } /* rtl:begin:remove */ .text-break { - word-wrap: break-word !important; - word-break: break-word !important; + word-wrap: break-word ; + word-break: break-word ; } /* rtl:end:remove */ .text-primary { --text-opacity: 1; - color: rgba(var(--primary-rgb), var(--text-opacity)) !important; + color: rgba(var(--primary-rgb), var(--text-opacity)) ; } .text-secondary { --text-opacity: 1; - color: rgba(var(--secondary-rgb), var(--text-opacity)) !important; + color: rgba(var(--secondary-rgb), var(--text-opacity)) ; } .text-success { --text-opacity: 1; - color: rgba(var(--success-rgb), var(--text-opacity)) !important; + color: rgba(var(--success-rgb), var(--text-opacity)) ; } .text-info { --text-opacity: 1; - color: rgba(var(--info-rgb), var(--text-opacity)) !important; + color: rgba(var(--info-rgb), var(--text-opacity)) ; } .text-warning { --text-opacity: 1; - color: rgba(var(--warning-rgb), var(--text-opacity)) !important; + color: rgba(var(--warning-rgb), var(--text-opacity)) ; } .text-danger { --text-opacity: 1; - color: rgba(var(--danger-rgb), var(--text-opacity)) !important; + color: rgba(var(--danger-rgb), var(--text-opacity)) ; } .text-light { --text-opacity: 1; - color: rgba(var(--light-rgb), var(--text-opacity)) !important; + color: rgba(var(--light-rgb), var(--text-opacity)) ; } .text-dark { --text-opacity: 1; - color: rgba(var(--dark-rgb), var(--text-opacity)) !important; + color: rgba(var(--dark-rgb), var(--text-opacity)) ; } .text-black { --text-opacity: 1; - color: rgba(var(--black-rgb), var(--text-opacity)) !important; + color: rgba(var(--black-rgb), var(--text-opacity)) ; } .text-white { --text-opacity: 1; - color: rgba(var(--white-rgb), var(--text-opacity)) !important; + color: rgba(var(--white-rgb), var(--text-opacity)) ; } .text-body { --text-opacity: 1; - color: rgba(var(--body-color-rgb), var(--text-opacity)) !important; + color: rgba(var(--body-color-rgb), var(--text-opacity)) ; } .text-muted { --text-opacity: 1; - color: hsl(210, 7%, 46%) !important; + color: hsl(210, 7%, 46%) ; } .text-black-50 { --text-opacity: 1; - color: rgba(0, 0, 0, 0.5) !important; + color: rgba(0, 0, 0, 0.5) ; } .text-white-50 { --text-opacity: 1; - color: rgba(255, 255, 255, 0.5) !important; + color: rgba(255, 255, 255, 0.5) ; } .text-reset { --text-opacity: 1; - color: inherit !important; + color: inherit ; } .text-opacity-25 { @@ -9918,62 +9849,62 @@ fieldset:disabled .btn { .bg-primary { --bg-opacity: 1; - background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--primary-rgb), var(--bg-opacity)) ; } .bg-secondary { --bg-opacity: 1; - background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) ; } .bg-success { --bg-opacity: 1; - background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--success-rgb), var(--bg-opacity)) ; } .bg-info { --bg-opacity: 1; - background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--info-rgb), var(--bg-opacity)) ; } .bg-warning { --bg-opacity: 1; - background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--warning-rgb), var(--bg-opacity)) ; } .bg-danger { --bg-opacity: 1; - background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--danger-rgb), var(--bg-opacity)) ; } .bg-light { --bg-opacity: 1; - background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--light-rgb), var(--bg-opacity)) ; } .bg-dark { --bg-opacity: 1; - background-color: rgba(var(--dark-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--dark-rgb), var(--bg-opacity)) ; } .bg-black { --bg-opacity: 1; - background-color: rgba(var(--black-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--black-rgb), var(--bg-opacity)) ; } .bg-white { --bg-opacity: 1; - background-color: rgba(var(--white-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--white-rgb), var(--bg-opacity)) ; } .bg-body { --bg-opacity: 1; - background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important; + background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) ; } .bg-transparent { --bg-opacity: 1; - background-color: transparent !important; + background-color: transparent ; } .bg-opacity-10 { @@ -9997,3802 +9928,3802 @@ fieldset:disabled .btn { } .bg-gradient { - background-image: var(--gradient) !important; + background-image: var(--gradient) ; } .user-select-all { - -webkit-user-select: all !important; - -moz-user-select: all !important; - user-select: all !important; + -webkit-user-select: all ; + -moz-user-select: all ; + user-select: all ; } .user-select-auto { - -webkit-user-select: auto !important; - -moz-user-select: auto !important; - -ms-user-select: auto !important; - user-select: auto !important; + -webkit-user-select: auto ; + -moz-user-select: auto ; + -ms-user-select: auto ; + user-select: auto ; } .user-select-none { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; + -webkit-user-select: none ; + -moz-user-select: none ; + -ms-user-select: none ; + user-select: none ; } .pe-none { - pointer-events: none !important; + pointer-events: none ; } .pe-auto { - pointer-events: auto !important; + pointer-events: auto ; } .rounded { - border-radius: var(--border-radius) !important; + border-radius: var(--border-radius) ; } .rounded-0 { - border-radius: 0 !important; + border-radius: 0 ; } .rounded-1 { - border-radius: var(--border-radius-sm) !important; + border-radius: var(--border-radius-sm) ; } .rounded-2 { - border-radius: var(--border-radius) !important; + border-radius: var(--border-radius) ; } .rounded-3 { - border-radius: var(--border-radius-lg) !important; + border-radius: var(--border-radius-lg) ; } .rounded-4 { - border-radius: var(--border-radius-xl) !important; + border-radius: var(--border-radius-xl) ; } .rounded-5 { - border-radius: var(--border-radius-2xl) !important; + border-radius: var(--border-radius-2xl) ; } .rounded-circle { - border-radius: 50% !important; + border-radius: 50% ; } .rounded-pill { - border-radius: var(--border-radius-pill) !important; + border-radius: var(--border-radius-pill) ; } .rounded-top { - border-top-left-radius: var(--border-radius) !important; - border-top-right-radius: var(--border-radius) !important; + border-top-left-radius: var(--border-radius) ; + border-top-right-radius: var(--border-radius) ; } .rounded-end { - border-top-right-radius: var(--border-radius) !important; - border-bottom-right-radius: var(--border-radius) !important; + border-top-right-radius: var(--border-radius) ; + border-bottom-right-radius: var(--border-radius) ; } .rounded-bottom { - border-bottom-right-radius: var(--border-radius) !important; - border-bottom-left-radius: var(--border-radius) !important; + border-bottom-right-radius: var(--border-radius) ; + border-bottom-left-radius: var(--border-radius) ; } .rounded-start { - border-bottom-left-radius: var(--border-radius) !important; - border-top-left-radius: var(--border-radius) !important; + border-bottom-left-radius: var(--border-radius) ; + border-top-left-radius: var(--border-radius) ; } .visible { - visibility: visible !important; + visibility: visible ; } .invisible { - visibility: hidden !important; + visibility: hidden ; } @media (min-width: 576px) { .float-sm-start { - float: left !important; + float: left ; } .float-sm-end { - float: right !important; + float: right ; } .float-sm-none { - float: none !important; + float: none ; } .d-sm-inline { - display: inline !important; + display: inline ; } .d-sm-inline-block { - display: inline-block !important; + display: inline-block ; } .d-sm-block { - display: block !important; + display: block ; } .d-sm-grid { - display: grid !important; + display: grid ; } .d-sm-table { - display: table !important; + display: table ; } .d-sm-table-row { - display: table-row !important; + display: table-row ; } .d-sm-table-cell { - display: table-cell !important; + display: table-cell ; } .d-sm-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-sm-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-sm-none { - display: none !important; + display: none ; } .flex-sm-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-sm-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-sm-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-sm-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-sm-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-sm-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-sm-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-sm-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-sm-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-sm-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-sm-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-sm-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-sm-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-sm-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-sm-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-sm-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-sm-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-sm-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-sm-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-sm-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-sm-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-sm-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-sm-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-sm-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-sm-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-sm-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-sm-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-sm-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-sm-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-sm-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-sm-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-sm-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-sm-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-sm-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-sm-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-sm-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-sm-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-sm-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-sm-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-sm-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-sm-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-sm-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-sm-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-sm-0 { - margin: 0 !important; + margin: 0 ; } .m-sm-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-sm-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-sm-3 { - margin: 1rem !important; + margin: 1rem ; } .m-sm-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-sm-5 { - margin: 3rem !important; + margin: 3rem ; } .m-sm-auto { - margin: auto !important; + margin: auto ; } .mx-sm-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-sm-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-sm-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-sm-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-sm-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-sm-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-sm-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-sm-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-sm-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-sm-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-sm-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-sm-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-sm-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-sm-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-sm-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-sm-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-sm-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-sm-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-sm-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-sm-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-sm-auto { - margin-top: auto !important; + margin-top: auto ; } .me-sm-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-sm-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-sm-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-sm-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-sm-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-sm-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-sm-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-sm-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-sm-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-sm-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-sm-3 { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-sm-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-sm-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-sm-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-sm-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-sm-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-sm-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-sm-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-sm-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-sm-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-sm-auto { - margin-left: auto !important; + margin-left: auto ; } .p-sm-0 { - padding: 0 !important; + padding: 0 ; } .p-sm-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-sm-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-sm-3 { - padding: 1rem !important; + padding: 1rem ; } .p-sm-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-sm-5 { - padding: 3rem !important; + padding: 3rem ; } .px-sm-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-sm-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-sm-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-sm-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-sm-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-sm-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-sm-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-sm-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-sm-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-sm-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-sm-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-sm-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-sm-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-sm-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-sm-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-sm-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-sm-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-sm-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-sm-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-sm-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-sm-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-sm-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-sm-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-sm-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-sm-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-sm-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-sm-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-sm-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-sm-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-sm-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-sm-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-sm-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-sm-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-sm-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-sm-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-sm-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-sm-0 { - gap: 0 !important; + gap: 0 ; } .gap-sm-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-sm-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-sm-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-sm-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-sm-5 { - gap: 3rem !important; + gap: 3rem ; } .text-sm-start { - text-align: left !important; + text-align: left ; } .text-sm-end { - text-align: right !important; + text-align: right ; } .text-sm-center { - text-align: center !important; + text-align: center ; } } @media (min-width: 768px) { .float-md-start { - float: left !important; + float: left ; } .float-md-end { - float: right !important; + float: right ; } .float-md-none { - float: none !important; + float: none ; } .d-md-inline { - display: inline !important; + display: inline ; } .d-md-inline-block { - display: inline-block !important; + display: inline-block ; } .d-md-block { - display: block !important; + display: block ; } .d-md-grid { - display: grid !important; + display: grid ; } .d-md-table { - display: table !important; + display: table ; } .d-md-table-row { - display: table-row !important; + display: table-row ; } .d-md-table-cell { - display: table-cell !important; + display: table-cell ; } .d-md-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-md-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-md-none { - display: none !important; + display: none ; } .flex-md-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-md-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-md-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-md-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-md-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-md-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-md-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-md-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-md-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-md-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-md-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-md-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-md-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-md-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-md-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-md-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-md-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-md-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-md-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-md-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-md-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-md-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-md-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-md-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-md-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-md-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-md-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-md-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-md-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-md-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-md-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-md-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-md-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-md-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-md-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-md-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-md-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-md-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-md-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-md-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-md-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-md-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-md-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-md-0 { - margin: 0 !important; + margin: 0 ; } .m-md-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-md-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-md-3 { - margin: 1rem !important; + margin: 1rem ; } .m-md-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-md-5 { - margin: 3rem !important; + margin: 3rem ; } .m-md-auto { - margin: auto !important; + margin: auto ; } .mx-md-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-md-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-md-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-md-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-md-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-md-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-md-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-md-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-md-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-md-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-md-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-md-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-md-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-md-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-md-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-md-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-md-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-md-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-md-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-md-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-md-auto { - margin-top: auto !important; + margin-top: auto ; } .me-md-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-md-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-md-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-md-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-md-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-md-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-md-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-md-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-md-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-md-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-md-3 { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-md-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-md-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-md-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-md-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-md-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-md-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-md-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-md-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-md-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-md-auto { - margin-left: auto !important; + margin-left: auto ; } .p-md-0 { - padding: 0 !important; + padding: 0 ; } .p-md-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-md-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-md-3 { - padding: 1rem !important; + padding: 1rem ; } .p-md-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-md-5 { - padding: 3rem !important; + padding: 3rem ; } .px-md-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-md-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-md-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-md-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-md-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-md-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-md-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-md-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-md-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-md-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-md-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-md-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-md-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-md-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-md-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-md-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-md-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-md-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-md-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-md-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-md-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-md-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-md-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-md-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-md-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-md-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-md-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-md-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-md-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-md-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-md-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-md-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-md-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-md-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-md-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-md-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-md-0 { - gap: 0 !important; + gap: 0 ; } .gap-md-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-md-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-md-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-md-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-md-5 { - gap: 3rem !important; + gap: 3rem ; } .text-md-start { - text-align: left !important; + text-align: left ; } .text-md-end { - text-align: right !important; + text-align: right ; } .text-md-center { - text-align: center !important; + text-align: center ; } } @media (min-width: 992px) { .float-lg-start { - float: left !important; + float: left ; } .float-lg-end { - float: right !important; + float: right ; } .float-lg-none { - float: none !important; + float: none ; } .d-lg-inline { - display: inline !important; + display: inline ; } .d-lg-inline-block { - display: inline-block !important; + display: inline-block ; } .d-lg-block { - display: block !important; + display: block ; } .d-lg-grid { - display: grid !important; + display: grid ; } .d-lg-table { - display: table !important; + display: table ; } .d-lg-table-row { - display: table-row !important; + display: table-row ; } .d-lg-table-cell { - display: table-cell !important; + display: table-cell ; } .d-lg-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-lg-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-lg-none { - display: none !important; + display: none ; } .flex-lg-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-lg-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-lg-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-lg-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-lg-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-lg-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-lg-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-lg-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-lg-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-lg-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-lg-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-lg-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-lg-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-lg-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-lg-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-lg-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-lg-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-lg-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-lg-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-lg-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-lg-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-lg-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-lg-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-lg-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-lg-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-lg-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-lg-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-lg-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-lg-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-lg-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-lg-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-lg-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-lg-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-lg-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-lg-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-lg-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-lg-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-lg-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-lg-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-lg-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-lg-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-lg-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-lg-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-lg-0 { - margin: 0 !important; + margin: 0 ; } .m-lg-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-lg-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-lg-3 { - margin: 1rem !important; + margin: 1rem ; } .m-lg-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-lg-5 { - margin: 3rem !important; + margin: 3rem ; } .m-lg-auto { - margin: auto !important; + margin: auto ; } .mx-lg-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-lg-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-lg-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-lg-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-lg-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-lg-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-lg-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-lg-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-lg-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-lg-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-lg-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-lg-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-lg-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-lg-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-lg-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-lg-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-lg-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-lg-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-lg-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-lg-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-lg-auto { - margin-top: auto !important; + margin-top: auto ; } .me-lg-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-lg-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-lg-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-lg-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-lg-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-lg-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-lg-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-lg-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-lg-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-lg-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-lg-3 { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-lg-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-lg-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-lg-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-lg-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-lg-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-lg-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-lg-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-lg-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-lg-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-lg-auto { - margin-left: auto !important; + margin-left: auto ; } .p-lg-0 { - padding: 0 !important; + padding: 0 ; } .p-lg-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-lg-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-lg-3 { - padding: 1rem !important; + padding: 1rem ; } .p-lg-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-lg-5 { - padding: 3rem !important; + padding: 3rem ; } .px-lg-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-lg-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-lg-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-lg-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-lg-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-lg-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-lg-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-lg-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-lg-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-lg-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-lg-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-lg-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-lg-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-lg-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-lg-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-lg-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-lg-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-lg-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-lg-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-lg-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-lg-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-lg-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-lg-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-lg-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-lg-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-lg-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-lg-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-lg-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-lg-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-lg-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-lg-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-lg-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-lg-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-lg-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-lg-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-lg-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-lg-0 { - gap: 0 !important; + gap: 0 ; } .gap-lg-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-lg-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-lg-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-lg-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-lg-5 { - gap: 3rem !important; + gap: 3rem ; } .text-lg-start { - text-align: left !important; + text-align: left ; } .text-lg-end { - text-align: right !important; + text-align: right ; } .text-lg-center { - text-align: center !important; + text-align: center ; } } @media (min-width: 1200px) { .float-xl-start { - float: left !important; + float: left ; } .float-xl-end { - float: right !important; + float: right ; } .float-xl-none { - float: none !important; + float: none ; } .d-xl-inline { - display: inline !important; + display: inline ; } .d-xl-inline-block { - display: inline-block !important; + display: inline-block ; } .d-xl-block { - display: block !important; + display: block ; } .d-xl-grid { - display: grid !important; + display: grid ; } .d-xl-table { - display: table !important; + display: table ; } .d-xl-table-row { - display: table-row !important; + display: table-row ; } .d-xl-table-cell { - display: table-cell !important; + display: table-cell ; } .d-xl-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-xl-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-xl-none { - display: none !important; + display: none ; } .flex-xl-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-xl-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-xl-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-xl-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-xl-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-xl-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-xl-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-xl-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-xl-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-xl-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-xl-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-xl-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-xl-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-xl-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-xl-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-xl-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-xl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-xl-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-xl-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-xl-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-xl-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-xl-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-xl-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-xl-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-xl-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-xl-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-xl-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-xl-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-xl-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-xl-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-xl-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-xl-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-xl-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-xl-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-xl-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-xl-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-xl-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-xl-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-xl-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-xl-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-xl-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-xl-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-xl-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-xl-0 { - margin: 0 !important; + margin: 0 ; } .m-xl-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-xl-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-xl-3 { - margin: 1rem !important; + margin: 1rem ; } .m-xl-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-xl-5 { - margin: 3rem !important; + margin: 3rem ; } .m-xl-auto { - margin: auto !important; + margin: auto ; } .mx-xl-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-xl-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-xl-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-xl-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-xl-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-xl-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-xl-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-xl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-xl-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-xl-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-xl-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-xl-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-xl-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-xl-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-xl-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-xl-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-xl-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-xl-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-xl-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-xl-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-xl-auto { - margin-top: auto !important; + margin-top: auto ; } .me-xl-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-xl-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-xl-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-xl-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-xl-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-xl-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-xl-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-xl-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-xl-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-xl-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-xl-3 { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-xl-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-xl-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-xl-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-xl-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-xl-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-xl-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-xl-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-xl-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-xl-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-xl-auto { - margin-left: auto !important; + margin-left: auto ; } .p-xl-0 { - padding: 0 !important; + padding: 0 ; } .p-xl-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-xl-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-xl-3 { - padding: 1rem !important; + padding: 1rem ; } .p-xl-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-xl-5 { - padding: 3rem !important; + padding: 3rem ; } .px-xl-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-xl-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-xl-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-xl-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-xl-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-xl-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-xl-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-xl-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-xl-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-xl-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-xl-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-xl-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-xl-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-xl-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-xl-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-xl-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-xl-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-xl-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-xl-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-xl-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-xl-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-xl-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-xl-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-xl-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-xl-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-xl-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-xl-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-xl-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-xl-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-xl-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-xl-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-xl-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-xl-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-xl-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-xl-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-xl-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-xl-0 { - gap: 0 !important; + gap: 0 ; } .gap-xl-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-xl-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-xl-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-xl-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-xl-5 { - gap: 3rem !important; + gap: 3rem ; } .text-xl-start { - text-align: left !important; + text-align: left ; } .text-xl-end { - text-align: right !important; + text-align: right ; } .text-xl-center { - text-align: center !important; + text-align: center ; } } @media (min-width: 1400px) { .float-xxl-start { - float: left !important; + float: left ; } .float-xxl-end { - float: right !important; + float: right ; } .float-xxl-none { - float: none !important; + float: none ; } .d-xxl-inline { - display: inline !important; + display: inline ; } .d-xxl-inline-block { - display: inline-block !important; + display: inline-block ; } .d-xxl-block { - display: block !important; + display: block ; } .d-xxl-grid { - display: grid !important; + display: grid ; } .d-xxl-table { - display: table !important; + display: table ; } .d-xxl-table-row { - display: table-row !important; + display: table-row ; } .d-xxl-table-cell { - display: table-cell !important; + display: table-cell ; } .d-xxl-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-xxl-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-xxl-none { - display: none !important; + display: none ; } .flex-xxl-fill { - -webkit-box-flex: 1 !important; - -ms-flex: 1 1 auto !important; - flex: 1 1 auto !important; + -webkit-box-flex: 1 ; + -ms-flex: 1 1 auto ; + flex: 1 1 auto ; } .flex-xxl-row { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: row !important; - flex-direction: row !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: normal ; + -ms-flex-direction: row ; + flex-direction: row ; } .flex-xxl-column { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -ms-flex-direction: column !important; - flex-direction: column !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: normal ; + -ms-flex-direction: column ; + flex-direction: column ; } .flex-xxl-row-reverse { - -webkit-box-orient: horizontal !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: row-reverse !important; - flex-direction: row-reverse !important; + -webkit-box-orient: horizontal ; + -webkit-box-direction: reverse ; + -ms-flex-direction: row-reverse ; + flex-direction: row-reverse ; } .flex-xxl-column-reverse { - -webkit-box-orient: vertical !important; - -webkit-box-direction: reverse !important; - -ms-flex-direction: column-reverse !important; - flex-direction: column-reverse !important; + -webkit-box-orient: vertical ; + -webkit-box-direction: reverse ; + -ms-flex-direction: column-reverse ; + flex-direction: column-reverse ; } .flex-xxl-grow-0 { - -webkit-box-flex: 0 !important; - -ms-flex-positive: 0 !important; - flex-grow: 0 !important; + -webkit-box-flex: 0 ; + -ms-flex-positive: 0 ; + flex-grow: 0 ; } .flex-xxl-grow-1 { - -webkit-box-flex: 1 !important; - -ms-flex-positive: 1 !important; - flex-grow: 1 !important; + -webkit-box-flex: 1 ; + -ms-flex-positive: 1 ; + flex-grow: 1 ; } .flex-xxl-shrink-0 { - -ms-flex-negative: 0 !important; - flex-shrink: 0 !important; + -ms-flex-negative: 0 ; + flex-shrink: 0 ; } .flex-xxl-shrink-1 { - -ms-flex-negative: 1 !important; - flex-shrink: 1 !important; + -ms-flex-negative: 1 ; + flex-shrink: 1 ; } .flex-xxl-wrap { - -ms-flex-wrap: wrap !important; - flex-wrap: wrap !important; + -ms-flex-wrap: wrap ; + flex-wrap: wrap ; } .flex-xxl-nowrap { - -ms-flex-wrap: nowrap !important; - flex-wrap: nowrap !important; + -ms-flex-wrap: nowrap ; + flex-wrap: nowrap ; } .flex-xxl-wrap-reverse { - -ms-flex-wrap: wrap-reverse !important; - flex-wrap: wrap-reverse !important; + -ms-flex-wrap: wrap-reverse ; + flex-wrap: wrap-reverse ; } .justify-content-xxl-start { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; - justify-content: flex-start !important; + -webkit-box-pack: start ; + -ms-flex-pack: start ; + justify-content: flex-start ; } .justify-content-xxl-end { - -webkit-box-pack: end !important; - -ms-flex-pack: end !important; - justify-content: flex-end !important; + -webkit-box-pack: end ; + -ms-flex-pack: end ; + justify-content: flex-end ; } .justify-content-xxl-center { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; - justify-content: center !important; + -webkit-box-pack: center ; + -ms-flex-pack: center ; + justify-content: center ; } .justify-content-xxl-between { - -webkit-box-pack: justify !important; - -ms-flex-pack: justify !important; - justify-content: space-between !important; + -webkit-box-pack: justify ; + -ms-flex-pack: justify ; + justify-content: space-between ; } .justify-content-xxl-around { - -ms-flex-pack: distribute !important; - justify-content: space-around !important; + -ms-flex-pack: distribute ; + justify-content: space-around ; } .justify-content-xxl-evenly { - -webkit-box-pack: space-evenly !important; - -ms-flex-pack: space-evenly !important; - justify-content: space-evenly !important; + -webkit-box-pack: space-evenly ; + -ms-flex-pack: space-evenly ; + justify-content: space-evenly ; } .align-items-xxl-start { - -webkit-box-align: start !important; - -ms-flex-align: start !important; - align-items: flex-start !important; + -webkit-box-align: start ; + -ms-flex-align: start ; + align-items: flex-start ; } .align-items-xxl-end { - -webkit-box-align: end !important; - -ms-flex-align: end !important; - align-items: flex-end !important; + -webkit-box-align: end ; + -ms-flex-align: end ; + align-items: flex-end ; } .align-items-xxl-center { - -webkit-box-align: center !important; - -ms-flex-align: center !important; - align-items: center !important; + -webkit-box-align: center ; + -ms-flex-align: center ; + align-items: center ; } .align-items-xxl-baseline { - -webkit-box-align: baseline !important; - -ms-flex-align: baseline !important; - align-items: baseline !important; + -webkit-box-align: baseline ; + -ms-flex-align: baseline ; + align-items: baseline ; } .align-items-xxl-stretch { - -webkit-box-align: stretch !important; - -ms-flex-align: stretch !important; - align-items: stretch !important; + -webkit-box-align: stretch ; + -ms-flex-align: stretch ; + align-items: stretch ; } .align-content-xxl-start { - -ms-flex-line-pack: start !important; - align-content: flex-start !important; + -ms-flex-line-pack: start ; + align-content: flex-start ; } .align-content-xxl-end { - -ms-flex-line-pack: end !important; - align-content: flex-end !important; + -ms-flex-line-pack: end ; + align-content: flex-end ; } .align-content-xxl-center { - -ms-flex-line-pack: center !important; - align-content: center !important; + -ms-flex-line-pack: center ; + align-content: center ; } .align-content-xxl-between { - -ms-flex-line-pack: justify !important; - align-content: space-between !important; + -ms-flex-line-pack: justify ; + align-content: space-between ; } .align-content-xxl-around { - -ms-flex-line-pack: distribute !important; - align-content: space-around !important; + -ms-flex-line-pack: distribute ; + align-content: space-around ; } .align-content-xxl-stretch { - -ms-flex-line-pack: stretch !important; - align-content: stretch !important; + -ms-flex-line-pack: stretch ; + align-content: stretch ; } .align-self-xxl-auto { - -ms-flex-item-align: auto !important; - align-self: auto !important; + -ms-flex-item-align: auto ; + align-self: auto ; } .align-self-xxl-start { - -ms-flex-item-align: start !important; - align-self: flex-start !important; + -ms-flex-item-align: start ; + align-self: flex-start ; } .align-self-xxl-end { - -ms-flex-item-align: end !important; - align-self: flex-end !important; + -ms-flex-item-align: end ; + align-self: flex-end ; } .align-self-xxl-center { - -ms-flex-item-align: center !important; - align-self: center !important; + -ms-flex-item-align: center ; + align-self: center ; } .align-self-xxl-baseline { - -ms-flex-item-align: baseline !important; - align-self: baseline !important; + -ms-flex-item-align: baseline ; + align-self: baseline ; } .align-self-xxl-stretch { - -ms-flex-item-align: stretch !important; - align-self: stretch !important; + -ms-flex-item-align: stretch ; + align-self: stretch ; } .order-xxl-first { - -webkit-box-ordinal-group: 0 !important; - -ms-flex-order: -1 !important; - order: -1 !important; + -webkit-box-ordinal-group: 0 ; + -ms-flex-order: -1 ; + order: -1 ; } .order-xxl-0 { - -webkit-box-ordinal-group: 1 !important; - -ms-flex-order: 0 !important; - order: 0 !important; + -webkit-box-ordinal-group: 1 ; + -ms-flex-order: 0 ; + order: 0 ; } .order-xxl-1 { - -webkit-box-ordinal-group: 2 !important; - -ms-flex-order: 1 !important; - order: 1 !important; + -webkit-box-ordinal-group: 2 ; + -ms-flex-order: 1 ; + order: 1 ; } .order-xxl-2 { - -webkit-box-ordinal-group: 3 !important; - -ms-flex-order: 2 !important; - order: 2 !important; + -webkit-box-ordinal-group: 3 ; + -ms-flex-order: 2 ; + order: 2 ; } .order-xxl-3 { - -webkit-box-ordinal-group: 4 !important; - -ms-flex-order: 3 !important; - order: 3 !important; + -webkit-box-ordinal-group: 4 ; + -ms-flex-order: 3 ; + order: 3 ; } .order-xxl-4 { - -webkit-box-ordinal-group: 5 !important; - -ms-flex-order: 4 !important; - order: 4 !important; + -webkit-box-ordinal-group: 5 ; + -ms-flex-order: 4 ; + order: 4 ; } .order-xxl-5 { - -webkit-box-ordinal-group: 6 !important; - -ms-flex-order: 5 !important; - order: 5 !important; + -webkit-box-ordinal-group: 6 ; + -ms-flex-order: 5 ; + order: 5 ; } .order-xxl-last { - -webkit-box-ordinal-group: 7 !important; - -ms-flex-order: 6 !important; - order: 6 !important; + -webkit-box-ordinal-group: 7 ; + -ms-flex-order: 6 ; + order: 6 ; } .m-xxl-0 { - margin: 0 !important; + margin: 0 ; } .m-xxl-1 { - margin: 0.25rem !important; + margin: 0.25rem ; } .m-xxl-2 { - margin: 0.5rem !important; + margin: 0.5rem ; } .m-xxl-3 { - margin: 1rem !important; + margin: 1rem ; } .m-xxl-4 { - margin: 1.5rem !important; + margin: 1.5rem ; } .m-xxl-5 { - margin: 3rem !important; + margin: 3rem ; } .m-xxl-auto { - margin: auto !important; + margin: auto ; } .mx-xxl-0 { - margin-right: 0 !important; - margin-left: 0 !important; + margin-right: 0 ; + margin-left: 0 ; } .mx-xxl-1 { - margin-right: 0.25rem !important; - margin-left: 0.25rem !important; + margin-right: 0.25rem ; + margin-left: 0.25rem ; } .mx-xxl-2 { - margin-right: 0.5rem !important; - margin-left: 0.5rem !important; + margin-right: 0.5rem ; + margin-left: 0.5rem ; } .mx-xxl-3 { - margin-right: 1rem !important; - margin-left: 1rem !important; + margin-right: 1rem ; + margin-left: 1rem ; } .mx-xxl-4 { - margin-right: 1.5rem !important; - margin-left: 1.5rem !important; + margin-right: 1.5rem ; + margin-left: 1.5rem ; } .mx-xxl-5 { - margin-right: 3rem !important; - margin-left: 3rem !important; + margin-right: 3rem ; + margin-left: 3rem ; } .mx-xxl-auto { - margin-right: auto !important; - margin-left: auto !important; + margin-right: auto ; + margin-left: auto ; } .my-xxl-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; + margin-top: 0 ; + margin-bottom: 0 ; } .my-xxl-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; + margin-top: 0.25rem ; + margin-bottom: 0.25rem ; } .my-xxl-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; + margin-top: 0.5rem ; + margin-bottom: 0.5rem ; } .my-xxl-3 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; + margin-top: 1rem ; + margin-bottom: 1rem ; } .my-xxl-4 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; + margin-top: 1.5rem ; + margin-bottom: 1.5rem ; } .my-xxl-5 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; + margin-top: 3rem ; + margin-bottom: 3rem ; } .my-xxl-auto { - margin-top: auto !important; - margin-bottom: auto !important; + margin-top: auto ; + margin-bottom: auto ; } .mt-xxl-0 { - margin-top: 0 !important; + margin-top: 0 ; } .mt-xxl-1 { - margin-top: 0.25rem !important; + margin-top: 0.25rem ; } .mt-xxl-2 { - margin-top: 0.5rem !important; + margin-top: 0.5rem ; } .mt-xxl-3 { - margin-top: 1rem !important; + margin-top: 1rem ; } .mt-xxl-4 { - margin-top: 1.5rem !important; + margin-top: 1.5rem ; } .mt-xxl-5 { - margin-top: 3rem !important; + margin-top: 3rem ; } .mt-xxl-auto { - margin-top: auto !important; + margin-top: auto ; } .me-xxl-0 { - margin-right: 0 !important; + margin-right: 0 ; } .me-xxl-1 { - margin-right: 0.25rem !important; + margin-right: 0.25rem ; } .me-xxl-2 { - margin-right: 0.5rem !important; + margin-right: 0.5rem ; } .me-xxl-3 { - margin-right: 1rem !important; + margin-right: 1rem ; } .me-xxl-4 { - margin-right: 1.5rem !important; + margin-right: 1.5rem ; } .me-xxl-5 { - margin-right: 3rem !important; + margin-right: 3rem ; } .me-xxl-auto { - margin-right: auto !important; + margin-right: auto ; } .mb-xxl-0 { - margin-bottom: 0 !important; + margin-bottom: 0 ; } .mb-xxl-1 { - margin-bottom: 0.25rem !important; + margin-bottom: 0.25rem ; } .mb-xxl-2 { - margin-bottom: 0.5rem !important; + margin-bottom: 0.5rem ; } .mb-xxl-3 { - margin-bottom: 1rem !important; + margin-bottom: 1rem ; } .mb-xxl-4 { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem ; } .mb-xxl-5 { - margin-bottom: 3rem !important; + margin-bottom: 3rem ; } .mb-xxl-auto { - margin-bottom: auto !important; + margin-bottom: auto ; } .ms-xxl-0 { - margin-left: 0 !important; + margin-left: 0 ; } .ms-xxl-1 { - margin-left: 0.25rem !important; + margin-left: 0.25rem ; } .ms-xxl-2 { - margin-left: 0.5rem !important; + margin-left: 0.5rem ; } .ms-xxl-3 { - margin-left: 1rem !important; + margin-left: 1rem ; } .ms-xxl-4 { - margin-left: 1.5rem !important; + margin-left: 1.5rem ; } .ms-xxl-5 { - margin-left: 3rem !important; + margin-left: 3rem ; } .ms-xxl-auto { - margin-left: auto !important; + margin-left: auto ; } .p-xxl-0 { - padding: 0 !important; + padding: 0 ; } .p-xxl-1 { - padding: 0.25rem !important; + padding: 0.25rem ; } .p-xxl-2 { - padding: 0.5rem !important; + padding: 0.5rem ; } .p-xxl-3 { - padding: 1rem !important; + padding: 1rem ; } .p-xxl-4 { - padding: 1.5rem !important; + padding: 1.5rem ; } .p-xxl-5 { - padding: 3rem !important; + padding: 3rem ; } .px-xxl-0 { - padding-right: 0 !important; - padding-left: 0 !important; + padding-right: 0 ; + padding-left: 0 ; } .px-xxl-1 { - padding-right: 0.25rem !important; - padding-left: 0.25rem !important; + padding-right: 0.25rem ; + padding-left: 0.25rem ; } .px-xxl-2 { - padding-right: 0.5rem !important; - padding-left: 0.5rem !important; + padding-right: 0.5rem ; + padding-left: 0.5rem ; } .px-xxl-3 { - padding-right: 1rem !important; - padding-left: 1rem !important; + padding-right: 1rem ; + padding-left: 1rem ; } .px-xxl-4 { - padding-right: 1.5rem !important; - padding-left: 1.5rem !important; + padding-right: 1.5rem ; + padding-left: 1.5rem ; } .px-xxl-5 { - padding-right: 3rem !important; - padding-left: 3rem !important; + padding-right: 3rem ; + padding-left: 3rem ; } .py-xxl-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; + padding-top: 0 ; + padding-bottom: 0 ; } .py-xxl-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; + padding-top: 0.25rem ; + padding-bottom: 0.25rem ; } .py-xxl-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; + padding-top: 0.5rem ; + padding-bottom: 0.5rem ; } .py-xxl-3 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding-top: 1rem ; + padding-bottom: 1rem ; } .py-xxl-4 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; + padding-top: 1.5rem ; + padding-bottom: 1.5rem ; } .py-xxl-5 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; + padding-top: 3rem ; + padding-bottom: 3rem ; } .pt-xxl-0 { - padding-top: 0 !important; + padding-top: 0 ; } .pt-xxl-1 { - padding-top: 0.25rem !important; + padding-top: 0.25rem ; } .pt-xxl-2 { - padding-top: 0.5rem !important; + padding-top: 0.5rem ; } .pt-xxl-3 { - padding-top: 1rem !important; + padding-top: 1rem ; } .pt-xxl-4 { - padding-top: 1.5rem !important; + padding-top: 1.5rem ; } .pt-xxl-5 { - padding-top: 3rem !important; + padding-top: 3rem ; } .pe-xxl-0 { - padding-right: 0 !important; + padding-right: 0 ; } .pe-xxl-1 { - padding-right: 0.25rem !important; + padding-right: 0.25rem ; } .pe-xxl-2 { - padding-right: 0.5rem !important; + padding-right: 0.5rem ; } .pe-xxl-3 { - padding-right: 1rem !important; + padding-right: 1rem ; } .pe-xxl-4 { - padding-right: 1.5rem !important; + padding-right: 1.5rem ; } .pe-xxl-5 { - padding-right: 3rem !important; + padding-right: 3rem ; } .pb-xxl-0 { - padding-bottom: 0 !important; + padding-bottom: 0 ; } .pb-xxl-1 { - padding-bottom: 0.25rem !important; + padding-bottom: 0.25rem ; } .pb-xxl-2 { - padding-bottom: 0.5rem !important; + padding-bottom: 0.5rem ; } .pb-xxl-3 { - padding-bottom: 1rem !important; + padding-bottom: 1rem ; } .pb-xxl-4 { - padding-bottom: 1.5rem !important; + padding-bottom: 1.5rem ; } .pb-xxl-5 { - padding-bottom: 3rem !important; + padding-bottom: 3rem ; } .ps-xxl-0 { - padding-left: 0 !important; + padding-left: 0 ; } .ps-xxl-1 { - padding-left: 0.25rem !important; + padding-left: 0.25rem ; } .ps-xxl-2 { - padding-left: 0.5rem !important; + padding-left: 0.5rem ; } .ps-xxl-3 { - padding-left: 1rem !important; + padding-left: 1rem ; } .ps-xxl-4 { - padding-left: 1.5rem !important; + padding-left: 1.5rem ; } .ps-xxl-5 { - padding-left: 3rem !important; + padding-left: 3rem ; } .gap-xxl-0 { - gap: 0 !important; + gap: 0 ; } .gap-xxl-1 { - gap: 0.25rem !important; + gap: 0.25rem ; } .gap-xxl-2 { - gap: 0.5rem !important; + gap: 0.5rem ; } .gap-xxl-3 { - gap: 1rem !important; + gap: 1rem ; } .gap-xxl-4 { - gap: 1.5rem !important; + gap: 1.5rem ; } .gap-xxl-5 { - gap: 3rem !important; + gap: 3rem ; } .text-xxl-start { - text-align: left !important; + text-align: left ; } .text-xxl-end { - text-align: right !important; + text-align: right ; } .text-xxl-center { - text-align: center !important; + text-align: center ; } } @media (min-width: 1200px) { .fs-1 { - font-size: 2.5rem !important; + font-size: 2.5rem ; } .fs-2 { - font-size: 2rem !important; + font-size: 2rem ; } .fs-3 { - font-size: 1.75rem !important; + font-size: 1.75rem ; } .fs-4 { - font-size: 1.5rem !important; + font-size: 1.5rem ; } } @media print { .d-print-inline { - display: inline !important; + display: inline ; } .d-print-inline-block { - display: inline-block !important; + display: inline-block ; } .d-print-block { - display: block !important; + display: block ; } .d-print-grid { - display: grid !important; + display: grid ; } .d-print-table { - display: table !important; + display: table ; } .d-print-table-row { - display: table-row !important; + display: table-row ; } .d-print-table-cell { - display: table-cell !important; + display: table-cell ; } .d-print-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; - display: flex !important; + display: -webkit-box ; + display: -ms-flexbox ; + display: flex ; } .d-print-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; - display: inline-flex !important; + display: -webkit-inline-box ; + display: -ms-inline-flexbox ; + display: inline-flex ; } .d-print-none { - display: none !important; + display: none ; } } @@ -13824,7 +13755,7 @@ span.minicolors-swatch-color { } html { - background-color: hsl(0, 0%, 100%); + background-color: var(--body-bg); } body { @@ -14129,7 +14060,7 @@ meter { padding: 0.5em; color: var(--color-primary, hsl(220, 67%, 20%)); pointer-events: all; - background-color: var(--white, hsl(0, 0%, 100%)); + background-color: var(--white, var(--body-color)); border: 1px solid var(--color-primary, hsl(220, 67%, 20%)); border-radius: 0.25rem; opacity: 0; @@ -14144,9 +14075,9 @@ meter { .back-to-top-link:active, .back-to-top-link:focus { - color: var(--white, hsl(0, 0%, 100%)); + color: var(--white, var(--body-color)); background-color: var(--color-active); - border-color: var(--white, hsl(0, 0%, 100%)); + border-color: var(--white, var(--body-color)); } .container-banner img { @@ -14156,7 +14087,7 @@ meter { .container-banner .banner-overlay { height: 70vh; - color: hsl(0, 0%, 100%); + color: var(--body-color); background-repeat: no-repeat; background-attachment: fixed; background-position: top, center; @@ -14193,7 +14124,7 @@ meter { height: 4px; margin: 1rem auto 2rem; content: ""; - background: hsl(0, 0%, 100%); + background: var(--body-color); } .container-banner .banner-overlay .overlay .text-thin .lead { @@ -14208,14 +14139,8 @@ meter { .footer { margin-top: 1em; - color: hsl(0, 0%, 100%); - background-color: var(--color-primary); - background-image: -o-linear-gradient(315deg, var(--color-primary) 0%, var(--color-active) 100%) - /* rtl: linear-gradient(135deg, var(--color-active) 0%, var(--color-primary) 100%) */ - ; - background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-active) 100%) - /* rtl: linear-gradient(135deg, var(--color-active) 0%, var(--color-primary) 100%) */ - ; + color: var(--body-color); + background: var(--color-primary); } .footer .grid-child { @@ -14255,7 +14180,7 @@ meter { .form-control { max-width: 100%; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .form-control.input-xlarge { @@ -14333,7 +14258,7 @@ td .form-control { margin: 0.5em; color: hsl(0, 0%, 0%); text-align: start; - background: hsl(0, 0%, 100%); + background: var(--body-color); border: 1px solid hsl(210, 7%, 46%); border-radius: 0.25rem; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8); @@ -14425,7 +14350,7 @@ fieldset>* { .container-header { position: relative; - z-index: 10; + z-index: 100; background: var(--header-background-image); background-size: var(--header-background-size); -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset; @@ -14435,22 +14360,22 @@ fieldset>* { @media (max-width: 991.98px) { .container-header { - position: relative !important; + position: relative ; } } .container-header .grid-child { - padding: var(--border); + padding: var(--padding-x) var(--padding-y); } .container-header nav { padding: 0; - margin-top: 0.5em; + margin-top: 0.25em; } .container-header .site-description { font-size: 1rem; - color: hsl(0, 0%, 100%); + color: var(--body-color); white-space: normal; } @@ -14486,7 +14411,7 @@ fieldset>* { justify-content: space-between; padding-bottom: 0.3em; background-color: var(--nav-bg-color); - border-width: var(--border) 0; + border-width: var(--border-width); border-top: solid var(--accent-color-primary); border-bottom: solid var(--accent-color-secondary); border-left: none; @@ -14494,10 +14419,8 @@ fieldset>* { } @media (max-width: 767.98px) { - - .container-header .container-nav .container-search, .container-header .container-nav nav { - margin-top: 1em; + margin-top: 0.4rem; } } @@ -14657,13 +14580,8 @@ li.current a { } .container-header .navbar-toggler { - color: hsl(0, 0%, 100%); + color: var(--body-color); cursor: pointer; - border: 1px solid hsl(0, 0%, 100%); -} - -.container-header .navbar-toggler .fas { - font-size: 1.5rem; } .container-header .container-search { @@ -14671,11 +14589,11 @@ li.current a { } .container-header .mod-finder { - color: hsl(0, 0%, 100%); + color: var(--body-color); } .container-header .mod-finder a { - color: hsl(0, 0%, 100%); + color: var(--body-color); } .container-header .mod-finder a:active, @@ -14688,13 +14606,13 @@ li.current a { } .container-header .mod-finder .awesomplete>ul { - background: -webkit-gradient(linear, left top, right bottom, from(hsl(0, 0%, 100%)), to(hsla(0, 0%, 100%, 0.9))); - background: -o-linear-gradient(top left, hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.9)); - background: linear-gradient(to bottom right, hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.9)); + background: -webkit-gradient(linear, left top, right bottom, from(var(--body-color)), to(hsla(0, 0%, 100%, 0.9))); + background: -o-linear-gradient(top left, var(--body-color), hsla(0, 0%, 100%, 0.9)); + background: linear-gradient(to bottom right, var(--body-color), hsla(0, 0%, 100%, 0.9)); } .icon-white { - color: hsl(0, 0%, 100%); + color: var(--body-color); } .input-group-text::before { @@ -14717,8 +14635,7 @@ li.current a { font-size: 1.1rem; line-height: 22px; color: hsl(210, 14%, 83%); - border: 2px solid var(--border); - border-radius: 50%; + border: 0; } .tbody-icon .icon-publish, @@ -14787,13 +14704,78 @@ iframe { position: relative; } +/* HERO CONTAINER */ +.hero-overlay { + position: relative; + overflow: hidden; + isolation: isolate; +} + +/* BACKGROUND IMAGE LAYER (inherits from parent hero section) */ +.hero-overlay::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + + background-position: center; + background-size: cover; + background-repeat: no-repeat; + + transform: scale(1.02); +} + +/* CENTER SOFTENING LAYER */ +.hero-overlay::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + + -webkit-backdrop-filter: blur(8px) saturate(0.9) brightness(1.12); + backdrop-filter: blur(8px) saturate(0.9) brightness(1.12); + + -webkit-mask-image: radial-gradient( + circle at 50% 45%, + rgba(0,0,0,1) 0%, + rgba(0,0,0,1) 38%, + rgba(0,0,0,0) 72% + ); + mask-image: radial-gradient( + circle at 50% 45%, + rgba(0,0,0,1) 0%, + rgba(0,0,0,1) 38%, + rgba(0,0,0,0) 72% + ); + + pointer-events: none; +} + +/* TEXT OVERLAY PANEL */ +.hero-overlay .overlay { + position: relative; + z-index: 0; + + border-top: var(--border-width) var(--border-style) var(--accent-color-primary); + border-bottom: var(--border-width) var(--border-style) var(--accent-color-secondary); + + background-color: rgba(111, 117, 123, 0.55); + background-image: linear-gradient( + 180deg, + rgba(255,255,255,0.12), + rgba(0,0,0,0.18) + ); +} + + + .container-topbar { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: var(--color-primary); } .container-topbar a { - color: hsl(0, 0%, 100%) !important; + color: var(--body-color) ; } @@ -14931,7 +14913,7 @@ iframe { padding: 1vw 2vw; margin-bottom: 1rem; color: #495057; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); border: 1px solid #b2bfcd; } @@ -14941,7 +14923,7 @@ iframe { padding: 0 0.5rem; font-weight: 700; color: #495057; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .modal .btn { @@ -14950,12 +14932,12 @@ iframe { .modal .btn-primary:not([href]), .modal .btn-success:not([href]) { - color: hsl(0, 0%, 100%); + color: var(--body-color); } .modal .btn-primary:not([href]):active, .modal .btn-success:not([href]):active { - color: hsl(0, 0%, 100%); + color: var(--body-color); } .modal-header { @@ -15200,7 +15182,7 @@ ul.tags { .items-leading .item-image { max-width: 100%; - width: 100% !important; + width: 100% ; } @supports (display: grid) { @@ -15394,7 +15376,7 @@ joomla-alert { min-height: 43px; padding: 0.25rem; color: #495057; - background: hsl(0, 0%, 100%); + background: var(--body-color); -webkit-box-shadow: -3px -2px 22px #ddd; box-shadow: -3px -2px 22px #ddd; } @@ -15436,7 +15418,7 @@ joomla-alert { font-size: 1rem; line-height: 2.45rem; color: #495057; - background: hsl(0, 0%, 100%); + background: var(--body-color); border-color: hsl(210, 11%, 71%); } @@ -15537,7 +15519,7 @@ joomla-alert { joomla-tab[view=accordion] .col-md-9, joomla-tab[view=accordion] .col-md-3 { - padding: 0.5rem 1rem !important; + padding: 0.5rem 1rem ; } #myTab { @@ -15619,16 +15601,10 @@ body { body.wrapper-fluid .site-grid { grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end]; grid-gap: 0 2em; - background-image: url(../images/teaser_bg_sm.png); - background-repeat: repeat-x; -} - -[data-bs-theme="dark"] body .site-grid { - background-image: none; } body.wrapper-fluid .grid-child { - //max-width: none; + max-width: none; } body.wrapper-fluid header>.grid-child, @@ -15637,12 +15613,9 @@ body.wrapper-fluid footer>.grid-child { padding-left: 2em; padding-top: 0; padding-bottom: 0; - //margin-left: 6em; - //margin-right: 6em; } body.wrapper-fluid header>.grid-child { - //padding:0; margin: 0; } @@ -15670,7 +15643,15 @@ body:not(.has-sidebar-right) .site-grid .container-component { @supports (display: grid) { .site-grid { display: grid; - grid-template-areas: ". banner banner banner banner ."". top-a top-a top-a top-a ."". top-b top-b top-b top-b ."". comp comp comp comp ."". side-r side-r side-r side-r ."". side-l side-l side-l side-l ."". bot-a bot-a bot-a bot-a ."". bot-b bot-b bot-b bot-b ."; + grid-template-areas: + ". banner banner banner banner ." + ". top-a top-a top-a top-a ." + ". top-b top-b top-b top-b ." + ". comp comp comp comp ." + ". side-l side-l side-l side-l ." + ". side-r side-r side-r side-r ." + ". bot-a bot-a bot-a bot-a ." + ". bot-b bot-b bot-b bot-b ."; grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end]; grid-gap: 0 1em; } @@ -15774,7 +15755,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .awesomplete>ul { - z-index: 1000 !important; + z-index: 1000 ; } .btn:focus, @@ -15820,7 +15801,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .article-info .association .btn-secondary, .cat-list-association .btn-secondary { font-weight: 700; - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: hsl(210, 7%, 46%); border-color: hsl(210, 14%, 83%); } @@ -15829,7 +15810,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .article-info .association .btn-secondary:focus, .cat-list-association .btn-secondary:active, .cat-list-association .btn-secondary:focus { - color: hsl(0, 0%, 100%); + color: var(--body-color); background-color: hsl(210, 10%, 23%); } @@ -15873,19 +15854,19 @@ body:not(.has-sidebar-right) .site-grid .container-component { .form-select[multiple], [multiple].custom-select { padding: 0; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .form-select[multiple] option, [multiple].custom-select option { padding: 0.3rem 1rem; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .form-select[multiple] option:checked, [multiple].custom-select option:checked { - color: hsl(0, 0%, 100%); - background-color: var(--color-primary) !important; + color: var(--body-color); + background-color: var(--color-primary) ; } .form-select.form-select-success, @@ -15901,7 +15882,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .form-select.custom-select-success option, .custom-select-success.custom-select option { color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .form-select.form-select-danger, @@ -15917,7 +15898,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .form-select.custom-select-danger option, .custom-select-danger.custom-select option { color: hsl(210, 11%, 15%); - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .form-select optgroup, @@ -15925,7 +15906,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .form-select option, .custom-select option { color: var(--dark); - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .accordion .card-header { @@ -15942,7 +15923,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .dropdown-menu { padding: 0.2rem 0; margin-top: 0.5rem; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); border-color: hsl(210, 14%, 89%); } @@ -15969,7 +15950,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .list-group-item { - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); } .list-unstyled .list-unstyled { @@ -16077,8 +16058,8 @@ body:not(.has-sidebar-right) .site-grid .container-component { border: 1px solid hsl(210, 14%, 89%); border-bottom: 0; border-radius: 0.25rem 0.25rem 0 0; - -webkit-box-shadow: 0 1px hsl(0, 0%, 100%) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, 1px 1px 4px hsla(0, 0%, 0%, 0.1); - box-shadow: 0 1px hsl(0, 0%, 100%) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, 1px 1px 4px hsla(0, 0%, 0%, 0.1); + -webkit-box-shadow: 0 1px var(--body-color) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, 1px 1px 4px hsla(0, 0%, 0%, 0.1); + box-shadow: 0 1px var(--body-color) inset, 0 2px 3px -3px hsla(0, 0%, 0%, 0.15), 0 -4px 0 hsla(0, 0%, 0%, 0.05) inset, 1px 1px 4px hsla(0, 0%, 0%, 0.1); } .nav.nav-tabs .nav-item { @@ -16139,7 +16120,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .nav-tabs+.tab-content { padding: 15px; - background: hsl(0, 0%, 100%); + background: var(--body-color); border: 1px solid; border-color: hsl(210, 14%, 89%); border-radius: 0 0 0.25rem 0.25rem; @@ -16182,8 +16163,8 @@ body:not(.has-sidebar-right) .site-grid .container-component { line-height: 1.5; color: hsl(210, 11%, 15%); vertical-align: middle; - background: hsl(210, 16%, 93%) url("../images/select-bg.svg") no-repeat right 1rem center; - background-image: none \9; + background: hsl(210, 16%, 93%) url("../images/select-bg.svg") no-repeat right .1rem center; + background-image: none; background-size: 116rem; border: 1px solid hsl(210, 14%, 83%); -webkit-box-shadow: none; @@ -16192,6 +16173,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { -moz-appearance: none; appearance: none; border-radius: 0.25rem; + width:100%; } .chosen-container.chosen-container-single .chosen-single abbr { @@ -16209,11 +16191,11 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .chosen-container.chosen-container-single .chosen-single div b { - background: none !important; + background: none ; } .chosen-container.chosen-container-single .chosen-drop { - background: hsl(0, 0%, 100%); + background: var(--body-color); border: 1px solid hsl(210, 14%, 83%); } @@ -16231,12 +16213,12 @@ body:not(.has-sidebar-right) .site-grid .container-component { min-height: calc(1.5em + 1.2rem + 2px); font-size: 1rem; line-height: 1.5; - background-image: hsl(0, 0%, 100%); + background-image: var(--body-color); } .chosen-container.chosen-container-multi .chosen-choices li.search-choice { padding: 5px 33px 5px 10px; - color: hsl(0, 0%, 100%); + color: var(--body-color); background: var(--primary); border: 0; -webkit-box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.1); @@ -16250,7 +16232,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { width: 20px; height: 100%; background: hsla(0, 0%, 0%, 0.2); - background-image: none !important; + background-image: none ; } .chosen-container.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { @@ -16258,7 +16240,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { top: 6px; right: 5px; font-size: 1rem; - color: hsl(0, 0%, 100%); + color: var(--body-color); content: "×"; } @@ -16268,21 +16250,21 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .chosen-container-single { - width: auto !important; + width: auto ; } .card .chosen-container.chosen-container-single { - width: 100% !important; + width: 100% ; } .card .chosen-container.chosen-container-single .chosen-single { - width: 100% !important; + width: 100% ; } .gu-mirror { - position: fixed !important; - z-index: 9999 !important; - margin: 0 !important; + position: fixed ; + z-index: 9999 ; + margin: 0 ; background-color: hsl(120, 73%, 75%); opacity: 0.8; } @@ -16425,7 +16407,7 @@ body:not(.has-sidebar-right) .site-grid .container-component { .metismenu.mod-menu .mm-collapse { position: absolute; - background-color: hsl(0, 0%, 100%); + background-color: var(--body-color); -webkit-box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.1); box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.1); } @@ -16576,15 +16558,15 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .tox { - white-space: nowrap !important; + white-space: nowrap ; } :root { --template-sidebar-bg: var(--template-bg-dark-80); - --template-sidebar-font-color: hsl(0, 0%, 100%); - --template-sidebar-link-color: hsl(0, 0%, 100%); + --template-sidebar-font-color: var(--body-color); + --template-sidebar-link-color: var(--body-color); --template-bg-light: #f0f4fb; - --template-text-light: hsl(0, 0%, 100%); + --template-text-light: var(--body-color); --template-special-color: #132f53; --template-link-color: #2a69b8; --template-link-active-color: #173a65; @@ -16608,127 +16590,127 @@ body:not(.has-sidebar-right) .site-grid .container-component { } .border-primary { - border-color: var(--primary) !important; + border-color: var(--primary) ; } .border-secondary { - border-color: var(--secondary) !important; + border-color: var(--secondary) ; } .border-success { - border-color: var(--success) !important; + border-color: var(--success) ; } .border-info { - border-color: var(--info) !important; + border-color: var(--info) ; } .border-warning { - border-color: var(--warning) !important; + border-color: var(--warning) ; } .border-danger { - border-color: var(--danger) !important; + border-color: var(--danger) ; } .border-light { - border-color: var(--light) !important; + border-color: var(--light) ; } .border-dark { - border-color: var(--dark) !important; + border-color: var(--dark) ; } .border-white { - border-color: var(--white) !important; + border-color: var(--white) ; } .text-primary { - color: var(--primary) !important; + color: var(--primary) ; } .text-secondary { - color: var(--secondary) !important; + color: var(--secondary) ; } .text-success { - color: var(--success) !important; + color: var(--success) ; } .text-info { - color: var(--info) !important; + color: var(--info) ; } .text-warning { - color: var(--warning) !important; + color: var(--warning) ; } .text-danger { - color: var(--danger) !important; + color: var(--danger) ; } .text-light { - color: var(--light) !important; + color: var(--light) ; } .text-dark { - color: var(--dark) !important; + color: var(--dark) ; } .text-black { - color: var(--black) !important; + color: var(--black) ; } .text-white { - color: var(--white) !important; + color: var(--white) ; } .text-body { - color: var(--body-color) !important; + color: var(--body-color) ; } .bg-primary { - background-color: var(--primary) !important; + background-color: var(--primary) ; } .bg-secondary { - background-color: var(--secondary) !important; + background-color: var(--secondary) ; } .bg-success { - background-color: var(--success) !important; + background-color: var(--success) ; } .bg-info { - background-color: var(--info) !important; + background-color: var(--info) ; } .bg-warning { - background-color: var(--warning) !important; + background-color: var(--warning) ; } .bg-danger { - background-color: var(--danger) !important; + background-color: var(--danger) ; } .bg-light { - background-color: var(--light) !important; + background-color: var(--light) ; } .bg-dark { - background-color: var(--dark) !important; + background-color: var(--dark) ; } .bg-black { - background-color: var(--black) !important; + background-color: var(--black) ; } .bg-white { - background-color: var(--white) !important; + background-color: var(--white) ; } .bg-body { - background-color: var(--body-bg) !important; + background-color: var(--body-bg) ; } /*! VM BASIC */ @@ -16791,10 +16773,6 @@ body:not(.has-sidebar-right) .site-grid .container-component { color: #A0A0A0; } -.text-secondary { - color: #A0A0A0 !important; -} - .form-control, .form-select { font-size: 14px @@ -16805,19 +16783,6 @@ form .form-select { border-color: #C7C7C7 } -/*! - * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) - * Copyright 2015 Aidan Feldman - * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE) - * - * Custom layout/styling modifications by Moko Consulting - * © 2025 Moko Consulting — All Rights Reserved - * Website: https://mokoconsulting.tech - * Email: hello@mokoconsulting.tech - * Phone: +1 (931) 279-6313 - */ - - /* --- TOC right-rail container (non-invasive) --- */ .container-toc-right { float: right; @@ -16915,7 +16880,7 @@ form .form-select { } .container-below-topbar { - padding: var(--border) !important; + padding: var(--padding-x) var(--padding-y); background-image: var(--container-below-topbar-bg-image); background-color: var(--container-below-topbar-bg-color); background-size: var(--container-below-topbar-bg-size); @@ -16930,8 +16895,8 @@ form .form-select { } .container-top-a { - padding-left: var(--border); - padding-right: var(--border); + padding-left: var(--padding-x); + padding-right: var(--padding-x); background-image: var(--container-top-a-bg-image); background-color: var(--container-top-a-bg-color); background-size: var(--container-top-a-bg-size); @@ -16945,8 +16910,8 @@ form .form-select { } .container-top-b { - padding-left: var(--border); - padding-right: var(--border); + padding-left: var(--padding-x); + padding-right: var(--padding-x); background-image: var(--container-top-b-bg-image); background-color: var(--container-top-b-bg-color); background-size: var(--container-top-b-bg-size); @@ -16961,8 +16926,8 @@ form .form-select { .container-sidebar-left, .container-sidebar-right { - padding-left: var(--border); - padding-right: var(--border); + padding-left: var(--padding-x); + padding-right: var(--padding-x); background-image: var(--container-sidebar-bg-image); background-color: var(--container-sidebar-bg-color); background-size: var(--container-sidebar-bg-size); @@ -16976,8 +16941,8 @@ form .form-select { } .container-bottom-a { - padding-left: var(--border); - padding-right: var(--border); + padding-left: var(--padding-x); + padding-right: var(--padding-x); background-image: var(--container-bottom-a-bg-image); background-color: var(--container-bottom-a-bg-color); background-size: var(--container-bottom-a-bg-size); @@ -16991,8 +16956,8 @@ form .form-select { } .container-bottom-b { - padding-left: var(--border); - padding-right: var(--border); + padding-left: var(--padding-x); + padding-right: var(--padding-x); background-image: var(--container-bottom-b-bg-image); background-color: var(--container-bottom-b-bg-color); background-size: var(--container-bottom-b-bg-size); @@ -17012,7 +16977,7 @@ form .form-select { display: flex; align-items: center; gap: .5rem; - padding: .5rem .75rem; + padding: calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 3) calc(var(--padding-x, 0.25rem) * 2) calc(var(--padding-y, 0.25rem) * 8); border-radius: 999px; border: none; background: var(--muted-color); @@ -17082,9 +17047,8 @@ button#mokoThemeSwitch { font-size: .875rem; } -#mokoThemeFab.debug-outline { - outline: 2px dashed var(--pink); - outline-offset: 2px; +#mokoThemeFab button { + color: var(--white); } body.site.error-page { @@ -17107,107 +17071,107 @@ body.site.error-page { border-radius: 14px; padding: 2rem; background: var(--template-bg-light, #fff); +} +.error-brand { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} - .error-brand { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - } +.error-brand .brand-logo { + background-color: invert(var(--body-bg)); + padding: var(--border-radius-sxl); + border-radius: var(--border-radius-2xl); +} - .error-brand .brand-logo { - background-color: invert(var(--body-bg)); - padding: var(--border-radius-sxl); - border-radius: var(--border-radius-2xl); - } +.error-brand .logo { + max-height: 48px; + width: auto; + display: block; +} - .error-brand .logo { - max-height: 48px; - width: auto; - display: block; - } +.error-title { + margin: 0.5rem 0 0; + font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); + font-weight: 700; +} - .error-title { - margin: 0.5rem 0 0; - font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); - font-weight: 700; - } +.error-code { + opacity: .75; + font-weight: 600; +} - .error-code { - opacity: .75; - font-weight: 600; - } +.error-actions { + display: flex; + flex-wrap: wrap; + gap: .75rem; + margin-top: 1.25rem; +} - .error-actions { - display: flex; - flex-wrap: wrap; - gap: .75rem; - margin-top: 1.25rem; - } +.moko-offline-wrap { + min-height: 100vh; + display: grid; + grid-template-rows: auto 1fr auto; +} - .moko-offline-wrap { - min-height: 100vh; - display: grid; - grid-template-rows: auto 1fr auto; - } +.moko-offline-main { + display: grid; + place-items: center; + padding: 2rem 1rem; +} - .moko-offline-main { - display: grid; - place-items: center; - padding: 2rem 1rem; - } +.moko-card { + max-width: 720px; + width: 100%; +} - .moko-card { - max-width: 720px; - width: 100%; - } +.moko-brand { + display: flex; + align-items: center; + gap: .75rem; + text-decoration: none; +} - .moko-brand { - display: flex; - align-items: center; - gap: .75rem; - text-decoration: none; - } +.moko-brand .brand-tagline { + display: block; + opacity: .75; + font-size: .875rem; + line-height: 1.2; +} - .moko-brand .brand-tagline { - display: block; - opacity: .75; - font-size: .875rem; - line-height: 1.2; - } +.theme-switcher .dropdown-item.active { + font-weight: 600; +} - .theme-switcher .dropdown-item.active { - font-weight: 600; - } +.skip-link { + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} - .skip-link { - position: absolute; - left: -9999px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; - } +.skip-l ink:focus { + position: static; + width: auto; + height: auto; + padding: .5rem 1rem; +} - .skip-l ink:focus { - position: static; - width: auto; - height: auto; - padding: .5rem 1rem; - } +.btn { + display: inline-flex; + align-items: center; + gap: .5rem; + border: 1px solid color-mix(in srgb, currentColor 20%, transparent); + border-radius: 8px; + padding: .5rem .9rem; + text-decoration: none; +} - .btn { - display: inline-flex; - align-items: center; - gap: .5rem; - border: 1px solid color-mix(in srgb, currentColor 20%, transparent); - border-radius: 8px; - padding: .5rem .9rem; - text-decoration: none; - } - - #mokoThemeFab .knob { +#mokoThemeFab .knob { position: absolute; top: 2px; left: 2px; @@ -17241,3 +17205,1122 @@ button#mokoThemeSwitch { outline: 2px dashed var(--pink); outline-offset: 2px; } + +html.component body{ + padding-top: 50px; +} + +code { + background-color: var(--gab-gray1); +} + +#view_gabble { + background-color: var(--gab-blue); + padding: 6px; + border-radius: 6px; +} + +#mod_gabble { + background-color: var(--gab-blue); + padding: 3px; + border-radius: 6px; +} + +#lists_gabble { + position: relative; + height: 100%; + border: 4px solid var(--gab-red); + background-color: var(--gab-green); + padding: 4px; + border-radius: 6px; +} + +#select_list { + margin-left: 0px; + width: 100%; + padding: 4px; + border-radius: 6px 6px 0px 0px; +} + +#options_list { + width: 100%; + padding: 4px; +} + +#frame_list { + width: 100%; + height: 484px; + padding: 4px; + border-radius: 0px 0px 6px 6px; +} + +#windows_list { + margin-left: 0px; + width: 100%; + border: 4px solid var(--gab-red); + background-color: var(--gab-green); + padding: 4px; + border-radius: 6px; +} + +#frame_window { + width: 100%; +} + +#openai_btn { + position: absolute; + right: 10px; + bottom: 10px; + visibility: hidden; + width: 34px; + height: 34px; + cursor: pointer; + border: 3px solid var(--gab-gray3); + background-color: #FFF; + border-radius: 17px; +} + +#openai_btn:hover { + width: 36px; + height: 36px; + border: 3px solid var(--gab-gray3); + border-radius: 18px; +} + +#openai_logo_anim { + position: absolute; + top: 15px; + right: 15px; + width: 35px; + height: 35px; + padding: 2px; + z-index: 1; + border-radius: 10px; +} + +.openai_logo_sm { + width: 22px; + height: 22px; + background-color: #FFF; + border: 3px solid #FFF; + border-radius: 11px; +} + +.openai_logo_md { + width: 34px; + height: 34px; + background-color: #FFF; + border: 4px solid #FFF; + border-radius: 17px; +} + +.btn_on_com { + position: absolute; + bottom: -2px; + left: -2px; + width: 12px; + height: 12px; + background-color: #448344; + border-radius: 6px; +} + +.btn_on_mod { + position: absolute; + top: 0px; + left: 0px; + width: 12px; + height: 12px; + background-color: #448344; + border-radius: 6px; +} + +.button_list { + border: none; + width:100%; + outline: none; + background-color: var(--gab-gray1); + padding: 6px; + border-radius: 6px; +} + +.button_list:hover { + background-color: var(--gab-gray2); +} + +.button_list_s { + border: none; + width: 100%; + outline: none; + cursor: pointer; + color: #FFF; + background-color: var(--gab-red); + padding: 6px; + border-radius: 6px; +} + +.window_list { + position: relative; + margin: 4px; + width: 100%; + border: none; + outline: none; + cursor: pointer; + text-align: left; + background-color: var(--gab-gray1); + padding: 6px; + border-radius: 6px; +} + +.window_list:hover { + background-color: var(--gab-gray2); +} + +.window_list_s { + position: relative; + margin: 4px; + width: 100%; + border: none; + outline: none; + cursor: pointer; + text-align: left; + color: #FFF; + background-color: var(--gab-red); + padding: 6px; + border-radius: 6px; +} + +.btn_close { + position: absolute; + right: 4px; + top: 10px; + padding-left: 1px; + width: 16px; + height: 16px; + color: #000; + font-size: 10px; + text-align: center; + background-color: var(--gab-gray2); + border-radius: 8px; +} + +.btn_close:hover { + background-color: var(--gab-gray3); +} + +.iframe_list { + width: 100%; + height: 100%; + background-color: #FFF; + border: 4px solid var(--gab-red); + border-radius: 6px; +} + +.iframe_messages { + width: 100%; + height: 100%; + background-color: #FFF; + border: 4px solid var(--gab-red); + border-radius: 6px; +} + +.input_box { + position: relative; +} + +.input_emoji { + position: absolute; + right: 48px; + top: 11px; + cursor: pointer; + color: var(--gab-gray2); +} + +.input_emoji:hover { + color: var(--gab-gray3); +} + +.emoji { + display: inline-block; + float: left; + cursor: pointer; + padding: 2px; + background-color: #FFF; +} + +.emoji:hover { + background-color: var(--gab-orange); +} + +.emojis_div { + position: absolute; + top: -92px; + right: 0px; + width: 200px; + height: 92px; + border: 4px solid var(--gab-red); + background-color: var(--gab-gray1); + border-radius: 6px; +} + +.msg-button-on { + margin-left: 5px; + width: 30px; + height: 30px; + font-size: 20px; + text-align: center; + color: #FFF; + background-color: var(--gab-orange); + border-radius: 15px; +} + +.msg-button-off { + margin-left: 5px; + width: 30px; + height: 30px; + font-size: 20px; + text-align: center; + color: #FFF; + background-color: var(--gab-gray2); + border-radius: 15px; +} + +.taba-content { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.msg-input { + padding-left: 10px; + padding-right: 26px; + width: calc(100% - 35px); + height: 30px; + border-radius: 15px; +} + +.main-windows { + position: fixed; + margin-bottom: 10px; + bottom: 0px; + right: 90px; + z-index: 901; +} + +.list-windows { + position: fixed; + bottom: 0px; + right: 0px; + width: 50px; + margin-bottom: 20px; + margin-right: 20px; + z-index: 901; +} + +.item-list { + display: inline-block; + color: #F5F5F5; + margin-top: 5px; + width: 50px; + height: 50px; + font-size: 30px; + text-align: center; + border: 3px solid var(--gab-red); + background-color: var(--gab-blue); + border-radius: 25px; +} + +.button { + opacity: 1; +} + +.button:hover { + cursor: pointer; + opacity: .6; +} + +.notifications { + position: relative; +} + +.n-notifications { + position: absolute; + bottom: -6px; + right: -2px; + width: 18px; + height: 18px; + color: #FFF; + font-size: 11px; + font-weight: bold; + text-align: center; + background-color: #a51f18; + border-radius: 9px; +} + +.m-notifications { + position: absolute; + top: -6px; + right: -2px; + width: 18px; + height: 18px; + color: #FFF; + font-size: 11px; + font-weight: bold; + text-align: center; + background-color: #a51f18; + border-radius: 9px; +} + +.window { + display: inline-block; + margin-left: 8px; + width: 280px; + height: 420px; +} + +.window-com { + margin-top: 6px; + width: 100%; + height: 480px; +} + +.window-title { + margin-left: 5px; + display: inline-block; + color: #FFF; +} + +.window-title-com { + margin-left: 5px; + display: inline-block; + color: #000; +} + +.window-icon { + display: inline-block; + color: #FFF; +} + +.window-header { + padding: 6px; + width: 100%; + height: 40px; + background-color: var(--gab-blue); + border-radius: 8px 8px 0px 0px; +} + +.window-header-com { + padding: 4px; + width: 100%; + height: 35px; + background-color: var(--gab-red); + border-radius: 8px 8px 0px 0px; +} + +.window-content { + position: relative; + display: block; + width: 100%; + height: calc(100% - 80px); + background-color: #DDD; +} + +.content-footer { + position: relative; + padding: 5px; + width: 100%; + height: 40px; + background-color: #DDD; + border-radius: 0px 0px 8px 8px; +} + +.taba-btn { + text-align: center; + display: inline-block; + margin-left: 5px; + float: right; + width: 24px; + height: 24px; + background-color: #DDD; + border-radius: 12px; +} + +.taba-hover { + cursor: pointer; + opacity: 1; +} + +.taba-hover:hover { + opacity: 0.6; +} + +.taba-self { + border: 1px solid #FFF; + background-color: #7ac143; + padding: 6px; + padding-top: 9px; + border-radius: 10px; +} + +.taba-others { + border: 1px solid #FFF; + background-color: #5091cd; + padding: 6px; + padding-top: 9px; + border-radius: 10px; +} + + + +.taba-bot { + border: 1px solid #FFF; + background-color: var(--gab-gray3); + padding: 6px; + padding-top: 9px; + border-radius: 10px; +} + +.taba-dice { + border: 1px solid #FFF; + background-color: #f44321; + padding: 6px; + border-radius: 10px; +} + +.taba-emoji { + border: 1px solid #FFF; + background-color: #5091cd; + padding: 6px; + border-radius: 10px; +} + +.taba-user { + border: 1px solid #FFF; + background-color: #FFF; + padding: 6px; + border-radius: 6px; + word-wrap: break-word; +} + +.taba-user-on { + border: 1px solid #FFF; + background-color: var(--gab-green); + padding: 6px; + border-radius: 8px; +} + +.taba-feed { + border: 1px solid #FFF; + background-color: var(--gab-blue); + padding: 6px; + border-radius: 8px; +} + +.openai_error { + border: 1px solid #FFF; + background-color: var(--gab-red); + padding: 6px; + border-radius: 8px; +} + +.taba-msgsystem { + border: 1px solid #FFF; + background-color: #AAA; + padding: 6px; + border-radius: 10px; +} + +.taba-msghead { + background-color: #f5f5f5; + padding: 4px; + padding-left: 10px; + padding-right: 6px; + border-radius: 6px 6px 0px 0px; +} + +.taba-msg { + background-color: #f5f5f5; + padding: 8px; + border-radius: 0px 8px 8px 8px; + word-wrap: break-word; +} + +nav[data-toggle=toc] .nav>li>a{ + display:block; + padding:4px 20px; + font-size:13px; + font-weight:500; + color:#767676; +} +nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{ + padding-left:19px; + color:#563d7c; + text-decoration:none; + background-color:transparent; + border-left:1px solid #563d7c; +} +nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{ + padding-left:18px; + font-weight:700; + color:#563d7c; + background-color:transparent; + border-left:2px solid #563d7c; +} +nav[data-toggle=toc] .nav-link+ul{ + display:none; + padding-bottom:10px; +} +nav[data-toggle=toc] .nav .nav>li>a{ + padding-top:1px; + padding-bottom:1px; + padding-left:30px; + font-size:12px; + font-weight:400; +} +nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{ + padding-left:29px; +} +nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{ + padding-left:28px; + font-weight:500; +} +nav[data-toggle=toc] .nav-link.active+ul{ + display:block; +} + + +/* =============================== += Choices = +=============================== */ +.choices { + position: relative; + overflow: hidden; + margin-bottom: 24px; + font-size: 16px; +} +.choices:focus { + outline: none; +} +.choices:last-child { + margin-bottom: 0; +} +.choices.is-open { + overflow: initial; +} +.choices.is-disabled .choices__inner, +.choices.is-disabled .choices__input { + background-color: #eaeaea; + cursor: not-allowed; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.choices.is-disabled .choices__item { + cursor: not-allowed; +} +.choices [hidden] { + display: none !important; +} + +.choices[data-type*=select-one] { + cursor: pointer; +} +.choices[data-type*=select-one] .choices__inner { + padding-bottom: 7.5px; +} +.choices[data-type*=select-one] .choices__input { + display: block; + width: 100%; + padding: 10px; + border-bottom: 1px solid #ddd; + background-color: #fff; + margin: 0; +} +.choices[data-type*=select-one] .choices__button { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); + padding: 0; + background-size: 8px; + position: absolute; + top: 50%; + right: 0; + margin-top: -10px; + margin-right: 25px; + height: 20px; + width: 20px; + border-radius: 10em; + opacity: 0.25; +} +.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus { + opacity: 1; +} +.choices[data-type*=select-one] .choices__button:focus { + -webkit-box-shadow: 0 0 0 2px #00bcd4; + box-shadow: 0 0 0 2px #00bcd4; +} +.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button { + display: none; +} +.choices[data-type*=select-one]::after { + content: ""; + height: 0; + width: 0; + border-style: solid; + border-color: #333 transparent transparent transparent; + border-width: 5px; + position: absolute; + right: 11.5px; + top: 50%; + margin-top: -2.5px; + pointer-events: none; +} +.choices[data-type*=select-one].is-open::after { + border-color: transparent transparent #333 transparent; + margin-top: -7.5px; +} +.choices[data-type*=select-one][dir=rtl]::after { + left: 11.5px; + right: auto; +} +.choices[data-type*=select-one][dir=rtl] .choices__button { + right: auto; + left: 0; + margin-left: 25px; + margin-right: 0; +} + +.choices[data-type*=select-multiple] .choices__inner, +.choices[data-type*=text] .choices__inner { + cursor: text; +} +.choices[data-type*=select-multiple] .choices__button, +.choices[data-type*=text] .choices__button { + position: relative; + display: inline-block; + margin-top: 0; + margin-right: -4px; + margin-bottom: 0; + margin-left: 8px; + padding-left: 16px; + border-left: 1px solid #008fa1; + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); + background-size: 8px; + width: 8px; + line-height: 1; + opacity: 0.75; + border-radius: 0; +} +.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus, +.choices[data-type*=text] .choices__button:hover, +.choices[data-type*=text] .choices__button:focus { + opacity: 1; +} + +.choices__inner { + display: inline-block; + vertical-align: top; + width: 100%; + background-color: #f9f9f9; + padding: 7.5px 7.5px 3.75px; + border: 1px solid #ddd; + border-radius: 2.5px; + font-size: 14px; + min-height: 44px; + overflow: hidden; +} +.is-focused .choices__inner, .is-open .choices__inner { + border-color: #b7b7b7; +} +.is-open .choices__inner { + border-radius: 2.5px 2.5px 0 0; +} +.is-flipped.is-open .choices__inner { + border-radius: 0 0 2.5px 2.5px; +} + +.choices__list { + margin: 0; + padding-left: 0; + list-style: none; +} + +.choices__list--single { + display: inline-block; + padding: 4px 16px 4px 4px; + width: 100%; +} +[dir=rtl] .choices__list--single { + padding-right: 4px; + padding-left: 16px; +} +.choices__list--single .choices__item { + width: 100%; +} + +.choices__list--multiple { + display: inline; +} +.choices__list--multiple .choices__item { + display: inline-block; + vertical-align: middle; + border-radius: 20px; + padding: 4px 10px; + font-size: 12px; + font-weight: 500; + margin-right: 3.75px; + margin-bottom: 3.75px; + background-color: #00bcd4; + border: 1px solid #00a5bb; + color: #fff; + word-break: break-all; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.choices__list--multiple .choices__item[data-deletable] { + padding-right: 5px; +} +[dir=rtl] .choices__list--multiple .choices__item { + margin-right: 0; + margin-left: 3.75px; +} +.choices__list--multiple .choices__item.is-highlighted { + background-color: #00a5bb; + border: 1px solid #008fa1; +} +.is-disabled .choices__list--multiple .choices__item { + background-color: #aaaaaa; + border: 1px solid #919191; +} + +.choices__list--dropdown { + visibility: hidden; + z-index: 1; + position: absolute; + width: 100%; + background-color: #fff; + border: 1px solid #ddd; + top: 100%; + margin-top: -1px; + border-bottom-left-radius: 2.5px; + border-bottom-right-radius: 2.5px; + overflow: hidden; + word-break: break-all; + will-change: visibility; +} +.choices__list--dropdown.is-active { + visibility: visible; +} +.is-open .choices__list--dropdown { + border-color: #b7b7b7; +} +.is-flipped .choices__list--dropdown { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: -1px; + border-radius: 0.25rem 0.25rem 0 0; +} +.choices__list--dropdown .choices__list { + position: relative; + max-height: 300px; + overflow: auto; + -webkit-overflow-scrolling: touch; + will-change: scroll-position; +} +.choices__list--dropdown .choices__item { + position: relative; + padding: 10px; + font-size: 14px; +} +[dir=rtl] .choices__list--dropdown .choices__item { + text-align: right; +} +@media (min-width: 640px) { + .choices__list--dropdown .choices__item--selectable { + padding-right: 100px; + } + .choices__list--dropdown .choices__item--selectable::after { + content: attr(data-select-text); + font-size: 12px; + opacity: 0; + position: absolute; + right: 10px; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + } + [dir=rtl] .choices__list--dropdown .choices__item--selectable { + text-align: right; + padding-left: 100px; + padding-right: 10px; + } + [dir=rtl] .choices__list--dropdown .choices__item--selectable::after { + right: auto; + left: 10px; + } +} +.choices__list--dropdown .choices__item--selectable.is-highlighted { + background-color: #f2f2f2; +} +.choices__list--dropdown .choices__item--selectable.is-highlighted::after { + opacity: 0.5; +} + +.choices__item { + cursor: default; +} + +.choices__item--selectable { + cursor: pointer; +} + +.choices__item--disabled { + cursor: not-allowed; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0.5; +} + +.choices__heading { + font-weight: 600; + font-size: 12px; + padding: 10px; + border-bottom: 1px solid #f7f7f7; + color: gray; +} + +.choices__button { + text-indent: -9999px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; +} +.choices__button:focus { + outline: none; +} + +.choices__input { + display: inline-block; + vertical-align: baseline; + background-color: #f9f9f9; + font-size: 14px; + margin-bottom: 5px; + border: 0; + border-radius: 0; + max-width: 100%; + padding: 4px 0 4px 2px; +} +.choices__input:focus { + outline: 0; +} +[dir=rtl] .choices__input { + padding-right: 2px; + padding-left: 0; +} + +.choices__placeholder { + opacity: 0.5; +} + +/* ===== End of Choices ====== */ +.choices { + border: 1px solid hsl(210, 14%, 83%); + border-radius: 0.25rem; +} +.choices.is-focused { + border-color: #8894aa; + -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); + box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); +} + +.choices__inner { + padding: 0.4rem 1rem; + margin-bottom: 0; + font-size: 1rem; + border: none; + border-radius: 0; +} + +.choices__input { + padding: 0; + margin-bottom: 0; + font-size: 1rem; + background-color: transparent; +} +.choices__input::-webkit-input-placeholder { + color: hsl(210, 9%, 31%); + opacity: 1; +} +.choices__input::-moz-placeholder { + color: hsl(210, 9%, 31%); + opacity: 1; +} +.choices__input:-ms-input-placeholder { + color: hsl(210, 9%, 31%); + opacity: 1; +} +.choices__input::-ms-input-placeholder { + color: hsl(210, 9%, 31%); + opacity: 1; +} +.choices__input::placeholder { + color: hsl(210, 9%, 31%); + opacity: 1; +} + +.choices__list--dropdown { + z-index: 1060; +} + +.choices__list--multiple .choices__item { + position: relative; + margin: 2px; + background-color: var(--color-primary); + -webkit-margin-end: 2px; + margin-inline-end: 2px; + border: 0; + border-radius: 0.25rem; +} +.choices__list--multiple .choices__item.is-highlighted { + background-color: var(--color-primary); + opacity: 0.9; +} + +.choices .choices__list--dropdown .choices__item { + -webkit-padding-end: 10px; + padding-inline-end: 10px; +} +.choices .choices__list--dropdown .choices__item--selectable::after { + display: none; +} + +.choices__button_joomla { + position: relative; + padding: 0 10px; + color: inherit; + text-indent: -9999px; + cursor: pointer; + background: none; + border: 0; + opacity: 0.5; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.choices__button_joomla::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + text-align: center; + text-indent: 0; + content: "×"; +} +.choices__button_joomla:hover, .choices__button_joomla:focus { + opacity: 1; +} +.choices__button_joomla:focus { + outline: none; +} + +.choices[data-type*=select-one] .choices__inner, +.choices[data-type*=select-multiple] .choices__inner { + -webkit-padding-end: 3rem; + padding-inline-end: 3rem; + cursor: pointer; + background: url("../../../images/select-bg.svg") no-repeat 100%/116rem; + background-color: hsl(210, 16%, 93%); +} +[dir=rtl] .choices[data-type*=select-one] .choices__inner, +[dir=rtl] .choices[data-type*=select-multiple] .choices__inner { + background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem; + background-color: hsl(210, 16%, 93%); +} + +.choices[data-type*=select-one] .choices__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.choices[data-type*=select-one] .choices__button_joomla { + position: absolute; + top: 50%; + inset-inline-end: 0; + width: 20px; + height: 20px; + padding: 0; + -webkit-margin-before: -10px; + margin-block-start: -10px; + -webkit-margin-end: 50px; + margin-inline-end: 50px; + border-radius: 10em; + opacity: 0.5; +} +.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus { + opacity: 1; +} +.choices[data-type*=select-one] .choices__button_joomla:focus { + -webkit-box-shadow: 0 0 0 2px #00bcd4; + box-shadow: 0 0 0 2px #00bcd4; +} +.choices[data-type*=select-one]::after { + display: none; +} + +.choices[data-type*=select-multiple] .choices__input, +.choices[data-type*=text] .choices__input { + padding: 0.2rem 0; +} + +.choices__heading { + font-size: 1.2rem; +} + + +/* Base renderer for Joomla icon-* using Font Awesome Free */ +[class^="icon-"]::before, +[class*=" icon-"]::before { + --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free")); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: var(--fa-display, inline-block); + font-family: var(--_fa-family); + font-feature-settings: normal; + font-style: normal; + font-synthesis: none; + font-variant: normal; + font-weight: var(--fa-style, 900); + line-height: 1; + text-align: center; + text-rendering: auto; + width: var(--fa-width, 1.25em); +} + +/* Ensure the icon container can render */ +[class^="icon-"], +[class*=" icon-"] { + display: inline-flex; + align-items: center; + justify-content: center; +} + +/* Icon mappings */ +.icon-menu::before { content: "\f0c9"; } /* bars */ +.icon-search::before { content: "\f002"; } +.icon-user::before { content: "\f007"; } +.icon-edit::before { content: "\f044"; } +.icon-save::before { content: "\f0c7"; } +.icon-trash::before { content: "\f1f8"; } +.icon-cancel::before { content: "\f00d"; } +.icon-check::before { content: "\f00c"; } +.icon-plus::before { content: "\f067"; } +.icon-minus::before { content: "\f068"; } diff --git a/src/media/js/template.js b/src/media/js/template.js index 950e662..0d0639f 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -11,7 +11,7 @@ VERSION: 03.05.00 BRIEF: Core JavaScript utilities and behaviors for Moko-Cassiopeia template */ - +!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1 + + This file is part of a Moko Consulting project. + + SPDX-License-Identifier: GPL-3.0-or-later + + This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/ . + + # FILE INFORMATION + DEFGROUP: Joomla.Template.Site + INGROUP: Moko-Cassiopeia + REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia + PATH: ./media/templates/site/moko-cassiopeia/js/user.js + VERSION: 03.00.00 + BRIEF: JavaScript for handling user-specific interactions in Moko-Cassiopeia template + */ diff --git a/src/media/vendor/afeld/bootstrap-toc.min.css b/src/media/vendor/afeld/bootstrap-toc.min.css deleted file mode 100644 index 3c62107..0000000 --- a/src/media/vendor/afeld/bootstrap-toc.min.css +++ /dev/null @@ -1,4 +0,0 @@ -/*! - * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) - * Copyright 2015 Aidan Feldman - * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav-link.active,nav[data-toggle=toc] .nav-link.active:focus,nav[data-toggle=toc] .nav-link.active:hover{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav-link+ul{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>li>.active,nav[data-toggle=toc] .nav .nav>li>.active:focus,nav[data-toggle=toc] .nav .nav>li>.active:hover{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav-link.active+ul{display:block} \ No newline at end of file diff --git a/src/media/vendor/afeld/bootstrap-toc.min.js b/src/media/vendor/afeld/bootstrap-toc.min.js deleted file mode 100644 index 7f76b1c..0000000 --- a/src/media/vendor/afeld/bootstrap-toc.min.js +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * Bootstrap Table of Contents v1.0.1 (http://afeld.github.io/bootstrap-toc/) - * Copyright 2015 Aidan Feldman - * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ -!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1 - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: Moko-Cassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css - VERSION: 03.00.00 - BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia - */ - -/* =============================== -= Choices = -=============================== */ -.choices { - position: relative; - overflow: hidden; - margin-bottom: 24px; - font-size: 16px; -} -.choices:focus { - outline: none; -} -.choices:last-child { - margin-bottom: 0; -} -.choices.is-open { - overflow: initial; -} -.choices.is-disabled .choices__inner, -.choices.is-disabled .choices__input { - background-color: #eaeaea; - cursor: not-allowed; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.choices.is-disabled .choices__item { - cursor: not-allowed; -} -.choices [hidden] { - display: none !important; -} - -.choices[data-type*=select-one] { - cursor: pointer; -} -.choices[data-type*=select-one] .choices__inner { - padding-bottom: 7.5px; -} -.choices[data-type*=select-one] .choices__input { - display: block; - width: 100%; - padding: 10px; - border-bottom: 1px solid #ddd; - background-color: #fff; - margin: 0; -} -.choices[data-type*=select-one] .choices__button { - background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); - padding: 0; - background-size: 8px; - position: absolute; - top: 50%; - right: 0; - margin-top: -10px; - margin-right: 25px; - height: 20px; - width: 20px; - border-radius: 10em; - opacity: 0.25; -} -.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus { - opacity: 1; -} -.choices[data-type*=select-one] .choices__button:focus { - -webkit-box-shadow: 0 0 0 2px #00bcd4; - box-shadow: 0 0 0 2px #00bcd4; -} -.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button { - display: none; -} -.choices[data-type*=select-one]::after { - content: ""; - height: 0; - width: 0; - border-style: solid; - border-color: #333 transparent transparent transparent; - border-width: 5px; - position: absolute; - right: 11.5px; - top: 50%; - margin-top: -2.5px; - pointer-events: none; -} -.choices[data-type*=select-one].is-open::after { - border-color: transparent transparent #333 transparent; - margin-top: -7.5px; -} -.choices[data-type*=select-one][dir=rtl]::after { - left: 11.5px; - right: auto; -} -.choices[data-type*=select-one][dir=rtl] .choices__button { - right: auto; - left: 0; - margin-left: 25px; - margin-right: 0; -} - -.choices[data-type*=select-multiple] .choices__inner, -.choices[data-type*=text] .choices__inner { - cursor: text; -} -.choices[data-type*=select-multiple] .choices__button, -.choices[data-type*=text] .choices__button { - position: relative; - display: inline-block; - margin-top: 0; - margin-right: -4px; - margin-bottom: 0; - margin-left: 8px; - padding-left: 16px; - border-left: 1px solid #008fa1; - background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); - background-size: 8px; - width: 8px; - line-height: 1; - opacity: 0.75; - border-radius: 0; -} -.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus, -.choices[data-type*=text] .choices__button:hover, -.choices[data-type*=text] .choices__button:focus { - opacity: 1; -} - -.choices__inner { - display: inline-block; - vertical-align: top; - width: 100%; - background-color: #f9f9f9; - padding: 7.5px 7.5px 3.75px; - border: 1px solid #ddd; - border-radius: 2.5px; - font-size: 14px; - min-height: 44px; - overflow: hidden; -} -.is-focused .choices__inner, .is-open .choices__inner { - border-color: #b7b7b7; -} -.is-open .choices__inner { - border-radius: 2.5px 2.5px 0 0; -} -.is-flipped.is-open .choices__inner { - border-radius: 0 0 2.5px 2.5px; -} - -.choices__list { - margin: 0; - padding-left: 0; - list-style: none; -} - -.choices__list--single { - display: inline-block; - padding: 4px 16px 4px 4px; - width: 100%; -} -[dir=rtl] .choices__list--single { - padding-right: 4px; - padding-left: 16px; -} -.choices__list--single .choices__item { - width: 100%; -} - -.choices__list--multiple { - display: inline; -} -.choices__list--multiple .choices__item { - display: inline-block; - vertical-align: middle; - border-radius: 20px; - padding: 4px 10px; - font-size: 12px; - font-weight: 500; - margin-right: 3.75px; - margin-bottom: 3.75px; - background-color: #00bcd4; - border: 1px solid #00a5bb; - color: #fff; - word-break: break-all; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.choices__list--multiple .choices__item[data-deletable] { - padding-right: 5px; -} -[dir=rtl] .choices__list--multiple .choices__item { - margin-right: 0; - margin-left: 3.75px; -} -.choices__list--multiple .choices__item.is-highlighted { - background-color: #00a5bb; - border: 1px solid #008fa1; -} -.is-disabled .choices__list--multiple .choices__item { - background-color: #aaaaaa; - border: 1px solid #919191; -} - -.choices__list--dropdown { - visibility: hidden; - z-index: 1; - position: absolute; - width: 100%; - background-color: #fff; - border: 1px solid #ddd; - top: 100%; - margin-top: -1px; - border-bottom-left-radius: 2.5px; - border-bottom-right-radius: 2.5px; - overflow: hidden; - word-break: break-all; - will-change: visibility; -} -.choices__list--dropdown.is-active { - visibility: visible; -} -.is-open .choices__list--dropdown { - border-color: #b7b7b7; -} -.is-flipped .choices__list--dropdown { - top: auto; - bottom: 100%; - margin-top: 0; - margin-bottom: -1px; - border-radius: 0.25rem 0.25rem 0 0; -} -.choices__list--dropdown .choices__list { - position: relative; - max-height: 300px; - overflow: auto; - -webkit-overflow-scrolling: touch; - will-change: scroll-position; -} -.choices__list--dropdown .choices__item { - position: relative; - padding: 10px; - font-size: 14px; -} -[dir=rtl] .choices__list--dropdown .choices__item { - text-align: right; -} -@media (min-width: 640px) { - .choices__list--dropdown .choices__item--selectable { - padding-right: 100px; - } - .choices__list--dropdown .choices__item--selectable::after { - content: attr(data-select-text); - font-size: 12px; - opacity: 0; - position: absolute; - right: 10px; - top: 50%; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - } - [dir=rtl] .choices__list--dropdown .choices__item--selectable { - text-align: right; - padding-left: 100px; - padding-right: 10px; - } - [dir=rtl] .choices__list--dropdown .choices__item--selectable::after { - right: auto; - left: 10px; - } -} -.choices__list--dropdown .choices__item--selectable.is-highlighted { - background-color: #f2f2f2; -} -.choices__list--dropdown .choices__item--selectable.is-highlighted::after { - opacity: 0.5; -} - -.choices__item { - cursor: default; -} - -.choices__item--selectable { - cursor: pointer; -} - -.choices__item--disabled { - cursor: not-allowed; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0.5; -} - -.choices__heading { - font-weight: 600; - font-size: 12px; - padding: 10px; - border-bottom: 1px solid #f7f7f7; - color: gray; -} - -.choices__button { - text-indent: -9999px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - cursor: pointer; -} -.choices__button:focus { - outline: none; -} - -.choices__input { - display: inline-block; - vertical-align: baseline; - background-color: #f9f9f9; - font-size: 14px; - margin-bottom: 5px; - border: 0; - border-radius: 0; - max-width: 100%; - padding: 4px 0 4px 2px; -} -.choices__input:focus { - outline: 0; -} -[dir=rtl] .choices__input { - padding-right: 2px; - padding-left: 0; -} - -.choices__placeholder { - opacity: 0.5; -} - -/* ===== End of Choices ====== */ -.choices { - border: 1px solid hsl(210, 14%, 83%); - border-radius: 0.25rem; -} -.choices.is-focused { - border-color: #8894aa; - -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); - box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25); -} - -.choices__inner { - padding: 0.4rem 1rem; - margin-bottom: 0; - font-size: 1rem; - border: none; - border-radius: 0; -} - -.choices__input { - padding: 0; - margin-bottom: 0; - font-size: 1rem; - background-color: transparent; -} -.choices__input::-webkit-input-placeholder { - color: hsl(210, 9%, 31%); - opacity: 1; -} -.choices__input::-moz-placeholder { - color: hsl(210, 9%, 31%); - opacity: 1; -} -.choices__input:-ms-input-placeholder { - color: hsl(210, 9%, 31%); - opacity: 1; -} -.choices__input::-ms-input-placeholder { - color: hsl(210, 9%, 31%); - opacity: 1; -} -.choices__input::placeholder { - color: hsl(210, 9%, 31%); - opacity: 1; -} - -.choices__list--dropdown { - z-index: 1060; -} - -.choices__list--multiple .choices__item { - position: relative; - margin: 2px; - background-color: var(--color-primary); - -webkit-margin-end: 2px; - margin-inline-end: 2px; - border: 0; - border-radius: 0.25rem; -} -.choices__list--multiple .choices__item.is-highlighted { - background-color: var(--color-primary); - opacity: 0.9; -} - -.choices .choices__list--dropdown .choices__item { - -webkit-padding-end: 10px; - padding-inline-end: 10px; -} -.choices .choices__list--dropdown .choices__item--selectable::after { - display: none; -} - -.choices__button_joomla { - position: relative; - padding: 0 10px; - color: inherit; - text-indent: -9999px; - cursor: pointer; - background: none; - border: 0; - opacity: 0.5; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -.choices__button_joomla::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - text-align: center; - text-indent: 0; - content: "×"; -} -.choices__button_joomla:hover, .choices__button_joomla:focus { - opacity: 1; -} -.choices__button_joomla:focus { - outline: none; -} - -.choices[data-type*=select-one] .choices__inner, -.choices[data-type*=select-multiple] .choices__inner { - -webkit-padding-end: 3rem; - padding-inline-end: 3rem; - cursor: pointer; - background: url("../../../images/select-bg.svg") no-repeat 100%/116rem; - background-color: hsl(210, 16%, 93%); -} -[dir=rtl] .choices[data-type*=select-one] .choices__inner, -[dir=rtl] .choices[data-type*=select-multiple] .choices__inner { - background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem; - background-color: hsl(210, 16%, 93%); -} - -.choices[data-type*=select-one] .choices__item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} -.choices[data-type*=select-one] .choices__button_joomla { - position: absolute; - top: 50%; - inset-inline-end: 0; - width: 20px; - height: 20px; - padding: 0; - -webkit-margin-before: -10px; - margin-block-start: -10px; - -webkit-margin-end: 50px; - margin-inline-end: 50px; - border-radius: 10em; - opacity: 0.5; -} -.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus { - opacity: 1; -} -.choices[data-type*=select-one] .choices__button_joomla:focus { - -webkit-box-shadow: 0 0 0 2px #00bcd4; - box-shadow: 0 0 0 2px #00bcd4; -} -.choices[data-type*=select-one]::after { - display: none; -} - -.choices[data-type*=select-multiple] .choices__input, -.choices[data-type*=text] .choices__input { - padding: 0.2rem 0; -} - -.choices__heading { - font-size: 1.2rem; -} diff --git a/src/media/vendor/choicesjs/index.html b/src/media/vendor/choicesjs/index.html deleted file mode 100644 index 8aec059..0000000 --- a/src/media/vendor/choicesjs/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - Redirecting… - - - - - - - - - - - - - - - - - - - -
    Redirecting to the site root… If you are not redirected, click here.
    - - diff --git a/src/media/vendor/joomla-custom-elements/index.html b/src/media/vendor/joomla-custom-elements/index.html deleted file mode 100644 index 8aec059..0000000 --- a/src/media/vendor/joomla-custom-elements/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - Redirecting… - - - - - - - - - - - - - - - - - - - -
    Redirecting to the site root… If you are not redirected, click here.
    - - diff --git a/src/media/vendor/joomla-custom-elements/joomla-alert.css b/src/media/vendor/joomla-custom-elements/joomla-alert.css deleted file mode 100644 index 00871c9..0000000 --- a/src/media/vendor/joomla-custom-elements/joomla-alert.css +++ /dev/null @@ -1,161 +0,0 @@ -@charset "UTF-8"; -/* Copyright (C) 2025 Moko Consulting - - This file is part of a Moko Consulting project. - - SPDX-License-Identifier: GPL-3.0-or-later - - # FILE INFORMATION - DEFGROUP: Joomla.Template.Site - INGROUP: Moko-Cassiopeia - PATH: ./media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css - VERSION: 03.00.00 - BRIEF: Vendor stylesheet for Choices.js select and input enhancements in Moko-Cassiopeia - */ - -@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css"; -#system-message-container:empty { - display: none; - margin-top: 0; -} - -#system-message-container joomla-alert { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - min-width: 16rem; - padding: 0; - margin-bottom: 0; - color: var(--gray-dark); - background-color: hsl(0, 0%, 100%); - border: 1px solid var(--alert-accent-color, transparent); - border-radius: 0.25rem; - -webkit-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; -} -#system-message-container joomla-alert + * { - margin-top: 1rem; -} -#system-message-container joomla-alert .alert-heading { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-line-pack: center; - align-content: center; - padding: 0.8rem; - color: var(--alert-heading-text); - background: var(--alert-accent-color, transparent); -} -#system-message-container joomla-alert .alert-heading .message::before, -#system-message-container joomla-alert .alert-heading .success::before { - display: inline-block; - width: 1em; - height: 1em; - content: ""; - background-image: url('data:image/svg+xml;utf8,'); - background-size: 100%; -} -#system-message-container joomla-alert .alert-heading .notice::before, -#system-message-container joomla-alert .alert-heading .info::before { - display: inline-block; - width: 1em; - height: 1em; - content: ""; - background-image: url('data:image/svg+xml;utf8,'); - background-size: 100%; -} -#system-message-container joomla-alert .alert-heading .warning::before { - display: inline-block; - width: 1em; - height: 1em; - content: ""; - background-image: url('data:image/svg+xml;utf8,'); - background-size: 100%; -} -#system-message-container joomla-alert .alert-heading .error::before, -#system-message-container joomla-alert .alert-heading .danger::before { - display: inline-block; - width: 1em; - height: 1em; - content: ""; - background-image: url('data:image/svg+xml;utf8,'); - background-size: 100%; -} -#system-message-container joomla-alert .alert-wrapper { - width: 100%; -} -#system-message-container joomla-alert .alert-link { - color: var(--success, inherit); -} -#system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] { - --alert-accent-color: var(--success); - --alert-heading-text: hsla(0, 0%, 100%, .95); - --alert-close-button: var(--success); - background-color: hsl(0, 0%, 100%); -} -#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] { - --alert-accent-color: var(--info); - --alert-heading-text: hsla(0, 0%, 100%, .95); - --alert-close-button: var(--info); - background-color: hsl(0, 0%, 100%); -} -#system-message-container joomla-alert[type=warning] { - --alert-accent-color: var(--warning); - --alert-heading-text: hsla(0, 0%, 100%, .95); - --alert-close-button: var(--warning); - background-color: hsl(0, 0%, 100%); -} -#system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] { - --alert-accent-color: var(--danger); - --alert-heading-text: hsla(0, 0%, 100%, .95); - --alert-close-button: var(--danger); - background-color: hsl(0, 0%, 100%); -} -#system-message-container joomla-alert .joomla-alert--close, -#system-message-container joomla-alert .joomla-alert-button--close { - position: absolute; - top: 0; - right: 0; - padding: 0.2rem 0.8rem; - font-size: 2rem; - color: var(--alert-close-button); - background: none; - border: 0; - opacity: 1; -} -#system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus, -#system-message-container joomla-alert .joomla-alert-button--close:hover, -#system-message-container joomla-alert .joomla-alert-button--close:focus { - text-decoration: none; - cursor: pointer; - opacity: 0.75; -} -[dir=rtl] #system-message-container joomla-alert .joomla-alert--close, -[dir=rtl] #system-message-container joomla-alert .joomla-alert-button--close { - right: auto; - left: 0; - padding: 0.2rem 0.6rem; -} -#system-message-container joomla-alert div { - font-size: 1rem; -} -#system-message-container joomla-alert div .alert-message { - padding: 0.3rem 2rem 0.3rem 0.3rem; - margin: 0.5rem; -} -[dir=rtl] #system-message-container joomla-alert div .alert-message { - padding: 0.3rem 0.3rem 0.3rem 2rem; -} -#system-message-container joomla-alert div .alert-message:not(:first-of-type) { - border-top: 1px solid var(--alert-accent-color); -} diff --git a/src/templates/component.php b/src/templates/component.php index b990d6d..4669a8e 100644 --- a/src/templates/component.php +++ b/src/templates/component.php @@ -10,77 +10,213 @@ INGROUP: Moko-Cassiopeia REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia PATH: ./templates/moko-cassiopeia/component.php - VERSION: 03.05.00 - BRIEF: Minimal component-only template file for Moko-Cassiopeia + VERSION: 03.06.00 + BRIEF: Main template index file for Moko-Cassiopeia rendering site layout */ + defined('_JEXEC') or die; use Joomla\CMS\Factory; use Joomla\CMS\HTML\HTMLHelper; +use Joomla\CMS\Language\Text; +use Joomla\CMS\Uri\Uri; +use Joomla\CMS\Component\ComponentHelper; /** @var Joomla\CMS\Document\HtmlDocument $this */ -$app = Factory::getApplication(); -$wa = $this->getWebAssetManager(); +$app = Factory::getApplication(); +$input = $app->getInput(); +$document = $app->getDocument(); +$wa = $document->getWebAssetManager(); -// Color Theme -$paramsColorName = $this->params->get('colorName', 'colors_standard'); -$assetColorName = 'theme.' . $paramsColorName; -$wa->registerAndUseStyle($assetColorName, 'media/templates/site/moko-cassiopeia/css/global/' . $paramsColorName . '.css'); +// Template params +$params_LightColorName = (string) $this->params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom -// Use a font scheme if set in the template style options -$paramsFontScheme = $this->params->get('useFontScheme', false); -$fontStyles = ''; +$params_DarkColorName = (string) $this->params->get('colorDarkName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom -if ($paramsFontScheme) { - if (stripos($paramsFontScheme, 'https://') === 0) { +$params_googletagmanager = $this->params->get('googletagmanager', false); +$params_googletagmanagerid = $this->params->get('googletagmanagerid', null); +$params_googleanalytics = $this->params->get('googleanalytics', false); +$params_googleanalyticsid = $this->params->get('googleanalyticsid', null); +$params_custom_head_start = $this->params->get('custom_head_start', null); +$params_custom_head_end = $this->params->get('custom_head_end', null); +$params_developmentmode = $this->params->get('developmentmode', false); + +// Bootstrap behaviors (assets handled via WAM) +HTMLHelper::_('bootstrap.framework'); +HTMLHelper::_('bootstrap.alert'); +HTMLHelper::_('bootstrap.button'); +HTMLHelper::_('bootstrap.carousel'); +HTMLHelper::_('bootstrap.collapse'); +HTMLHelper::_('bootstrap.dropdown'); +HTMLHelper::_('bootstrap.modal'); +HTMLHelper::_('bootstrap.offcanvas'); +HTMLHelper::_('bootstrap.popover'); +HTMLHelper::_('bootstrap.scrollspy'); +HTMLHelper::_('bootstrap.tab'); +HTMLHelper::_('bootstrap.tooltip'); +HTMLHelper::_('bootstrap.toast'); + +// Detecting Active Variables +$option = $input->getCmd('option', ''); +$view = $input->getCmd('view', ''); +$layout = $input->getCmd('layout', ''); +$task = $input->getCmd('task', ''); +$itemid = $input->getCmd('Itemid', ''); +$sitenameR = $app->get('sitename'); // raw for title composition +$sitename = htmlspecialchars($sitenameR, ENT_QUOTES, 'UTF-8'); +$menu = $app->getMenu()->getActive(); +$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : ''; + +// Respect “Site Name in Page Titles” (0:none, 1:before, 2:after) +$mode = (int) $app->get('sitename_pagetitles', 0); +$pageTitle = trim($this->getTitle()); +$final = $pageTitle !== '' + ? ($mode === 1 ? $sitenameR . ' - ' . $pageTitle + : ($mode === 2 ? $pageTitle . ' - ' . $sitenameR : $pageTitle)) + : $sitenameR; +$this->setTitle($final); + +// Template/Media path +$templatePath = 'media/templates/site/moko-cassiopeia'; + +// Core template CSS +$wa->useStyle('template.base'); // css/template.css +$wa->useStyle('template.vendor.social-media-demo'); // css/user.css + +// Optional vendor CSS +$wa->useStyle('vendor.bootstrap-toc'); + +// Optional demo/showcase CSS (available for use, not loaded by default) +// To use: Add 'template.global.social-media-demo' to your article/module +// $wa->useStyle('template.global.social-media-demo'); + +// Color theme (light + optional dark) +$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName)); +$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName)); +$lightKey = 'template.light.' . $colorLightKey; +$darkKey = 'template.dark.' . $colorDarkKey; +try { + $wa->useStyle('template.light.colors_standard'); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css'); +} +try { + $wa->useStyle('template.dark.colors_standard'); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css'); +} +try { + $wa->useStyle($lightKey); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css'); +} +try { + $wa->useStyle($darkKey); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css'); +} + +// Scripts +$wa->useScript('template.js'); +$wa->useScript('theme-init.js'); +$wa->useScript('vendor.bootstrap-toc.js'); + +/** + * VirtueMart detection: + * - Component must exist and be enabled + */ +$isVirtueMartActive = ComponentHelper::isEnabled('com_virtuemart', true); + +if ($isVirtueMartActive) { + /** + * Load a VirtueMart-specific stylesheet defined in your template manifest. + * This assumes you defined an asset named "template.virtuemart". + */ + $wa->useStyle('vendor.vm'); +} + +// Font scheme (external or local) + CSS custom properties +$params_FontScheme = $this->params->get('useFontScheme', false); +$fontStyles = ''; + +if ($params_FontScheme) { + if (stripos($params_FontScheme, 'https://') === 0) { $this->getPreloadManager()->preconnect('https://fonts.googleapis.com/', ['crossorigin' => 'anonymous']); $this->getPreloadManager()->preconnect('https://fonts.gstatic.com/', ['crossorigin' => 'anonymous']); - $this->getPreloadManager()->preload($paramsFontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, [], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'', 'crossorigin' => 'anonymous']); + $this->getPreloadManager()->preload($params_FontScheme, ['as' => 'style', 'crossorigin' => 'anonymous']); + $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, [], [ + 'media' => 'print', + 'rel' => 'lazy-stylesheet', + 'onload' => 'this.media=\'all\'', + 'crossorigin' => 'anonymous' + ]); - if (preg_match_all('/family=([^?:]*):/i', $paramsFontScheme, $matches) > 0) { - $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif; - --font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif; - --font-weight-normal: 400; - --font-weight-headings: 700;'; + if (preg_match_all('/family=([^?:]*):/i', $params_FontScheme, $matches) > 0) { + $fontStyles = '--font-family-body: "' . str_replace('+', ' ', $matches[1][0]) . '", sans-serif;' . "\n"; + $fontStyles .= '--font-family-headings: "' . str_replace('+', ' ', isset($matches[1][1]) ? $matches[1][1] : $matches[1][0]) . '", sans-serif;' . "\n"; + $fontStyles .= '--font-weight-normal: 400;' . "\n"; + $fontStyles .= '--font-weight-headings: 700;'; } } else { - $wa->registerAndUseStyle('fontscheme.current', $paramsFontScheme, ['version' => 'auto'], ['media' => 'print', 'rel' => 'lazy-stylesheet', 'onload' => 'this.media=\'all\'']); - $this->getPreloadManager()->preload($wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), ['as' => 'style']); + $wa->registerAndUseStyle('fontscheme.current', $params_FontScheme, ['version' => 'auto'], [ + 'media' => 'print', + 'rel' => 'lazy-stylesheet', + 'onload' => 'this.media=\'all\'' + ]); + $this->getPreloadManager()->preload( + $wa->getAsset('style', 'fontscheme.current')->getUri() . '?' . $this->getMediaVersion(), + ['as' => 'style'] + ); } } -// Enable assets -$wa->usePreset('template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')) - ->useStyle('template.active.language') - ->useStyle('template.user') - ->useScript('template.user') - ->addInlineStyle(":root { - --hue: 214; - --template-bg-light: #f0f4fb; - --template-text-dark: #495057; - --template-text-light: #ffffff; - --template-link-color: #2a69b8; - --template-special-color: #001B4C; - $fontStyles - }"); +// Meta +$this->setMetaData('viewport', 'width=device-width, initial-scale=1'); +if ($this->params->get('faKitCode')) { + $faKit = "https://kit.fontawesome.com/" . $this->params->get('faKitCode') . ".js"; + HTMLHelper::_('script', $faKit, ['crossorigin' => 'anonymous']); +} else { + try { + if($params_developmentmode){ + $wa->useStyle('vendor.fa7free.all'); + $wa->useStyle('vendor.fa7free.brands'); + $wa->useStyle('vendor.fa7free.fontawesome'); + $wa->useStyle('vendor.fa7free.regular'); + $wa->useStyle('vendor.fa7free.solid'); + } else { + $wa->useStyle('vendor.fa7free.all.min'); + $wa->useStyle('vendor.fa7free.brands.min'); + $wa->useStyle('vendor.fa7free.fontawesome.min'); + $wa->useStyle('vendor.fa7free.regular.min'); + $wa->useStyle('vendor.fa7free.solid.min'); + } + } catch (\Throwable $e) { + if($params_developmentmode){ + $wa->registerAndUseStyle('vendor.fa7free.all.dynamic', $templatePath . '/vendor/fa7free/css/all.css'); + $wa->registerAndUseStyle('vendor.fa7free.brands.dynamic', $templatePath . '/vendor/fa7free/css/brands.css'); + $wa->registerAndUseStyle('vendor.fa7free.fontawesome.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.css'); + $wa->registerAndUseStyle('vendor.fa7free.regular.dynamic', $templatePath . '/vendor/fa7free/css/regular.css'); + $wa->registerAndUseStyle('vendor.fa7free.solid.dynamic', $templatePath . '/vendor/fa7free/css/solid.css'); + } else { + $wa->registerAndUseStyle('vendor.fa7free.all.min.dynamic', $templatePath . '/vendor/fa7free/css/all.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.brands.min.dynamic', $templatePath . '/vendor/fa7free/css/brands.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.fontawesome.min.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.regular.min.dynamic', $templatePath . '/vendor/fa7free/css/regular.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.solid.min.dynamic', $templatePath . '/vendor/fa7free/css/solid.min.css'); + } -// Override 'template.active' asset to set correct ltr/rtl dependency -$wa->registerStyle('template.active', '', [], [], ['template.moko-cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); + } +} +$params_leftIcon = htmlspecialchars($this->params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), ENT_COMPAT, 'UTF-8'); +$params_rightIcon = htmlspecialchars($this->params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), ENT_COMPAT, 'UTF-8'); -// Browsers support SVG favicons -$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']); -$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']); -$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']); - -// Defer font awesome -$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet'); +$wa->useStyle('template.user'); // css/user.css ?> - + diff --git a/src/templates/custom.php b/src/templates/custom.php index 3b6c38e..94c8e95 100644 --- a/src/templates/custom.php +++ b/src/templates/custom.php @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia PATH: ./templates/moko-cassiopeia/custom.php - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Custom entry template file for Moko-Cassiopeia with user-defined overrides */ diff --git a/src/templates/error.php b/src/templates/error.php index 9610ede..6f9c8f6 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -10,7 +10,7 @@ INGROUP: Moko-Cassiopeia REPO: https://github.com/mokoconsulting-tech/moko-cassiopeia PATH: ./templates/moko-cassiopeia/error.php - VERSION: 03.05.00 + VERSION: 03.06.00 BRIEF: Error page template file for Moko-Cassiopeia */ @@ -26,72 +26,154 @@ $app = Factory::getApplication(); $params = $this->params; $wa = $this->getWebAssetManager(); +// Template params +$params_LightColorName = (string) $params->get('colorLightName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom + +$params_DarkColorName = (string) $params->get('colorDarkName', 'colors_standard'); // colors_standard|colors_alternative|colors_custom + +$params_googletagmanager = $params->get('googletagmanager', false); +$params_googletagmanagerid = $params->get('googletagmanagerid', ''); +$params_googleanalytics = $params->get('googleanalytics', false); +$params_googleanalyticsid = $params->get('googleanalyticsid', ''); +$params_custom_head_start = $params->get('custom_head_start', ''); +$params_custom_head_end = $params->get('custom_head_end', ''); +$params_developmentmode = $params->get('developmentmode', false); + +// Bootstrap behaviors (assets handled via WAM) +HTMLHelper::_('bootstrap.framework'); +HTMLHelper::_('bootstrap.loadCss', true); +HTMLHelper::_('bootstrap.alert'); +HTMLHelper::_('bootstrap.button'); +HTMLHelper::_('bootstrap.carousel'); +HTMLHelper::_('bootstrap.collapse'); +HTMLHelper::_('bootstrap.dropdown'); +HTMLHelper::_('bootstrap.modal'); +HTMLHelper::_('bootstrap.offcanvas'); +HTMLHelper::_('bootstrap.popover'); +HTMLHelper::_('bootstrap.scrollspy'); +HTMLHelper::_('bootstrap.tab'); +HTMLHelper::_('bootstrap.tooltip'); +HTMLHelper::_('bootstrap.toast'); + // ------------------ Params ------------------ -$colorLight = (string) $params->get('colorLightName', 'colors_standard'); -$colorDark = (string) $params->get('colorDarkName', 'colors_standard'); -$themeFab = (int) $params->get('theme_fab_enabled', 1); -$fABodyPos = (string) $params->get('theme_fab_pos', 'br'); -$gtmEnabled = (int) $params->get('googletagmanager', 0); -$gtmId = (string) $params->get('googletagmanagerid', ''); -$fa6KitCode = (string) $params->get('fA6KitCode', ''); $stickyHeader = (bool) $params->get('stickyHeader', 0); -$brandEnabled = (int) $params->get('brand', 1); -$siteDescription = (string) $params->get('siteDescription', ''); // Drawer icon params (escaped) -$params_leftIcon = htmlspecialchars($params->get('drawerLeftIcon', 'fa-solid fa-chevron-right'), ENT_QUOTES, 'UTF-8'); -$params_rightIcon = htmlspecialchars($params->get('drawerRightIcon', 'fa-solid fa-chevron-left'), ENT_QUOTES, 'UTF-8'); +$params_leftIcon = htmlspecialchars($params->get('drawerLeftIcon', 'fa-solid fa-chevron-left'), ENT_QUOTES, 'UTF-8'); +$params_rightIcon = htmlspecialchars($params->get('drawerRightIcon', 'fa-solid fa-chevron-right'), ENT_QUOTES, 'UTF-8'); -// ------------------ Styles ------------------ -$wa->useStyle('template.base'); -$wa->useStyle('template.user'); +// Template/Media path +$templatePath = 'media/templates/site/moko-cassiopeia'; -// Light/Dark variable sheets (load before consumers) -if ($wa->assetExists('style', 'template.light.' . $colorLight)) { - $wa->useStyle('template.light.' . $colorLight); +// =========================== +// Web Asset Manager (WAM) — matches your joomla.asset.json +// =========================== + +// Core template CSS +$wa->useStyle('template.global.base'); // css/template.css +$wa->useStyle('template.global.social-media-demo'); // css/global/social-media-demo.css + +// Optional vendor CSS +$wa->useStyle('vendor.bootstrap-toc'); + +// Color theme (light + optional dark) +$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName)); +$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName)); +$lightKey = 'template.light.' . $colorLightKey; +$darkKey = 'template.dark.' . $colorDarkKey; +try { + $wa->useStyle('template.light.colors_standard'); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/global/light/colors_standard.css'); } -if ($wa->assetExists('style', 'template.dark.' . $colorDark)) { - $wa->useStyle('template.dark.' . $colorDark); +try { + $wa->useStyle('template.dark.colors_standard'); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/global/dark/colors_standard.css'); +} +try { + $wa->useStyle($lightKey); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/global/light/' . $colorLightKey . '.css'); +} +try { + $wa->useStyle($darkKey); +} catch (\Throwable $e) { + $wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/global/dark/' . $colorDarkKey . '.css'); } -// ------------------ Scripts ------------------ +// Scripts +$wa->useScript('template.js'); $wa->useScript('theme-init.js'); -if ($themeFab === 1) { - $wa->useScript('darkmode-toggle.js'); -} -if ($gtmEnabled === 1) { - $wa->useScript('gtm.js'); +$wa->useScript('darkmode-toggle.js'); +$wa->useScript('vendor.bootstrap-toc.js'); + +// Meta +$this->setMetaData('viewport', 'width=device-width, initial-scale=1'); + +if ($this->params->get('faKitCode')) { + $faKit = "https://kit.fontawesome.com/" . $this->params->get('faKitCode') . ".js"; + HTMLHelper::_('script', $faKit, ['crossorigin' => 'anonymous']); +} else { + try { + if ($params_developmentmode){ + $wa->useStyle('vendor.fa7free.all'); + $wa->useStyle('vendor.fa7free.brands'); + $wa->useStyle('vendor.fa7free.fontawesome'); + $wa->useStyle('vendor.fa7free.regular'); + $wa->useStyle('vendor.fa7free.solid'); + } else { + $wa->useStyle('vendor.fa7free.all.min'); + $wa->useStyle('vendor.fa7free.brands.min'); + $wa->useStyle('vendor.fa7free.fontawesome.min'); + $wa->useStyle('vendor.fa7free.regular.min'); + $wa->useStyle('vendor.fa7free.solid.min'); + } + } catch (\Throwable $e) { + if ($params_developmentmode){ + $wa->registerAndUseStyle('vendor.fa7free.all.dynamic', $templatePath . '/vendor/fa7free/css/all.css'); + $wa->registerAndUseStyle('vendor.fa7free.brands.dynamic', $templatePath . '/vendor/fa7free/css/brands.css'); + $wa->registerAndUseStyle('vendor.fa7free.fontawesome.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.css'); + $wa->registerAndUseStyle('vendor.fa7free.regular.dynamic', $templatePath . '/vendor/fa7free/css/regular.css'); + $wa->registerAndUseStyle('vendor.fa7free.solid.dynamic', $templatePath . '/vendor/fa7free/css/solid.css'); + } else { + $wa->registerAndUseStyle('vendor.fa7free.all.min.dynamic', $templatePath . '/vendor/fa7free/css/all.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.brands.min.dynamic', $templatePath . '/vendor/fa7free/css/brands.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.fontawesome.min.dynamic', $templatePath . '/vendor/fa7free/css/fontawesome.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.regular.min.dynamic', $templatePath . '/vendor/fa7free/css/regular.min.css'); + $wa->registerAndUseStyle('vendor.fa7free.solid.min.dynamic', $templatePath . '/vendor/fa7free/css/solid.min.css'); + } + + } } -// Optional Font Awesome 6 Kit (preferred) or FA5 fallback -if (!empty($fa6KitCode)) { - HTMLHelper::_('script', 'https://kit.fontawesome.com/' . rawurlencode($fa6KitCode) . '.js', [ - 'crossorigin' => 'anonymous' - ]); -} else { - HTMLHelper::_('stylesheet', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', ['version' => 'auto'], [ - 'crossorigin' => 'anonymous', - 'referrerpolicy' => 'no-referrer', - ]); -} +$wa->useStyle('template.user'); // css/user.css // ------------------ Context (logo, bootstrap needs) ------------------ $sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8'); -// Build logo/title -if ($params->get('logoFile')) { - $logo = HTMLHelper::_( +// ------------------------------------- +// Brand: logo from params OR siteTitle +// ------------------------------------- +$brandHtml = ''; +$logoFile = (string) $this->params->get('logoFile'); + +if ($logoFile !== '') { + $brandHtml = HTMLHelper::_( 'image', - Uri::root(false) . htmlspecialchars($params->get('logoFile'), ENT_QUOTES), + Uri::root(false) . htmlspecialchars($logoFile, ENT_QUOTES, 'UTF-8'), $sitename, - ['loading' => 'eager', 'decoding' => 'async'], + ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], false, 0 ); -} elseif ($params->get('siteTitle')) { - $logo = '' . htmlspecialchars($params->get('siteTitle'), ENT_COMPAT, 'UTF-8') . ''; +} elseif ($this->params->get('siteTitle')) { + $brandHtml = '' + . htmlspecialchars($this->params->get('siteTitle'), ENT_COMPAT, 'UTF-8') + . ''; } else { - $logo = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); + // Fallback to a bundled image (relative to media paths) + $brandHtml = HTMLHelper::_('image', 'full_logo.png', $sitename, ['class' => 'logo d-inline-block', 'loading' => 'eager', 'decoding' => 'async'], true, 0); } // ------------------ Error details ------------------ @@ -103,23 +185,105 @@ $debugOn = defined('JDEBUG') && JDEBUG; - - - + + + + + + + - - + + + + + + - -
    + + + + + + + + + - +
    @@ -186,11 +375,11 @@ $debugOn = defined('JDEBUG') && JDEBUG;
    - +
    @@ -245,7 +434,7 @@ $debugOn = defined('JDEBUG') && JDEBUG;
    -