p.rahim
/
iralex-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload

This commit is contained in:
yo3ef 2023-03-14 20:17:20 +03:30
commit b2e18a3380
167 changed files with 33691 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

92
.gitignore vendored Normal file
View File

@ -0,0 +1,92 @@
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# macOS
.DS_Store
# Vim swap files
*.swp
dump/

12
.gitlab-ci.yml Normal file
View File

@ -0,0 +1,12 @@
# You can override the included template(s) by including variable overrides
# SAST customization: https://docs.gitlab.com/ee/user/application_security/sast/#customizing-the-sast-settings
# Secret Detection customization: https://docs.gitlab.com/ee/user/application_security/secret_detection/#customizing-settings
# Dependency Scanning customization: https://docs.gitlab.com/ee/user/application_security/dependency_scanning/#customizing-the-dependency-scanning-settings
# Note that environment variables can be set in several places
# See https://docs.gitlab.com/ee/ci/variables/#cicd-variable-precedence
stages:
- test
sast:
stage: test
include:
- template: Security/SAST.gitlab-ci.yml

93
README.md Normal file
View File

@ -0,0 +1,93 @@
# ira-lex-site
ira-lex.com landing page.
## Getting started
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
## Add your files
- [ ] [Create](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
```
cd existing_repo
git remote add origin https://gitlab.com/pooyarhz99/ira-lex-site.git
git branch -M main
git push -uf origin main
```
## Integrate with your tools
- [ ] [Set up project integrations](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://gitlab.com/pooyarhz99/ira-lex-site/-/settings/integrations)
## Collaborate with your team
- [ ] [Invite team members and collaborators](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Enable merge request approvals](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
- [ ] [Automatically merge when pipeline succeeds](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
## Test and Deploy
Use the built-in continuous integration in GitLab.
- [ ] [Get started with GitLab CI/CD](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/user/clusters/agent/)
- [ ] [Set up protected environments](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
***
# Editing this README
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://gitlab.com/-/experiment/new_project_readme_content:a1fc1a43af11137134b3f109bd121919?https://www.makeareadme.com/) for this template.
## Suggestions for a good README
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
## Name
Choose a self-explaining name for your project.
## Description
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
## Badges
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
## Visuals
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
## Installation
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
## Usage
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
## Support
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
## Roadmap
If you have ideas for releases in the future, it is a good idea to list them in the README.
## Contributing
State if you are open to contributions and what your requirements are for accepting them.
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
## Authors and acknowledgment
Show your appreciation to those who have contributed to the project.
## License
For open source projects, say how it is licensed.
## Project status
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

75
assets/css/animations/hover.css Normal file
View File

@ -0,0 +1,75 @@
/*******************************************************************************
* Hover Effects: *
* A collection of CSS animations and effects applied on hover, to be applied *
* to links, buttons, logos, SVG, featured images and so on. *
* *
* Reference: *
* - Hover Effects (https://ianlunn.github.io/Hover) *
*******************************************************************************/
/*---------------------------------*/
/* ----- Underline From Left ----- */
/*---------------------------------*/
.hover\:ani_underline_ltr {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.hover\:ani_underline_ltr:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background-color: var(--bg-primary);
height: 2px;
margin-bottom: 2px;
transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0);
}
.hover\:ani_underline_ltr:hover:before, .hover\:ani_underline_ltr:focus:before, .hover\:ani_underline_ltr:active:before {
right: 0;
}
/*-------------------*/
/* ----- Metis ----- */
/*-------------------*/
.hover\:ani_metis { position: relative; }
.hover\:ani_metis::before {
content: "";
background: currentColor;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
pointer-events: none;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.hover\:ani_metis:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
/*-----------------------*/
/* ----- Bounce In ----- */
/*-----------------------*/
.hover\:ani_bouncein {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
transition-duration: 0.5s;
}
.hover\:ani_bouncein:hover, .hover\:ani_bouncein:focus, .hover\:ani_bouncein:active {
transform: scale(1.05);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

6
assets/css/blueprints/index.css Normal file
View File

@ -0,0 +1,6 @@
/*******************************************************************************
* Layout Blurprint: *
*******************************************************************************/
@import url("~assets/css/blueprints/shelf.css");

0
assets/css/blueprints/shelf.css Normal file
View File

211
assets/css/border/base.css Normal file
View File

@ -0,0 +1,211 @@
/*******************************************************************************
* Border: *
*******************************************************************************/
/*============================================================================*/
/* Default Borders */
/*============================================================================*/
/********************/
/* Additive Borders */
/********************/
.b { border: 1px solid var(--border-color, #dee2e6); } /* Border */
.bt { border-top: 1px solid var(--border-color, #dee2e6); } /* Border top */
.bb { border-bottom: 1px solid var(--border-color, #dee2e6); } /* Border bottom */
.bl { border-left: 1px solid var(--border-color, #dee2e6); } /* Border left */
.br { border-right: 1px solid var(--border-color, #dee2e6); } /* Border right */
/* .bbs { border-top: 1px solid var(--border-color, #dee2e6); } /* Border block start */
/*[dir="rtl"] .bbs { border-bottom: 1px solid var(--border-color, #dee2e6); }
/* .bbe { border-bottom: 1px solid var(--border-color, #dee2e6); } /* Border block end */
/*[dir="rtl"] .bbe { border-top: 1px solid var(--border-color, #dee2e6); }
/* .bis { border-left: 1px solid var(--border-color, #dee2e6); } /* Border inline start */
/*[dir="rtl"] .bis { border-right: 1px solid var(--border-color, #dee2e6); }
/* .bie { border-right: 1px solid var(--border-color, #dee2e6); } /* Border inline end */
/*[dir="rtl"] .bie { border-left: 1px solid var(--border-color, #dee2e6); }
/***********************/
/* subtractive Borders */
/***********************/
.bt-0 { border-left: 1px solid var(--border-color, #dee2e6); border-right: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); }
.bb-0 { border-left: 1px solid var(--border-color, #dee2e6); border-right: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); }
.bl-0 { border-right: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); }
.br-0 { border-left: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); }
/* .bs-0 { border-left: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); } */
/* [dir="rtl"] .bs-0 { border-right: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); } */
/* .be-0 { border-right: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); } */
/* [dir="rtl"] .be-0 { border-left: 1px solid var(--border-color, #dee2e6); border-top: 1px solid var(--border-color, #dee2e6); border-bottom: 1px solid var(--border-color, #dee2e6); } */
/***********************/
/* Subtractive Borders */
/***********************/
/*============================================================================*/
/* No Borders */
/*============================================================================*/
/* Definition in Tailwind */
/* .b_none { border-style: none; } */
/* .bx_none { border-left-style: none; border-right-style: none; } */
/* .by_none { border-top-style: none; border-bottom-style: none; } */
/* .bt_none { border-top-style: none; } */
/* .br_none { border-right-style: none; } */
/* .bb_none { border-bottom-style: none; } */
/* .bl_none { border-left-style: none; } */
/* Derfinition in Bootstrap 5 */
.b_none { border: 0; }
.bx_none { border-left: 0; border-right: 0; }
.by_none { border-top: 0; border-bottom: 0; }
.bt_none { border-top: 0; }
.bb_none { border-bottom: 0; }
.bl_none { border-left: 0; }
.br_none { border-right: 0; }
/* Also, this is valid */
/* .b_none { border: none; } */
/***************************/
/* All-Sides Border Styles */
/***************************/
.bs_solid { border-style: solid; }
.bs_dotted { border-style: dotted; }
.bs_dashed { border-style: dashed; }
.bs_double { border-style: double; }
.bs_groove { border-style: groove; }
.bs_ridge { border-style: ridge; }
.bs_inset { border-style: inset; }
.bs_outset { border-style: outset; }
/****************************/
/* Horizontal Border Styles */
/****************************/
.bsx_solid { border-left-style: solid; border-right-style: solid; }
.bsx_dotted { border-left-style: dotted; border-right-style: dotted; }
.bsx_dashed { border-left-style: dashed; border-right-style: dashed; }
.bsx_double { border-left-style: double; border-right-style: double; }
.bsx_groove { border-left-style: groove; border-right-style: groove; }
.bsx_ridge { border-left-style: ridge; border-right-style: ridge; }
.bsx_inset { border-left-style: inset; border-right-style: inset; }
.bsx_outset { border-left-style: outset; border-right-style: outset; }
/****************************/
/* Vertical Border Styles */
/****************************/
.bsy_solid { border-top-style: solid; border-bottom-style: solid; }
.bsy_dotted { border-top-style: dotted; border-bottom-style: dotted; }
.bsy_dashed { border-top-style: dashed; border-bottom-style: dashed; }
.bsy_double { border-top-style: double; border-bottom-style: double; }
.bsy_groove { border-top-style: groove; border-bottom-style: groove; }
.bsy_ridge { border-top-style: ridge; border-bottom-style: ridge; }
.bsy_inset { border-top-style: inset; border-bottom-style: inset; }
.bsy_outset { border-top-style: outset; border-bottom-style: outset; }
/***************************/
/* Top-Side Border Styles */
/***************************/
.bst_solid { border-top-style: solid; }
.bst_dotted { border-top-style: dotted; }
.bst_dashed { border-top-style: dashed; }
.bst_double { border-top-style: double; }
.bst_groove { border-top-style: groove; }
.bst_ridge { border-top-style: ridge; }
.bst_inset { border-top-style: inset; }
.bst_outset { border-top-style: outset; }
/***************************/
/* Right-Side Border Styles */
/***************************/
.bsr_solid { border-right-style: solid; }
.bsr_dotted { border-right-style: dotted; }
.bsr_dashed { border-right-style: dashed; }
.bsr_double { border-right-style: double; }
.bsr_groove { border-right-style: groove; }
.bsr_ridge { border-right-style: ridge; }
.bsr_inset { border-right-style: inset; }
.bsr_outset { border-right-style: outset; }
/***************************/
/* Bottom-Side Border Styles */
/***************************/
.bsb_solid { border-bottom-style: solid; }
.bsb_dotted { border-bottom-style: dotted; }
.bsb_dashed { border-bottom-style: dashed; }
.bsb_double { border-bottom-style: double; }
.bsb_groove { border-bottom-style: groove; }
.bsb_ridge { border-bottom-style: ridge; }
.bsb_inset { border-bottom-style: inset; }
.bsb_outset { border-bottom-style: outset; }
/***************************/
/* Left-Side Border Styles */
/***************************/
.bsl_solid { border-left-style: solid; }
.bsl_dotted { border-left-style: dotted; }
.bsl_dashed { border-left-style: dashed; }
.bsl_double { border-left-style: double; }
.bsl_groove { border-left-style: groove; }
.bsl_ridge { border-left-style: ridge; }
.bsl_inset { border-left-style: inset; }
.bsl_outset { border-left-style: outset; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:b_none { border-style: none; }
.sm\:b_solid { border-style: solid; }
.sm\:b_dotted { border-style: dotted; }
.sm\:b_dashed { border-style: dashed; }
.sm\:b_double { border-style: double; }
.sm\:b_groove { border-style: groove; }
.sm\:b_ridge { border-style: ridge; }
.sm\:b_inset { border-style: inset; }
.sm\:b_outset { border-style: outset; }
}
@media (min-width: 768px) {
.md\:b_none { border-style: none; }
.md\:b_solid { border-style: solid; }
.md\:b_dotted { border-style: dotted; }
.md\:b_dashed { border-style: dashed; }
.md\:b_double { border-style: double; }
.md\:b_groove { border-style: groove; }
.md\:b_ridge { border-style: ridge; }
.md\:b_inset { border-style: inset; }
.md\:b_outset { border-style: outset; }
}
@media (min-width: 992px) {
.lg\:b_none { border-style: none; }
.lg\:b_solid { border-style: solid; }
.lg\:b_dotted { border-style: dotted; }
.lg\:b_dashed { border-style: dashed; }
.lg\:b_double { border-style: double; }
.lg\:b_groove { border-style: groove; }
.lg\:b_ridge { border-style: ridge; }
.lg\:b_inset { border-style: inset; }
.lg\:b_outset { border-style: outset; }
}
@media (min-width: 1200px) {
.xl\:b_none { border-style: none; }
.xl\:b_solid { border-style: solid; }
.xl\:b_dotted { border-style: dotted; }
.xl\:b_dashed { border-style: dashed; }
.xl\:b_double { border-style: double; }
.xl\:b_groove { border-style: groove; }
.xl\:b_ridge { border-style: ridge; }
.xl\:b_inset { border-style: inset; }
.xl\:b_outset { border-style: outset; }
}
@media (min-width: 1400px) {
.xxl\:b_none { border-style: none; }
.xxl\:b_solid { border-style: solid; }
.xxl\:b_dotted { border-style: dotted; }
.xxl\:b_dashed { border-style: dashed; }
.xxl\:b_double { border-style: double; }
.xxl\:b_groove { border-style: groove; }
.xxl\:b_ridge { border-style: ridge; }
.xxl\:b_inset { border-style: inset; }
.xxl\:b_outset { border-style: outset; }
}

919
assets/css/border/color.css Normal file
View File

@ -0,0 +1,919 @@
/*******************************************************************************
* Border Colors: *
*******************************************************************************/
/***************/
/* All Borders */
/***************/
.b_primary { border-color: var(--bg-primary , #007bff); }
.b_secondary { border-color: var(--bg-secondary , #6c757d); }
.b_success { border-color: var(--bg-success , #28a745); }
.b_info { border-color: var(--bg-info , #17a2b8); }
.b_warning { border-color: var(--bg-warning , #ffc107); }
.b_danger { border-color: var(--bg-danger , #dc3545); }
.b_light { border-color: var(--bg-light , #f8f9fa); }
.b_dark { border-color: var(--bg-dark , #343a40); }
.b_transparent { border-color: transparent; }
.b_currentcolor { border-color: currentcolor; }
.b_aliceblue { border-color: aliceblue; }
.b_antiquewhite { border-color: antiquewhite; }
.b_aqua { border-color: aqua; }
.b_aquamarine { border-color: aquamarine; }
.b_azure { border-color: azure; }
.b_beige { border-color: beige; }
.b_bisque { border-color: bisque; }
.b_black { border-color: black; }
.b_blanchedalmond { border-color: blanchedalmond; }
.b_blue { border-color: blue; }
.b_blueviolet { border-color: blueviolet; }
.b_brown { border-color: brown; }
.b_burlywood { border-color: burlywood; }
.b_cadetblue { border-color: cadetblue; }
.b_chartreuse { border-color: chartreuse; }
.b_chocolate { border-color: chocolate; }
.b_coral { border-color: coral; }
.b_cornflowerblue { border-color: cornflowerblue; }
.b_cornsilk { border-color: cornsilk; }
.b_crimson { border-color: crimson; }
.b_cyan { border-color: cyan; }
.b_darkblue { border-color: darkblue; }
.b_darkcyan { border-color: darkcyan; }
.b_darkgoldenrod { border-color: darkgoldenrod; }
.b_darkgray { border-color: darkgray; }
.b_darkgrey { border-color: darkgrey; }
.b_darkgreen { border-color: darkgreen; }
.b_darkkhaki { border-color: darkkhaki; }
.b_darkmagenta { border-color: darkmagenta; }
.b_darkolivegreen { border-color: darkolivegreen; }
.b_darkorange { border-color: darkorange; }
.b_darkorchid { border-color: darkorchid; }
.b_darkred { border-color: darkred; }
.b_darksalmon { border-color: darksalmon; }
.b_darkseagreen { border-color: darkseagreen; }
.b_darkslateblue { border-color: darkslateblue; }
.b_darkslategray { border-color: darkslategray; }
.b_darkslategrey { border-color: darkslategrey; }
.b_darkturquoise { border-color: darkturquoise; }
.b_darkviolet { border-color: darkviolet; }
.b_deeppink { border-color: deeppink; }
.b_deepskyblue { border-color: deepskyblue; }
.b_dimgray { border-color: darkgray; }
.b_dimgrey { border-color: darkgrey; }
.b_dodgerblue { border-color: dodgerblue; }
.b_firebrick { border-color: firebrick; }
.b_floralwhite { border-color: floralwhite; }
.b_forestgreen { border-color: forestgreen; }
.b_fuchsia { border-color: fuchsia; }
.b_gainsboro { border-color: gainsboro; }
.b_ghostwhite { border-color: ghostwhite; }
.b_gold { border-color: gold; }
.b_goldenrod { border-color: goldenrod; }
.b_gray { border-color: gray; }
.b_grey { border-color: grey; }
.b_green { border-color: green; }
.b_greenyellow { border-color: greenyellow; }
.b_honeydew { border-color: honeydew; }
.b_hotpink { border-color: hotpink; }
.b_indianred { border-color: indianred; }
.b_indigo { border-color: indigo; }
.b_ivory { border-color: ivory; }
.b_khaki { border-color: khaki; }
.b_lavender { border-color: lavender; }
.b_lavenderblush { border-color: lavenderblush; }
.b_lawngreen { border-color: lawngreen; }
.b_lemonchiffon { border-color: lemonchiffon; }
.b_lightblue { border-color: lightblue; }
.b_lightcoral { border-color: lightcoral; }
.b_lightcyan { border-color: lightcyan; }
.b_lightgoldenrodyellow { border-color: lightgoldenrodyellow; }
.b_lightgray { border-color: lightgray; }
.b_lightgrey { border-color: lightgrey; }
.b_lightgreen { border-color: lightgreen; }
.b_lightpink { border-color: lightpink; }
.b_lightsalmon { border-color: lightsalmon; }
.b_lightseagreen { border-color: lightseagreen; }
.b_lightskyblue { border-color: lightskyblue; }
.b_lightslategray { border-color: lightslategray; }
.b_lightslategrey { border-color: lightslategrey; }
.b_lightsteelblue { border-color: lightsteelblue; }
.b_lightyellow { border-color: lightyellow; }
.b_lime { border-color: lime; }
.b_limegreen { border-color: limegreen; }
.b_linen { border-color: linen; }
.b_magenta { border-color: magenta; }
.b_maroon { border-color: maroon; }
.b_mediumaquamarine { border-color: mediumaquamarine; }
.b_mediumblue { border-color: mediumblue; }
.b_mediumorchid { border-color: mediumorchid; }
.b_mediumpurple { border-color: mediumpurple; }
.b_mediumseagreen { border-color: mediumseagreen; }
.b_mediumslateblue { border-color: mediumslateblue; }
.b_mediumspringgreen { border-color: mediumspringgreen; }
.b_mediumturquoise { border-color: mediumturquoise; }
.b_mediumvioletred { border-color: mediumvioletred; }
.b_midnightblue { border-color: midnightblue; }
.b_mintcream { border-color: mintcream; }
.b_mistyrose { border-color: mistyrose; }
.b_moccasin { border-color: moccasin; }
.b_navajowhite { border-color: navajowhite; }
.b_navy { border-color: navy; }
.b_oldlace { border-color: oldlace; }
.b_olive { border-color: olive; }
.b_olivedrab { border-color: olivedrab; }
.b_orange { border-color: orange; }
.b_orangered { border-color: orangered; }
.b_orchid { border-color: orchid; }
.b_palegoldenrod { border-color: palegoldenrod; }
.b_palegreen { border-color: palegreen; }
.b_paleturquoise { border-color: paleturquoise; }
.b_palevioletred { border-color: palevioletred; }
.b_papayawhip { border-color: papayawhip; }
.b_peachpuff { border-color: peachpuff; }
.b_peru { border-color: peru; }
.b_pink { border-color: pink; }
.b_plum { border-color: plum; }
.b_powderblue { border-color: powderblue; }
.b_purple { border-color: purple; }
.b_rebeccapurple { border-color: rebeccapurple; }
.b_red { border-color: red; }
.b_rosybrown { border-color: rosybrown; }
.b_royalblue { border-color: royalblue; }
.b_saddlebrown { border-color: saddlebrown; }
.b_salmon { border-color: salmon; }
.b_sandybrown { border-color: sandybrown; }
.b_seagreen { border-color: seagreen; }
.b_seashell { border-color: seashell; }
.b_sienna { border-color: sienna; }
.b_silver { border-color: silver; }
.b_skyblue { border-color: skyblue; }
.b_slateblue { border-color: slateblue; }
.b_slategray { border-color: slategray; }
.b_slategrey { border-color: slategrey; }
.b_snow { border-color: snow; }
.b_springgreen { border-color: springgreen; }
.b_steelblue { border-color: steelblue; }
.b_tan { border-color: tan; }
.b_teal { border-color: teal; }
.b_thistle { border-color: thistle; }
.b_tomato { border-color: tomato; }
.b_turquoise { border-color: turquoise; }
.b_violet { border-color: violet; }
.b_wheat { border-color: wheat; }
.b_white { border-color: white; }
.b_whitesmoke { border-color: whitesmoke; }
.b_yellow { border-color: yellow; }
.b_yellowgreen { border-color: yellowgreen; }
.b_red_50 { border-color: #FFEBEE; }
.b_red_100 { border-color: #FFCDD2; }
.b_red_200 { border-color: #EF9A9A; }
.b_red_300 { border-color: #E57373; }
.b_red_400 { border-color: #EF5350; }
.b_red_500 { border-color: #F44336; }
.b_red_600 { border-color: #E53935; }
.b_red_700 { border-color: #D32F2F; }
.b_red_800 { border-color: #C62828; }
.b_red_900 { border-color: #B71C1C; }
.b_red_A100 { border-color: #FF8A80; }
.b_red_A200 { border-color: #FF5252; }
.b_red_A400 { border-color: #FF1744; }
.b_red_A700 { border-color: #D50000; }
.b_pink_50 { border-color: #FCE4EC; }
.b_pink_100 { border-color: #F8BBD0; }
.b_pink_200 { border-color: #F48FB1; }
.b_pink_300 { border-color: #F06292; }
.b_pink_400 { border-color: #EC407A; }
.b_pink_500 { border-color: #E91E63; }
.b_pink_600 { border-color: #D81B60; }
.b_pink_700 { border-color: #C2185B; }
.b_pink_800 { border-color: #AD1457; }
.b_pink_900 { border-color: #880E4F; }
.b_pink_A100 { border-color: #FF80AB; }
.b_pink_A200 { border-color: #FF4081; }
.b_pink_A400 { border-color: #F50057; }
.b_pink_A700 { border-color: #C51162; }
.b_purple_50 { background-color: #F3E5F5; }
.b_purple_100 { background-color: #E1BEE7; }
.b_purple_200 { background-color: #CE93D8; }
.b_purple_300 { background-color: #BA68C8; }
.b_purple_400 { background-color: #AB47BC; }
.b_purple_500 { background-color: #9C27B0; }
.b_purple_600 { background-color: #8E24AA; }
.b_purple_700 { background-color: #7B1FA2; }
.b_purple_800 { background-color: #6A1B9A; }
.b_purple_900 { background-color: #4A148C; }
.b_purple_A100 { background-color: #EA80FC; }
.b_purple_A200 { background-color: #E040FB; }
.b_purple_A400 { background-color: #D500F9; }
.b_purple_A700 { background-color: #AA00FF; }
.b_deeppurple_50 { background-color: #EDE7F6; }
.b_deeppurple_100 { background-color: #D1C4E9; }
.b_deeppurple_200 { background-color: #B39DDB; }
.b_deeppurple_300 { background-color: #9575CD; }
.b_deeppurple_400 { background-color: #7E57C2; }
.b_deeppurple_500 { background-color: #673AB7; }
.b_deeppurple_600 { background-color: #5E35B1; }
.b_deeppurple_700 { background-color: #512DA8; }
.b_deeppurple_800 { background-color: #4527A0; }
.b_deeppurple_900 { background-color: #311B92; }
.b_deeppurple_A100 { background-color: #B388FF; }
.b_deeppurple_A200 { background-color: #7C4DFF; }
.b_deeppurple_A400 { background-color: #651FFF; }
.b_deeppurple_A700 { background-color: #6200EA; }
.b_indigo_50 { background-color: #E8EAF6; }
.b_indigo_100 { background-color: #C5CAE9; }
.b_indigo_200 { background-color: #9FA8DA; }
.b_indigo_300 { background-color: #7986CB; }
.b_indigo_400 { background-color: #5C6BC0; }
.b_indigo_500 { background-color: #3F51B5; }
.b_indigo_600 { background-color: #3949AB; }
.b_indigo_700 { background-color: #303F9F; }
.b_indigo_800 { background-color: #283593; }
.b_indigo_900 { background-color: #1A237E; }
.b_indigo_A100 { background-color: #8C9EFF; }
.b_indigo_A200 { background-color: #536DFE; }
.b_indigo_A400 { background-color: #3D5AFE; }
.b_indigo_A700 { background-color: #304FFE; }
.b_blue_50 { background-color: #E3F2FD; }
.b_blue_100 { background-color: #BBDEFB; }
.b_blue_200 { background-color: #90CAF9; }
.b_blue_300 { background-color: #64B5F6; }
.b_blue_400 { background-color: #42A5F5; }
.b_blue_500 { background-color: #2196F3; }
.b_blue_600 { background-color: #1E88E5; }
.b_blue_700 { background-color: #1976D2; }
.b_blue_800 { background-color: #1565C0; }
.b_blue_900 { background-color: #0D47A1; }
.b_blue_A100 { background-color: #82B1FF; }
.b_blue_A200 { background-color: #448AFF; }
.b_blue_A400 { background-color: #2979FF; }
.b_blue_A700 { background-color: #2962FF; }
.b_lightblue_50 { background-color: #E3F2FD; }
.b_lightblue_100 { background-color: #BBDEFB; }
.b_lightblue_200 { background-color: #90CAF9; }
.b_lightblue_300 { background-color: #64B5F6; }
.b_lightblue_400 { background-color: #42A5F5; }
.b_lightblue_500 { background-color: #2196F3; }
.b_lightblue_600 { background-color: #1E88E5; }
.b_lightblue_700 { background-color: #1976D2; }
.b_lightblue_800 { background-color: #1565C0; }
.b_lightblue_900 { background-color: #0D47A1; }
.b_lightblue_A100 { background-color: #82B1FF; }
.b_lightblue_A200 { background-color: #448AFF; }
.b_lightblue_A400 { background-color: #2979FF; }
.b_lightblue_A700 { background-color: #2962FF; }
.b_cyan_50 { background-color: #E0F7FA; }
.b_cyan_100 { background-color: #B2EBF2; }
.b_cyan_200 { background-color: #80DEEA; }
.b_cyan_300 { background-color: #4DD0E1; }
.b_cyan_400 { background-color: #26C6DA; }
.b_cyan_500 { background-color: #00BCD4; }
.b_cyan_600 { background-color: #00ACC1; }
.b_cyan_700 { background-color: #0097A7; }
.b_cyan_800 { background-color: #00838F; }
.b_cyan_900 { background-color: #006064; }
.b_cyan_A100 { background-color: #84FFFF; }
.b_cyan_A200 { background-color: #18FFFF; }
.b_cyan_A400 { background-color: #00E5FF; }
.b_cyan_A700 { background-color: #00B8D4; }
.b_teal_50 { background-color: #E0F2F1; }
.b_teal_100 { background-color: #B2DFDB; }
.b_teal_200 { background-color: #80CBC4; }
.b_teal_300 { background-color: #4DB6AC; }
.b_teal_400 { background-color: #26A69A; }
.b_teal_500 { background-color: #009688; }
.b_teal_600 { background-color: #00897B; }
.b_teal_700 { background-color: #00796B; }
.b_teal_800 { background-color: #00695C; }
.b_teal_900 { background-color: #004D40; }
.b_teal_A100 { background-color: #A7FFEB; }
.b_teal_A200 { background-color: #64FFDA; }
.b_teal_A400 { background-color: #1DE9B6; }
.b_teal_A700 { background-color: #00BFA5; }
.b_green_50 { background-color: #E8F5E9; }
.b_green_100 { background-color: #C8E6C9; }
.b_green_200 { background-color: #A5D6A7; }
.b_green_300 { background-color: #81C784; }
.b_green_400 { background-color: #66BB6A; }
.b_green_500 { background-color: #4CAF50; }
.b_green_600 { background-color: #43A047; }
.b_green_700 { background-color: #388E3C; }
.b_green_800 { background-color: #2E7D32; }
.b_green_900 { background-color: #1B5E20; }
.b_green_A100 { background-color: #B9F6CA; }
.b_green_A200 { background-color: #69F0AE; }
.b_green_A400 { background-color: #00E676; }
.b_green_A700 { background-color: #00C853; }
.b_lightgreen_50 { background-color: #F1F8E9; }
.b_lightgreen_100 { background-color: #DCEDC8; }
.b_lightgreen_200 { background-color: #C5E1A5; }
.b_lightgreen_300 { background-color: #AED581; }
.b_lightgreen_400 { background-color: #9CCC65; }
.b_lightgreen_500 { background-color: #8BC34A; }
.b_lightgreen_600 { background-color: #7CB342; }
.b_lightgreen_700 { background-color: #689F38; }
.b_lightgreen_800 { background-color: #558B2F; }
.b_lightgreen_900 { background-color: #33691E; }
.b_lightgreen_A100 { background-color: #CCFF90; }
.b_lightgreen_A200 { background-color: #B2FF59; }
.b_lightgreen_A400 { background-color: #76FF03; }
.b_lightgreen_A700 { background-color: #64DD17; }
.b_lime_50 { background-color: #F9FBE7; }
.b_lime_100 { background-color: #F0F4C3; }
.b_lime_200 { background-color: #E6EE9C; }
.b_lime_300 { background-color: #DCE775; }
.b_lime_400 { background-color: #D4E157; }
.b_lime_500 { background-color: #CDDC39; }
.b_lime_600 { background-color: #C0CA33; }
.b_lime_700 { background-color: #AFB42B; }
.b_lime_800 { background-color: #9E9D24; }
.b_lime_900 { background-color: #827717; }
.b_lime_A100 { background-color: #F4FF81; }
.b_lime_A200 { background-color: #EEFF41; }
.b_lime_A400 { background-color: #C6FF00; }
.b_lime_A700 { background-color: #AEEA00; }
.b_yellow_50 { background-color: #FFFDE7; }
.b_yellow_100 { background-color: #FFF9C4; }
.b_yellow_200 { background-color: #FFF59D; }
.b_yellow_300 { background-color: #FFF176; }
.b_yellow_400 { background-color: #FFEE58; }
.b_yellow_500 { background-color: #FFEB3B; }
.b_yellow_600 { background-color: #FDD835; }
.b_yellow_700 { background-color: #FBC02D; }
.b_yellow_800 { background-color: #F9A825; }
.b_yellow_900 { background-color: #F57F17; }
.b_yellow_A100 { background-color: #FFFF8D; }
.b_yellow_A200 { background-color: #FFFF00; }
.b_yellow_A400 { background-color: #FFEA00; }
.b_yellow_A700 { background-color: #FFD600; }
.b_amber_50 { background-color: #FFF8E1; }
.b_amber_100 { background-color: #FFECB3; }
.b_amber_200 { background-color: #FFE082; }
.b_amber_300 { background-color: #FFD54F; }
.b_amber_400 { background-color: #FFCA28; }
.b_amber_500 { background-color: #FFC107; }
.b_amber_600 { background-color: #FFB300; }
.b_amber_700 { background-color: #FFA000; }
.b_amber_800 { background-color: #FF8F00; }
.b_amber_900 { background-color: #FF6F00; }
.b_amber_A100 { background-color: #FFE57F; }
.b_amber_A200 { background-color: #FFD740; }
.b_amber_A400 { background-color: #FFC400; }
.b_amber_A700 { background-color: #FFAB00; }
.b_orange_50 { background-color: #FFF3E0; }
.b_orange_100 { background-color: #FFE0B2; }
.b_orange_200 { background-color: #FFCC80; }
.b_orange_300 { background-color: #FFB74D; }
.b_orange_400 { background-color: #FFA726; }
.b_orange_500 { background-color: #FF9800; }
.b_orange_600 { background-color: #FB8C00; }
.b_orange_700 { background-color: #F57C00; }
.b_orange_800 { background-color: #EF6C00; }
.b_orange_900 { background-color: #E65100; }
.b_orange_A100 { background-color: #FFD180; }
.b_orange_A200 { background-color: #FFAB40; }
.b_orange_A400 { background-color: #FF9100; }
.b_orange_A700 { background-color: #FF6D00; }
.b_deeporange_50 { background-color: #FBE9E7; }
.b_deeporange_100 { background-color: #FFCCBC; }
.b_deeporange_200 { background-color: #FFAB91; }
.b_deeporange_300 { background-color: #FF8A65; }
.b_deeporange_400 { background-color: #FF7043; }
.b_deeporange_500 { background-color: #FF5722; }
.b_deeporange_600 { background-color: #F4511E; }
.b_deeporange_700 { background-color: #E64A19; }
.b_deeporange_800 { background-color: #D84315; }
.b_deeporange_900 { background-color: #BF360C; }
.b_deeporange_A100 { background-color: #FF9E80; }
.b_deeporange_A200 { background-color: #FF6E40; }
.b_deeporange_A400 { background-color: #FF3D00; }
.b_deeporange_A700 { background-color: #DD2C00; }
.b_brown_50 { background-color: #EFEBE9; }
.b_brown_100 { background-color: #D7CCC8; }
.b_brown_200 { background-color: #BCAAA4; }
.b_brown_300 { background-color: #A1887F; }
.b_brown_400 { background-color: #8D6E63; }
.b_brown_500 { background-color: #795548; }
.b_brown_600 { background-color: #6D4C41; }
.b_brown_700 { background-color: #5D4037; }
.b_brown_800 { background-color: #4E342E; }
.b_brown_900 { background-color: #3E2723; }
.b_gray_50 { background-color: #FAFAFA; }
.b_gray_100 { background-color: #F5F5F5; }
.b_gray_200 { background-color: #EEEEEE; }
.b_gray_300 { background-color: #E0E0E0; }
.b_gray_400 { background-color: #BDBDBD; }
.b_gray_500 { background-color: #9E9E9E; }
.b_gray_600 { background-color: #757575; }
.b_gray_700 { background-color: #616161; }
.b_gray_800 { background-color: #424242; }
.b_gray_900 { background-color: #212121; }
.b_grey_50 { background-color: #FAFAFA; }
.b_grey_100 { background-color: #F5F5F5; }
.b_grey_200 { background-color: #EEEEEE; }
.b_grey_300 { background-color: #E0E0E0; }
.b_grey_400 { background-color: #BDBDBD; }
.b_grey_500 { background-color: #9E9E9E; }
.b_grey_600 { background-color: #757575; }
.b_grey_700 { background-color: #616161; }
.b_grey_800 { background-color: #424242; }
.b_grey_900 { background-color: #212121; }
.b_bluegray_50 { background-color: #ECEFF1; }
.b_bluegray_100 { background-color: #CFD8DC; }
.b_bluegray_200 { background-color: #B0BEC5; }
.b_bluegray_300 { background-color: #90A4AE; }
.b_bluegray_400 { background-color: #78909C; }
.b_bluegray_500 { background-color: #607D8B; }
.b_bluegray_600 { background-color: #546E7A; }
.b_bluegray_700 { background-color: #455A64; }
.b_bluegray_800 { background-color: #37474F; }
.b_bluegray_900 { background-color: #263238; }
.b_bluegrey_50 { background-color: #ECEFF1; }
.b_bluegrey_100 { background-color: #CFD8DC; }
.b_bluegrey_200 { background-color: #B0BEC5; }
.b_bluegrey_300 { background-color: #90A4AE; }
.b_bluegrey_400 { background-color: #78909C; }
.b_bluegrey_500 { background-color: #607D8B; }
.b_bluegrey_600 { background-color: #546E7A; }
.b_bluegrey_700 { background-color: #455A64; }
.b_bluegrey_800 { background-color: #37474F; }
.b_bluegrey_900 { background-color: #263238; }
/*****************/
/* Bottom Border */
/*****************/
.bb_primary { border-color: var(--bg-primary , #007bff); }
.bb_secondary { border-color: var(--bg-secondary , #6c757d); }
.bb_success { border-color: var(--bg-success , #28a745); }
.bb_info { border-color: var(--bg-info , #17a2b8); }
.bb_warning { border-color: var(--bg-warning , #ffc107); }
.bb_danger { border-color: var(--bg-danger , #dc3545); }
.bb_light { border-color: var(--bg-light , #f8f9fa); }
.bb_dark { border-color: var(--bg-dark , #343a40); }
.bb_transparent { border-color: transparent; }
.bb_currentcolor { border-color: currentcolor; }
.bb_aliceblue { border-color: aliceblue; }
.bb_antiquewhite { border-color: antiquewhite; }
.bb_aqua { border-color: aqua; }
.bb_aquamarine { border-color: aquamarine; }
.bb_azure { border-color: azure; }
.bb_beige { border-color: beige; }
.bb_bisque { border-color: bisque; }
.bb_black { border-color: black; }
.bb_blanchedalmond { border-color: blanchedalmond; }
.bb_blue { border-color: blue; }
.bb_blueviolet { border-color: blueviolet; }
.bb_brown { border-color: brown; }
.bb_burlywood { border-color: burlywood; }
.bb_cadetblue { border-color: cadetblue; }
.bb_chartreuse { border-color: chartreuse; }
.bb_chocolate { border-color: chocolate; }
.bb_coral { border-color: coral; }
.bb_cornflowerblue { border-color: cornflowerblue; }
.bb_cornsilk { border-color: cornsilk; }
.bb_crimson { border-color: crimson; }
.bb_cyan { border-color: cyan; }
.bb_darkblue { border-color: darkblue; }
.bb_darkcyan { border-color: darkcyan; }
.bb_darkgoldenrod { border-color: darkgoldenrod; }
.bb_darkgray { border-color: darkgray; }
.bb_darkgrey { border-color: darkgrey; }
.bb_darkgreen { border-color: darkgreen; }
.bb_darkkhaki { border-color: darkkhaki; }
.bb_darkmagenta { border-color: darkmagenta; }
.bb_darkolivegreen { border-color: darkolivegreen; }
.bb_darkorange { border-color: darkorange; }
.bb_darkorchid { border-color: darkorchid; }
.bb_darkred { border-color: darkred; }
.bb_darksalmon { border-color: darksalmon; }
.bb_darkseagreen { border-color: darkseagreen; }
.bb_darkslateblue { border-color: darkslateblue; }
.bb_darkslategray { border-color: darkslategray; }
.bb_darkslategrey { border-color: darkslategrey; }
.bb_darkturquoise { border-color: darkturquoise; }
.bb_darkviolet { border-color: darkviolet; }
.bb_deeppink { border-color: deeppink; }
.bb_deepskyblue { border-color: deepskyblue; }
.bb_dimgray { border-color: darkgray; }
.bb_dimgrey { border-color: darkgrey; }
.bb_dodgerblue { border-color: dodgerblue; }
.bb_firebrick { border-color: firebrick; }
.bb_floralwhite { border-color: floralwhite; }
.bb_forestgreen { border-color: forestgreen; }
.bb_fuchsia { border-color: fuchsia; }
.bb_gainsboro { border-color: gainsboro; }
.bb_ghostwhite { border-color: ghostwhite; }
.bb_gold { border-color: gold; }
.bb_goldenrod { border-color: goldenrod; }
.bb_gray { border-color: gray; }
.bb_grey { border-color: grey; }
.bb_green { border-color: green; }
.bb_greenyellow { border-color: greenyellow; }
.bb_honeydew { border-color: honeydew; }
.bb_hotpink { border-color: hotpink; }
.bb_indianred { border-color: indianred; }
.bb_indigo { border-color: indigo; }
.bb_ivory { border-color: ivory; }
.bb_khaki { border-color: khaki; }
.bb_lavender { border-color: lavender; }
.bb_lavenderblush { border-color: lavenderblush; }
.bb_lawngreen { border-color: lawngreen; }
.bb_lemonchiffon { border-color: lemonchiffon; }
.bb_lightblue { border-color: lightblue; }
.bb_lightcoral { border-color: lightcoral; }
.bb_lightcyan { border-color: lightcyan; }
.bb_lightgoldenrodyellow { border-color: lightgoldenrodyellow; }
.bb_lightgray { border-color: lightgray; }
.bb_lightgrey { border-color: lightgrey; }
.bb_lightgreen { border-color: lightgreen; }
.bb_lightpink { border-color: lightpink; }
.bb_lightsalmon { border-color: lightsalmon; }
.bb_lightseagreen { border-color: lightseagreen; }
.bb_lightskyblue { border-color: lightskyblue; }
.bb_lightslategray { border-color: lightslategray; }
.bb_lightslategrey { border-color: lightslategrey; }
.bb_lightsteelblue { border-color: lightsteelblue; }
.bb_lightyellow { border-color: lightyellow; }
.bb_lime { border-color: lime; }
.bb_limegreen { border-color: limegreen; }
.bb_linen { border-color: linen; }
.bb_magenta { border-color: magenta; }
.bb_maroon { border-color: maroon; }
.bb_mediumaquamarine { border-color: mediumaquamarine; }
.bb_mediumblue { border-color: mediumblue; }
.bb_mediumorchid { border-color: mediumorchid; }
.bb_mediumpurple { border-color: mediumpurple; }
.bb_mediumseagreen { border-color: mediumseagreen; }
.bb_mediumslateblue { border-color: mediumslateblue; }
.bb_mediumspringgreen { border-color: mediumspringgreen; }
.bb_mediumturquoise { border-color: mediumturquoise; }
.bb_mediumvioletred { border-color: mediumvioletred; }
.bb_midnightblue { border-color: midnightblue; }
.bb_mintcream { border-color: mintcream; }
.bb_mistyrose { border-color: mistyrose; }
.bb_moccasin { border-color: moccasin; }
.bb_navajowhite { border-color: navajowhite; }
.bb_navy { border-color: navy; }
.bb_oldlace { border-color: oldlace; }
.bb_olive { border-color: olive; }
.bb_olivedrab { border-color: olivedrab; }
.bb_orange { border-color: orange; }
.bb_orangered { border-color: orangered; }
.bb_orchid { border-color: orchid; }
.bb_palegoldenrod { border-color: palegoldenrod; }
.bb_palegreen { border-color: palegreen; }
.bb_paleturquoise { border-color: paleturquoise; }
.bb_palevioletred { border-color: palevioletred; }
.bb_papayawhip { border-color: papayawhip; }
.bb_peachpuff { border-color: peachpuff; }
.bb_peru { border-color: peru; }
.bb_pink { border-color: pink; }
.bb_plum { border-color: plum; }
.bb_powderblue { border-color: powderblue; }
.bb_purple { border-color: purple; }
.bb_rebeccapurple { border-color: rebeccapurple; }
.bb_red { border-color: red; }
.bb_rosybrown { border-color: rosybrown; }
.bb_royalblue { border-color: royalblue; }
.bb_saddlebrown { border-color: saddlebrown; }
.bb_salmon { border-color: salmon; }
.bb_sandybrown { border-color: sandybrown; }
.bb_seagreen { border-color: seagreen; }
.bb_seashell { border-color: seashell; }
.bb_sienna { border-color: sienna; }
.bb_silver { border-color: silver; }
.bb_skyblue { border-color: skyblue; }
.bb_slateblue { border-color: slateblue; }
.bb_slategray { border-color: slategray; }
.bb_slategrey { border-color: slategrey; }
.bb_snow { border-color: snow; }
.bb_springgreen { border-color: springgreen; }
.bb_steelblue { border-color: steelblue; }
.bb_tan { border-color: tan; }
.bb_teal { border-color: teal; }
.bb_thistle { border-color: thistle; }
.bb_tomato { border-color: tomato; }
.bb_turquoise { border-color: turquoise; }
.bb_violet { border-color: violet; }
.bb_wheat { border-color: wheat; }
.bb_white { border-color: white; }
.bb_whitesmoke { border-color: whitesmoke; }
.bb_yellow { border-color: yellow; }
.bb_yellowgreen { border-color: yellowgreen; }
.bb_red_50 { border-color: #FFEBEE; }
.bb_red_100 { border-color: #FFCDD2; }
.bb_red_200 { border-color: #EF9A9A; }
.bb_red_300 { border-color: #E57373; }
.bb_red_400 { border-color: #EF5350; }
.bb_red_500 { border-color: #F44336; }
.bb_red_600 { border-color: #E53935; }
.bb_red_700 { border-color: #D32F2F; }
.bb_red_800 { border-color: #C62828; }
.bb_red_900 { border-color: #B71C1C; }
.bb_red_A100 { border-color: #FF8A80; }
.bb_red_A200 { border-color: #FF5252; }
.bb_red_A400 { border-color: #FF1744; }
.bb_red_A700 { border-color: #D50000; }
.bb_pink_50 { border-color: #FCE4EC; }
.bb_pink_100 { border-color: #F8BBD0; }
.bb_pink_200 { border-color: #F48FB1; }
.bb_pink_300 { border-color: #F06292; }
.bb_pink_400 { border-color: #EC407A; }
.bb_pink_500 { border-color: #E91E63; }
.bb_pink_600 { border-color: #D81B60; }
.bb_pink_700 { border-color: #C2185B; }
.bb_pink_800 { border-color: #AD1457; }
.bb_pink_900 { border-color: #880E4F; }
.bb_pink_A100 { border-color: #FF80AB; }
.bb_pink_A200 { border-color: #FF4081; }
.bb_pink_A400 { border-color: #F50057; }
.bb_pink_A700 { border-color: #C51162; }
.bb_purple_50 { background-color: #F3E5F5; }
.bb_purple_100 { background-color: #E1BEE7; }
.bb_purple_200 { background-color: #CE93D8; }
.bb_purple_300 { background-color: #BA68C8; }
.bb_purple_400 { background-color: #AB47BC; }
.bb_purple_500 { background-color: #9C27B0; }
.bb_purple_600 { background-color: #8E24AA; }
.bb_purple_700 { background-color: #7B1FA2; }
.bb_purple_800 { background-color: #6A1B9A; }
.bb_purple_900 { background-color: #4A148C; }
.bb_purple_A100 { background-color: #EA80FC; }
.bb_purple_A200 { background-color: #E040FB; }
.bb_purple_A400 { background-color: #D500F9; }
.bb_purple_A700 { background-color: #AA00FF; }
.bb_deeppurple_50 { background-color: #EDE7F6; }
.bb_deeppurple_100 { background-color: #D1C4E9; }
.bb_deeppurple_200 { background-color: #B39DDB; }
.bb_deeppurple_300 { background-color: #9575CD; }
.bb_deeppurple_400 { background-color: #7E57C2; }
.bb_deeppurple_500 { background-color: #673AB7; }
.bb_deeppurple_600 { background-color: #5E35B1; }
.bb_deeppurple_700 { background-color: #512DA8; }
.bb_deeppurple_800 { background-color: #4527A0; }
.bb_deeppurple_900 { background-color: #311B92; }
.bb_deeppurple_A100 { background-color: #B388FF; }
.bb_deeppurple_A200 { background-color: #7C4DFF; }
.bb_deeppurple_A400 { background-color: #651FFF; }
.bb_deeppurple_A700 { background-color: #6200EA; }
.bb_indigo_50 { background-color: #E8EAF6; }
.bb_indigo_100 { background-color: #C5CAE9; }
.bb_indigo_200 { background-color: #9FA8DA; }
.bb_indigo_300 { background-color: #7986CB; }
.bb_indigo_400 { background-color: #5C6BC0; }
.bb_indigo_500 { background-color: #3F51B5; }
.bb_indigo_600 { background-color: #3949AB; }
.bb_indigo_700 { background-color: #303F9F; }
.bb_indigo_800 { background-color: #283593; }
.bb_indigo_900 { background-color: #1A237E; }
.bb_indigo_A100 { background-color: #8C9EFF; }
.bb_indigo_A200 { background-color: #536DFE; }
.bb_indigo_A400 { background-color: #3D5AFE; }
.bb_indigo_A700 { background-color: #304FFE; }
.bb_blue_50 { background-color: #E3F2FD; }
.bb_blue_100 { background-color: #BBDEFB; }
.bb_blue_200 { background-color: #90CAF9; }
.bb_blue_300 { background-color: #64B5F6; }
.bb_blue_400 { background-color: #42A5F5; }
.bb_blue_500 { background-color: #2196F3; }
.bb_blue_600 { background-color: #1E88E5; }
.bb_blue_700 { background-color: #1976D2; }
.bb_blue_800 { background-color: #1565C0; }
.bb_blue_900 { background-color: #0D47A1; }
.bb_blue_A100 { background-color: #82B1FF; }
.bb_blue_A200 { background-color: #448AFF; }
.bb_blue_A400 { background-color: #2979FF; }
.bb_blue_A700 { background-color: #2962FF; }
.bb_lightblue_50 { background-color: #E3F2FD; }
.bb_lightblue_100 { background-color: #BBDEFB; }
.bb_lightblue_200 { background-color: #90CAF9; }
.bb_lightblue_300 { background-color: #64B5F6; }
.bb_lightblue_400 { background-color: #42A5F5; }
.bb_lightblue_500 { background-color: #2196F3; }
.bb_lightblue_600 { background-color: #1E88E5; }
.bb_lightblue_700 { background-color: #1976D2; }
.bb_lightblue_800 { background-color: #1565C0; }
.bb_lightblue_900 { background-color: #0D47A1; }
.bb_lightblue_A100 { background-color: #82B1FF; }
.bb_lightblue_A200 { background-color: #448AFF; }
.bb_lightblue_A400 { background-color: #2979FF; }
.bb_lightblue_A700 { background-color: #2962FF; }
.bb_cyan_50 { background-color: #E0F7FA; }
.bb_cyan_100 { background-color: #B2EBF2; }
.bb_cyan_200 { background-color: #80DEEA; }
.bb_cyan_300 { background-color: #4DD0E1; }
.bb_cyan_400 { background-color: #26C6DA; }
.bb_cyan_500 { background-color: #00BCD4; }
.bb_cyan_600 { background-color: #00ACC1; }
.bb_cyan_700 { background-color: #0097A7; }
.bb_cyan_800 { background-color: #00838F; }
.bb_cyan_900 { background-color: #006064; }
.bb_cyan_A100 { background-color: #84FFFF; }
.bb_cyan_A200 { background-color: #18FFFF; }
.bb_cyan_A400 { background-color: #00E5FF; }
.bb_cyan_A700 { background-color: #00B8D4; }
.bb_teal_50 { background-color: #E0F2F1; }
.bb_teal_100 { background-color: #B2DFDB; }
.bb_teal_200 { background-color: #80CBC4; }
.bb_teal_300 { background-color: #4DB6AC; }
.bb_teal_400 { background-color: #26A69A; }
.bb_teal_500 { background-color: #009688; }
.bb_teal_600 { background-color: #00897B; }
.bb_teal_700 { background-color: #00796B; }
.bb_teal_800 { background-color: #00695C; }
.bb_teal_900 { background-color: #004D40; }
.bb_teal_A100 { background-color: #A7FFEB; }
.bb_teal_A200 { background-color: #64FFDA; }
.bb_teal_A400 { background-color: #1DE9B6; }
.bb_teal_A700 { background-color: #00BFA5; }
.bb_green_50 { background-color: #E8F5E9; }
.bb_green_100 { background-color: #C8E6C9; }
.bb_green_200 { background-color: #A5D6A7; }
.bb_green_300 { background-color: #81C784; }
.bb_green_400 { background-color: #66BB6A; }
.bb_green_500 { background-color: #4CAF50; }
.bb_green_600 { background-color: #43A047; }
.bb_green_700 { background-color: #388E3C; }
.bb_green_800 { background-color: #2E7D32; }
.bb_green_900 { background-color: #1B5E20; }
.bb_green_A100 { background-color: #B9F6CA; }
.bb_green_A200 { background-color: #69F0AE; }
.bb_green_A400 { background-color: #00E676; }
.bb_green_A700 { background-color: #00C853; }
.bb_lightgreen_50 { background-color: #F1F8E9; }
.bb_lightgreen_100 { background-color: #DCEDC8; }
.bb_lightgreen_200 { background-color: #C5E1A5; }
.bb_lightgreen_300 { background-color: #AED581; }
.bb_lightgreen_400 { background-color: #9CCC65; }
.bb_lightgreen_500 { background-color: #8BC34A; }
.bb_lightgreen_600 { background-color: #7CB342; }
.bb_lightgreen_700 { background-color: #689F38; }
.bb_lightgreen_800 { background-color: #558B2F; }
.bb_lightgreen_900 { background-color: #33691E; }
.bb_lightgreen_A100 { background-color: #CCFF90; }
.bb_lightgreen_A200 { background-color: #B2FF59; }
.bb_lightgreen_A400 { background-color: #76FF03; }
.bb_lightgreen_A700 { background-color: #64DD17; }
.bb_lime_50 { background-color: #F9FBE7; }
.bb_lime_100 { background-color: #F0F4C3; }
.bb_lime_200 { background-color: #E6EE9C; }
.bb_lime_300 { background-color: #DCE775; }
.bb_lime_400 { background-color: #D4E157; }
.bb_lime_500 { background-color: #CDDC39; }
.bb_lime_600 { background-color: #C0CA33; }
.bb_lime_700 { background-color: #AFB42B; }
.bb_lime_800 { background-color: #9E9D24; }
.bb_lime_900 { background-color: #827717; }
.bb_lime_A100 { background-color: #F4FF81; }
.bb_lime_A200 { background-color: #EEFF41; }
.bb_lime_A400 { background-color: #C6FF00; }
.bb_lime_A700 { background-color: #AEEA00; }
.bb_yellow_50 { background-color: #FFFDE7; }
.bb_yellow_100 { background-color: #FFF9C4; }
.bb_yellow_200 { background-color: #FFF59D; }
.bb_yellow_300 { background-color: #FFF176; }
.bb_yellow_400 { background-color: #FFEE58; }
.bb_yellow_500 { background-color: #FFEB3B; }
.bb_yellow_600 { background-color: #FDD835; }
.bb_yellow_700 { background-color: #FBC02D; }
.bb_yellow_800 { background-color: #F9A825; }
.bb_yellow_900 { background-color: #F57F17; }
.bb_yellow_A100 { background-color: #FFFF8D; }
.bb_yellow_A200 { background-color: #FFFF00; }
.bb_yellow_A400 { background-color: #FFEA00; }
.bb_yellow_A700 { background-color: #FFD600; }
.bb_amber_50 { background-color: #FFF8E1; }
.bb_amber_100 { background-color: #FFECB3; }
.bb_amber_200 { background-color: #FFE082; }
.bb_amber_300 { background-color: #FFD54F; }
.bb_amber_400 { background-color: #FFCA28; }
.bb_amber_500 { background-color: #FFC107; }
.bb_amber_600 { background-color: #FFB300; }
.bb_amber_700 { background-color: #FFA000; }
.bb_amber_800 { background-color: #FF8F00; }
.bb_amber_900 { background-color: #FF6F00; }
.bb_amber_A100 { background-color: #FFE57F; }
.bb_amber_A200 { background-color: #FFD740; }
.bb_amber_A400 { background-color: #FFC400; }
.bb_amber_A700 { background-color: #FFAB00; }
.bb_orange_50 { background-color: #FFF3E0; }
.bb_orange_100 { background-color: #FFE0B2; }
.bb_orange_200 { background-color: #FFCC80; }
.bb_orange_300 { background-color: #FFB74D; }
.bb_orange_400 { background-color: #FFA726; }
.bb_orange_500 { background-color: #FF9800; }
.bb_orange_600 { background-color: #FB8C00; }
.bb_orange_700 { background-color: #F57C00; }
.bb_orange_800 { background-color: #EF6C00; }
.bb_orange_900 { background-color: #E65100; }
.bb_orange_A100 { background-color: #FFD180; }
.bb_orange_A200 { background-color: #FFAB40; }
.bb_orange_A400 { background-color: #FF9100; }
.bb_orange_A700 { background-color: #FF6D00; }
.bb_deeporange_50 { background-color: #FBE9E7; }
.bb_deeporange_100 { background-color: #FFCCBC; }
.bb_deeporange_200 { background-color: #FFAB91; }
.bb_deeporange_300 { background-color: #FF8A65; }
.bb_deeporange_400 { background-color: #FF7043; }
.bb_deeporange_500 { background-color: #FF5722; }
.bb_deeporange_600 { background-color: #F4511E; }
.bb_deeporange_700 { background-color: #E64A19; }
.bb_deeporange_800 { background-color: #D84315; }
.bb_deeporange_900 { background-color: #BF360C; }
.bb_deeporange_A100 { background-color: #FF9E80; }
.bb_deeporange_A200 { background-color: #FF6E40; }
.bb_deeporange_A400 { background-color: #FF3D00; }
.bb_deeporange_A700 { background-color: #DD2C00; }
.bb_brown_50 { background-color: #EFEBE9; }
.bb_brown_100 { background-color: #D7CCC8; }
.bb_brown_200 { background-color: #BCAAA4; }
.bb_brown_300 { background-color: #A1887F; }
.bb_brown_400 { background-color: #8D6E63; }
.bb_brown_500 { background-color: #795548; }
.bb_brown_600 { background-color: #6D4C41; }
.bb_brown_700 { background-color: #5D4037; }
.bb_brown_800 { background-color: #4E342E; }
.bb_brown_900 { background-color: #3E2723; }
.bb_gray_50 { background-color: #FAFAFA; }
.bb_gray_100 { background-color: #F5F5F5; }
.bb_gray_200 { background-color: #EEEEEE; }
.bb_gray_300 { background-color: #E0E0E0; }
.bb_gray_400 { background-color: #BDBDBD; }
.bb_gray_500 { background-color: #9E9E9E; }
.bb_gray_600 { background-color: #757575; }
.bb_gray_700 { background-color: #616161; }
.bb_gray_800 { background-color: #424242; }
.bb_gray_900 { background-color: #212121; }
.bb_grey_50 { background-color: #FAFAFA; }
.bb_grey_100 { background-color: #F5F5F5; }
.bb_grey_200 { background-color: #EEEEEE; }
.bb_grey_300 { background-color: #E0E0E0; }
.bb_grey_400 { background-color: #BDBDBD; }
.bb_grey_500 { background-color: #9E9E9E; }
.bb_grey_600 { background-color: #757575; }
.bb_grey_700 { background-color: #616161; }
.bb_grey_800 { background-color: #424242; }
.bb_grey_900 { background-color: #212121; }
.bb_bluegray_50 { background-color: #ECEFF1; }
.bb_bluegray_100 { background-color: #CFD8DC; }
.bb_bluegray_200 { background-color: #B0BEC5; }
.bb_bluegray_300 { background-color: #90A4AE; }
.bb_bluegray_400 { background-color: #78909C; }
.bb_bluegray_500 { background-color: #607D8B; }
.bb_bluegray_600 { background-color: #546E7A; }
.bb_bluegray_700 { background-color: #455A64; }
.bb_bluegray_800 { background-color: #37474F; }
.bb_bluegray_900 { background-color: #263238; }
.bb_bluegrey_50 { background-color: #ECEFF1; }
.bb_bluegrey_100 { background-color: #CFD8DC; }
.bb_bluegrey_200 { background-color: #B0BEC5; }
.bb_bluegrey_300 { background-color: #90A4AE; }
.bb_bluegrey_400 { background-color: #78909C; }
.bb_bluegrey_500 { background-color: #607D8B; }
.bb_bluegrey_600 { background-color: #546E7A; }
.bb_bluegrey_700 { background-color: #455A64; }
.bb_bluegrey_800 { background-color: #37474F; }
.bb_bluegrey_900 { background-color: #263238; }

9
assets/css/border/index.css Normal file
View File

@ -0,0 +1,9 @@
/*******************************************************************************
* Borders: *
*******************************************************************************/
@import url("~assets/css/border/base.css");
@import url("~assets/css/border/width.css");
@import url("~assets/css/border/color.css");
@import url("~assets/css/border/radius.css");
@import url("~assets/css/border/offset.css");

648
assets/css/border/offset.css Normal file
View File

@ -0,0 +1,648 @@
/*******************************************************************************
* Border Offsets: *
*******************************************************************************/
/*********************/
/* All Sides Borders */
/*********************/
[class~=bo0\.5]::before,
[class~=bo1]::before,
[class~=bo1\.5]::before,
[class~=bo2]::before,
[class~=bo2\.5]::before,
[class~=bo3]::before,
[class~=bo3\.5]::before,
[class~=bo4]::before,
[class~=bo5]::before,
[class~=bo6]::before,
[class~=bo7]::before,
[class~=bo8]::before,
[class~=bo9]::before,
[class~=bo10]::before,
[class~=bo11]::before,
[class~=bo12]::before,
[class~=bo16]::before,
[class~=bo20]::before,
[class~=bo24]::before,
[class~=bo28]::before,
[class~=bo32]::before,
[class~=bo36]::before,
[class~=bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: var(--z-index-offsetted-borders);
background: transparent;
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.bo0\.5::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width));
}
.bo1::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width));
}
.bo1\.5::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width));
}
.bo2::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width));
}
.bo2\.5::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width));
}
.bo3::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width));
}
.bo3\.5::before {
top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width));
}
.bo4::before {
top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width));
}
.bo5::before {
top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width));
}
.bo6::before {
top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width));
}
.bo7::before {
top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width));
}
.bo8::before {
top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width));
}
.bo9::before {
top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width));
}
.bo10::before {
top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width));
}
.bo11::before {
top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width));
}
.bo12::before {
top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width));
}
.bo14::before {
top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width));
}
.bo16::before {
top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width));
}
.bo20::before {
top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width));
}
.bo24::before {
top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width));
}
.bo28::before {
top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width));
}
.bo32::before {
top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width));
}
.bo36::before {
top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width));
}
.bo40::before {
top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width));
left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width));
}
/********************/
/* Border Direction */
/********************/
.botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
/**************************/
/* All-Sides Border Width */
/**************************/
.bow0 { --border-offsetted-width: 0; } .bow0\.25 { --border-offsetted-width: 0.0625rem; }
.bow0\.5 { --border-offsetted-width: 0.125rem; } .bow1 { --border-offsetted-width: 0.25rem; }
.bow1\.5 { --border-offsetted-width: 0.375rem; } .bow2 { --border-offsetted-width: 0.5rem; }
.bow2\.5 { --border-offsetted-width: 0.625rem; } .bow3 { --border-offsetted-width: 0.75rem; }
.bow3\.5 { --border-offsetted-width: 0.875rem; } .bow4 { --border-offsetted-width: 1rem; }
.bow5 { --border-offsetted-width: 1.25rem; } .bow6 { --border-offsetted-width: 1.5rem; }
.bow7 { --border-offsetted-width: 1.75rem; } .bow8 { --border-offsetted-width: 2rem; }
.bow9 { --border-offsetted-width: 2.25rem; } .bow10 { --border-offsetted-width: 2.5rem; }
.bow11 { --border-offsetted-width: 2.75rem; } .bow12 { --border-offsetted-width: 3rem; }
.bow14 { --border-offsetted-width: 3.5rem; } .bow16 { --border-offsetted-width: 4rem; }
.bow20 { --border-offsetted-width: 5rem; } .bow24 { --border-offsetted-width: 6rem; }
.bow28 { --border-offsetted-width: 7rem; } .bow32 { --border-offsetted-width: 8rem; }
.bow36 { --border-offsetted-width: 9rem; } .bow40 { --border-offsetted-width: 10rem; }
.bow44 { --border-offsetted-width: 11rem; } .bow48 { --border-offsetted-width: 12rem; }
.bow52 { --border-offsetted-width: 13rem; } .bow56 { --border-offsetted-width: 14rem; }
.bow60 { --border-offsetted-width: 15rem; } .bow64 { --border-offsetted-width: 16rem; }
.bow72 { --border-offsetted-width: 18rem; } .bow80 { --border-offsetted-width: 20rem; }
.bow96 { --border-offsetted-width: 24rem; } .bow1px { --border-offsetted-width: 1px; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
[class~=sm\:bo0\.5]::before,
[class~=sm\:bo1]::before,
[class~=sm\:bo1\.5]::before,
[class~=sm\:bo2]::before,
[class~=sm\:bo2\.5]::before,
[class~=sm\:bo3]::before,
[class~=sm\:bo3\.5]::before,
[class~=sm\:bo4]::before,
[class~=sm\:bo5]::before,
[class~=sm\:bo6]::before,
[class~=sm\:bo7]::before,
[class~=sm\:bo8]::before,
[class~=sm\:bo9]::before,
[class~=sm\:bo10]::before,
[class~=sm\:bo11]::before,
[class~=sm\:bo12]::before,
[class~=sm\:bo16]::before,
[class~=sm\:bo20]::before,
[class~=sm\:bo24]::before,
[class~=sm\:bo28]::before,
[class~=sm\:bo32]::before,
[class~=sm\:bo36]::before,
[class~=sm\:bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
/* z-index: 10; */
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.sm\:bo0\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width)); }
.sm\:bo1::before { top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width)); }
.sm\:bo1\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width)); }
.sm\:bo2::before { top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width)); }
.sm\:bo2\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width)); }
.sm\:bo3::before { top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width)); }
.sm\:bo3\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width)); }
.sm\:bo4::before { top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width)); }
.sm\:bo5::before { top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width)); }
.sm\:bo6::before { top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width)); }
.sm\:bo7::before { top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width)); }
.sm\:bo8::before { top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width)); }
.sm\:bo9::before { top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width)); }
.sm\:bo10::before { top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width)); }
.sm\:bo11::before { top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width)); }
.sm\:bo12::before { top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width)); }
.sm\:bo14::before { top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width)); }
.sm\:bo16::before { top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width)); }
.sm\:bo20::before { top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width)); }
.sm\:bo24::before { top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width)); }
.sm\:bo28::before { top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width)); }
.sm\:bo32::before { top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width)); }
.sm\:bo36::before { top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width)); }
.sm\:bo40::before { top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width)); }
.sm\:botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.sm\:botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.sm\:bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.sm\:bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.sm\:bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.sm\:bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.sm\:bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.sm\:bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
.sm\:bow0 { --border-offsetted-width: 0; } .sm\:bow0\.25 { --border-offsetted-width: 0.0625rem; }
.sm\:bow0\.5 { --border-offsetted-width: 0.125rem; } .sm\:bow1 { --border-offsetted-width: 0.25rem; }
.sm\:bow1\.5 { --border-offsetted-width: 0.375rem; } .sm\:bow2 { --border-offsetted-width: 0.5rem; }
.sm\:bow2\.5 { --border-offsetted-width: 0.625rem; } .sm\:bow3 { --border-offsetted-width: 0.75rem; }
.sm\:bow3\.5 { --border-offsetted-width: 0.875rem; } .sm\:bow4 { --border-offsetted-width: 1rem; }
.sm\:bow5 { --border-offsetted-width: 1.25rem; } .sm\:bow6 { --border-offsetted-width: 1.5rem; }
.sm\:bow7 { --border-offsetted-width: 1.75rem; } .sm\:bow8 { --border-offsetted-width: 2rem; }
.sm\:bow9 { --border-offsetted-width: 2.25rem; } .sm\:bow10 { --border-offsetted-width: 2.5rem; }
.sm\:bow11 { --border-offsetted-width: 2.75rem; } .sm\:bow12 { --border-offsetted-width: 3rem; }
.sm\:bow14 { --border-offsetted-width: 3.5rem; } .sm\:bow16 { --border-offsetted-width: 4rem; }
.sm\:bow20 { --border-offsetted-width: 5rem; } .sm\:bow24 { --border-offsetted-width: 6rem; }
.sm\:bow28 { --border-offsetted-width: 7rem; } .sm\:bow32 { --border-offsetted-width: 8rem; }
.sm\:bow36 { --border-offsetted-width: 9rem; } .sm\:bow40 { --border-offsetted-width: 10rem; }
.sm\:bow44 { --border-offsetted-width: 11rem; } .sm\:bow48 { --border-offsetted-width: 12rem; }
.sm\:bow52 { --border-offsetted-width: 13rem; } .sm\:bow56 { --border-offsetted-width: 14rem; }
.sm\:bow60 { --border-offsetted-width: 15rem; } .sm\:bow64 { --border-offsetted-width: 16rem; }
.sm\:bow72 { --border-offsetted-width: 18rem; } .sm\:bow80 { --border-offsetted-width: 20rem; }
.sm\:bow96 { --border-offsetted-width: 24rem; } .sm\:bow1px { --border-offsetted-width: 1px; }
}
@media (min-width: 768px) {
[class~=md\:bo0\.5]::before,
[class~=md\:bo1]::before,
[class~=md\:bo1\.5]::before,
[class~=md\:bo2]::before,
[class~=md\:bo2\.5]::before,
[class~=md\:bo3]::before,
[class~=md\:bo3\.5]::before,
[class~=md\:bo4]::before,
[class~=md\:bo5]::before,
[class~=md\:bo6]::before,
[class~=md\:bo7]::before,
[class~=md\:bo8]::before,
[class~=md\:bo9]::before,
[class~=md\:bo10]::before,
[class~=md\:bo11]::before,
[class~=md\:bo12]::before,
[class~=md\:bo16]::before,
[class~=md\:bo20]::before,
[class~=md\:bo24]::before,
[class~=md\:bo28]::before,
[class~=md\:bo32]::before,
[class~=md\:bo36]::before,
[class~=md\:bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
/* z-index: 10; */
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.md\:bo0\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width)); }
.md\:bo1::before { top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width)); }
.md\:bo1\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width)); }
.md\:bo2::before { top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width)); }
.md\:bo2\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width)); }
.md\:bo3::before { top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width)); }
.md\:bo3\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width)); }
.md\:bo4::before { top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width)); }
.md\:bo5::before { top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width)); }
.md\:bo6::before { top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width)); }
.md\:bo7::before { top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width)); }
.md\:bo8::before { top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width)); }
.md\:bo9::before { top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width)); }
.md\:bo10::before { top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width)); }
.md\:bo11::before { top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width)); }
.md\:bo12::before { top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width)); }
.md\:bo14::before { top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width)); }
.md\:bo16::before { top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width)); }
.md\:bo20::before { top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width)); }
.md\:bo24::before { top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width)); }
.md\:bo28::before { top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width)); }
.md\:bo32::before { top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width)); }
.md\:bo36::before { top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width)); }
.md\:bo40::before { top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width)); }
.md\:botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.md\:botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.md\:bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.md\:bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.md\:bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.md\:bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.md\:bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.md\:bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
.md\:bow0 { --border-offsetted-width: 0; } .md\:bow0\.25 { --border-offsetted-width: 0.0625rem; }
.md\:bow0\.5 { --border-offsetted-width: 0.125rem; } .md\:bow1 { --border-offsetted-width: 0.25rem; }
.md\:bow1\.5 { --border-offsetted-width: 0.375rem; } .md\:bow2 { --border-offsetted-width: 0.5rem; }
.md\:bow2\.5 { --border-offsetted-width: 0.625rem; } .md\:bow3 { --border-offsetted-width: 0.75rem; }
.md\:bow3\.5 { --border-offsetted-width: 0.875rem; } .md\:bow4 { --border-offsetted-width: 1rem; }
.md\:bow5 { --border-offsetted-width: 1.25rem; } .md\:bow6 { --border-offsetted-width: 1.5rem; }
.md\:bow7 { --border-offsetted-width: 1.75rem; } .md\:bow8 { --border-offsetted-width: 2rem; }
.md\:bow9 { --border-offsetted-width: 2.25rem; } .md\:bow10 { --border-offsetted-width: 2.5rem; }
.md\:bow11 { --border-offsetted-width: 2.75rem; } .md\:bow12 { --border-offsetted-width: 3rem; }
.md\:bow14 { --border-offsetted-width: 3.5rem; } .md\:bow16 { --border-offsetted-width: 4rem; }
.md\:bow20 { --border-offsetted-width: 5rem; } .md\:bow24 { --border-offsetted-width: 6rem; }
.md\:bow28 { --border-offsetted-width: 7rem; } .md\:bow32 { --border-offsetted-width: 8rem; }
.md\:bow36 { --border-offsetted-width: 9rem; } .md\:bow40 { --border-offsetted-width: 10rem; }
.md\:bow44 { --border-offsetted-width: 11rem; } .md\:bow48 { --border-offsetted-width: 12rem; }
.md\:bow52 { --border-offsetted-width: 13rem; } .md\:bow56 { --border-offsetted-width: 14rem; }
.md\:bow60 { --border-offsetted-width: 15rem; } .md\:bow64 { --border-offsetted-width: 16rem; }
.md\:bow72 { --border-offsetted-width: 18rem; } .md\:bow80 { --border-offsetted-width: 20rem; }
.md\:bow96 { --border-offsetted-width: 24rem; } .md\:bow1px { --border-offsetted-width: 1px; }
}
@media (min-width: 992px) {
[class~=lg\:bo0\.5]::before,
[class~=lg\:bo1]::before,
[class~=lg\:bo1\.5]::before,
[class~=lg\:bo2]::before,
[class~=lg\:bo2\.5]::before,
[class~=lg\:bo3]::before,
[class~=lg\:bo3\.5]::before,
[class~=lg\:bo4]::before,
[class~=lg\:bo5]::before,
[class~=lg\:bo6]::before,
[class~=lg\:bo7]::before,
[class~=lg\:bo8]::before,
[class~=lg\:bo9]::before,
[class~=lg\:bo10]::before,
[class~=lg\:bo11]::before,
[class~=lg\:bo12]::before,
[class~=lg\:bo16]::before,
[class~=lg\:bo20]::before,
[class~=lg\:bo24]::before,
[class~=lg\:bo28]::before,
[class~=lg\:bo32]::before,
[class~=lg\:bo36]::before,
[class~=lg\:bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
/* z-index: 10; */
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.lg\:bo0\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width)); }
.lg\:bo1::before { top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width)); }
.lg\:bo1\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width)); }
.lg\:bo2::before { top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width)); }
.lg\:bo2\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width)); }
.lg\:bo3::before { top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width)); }
.lg\:bo3\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width)); }
.lg\:bo4::before { top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width)); }
.lg\:bo5::before { top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width)); }
.lg\:bo6::before { top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width)); }
.lg\:bo7::before { top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width)); }
.lg\:bo8::before { top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width)); }
.lg\:bo9::before { top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width)); }
.lg\:bo10::before { top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width)); }
.lg\:bo11::before { top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width)); }
.lg\:bo12::before { top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width)); }
.lg\:bo14::before { top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width)); }
.lg\:bo16::before { top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width)); }
.lg\:bo20::before { top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width)); }
.lg\:bo24::before { top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width)); }
.lg\:bo28::before { top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width)); }
.lg\:bo32::before { top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width)); }
.lg\:bo36::before { top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width)); }
.lg\:bo40::before { top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width)); }
.lg\:botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.lg\:botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.lg\:bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.lg\:bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.lg\:bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.lg\:bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.lg\:bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.lg\:bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
.lg\:bow0 { --border-offsetted-width: 0; } .lg\:bow0\.25 { --border-offsetted-width: 0.0625rem; }
.lg\:bow0\.5 { --border-offsetted-width: 0.125rem; } .lg\:bow1 { --border-offsetted-width: 0.25rem; }
.lg\:bow1\.5 { --border-offsetted-width: 0.375rem; } .lg\:bow2 { --border-offsetted-width: 0.5rem; }
.lg\:bow2\.5 { --border-offsetted-width: 0.625rem; } .lg\:bow3 { --border-offsetted-width: 0.75rem; }
.lg\:bow3\.5 { --border-offsetted-width: 0.875rem; } .lg\:bow4 { --border-offsetted-width: 1rem; }
.lg\:bow5 { --border-offsetted-width: 1.25rem; } .lg\:bow6 { --border-offsetted-width: 1.5rem; }
.lg\:bow7 { --border-offsetted-width: 1.75rem; } .lg\:bow8 { --border-offsetted-width: 2rem; }
.lg\:bow9 { --border-offsetted-width: 2.25rem; } .lg\:bow10 { --border-offsetted-width: 2.5rem; }
.lg\:bow11 { --border-offsetted-width: 2.75rem; } .lg\:bow12 { --border-offsetted-width: 3rem; }
.lg\:bow14 { --border-offsetted-width: 3.5rem; } .lg\:bow16 { --border-offsetted-width: 4rem; }
.lg\:bow20 { --border-offsetted-width: 5rem; } .lg\:bow24 { --border-offsetted-width: 6rem; }
.lg\:bow28 { --border-offsetted-width: 7rem; } .lg\:bow32 { --border-offsetted-width: 8rem; }
.lg\:bow36 { --border-offsetted-width: 9rem; } .lg\:bow40 { --border-offsetted-width: 10rem; }
.lg\:bow44 { --border-offsetted-width: 11rem; } .lg\:bow48 { --border-offsetted-width: 12rem; }
.lg\:bow52 { --border-offsetted-width: 13rem; } .lg\:bow56 { --border-offsetted-width: 14rem; }
.lg\:bow60 { --border-offsetted-width: 15rem; } .lg\:bow64 { --border-offsetted-width: 16rem; }
.lg\:bow72 { --border-offsetted-width: 18rem; } .lg\:bow80 { --border-offsetted-width: 20rem; }
.lg\:bow96 { --border-offsetted-width: 24rem; } .lg\:bow1px { --border-offsetted-width: 1px; }
}
@media (min-width: 1200px) {
[class~=xl\:bo0\.5]::before,
[class~=xl\:bo1]::before,
[class~=xl\:bo1\.5]::before,
[class~=xl\:bo2]::before,
[class~=xl\:bo2\.5]::before,
[class~=xl\:bo3]::before,
[class~=xl\:bo3\.5]::before,
[class~=xl\:bo4]::before,
[class~=xl\:bo5]::before,
[class~=xl\:bo6]::before,
[class~=xl\:bo7]::before,
[class~=xl\:bo8]::before,
[class~=xl\:bo9]::before,
[class~=xl\:bo10]::before,
[class~=xl\:bo11]::before,
[class~=xl\:bo12]::before,
[class~=xl\:bo16]::before,
[class~=xl\:bo20]::before,
[class~=xl\:bo24]::before,
[class~=xl\:bo28]::before,
[class~=xl\:bo32]::before,
[class~=xl\:bo36]::before,
[class~=xl\:bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
/* z-index: 10; */
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.xl\:bo0\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width)); }
.xl\:bo1::before { top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width)); }
.xl\:bo1\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width)); }
.xl\:bo2::before { top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width)); }
.xl\:bo2\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width)); }
.xl\:bo3::before { top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width)); }
.xl\:bo3\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width)); }
.xl\:bo4::before { top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width)); }
.xl\:bo5::before { top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width)); }
.xl\:bo6::before { top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width)); }
.xl\:bo7::before { top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width)); }
.xl\:bo8::before { top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width)); }
.xl\:bo9::before { top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width)); }
.xl\:bo10::before { top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width)); }
.xl\:bo11::before { top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width)); }
.xl\:bo12::before { top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width)); }
.xl\:bo14::before { top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width)); }
.xl\:bo16::before { top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width)); }
.xl\:bo20::before { top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width)); }
.xl\:bo24::before { top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width)); }
.xl\:bo28::before { top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width)); }
.xl\:bo32::before { top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width)); }
.xl\:bo36::before { top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width)); }
.xl\:bo40::before { top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width)); }
.xl\:botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.xl\:botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.xl\:bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.xl\:bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.xl\:bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.xl\:bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.xl\:bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.xl\:bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
.xl\:bow0 { --border-offsetted-width: 0; } .xl\:bow0\.25 { --border-offsetted-width: 0.0625rem; }
.xl\:bow0\.5 { --border-offsetted-width: 0.125rem; } .xl\:bow1 { --border-offsetted-width: 0.25rem; }
.xl\:bow1\.5 { --border-offsetted-width: 0.375rem; } .xl\:bow2 { --border-offsetted-width: 0.5rem; }
.xl\:bow2\.5 { --border-offsetted-width: 0.625rem; } .xl\:bow3 { --border-offsetted-width: 0.75rem; }
.xl\:bow3\.5 { --border-offsetted-width: 0.875rem; } .xl\:bow4 { --border-offsetted-width: 1rem; }
.xl\:bow5 { --border-offsetted-width: 1.25rem; } .xl\:bow6 { --border-offsetted-width: 1.5rem; }
.xl\:bow7 { --border-offsetted-width: 1.75rem; } .xl\:bow8 { --border-offsetted-width: 2rem; }
.xl\:bow9 { --border-offsetted-width: 2.25rem; } .xl\:bow10 { --border-offsetted-width: 2.5rem; }
.xl\:bow11 { --border-offsetted-width: 2.75rem; } .xl\:bow12 { --border-offsetted-width: 3rem; }
.xl\:bow14 { --border-offsetted-width: 3.5rem; } .xl\:bow16 { --border-offsetted-width: 4rem; }
.xl\:bow20 { --border-offsetted-width: 5rem; } .xl\:bow24 { --border-offsetted-width: 6rem; }
.xl\:bow28 { --border-offsetted-width: 7rem; } .xl\:bow32 { --border-offsetted-width: 8rem; }
.xl\:bow36 { --border-offsetted-width: 9rem; } .xl\:bow40 { --border-offsetted-width: 10rem; }
.xl\:bow44 { --border-offsetted-width: 11rem; } .xl\:bow48 { --border-offsetted-width: 12rem; }
.xl\:bow52 { --border-offsetted-width: 13rem; } .xl\:bow56 { --border-offsetted-width: 14rem; }
.xl\:bow60 { --border-offsetted-width: 15rem; } .xl\:bow64 { --border-offsetted-width: 16rem; }
.xl\:bow72 { --border-offsetted-width: 18rem; } .xl\:bow80 { --border-offsetted-width: 20rem; }
.xl\:bow96 { --border-offsetted-width: 24rem; } .xl\:bow1px { --border-offsetted-width: 1px; }
}
@media (min-width: 1400px) {
[class~=xxl\:bo0\.5]::before,
[class~=xxl\:bo1]::before,
[class~=xxl\:bo1\.5]::before,
[class~=xxl\:bo2]::before,
[class~=xxl\:bo2\.5]::before,
[class~=xxl\:bo3]::before,
[class~=xxl\:bo3\.5]::before,
[class~=xxl\:bo4]::before,
[class~=xxl\:bo5]::before,
[class~=xxl\:bo6]::before,
[class~=xxl\:bo7]::before,
[class~=xxl\:bo8]::before,
[class~=xxl\:bo9]::before,
[class~=xxl\:bo10]::before,
[class~=xxl\:bo11]::before,
[class~=xxl\:bo12]::before,
[class~=xxl\:bo16]::before,
[class~=xxl\:bo20]::before,
[class~=xxl\:bo24]::before,
[class~=xxl\:bo28]::before,
[class~=xxl\:bo32]::before,
[class~=xxl\:bo36]::before,
[class~=xxl\:bo40]::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
/* z-index: 10; */
--border-offsetted-width: 0.125rem;
--border-offsetted-style: solid;
--border-offsetted-color: black;
--border-offsetted-horizontal-direction: -1;
--border-offsetted-vertical-direction: -1;
border: var(--border-offsetted-width) var(--border-offsetted-style) var(--border-offsetted-color);
}
.xxl\:bo0\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.125rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.125rem - var(--border-offsetted-width)); }
.xxl\:bo1::before { top: calc(var(--border-offsetted-vertical-direction) * 0.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.25rem - var(--border-offsetted-width)); }
.xxl\:bo1\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.375rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.375rem - var(--border-offsetted-width)); }
.xxl\:bo2::before { top: calc(var(--border-offsetted-vertical-direction) * 0.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.5rem - var(--border-offsetted-width)); }
.xxl\:bo2\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.625rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.625rem - var(--border-offsetted-width)); }
.xxl\:bo3::before { top: calc(var(--border-offsetted-vertical-direction) * 0.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.75rem - var(--border-offsetted-width)); }
.xxl\:bo3\.5::before { top: calc(var(--border-offsetted-vertical-direction) * 0.875rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 0.875rem - var(--border-offsetted-width)); }
.xxl\:bo4::before { top: calc(var(--border-offsetted-vertical-direction) * 1rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1rem - var(--border-offsetted-width)); }
.xxl\:bo5::before { top: calc(var(--border-offsetted-vertical-direction) * 1.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.25rem - var(--border-offsetted-width)); }
.xxl\:bo6::before { top: calc(var(--border-offsetted-vertical-direction) * 1.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.5rem - var(--border-offsetted-width)); }
.xxl\:bo7::before { top: calc(var(--border-offsetted-vertical-direction) * 1.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 1.75rem - var(--border-offsetted-width)); }
.xxl\:bo8::before { top: calc(var(--border-offsetted-vertical-direction) * 2rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2rem - var(--border-offsetted-width)); }
.xxl\:bo9::before { top: calc(var(--border-offsetted-vertical-direction) * 2.25rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.25rem - var(--border-offsetted-width)); }
.xxl\:bo10::before { top: calc(var(--border-offsetted-vertical-direction) * 2.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.5rem - var(--border-offsetted-width)); }
.xxl\:bo11::before { top: calc(var(--border-offsetted-vertical-direction) * 2.75rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 2.75rem - var(--border-offsetted-width)); }
.xxl\:bo12::before { top: calc(var(--border-offsetted-vertical-direction) * 3rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3rem - var(--border-offsetted-width)); }
.xxl\:bo14::before { top: calc(var(--border-offsetted-vertical-direction) * 3.5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 3.5rem - var(--border-offsetted-width)); }
.xxl\:bo16::before { top: calc(var(--border-offsetted-vertical-direction) * 4rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 4rem - var(--border-offsetted-width)); }
.xxl\:bo20::before { top: calc(var(--border-offsetted-vertical-direction) * 5rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 5rem - var(--border-offsetted-width)); }
.xxl\:bo24::before { top: calc(var(--border-offsetted-vertical-direction) * 6rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 6rem - var(--border-offsetted-width)); }
.xxl\:bo28::before { top: calc(var(--border-offsetted-vertical-direction) * 7rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 7rem - var(--border-offsetted-width)); }
.xxl\:bo32::before { top: calc(var(--border-offsetted-vertical-direction) * 8rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 8rem - var(--border-offsetted-width)); }
.xxl\:bo36::before { top: calc(var(--border-offsetted-vertical-direction) * 9rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 9rem - var(--border-offsetted-width)); }
.xxl\:bo40::before { top: calc(var(--border-offsetted-vertical-direction) * 10rem - var(--border-offsetted-width)); left: calc(var(--border-offsetted-horizontal-direction) * 10rem - var(--border-offsetted-width)); }
.xxl\:botl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: -1; }
.xxl\:botr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: -1; }
.xxl\:bobl::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: +1; }
.xxl\:bobr::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: +1; }
.xxl\:bot::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: -1; }
.xxl\:bob::before { --border-offsetted-horizontal-direction: 0; --border-offsetted-vertical-direction: +1; }
.xxl\:bol::before { --border-offsetted-horizontal-direction: -1; --border-offsetted-vertical-direction: 0; }
.xxl\:bor::before { --border-offsetted-horizontal-direction: +1; --border-offsetted-vertical-direction: 0; }
.xxl\:bow0 { --border-offsetted-width: 0; } .xxl\:bow0\.25 { --border-offsetted-width: 0.0625rem; }
.xxl\:bow0\.5 { --border-offsetted-width: 0.125rem; } .xxl\:bow1 { --border-offsetted-width: 0.25rem; }
.xxl\:bow1\.5 { --border-offsetted-width: 0.375rem; } .xxl\:bow2 { --border-offsetted-width: 0.5rem; }
.xxl\:bow2\.5 { --border-offsetted-width: 0.625rem; } .xxl\:bow3 { --border-offsetted-width: 0.75rem; }
.xxl\:bow3\.5 { --border-offsetted-width: 0.875rem; } .xxl\:bow4 { --border-offsetted-width: 1rem; }
.xxl\:bow5 { --border-offsetted-width: 1.25rem; } .xxl\:bow6 { --border-offsetted-width: 1.5rem; }
.xxl\:bow7 { --border-offsetted-width: 1.75rem; } .xxl\:bow8 { --border-offsetted-width: 2rem; }
.xxl\:bow9 { --border-offsetted-width: 2.25rem; } .xxl\:bow10 { --border-offsetted-width: 2.5rem; }
.xxl\:bow11 { --border-offsetted-width: 2.75rem; } .xxl\:bow12 { --border-offsetted-width: 3rem; }
.xxl\:bow14 { --border-offsetted-width: 3.5rem; } .xxl\:bow16 { --border-offsetted-width: 4rem; }
.xxl\:bow20 { --border-offsetted-width: 5rem; } .xxl\:bow24 { --border-offsetted-width: 6rem; }
.xxl\:bow28 { --border-offsetted-width: 7rem; } .xxl\:bow32 { --border-offsetted-width: 8rem; }
.xxl\:bow36 { --border-offsetted-width: 9rem; } .xxl\:bow40 { --border-offsetted-width: 10rem; }
.xxl\:bow44 { --border-offsetted-width: 11rem; } .xxl\:bow48 { --border-offsetted-width: 12rem; }
.xxl\:bow52 { --border-offsetted-width: 13rem; } .xxl\:bow56 { --border-offsetted-width: 14rem; }
.xxl\:bow60 { --border-offsetted-width: 15rem; } .xxl\:bow64 { --border-offsetted-width: 16rem; }
.xxl\:bow72 { --border-offsetted-width: 18rem; } .xxl\:bow80 { --border-offsetted-width: 20rem; }
.xxl\:bow96 { --border-offsetted-width: 24rem; } .xxl\:bow1px { --border-offsetted-width: 1px; }
}

207
assets/css/border/radius.css Normal file
View File

@ -0,0 +1,207 @@
/*******************************************************************************
* Border Radius: *
*******************************************************************************/
/*==============================================================================
Square Border (i.e. No Border Radius)
Use the following classes to remove an existing border-radius from an element.
Most commonly used to remove a border-radius that was applied at a smaller
breakpoint.
==============================================================================*/
.br_square { border-radius: 0; }
.brt_square { border-top-left-radius: 0; border-top-right-radius: 0; }
.brb_square { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.brl_square { border-top-left-radius: 0; border-bottom-right-radius: 0; }
.brr_square { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.brtl_square { border-top-left-radius: 0; }
.brtr_square { border-top-right-radius: 0; }
.brbl_square { border-bottom-left-radius: 0; }
.brbr_square { border-bottom-right-radius: 0; }
/*************/
/* All Sides */
/*************/
.br0\.5 { border-radius: 0.125rem; }
.br1 { border-radius: 0.25rem; }
.br1\.5 { border-radius: 0.375rem; }
.br2 { border-radius: 0.5rem; }
.br3 { border-radius: 0.75rem; }
.br4 { border-radius: 1rem; }
.br5 { border-radius: 1.25rem; }
.br6 { border-radius: 1.5rem; }
.br7 { border-radius: 1.75rem; }
.br8 { border-radius: 2rem; }
.br9 { border-radius: 2.25rem; }
.br10 { border-radius: 2.5rem; }
.br11 { border-radius: 2.75rem; }
.br12 { border-radius: 3rem; }
.br14 { border-radius: 3.5rem; }
.br16 { border-radius: 4rem; }
.br20 { border-radius: 5rem; }
.br24 { border-radius: 6rem; }
.br28 { border-radius: 7rem; }
.br32 { border-radius: 8rem; }
.br36 { border-radius: 9rem; }
.br40 { border-radius: 10rem; }
.brt0\.5 { border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; }
.brb0\.5 { border-bottom-left-radius: 0.125rem; border-bottom-right-radius: 0.125rem; }
.brl0\.5 { border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; }
.brr0\.5 { border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; }
.brtl0\.5 { border-top-left-radius: 0.125rem; }
.brtr0\.5 { border-top-right-radius: 0.125rem; }
.brbl0\.5 { border-bottom-left-radius: 0.125rem; }
.brbr0\.5 { border-bottom-right-radius: 0.125rem; }
.brt1 { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.brb1 { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.brl1 { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.brr1 { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
.brtl1 { border-top-left-radius: 0.25rem; }
.brtr1 { border-top-right-radius: 0.25rem; }
.brbl1 { border-bottom-left-radius: 0.25rem; }
.brbr1 { border-bottom-right-radius: 0.25rem; }
.brt1\.5 { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.brb1\.5 { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.brl1\.5 { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.brr1\.5 { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.brtl1\.5 { border-top-left-radius: 0.375rem; }
.brtr1\.5 { border-top-right-radius: 0.375rem; }
.brbl1\.5 { border-bottom-left-radius: 0.375rem; }
.brbr1\.5 { border-bottom-right-radius: 0.375rem; }
.brt2 { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.brb2 { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.brl2 { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.brr2 { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.brtl2 { border-top-left-radius: 0.5rem; }
.brtr2 { border-top-right-radius: 0.5rem; }
.brbl2 { border-bottom-left-radius: 0.5rem; }
.brbr2 { border-bottom-right-radius: 0.5rem; }
.brt3 { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.brb3 { border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.brl3 { border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; }
.brr3 { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.brtl3 { border-top-left-radius: 0.75rem; }
.brtr3 { border-top-right-radius: 0.75rem; }
.brbl3 { border-bottom-left-radius: 0.75rem; }
.brbr3 { border-bottom-right-radius: 0.75rem; }
.brt4 { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.brb4 { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.brl4 { border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; }
.brr4 { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
.brtl4 { border-top-left-radius: 1rem; }
.brtr4 { border-top-right-radius: 1rem; }
.brbl4 { border-bottom-left-radius: 1rem; }
.brbr4 { border-bottom-right-radius: 1rem; }
.brt5 { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.brb5 { border-bottom-left-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.brl5 { border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem; }
.brr5 { border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; }
.brtl5 { border-top-left-radius: 1.25rem; }
.brtr5 { border-top-right-radius: 1.25rem; }
.brbl5 { border-bottom-left-radius: 1.25rem; }
.brbr5 { border-bottom-right-radius: 1.25rem; }
.brt6 { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.brb6 { border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
.brl6 { border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; }
.brr6 { border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
.brtl6 { border-top-left-radius: 1.5rem; }
.brtr6 { border-top-right-radius: 1.5rem; }
.brbl6 { border-bottom-left-radius: 1.5rem; }
.brbr6 { border-bottom-right-radius: 1.5rem; }
.br_full { border-radius: 9999px; }
.brt_full { border-top-left-radius: 9999px; border-top-right-radius: 9999px; }
.brb_full { border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; }
.brl_full { border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; }
.brr_full { border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; }
.brtl_full { border-top-left-radius: 9999px; }
.brtr_full { border-top-right-radius: 9999px; }
.brbl_full { border-bottom-left-radius: 9999px; }
.brbr_full { border-bottom-right-radius: 9999px; }
.br45\% { border-radius: 45%; }
.brt45\% { border-top-left-radius: 45%; border-top-right-radius: 45%; }
.brb45\% { border-bottom-left-radius: 45%; border-bottom-right-radius: 45%; }
.brl45\% { border-top-left-radius: 45%; border-bottom-left-radius: 45%; }
.brr45\% { border-top-right-radius: 45%; border-bottom-right-radius: 45%; }
.brtl45\% { border-top-left-radius: 45%; }
.brtr45\% { border-top-right-radius: 45%; }
.brbl45\% { border-bottom-left-radius: 45%; }
.brbr45\% { border-bottom-right-radius: 45%; }
.br50\% { border-radius: 50%; }
.brt50\% { border-top-left-radius: 50%; border-top-right-radius: 50%; }
.brb50\% { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
.brl50\% { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.brr50\% { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.brtl50\% { border-top-left-radius: 50%; }
.brtr50\% { border-top-right-radius: 50%; }
.brbl50\% { border-bottom-left-radius: 50%; }
.brbr50\% { border-bottom-right-radius: 50%; }
/*==============================================================================
Angled Border (Slope Borders)
The angled borders are implemented using CSS trangles and ::before content.
==============================================================================*/
.brtl_angled::before {
content: "";
border-top: 1rem solid var(--ar-color);
border-right: 1rem solid transparent;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
}
.brtr_angled::before {
content: "";
border-top: 1rem solid var(--ar-color);
border-left: 1rem solid transparent;
position: absolute;
top: 0;
right: 0;
height: 0;
width: 0;
}
.brbr_angled::before {
content: "";
border-bottom: 1rem solid var(--ar-color);
border-left: 1rem solid transparent;
position: absolute;
bottom: 0;
right: 0;
height: 0;
width: 0;
}
.brbl_angled::before {
content: "";
border-bottom: 1rem solid var(--ar-color);
border-right: 1rem solid transparent;
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
}

1021
assets/css/border/width.css Normal file
View File

File diff suppressed because it is too large Load Diff

446
assets/css/containers/alignment.css Normal file
View File

@ -0,0 +1,446 @@
/*******************************************************************************
* Alignment: *
* Utility classes that control how flex and grid items are positioned. *
*******************************************************************************/
/* Justify Content */
.justify_start { justify-content: flex-start; }
.justify_end { justify-content: flex-end; }
.justify_center { justify-content: center; }
.justify_between { justify-content: space-between; }
.justify_evenly { justify-content: space-evenly; }
.justify_around { justify-content: space-around; }
.justify_stretch { justify-content: stretch; }
/* Justify Items */
.justify_items_start { justify-items: start; }
.justify_items_end { justify-items: end; }
.justify_items_center { justify-items: center; }
.justify_items_stretch { justify-items: stretch; }
/* Justify Self */
.justify_self_auto { justify-self: auto; }
.justify_self_start { justify-self: start; }
.justify_self_end { justify-self: end; }
.justify_self_center { justify-self: center; }
.justify_self_stretch { justify-self: stretch; }
/* Align Content */
.align_start { align-content: flex-start; }
.align_end { align-content: flex-end; }
.align_center { align-content: center; }
.align_between { align-content: space-between; }
.align_around { align-content: space-around; }
.align_evenly { align-content: space-evenly; }
.align_stretch { align-content: stretch; }
/* Align Items */
.align_items_start { align-items: flex-start; }
.align_items_end { align-items: flex-end; }
.align_items_center { align-items: center; }
.align_items_stretch { align-items: stretch; }
.align_items_baseline { align-items: baseline; }
/* Align Self */
.align_self_auto { align-self: auto; }
.align_self_start { align-self: flex-start; }
.align_self_end { align-self: flex-end; }
.align_self_center { align-self: center; }
.align_self_stretch { align-self: stretch; }
.align_self_stretch { align-self: baseline; }
/* Place Content */
.content_start { place-content: start; }
.content_end { place-content: end; }
.content_center { place-content: center; }
.content_between { place-content: space-between; }
.content_around { place-content: space-around; }
.content_evenly { place-content: space-evenly; }
.content_stretch { place-content: stretch; }
/* Place Items */
.items_start { place-items: start; }
.items_end { place-items: end; }
.items_center { place-items: center; }
.items_stretch { place-items: stretch; }
/* Place Self */
.self_auto { place-self: auto; }
.self_start { place-self: start; }
.self_end { place-self: end; }
.self_center { place-self: center; }
.self_stretch { place-self: stretch; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:justify_start { justify-content: flex-start; }
.sm\:justify_end { justify-content: flex-end; }
.sm\:justify_center { justify-content: center; }
.sm\:justify_between { justify-content: space-between; }
.sm\:justify_evenly { justify-content: space-evenly; }
.sm\:justify_around { justify-content: space-around; }
.sm\:justify_stretch { justify-content: stretch; }
.sm\:justify_items_start { justify-items: start; }
.sm\:justify_items_end { justify-items: end; }
.sm\:justify_items_center { justify-items: center; }
.sm\:justify_items_stretch { justify-items: stretch; }
.sm\:justify_self_auto { justify-self: auto; }
.sm\:justify_self_start { justify-self: start; }
.sm\:justify_self_end { justify-self: end; }
.sm\:justify_self_center { justify-self: center; }
.sm\:justify_self_stretch { justify-self: stretch; }
.sm\:align_start { align-content: flex-start; }
.sm\:align_end { align-content: flex-end; }
.sm\:align_center { align-content: center; }
.sm\:align_between { align-content: space-between; }
.sm\:align_around { align-content: space-around; }
.sm\:align_evenly { align-content: space-evenly; }
.sm\:align_stretch { align-content: stretch; }
.sm\:align_items_start { align-items: flex-start; }
.sm\:align_items_end { align-items: flex-end; }
.sm\:align_items_center { align-items: center; }
.sm\:align_items_stretch { align-items: stretch; }
.sm\:align_items_baseline { align-items: baseline; }
.sm\:align_self_auto { align-self: auto; }
.sm\:align_self_start { align-self: flex-start; }
.sm\:align_self_end { align-self: flex-end; }
.sm\:align_self_center { align-self: center; }
.sm\:align_self_stretch { align-self: stretch; }
.sm\:align_self_stretch { align-self: baseline; }
.sm\:content_start { place-content: start; }
.sm\:content_end { place-content: end; }
.sm\:content_center { place-content: center; }
.sm\:content_between { place-content: space-between; }
.sm\:content_around { place-content: space-around; }
.sm\:content_evenly { place-content: space-evenly; }
.sm\:content_stretch { place-content: stretch; }
.sm\:items_start { place-items: start; }
.sm\:items_end { place-items: end; }
.sm\:items_center { place-items: center; }
.sm\:items_stretch { place-items: stretch; }
.sm\:self_auto { place-self: auto; }
.sm\:self_start { place-self: start; }
.sm\:self_end { place-self: end; }
.sm\:self_center { place-self: center; }
.sm\:self_stretch { place-self: stretch; }
}
@media (min-width: 768px) {
.md\:justify_start { justify-content: flex-start; }
.md\:justify_end { justify-content: flex-end; }
.md\:justify_center { justify-content: center; }
.md\:justify_between { justify-content: space-between; }
.md\:justify_evenly { justify-content: space-evenly; }
.md\:justify_around { justify-content: space-around; }
.md\:justify_stretch { justify-content: stretch; }
.md\:justify_items_start { justify-items: start; }
.md\:justify_items_end { justify-items: end; }
.md\:justify_items_center { justify-items: center; }
.md\:justify_items_stretch { justify-items: stretch; }
.md\:justify_self_auto { justify-self: auto; }
.md\:justify_self_start { justify-self: start; }
.md\:justify_self_end { justify-self: end; }
.md\:justify_self_center { justify-self: center; }
.md\:justify_self_stretch { justify-self: stretch; }
.md\:align_start { align-content: flex-start; }
.md\:align_end { align-content: flex-end; }
.md\:align_center { align-content: center; }
.md\:align_between { align-content: space-between; }
.md\:align_around { align-content: space-around; }
.md\:align_evenly { align-content: space-evenly; }
.md\:align_stretch { align-content: stretch; }
.md\:align_items_start { align-items: flex-start; }
.md\:align_items_end { align-items: flex-end; }
.md\:align_items_center { align-items: center; }
.md\:align_items_stretch { align-items: stretch; }
.md\:align_items_baseline { align-items: baseline; }
.md\:align_self_auto { align-self: auto; }
.md\:align_self_start { align-self: flex-start; }
.md\:align_self_end { align-self: flex-end; }
.md\:align_self_center { align-self: center; }
.md\:align_self_stretch { align-self: stretch; }
.md\:align_self_stretch { align-self: baseline; }
.md\:content_start { place-content: start; }
.md\:content_end { place-content: end; }
.md\:content_center { place-content: center; }
.md\:content_between { place-content: space-between; }
.md\:content_around { place-content: space-around; }
.md\:content_evenly { place-content: space-evenly; }
.md\:content_stretch { place-content: stretch; }
.md\:items_start { place-items: start; }
.md\:items_end { place-items: end; }
.md\:items_center { place-items: center; }
.md\:items_stretch { place-items: stretch; }
.md\:self_auto { place-self: auto; }
.md\:self_start { place-self: start; }
.md\:self_end { place-self: end; }
.md\:self_center { place-self: center; }
.md\:self_stretch { place-self: stretch; }
}
@media (min-width: 992px) {
.lg\:justify_start { justify-content: flex-start; }
.lg\:justify_end { justify-content: flex-end; }
.lg\:justify_center { justify-content: center; }
.lg\:justify_between { justify-content: space-between; }
.lg\:justify_evenly { justify-content: space-evenly; }
.lg\:justify_around { justify-content: space-around; }
.lg\:justify_stretch { justify-content: stretch; }
.lg\:justify_items_start { justify-items: start; }
.lg\:justify_items_end { justify-items: end; }
.lg\:justify_items_center { justify-items: center; }
.lg\:justify_items_stretch { justify-items: stretch; }
.lg\:justify_self_auto { justify-self: auto; }
.lg\:justify_self_start { justify-self: start; }
.lg\:justify_self_end { justify-self: end; }
.lg\:justify_self_center { justify-self: center; }
.lg\:justify_self_stretch { justify-self: stretch; }
.lg\:align_start { align-content: flex-start; }
.lg\:align_end { align-content: flex-end; }
.lg\:align_center { align-content: center; }
.lg\:align_between { align-content: space-between; }
.lg\:align_around { align-content: space-around; }
.lg\:align_evenly { align-content: space-evenly; }
.lg\:align_stretch { align-content: stretch; }
.lg\:align_items_start { align-items: flex-start; }
.lg\:align_items_end { align-items: flex-end; }
.lg\:align_items_center { align-items: center; }
.lg\:align_items_stretch { align-items: stretch; }
.lg\:align_items_baseline { align-items: baseline; }
.lg\:align_self_auto { align-self: auto; }
.lg\:align_self_start { align-self: flex-start; }
.lg\:align_self_end { align-self: flex-end; }
.lg\:align_self_center { align-self: center; }
.lg\:align_self_stretch { align-self: stretch; }
.lg\:align_self_stretch { align-self: baseline; }
.lg\:content_start { place-content: start; }
.lg\:content_end { place-content: end; }
.lg\:content_center { place-content: center; }
.lg\:content_between { place-content: space-between; }
.lg\:content_around { place-content: space-around; }
.lg\:content_evenly { place-content: space-evenly; }
.lg\:content_stretch { place-content: stretch; }
.lg\:items_start { place-items: start; }
.lg\:items_end { place-items: end; }
.lg\:items_center { place-items: center; }
.lg\:items_stretch { place-items: stretch; }
.lg\:self_auto { place-self: auto; }
.lg\:self_start { place-self: start; }
.lg\:self_end { place-self: end; }
.lg\:self_stretch { place-self: stretch; }
.lg\:self_center { place-self: center; }
}
@media (min-width: 1200px) {
.xl\:justify_start { justify-content: flex-start; }
.xl\:justify_end { justify-content: flex-end; }
.xl\:justify_center { justify-content: center; }
.xl\:justify_between { justify-content: space-between; }
.xl\:justify_evenly { justify-content: space-evenly; }
.xl\:justify_around { justify-content: space-around; }
.xl\:justify_stretch { justify-content: stretch; }
.xl\:justify_items_start { justify-items: start; }
.xl\:justify_items_end { justify-items: end; }
.xl\:justify_items_center { justify-items: center; }
.xl\:justify_items_stretch { justify-items: stretch; }
.xl\:justify_self_auto { justify-self: auto; }
.xl\:justify_self_start { justify-self: start; }
.xl\:justify_self_end { justify-self: end; }
.xl\:justify_self_center { justify-self: center; }
.xl\:justify_self_stretch { justify-self: stretch; }
.xl\:align_start { align-content: flex-start; }
.xl\:align_end { align-content: flex-end; }
.xl\:align_center { align-content: center; }
.xl\:align_between { align-content: space-between; }
.xl\:align_around { align-content: space-around; }
.xl\:align_evenly { align-content: space-evenly; }
.xl\:align_stretch { align-content: stretch; }
.xl\:align_items_start { align-items: flex-start; }
.xl\:align_items_end { align-items: flex-end; }
.xl\:align_items_center { align-items: center; }
.xl\:align_items_stretch { align-items: stretch; }
.xl\:align_items_baseline { align-items: baseline; }
.xl\:align_self_auto { align-self: auto; }
.xl\:align_self_start { align-self: flex-start; }
.xl\:align_self_end { align-self: flex-end; }
.xl\:align_self_center { align-self: center; }
.xl\:align_self_stretch { align-self: stretch; }
.xl\:align_self_stretch { align-self: baseline; }
.xl\:content_start { place-content: start; }
.xl\:content_end { place-content: end; }
.xl\:content_center { place-content: center; }
.xl\:content_between { place-content: space-between; }
.xl\:content_around { place-content: space-around; }
.xl\:content_evenly { place-content: space-evenly; }
.xl\:content_stretch { place-content: stretch; }
.xl\:items_start { place-items: start; }
.xl\:items_end { place-items: end; }
.xl\:items_center { place-items: center; }
.xl\:items_stretch { place-items: stretch; }
.xl\:self_auto { place-self: auto; }
.xl\:self_start { place-self: start; }
.xl\:self_end { place-self: end; }
.xl\:self_center { place-self: center; }
.xl\:self_stretch { place-self: stretch; }
}
@media (min-width: 1400px) {
.xxl\:justify_start { justify-content: flex-start; }
.xxl\:justify_end { justify-content: flex-end; }
.xxl\:justify_center { justify-content: center; }
.xxl\:justify_between { justify-content: space-between; }
.xxl\:justify_evenly { justify-content: space-evenly; }
.xxl\:justify_around { justify-content: space-around; }
.xxl\:justify_stretch { justify-content: stretch; }
.xxl\:justify_items_start { justify-items: start; }
.xxl\:justify_items_end { justify-items: end; }
.xxl\:justify_items_center { justify-items: center; }
.xxl\:justify_items_stretch { justify-items: stretch; }
.xxl\:justify_self_auto { justify-self: auto; }
.xxl\:justify_self_start { justify-self: start; }
.xxl\:justify_self_end { justify-self: end; }
.xxl\:justify_self_center { justify-self: center; }
.xxl\:justify_self_stretch { justify-self: stretch; }
.xxl\:align_start { align-content: flex-start; }
.xxl\:align_end { align-content: flex-end; }
.xxl\:align_center { align-content: center; }
.xxl\:align_between { align-content: space-between; }
.xxl\:align_around { align-content: space-around; }
.xxl\:align_evenly { align-content: space-evenly; }
.xxl\:align_stretch { align-content: stretch; }
.xxl\:align_items_start { align-items: flex-start; }
.xxl\:align_items_end { align-items: flex-end; }
.xxl\:align_items_center { align-items: center; }
.xxl\:align_items_stretch { align-items: stretch; }
.xxl\:align_items_baseline { align-items: baseline; }
.xxl\:align_self_auto { align-self: auto; }
.xxl\:align_self_start { align-self: flex-start; }
.xxl\:align_self_end { align-self: flex-end; }
.xxl\:align_self_center { align-self: center; }
.xxl\:align_self_stretch { align-self: stretch; }
.xxl\:align_self_stretch { align-self: baseline; }
.xxl\:content_start { place-content: start; }
.xxl\:content_end { place-content: end; }
.xxl\:content_center { place-content: center; }
.xxl\:content_between { place-content: space-between; }
.xxl\:content_around { place-content: space-around; }
.xxl\:content_evenly { place-content: space-evenly; }
.xxl\:content_stretch { place-content: stretch; }
.xxl\:items_start { place-items: start; }
.xxl\:items_end { place-items: end; }
.xxl\:items_center { place-items: center; }
.xxl\:items_stretch { place-items: stretch; }
.xxl\:self_auto { place-self: auto; }
.xxl\:self_start { place-self: start; }
.xxl\:self_end { place-self: end; }
.xxl\:self_center { place-self: center; }
.xxl\:self_stretch { place-self: stretch; }
}
@media (orientation: landscape) {
.ls\:justify_start { justify-content: flex-start; }
.ls\:justify_end { justify-content: flex-end; }
.ls\:justify_center { justify-content: center; }
.ls\:justify_between { justify-content: space-between; }
.ls\:justify_evenly { justify-content: space-evenly; }
.ls\:justify_around { justify-content: space-around; }
.ls\:justify_stretch { justify-content: stretch; }
.ls\:justify_items_start { justify-items: start; }
.ls\:justify_items_end { justify-items: end; }
.ls\:justify_items_center { justify-items: center; }
.ls\:justify_items_stretch { justify-items: stretch; }
.ls\:justify_self_auto { justify-self: auto; }
.ls\:justify_self_start { justify-self: start; }
.ls\:justify_self_end { justify-self: end; }
.ls\:justify_self_center { justify-self: center; }
.ls\:justify_self_stretch { justify-self: stretch; }
.ls\:align_start { align-content: flex-start; }
.ls\:align_end { align-content: flex-end; }
.ls\:align_center { align-content: center; }
.ls\:align_between { align-content: space-between; }
.ls\:align_around { align-content: space-around; }
.ls\:align_evenly { align-content: space-evenly; }
.ls\:align_stretch { align-content: stretch; }
.ls\:align_items_start { align-items: flex-start; }
.ls\:align_items_end { align-items: flex-end; }
.ls\:align_items_center { align-items: center; }
.ls\:align_items_stretch { align-items: stretch; }
.ls\:align_items_baseline { align-items: baseline; }
.ls\:align_self_auto { align-self: auto; }
.ls\:align_self_start { align-self: flex-start; }
.ls\:align_self_end { align-self: flex-end; }
.ls\:align_self_center { align-self: center; }
.ls\:align_self_stretch { align-self: stretch; }
.ls\:align_self_stretch { align-self: baseline; }
.ls\:content_start { place-content: start; }
.ls\:content_end { place-content: end; }
.ls\:content_center { place-content: center; }
.ls\:content_between { place-content: space-between; }
.ls\:content_around { place-content: space-around; }
.ls\:content_evenly { place-content: space-evenly; }
.ls\:content_stretch { place-content: stretch; }
.ls\:items_start { place-items: start; }
.ls\:items_end { place-items: end; }
.ls\:items_center { place-items: center; }
.ls\:items_stretch { place-items: stretch; }
.ls\:self_auto { place-self: auto; }
.ls\:self_start { place-self: start; }
.ls\:self_end { place-self: end; }
.ls\:self_center { place-self: center; }
.ls\:self_stretch { place-self: stretch; }
}
@media (orientation: portrait) {
.po\:justify_start { justify-content: flex-start; }
.po\:justify_end { justify-content: flex-end; }
.po\:justify_center { justify-content: center; }
.po\:justify_between { justify-content: space-between; }
.po\:justify_evenly { justify-content: space-evenly; }
.po\:justify_around { justify-content: space-around; }
.po\:justify_stretch { justify-content: stretch; }
.po\:justify_items_start { justify-items: start; }
.po\:justify_items_end { justify-items: end; }
.po\:justify_items_center { justify-items: center; }
.po\:justify_items_stretch { justify-items: stretch; }
.po\:justify_self_auto { justify-self: auto; }
.po\:justify_self_start { justify-self: start; }
.po\:justify_self_end { justify-self: end; }
.po\:justify_self_center { justify-self: center; }
.po\:justify_self_stretch { justify-self: stretch; }
.po\:align_start { align-content: flex-start; }
.po\:align_end { align-content: flex-end; }
.po\:align_center { align-content: center; }
.po\:align_between { align-content: space-between; }
.po\:align_around { align-content: space-around; }
.po\:align_evenly { align-content: space-evenly; }
.po\:align_stretch { align-content: stretch; }
.po\:align_items_start { align-items: flex-start; }
.po\:align_items_end { align-items: flex-end; }
.po\:align_items_center { align-items: center; }
.po\:align_items_stretch { align-items: stretch; }
.po\:align_items_baseline { align-items: baseline; }
.po\:align_self_auto { align-self: auto; }
.po\:align_self_start { align-self: flex-start; }
.po\:align_self_end { align-self: flex-end; }
.po\:align_self_center { align-self: center; }
.po\:align_self_stretch { align-self: stretch; }
.po\:align_self_stretch { align-self: baseline; }
.po\:content_start { place-content: start; }
.po\:content_end { place-content: end; }
.po\:content_center { place-content: center; }
.po\:content_between { place-content: space-between; }
.po\:content_around { place-content: space-around; }
.po\:content_evenly { place-content: space-evenly; }
.po\:content_stretch { place-content: stretch; }
.po\:items_start { place-items: start; }
.po\:items_end { place-items: end; }
.po\:items_center { place-items: center; }
.po\:items_stretch { place-items: stretch; }
.po\:self_auto { place-self: auto; }
.po\:self_start { place-self: start; }
.po\:self_end { place-self: end; }
.po\:self_center { place-self: center; }
.po\:self_stretch { place-self: stretch; }
}

427
assets/css/containers/center.css Normal file
View File

@ -0,0 +1,427 @@
/*******************************************************************************
* Center: *
* A simple container that centers its contents both horizontally and *
* vertically. *
* *
* There is also a margin:auto center which centers an element horizontally *
* only. *
* This trick states that if you set a width for an element + position:block + *
* setting its left and right margins to auto, it will be centered *
* horizontally. *
*******************************************************************************/
/******************/
/* Flex Centering */
/******************/
.flex_center {
display: flex;
justify-content: center;
align-items: center;
}
.inline_flex_center {
display: inline-flex;
justify-content: center;
align-items: center;
}
.flex_col_center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.inline_flex_col_center {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/******************/
/* Grid Centering */
/******************/
.grid_center {
display: grid;
place-content: center;
}
.inline_grid_center {
display: inline-grid;
place-content: center;
}
/*************************/
/* Maring:Auto Centering */
/*************************/
.c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.c192 { margin-left: auto; margin-right: auto; width: 48rem; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:flex_center { display: flex; justify-content: center; align-items: center; }
.sm\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.sm\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sm\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.sm\:grid_center { display: grid; place-content: center; }
.sm\:inline_grid_center { display: inline-grid; place-content: center; }
.sm\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.sm\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.sm\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.sm\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.sm\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.sm\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.sm\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.sm\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.sm\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.sm\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.sm\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.sm\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.sm\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.sm\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.sm\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.sm\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.sm\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.sm\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.sm\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.sm\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.sm\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.sm\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.sm\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.sm\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.sm\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.sm\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.sm\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.sm\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.sm\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.sm\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.sm\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.sm\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.sm\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.sm\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.sm\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.sm\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.sm\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.sm\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (min-width: 768px) {
.md\:flex_center { display: flex; justify-content: center; align-items: center; }
.md\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.md\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.md\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.md\:grid_center { display: grid; place-content: center; }
.md\:inline_grid_center { display: inline-grid; place-content: center; }
.md\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.md\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.md\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.md\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.md\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.md\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.md\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.md\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.md\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.md\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.md\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.md\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.md\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.md\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.md\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.md\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.md\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.md\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.md\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.md\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.md\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.md\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.md\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.md\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.md\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.md\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.md\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.md\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.md\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.md\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.md\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.md\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.md\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.md\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.md\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.md\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.md\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.md\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (min-width: 992px) {
.lg\:flex_center { display: flex; justify-content: center; align-items: center; }
.lg\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.lg\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.lg\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.lg\:grid_center { display: grid; place-content: center; }
.lg\:inline_grid_center { display: inline-grid; place-content: center; }
.lg\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.lg\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.lg\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.lg\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.lg\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.lg\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.lg\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.lg\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.lg\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.lg\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.lg\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.lg\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.lg\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.lg\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.lg\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.lg\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.lg\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.lg\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.lg\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.lg\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.lg\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.lg\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.lg\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.lg\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.lg\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.lg\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.lg\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.lg\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.lg\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.lg\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.lg\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.lg\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.lg\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.lg\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.lg\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.lg\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.lg\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.lg\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (min-width: 1200px) {
.xl\:flex_center { display: flex; justify-content: center; align-items: center; }
.xl\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.xl\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.xl\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.xl\:grid_center { display: grid; place-content: center; }
.xl\:inline_grid_center { display: inline-grid; place-content: center; }
.xl\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.xl\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.xl\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.xl\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.xl\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.xl\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.xl\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.xl\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.xl\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.xl\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.xl\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.xl\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.xl\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.xl\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.xl\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.xl\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.xl\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.xl\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.xl\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.xl\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.xl\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.xl\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.xl\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.xl\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.xl\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.xl\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.xl\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.xl\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.xl\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.xl\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.xl\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.xl\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.xl\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.xl\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.xl\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.xl\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.xl\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.xl\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (min-width: 1400px) {
.xxl\:flex_center { display: flex; justify-content: center; align-items: center; }
.xxl\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.xxl\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.xxl\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.xxl\:grid_center { display: grid; place-content: center; }
.xxl\:inline_grid_center { display: inline-grid; place-content: center; }
.xxl\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.xxl\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.xxl\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.xxl\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.xxl\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.xxl\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.xxl\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.xxl\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.xxl\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.xxl\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.xxl\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.xxl\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.xxl\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.xxl\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.xxl\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.xxl\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.xxl\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.xxl\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.xxl\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.xxl\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.xxl\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.xxl\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.xxl\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.xxl\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.xxl\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.xxl\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.xxl\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.xxl\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.xxl\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.xxl\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.xxl\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.xxl\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.xxl\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.xxl\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.xxl\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.xxl\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.xxl\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.xxl\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (orientation: landscape) {
.ls\:flex_center { display: flex; justify-content: center; align-items: center; }
.ls\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.ls\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ls\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.ls\:grid_center { display: grid; place-content: center; }
.ls\:inline_grid_center { display: inline-grid; place-content: center; }
.ls\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.ls\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.ls\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.ls\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.ls\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.ls\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.ls\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.ls\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.ls\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.ls\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.ls\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.ls\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.ls\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.ls\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.ls\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.ls\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.ls\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.ls\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.ls\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.ls\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.ls\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.ls\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.ls\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.ls\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.ls\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.ls\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.ls\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.ls\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.ls\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.ls\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.ls\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.ls\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.ls\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.ls\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.ls\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.ls\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.ls\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.ls\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}
@media (orientation: portrait) {
.po\:flex_center { display: flex; justify-content: center; align-items: center; }
.po\:inline_flex_center { display: inline-flex; justify-content: center; align-items: center; }
.po\:flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.po\:inline_flex_col_center { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.po\:grid_center { display: grid; place-content: center; }
.po\:inline_grid_center { display: inline-grid; place-content: center; }
.po\:c0\.5 { margin-left: auto; margin-right: auto; width: 0.125rem; }
.po\:c1 { margin-left: auto; margin-right: auto; width: 0.25rem; }
.po\:c1\.5 { margin-left: auto; margin-right: auto; width: 0.375rem; }
.po\:c2 { margin-left: auto; margin-right: auto; width: 0.5rem; }
.po\:c2\.5 { margin-left: auto; margin-right: auto; width: 0.625rem; }
.po\:c3 { margin-left: auto; margin-right: auto; width: 0.75rem; }
.po\:c3\.5 { margin-left: auto; margin-right: auto; width: 0.875rem; }
.po\:c4 { margin-left: auto; margin-right: auto; width: 1rem; }
.po\:c5 { margin-left: auto; margin-right: auto; width: 1.25rem; }
.po\:c6 { margin-left: auto; margin-right: auto; width: 1.5rem; }
.po\:c7 { margin-left: auto; margin-right: auto; width: 1.75rem; }
.po\:c8 { margin-left: auto; margin-right: auto; width: 2rem; }
.po\:c9 { margin-left: auto; margin-right: auto; width: 2.25rem; }
.po\:c10 { margin-left: auto; margin-right: auto; width: 2.5rem; }
.po\:c11 { margin-left: auto; margin-right: auto; width: 2.75rem; }
.po\:c12 { margin-left: auto; margin-right: auto; width: 3rem; }
.po\:c14 { margin-left: auto; margin-right: auto; width: 3.5rem; }
.po\:c16 { margin-left: auto; margin-right: auto; width: 4rem; }
.po\:c20 { margin-left: auto; margin-right: auto; width: 5rem; }
.po\:c24 { margin-left: auto; margin-right: auto; width: 6rem; }
.po\:c28 { margin-left: auto; margin-right: auto; width: 7rem; }
.po\:c32 { margin-left: auto; margin-right: auto; width: 8rem; }
.po\:c36 { margin-left: auto; margin-right: auto; width: 9rem; }
.po\:c40 { margin-left: auto; margin-right: auto; width: 10rem; }
.po\:c44 { margin-left: auto; margin-right: auto; width: 11rem; }
.po\:c48 { margin-left: auto; margin-right: auto; width: 12rem; }
.po\:c52 { margin-left: auto; margin-right: auto; width: 13rem; }
.po\:c56 { margin-left: auto; margin-right: auto; width: 14rem; }
.po\:c60 { margin-left: auto; margin-right: auto; width: 15rem; }
.po\:c64 { margin-left: auto; margin-right: auto; width: 16rem; }
.po\:c72 { margin-left: auto; margin-right: auto; width: 18rem; }
.po\:c80 { margin-left: auto; margin-right: auto; width: 20rem; }
.po\:c96 { margin-left: auto; margin-right: auto; width: 24rem; }
.po\:c120 { margin-left: auto; margin-right: auto; width: 30rem; }
.po\:c128 { margin-left: auto; margin-right: auto; width: 32rem; }
.po\:c136 { margin-left: auto; margin-right: auto; width: 34rem; }
.po\:c144 { margin-left: auto; margin-right: auto; width: 36rem; }
.po\:c192 { margin-left: auto; margin-right: auto; width: 48rem; }
}

79
assets/css/containers/container.css Normal file
View File

@ -0,0 +1,79 @@
/*******************************************************************************
* Containers: *
* The "container" class provides a mobile-first responsive, fixed-width *
* division. Its max-width will change on different screen sizes. *
* There is also a fluid-width container which its length is always 100%. *
* *
* The following is a table which demonstrates the max-width of a container *
* class in different screen widths: *
* *
* Extra Small | Small | Medium | Large | Extra Large *
* < 576px | >= 576px | >= 768px | >= 992px | >= 1200px *
* container 100% | 540px | 720px | 960px | 1140px *
* md:container 100% | 100% | 720px | 960px | 1140px *
* lg:container 100% | 100% | 100% | 960px | 1140px *
* xl:container 100% | 100% | 100% | 100% | 1140px *
* container_fluid 100% | 100% | 100% | 100% | 100% *
* *
* Implementation: *
* This class is implemented using a simple css trick; If you set the left and *
* right margins of an element to auto and also specify a width for the *
* element, the element will be centered. *
*******************************************************************************/
.container_fluid,
.container,
.md\:container,
.lg\:container,
.xl\:container,
.xxl\:container {
width: 100%;
margin-right: auto;
margin-left: auto;
/* The following are purely for stylistic reasons */
/* padding-right: 15px; /* v1.0 (from Bootstrap 4) [Deprecated] */
/* padding-left: 15px; /* v1.0 (from Bootstrap 4) [Deprecated] */
padding-right: var(--gutter-w, 0.75rem); /* v2.0 (from Bootstrap 5) */
padding-left: var(--gutter-w, 0.75rem); /* v2.0 (from Bootstrap 5) */
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.md\:container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.md\:container,
.lg\:container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.md\:container,
.lg\:container,
.xl\:container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container,
.md\:container,
.lg\:container,
.xl\:container,
.xxl\:container {
max-width: 1320px;
}
}

96
assets/css/containers/distal.css Normal file
View File

@ -0,0 +1,96 @@
/*******************************************************************************
* Distals: *
* Utility classes to layer elements on top of each other using grids instead *
* of absolute positioning. *
*******************************************************************************/
/*********************/
/* Container Classes */
/*********************/
.distal { display: grid; }
.inline_distal { display: inline-grid; }
.distal_overlayed { display: grid; }
.inline_distal_overlayed { display: inline-grid; }
.distal_overlayed::after,
.inline_distal_overlayed::after,
.sm\:distal_overlayed::after,
.sm\:inline_distal_overlayed::after,
.md\:distal_overlayed::after,
.md\:inline_distal_overlayed::after,
.lg\:distal_overlayed::after,
.lg\:inline_distal_overlayed::after,
.xl\:distal_overlayed::after,
.xl\:inline_distal_overlayed::after,
.xxl\:distal_overlayed::after,
.xxl\:inline_distal_overlayed::after {
content: "";
background-color: var(--overlay-color, black);
opacity: 0.93;
grid-area: 1 / -1;
}
:is(.distal, .inline_distal, .distal_overlayed, .inline_distal_overlayed) > * {
grid-area: 1 / -1;
}
/********************/
/* Children Classes */
/********************/
.distal_description {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.distal_tag {
align-self: start;
justify-self: start;
}
.distal_centered {
margin: auto;
}
.distal_title {
align-self: start;
justify-self: center;
}
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:distal { display: grid; }
.sm\:inline_distal { display: inline-grid; }
.sm\:distal_overlayed { display: grid; }
.sm\:inline_distal_overlayed { display: inline-grid; }
}
@media (min-width: 768px) {
.md\:distal { display: grid; }
.md\:inline_distal { display: inline-grid; }
.md\:distal_overlayed { display: grid; }
.md\:inline_distal_overlayed { display: inline-grid; }
}
@media (min-width: 992px) {
.lg\:distal { display: grid; }
.lg\:inline_distal { display: inline-grid; }
.lg\:distal_overlayed { display: grid; }
.lg\:inline_distal_overlayed { display: inline-grid; }
}
@media (min-width: 1200px) {
.xl\:distal { display: grid; }
.xl\:inline_distal { display: inline-grid; }
.xl\:distal_overlayed { display: grid; }
.xl\:inline_distal_overlayed { display: inline-grid; }
}
@media (min-width: 1400px) {
.xxl\:distal { display: grid; }
.xxl\:inline_distal { display: inline-grid; }
.xxl\:distal_overlayed { display: grid; }
.xxl\:inline_distal_overlayed { display: inline-grid; }
}

952
assets/css/containers/flex.css Normal file
View File

@ -0,0 +1,952 @@
/*******************************************************************************
* Flexbox: *
* *
* Explanation: *
* flex_initial - allows a flex item to shrink but not grow, taking into *
* account its initial size *
* flex_one - allows a flex item to grow and shrink as needed, ignoring *
* its initial size *
* flex_auto - allows a flex item to grow and shrink, taking into account *
* its initial size *
* flex_none - prevents a flex item from growing or shrinking *
* *
* References: *
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background -*
* it is recommended to read this if you don't know what is flexbox *
*******************************************************************************/
/* Flexbox Display (Container) */
.flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
/* Flexbox Items (Children) */
.flex1 { flex: 1; }
.flex2 { flex: 2; }
.flex3 { flex: 3; }
.flex4 { flex: 4; }
.flex5 { flex: 5; }
.flex6 { flex: 6; }
.flex7 { flex: 7; }
.flex8 { flex: 8; }
.flex9 { flex: 9; }
.flex10 { flex: 10; }
.flex11 { flex: 11; }
.flex12 { flex: 12; }
.flex13 { flex: 13; }
.flex14 { flex: 14; }
.flex_initial { flex: 0 1 auto; }
.flex_one { flex: 1 1 0%; }
.flex_auto { flex: 1 1 auto; }
.flex_none { flex: none; }
.order_none { order: 0; }
.order_first { order: -9999; }
.order_last { order: 9999; }
.order-14 { order: -14; }
.order-13 { order: -13; }
.order-12 { order: -12; }
.order-11 { order: -11; }
.order-10 { order: -10; }
.order-9 { order: -9; }
.order-8 { order: -8; }
.order-7 { order: -7; }
.order-6 { order: -6; }
.order-5 { order: -5; }
.order-4 { order: -4; }
.order-3 { order: -3; }
.order-2 { order: -2; }
.order-1 { order: -1; }
.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }
.order6 { order: 6; }
.order7 { order: 7; }
.order8 { order: 8; }
.order9 { order: 9; }
.order10 { order: 10; }
.order11 { order: 11; }
.order12 { order: 12; }
.order13 { order: 13; }
.order14 { order: 14; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.sm\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.sm\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.sm\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.sm\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.sm\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.sm\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.sm\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.sm\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.sm\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.sm\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.sm\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.sm\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.sm\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.sm\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.sm\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.sm\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.sm\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.sm\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.sm\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.sm\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.sm\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.sm\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.sm\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.sm\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.sm\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.sm\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.sm\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.sm\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.sm\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.sm\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.sm\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.sm\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.sm\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.sm\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.sm\:flex1 { flex: 1; }
.sm\:flex2 { flex: 2; }
.sm\:flex3 { flex: 3; }
.sm\:flex4 { flex: 4; }
.sm\:flex5 { flex: 5; }
.sm\:flex6 { flex: 6; }
.sm\:flex7 { flex: 7; }
.sm\:flex8 { flex: 8; }
.sm\:flex9 { flex: 9; }
.sm\:flex10 { flex: 10; }
.sm\:flex11 { flex: 11; }
.sm\:flex12 { flex: 12; }
.sm\:flex13 { flex: 13; }
.sm\:flex14 { flex: 14; }
.sm\:flex_initial { flex: 0 1 auto; }
.sm\:flex_one { flex: 1 1 0%; }
.sm\:flex_auto { flex: 1 1 auto; }
.sm\:flex_none { flex: none; }
.sm\:order_none { order: 0; }
.sm\:order_first { order: -9999; }
.sm\:order_last { order: 9999; }
.sm\:order-14 { order: -14; }
.sm\:order-13 { order: -13; }
.sm\:order-12 { order: -12; }
.sm\:order-11 { order: -11; }
.sm\:order-10 { order: -10; }
.sm\:order-9 { order: -9; }
.sm\:order-8 { order: -8; }
.sm\:order-7 { order: -7; }
.sm\:order-6 { order: -6; }
.sm\:order-5 { order: -5; }
.sm\:order-4 { order: -4; }
.sm\:order-3 { order: -3; }
.sm\:order-2 { order: -2; }
.sm\:order-1 { order: -1; }
.sm\:order1 { order: 1; }
.sm\:order2 { order: 2; }
.sm\:order3 { order: 3; }
.sm\:order4 { order: 4; }
.sm\:order5 { order: 5; }
.sm\:order6 { order: 6; }
.sm\:order7 { order: 7; }
.sm\:order8 { order: 8; }
.sm\:order9 { order: 9; }
.sm\:order10 { order: 10; }
.sm\:order11 { order: 11; }
.sm\:order12 { order: 12; }
.sm\:order13 { order: 13; }
.sm\:order14 { order: 14; }
}
@media (min-width: 768px) {
.md\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.md\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.md\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.md\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.md\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.md\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.md\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.md\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.md\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.md\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.md\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.md\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.md\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.md\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.md\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.md\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.md\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.md\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.md\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.md\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.md\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.md\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.md\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.md\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.md\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.md\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.md\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.md\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.md\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.md\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.md\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.md\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.md\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.md\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.md\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.md\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.md\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.md\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.md\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.md\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.md\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.md\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.md\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.md\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.md\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.md\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.md\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.md\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.md\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.md\:flex1 { flex: 1; }
.md\:flex2 { flex: 2; }
.md\:flex3 { flex: 3; }
.md\:flex4 { flex: 4; }
.md\:flex5 { flex: 5; }
.md\:flex6 { flex: 6; }
.md\:flex7 { flex: 7; }
.md\:flex8 { flex: 8; }
.md\:flex9 { flex: 9; }
.md\:flex10 { flex: 10; }
.md\:flex11 { flex: 11; }
.md\:flex12 { flex: 12; }
.md\:flex13 { flex: 13; }
.md\:flex14 { flex: 14; }
.md\:flex_initial { flex: 0 1 auto; }
.md\:flex_one { flex: 1 1 0%; }
.md\:flex_auto { flex: 1 1 auto; }
.md\:flex_none { flex: none; }
.md\:order_none { order: 0; }
.md\:order_first { order: -9999; }
.md\:order_last { order: 9999; }
.md\:order-14 { order: -14; }
.md\:order-13 { order: -13; }
.md\:order-12 { order: -12; }
.md\:order-11 { order: -11; }
.md\:order-10 { order: -10; }
.md\:order-9 { order: -9; }
.md\:order-8 { order: -8; }
.md\:order-7 { order: -7; }
.md\:order-6 { order: -6; }
.md\:order-5 { order: -5; }
.md\:order-4 { order: -4; }
.md\:order-3 { order: -3; }
.md\:order-2 { order: -2; }
.md\:order-1 { order: -1; }
.md\:order1 { order: 1; }
.md\:order2 { order: 2; }
.md\:order3 { order: 3; }
.md\:order4 { order: 4; }
.md\:order5 { order: 5; }
.md\:order6 { order: 6; }
.md\:order7 { order: 7; }
.md\:order8 { order: 8; }
.md\:order9 { order: 9; }
.md\:order10 { order: 10; }
.md\:order11 { order: 11; }
.md\:order12 { order: 12; }
.md\:order13 { order: 13; }
.md\:order14 { order: 14; }
}
@media (min-width: 992px) {
.lg\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.lg\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.lg\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.lg\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.lg\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.lg\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.lg\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.lg\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.lg\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.lg\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.lg\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.lg\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.lg\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.lg\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.lg\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.lg\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.lg\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.lg\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.lg\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.lg\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.lg\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.lg\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.lg\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.lg\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.lg\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.lg\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.lg\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.lg\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.lg\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.lg\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.lg\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.lg\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.lg\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.lg\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.lg\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.lg\:flex1 { flex: 1; }
.lg\:flex2 { flex: 2; }
.lg\:flex3 { flex: 3; }
.lg\:flex4 { flex: 4; }
.lg\:flex5 { flex: 5; }
.lg\:flex6 { flex: 6; }
.lg\:flex7 { flex: 7; }
.lg\:flex8 { flex: 8; }
.lg\:flex9 { flex: 9; }
.lg\:flex10 { flex: 10; }
.lg\:flex11 { flex: 11; }
.lg\:flex12 { flex: 12; }
.lg\:flex13 { flex: 13; }
.lg\:flex14 { flex: 14; }
.lg\:flex_initial { flex: 0 1 auto; }
.lg\:flex_one { flex: 1 1 0%; }
.lg\:flex_auto { flex: 1 1 auto; }
.lg\:flex_none { flex: none; }
.lg\:order_none { order: 0; }
.lg\:order_first { order: -9999; }
.lg\:order_last { order: 9999; }
.lg\:order-14 { order: -14; }
.lg\:order-13 { order: -13; }
.lg\:order-12 { order: -12; }
.lg\:order-11 { order: -11; }
.lg\:order-10 { order: -10; }
.lg\:order-9 { order: -9; }
.lg\:order-8 { order: -8; }
.lg\:order-7 { order: -7; }
.lg\:order-6 { order: -6; }
.lg\:order-5 { order: -5; }
.lg\:order-4 { order: -4; }
.lg\:order-3 { order: -3; }
.lg\:order-2 { order: -2; }
.lg\:order-1 { order: -1; }
.lg\:order1 { order: 1; }
.lg\:order2 { order: 2; }
.lg\:order3 { order: 3; }
.lg\:order4 { order: 4; }
.lg\:order5 { order: 5; }
.lg\:order6 { order: 6; }
.lg\:order7 { order: 7; }
.lg\:order8 { order: 8; }
.lg\:order9 { order: 9; }
.lg\:order10 { order: 10; }
.lg\:order11 { order: 11; }
.lg\:order12 { order: 12; }
.lg\:order13 { order: 13; }
.lg\:order14 { order: 14; }
}
@media (min-width: 1200px) {
.xl\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.xl\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xl\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.xl\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xl\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.xl\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xl\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.xl\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xl\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xl\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xl\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xl\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xl\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xl\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xl\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xl\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xl\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.xl\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xl\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xl\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xl\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.xl\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xl\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xl\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xl\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xl\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xl\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xl\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xl\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.xl\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xl\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xl\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xl\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xl\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xl\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xl\:flex1 { flex: 1; }
.xl\:flex2 { flex: 2; }
.xl\:flex3 { flex: 3; }
.xl\:flex4 { flex: 4; }
.xl\:flex5 { flex: 5; }
.xl\:flex6 { flex: 6; }
.xl\:flex7 { flex: 7; }
.xl\:flex8 { flex: 8; }
.xl\:flex9 { flex: 9; }
.xl\:flex10 { flex: 10; }
.xl\:flex11 { flex: 11; }
.xl\:flex12 { flex: 12; }
.xl\:flex13 { flex: 13; }
.xl\:flex14 { flex: 14; }
.xl\:flex_initial { flex: 0 1 auto; }
.xl\:flex_one { flex: 1 1 0%; }
.xl\:flex_auto { flex: 1 1 auto; }
.xl\:flex_none { flex: none; }
.xl\:order_none { order: 0; }
.xl\:order_first { order: -9999; }
.xl\:order_last { order: 9999; }
.xl\:order-14 { order: -14; }
.xl\:order-13 { order: -13; }
.xl\:order-12 { order: -12; }
.xl\:order-11 { order: -11; }
.xl\:order-10 { order: -10; }
.xl\:order-9 { order: -9; }
.xl\:order-8 { order: -8; }
.xl\:order-7 { order: -7; }
.xl\:order-6 { order: -6; }
.xl\:order-5 { order: -5; }
.xl\:order-4 { order: -4; }
.xl\:order-3 { order: -3; }
.xl\:order-2 { order: -2; }
.xl\:order-1 { order: -1; }
.xl\:order1 { order: 1; }
.xl\:order2 { order: 2; }
.xl\:order3 { order: 3; }
.xl\:order4 { order: 4; }
.xl\:order5 { order: 5; }
.xl\:order6 { order: 6; }
.xl\:order7 { order: 7; }
.xl\:order8 { order: 8; }
.xl\:order9 { order: 9; }
.xl\:order10 { order: 10; }
.xl\:order11 { order: 11; }
.xl\:order12 { order: 12; }
.xl\:order13 { order: 13; }
.xl\:order14 { order: 14; }
}
@media (min-width: 1400px) {
.xxl\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xxl\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.xxl\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xxl\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xxl\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.xxl\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xxl\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xxl\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xxl\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xxl\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xxl\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xxl\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xxl\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xxl\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.xxl\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xxl\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.xxl\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.xxl\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.xxl\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xxl\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xxl\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xxl\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.xxl\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.xxl\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.xxl\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.xxl\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.xxl\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.xxl\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.xxl\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.xxl\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.xxl\:flex1 { flex: 1; }
.xxl\:flex2 { flex: 2; }
.xxl\:flex3 { flex: 3; }
.xxl\:flex4 { flex: 4; }
.xxl\:flex5 { flex: 5; }
.xxl\:flex6 { flex: 6; }
.xxl\:flex7 { flex: 7; }
.xxl\:flex8 { flex: 8; }
.xxl\:flex9 { flex: 9; }
.xxl\:flex10 { flex: 10; }
.xxl\:flex11 { flex: 11; }
.xxl\:flex12 { flex: 12; }
.xxl\:flex13 { flex: 13; }
.xxl\:flex14 { flex: 14; }
.xxl\:flex_initial { flex: 0 1 auto; }
.xxl\:flex_one { flex: 1 1 0%; }
.xxl\:flex_auto { flex: 1 1 auto; }
.xxl\:flex_none { flex: none; }
.xxl\:order_none { order: 0; }
.xxl\:order_first { order: -9999; }
.xxl\:order_last { order: 9999; }
.xxl\:order-14 { order: -14; }
.xxl\:order-13 { order: -13; }
.xxl\:order-12 { order: -12; }
.xxl\:order-11 { order: -11; }
.xxl\:order-10 { order: -10; }
.xxl\:order-9 { order: -9; }
.xxl\:order-8 { order: -8; }
.xxl\:order-7 { order: -7; }
.xxl\:order-6 { order: -6; }
.xxl\:order-5 { order: -5; }
.xxl\:order-4 { order: -4; }
.xxl\:order-3 { order: -3; }
.xxl\:order-2 { order: -2; }
.xxl\:order-1 { order: -1; }
.xxl\:order1 { order: 1; }
.xxl\:order2 { order: 2; }
.xxl\:order3 { order: 3; }
.xxl\:order4 { order: 4; }
.xxl\:order5 { order: 5; }
.xxl\:order6 { order: 6; }
.xxl\:order7 { order: 7; }
.xxl\:order8 { order: 8; }
.xxl\:order9 { order: 9; }
.xxl\:order10 { order: 10; }
.xxl\:order11 { order: 11; }
.xxl\:order12 { order: 12; }
.xxl\:order13 { order: 13; }
.xxl\:order14 { order: 14; }
}
@media (orientation: landscape) {
.ls\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.ls\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.ls\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.ls\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.ls\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.ls\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.ls\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.ls\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.ls\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.ls\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.ls\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.ls\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.ls\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.ls\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.ls\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.ls\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.ls\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.ls\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.ls\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.ls\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.ls\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.ls\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.ls\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.ls\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.ls\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.ls\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.ls\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.ls\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.ls\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.ls\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.ls\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.ls\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.ls\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.ls\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.ls\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.ls\:flex1 { flex: 1; }
.ls\:flex2 { flex: 2; }
.ls\:flex3 { flex: 3; }
.ls\:flex4 { flex: 4; }
.ls\:flex5 { flex: 5; }
.ls\:flex6 { flex: 6; }
.ls\:flex7 { flex: 7; }
.ls\:flex8 { flex: 8; }
.ls\:flex9 { flex: 9; }
.ls\:flex10 { flex: 10; }
.ls\:flex11 { flex: 11; }
.ls\:flex12 { flex: 12; }
.ls\:flex13 { flex: 13; }
.ls\:flex14 { flex: 14; }
.ls\:flex_initial { flex: 0 1 auto; }
.ls\:flex_one { flex: 1 1 0%; }
.ls\:flex_auto { flex: 1 1 auto; }
.ls\:flex_none { flex: none; }
.ls\:order_none { order: 0; }
.ls\:order_first { order: -9999; }
.ls\:order_last { order: 9999; }
.ls\:order-14 { order: -14; }
.ls\:order-13 { order: -13; }
.ls\:order-12 { order: -12; }
.ls\:order-11 { order: -11; }
.ls\:order-10 { order: -10; }
.ls\:order-9 { order: -9; }
.ls\:order-8 { order: -8; }
.ls\:order-7 { order: -7; }
.ls\:order-6 { order: -6; }
.ls\:order-5 { order: -5; }
.ls\:order-4 { order: -4; }
.ls\:order-3 { order: -3; }
.ls\:order-2 { order: -2; }
.ls\:order-1 { order: -1; }
.ls\:order1 { order: 1; }
.ls\:order2 { order: 2; }
.ls\:order3 { order: 3; }
.ls\:order4 { order: 4; }
.ls\:order5 { order: 5; }
.ls\:order6 { order: 6; }
.ls\:order7 { order: 7; }
.ls\:order8 { order: 8; }
.ls\:order9 { order: 9; }
.ls\:order10 { order: 10; }
.ls\:order11 { order: 11; }
.ls\:order12 { order: 12; }
.ls\:order13 { order: 13; }
.ls\:order14 { order: 14; }
}
@media (orientation: portrait) {
.po\:flex { display: flex; flex-wrap: nowrap; flex-direction: row; }
.po\:flex\=nowrap\,row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.po\:flex\=nowrap\,row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:flex\=nowrap\,col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.po\:flex\=nowrap\,col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:flex\=row\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.po\:flex\=row_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:flex\=col\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column; }
.po\:flex\=col_reverse\,nowrap { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:flex\=wrap\,row { display: flex; flex-wrap: wrap; flex-direction: row; }
.po\:flex\=wrap\,row_reverse { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.po\:flex\=wrap\,col { display: flex; flex-wrap: wrap; flex-direction: column; }
.po\:flex\=wrap\,col_reverse { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.po\:flex\=row\,wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.po\:flex\=row_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: row-reverse; }
.po\:flex\=col\,wrap { display: flex; flex-wrap: wrap; flex-direction: column; }
.po\:flex\=col_reverse\,wrap { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
.po\:flex\=wrap_reverse\,row { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:flex\=wrap_reverse\,row_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.po\:flex\=wrap_reverse\,col { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.po\:flex\=wrap_reverse\,col_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.po\:flex\=row\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:flex\=row_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.po\:flex\=col\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column; }
.po\:flex\=col_reverse\,wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.po\:inline_flex { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.po\:inline_flex\=nowrap\,row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.po\:inline_flex\=nowrap\,row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:inline_flex\=nowrap\,col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.po\:inline_flex\=nowrap\,col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:inline_flex\=row\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.po\:inline_flex\=row_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:inline_flex\=col\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.po\:inline_flex\=col_reverse\,nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:inline_flex\=wrap\,row { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.po\:inline_flex\=wrap\,row_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.po\:inline_flex\=wrap\,col { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.po\:inline_flex\=wrap\,col_reverse { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.po\:inline_flex\=row\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.po\:inline_flex\=row_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row-reverse; }
.po\:inline_flex\=col\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column; }
.po\:inline_flex\=col_reverse\,wrap { display: inline-flex; flex-wrap: wrap; flex-direction: column-reverse; }
.po\:inline_flex\=wrap_reverse\,row { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:inline_flex\=wrap_reverse\,row_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.po\:inline_flex\=wrap_reverse\,col { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.po\:inline_flex\=wrap_reverse\,col_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.po\:inline_flex\=row\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:inline_flex\=row_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; }
.po\:inline_flex\=col\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column; }
.po\:inline_flex\=col_reverse\,wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: column-reverse; }
.po\:flex\=nowrap { display: flex; flex-wrap: nowrap; flex-direction: row; }
.po\:flex\=wrap { display: flex; flex-wrap: wrap; flex-direction: row; }
.po\:flex\=wrap_reverse { display: flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:inline_flex\=nowrap { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.po\:inline_flex\=wrap { display: inline-flex; flex-wrap: wrap; flex-direction: row; }
.po\:inline_flex\=wrap_reverse { display: inline-flex; flex-wrap: wrap-reverse; flex-direction: row; }
.po\:flex\=row { display: flex; flex-wrap: nowrap; flex-direction: row; }
.po\:flex\=row_reverse { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:flex\=col { display: flex; flex-wrap: nowrap; flex-direction: column; }
.po\:flex\=col_reverse { display: flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:inline_flex\=row { display: inline-flex; flex-wrap: nowrap; flex-direction: row; }
.po\:inline_flex\=row_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: row-reverse; }
.po\:inline_flex\=col { display: inline-flex; flex-wrap: nowrap; flex-direction: column; }
.po\:inline_flex\=col_reverse { display: inline-flex; flex-wrap: nowrap; flex-direction: column-reverse; }
.po\:flex1 { flex: 1; }
.po\:flex2 { flex: 2; }
.po\:flex3 { flex: 3; }
.po\:flex4 { flex: 4; }
.po\:flex5 { flex: 5; }
.po\:flex6 { flex: 6; }
.po\:flex7 { flex: 7; }
.po\:flex8 { flex: 8; }
.po\:flex9 { flex: 9; }
.po\:flex10 { flex: 10; }
.po\:flex11 { flex: 11; }
.po\:flex12 { flex: 12; }
.po\:flex13 { flex: 13; }
.po\:flex14 { flex: 14; }
.po\:flex_initial { flex: 0 1 auto; }
.po\:flex_one { flex: 1 1 0%; }
.po\:flex_auto { flex: 1 1 auto; }
.po\:flex_none { flex: none; }
.po\:order_none { order: 0; }
.po\:order_first { order: -9999; }
.po\:order_last { order: 9999; }
.po\:order-14 { order: -14; }
.po\:order-13 { order: -13; }
.po\:order-12 { order: -12; }
.po\:order-11 { order: -11; }
.po\:order-10 { order: -10; }
.po\:order-9 { order: -9; }
.po\:order-8 { order: -8; }
.po\:order-7 { order: -7; }
.po\:order-6 { order: -6; }
.po\:order-5 { order: -5; }
.po\:order-4 { order: -4; }
.po\:order-3 { order: -3; }
.po\:order-2 { order: -2; }
.po\:order-1 { order: -1; }
.po\:order1 { order: 1; }
.po\:order2 { order: 2; }
.po\:order3 { order: 3; }
.po\:order4 { order: 4; }
.po\:order5 { order: 5; }
.po\:order6 { order: 6; }
.po\:order7 { order: 7; }
.po\:order8 { order: 8; }
.po\:order9 { order: 9; }
.po\:order10 { order: 10; }
.po\:order11 { order: 11; }
.po\:order12 { order: 12; }
.po\:order13 { order: 13; }
.po\:order14 { order: 14; }
}

876
assets/css/containers/gap.css Normal file
View File

@ -0,0 +1,876 @@
/*******************************************************************************
* Gap: *
* The CSS 'gap' property is a shorthand for 'row-gap' and 'column-gap' which *
* specifies the size of gutters (the space between rows and columns) within *
* grid, flex and multi-column layouts. *
*******************************************************************************/
/* All Sides Gap */
.g0 { gap: 0; }
.g0\.5 { gap: 0.125rem; }
.g1 { gap: 0.25rem; }
.g1\.5 { gap: 0.375rem; }
.g2 { gap: 0.5rem; }
.g2\.5 { gap: 0.625rem; }
.g3 { gap: 0.75rem; }
.g3\.5 { gap: 0.875rem; }
.g4 { gap: 1rem; }
.g5 { gap: 1.25rem; }
.g6 { gap: 1.5rem; }
.g7 { gap: 1.75rem; }
.g8 { gap: 2rem; }
.g9 { gap: 2.25rem; }
.g10 { gap: 2.5rem; }
.g11 { gap: 2.75rem; }
.g12 { gap: 3rem; }
.g14 { gap: 3.5rem; }
.g16 { gap: 4rem; }
.g20 { gap: 5rem; }
.g24 { gap: 6rem; }
.g28 { gap: 7rem; }
.g32 { gap: 8rem; }
.g36 { gap: 9rem; }
.g40 { gap: 10rem; }
.g44 { gap: 11rem; }
.g48 { gap: 12rem; }
.g52 { gap: 13rem; }
.g56 { gap: 14rem; }
.g60 { gap: 15rem; }
.g64 { gap: 16rem; }
.g72 { gap: 18rem; }
.g80 { gap: 20rem; }
.g96 { gap: 24rem; }
.g1px { gap: 1px; }
/* Horizontal Gap */
.gx0 { row-gap: 0; }
.gx0\.5 { row-gap: 0.125rem; }
.gx1 { row-gap: 0.25rem; }
.gx1\.5 { row-gap: 0.375rem; }
.gx2 { row-gap: 0.5rem; }
.gx2\.5 { row-gap: 0.625rem; }
.gx3 { row-gap: 0.75rem; }
.gx3\.5 { row-gap: 0.875rem; }
.gx4 { row-gap: 1rem; }
.gx5 { row-gap: 1.25rem; }
.gx6 { row-gap: 1.5rem; }
.gx7 { row-gap: 1.75rem; }
.gx8 { row-gap: 2rem; }
.gx9 { row-gap: 2.25rem; }
.gx10 { row-gap: 2.5rem; }
.gx11 { row-gap: 2.75rem; }
.gx12 { row-gap: 3rem; }
.gx14 { row-gap: 3.5rem; }
.gx16 { row-gap: 4rem; }
.gx20 { row-gap: 5rem; }
.gx24 { row-gap: 6rem; }
.gx28 { row-gap: 7rem; }
.gx32 { row-gap: 8rem; }
.gx36 { row-gap: 9rem; }
.gx40 { row-gap: 10rem; }
.gx44 { row-gap: 11rem; }
.gx48 { row-gap: 12rem; }
.gx52 { row-gap: 13rem; }
.gx56 { row-gap: 14rem; }
.gx60 { row-gap: 15rem; }
.gx64 { row-gap: 16rem; }
.gx72 { row-gap: 18rem; }
.gx80 { row-gap: 20rem; }
.gx96 { row-gap: 24rem; }
.gx1px { row-gap: 1px; }
/* Vertical Gap */
.gy0 { column-gap: 0; }
.gy0\.5 { column-gap: 0.125rem; }
.gy1 { column-gap: 0.25rem; }
.gy1\.5 { column-gap: 0.375rem; }
.gy2 { column-gap: 0.5rem; }
.gy2\.5 { column-gap: 0.625rem; }
.gy3 { column-gap: 0.75rem; }
.gy3\.5 { column-gap: 0.875rem; }
.gy4 { column-gap: 1rem; }
.gy5 { column-gap: 1.25rem; }
.gy6 { column-gap: 1.5rem; }
.gy7 { column-gap: 1.75rem; }
.gy8 { column-gap: 2rem; }
.gy9 { column-gap: 2.25rem; }
.gy10 { column-gap: 2.5rem; }
.gy11 { column-gap: 2.75rem; }
.gy12 { column-gap: 3rem; }
.gy14 { column-gap: 3.5rem; }
.gy16 { column-gap: 4rem; }
.gy20 { column-gap: 5rem; }
.gy24 { column-gap: 6rem; }
.gy28 { column-gap: 7rem; }
.gy32 { column-gap: 8rem; }
.gy36 { column-gap: 9rem; }
.gy40 { column-gap: 10rem; }
.gy44 { column-gap: 11rem; }
.gy48 { column-gap: 12rem; }
.gy52 { column-gap: 13rem; }
.gy56 { column-gap: 14rem; }
.gy60 { column-gap: 15rem; }
.gy64 { column-gap: 16rem; }
.gy72 { column-gap: 18rem; }
.gy80 { column-gap: 20rem; }
.gy96 { column-gap: 24rem; }
.gy1px { column-gap: 1px; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:g0 { gap: 0; }
.sm\:g0\.5 { gap: 0.125rem; }
.sm\:g1 { gap: 0.25rem; }
.sm\:g1\.5 { gap: 0.375rem; }
.sm\:g2 { gap: 0.5rem; }
.sm\:g2\.5 { gap: 0.625rem; }
.sm\:g3 { gap: 0.75rem; }
.sm\:g3\.5 { gap: 0.875rem; }
.sm\:g4 { gap: 1rem; }
.sm\:g5 { gap: 1.25rem; }
.sm\:g6 { gap: 1.5rem; }
.sm\:g7 { gap: 1.75rem; }
.sm\:g8 { gap: 2rem; }
.sm\:g9 { gap: 2.25rem; }
.sm\:g10 { gap: 2.5rem; }
.sm\:g11 { gap: 2.75rem; }
.sm\:g12 { gap: 3rem; }
.sm\:g14 { gap: 3.5rem; }
.sm\:g16 { gap: 4rem; }
.sm\:g20 { gap: 5rem; }
.sm\:g24 { gap: 6rem; }
.sm\:g28 { gap: 7rem; }
.sm\:g32 { gap: 8rem; }
.sm\:g36 { gap: 9rem; }
.sm\:g40 { gap: 10rem; }
.sm\:g44 { gap: 11rem; }
.sm\:g48 { gap: 12rem; }
.sm\:g52 { gap: 13rem; }
.sm\:g56 { gap: 14rem; }
.sm\:g60 { gap: 15rem; }
.sm\:g64 { gap: 16rem; }
.sm\:g72 { gap: 18rem; }
.sm\:g80 { gap: 20rem; }
.sm\:g96 { gap: 24rem; }
.sm\:g1px { gap: 1px; }
.sm\:gx0 { row-gap: 0; }
.sm\:gx0\.5 { row-gap: 0.125rem; }
.sm\:gx1 { row-gap: 0.25rem; }
.sm\:gx1\.5 { row-gap: 0.375rem; }
.sm\:gx2 { row-gap: 0.5rem; }
.sm\:gx2\.5 { row-gap: 0.625rem; }
.sm\:gx3 { row-gap: 0.75rem; }
.sm\:gx3\.5 { row-gap: 0.875rem; }
.sm\:gx4 { row-gap: 1rem; }
.sm\:gx5 { row-gap: 1.25rem; }
.sm\:gx6 { row-gap: 1.5rem; }
.sm\:gx7 { row-gap: 1.75rem; }
.sm\:gx8 { row-gap: 2rem; }
.sm\:gx9 { row-gap: 2.25rem; }
.sm\:gx10 { row-gap: 2.5rem; }
.sm\:gx11 { row-gap: 2.75rem; }
.sm\:gx12 { row-gap: 3rem; }
.sm\:gx14 { row-gap: 3.5rem; }
.sm\:gx16 { row-gap: 4rem; }
.sm\:gx20 { row-gap: 5rem; }
.sm\:gx24 { row-gap: 6rem; }
.sm\:gx28 { row-gap: 7rem; }
.sm\:gx32 { row-gap: 8rem; }
.sm\:gx36 { row-gap: 9rem; }
.sm\:gx40 { row-gap: 10rem; }
.sm\:gx44 { row-gap: 11rem; }
.sm\:gx48 { row-gap: 12rem; }
.sm\:gx52 { row-gap: 13rem; }
.sm\:gx56 { row-gap: 14rem; }
.sm\:gx60 { row-gap: 15rem; }
.sm\:gx64 { row-gap: 16rem; }
.sm\:gx72 { row-gap: 18rem; }
.sm\:gx80 { row-gap: 20rem; }
.sm\:gx96 { row-gap: 24rem; }
.sm\:gx1px { row-gap: 1px; }
.sm\:gy0 { column-gap: 0; }
.sm\:gy0\.5 { column-gap: 0.125rem; }
.sm\:gy1 { column-gap: 0.25rem; }
.sm\:gy1\.5 { column-gap: 0.375rem; }
.sm\:gy2 { column-gap: 0.5rem; }
.sm\:gy2\.5 { column-gap: 0.625rem; }
.sm\:gy3 { column-gap: 0.75rem; }
.sm\:gy3\.5 { column-gap: 0.875rem; }
.sm\:gy4 { column-gap: 1rem; }
.sm\:gy5 { column-gap: 1.25rem; }
.sm\:gy6 { column-gap: 1.5rem; }
.sm\:gy7 { column-gap: 1.75rem; }
.sm\:gy8 { column-gap: 2rem; }
.sm\:gy9 { column-gap: 2.25rem; }
.sm\:gy10 { column-gap: 2.5rem; }
.sm\:gy11 { column-gap: 2.75rem; }
.sm\:gy12 { column-gap: 3rem; }
.sm\:gy14 { column-gap: 3.5rem; }
.sm\:gy16 { column-gap: 4rem; }
.sm\:gy20 { column-gap: 5rem; }
.sm\:gy24 { column-gap: 6rem; }
.sm\:gy28 { column-gap: 7rem; }
.sm\:gy32 { column-gap: 8rem; }
.sm\:gy36 { column-gap: 9rem; }
.sm\:gy40 { column-gap: 10rem; }
.sm\:gy44 { column-gap: 11rem; }
.sm\:gy48 { column-gap: 12rem; }
.sm\:gy52 { column-gap: 13rem; }
.sm\:gy56 { column-gap: 14rem; }
.sm\:gy60 { column-gap: 15rem; }
.sm\:gy64 { column-gap: 16rem; }
.sm\:gy72 { column-gap: 18rem; }
.sm\:gy80 { column-gap: 20rem; }
.sm\:gy96 { column-gap: 24rem; }
.sm\:gy1px { column-gap: 1px; }
}
@media (min-width: 768px) {
.md\:g0 { gap: 0; }
.md\:g0\.5 { gap: 0.125rem; }
.md\:g1 { gap: 0.25rem; }
.md\:g1\.5 { gap: 0.375rem; }
.md\:g2 { gap: 0.5rem; }
.md\:g2\.5 { gap: 0.625rem; }
.md\:g3 { gap: 0.75rem; }
.md\:g3\.5 { gap: 0.875rem; }
.md\:g4 { gap: 1rem; }
.md\:g5 { gap: 1.25rem; }
.md\:g6 { gap: 1.5rem; }
.md\:g7 { gap: 1.75rem; }
.md\:g8 { gap: 2rem; }
.md\:g9 { gap: 2.25rem; }
.md\:g10 { gap: 2.5rem; }
.md\:g11 { gap: 2.75rem; }
.md\:g12 { gap: 3rem; }
.md\:g14 { gap: 3.5rem; }
.md\:g16 { gap: 4rem; }
.md\:g20 { gap: 5rem; }
.md\:g24 { gap: 6rem; }
.md\:g28 { gap: 7rem; }
.md\:g32 { gap: 8rem; }
.md\:g36 { gap: 9rem; }
.md\:g40 { gap: 10rem; }
.md\:g44 { gap: 11rem; }
.md\:g48 { gap: 12rem; }
.md\:g52 { gap: 13rem; }
.md\:g56 { gap: 14rem; }
.md\:g60 { gap: 15rem; }
.md\:g64 { gap: 16rem; }
.md\:g72 { gap: 18rem; }
.md\:g80 { gap: 20rem; }
.md\:g96 { gap: 24rem; }
.md\:g1px { gap: 1px; }
.md\:gx0 { row-gap: 0; }
.md\:gx0\.5 { row-gap: 0.125rem; }
.md\:gx1 { row-gap: 0.25rem; }
.md\:gx1\.5 { row-gap: 0.375rem; }
.md\:gx2 { row-gap: 0.5rem; }
.md\:gx2\.5 { row-gap: 0.625rem; }
.md\:gx3 { row-gap: 0.75rem; }
.md\:gx3\.5 { row-gap: 0.875rem; }
.md\:gx4 { row-gap: 1rem; }
.md\:gx5 { row-gap: 1.25rem; }
.md\:gx6 { row-gap: 1.5rem; }
.md\:gx7 { row-gap: 1.75rem; }
.md\:gx8 { row-gap: 2rem; }
.md\:gx9 { row-gap: 2.25rem; }
.md\:gx10 { row-gap: 2.5rem; }
.md\:gx11 { row-gap: 2.75rem; }
.md\:gx12 { row-gap: 3rem; }
.md\:gx14 { row-gap: 3.5rem; }
.md\:gx16 { row-gap: 4rem; }
.md\:gx20 { row-gap: 5rem; }
.md\:gx24 { row-gap: 6rem; }
.md\:gx28 { row-gap: 7rem; }
.md\:gx32 { row-gap: 8rem; }
.md\:gx36 { row-gap: 9rem; }
.md\:gx40 { row-gap: 10rem; }
.md\:gx44 { row-gap: 11rem; }
.md\:gx48 { row-gap: 12rem; }
.md\:gx52 { row-gap: 13rem; }
.md\:gx56 { row-gap: 14rem; }
.md\:gx60 { row-gap: 15rem; }
.md\:gx64 { row-gap: 16rem; }
.md\:gx72 { row-gap: 18rem; }
.md\:gx80 { row-gap: 20rem; }
.md\:gx96 { row-gap: 24rem; }
.md\:gx1px { row-gap: 1px; }
.md\:gy0 { column-gap: 0; }
.md\:gy0\.5 { column-gap: 0.125rem; }
.md\:gy1 { column-gap: 0.25rem; }
.md\:gy1\.5 { column-gap: 0.375rem; }
.md\:gy2 { column-gap: 0.5rem; }
.md\:gy2\.5 { column-gap: 0.625rem; }
.md\:gy3 { column-gap: 0.75rem; }
.md\:gy3\.5 { column-gap: 0.875rem; }
.md\:gy4 { column-gap: 1rem; }
.md\:gy5 { column-gap: 1.25rem; }
.md\:gy6 { column-gap: 1.5rem; }
.md\:gy7 { column-gap: 1.75rem; }
.md\:gy8 { column-gap: 2rem; }
.md\:gy9 { column-gap: 2.25rem; }
.md\:gy10 { column-gap: 2.5rem; }
.md\:gy11 { column-gap: 2.75rem; }
.md\:gy12 { column-gap: 3rem; }
.md\:gy14 { column-gap: 3.5rem; }
.md\:gy16 { column-gap: 4rem; }
.md\:gy20 { column-gap: 5rem; }
.md\:gy24 { column-gap: 6rem; }
.md\:gy28 { column-gap: 7rem; }
.md\:gy32 { column-gap: 8rem; }
.md\:gy36 { column-gap: 9rem; }
.md\:gy40 { column-gap: 10rem; }
.md\:gy44 { column-gap: 11rem; }
.md\:gy48 { column-gap: 12rem; }
.md\:gy52 { column-gap: 13rem; }
.md\:gy56 { column-gap: 14rem; }
.md\:gy60 { column-gap: 15rem; }
.md\:gy64 { column-gap: 16rem; }
.md\:gy72 { column-gap: 18rem; }
.md\:gy80 { column-gap: 20rem; }
.md\:gy96 { column-gap: 24rem; }
.md\:gy1px { column-gap: 1px; }
}
@media (min-width: 992px) {
.lg\:g0 { gap: 0; }
.lg\:g0\.5 { gap: 0.125rem; }
.lg\:g1 { gap: 0.25rem; }
.lg\:g1\.5 { gap: 0.375rem; }
.lg\:g2 { gap: 0.5rem; }
.lg\:g2\.5 { gap: 0.625rem; }
.lg\:g3 { gap: 0.75rem; }
.lg\:g3\.5 { gap: 0.875rem; }
.lg\:g4 { gap: 1rem; }
.lg\:g5 { gap: 1.25rem; }
.lg\:g6 { gap: 1.5rem; }
.lg\:g7 { gap: 1.75rem; }
.lg\:g8 { gap: 2rem; }
.lg\:g9 { gap: 2.25rem; }
.lg\:g10 { gap: 2.5rem; }
.lg\:g11 { gap: 2.75rem; }
.lg\:g12 { gap: 3rem; }
.lg\:g14 { gap: 3.5rem; }
.lg\:g16 { gap: 4rem; }
.lg\:g20 { gap: 5rem; }
.lg\:g24 { gap: 6rem; }
.lg\:g28 { gap: 7rem; }
.lg\:g32 { gap: 8rem; }
.lg\:g36 { gap: 9rem; }
.lg\:g40 { gap: 10rem; }
.lg\:g44 { gap: 11rem; }
.lg\:g48 { gap: 12rem; }
.lg\:g52 { gap: 13rem; }
.lg\:g56 { gap: 14rem; }
.lg\:g60 { gap: 15rem; }
.lg\:g64 { gap: 16rem; }
.lg\:g72 { gap: 18rem; }
.lg\:g80 { gap: 20rem; }
.lg\:g96 { gap: 24rem; }
.lg\:g1px { gap: 1px; }
.lg\:gx0 { row-gap: 0; }
.lg\:gx0\.5 { row-gap: 0.125rem; }
.lg\:gx1 { row-gap: 0.25rem; }
.lg\:gx1\.5 { row-gap: 0.375rem; }
.lg\:gx2 { row-gap: 0.5rem; }
.lg\:gx2\.5 { row-gap: 0.625rem; }
.lg\:gx3 { row-gap: 0.75rem; }
.lg\:gx3\.5 { row-gap: 0.875rem; }
.lg\:gx4 { row-gap: 1rem; }
.lg\:gx5 { row-gap: 1.25rem; }
.lg\:gx6 { row-gap: 1.5rem; }
.lg\:gx7 { row-gap: 1.75rem; }
.lg\:gx8 { row-gap: 2rem; }
.lg\:gx9 { row-gap: 2.25rem; }
.lg\:gx10 { row-gap: 2.5rem; }
.lg\:gx11 { row-gap: 2.75rem; }
.lg\:gx12 { row-gap: 3rem; }
.lg\:gx14 { row-gap: 3.5rem; }
.lg\:gx16 { row-gap: 4rem; }
.lg\:gx20 { row-gap: 5rem; }
.lg\:gx24 { row-gap: 6rem; }
.lg\:gx28 { row-gap: 7rem; }
.lg\:gx32 { row-gap: 8rem; }
.lg\:gx36 { row-gap: 9rem; }
.lg\:gx40 { row-gap: 10rem; }
.lg\:gx44 { row-gap: 11rem; }
.lg\:gx48 { row-gap: 12rem; }
.lg\:gx52 { row-gap: 13rem; }
.lg\:gx56 { row-gap: 14rem; }
.lg\:gx60 { row-gap: 15rem; }
.lg\:gx64 { row-gap: 16rem; }
.lg\:gx72 { row-gap: 18rem; }
.lg\:gx80 { row-gap: 20rem; }
.lg\:gx96 { row-gap: 24rem; }
.lg\:gx1px { row-gap: 1px; }
.lg\:gy0 { column-gap: 0; }
.lg\:gy0\.5 { column-gap: 0.125rem; }
.lg\:gy1 { column-gap: 0.25rem; }
.lg\:gy1\.5 { column-gap: 0.375rem; }
.lg\:gy2 { column-gap: 0.5rem; }
.lg\:gy2\.5 { column-gap: 0.625rem; }
.lg\:gy3 { column-gap: 0.75rem; }
.lg\:gy3\.5 { column-gap: 0.875rem; }
.lg\:gy4 { column-gap: 1rem; }
.lg\:gy5 { column-gap: 1.25rem; }
.lg\:gy6 { column-gap: 1.5rem; }
.lg\:gy7 { column-gap: 1.75rem; }
.lg\:gy8 { column-gap: 2rem; }
.lg\:gy9 { column-gap: 2.25rem; }
.lg\:gy10 { column-gap: 2.5rem; }
.lg\:gy11 { column-gap: 2.75rem; }
.lg\:gy12 { column-gap: 3rem; }
.lg\:gy14 { column-gap: 3.5rem; }
.lg\:gy16 { column-gap: 4rem; }
.lg\:gy20 { column-gap: 5rem; }
.lg\:gy24 { column-gap: 6rem; }
.lg\:gy28 { column-gap: 7rem; }
.lg\:gy32 { column-gap: 8rem; }
.lg\:gy36 { column-gap: 9rem; }
.lg\:gy40 { column-gap: 10rem; }
.lg\:gy44 { column-gap: 11rem; }
.lg\:gy48 { column-gap: 12rem; }
.lg\:gy52 { column-gap: 13rem; }
.lg\:gy56 { column-gap: 14rem; }
.lg\:gy60 { column-gap: 15rem; }
.lg\:gy64 { column-gap: 16rem; }
.lg\:gy72 { column-gap: 18rem; }
.lg\:gy80 { column-gap: 20rem; }
.lg\:gy96 { column-gap: 24rem; }
.lg\:gy1px { column-gap: 1px; }
}
@media (min-width: 1200px) {
.xl\:g0 { gap: 0; }
.xl\:g0\.5 { gap: 0.125rem; }
.xl\:g1 { gap: 0.25rem; }
.xl\:g1\.5 { gap: 0.375rem; }
.xl\:g2 { gap: 0.5rem; }
.xl\:g2\.5 { gap: 0.625rem; }
.xl\:g3 { gap: 0.75rem; }
.xl\:g3\.5 { gap: 0.875rem; }
.xl\:g4 { gap: 1rem; }
.xl\:g5 { gap: 1.25rem; }
.xl\:g6 { gap: 1.5rem; }
.xl\:g7 { gap: 1.75rem; }
.xl\:g8 { gap: 2rem; }
.xl\:g9 { gap: 2.25rem; }
.xl\:g10 { gap: 2.5rem; }
.xl\:g11 { gap: 2.75rem; }
.xl\:g12 { gap: 3rem; }
.xl\:g14 { gap: 3.5rem; }
.xl\:g16 { gap: 4rem; }
.xl\:g20 { gap: 5rem; }
.xl\:g24 { gap: 6rem; }
.xl\:g28 { gap: 7rem; }
.xl\:g32 { gap: 8rem; }
.xl\:g36 { gap: 9rem; }
.xl\:g40 { gap: 10rem; }
.xl\:g44 { gap: 11rem; }
.xl\:g48 { gap: 12rem; }
.xl\:g52 { gap: 13rem; }
.xl\:g56 { gap: 14rem; }
.xl\:g60 { gap: 15rem; }
.xl\:g64 { gap: 16rem; }
.xl\:g72 { gap: 18rem; }
.xl\:g80 { gap: 20rem; }
.xl\:g96 { gap: 24rem; }
.xl\:g1px { gap: 1px; }
.xl\:gx0 { row-gap: 0; }
.xl\:gx0\.5 { row-gap: 0.125rem; }
.xl\:gx1 { row-gap: 0.25rem; }
.xl\:gx1\.5 { row-gap: 0.375rem; }
.xl\:gx2 { row-gap: 0.5rem; }
.xl\:gx2\.5 { row-gap: 0.625rem; }
.xl\:gx3 { row-gap: 0.75rem; }
.xl\:gx3\.5 { row-gap: 0.875rem; }
.xl\:gx4 { row-gap: 1rem; }
.xl\:gx5 { row-gap: 1.25rem; }
.xl\:gx6 { row-gap: 1.5rem; }
.xl\:gx7 { row-gap: 1.75rem; }
.xl\:gx8 { row-gap: 2rem; }
.xl\:gx9 { row-gap: 2.25rem; }
.xl\:gx10 { row-gap: 2.5rem; }
.xl\:gx11 { row-gap: 2.75rem; }
.xl\:gx12 { row-gap: 3rem; }
.xl\:gx14 { row-gap: 3.5rem; }
.xl\:gx16 { row-gap: 4rem; }
.xl\:gx20 { row-gap: 5rem; }
.xl\:gx24 { row-gap: 6rem; }
.xl\:gx28 { row-gap: 7rem; }
.xl\:gx32 { row-gap: 8rem; }
.xl\:gx36 { row-gap: 9rem; }
.xl\:gx40 { row-gap: 10rem; }
.xl\:gx44 { row-gap: 11rem; }
.xl\:gx48 { row-gap: 12rem; }
.xl\:gx52 { row-gap: 13rem; }
.xl\:gx56 { row-gap: 14rem; }
.xl\:gx60 { row-gap: 15rem; }
.xl\:gx64 { row-gap: 16rem; }
.xl\:gx72 { row-gap: 18rem; }
.xl\:gx80 { row-gap: 20rem; }
.xl\:gx96 { row-gap: 24rem; }
.xl\:gx1px { row-gap: 1px; }
.xl\:gy0 { column-gap: 0; }
.xl\:gy0\.5 { column-gap: 0.125rem; }
.xl\:gy1 { column-gap: 0.25rem; }
.xl\:gy1\.5 { column-gap: 0.375rem; }
.xl\:gy2 { column-gap: 0.5rem; }
.xl\:gy2\.5 { column-gap: 0.625rem; }
.xl\:gy3 { column-gap: 0.75rem; }
.xl\:gy3\.5 { column-gap: 0.875rem; }
.xl\:gy4 { column-gap: 1rem; }
.xl\:gy5 { column-gap: 1.25rem; }
.xl\:gy6 { column-gap: 1.5rem; }
.xl\:gy7 { column-gap: 1.75rem; }
.xl\:gy8 { column-gap: 2rem; }
.xl\:gy9 { column-gap: 2.25rem; }
.xl\:gy10 { column-gap: 2.5rem; }
.xl\:gy11 { column-gap: 2.75rem; }
.xl\:gy12 { column-gap: 3rem; }
.xl\:gy14 { column-gap: 3.5rem; }
.xl\:gy16 { column-gap: 4rem; }
.xl\:gy20 { column-gap: 5rem; }
.xl\:gy24 { column-gap: 6rem; }
.xl\:gy28 { column-gap: 7rem; }
.xl\:gy32 { column-gap: 8rem; }
.xl\:gy36 { column-gap: 9rem; }
.xl\:gy40 { column-gap: 10rem; }
.xl\:gy44 { column-gap: 11rem; }
.xl\:gy48 { column-gap: 12rem; }
.xl\:gy52 { column-gap: 13rem; }
.xl\:gy56 { column-gap: 14rem; }
.xl\:gy60 { column-gap: 15rem; }
.xl\:gy64 { column-gap: 16rem; }
.xl\:gy72 { column-gap: 18rem; }
.xl\:gy80 { column-gap: 20rem; }
.xl\:gy96 { column-gap: 24rem; }
.xl\:gy1px { column-gap: 1px; }
}
@media (min-width: 1400px) {
.xxl\:g0 { gap: 0; }
.xxl\:g0\.5 { gap: 0.125rem; }
.xxl\:g1 { gap: 0.25rem; }
.xxl\:g1\.5 { gap: 0.375rem; }
.xxl\:g2 { gap: 0.5rem; }
.xxl\:g2\.5 { gap: 0.625rem; }
.xxl\:g3 { gap: 0.75rem; }
.xxl\:g3\.5 { gap: 0.875rem; }
.xxl\:g4 { gap: 1rem; }
.xxl\:g5 { gap: 1.25rem; }
.xxl\:g6 { gap: 1.5rem; }
.xxl\:g7 { gap: 1.75rem; }
.xxl\:g8 { gap: 2rem; }
.xxl\:g9 { gap: 2.25rem; }
.xxl\:g10 { gap: 2.5rem; }
.xxl\:g11 { gap: 2.75rem; }
.xxl\:g12 { gap: 3rem; }
.xxl\:g14 { gap: 3.5rem; }
.xxl\:g16 { gap: 4rem; }
.xxl\:g20 { gap: 5rem; }
.xxl\:g24 { gap: 6rem; }
.xxl\:g28 { gap: 7rem; }
.xxl\:g32 { gap: 8rem; }
.xxl\:g36 { gap: 9rem; }
.xxl\:g40 { gap: 10rem; }
.xxl\:g44 { gap: 11rem; }
.xxl\:g48 { gap: 12rem; }
.xxl\:g52 { gap: 13rem; }
.xxl\:g56 { gap: 14rem; }
.xxl\:g60 { gap: 15rem; }
.xxl\:g64 { gap: 16rem; }
.xxl\:g72 { gap: 18rem; }
.xxl\:g80 { gap: 20rem; }
.xxl\:g96 { gap: 24rem; }
.xxl\:g1px { gap: 1px; }
.xxl\:gx0 { row-gap: 0; }
.xxl\:gx0\.5 { row-gap: 0.125rem; }
.xxl\:gx1 { row-gap: 0.25rem; }
.xxl\:gx1\.5 { row-gap: 0.375rem; }
.xxl\:gx2 { row-gap: 0.5rem; }
.xxl\:gx2\.5 { row-gap: 0.625rem; }
.xxl\:gx3 { row-gap: 0.75rem; }
.xxl\:gx3\.5 { row-gap: 0.875rem; }
.xxl\:gx4 { row-gap: 1rem; }
.xxl\:gx5 { row-gap: 1.25rem; }
.xxl\:gx6 { row-gap: 1.5rem; }
.xxl\:gx7 { row-gap: 1.75rem; }
.xxl\:gx8 { row-gap: 2rem; }
.xxl\:gx9 { row-gap: 2.25rem; }
.xxl\:gx10 { row-gap: 2.5rem; }
.xxl\:gx11 { row-gap: 2.75rem; }
.xxl\:gx12 { row-gap: 3rem; }
.xxl\:gx14 { row-gap: 3.5rem; }
.xxl\:gx16 { row-gap: 4rem; }
.xxl\:gx20 { row-gap: 5rem; }
.xxl\:gx24 { row-gap: 6rem; }
.xxl\:gx28 { row-gap: 7rem; }
.xxl\:gx32 { row-gap: 8rem; }
.xxl\:gx36 { row-gap: 9rem; }
.xxl\:gx40 { row-gap: 10rem; }
.xxl\:gx44 { row-gap: 11rem; }
.xxl\:gx48 { row-gap: 12rem; }
.xxl\:gx52 { row-gap: 13rem; }
.xxl\:gx56 { row-gap: 14rem; }
.xxl\:gx60 { row-gap: 15rem; }
.xxl\:gx64 { row-gap: 16rem; }
.xxl\:gx72 { row-gap: 18rem; }
.xxl\:gx80 { row-gap: 20rem; }
.xxl\:gx96 { row-gap: 24rem; }
.xxl\:gx1px { row-gap: 1px; }
.xxl\:gy0 { column-gap: 0; }
.xxl\:gy0\.5 { column-gap: 0.125rem; }
.xxl\:gy1 { column-gap: 0.25rem; }
.xxl\:gy1\.5 { column-gap: 0.375rem; }
.xxl\:gy2 { column-gap: 0.5rem; }
.xxl\:gy2\.5 { column-gap: 0.625rem; }
.xxl\:gy3 { column-gap: 0.75rem; }
.xxl\:gy3\.5 { column-gap: 0.875rem; }
.xxl\:gy4 { column-gap: 1rem; }
.xxl\:gy5 { column-gap: 1.25rem; }
.xxl\:gy6 { column-gap: 1.5rem; }
.xxl\:gy7 { column-gap: 1.75rem; }
.xxl\:gy8 { column-gap: 2rem; }
.xxl\:gy9 { column-gap: 2.25rem; }
.xxl\:gy10 { column-gap: 2.5rem; }
.xxl\:gy11 { column-gap: 2.75rem; }
.xxl\:gy12 { column-gap: 3rem; }
.xxl\:gy14 { column-gap: 3.5rem; }
.xxl\:gy16 { column-gap: 4rem; }
.xxl\:gy20 { column-gap: 5rem; }
.xxl\:gy24 { column-gap: 6rem; }
.xxl\:gy28 { column-gap: 7rem; }
.xxl\:gy32 { column-gap: 8rem; }
.xxl\:gy36 { column-gap: 9rem; }
.xxl\:gy40 { column-gap: 10rem; }
.xxl\:gy44 { column-gap: 11rem; }
.xxl\:gy48 { column-gap: 12rem; }
.xxl\:gy52 { column-gap: 13rem; }
.xxl\:gy56 { column-gap: 14rem; }
.xxl\:gy60 { column-gap: 15rem; }
.xxl\:gy64 { column-gap: 16rem; }
.xxl\:gy72 { column-gap: 18rem; }
.xxl\:gy80 { column-gap: 20rem; }
.xxl\:gy96 { column-gap: 24rem; }
.xxl\:gy1px { column-gap: 1px; }
}
@media (orientation: landscape) {
.ls\:g0 { gap: 0; }
.ls\:g0\.5 { gap: 0.125rem; }
.ls\:g1 { gap: 0.25rem; }
.ls\:g1\.5 { gap: 0.375rem; }
.ls\:g2 { gap: 0.5rem; }
.ls\:g2\.5 { gap: 0.625rem; }
.ls\:g3 { gap: 0.75rem; }
.ls\:g3\.5 { gap: 0.875rem; }
.ls\:g4 { gap: 1rem; }
.ls\:g5 { gap: 1.25rem; }
.ls\:g6 { gap: 1.5rem; }
.ls\:g7 { gap: 1.75rem; }
.ls\:g8 { gap: 2rem; }
.ls\:g9 { gap: 2.25rem; }
.ls\:g10 { gap: 2.5rem; }
.ls\:g11 { gap: 2.75rem; }
.ls\:g12 { gap: 3rem; }
.ls\:g14 { gap: 3.5rem; }
.ls\:g16 { gap: 4rem; }
.ls\:g20 { gap: 5rem; }
.ls\:g24 { gap: 6rem; }
.ls\:g28 { gap: 7rem; }
.ls\:g32 { gap: 8rem; }
.ls\:g36 { gap: 9rem; }
.ls\:g40 { gap: 10rem; }
.ls\:g44 { gap: 11rem; }
.ls\:g48 { gap: 12rem; }
.ls\:g52 { gap: 13rem; }
.ls\:g56 { gap: 14rem; }
.ls\:g60 { gap: 15rem; }
.ls\:g64 { gap: 16rem; }
.ls\:g72 { gap: 18rem; }
.ls\:g80 { gap: 20rem; }
.ls\:g96 { gap: 24rem; }
.ls\:g1px { gap: 1px; }
.ls\:gx0 { row-gap: 0; }
.ls\:gx0\.5 { row-gap: 0.125rem; }
.ls\:gx1 { row-gap: 0.25rem; }
.ls\:gx1\.5 { row-gap: 0.375rem; }
.ls\:gx2 { row-gap: 0.5rem; }
.ls\:gx2\.5 { row-gap: 0.625rem; }
.ls\:gx3 { row-gap: 0.75rem; }
.ls\:gx3\.5 { row-gap: 0.875rem; }
.ls\:gx4 { row-gap: 1rem; }
.ls\:gx5 { row-gap: 1.25rem; }
.ls\:gx6 { row-gap: 1.5rem; }
.ls\:gx7 { row-gap: 1.75rem; }
.ls\:gx8 { row-gap: 2rem; }
.ls\:gx9 { row-gap: 2.25rem; }
.ls\:gx10 { row-gap: 2.5rem; }
.ls\:gx11 { row-gap: 2.75rem; }
.ls\:gx12 { row-gap: 3rem; }
.ls\:gx14 { row-gap: 3.5rem; }
.ls\:gx16 { row-gap: 4rem; }
.ls\:gx20 { row-gap: 5rem; }
.ls\:gx24 { row-gap: 6rem; }
.ls\:gx28 { row-gap: 7rem; }
.ls\:gx32 { row-gap: 8rem; }
.ls\:gx36 { row-gap: 9rem; }
.ls\:gx40 { row-gap: 10rem; }
.ls\:gx44 { row-gap: 11rem; }
.ls\:gx48 { row-gap: 12rem; }
.ls\:gx52 { row-gap: 13rem; }
.ls\:gx56 { row-gap: 14rem; }
.ls\:gx60 { row-gap: 15rem; }
.ls\:gx64 { row-gap: 16rem; }
.ls\:gx72 { row-gap: 18rem; }
.ls\:gx80 { row-gap: 20rem; }
.ls\:gx96 { row-gap: 24rem; }
.ls\:gx1px { row-gap: 1px; }
.ls\:gy0 { column-gap: 0; }
.ls\:gy0\.5 { column-gap: 0.125rem; }
.ls\:gy1 { column-gap: 0.25rem; }
.ls\:gy1\.5 { column-gap: 0.375rem; }
.ls\:gy2 { column-gap: 0.5rem; }
.ls\:gy2\.5 { column-gap: 0.625rem; }
.ls\:gy3 { column-gap: 0.75rem; }
.ls\:gy3\.5 { column-gap: 0.875rem; }
.ls\:gy4 { column-gap: 1rem; }
.ls\:gy5 { column-gap: 1.25rem; }
.ls\:gy6 { column-gap: 1.5rem; }
.ls\:gy7 { column-gap: 1.75rem; }
.ls\:gy8 { column-gap: 2rem; }
.ls\:gy9 { column-gap: 2.25rem; }
.ls\:gy10 { column-gap: 2.5rem; }
.ls\:gy11 { column-gap: 2.75rem; }
.ls\:gy12 { column-gap: 3rem; }
.ls\:gy14 { column-gap: 3.5rem; }
.ls\:gy16 { column-gap: 4rem; }
.ls\:gy20 { column-gap: 5rem; }
.ls\:gy24 { column-gap: 6rem; }
.ls\:gy28 { column-gap: 7rem; }
.ls\:gy32 { column-gap: 8rem; }
.ls\:gy36 { column-gap: 9rem; }
.ls\:gy40 { column-gap: 10rem; }
.ls\:gy44 { column-gap: 11rem; }
.ls\:gy48 { column-gap: 12rem; }
.ls\:gy52 { column-gap: 13rem; }
.ls\:gy56 { column-gap: 14rem; }
.ls\:gy60 { column-gap: 15rem; }
.ls\:gy64 { column-gap: 16rem; }
.ls\:gy72 { column-gap: 18rem; }
.ls\:gy80 { column-gap: 20rem; }
.ls\:gy96 { column-gap: 24rem; }
.ls\:gy1px { column-gap: 1px; }
}
@media (orientation: portrait) {
.po\:g0 { gap: 0; }
.po\:g0\.5 { gap: 0.125rem; }
.po\:g1 { gap: 0.25rem; }
.po\:g1\.5 { gap: 0.375rem; }
.po\:g2 { gap: 0.5rem; }
.po\:g2\.5 { gap: 0.625rem; }
.po\:g3 { gap: 0.75rem; }
.po\:g3\.5 { gap: 0.875rem; }
.po\:g4 { gap: 1rem; }
.po\:g5 { gap: 1.25rem; }
.po\:g6 { gap: 1.5rem; }
.po\:g7 { gap: 1.75rem; }
.po\:g8 { gap: 2rem; }
.po\:g9 { gap: 2.25rem; }
.po\:g10 { gap: 2.5rem; }
.po\:g11 { gap: 2.75rem; }
.po\:g12 { gap: 3rem; }
.po\:g14 { gap: 3.5rem; }
.po\:g16 { gap: 4rem; }
.po\:g20 { gap: 5rem; }
.po\:g24 { gap: 6rem; }
.po\:g28 { gap: 7rem; }
.po\:g32 { gap: 8rem; }
.po\:g36 { gap: 9rem; }
.po\:g40 { gap: 10rem; }
.po\:g44 { gap: 11rem; }
.po\:g48 { gap: 12rem; }
.po\:g52 { gap: 13rem; }
.po\:g56 { gap: 14rem; }
.po\:g60 { gap: 15rem; }
.po\:g64 { gap: 16rem; }
.po\:g72 { gap: 18rem; }
.po\:g80 { gap: 20rem; }
.po\:g96 { gap: 24rem; }
.po\:g1px { gap: 1px; }
.po\:gx0 { row-gap: 0; }
.po\:gx0\.5 { row-gap: 0.125rem; }
.po\:gx1 { row-gap: 0.25rem; }
.po\:gx1\.5 { row-gap: 0.375rem; }
.po\:gx2 { row-gap: 0.5rem; }
.po\:gx2\.5 { row-gap: 0.625rem; }
.po\:gx3 { row-gap: 0.75rem; }
.po\:gx3\.5 { row-gap: 0.875rem; }
.po\:gx4 { row-gap: 1rem; }
.po\:gx5 { row-gap: 1.25rem; }
.po\:gx6 { row-gap: 1.5rem; }
.po\:gx7 { row-gap: 1.75rem; }
.po\:gx8 { row-gap: 2rem; }
.po\:gx9 { row-gap: 2.25rem; }
.po\:gx10 { row-gap: 2.5rem; }
.po\:gx11 { row-gap: 2.75rem; }
.po\:gx12 { row-gap: 3rem; }
.po\:gx14 { row-gap: 3.5rem; }
.po\:gx16 { row-gap: 4rem; }
.po\:gx20 { row-gap: 5rem; }
.po\:gx24 { row-gap: 6rem; }
.po\:gx28 { row-gap: 7rem; }
.po\:gx32 { row-gap: 8rem; }
.po\:gx36 { row-gap: 9rem; }
.po\:gx40 { row-gap: 10rem; }
.po\:gx44 { row-gap: 11rem; }
.po\:gx48 { row-gap: 12rem; }
.po\:gx52 { row-gap: 13rem; }
.po\:gx56 { row-gap: 14rem; }
.po\:gx60 { row-gap: 15rem; }
.po\:gx64 { row-gap: 16rem; }
.po\:gx72 { row-gap: 18rem; }
.po\:gx80 { row-gap: 20rem; }
.po\:gx96 { row-gap: 24rem; }
.po\:gx1px { row-gap: 1px; }
.po\:gy0 { column-gap: 0; }
.po\:gy0\.5 { column-gap: 0.125rem; }
.po\:gy1 { column-gap: 0.25rem; }
.po\:gy1\.5 { column-gap: 0.375rem; }
.po\:gy2 { column-gap: 0.5rem; }
.po\:gy2\.5 { column-gap: 0.625rem; }
.po\:gy3 { column-gap: 0.75rem; }
.po\:gy3\.5 { column-gap: 0.875rem; }
.po\:gy4 { column-gap: 1rem; }
.po\:gy5 { column-gap: 1.25rem; }
.po\:gy6 { column-gap: 1.5rem; }
.po\:gy7 { column-gap: 1.75rem; }
.po\:gy8 { column-gap: 2rem; }
.po\:gy9 { column-gap: 2.25rem; }
.po\:gy10 { column-gap: 2.5rem; }
.po\:gy11 { column-gap: 2.75rem; }
.po\:gy12 { column-gap: 3rem; }
.po\:gy14 { column-gap: 3.5rem; }
.po\:gy16 { column-gap: 4rem; }
.po\:gy20 { column-gap: 5rem; }
.po\:gy24 { column-gap: 6rem; }
.po\:gy28 { column-gap: 7rem; }
.po\:gy32 { column-gap: 8rem; }
.po\:gy36 { column-gap: 9rem; }
.po\:gy40 { column-gap: 10rem; }
.po\:gy44 { column-gap: 11rem; }
.po\:gy48 { column-gap: 12rem; }
.po\:gy52 { column-gap: 13rem; }
.po\:gy56 { column-gap: 14rem; }
.po\:gy60 { column-gap: 15rem; }
.po\:gy64 { column-gap: 16rem; }
.po\:gy72 { column-gap: 18rem; }
.po\:gy80 { column-gap: 20rem; }
.po\:gy96 { column-gap: 24rem; }
.po\:gy1px { column-gap: 1px; }
}

366
assets/css/cursors/index.css Normal file
View File

@ -0,0 +1,366 @@
/*******************************************************************************
* Cursors: *
* The CSS 'cursor' property allows us to specify how the cursor should be *
* rendered. *
* *
* Notes: *
* - In order to provide a custom cursor class, you should give the element a *
* 'cursor' class and a --cursor variable which is a url() to your cursor. *
* The format of the url must be '@/path/to/your/cursor.cur'. There is *
* already a huge collection of cursors available, but you can add more if *
* you want to in the 'uilib/Utility Classes/Cursors/@' folder. *
*******************************************************************************/
/* General */
.no_cursor { cursor: none; } /* No cursor is rendered */
.cur_auto { cursor: auto; } /* The UA determines the cursor based on the current context e.g. text when hovering text, pointer on links, etc */
.cur_arrow { cursor: default; } /* Platform-dependent default cursor; Typically an arrow */
/* Links & Status */
.cur_context_menu { cursor: context-menu; } /* Determines that a context menu is available (bug 258960 WONTFIX: Only supported on macOS and Linux) */
.cur_help { cursor: help; } /* Determines that help information is available */
.cur_pointer { cursor: pointer; } /* Determines that the element is a link */
.cur_progress { cursor: progress; } /* Determines that the program is busy in the background, but the user can still interact with the interface */
.cur_wait { cursor: wait; } /* Determines that the program is busy, and the use can't interact with the interface */
/* Selection */
.cur_cell { cursor: cell; } /* Determines that the element is a table cell or set of cells which can be selected */
.cur_crosshair { cursor: crosshair; } /* Often used to determine selection in a bitmap */
.cur_text { cursor: text; } /* Determines that the text can be selected (used for horizontal text i.e. the normal left-to-right or right-to-left text) */
.cur_ver_text { cursor: vertical-text; } /* Determines that the text can be selected (used for vertical text) */
/* Darg & Drop */
.cur_alias { cursor: alias; } /* Determines that an alias or shortcut is to be created */
.cur_copy { cursor: copy; } /* Determines that something is to be copied */
.cur_move { cursor: move; } /* Determines that something is to be moved */
.cur_no_drop { cursor: no-drop; } /* Determines that an item may not be dropped at the current location (bug 275173: On Windows and macOS, no-drop is the same as not-allowed) */
.cur_stop { cursor: not-allowed; } /* Determines that the requested action will not be carried out */
.cur_grab { cursor: grab; } /* Determines that the element can be grabbed (dragged to be moved) */
.cur_grabbing { cursor: grabbing; } /* Determines that the element is being grabbed (dragged to be moved) */
/* Reszing & Scrolling */
.cur_pan { cursor: all-scroll; } /* Determines that the element can be scrolled (panned) in any direction (bug 275174: On Windows, all-scroll is the same as move) */
.cur_col_resize { cursor: col-resize; } /* Determines that the item/column can be resized horizontally */
.cur_row_resize { cursor: row-resize; } /* Determines that the item/row can be resized vertically */
.cur_hor_resize { cursor: ew-resize; } /* Determines that the element can be resized horizontally */
.cur_ver_resize { cursor: ns-resize; } /* Determines that the element can be resized vertically */
.cur_diag_resize { cursor: nesw-resize; } /* Determines that the element can be resized diagonally */
.cur_reverse_diag_resize { cursor: nwse-resize; } /* Determines that the element can be resized diagonally in reverse */
.cur_top_resize { cursor: n-resize; } /* Determines that the top edge of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_bottom_resize { cursor: s-resize; } /* Determines that the bottom edge of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_left_resize { cursor: w-resize; } /* Determines that the left edge of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_right_resize { cursor: e-resize; } /* Determines that the right edge of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_top_left_resize { cursor: nw-resize; } /* Determines that the top-left corner of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_top_right_resize { cursor: ne-resize; } /* Determines that the top-right corner of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_bottom_left_resize { cursor: sw-resize; } /* Determines that the bottom-left corner of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
.cur_bottom_right_resize { cursor: se-resize; } /* Determines that the bottom-right corner of the element is to be moved (bug WONTFIX: On Windows, an equivalent bidirectional cursor is shown) */
/* Zooming */
.cur_zoom_in { cursor: zoom-in; } /* Determines that the element can be zoomed (magnified) in */
.cur_zoom_out { cursor: zoom-out; } /* Determines that the element can be zoomed (magnified) out */
/* Custom */
.cursor {
cursor: var(--cursor), auto; /* Use the 'auto' cursor as a fallback */
}
/*********************/
/* Disabled Variants */
/*********************/
.disabled\:no_cursor:disabled { cursor: none; }
.disabled\:cur_auto:disabled { cursor: auto; }
.disabled\:cur_arrow:disabled { cursor: default; }
.disabled\:cur_context_menu:disabled { cursor: context-menu; }
.disabled\:cur_help:disabled { cursor: help; }
.disabled\:cur_pointer:disabled { cursor: pointer; }
.disabled\:cur_progress:disabled { cursor: progress; }
.disabled\:cur_wait:disabled { cursor: wait; }
.disabled\:cur_cell:disabled { cursor: cell; }
.disabled\:cur_crosshair:disabled { cursor: crosshair; }
.disabled\:cur_text:disabled { cursor: text; }
.disabled\:cur_ver_text:disabled { cursor: vertical-text; }
.disabled\:cur_alias:disabled { cursor: alias; }
.disabled\:cur_copy:disabled { cursor: copy; }
.disabled\:cur_move:disabled { cursor: move; }
.disabled\:cur_no_drop:disabled { cursor: no-drop; }
.disabled\:cur_stop:disabled { cursor: not-allowed; }
.disabled\:cur_grab:disabled { cursor: grab; }
.disabled\:cur_grabbing:disabled { cursor: grabbing; }
.disabled\:cur_pan:disabled { cursor: all-scroll; }
.disabled\:cur_col_resize:disabled { cursor: col-resize; }
.disabled\:cur_row_resize:disabled { cursor: row-resize; }
.disabled\:cur_hor_resize:disabled { cursor: ew-resize; }
.disabled\:cur_ver_resize:disabled { cursor: ns-resize; }
.disabled\:cur_diag_resize:disabled { cursor: nesw-resize; }
.disabled\:cur_reverse_diag_resize:disabled { cursor: nwse-resize; }
.disabled\:cur_top_resize:disabled { cursor: n-resize; }
.disabled\:cur_bottom_resize:disabled { cursor: s-resize; }
.disabled\:cur_left_resize:disabled { cursor: w-resize; }
.disabled\:cur_right_resize:disabled { cursor: e-resize; }
.disabled\:cur_top_left_resize:disabled { cursor: nw-resize; }
.disabled\:cur_top_right_resize:disabled { cursor: ne-resize; }
.disabled\:cur_bottom_left_resize:disabled { cursor: sw-resize; }
.disabled\:cur_bottom_right_resize:disabled { cursor: se-resize; }
.disabled\:cur_zoom_in:disabled { cursor: zoom-in; }
.disabled\:cur_zoom_out:disabled { cursor: zoom-out; }
.disabled\:cursor:disabled { cursor: var(--cursor), auto; }
/********************/
/* Focused Variants */
/********************/
.focus\:no_cursor:focus { cursor: none; }
.focus\:cur_auto:focus { cursor: auto; }
.focus\:cur_arrow:focus { cursor: default; }
.focus\:cur_context_menu:focus { cursor: context-menu; }
.focus\:cur_help:focus { cursor: help; }
.focus\:cur_pointer:focus { cursor: pointer; }
.focus\:cur_progress:focus { cursor: progress; }
.focus\:cur_wait:focus { cursor: wait; }
.focus\:cur_cell:focus { cursor: cell; }
.focus\:cur_crosshair:focus { cursor: crosshair; }
.focus\:cur_text:focus { cursor: text; }
.focus\:cur_ver_text:focus { cursor: vertical-text; }
.focus\:cur_alias:focus { cursor: alias; }
.focus\:cur_copy:focus { cursor: copy; }
.focus\:cur_move:focus { cursor: move; }
.focus\:cur_no_drop:focus { cursor: no-drop; }
.focus\:cur_stop:focus { cursor: not-allowed; }
.focus\:cur_grab:focus { cursor: grab; }
.focus\:cur_grabbing:focus { cursor: grabbing; }
.focus\:cur_pan:focus { cursor: all-scroll; }
.focus\:cur_col_resize:focus { cursor: col-resize; }
.focus\:cur_row_resize:focus { cursor: row-resize; }
.focus\:cur_hor_resize:focus { cursor: ew-resize; }
.focus\:cur_ver_resize:focus { cursor: ns-resize; }
.focus\:cur_diag_resize:focus { cursor: nesw-resize; }
.focus\:cur_reverse_diag_resize:focus { cursor: nwse-resize; }
.focus\:cur_top_resize:focus { cursor: n-resize; }
.focus\:cur_bottom_resize:focus { cursor: s-resize; }
.focus\:cur_left_resize:focus { cursor: w-resize; }
.focus\:cur_right_resize:focus { cursor: e-resize; }
.focus\:cur_top_left_resize:focus { cursor: nw-resize; }
.focus\:cur_top_right_resize:focus { cursor: ne-resize; }
.focus\:cur_bottom_left_resize:focus { cursor: sw-resize; }
.focus\:cur_bottom_right_resize:focus { cursor: se-resize; }
.focus\:cur_zoom_in:focus { cursor: zoom-in; }
.focus\:cur_zoom_out:focus { cursor: zoom-out; }
.focus\:cursor:focus { cursor: var(--cursor), auto; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:no_cursor { cursor: none; }
.sm\:cur_auto { cursor: auto; }
.sm\:cur_arrow { cursor: default; }
.sm\:cur_context_menu { cursor: context-menu; }
.sm\:cur_help { cursor: help; }
.sm\:cur_pointer { cursor: pointer; }
.sm\:cur_progress { cursor: progress; }
.sm\:cur_wait { cursor: wait; }
.sm\:cur_cell { cursor: cell; }
.sm\:cur_crosshair { cursor: crosshair; }
.sm\:cur_text { cursor: text; }
.sm\:cur_ver_text { cursor: vertical-text; }
.sm\:cur_alias { cursor: alias; }
.sm\:cur_copy { cursor: copy; }
.sm\:cur_move { cursor: move; }
.sm\:cur_no_drop { cursor: no-drop; }
.sm\:cur_stop { cursor: not-allowed; }
.sm\:cur_grab { cursor: grab; }
.sm\:cur_grabbing { cursor: grabbing; }
.sm\:cur_pan { cursor: all-scroll; }
.sm\:cur_col_resize { cursor: col-resize; }
.sm\:cur_row_resize { cursor: row-resize; }
.sm\:cur_hor_resize { cursor: ew-resize; }
.sm\:cur_ver_resize { cursor: ns-resize; }
.sm\:cur_diag_resize { cursor: nesw-resize; }
.sm\:cur_reverse_diag_resize { cursor: nwse-resize; }
.sm\:cur_top_resize { cursor: n-resize; }
.sm\:cur_bottom_resize { cursor: s-resize; }
.sm\:cur_left_resize { cursor: w-resize; }
.sm\:cur_right_resize { cursor: e-resize; }
.sm\:cur_top_left_resize { cursor: nw-resize; }
.sm\:cur_top_right_resize { cursor: ne-resize; }
.sm\:cur_bottom_left_resize { cursor: sw-resize; }
.sm\:cur_bottom_right_resize { cursor: se-resize; }
.sm\:cur_zoom_in { cursor: zoom-in; }
.sm\:cur_zoom_out { cursor: zoom-out; }
.sm\:cursor { cursor: var(--cursor), auto; }
}
@media (min-width: 768px) {
.md\:no_cursor { cursor: none; }
.md\:cur_auto { cursor: auto; }
.md\:cur_arrow { cursor: default; }
.md\:cur_context_menu { cursor: context-menu; }
.md\:cur_help { cursor: help; }
.md\:cur_pointer { cursor: pointer; }
.md\:cur_progress { cursor: progress; }
.md\:cur_wait { cursor: wait; }
.md\:cur_cell { cursor: cell; }
.md\:cur_crosshair { cursor: crosshair; }
.md\:cur_text { cursor: text; }
.md\:cur_ver_text { cursor: vertical-text; }
.md\:cur_alias { cursor: alias; }
.md\:cur_copy { cursor: copy; }
.md\:cur_move { cursor: move; }
.md\:cur_no_drop { cursor: no-drop; }
.md\:cur_stop { cursor: not-allowed; }
.md\:cur_grab { cursor: grab; }
.md\:cur_grabbing { cursor: grabbing; }
.md\:cur_pan { cursor: all-scroll; }
.md\:cur_col_resize { cursor: col-resize; }
.md\:cur_row_resize { cursor: row-resize; }
.md\:cur_hor_resize { cursor: ew-resize; }
.md\:cur_ver_resize { cursor: ns-resize; }
.md\:cur_diag_resize { cursor: nesw-resize; }
.md\:cur_reverse_diag_resize { cursor: nwse-resize; }
.md\:cur_top_resize { cursor: n-resize; }
.md\:cur_bottom_resize { cursor: s-resize; }
.md\:cur_left_resize { cursor: w-resize; }
.md\:cur_right_resize { cursor: e-resize; }
.md\:cur_top_left_resize { cursor: nw-resize; }
.md\:cur_top_right_resize { cursor: ne-resize; }
.md\:cur_bottom_left_resize { cursor: sw-resize; }
.md\:cur_bottom_right_resize { cursor: se-resize; }
.md\:cur_zoom_in { cursor: zoom-in; }
.md\:cur_zoom_out { cursor: zoom-out; }
.md\:cursor { cursor: var(--cursor), auto; }
}
@media (min-width: 992px) {
.lg\:no_cursor { cursor: none; }
.lg\:cur_auto { cursor: auto; }
.lg\:cur_arrow { cursor: default; }
.lg\:cur_context_menu { cursor: context-menu; }
.lg\:cur_help { cursor: help; }
.lg\:cur_pointer { cursor: pointer; }
.lg\:cur_progress { cursor: progress; }
.lg\:cur_wait { cursor: wait; }
.lg\:cur_cell { cursor: cell; }
.lg\:cur_crosshair { cursor: crosshair; }
.lg\:cur_text { cursor: text; }
.lg\:cur_ver_text { cursor: vertical-text; }
.lg\:cur_alias { cursor: alias; }
.lg\:cur_copy { cursor: copy; }
.lg\:cur_move { cursor: move; }
.lg\:cur_no_drop { cursor: no-drop; }
.lg\:cur_stop { cursor: not-allowed; }
.lg\:cur_grab { cursor: grab; }
.lg\:cur_grabbing { cursor: grabbing; }
.lg\:cur_pan { cursor: all-scroll; }
.lg\:cur_col_resize { cursor: col-resize; }
.lg\:cur_row_resize { cursor: row-resize; }
.lg\:cur_hor_resize { cursor: ew-resize; }
.lg\:cur_ver_resize { cursor: ns-resize; }
.lg\:cur_diag_resize { cursor: nesw-resize; }
.lg\:cur_reverse_diag_resize { cursor: nwse-resize; }
.lg\:cur_top_resize { cursor: n-resize; }
.lg\:cur_bottom_resize { cursor: s-resize; }
.lg\:cur_left_resize { cursor: w-resize; }
.lg\:cur_right_resize { cursor: e-resize; }
.lg\:cur_top_left_resize { cursor: nw-resize; }
.lg\:cur_top_right_resize { cursor: ne-resize; }
.lg\:cur_bottom_left_resize { cursor: sw-resize; }
.lg\:cur_bottom_right_resize { cursor: se-resize; }
.lg\:cur_zoom_in { cursor: zoom-in; }
.lg\:cur_zoom_out { cursor: zoom-out; }
.lg\:cursor { cursor: var(--cursor), auto; }
}
@media (min-width: 1200px) {
.xl\:no_cursor { cursor: none; }
.xl\:cur_auto { cursor: auto; }
.xl\:cur_arrow { cursor: default; }
.xl\:cur_context_menu { cursor: context-menu; }
.xl\:cur_help { cursor: help; }
.xl\:cur_pointer { cursor: pointer; }
.xl\:cur_progress { cursor: progress; }
.xl\:cur_wait { cursor: wait; }
.xl\:cur_cell { cursor: cell; }
.xl\:cur_crosshair { cursor: crosshair; }
.xl\:cur_text { cursor: text; }
.xl\:cur_ver_text { cursor: vertical-text; }
.xl\:cur_alias { cursor: alias; }
.xl\:cur_copy { cursor: copy; }
.xl\:cur_move { cursor: move; }
.xl\:cur_no_drop { cursor: no-drop; }
.xl\:cur_stop { cursor: not-allowed; }
.xl\:cur_grab { cursor: grab; }
.xl\:cur_grabbing { cursor: grabbing; }
.xl\:cur_pan { cursor: all-scroll; }
.xl\:cur_col_resize { cursor: col-resize; }
.xl\:cur_row_resize { cursor: row-resize; }
.xl\:cur_hor_resize { cursor: ew-resize; }
.xl\:cur_ver_resize { cursor: ns-resize; }
.xl\:cur_diag_resize { cursor: nesw-resize; }
.xl\:cur_reverse_diag_resize { cursor: nwse-resize; }
.xl\:cur_top_resize { cursor: n-resize; }
.xl\:cur_bottom_resize { cursor: s-resize; }
.xl\:cur_left_resize { cursor: w-resize; }
.xl\:cur_right_resize { cursor: e-resize; }
.xl\:cur_top_left_resize { cursor: nw-resize; }
.xl\:cur_top_right_resize { cursor: ne-resize; }
.xl\:cur_bottom_left_resize { cursor: sw-resize; }
.xl\:cur_bottom_right_resize { cursor: se-resize; }
.xl\:cur_zoom_in { cursor: zoom-in; }
.xl\:cur_zoom_out { cursor: zoom-out; }
.xl\:cursor { cursor: var(--cursor), auto; }
}
@media (min-width: 1400px) {
.xxl\:no_cursor { cursor: none; }
.xxl\:cur_auto { cursor: auto; }
.xxl\:cur_arrow { cursor: default; }
.xxl\:cur_context_menu { cursor: context-menu; }
.xxl\:cur_help { cursor: help; }
.xxl\:cur_pointer { cursor: pointer; }
.xxl\:cur_progress { cursor: progress; }
.xxl\:cur_wait { cursor: wait; }
.xxl\:cur_cell { cursor: cell; }
.xxl\:cur_crosshair { cursor: crosshair; }
.xxl\:cur_text { cursor: text; }
.xxl\:cur_ver_text { cursor: vertical-text; }
.xxl\:cur_alias { cursor: alias; }
.xxl\:cur_copy { cursor: copy; }
.xxl\:cur_move { cursor: move; }
.xxl\:cur_no_drop { cursor: no-drop; }
.xxl\:cur_stop { cursor: not-allowed; }
.xxl\:cur_grab { cursor: grab; }
.xxl\:cur_grabbing { cursor: grabbing; }
.xxl\:cur_pan { cursor: all-scroll; }
.xxl\:cur_col_resize { cursor: col-resize; }
.xxl\:cur_row_resize { cursor: row-resize; }
.xxl\:cur_hor_resize { cursor: ew-resize; }
.xxl\:cur_ver_resize { cursor: ns-resize; }
.xxl\:cur_diag_resize { cursor: nesw-resize; }
.xxl\:cur_reverse_diag_resize { cursor: nwse-resize; }
.xxl\:cur_top_resize { cursor: n-resize; }
.xxl\:cur_bottom_resize { cursor: s-resize; }
.xxl\:cur_left_resize { cursor: w-resize; }
.xxl\:cur_right_resize { cursor: e-resize; }
.xxl\:cur_top_left_resize { cursor: nw-resize; }
.xxl\:cur_top_right_resize { cursor: ne-resize; }
.xxl\:cur_bottom_left_resize { cursor: sw-resize; }
.xxl\:cur_bottom_right_resize { cursor: se-resize; }
.xxl\:cur_zoom_in { cursor: zoom-in; }
.xxl\:cur_zoom_out { cursor: zoom-out; }
.xxl\:cursor { cursor: var(--cursor), auto; }
}
/*
Notes:
1-The Browser UA allows the server to identify the operating system and version used by the client, the CPU type,
browser and version, the browser rendering engine, etc. The website is then able to adjust the layout of the web
page according to the corresponding format to improve the browsing experience.
To Do's:
1-(Done) add the diagonal resize cursors
2-If it was possible to use attr() in url(), also add cursor: url('...'); and replace the version which uses
variables.
*/

230
assets/css/font/family.css Normal file
View File

@ -0,0 +1,230 @@
/*******************************************************************************
* Font Families: *
* *
* Common Weight Name Mapping: *
* Value Common Weight Name *
* -------------- ---------------------------------- *
* 100 Thin (Hairline) *
* 200 Extra Light (Ultra Light) *
* 300 Light *
* 400 Normal (Regular) *
* 500 Medium *
* 600 Semi Bold (Demi Bold) *
* 700 Bold *
* 800 Extra Bold (Ultra Bold) *
* 900 Black (Heavy) *
* 950 Extra Black (Ultra Black) *
*******************************************************************************/
/****************************
* Sans Serif Fonts
****************************/
/*----------------------------------------------------------------------------*/
/* Nunito */
/* #region */
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-extralight.ttf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-extralightitalic.ttf");
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-light.ttf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-lightitalic.ttf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-regular.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-italic.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-semibold.ttf");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-semibolditalic.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-bold.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-bolditalic.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-extrabold.ttf");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-extrabolditalic.ttf");
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-black.ttf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "nunito";
src: url("~assets/font/nunito/nunito-blackitalic.ttf");
font-weight: 900;
font-style: italic;
}
.ff_nunito { font-family: "nunito"; }
/* #endregion */
/*----------------------------------------------------------------------------*/
/* Poppins */
/* #region */
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-thin.ttf");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-thinitalic.ttf");
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-extralight.ttf");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-extralightitalic.ttf");
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-light.ttf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-lightitalic.ttf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-regular.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-italic.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-medium.ttf");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-mediumitalic.ttf");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-semibold.ttf");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-semibolditalic.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-bold.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-bolditalic.ttf");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-extrabold.ttf");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-extrabolditalic.ttf");
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-black.ttf");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "poppins";
src: url("~assets/font/poppins/poppins-blackitalic.ttf");
font-weight: 900;
font-style: italic;
}
.ff_poppins { font-family: "poppins"; }
/* #endregion */
/****************************
* Monospaced Fonts
****************************/

121
assets/css/font/font.css Normal file
View File

@ -0,0 +1,121 @@
/*******************************************************************************
* Font: *
*******************************************************************************/
/****************/
/* Font Weights */
/****************/
.f_thin { font-weight: 100; }
.f_extralight { font-weight: 200; }
.f_light { font-weight: 300; }
.f_normal { font-weight: 400; }
.f_medium { font-weight: 500; }
.f_semibold { font-weight: 600; }
.f_bold { font-weight: 700; }
.f_extrabold { font-weight: 800; }
.f_black { font-weight: 900; }
.f_extrablack { font-weight: 950; }
/**************/
/* Font Sizes */
/**************/
.f0\.5 { font-size: 0.125rem; }
.f1 { font-size: 0.25rem; }
.f1\.5 { font-size: 0.375rem; }
.f2 { font-size: 0.5rem; }
.f2\.5 { font-size: 0.625rem; }
.f3 { font-size: 0.75rem; }
.f3\.5 { font-size: 0.875rem; }
.f3\.75 { font-size: 0.938rem; }
.f4 { font-size: 1rem; }
.f5 { font-size: 1.25rem; }
.f6 { font-size: 1.5rem; }
.f7 { font-size: 1.75rem; }
.f7\.5 { font-size: 1.875rem; }
.f8 { font-size: 2rem; }
.f9 { font-size: 2.25rem; }
.f10 { font-size: 2.5rem; }
.f11 { font-size: 2.75rem; }
.f12 { font-size: 3rem; }
.f14 { font-size: 3.5rem; }
.f16 { font-size: 4rem; }
.f20 { font-size: 5rem; }
.f24 { font-size: 6rem; }
.f28 { font-size: 7rem; }
.f32 { font-size: 8rem; }
.f36 { font-size: 9rem; }
.f40 { font-size: 10rem; }
.f44 { font-size: 11rem; }
.f48 { font-size: 12rem; }
.f52 { font-size: 13rem; }
.f56 { font-size: 14rem; }
.f60 { font-size: 15rem; }
.f64 { font-size: 16rem; }
.f72 { font-size: 18rem; }
.f80 { font-size: 20rem; }
.f96 { font-size: 24rem; }
.f10px { font-size: 10px; }
.f11px { font-size: 11px; }
.f12px { font-size: 12px; }
.f13px { font-size: 13px; }
.f14px { font-size: 14px; }
.f15px { font-size: 15px; }
.f16px { font-size: 16px; }
.f17px { font-size: 17px; }
.f18px { font-size: 18px; }
.f19px { font-size: 19px; }
.f20px { font-size: 20px; }
.f21px { font-size: 21px; }
.f22px { font-size: 22px; }
.f23px { font-size: 23px; }
.f24px { font-size: 24px; }
.f25px { font-size: 25px; }
.f26px { font-size: 26px; }
.f27px { font-size: 27px; }
.f28px { font-size: 28px; }
.f29px { font-size: 29px; }
.f30px { font-size: 30px; }
.f31px { font-size: 31px; }
.f32px { font-size: 32px; }
.f0\.5v { font-size: 0.5vw; }
.f0\.75v { font-size: 0.75vw; }
.f1v { font-size: 1vw; }
.f1\.25v { font-size: 1.25vw; }
.f1\.5v { font-size: 1.5vw; }
/***************/
/* Line Height */
/***************/
.lh0\.5 { line-height: 0.125rem; }
.lh1 { line-height: 0.25rem; }
.lh1\.5 { line-height: 0.375rem; }
.lh2 { line-height: 0.5rem; }
.lh2\.5 { line-height: 0.625rem; }
.lh3 { line-height: 0.75rem; }
.lh3\.5 { line-height: 0.875rem; }
.lh4 { line-height: 1rem; }
.lh5 { line-height: 1.25rem; }
.lh6 { line-height: 1.5rem; }
.lh7 { line-height: 1.75rem; }
.lh8 { line-height: 2rem; }
.lh9 { line-height: 2.25rem; }
.lh10 { line-height: 2.5rem; }
.lh11 { line-height: 2.75rem; }
.lh12 { line-height: 3rem; }
.lh14 { line-height: 3.5rem; }
.lh16 { line-height: 4rem; }
.lh20 { line-height: 5rem; }
.lh24 { line-height: 6rem; }
.lh28 { line-height: 7rem; }
.lh32 { line-height: 8rem; }
.lh36 { line-height: 9rem; }
.lh40 { line-height: 10rem; }
.lh44 { line-height: 11rem; }
.lh48 { line-height: 12rem; }
.lh52 { line-height: 13rem; }
.lh56 { line-height: 14rem; }
.lh60 { line-height: 15rem; }
.lh64 { line-height: 16rem; }
.lh72 { line-height: 18rem; }
.lh80 { line-height: 20rem; }
.lh96 { line-height: 24rem; }

7
assets/css/font/index.css Normal file
View File

@ -0,0 +1,7 @@
/*******************************************************************************
* Font & Text: *
*******************************************************************************/
@import url("~assets/css/font/family.css");
@import url("~assets/css/font/font.css");
@import url("~assets/css/font/text.css");

385
assets/css/font/text.css Normal file
View File

@ -0,0 +1,385 @@
/*******************************************************************************
* Text: *
* *
* For the direction property to have any effect on inline-level elements, the *
* unicode-bidi property must be set to embed or override. *
* *
* Note that text direction is usually defined within a document (e.g. with *
* HTML's dir attribute) rather than through direct use of the direction *
* property. *
*******************************************************************************/
/* Font Style */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normalcase { text-transform: none; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }
/* Text Alignment */
.text_start { text-align: start; }
.text_center { text-align: center; }
.text_end { text-align: end; }
.text_left { text-align: left; }
.text_right { text-align: right; }
.text_justify { text-align: justify; }
/* Text Direction */
.ltr { direction: ltr; } /* Text and other elements go from left to right (This is the default value, but used to change the value at different breakpoints) */
.rtl { direction: rtl; } /* Text and other elements go from right to left */
.text_embed { unicode-bidi: embed; }
.text_isolate { unicode-bidi: isolate; }
.text_plaintext { unicode-bidi: plaintext; }
.text_bidi_override { unicode-bidi: bidi-override; }
.text_isolate_override { unicode-bidi: isolate-override; }
/* Text Orientation */
.text_mixed { text-orientation: mixed; }
.text_upright { text-orientation: upright; }
.text_sideways { text-orientation: sideways; }
.text_sideways_right { text-orientation: sideways-right; }
/* Writing Mode */
.text_horizontal { writing-mode: horizontal-tb; } /* Content flows horizontally from left to right in ltr and from right to left in rtl scripts */
.text_leftvertical { writing-mode: vertical-lr; } /* Content flows vertically from top to bottom in ltr and from bottom to top in rtl scripts with newline to the left */
.text_rightvertical { writing-mode: vertical-rl; } /* Content flows vertically from top to bottom in ltr and from bottom to top in rtl scripts with newline to the right */
.text_sw_rl { writing-mode: sideways-rl; }
.text_sw_lr { writing-mode: sideways-lr; }
/* White Space */
.space_normal { white-space: normal; }
.space_nowrap { white-space: nowrap; }
.space_pre { white-space: pre; }
.space_prewrap { white-space: pre-wrap; }
.space_preline { white-space: pre-line; }
.space_breakspaces { white-space: break-spaces; }
.space_breakall { white-space: break-all; }
/* Text Decoration */
.td_none { text-decoration-line: none; }
.td_underline { text-decoration-line: underline; }
.td_overline { text-decoration-line: overline; }
.td_crossed { text-decoration-line: line-through; }
.td_highway { text-decoration-line: underline overline; }
.td_crossedunder { text-decoration-line: underline line-through; }
.td_crossedover { text-decoration-line: overline line-through; }
.td_solid { text-decoration-style: solid; }
.td_double { text-decoration-style: double; }
.td_dotted { text-decoration-style: dotted; }
.td_dashed { text-decoration-style: dashed; }
.td_wavy { text-decoration-style: wavy; }
.td0\.5 { text-decoration-thickness: 0.125rem; }
.td1 { text-decoration-thickness: 0.25rem; }
.td1\.5 { text-decoration-thickness: 0.375rem; }
.td2 { text-decoration-thickness: 0.5rem; }
.td2\.5 { text-decoration-thickness: 0.625rem; }
.td3 { text-decoration-thickness: 0.75rem; }
.td3\.5 { text-decoration-thickness: 0.875rem; }
.td4 { text-decoration-thickness: 1rem; }
.td5 { text-decoration-thickness: 1.25rem; }
.td6 { text-decoration-thickness: 1.5rem; }
.td7 { text-decoration-thickness: 1.75rem; }
.td7\.5 { text-decoration-thickness: 1.875rem; }
.td8 { text-decoration-thickness: 2rem; }
.td9 { text-decoration-thickness: 2.25rem; }
.td10 { text-decoration-thickness: 2.5rem; }
.td11 { text-decoration-thickness: 2.75rem; }
.td12 { text-decoration-thickness: 3rem; }
.td14 { text-decoration-thickness: 3.5rem; }
.td16 { text-decoration-thickness: 4rem; }
.td20 { text-decoration-thickness: 5rem; }
.td24 { text-decoration-thickness: 6rem; }
.td28 { text-decoration-thickness: 7rem; }
.td32 { text-decoration-thickness: 8rem; }
.td36 { text-decoration-thickness: 9rem; }
.td40 { text-decoration-thickness: 10rem; }
.td44 { text-decoration-thickness: 11rem; }
.td48 { text-decoration-thickness: 12rem; }
.td52 { text-decoration-thickness: 13rem; }
.td56 { text-decoration-thickness: 14rem; }
.td60 { text-decoration-thickness: 15rem; }
.td64 { text-decoration-thickness: 16rem; }
.td72 { text-decoration-thickness: 18rem; }
.td80 { text-decoration-thickness: 20rem; }
.td96 { text-decoration-thickness: 24rem; }
.td_transparent { text-decoration-color: transparent; }
.td_currentcolor { text-decoration-color: currentcolor; }
.td_aliceblue { text-decoration-color: aliceblue; }
.td_antiquewhite { text-decoration-color: antiquewhite; }
.td_aqua { text-decoration-color: aqua; }
.td_aquamarine { text-decoration-color: aquamarine; }
.td_azure { text-decoration-color: azure; }
.td_beige { text-decoration-color: beige; }
.td_bisque { text-decoration-color: bisque; }
.td_black { text-decoration-color: black; }
.td_blanchedalmond { text-decoration-color: blanchedalmond; }
.td_blue { text-decoration-color: blue; }
.td_blueviolet { text-decoration-color: blueviolet; }
.td_brown { text-decoration-color: brown; }
.td_burlywood { text-decoration-color: burlywood; }
.td_cadetblue { text-decoration-color: cadetblue; }
.td_chartreuse { text-decoration-color: chartreuse; }
.td_chocolate { text-decoration-color: chocolate; }
.td_coral { text-decoration-color: coral; }
.td_cornflowerblue { text-decoration-color: cornflowerblue; }
.td_cornsilk { text-decoration-color: cornsilk; }
.td_crimson { text-decoration-color: crimson; }
.td_cyan { text-decoration-color: cyan; }
.td_darkblue { text-decoration-color: darkblue; }
.td_darkcyan { text-decoration-color: darkcyan; }
.td_darkgoldenrod { text-decoration-color: darkgoldenrod; }
.td_darkgray { text-decoration-color: darkgray; }
.td_darkgrey { text-decoration-color: darkgrey; }
.td_darkgreen { text-decoration-color: darkgreen; }
.td_darkkhaki { text-decoration-color: darkkhaki; }
.td_darkmagenta { text-decoration-color: darkmagenta; }
.td_darkolivegreen { text-decoration-color: darkolivegreen; }
.td_darkorange { text-decoration-color: darkorange; }
.td_darkorchid { text-decoration-color: darkorchid; }
.td_darkred { text-decoration-color: darkred; }
.td_darksalmon { text-decoration-color: darksalmon; }
.td_darkseagreen { text-decoration-color: darkseagreen; }
.td_darkslateblue { text-decoration-color: darkslateblue; }
.td_darkslategray { text-decoration-color: darkslategray; }
.td_darkslategrey { text-decoration-color: darkslategrey; }
.td_darkturquoise { text-decoration-color: darkturquoise; }
.td_darkviolet { text-decoration-color: darkviolet; }
.td_deeppink { text-decoration-color: deeppink; }
.td_deepskyblue { text-decoration-color: deepskyblue; }
.td_dimgray { text-decoration-color: darkgray; }
.td_dimgrey { text-decoration-color: darkgrey; }
.td_dodgerblue { text-decoration-color: dodgerblue; }
.td_firebrick { text-decoration-color: firebrick; }
.td_floralwhite { text-decoration-color: floralwhite; }
.td_forestgreen { text-decoration-color: forestgreen; }
.td_fuchsia { text-decoration-color: fuchsia; }
.td_gainsboro { text-decoration-color: gainsboro; }
.td_ghostwhite { text-decoration-color: ghostwhite; }
.td_gold { text-decoration-color: gold; }
.td_goldenrod { text-decoration-color: goldenrod; }
.td_gray { text-decoration-color: gray; }
.td_grey { text-decoration-color: grey; }
.td_green { text-decoration-color: green; }
.td_greenyellow { text-decoration-color: greenyellow; }
.td_honeydew { text-decoration-color: honeydew; }
.td_hotpink { text-decoration-color: hotpink; }
.td_indianred { text-decoration-color: indianred; }
.td_indigo { text-decoration-color: indigo; }
.td_ivory { text-decoration-color: ivory; }
.td_khaki { text-decoration-color: khaki; }
.td_lavender { text-decoration-color: lavender; }
.td_lavenderblush { text-decoration-color: lavenderblush; }
.td_lawngreen { text-decoration-color: lawngreen; }
.td_lemonchiffon { text-decoration-color: lemonchiffon; }
.td_lightblue { text-decoration-color: lightblue; }
.td_lightcoral { text-decoration-color: lightcoral; }
.td_lightcyan { text-decoration-color: lightcyan; }
.td_lightgoldenrodyellow { text-decoration-color: lightgoldenrodyellow; }
.td_lightgray { text-decoration-color: lightgray; }
.td_lightgrey { text-decoration-color: lightgrey; }
.td_lightgreen { text-decoration-color: lightgreen; }
.td_lightpink { text-decoration-color: lightpink; }
.td_lightsalmon { text-decoration-color: lightsalmon; }
.td_lightseagreen { text-decoration-color: lightseagreen; }
.td_lightskyblue { text-decoration-color: lightskyblue; }
.td_lightslategray { text-decoration-color: lightslategray; }
.td_lightslategrey { text-decoration-color: lightslategrey; }
.td_lightsteelblue { text-decoration-color: lightsteelblue; }
.td_lightyellow { text-decoration-color: lightyellow; }
.td_lime { text-decoration-color: lime; }
.td_limegreen { text-decoration-color: limegreen; }
.td_linen { text-decoration-color: linen; }
.td_magenta { text-decoration-color: magenta; }
.td_maroon { text-decoration-color: maroon; }
.td_mediumaquamarine { text-decoration-color: mediumaquamarine; }
.td_mediumblue { text-decoration-color: mediumblue; }
.td_mediumorchid { text-decoration-color: mediumorchid; }
.td_mediumpurple { text-decoration-color: mediumpurple; }
.td_mediumseagreen { text-decoration-color: mediumseagreen; }
.td_mediumslateblue { text-decoration-color: mediumslateblue; }
.td_mediumspringgreen { text-decoration-color: mediumspringgreen; }
.td_mediumturquoise { text-decoration-color: mediumturquoise; }
.td_mediumvioletred { text-decoration-color: mediumvioletred; }
.td_midnightblue { text-decoration-color: midnightblue; }
.td_mintcream { text-decoration-color: mintcream; }
.td_mistyrose { text-decoration-color: mistyrose; }
.td_moccasin { text-decoration-color: moccasin; }
.td_navajowhite { text-decoration-color: navajowhite; }
.td_navy { text-decoration-color: navy; }
.td_oldlace { text-decoration-color: oldlace; }
.td_olive { text-decoration-color: olive; }
.td_olivedrab { text-decoration-color: olivedrab; }
.td_orange { text-decoration-color: orange; }
.td_orangered { text-decoration-color: orangered; }
.td_orchid { text-decoration-color: orchid; }
.td_palegoldenrod { text-decoration-color: palegoldenrod; }
.td_palegreen { text-decoration-color: palegreen; }
.td_paleturquoise { text-decoration-color: paleturquoise; }
.td_palevioletred { text-decoration-color: palevioletred; }
.td_papayawhip { text-decoration-color: papayawhip; }
.td_peachpuff { text-decoration-color: peachpuff; }
.td_peru { text-decoration-color: peru; }
.td_pink { text-decoration-color: pink; }
.td_plum { text-decoration-color: plum; }
.td_powderblue { text-decoration-color: powderblue; }
.td_purple { text-decoration-color: purple; }
.td_rebeccapurple { text-decoration-color: rebeccapurple; }
.td_red { text-decoration-color: red; }
.td_rosybrown { text-decoration-color: rosybrown; }
.td_royalblue { text-decoration-color: royalblue; }
.td_saddlebrown { text-decoration-color: saddlebrown; }
.td_salmon { text-decoration-color: salmon; }
.td_sandybrown { text-decoration-color: sandybrown; }
.td_seagreen { text-decoration-color: seagreen; }
.td_seashell { text-decoration-color: seashell; }
.td_sienna { text-decoration-color: sienna; }
.td_silver { text-decoration-color: silver; }
.td_skyblue { text-decoration-color: skyblue; }
.td_slateblue { text-decoration-color: slateblue; }
.td_slategray { text-decoration-color: slategray; }
.td_slategrey { text-decoration-color: slategrey; }
.td_snow { text-decoration-color: snow; }
.td_springgreen { text-decoration-color: springgreen; }
.td_steelblue { text-decoration-color: steelblue; }
.td_tan { text-decoration-color: tan; }
.td_teal { text-decoration-color: teal; }
.td_thistle { text-decoration-color: thistle; }
.td_tomato { text-decoration-color: tomato; }
.td_turquoise { text-decoration-color: turquoise; }
.td_violet { text-decoration-color: violet; }
.td_wheat { text-decoration-color: wheat; }
.td_white { text-decoration-color: white; }
.td_whitesmoke { text-decoration-color: whitesmoke; }
.td_yellow { text-decoration-color: yellow; }
.td_yellowgreen { text-decoration-color: yellowgreen; }
/******************/
/* Hover Variants */
/******************/
.hover\:uppercase:hover { text-transform: uppercase; }
.hover\:lowercase:hover { text-transform: lowercase; }
.hover\:capitalize:hover { text-transform: capitalize; }
.hover\:normalcase:hover { text-transform: none; }
.hover\:italic:hover { font-style: italic; }
.hover\:oblique:hover { font-style: oblique; }
.hover\:text_center:hover { text-align: center; }
.hover\:text_left:hover { text-align: left; }
.hover\:text_right:hover { text-align: right; }
.hover\:text_justify:hover { text-align: justify; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:uppercase { text-transform: uppercase; }
.sm\:lowercase { text-transform: lowercase; }
.sm\:capitalize { text-transform: capitalize; }
.sm\:normalcase { text-transform: none; }
.sm\:italic { font-style: italic; }
.sm\:oblique { font-style: oblique; }
.sm\:text_start { text-align: start; }
.sm\:text_center { text-align: center; }
.sm\:text_end { text-align: end; }
.sm\:text_left { text-align: left; }
.sm\:text_right { text-align: right; }
.sm\:text_justify { text-align: justify; }
.sm\:space_normal { white-space: normal; }
.sm\:space_nowrap { white-space: nowrap; }
.sm\:space_pre { white-space: pre; }
.sm\:space_prewrap { white-space: pre-wrap; }
.sm\:space_preline { white-space: pre-line; }
.sm\:space_breakspaces { white-space: break-spaces; }
.sm\:space_breakall { white-space: break-all; }
}
@media (min-width: 768px) {
.md\:uppercase { text-transform: uppercase; }
.md\:lowercase { text-transform: lowercase; }
.md\:capitalize { text-transform: capitalize; }
.md\:normalcase { text-transform: none; }
.md\:italic { font-style: italic; }
.md\:oblique { font-style: oblique; }
.md\:text_start { text-align: start; }
.md\:text_center { text-align: center; }
.md\:text_end { text-align: end; }
.md\:text_left { text-align: left; }
.md\:text_right { text-align: right; }
.md\:text_justify { text-align: justify; }
.md\:space_normal { white-space: normal; }
.md\:space_nowrap { white-space: nowrap; }
.md\:space_pre { white-space: pre; }
.md\:space_prewrap { white-space: pre-wrap; }
.md\:space_preline { white-space: pre-line; }
.md\:space_breakspaces { white-space: break-spaces; }
.md\:space_breakall { white-space: break-all; }
}
@media (min-width: 992px) {
.lg\:uppercase { text-transform: uppercase; }
.lg\:lowercase { text-transform: lowercase; }
.lg\:capitalize { text-transform: capitalize; }
.lg\:normalcase { text-transform: none; }
.lg\:italic { font-style: italic; }
.lg\:oblique { font-style: oblique; }
.lg\:text_start { text-align: start; }
.lg\:text_center { text-align: center; }
.lg\:text_end { text-align: end; }
.lg\:text_left { text-align: left; }
.lg\:text_right { text-align: right; }
.lg\:text_justify { text-align: justify; }
.lg\:space_normal { white-space: normal; }
.lg\:space_nowrap { white-space: nowrap; }
.lg\:space_pre { white-space: pre; }
.lg\:space_prewrap { white-space: pre-wrap; }
.lg\:space_preline { white-space: pre-line; }
.lg\:space_breakspaces { white-space: break-spaces; }
.lg\:space_breakall { white-space: break-all; }
}
@media (min-width: 1200px) {
.xl\:uppercase { text-transform: uppercase; }
.xl\:lowercase { text-transform: lowercase; }
.xl\:capitalize { text-transform: capitalize; }
.xl\:normalcase { text-transform: none; }
.xl\:italic { font-style: italic; }
.xl\:oblique { font-style: oblique; }
.xl\:text_start { text-align: start; }
.xl\:text_center { text-align: center; }
.xl\:text_end { text-align: end; }
.xl\:text_left { text-align: left; }
.xl\:text_right { text-align: right; }
.xl\:text_justify { text-align: justify; }
.xl\:space_normal { white-space: normal; }
.xl\:space_nowrap { white-space: nowrap; }
.xl\:space_pre { white-space: pre; }
.xl\:space_prewrap { white-space: pre-wrap; }
.xl\:space_preline { white-space: pre-line; }
.xl\:space_breakspaces { white-space: break-spaces; }
.xl\:space_breakall { white-space: break-all; }
}
@media (min-width: 1400px) {
.xxl\:uppercase { text-transform: uppercase; }
.xxl\:lowercase { text-transform: lowercase; }
.xxl\:capitalize { text-transform: capitalize; }
.xxl\:normalcase { text-transform: none; }
.xxl\:italic { font-style: italic; }
.xxl\:oblique { font-style: oblique; }
.xxl\:text_start { text-align: start; }
.xxl\:text_center { text-align: center; }
.xxl\:text_end { text-align: end; }
.xxl\:text_left { text-align: left; }
.xxl\:text_right { text-align: right; }
.xxl\:text_justify { text-align: justify; }
.xxl\:space_normal { white-space: normal; }
.xxl\:space_nowrap { white-space: nowrap; }
.xxl\:space_pre { white-space: pre; }
.xxl\:space_prewrap { white-space: pre-wrap; }
.xxl\:space_preline { white-space: pre-line; }
.xxl\:space_breakspaces { white-space: break-spaces; }
.xxl\:space_breakall { white-space: break-all; }
}

78
assets/css/global-styles.css Normal file
View File

@ -0,0 +1,78 @@
/*==============================================================================
GLOBAL STYLES:
MOST STYLES ARE COMPONENT-SPECIFIC, SO BY DEFAULT, THE STYLES ARE DEFINED
LOCALLY IN EACH COMPONENT, WITH THE "SCOPED" ATTRIBUTE. HOWEVER, SOME STYLES ARE
SHARED AMONGST MULTIPLE COMPONENTS. IT IS BETTER TO DEFINE THEM ALL IN ONE PLACE
INSTEAD OF DUPLICATING THE SAME STYLE IN MULTIPLE COMPONENTS.
THIS FILES CONTAINS ALL THOSE GLOBAL STYLES. */
/******************************************************************************/
/* Styles For The 'Features' Pages */
/******************************************************************************/
ul.stripped > div {
/* margin-top: 2.25rem; */
padding-block: 1.12rem;
}
ul.stripped > div:nth-child(odd) {
background-color: #f9fadf;
}
ul.stripped .list-item-title {
position: relative;
padding-top: 1.5rem;
list-style-position: inside;
margin-inline-start: -1rem;
}
ul.stripped .list-item-title.pt12 {
padding-top: 3rem;
}
ul.stripped .list-item-title.pt20 {
padding-top: 5rem;
}
ul.stripped .list-item-title.pt26 {
padding-top: 6.5rem;
}
@media (min-width: 1280px) {
ul.stripped .list-item-title.pt12,
ul.stripped .list-item-title.pt20 {
padding-top: 1.5rem;
}
}
ul.stripped .list-item-title.dotted li {
list-style-type: disc;
}
ul.stripped .list-item-title li {
padding-inline-start: 40px;
list-style-type: none;
color: #999898;
}
ul.stripped .list-item-title li::marker {
color: #999898;
}
ul.stripped .list-item-title::before {
content: attr(data-title);
color: #6d6d6d;
font-weight: bold;
padding-left: 1rem;
position: absolute;
display: block;
top: 0;
left: -1em;
width: calc(100% - 0.5em);
z-index: 0;
}
ul.stripped .list-item-title::after {
content: '';
position: absolute;
display: block;
top: 1.5rem;
left: -1rem;
width: 100%;
height: calc(100% - 1.5rem);
background-color: gainsbro;
border-radius: 0 0 5px 5px;
z-index: -1;
}

1594
assets/css/grid/column_placement.css Normal file
View File

File diff suppressed because it is too large Load Diff

84
assets/css/grid/index.css Normal file
View File

@ -0,0 +1,84 @@
/*******************************************************************************
* CSS Grid: *
*******************************************************************************/
/* ~~~ Imports ~~~ */
@import url("~assets/css/grid/sizing.css");
@import url("~assets/css/grid/column_placement.css");
@import url("~assets/css/grid/row_placement.css");
/* ~~~ Basics ~~~ */
.grid { display: grid; }
.inline_grid { display: inline-grid; }
/* ~~~ Auto Flow ~~~ */
.grid_flow_row { grid-auto-flow: row; }
.grid_flow_col { grid-auto-flow: column; }
.grid_flow_row_dense { grid-auto-flow: row dense; }
.grid_flow_col_dense { grid-auto-flow: column dense; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:grid { display: grid; }
.sm\:inline_grid { display: inline-grid; }
.sm\:grid_flow_row { grid-auto-flow: row; }
.sm\:grid_flow_col { grid-auto-flow: column; }
.sm\:grid_flow_row_dense { grid-auto-flow: row dense; }
.sm\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (min-width: 768px) {
.md\:grid { display: grid; }
.md\:inline_grid { display: inline-grid; }
.md\:grid_flow_row { grid-auto-flow: row; }
.md\:grid_flow_col { grid-auto-flow: column; }
.md\:grid_flow_row_dense { grid-auto-flow: row dense; }
.md\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (min-width: 992px) {
.lg\:grid { display: grid; }
.lg\:inline_grid { display: inline-grid; }
.lg\:grid_flow_row { grid-auto-flow: row; }
.lg\:grid_flow_col { grid-auto-flow: column; }
.lg\:grid_flow_row_dense { grid-auto-flow: row dense; }
.lg\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (min-width: 1200px) {
.xl\:grid { display: grid; }
.xl\:inline_grid { display: inline-grid; }
.xl\:grid_flow_row { grid-auto-flow: row; }
.xl\:grid_flow_col { grid-auto-flow: column; }
.xl\:grid_flow_row_dense { grid-auto-flow: row dense; }
.xl\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (min-width: 1400px) {
.xxl\:grid { display: grid; }
.xxl\:inline_grid { display: inline-grid; }
.xxl\:grid_flow_row { grid-auto-flow: row; }
.xxl\:grid_flow_col { grid-auto-flow: column; }
.xxl\:grid_flow_row_dense { grid-auto-flow: row dense; }
.xxl\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (orientation: landscape) {
.ls\:grid { display: grid; }
.ls\:inline_grid { display: inline-grid; }
.ls\:grid_flow_row { grid-auto-flow: row; }
.ls\:grid_flow_col { grid-auto-flow: column; }
.ls\:grid_flow_row_dense { grid-auto-flow: row dense; }
.ls\:grid_flow_col_dense { grid-auto-flow: column dense; }
}
@media (orientation: portrait) {
.po\:grid { display: grid; }
.po\:inline_grid { display: inline-grid; }
.po\:grid_flow_row { grid-auto-flow: row; }
.po\:grid_flow_col { grid-auto-flow: column; }
.po\:grid_flow_row_dense { grid-auto-flow: row dense; }
.po\:grid_flow_col_dense { grid-auto-flow: column dense; }
}

236
assets/css/grid/row_placement.css Normal file
View File

@ -0,0 +1,236 @@
/*******************************************************************************
* CSS Grid Placement: *
*******************************************************************************/
/********/
/* Rows */
/********/
.row_auto { grid-row: auto; }
.row_auto_start { grid-row-start: auto; }
.row_auto_end { grid-row-end: auto; }
/* Span Placement */
.span_row_1 { grid-row: span 1 / span 1; }
.span_row_2 { grid-row: span 2 / span 2; }
.span_row_3 { grid-row: span 3 / span 3; }
.span_row_4 { grid-row: span 4 / span 4; }
.span_row_5 { grid-row: span 5 / span 5; }
.span_row_6 { grid-row: span 6 / span 6; }
.span_row_7 { grid-row: span 7 / span 7; }
.span_row_8 { grid-row: span 8 / span 8; }
.span_row_9 { grid-row: span 9 / span 9; }
.span_row_10 { grid-row: span 10 / span 10; }
.span_row_11 { grid-row: span 11 / span 11; }
.span_row_12 { grid-row: span 12 / span 12; }
.span_row_13 { grid-row: span 13 / span 13; }
.span_row_14 { grid-row: span 14 / span 14; }
.span_row_15 { grid-row: span 15 / span 15; }
.span_row_16 { grid-row: span 16 / span 16; }
.span_row_17 { grid-row: span 17 / span 17; }
.span_row_18 { grid-row: span 18 / span 18; }
.span_row_19 { grid-row: span 19 / span 19; }
.span_row_20 { grid-row: span 20 / span 20; }
.span_row_21 { grid-row: span 21 / span 21; }
.span_row_22 { grid-row: span 22 / span 22; }
.span_row_23 { grid-row: span 23 / span 23; }
.span_row_24 { grid-row: span 24 / span 24; }
.span_row_25 { grid-row: span 25 / span 25; }
.span_row_26 { grid-row: span 26 / span 26; }
.span_row_27 { grid-row: span 27 / span 26; }
.span_row_28 { grid-row: span 28 / span 28; }
.span_row_29 { grid-row: span 29 / span 29; }
.span_row_30 { grid-row: span 30 / span 30; }
.span_row_full { grid-row: 1 / -1; }
/* Cell Starting Placement */
.\31 st_row { grid-row-start: 1 ; }
.\32 nd_row { grid-row-start: 2 ; }
.\33 rd_row { grid-row-start: 3 ; }
.\34 th_row { grid-row-start: 4 ; }
.\35 th_row { grid-row-start: 5 ; }
.\36 th_row { grid-row-start: 6 ; }
.\37 th_row { grid-row-start: 7 ; }
.\38 th_row { grid-row-start: 8 ; }
.\39 th_row { grid-row-start: 9 ; }
.\31 0th_row { grid-row-start: 10; }
.\31 1th_row { grid-row-start: 11; }
.\31 2th_row { grid-row-start: 12; }
.\31 3th_row { grid-row-start: 13; }
.\31 4th_row { grid-row-start: 14; }
.\31 5th_row { grid-row-start: 15; }
.\31 6th_row { grid-row-start: 16; }
.\31 7th_row { grid-row-start: 17; }
.\31 8th_row { grid-row-start: 18; }
.\31 9th_row { grid-row-start: 19; }
.\32 0th_row { grid-row-start: 20; }
.\32 1st_row { grid-row-start: 21; }
.\32 2nd_row { grid-row-start: 22; }
.\32 3rd_row { grid-row-start: 23; }
.\32 4th_row { grid-row-start: 24; }
.\32 5th_row { grid-row-start: 25; }
.\32 6th_row { grid-row-start: 26; }
.\32 7th_row { grid-row-start: 27; }
.\32 8th_row { grid-row-start: 28; }
.\32 9th_row { grid-row-start: 29; }
.\33 0th_row { grid-row-start: 30; }
.\33 1st_row { grid-row-start: 31; }
.\33 2nd_row { grid-row-start: 32; }
.\33 3rd_row { grid-row-start: 33; }
.\33 4th_row { grid-row-start: 34; }
.\33 5th_row { grid-row-start: 35; }
.\33 6th_row { grid-row-start: 36; }
.\33 7th_row { grid-row-start: 37; }
.\33 8th_row { grid-row-start: 38; }
.\33 9th_row { grid-row-start: 39; }
.\34 0th_row { grid-row-start: 40; }
/* Reverse Cell Starting Placement */
.-\31 st_row { grid-row-start: -2 ; }
.-\32 nd_row { grid-row-start: -3 ; }
.-\33 rd_row { grid-row-start: -4 ; }
.-\34 th_row { grid-row-start: -5 ; }
.-\35 th_row { grid-row-start: -6 ; }
.-\36 th_row { grid-row-start: -7 ; }
.-\37 th_row { grid-row-start: -8 ; }
.-\38 th_row { grid-row-start: -9 ; }
.-\39 th_row { grid-row-start: -10; }
.-\31 0th_row { grid-row-start: -11; }
.-\31 1th_row { grid-row-start: -12; }
.-\31 2th_row { grid-row-start: -13; }
.-\31 3th_row { grid-row-start: -14; }
.-\31 4th_row { grid-row-start: -15; }
.-\31 5th_row { grid-row-start: -16; }
.-\31 6th_row { grid-row-start: -17; }
.-\31 7th_row { grid-row-start: -18; }
.-\31 8th_row { grid-row-start: -19; }
.-\31 9th_row { grid-row-start: -20; }
.-\32 0th_row { grid-row-start: -21; }
.-\32 1st_row { grid-row-start: -22; }
.-\32 2nd_row { grid-row-start: -23; }
.-\32 3rd_row { grid-row-start: -24; }
.-\32 4th_row { grid-row-start: -25; }
.-\32 5th_row { grid-row-start: -26; }
.-\32 6th_row { grid-row-start: -27; }
.-\32 7th_row { grid-row-start: -28; }
.-\32 8th_row { grid-row-start: -29; }
.-\32 9th_row { grid-row-start: -30; }
.-\33 0th_row { grid-row-start: -31; }
.-\33 1st_row { grid-row-start: -32; }
.-\33 2nd_row { grid-row-start: -33; }
.-\33 3rd_row { grid-row-start: -34; }
.-\33 4th_row { grid-row-start: -35; }
.-\33 5th_row { grid-row-start: -36; }
.-\33 6th_row { grid-row-start: -37; }
.-\33 7th_row { grid-row-start: -38; }
.-\33 8th_row { grid-row-start: -39; }
.-\33 9th_row { grid-row-start: -40; }
.-\34 0th_row { grid-row-start: -41; }
/* Cell Ending Placement */
.\!1st_row { grid-row-end: 2 ; }
.\!2nd_row { grid-row-end: 3 ; }
.\!3rd_row { grid-row-end: 4 ; }
.\!4th_row { grid-row-end: 5 ; }
.\!5th_row { grid-row-end: 6 ; }
.\!6th_row { grid-row-end: 7 ; }
.\!7th_row { grid-row-end: 8 ; }
.\!8th_row { grid-row-end: 9 ; }
.\!9th_row { grid-row-end: 10; }
.\!10th_row { grid-row-end: 11; }
.\!11th_row { grid-row-end: 12; }
.\!12th_row { grid-row-end: 13; }
.\!13th_row { grid-row-end: 14; }
.\!14th_row { grid-row-end: 15; }
.\!15th_row { grid-row-end: 16; }
.\!16th_row { grid-row-end: 17; }
.\!17th_row { grid-row-end: 18; }
.\!18th_row { grid-row-end: 19; }
.\!19th_row { grid-row-end: 20; }
.\!20th_row { grid-row-end: 21; }
.\!21st_row { grid-row-end: 22; }
.\!22nd_row { grid-row-end: 23; }
.\!23rd_row { grid-row-end: 24; }
.\!24th_row { grid-row-end: 25; }
.\!25th_row { grid-row-end: 26; }
.\!26th_row { grid-row-end: 27; }
.\!27th_row { grid-row-end: 28; }
.\!28th_row { grid-row-end: 29; }
.\!29th_row { grid-row-end: 30; }
.\!30th_row { grid-row-end: 31; }
.\!31st_row { grid-row-end: 32; }
.\!32nd_row { grid-row-end: 33; }
.\!33rd_row { grid-row-end: 34; }
.\!34th_row { grid-row-end: 35; }
.\!35th_row { grid-row-end: 36; }
.\!36th_row { grid-row-end: 37; }
.\!37th_row { grid-row-end: 38; }
.\!38th_row { grid-row-end: 39; }
.\!39th_row { grid-row-end: 40; }
.\!40th_row { grid-row-end: 41; }
/* Reverse Cell Ending Placement */
.\!-1st_row { grid-row-end: -1 ; }
.\!-2nd_row { grid-row-end: -2 ; }
.\!-3rd_row { grid-row-end: -3 ; }
.\!-4th_row { grid-row-end: -4 ; }
.\!-5th_row { grid-row-end: -5 ; }
.\!-6th_row { grid-row-end: -6 ; }
.\!-7th_row { grid-row-end: -7 ; }
.\!-8th_row { grid-row-end: -8 ; }
.\!-9th_row { grid-row-end: -9 ; }
.\!-10th_row { grid-row-end: -10; }
.\!-11th_row { grid-row-end: -11; }
.\!-12th_row { grid-row-end: -12; }
.\!-13th_row { grid-row-end: -13; }
.\!-14th_row { grid-row-end: -14; }
.\!-15th_row { grid-row-end: -15; }
.\!-16th_row { grid-row-end: -16; }
.\!-17th_row { grid-row-end: -17; }
.\!-18th_row { grid-row-end: -18; }
.\!-19th_row { grid-row-end: -19; }
.\!-20th_row { grid-row-end: -20; }
.\!-21st_row { grid-row-end: -21; }
.\!-22nd_row { grid-row-end: -22; }
.\!-23rd_row { grid-row-end: -23; }
.\!-24th_row { grid-row-end: -24; }
.\!-25th_row { grid-row-end: -25; }
.\!-26th_row { grid-row-end: -26; }
.\!-27th_row { grid-row-end: -27; }
.\!-28th_row { grid-row-end: -28; }
.\!-29th_row { grid-row-end: -29; }
.\!-30th_row { grid-row-end: -30; }
.\!-31st_row { grid-row-end: -31; }
.\!-32nd_row { grid-row-end: -32; }
.\!-33rd_row { grid-row-end: -33; }
.\!-34th_row { grid-row-end: -34; }
.\!-35th_row { grid-row-end: -35; }
.\!-36th_row { grid-row-end: -36; }
.\!-37th_row { grid-row-end: -37; }
.\!-38th_row { grid-row-end: -38; }
.\!-39th_row { grid-row-end: -39; }
.\!-40th_row { grid-row-end: -40; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}
@media (orientation: landscape) {
}
@media (orientation: portrait) {
}

489
assets/css/grid/sizing.css Normal file
View File

@ -0,0 +1,489 @@
/*******************************************************************************
* CSS Grid Sizing: *
*******************************************************************************/
/******************************************************/
/* Grid Template Columns + Grid Auto Columns */
/* The definition of these classes are from tailwind. */
/******************************************************/
.grid_cols_auto { grid-auto-columns: auto; }
.grid_cols_min { grid-auto-columns: min-content; }
.grid_cols_max { grid-auto-columns: max-content; }
.grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.grid_cols_none { grid-template-columns: none; }
.grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
/******************************************************/
/* Grid Template Rows + Grid Auto Rows */
/* The definition of these classes are from tailwind. */
/******************************************************/
.grid_rows_auto { grid-auto-rows: auto; }
.grid_rows_min { grid-auto-rows: min-content; }
.grid_rows_max { grid-auto-rows: max-content; }
.grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.grid_rows_none { grid-template-rows: none; }
.grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
/****************/
/* Square Grids */
/****************/
.grid1x1 { display: grid; grid-template: repeat(1, 1fr) / repeat(1, 1fr); }
.grid2x2 { display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.grid3x3 { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.grid4x4 { display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); }
.grid5x5 { display: grid; grid-template: repeat(5, 1fr) / repeat(5, 1fr); }
.grid6x6 { display: grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr); }
.grid7x7 { display: grid; grid-template: repeat(7, 1fr) / repeat(7, 1fr); }
.grid8x8 { display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); }
.grid9x9 { display: grid; grid-template: repeat(9, 1fr) / repeat(9, 1fr); }
.grid10x10 { display: grid; grid-template: repeat(10, 1fr) / repeat(10, 1fr); }
.grid11x11 { display: grid; grid-template: repeat(11, 1fr) / repeat(11, 1fr); }
.grid12x12 { display: grid; grid-template: repeat(12, 1fr) / repeat(12, 1fr); }
.grid13x13 { display: grid; grid-template: repeat(13, 1fr) / repeat(13, 1fr); }
.grid14x14 { display: grid; grid-template: repeat(14, 1fr) / repeat(14, 1fr); }
.grid15x15 { display: grid; grid-template: repeat(15, 1fr) / repeat(15, 1fr); }
.grid20x20 { display: grid; grid-template: repeat(20, 1fr) / repeat(20, 1fr); }
.inline_grid1x1 { display: inline-grid; grid-template: repeat(1, 1fr) / repeat(1, 1fr); }
.inline_grid2x2 { display: inline-grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.inline_grid3x3 { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.inline_grid4x4 { display: inline-grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); }
.inline_grid5x5 { display: inline-grid; grid-template: repeat(5, 1fr) / repeat(5, 1fr); }
.inline_grid6x6 { display: inline-grid; grid-template: repeat(6, 1fr) / repeat(6, 1fr); }
.inline_grid7x7 { display: inline-grid; grid-template: repeat(7, 1fr) / repeat(7, 1fr); }
.inline_grid8x8 { display: inline-grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); }
.inline_grid9x9 { display: inline-grid; grid-template: repeat(9, 1fr) / repeat(9, 1fr); }
.inline_grid10x10 { display: inline-grid; grid-template: repeat(10, 1fr) / repeat(10, 1fr); }
.inline_grid11x11 { display: inline-grid; grid-template: repeat(11, 1fr) / repeat(11, 1fr); }
.inline_grid12x12 { display: inline-grid; grid-template: repeat(12, 1fr) / repeat(12, 1fr); }
.inline_grid13x13 { display: inline-grid; grid-template: repeat(13, 1fr) / repeat(13, 1fr); }
.inline_grid14x14 { display: inline-grid; grid-template: repeat(14, 1fr) / repeat(14, 1fr); }
.inline_grid15x15 { display: inline-grid; grid-template: repeat(15, 1fr) / repeat(15, 1fr); }
.inline_grid20x20 { display: inline-grid; grid-template: repeat(20, 1fr) / repeat(20, 1fr); }
/*******************/
/* Landscape Grids */
/*******************/
.grid2x1 { display: grid; grid-template: repeat(1, 1fr) / repeat(2, 1fr); }
.grid3x1 { display: grid; grid-template: repeat(1, 1fr) / repeat(3, 1fr); }
.grid4x2 { display: grid; grid-template: repeat(2, 1fr) / repeat(4, 1fr); }
.grid4x3 { display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); }
.grid5x3 { display: grid; grid-template: repeat(3, 1fr) / repeat(5, 1fr); }
.grid6x3 { display: grid; grid-template: repeat(3, 1fr) / repeat(6, 1fr); }
.inline_grid2x1 { display: inline-grid; grid-template: repeat(1, 1fr) / repeat(2, 1fr); }
.inline_grid3x1 { display: inline-grid; grid-template: repeat(1, 1fr) / repeat(3, 1fr); }
.inline_grid4x2 { display: inline-grid; grid-template: repeat(2, 1fr) / repeat(4, 1fr); }
.inline_grid4x3 { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); }
.inline_grid5x3 { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(5, 1fr); }
.inline_grid6x3 { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(6, 1fr); }
/******************/
/* Portrait Grids */
/******************/
.grid1x2 { display: grid; grid-template: repeat(2, 1fr) / repeat(1, 1fr); }
.grid3x4 { display: grid; grid-template: repeat(4, 1fr) / repeat(3, 1fr); }
.grid3x6 { display: grid; grid-template: repeat(6, 1fr) / repeat(3, 1fr); }
.grid4x12 { display: grid; grid-template: repeat(12, 1fr) / repeat(4, 1fr); }
.grid5x10 { display: grid; grid-template: repeat(10, 1fr) / repeat(5, 1fr); }
.inline_grid1x2 { display: inline-grid; grid-template: repeat(2, 1fr) / repeat(1, 1fr); }
.inline_grid3x6 { display: inline-grid; grid-template: repeat(6, 1fr) / repeat(3, 1fr); }
.inline_grid4x12 { display: inline-grid; grid-template: repeat(12, 1fr) / repeat(4, 1fr); }
.inline_grid5x10 { display: inline-grid; grid-template: repeat(10, 1fr) / repeat(5, 1fr); }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:grid_cols_auto { grid-auto-columns: auto; }
.sm\:grid_cols_min { grid-auto-columns: min-content; }
.sm\:grid_cols_max { grid-auto-columns: max-content; }
.sm\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.sm\:grid_cols_none { grid-template-columns: none; }
.sm\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.sm\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.sm\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.sm\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.sm\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.sm\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.sm\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.sm\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.sm\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.sm\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.sm\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.sm\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.sm\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.sm\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.sm\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.sm\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.sm\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.sm\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.sm\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.sm\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.sm\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.sm\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.sm\:grid_rows_auto { grid-auto-rows: auto; }
.sm\:grid_rows_min { grid-auto-rows: min-content; }
.sm\:grid_rows_max { grid-auto-rows: max-content; }
.sm\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.sm\:grid_rows_none { grid-template-rows: none; }
.sm\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.sm\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.sm\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.sm\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.sm\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.sm\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.sm\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.sm\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.sm\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.sm\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.sm\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.sm\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.sm\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.sm\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.sm\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.sm\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (min-width: 768px) {
.md\:grid_cols_auto { grid-auto-columns: auto; }
.md\:grid_cols_min { grid-auto-columns: min-content; }
.md\:grid_cols_max { grid-auto-columns: max-content; }
.md\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.md\:grid_cols_none { grid-template-columns: none; }
.md\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.md\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.md\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.md\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.md\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.md\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.md\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.md\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.md\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.md\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.md\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.md\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.md\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.md\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.md\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.md\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.md\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.md\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.md\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.md\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.md\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.md\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.md\:grid_rows_none { grid-template-rows: none; }
.md\:grid_rows_auto { grid-auto-rows: auto; }
.md\:grid_rows_min { grid-auto-rows: min-content; }
.md\:grid_rows_max { grid-auto-rows: max-content; }
.md\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.md\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.md\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.md\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.md\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.md\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.md\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.md\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.md\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.md\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.md\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.md\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.md\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.md\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.md\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.md\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.md\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (min-width: 992px) {
.lg\:grid_cols_auto { grid-auto-columns: auto; }
.lg\:grid_cols_min { grid-auto-columns: min-content; }
.lg\:grid_cols_max { grid-auto-columns: max-content; }
.lg\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.lg\:grid_cols_none { grid-template-columns: none; }
.lg\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.lg\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.lg\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.lg\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.lg\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.lg\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.lg\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.lg\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.lg\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.lg\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.lg\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.lg\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.lg\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.lg\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.lg\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.lg\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.lg\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.lg\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.lg\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.lg\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.lg\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.lg\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.lg\:grid_rows_auto { grid-auto-rows: auto; }
.lg\:grid_rows_min { grid-auto-rows: min-content; }
.lg\:grid_rows_max { grid-auto-rows: max-content; }
.lg\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.lg\:grid_rows_none { grid-template-rows: none; }
.lg\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.lg\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.lg\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.lg\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.lg\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.lg\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.lg\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.lg\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.lg\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.lg\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.lg\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.lg\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.lg\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.lg\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.lg\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.lg\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (min-width: 1200px) {
.xl\:grid_cols_auto { grid-auto-columns: auto; }
.xl\:grid_cols_min { grid-auto-columns: min-content; }
.xl\:grid_cols_max { grid-auto-columns: max-content; }
.xl\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.xl\:grid_cols_none { grid-template-columns: none; }
.xl\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.xl\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.xl\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.xl\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.xl\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.xl\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.xl\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.xl\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.xl\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.xl\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.xl\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.xl\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.xl\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.xl\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.xl\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.xl\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.xl\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.xl\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.xl\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.xl\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.xl\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.xl\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.xl\:grid_rows_auto { grid-auto-rows: auto; }
.xl\:grid_rows_min { grid-auto-rows: min-content; }
.xl\:grid_rows_max { grid-auto-rows: max-content; }
.xl\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.xl\:grid_rows_none { grid-template-rows: none; }
.xl\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.xl\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.xl\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.xl\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.xl\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.xl\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.xl\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.xl\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.xl\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.xl\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.xl\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.xl\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.xl\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.xl\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.xl\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.xl\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (min-width: 1400px) {
.xxl\:grid_cols_auto { grid-auto-columns: auto; }
.xxl\:grid_cols_min { grid-auto-columns: min-content; }
.xxl\:grid_cols_max { grid-auto-columns: max-content; }
.xxl\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.xxl\:grid_cols_none { grid-template-columns: none; }
.xxl\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.xxl\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.xxl\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.xxl\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.xxl\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.xxl\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.xxl\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.xxl\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.xxl\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.xxl\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.xxl\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.xxl\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.xxl\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.xxl\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.xxl\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.xxl\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.xxl\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.xxl\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.xxl\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.xxl\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.xxl\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.xxl\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.xxl\:grid_rows_auto { grid-auto-rows: auto; }
.xxl\:grid_rows_min { grid-auto-rows: min-content; }
.xxl\:grid_rows_max { grid-auto-rows: max-content; }
.xxl\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.xxl\:grid_rows_none { grid-template-rows: none; }
.xxl\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.xxl\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.xxl\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.xxl\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.xxl\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.xxl\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.xxl\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.xxl\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.xxl\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.xxl\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.xxl\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.xxl\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.xxl\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.xxl\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.xxl\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.xxl\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (orientation: landscape) {
.ls\:grid_cols_auto { grid-auto-columns: auto; }
.ls\:grid_cols_min { grid-auto-columns: min-content; }
.ls\:grid_cols_max { grid-auto-columns: max-content; }
.ls\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.ls\:grid_cols_none { grid-template-columns: none; }
.ls\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.ls\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.ls\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.ls\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.ls\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.ls\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.ls\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.ls\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.ls\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.ls\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.ls\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.ls\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.ls\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.ls\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.ls\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.ls\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.ls\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.ls\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.ls\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.ls\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.ls\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.ls\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.ls\:grid_rows_auto { grid-auto-rows: auto; }
.ls\:grid_rows_min { grid-auto-rows: min-content; }
.ls\:grid_rows_max { grid-auto-rows: max-content; }
.ls\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.ls\:grid_rows_none { grid-template-rows: none; }
.ls\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.ls\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.ls\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.ls\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.ls\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.ls\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.ls\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.ls\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.ls\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.ls\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.ls\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.ls\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.ls\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.ls\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.ls\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.ls\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}
@media (orientation: portrait) {
.po\:grid_cols_auto { grid-auto-columns: auto; }
.po\:grid_cols_min { grid-auto-columns: min-content; }
.po\:grid_cols_max { grid-auto-columns: max-content; }
.po\:grid_cols_fr { grid-auto-columns: minmax(0, 1fr); }
.po\:grid_cols_none { grid-template-columns: none; }
.po\:grid_cols_1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.po\:grid_cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.po\:grid_cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.po\:grid_cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.po\:grid_cols_5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.po\:grid_cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.po\:grid_cols_7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.po\:grid_cols_8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.po\:grid_cols_9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.po\:grid_cols_10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.po\:grid_cols_11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.po\:grid_cols_12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.po\:grid_cols_13 { grid-template-columns: repeat(13, minmax(0, 1fr)) }
.po\:grid_cols_14 { grid-template-columns: repeat(14, minmax(0, 1fr)) }
.po\:grid_cols_15 { grid-template-columns: repeat(15, minmax(0, 1fr)) }
.po\:grid_cols_16 { grid-template-columns: repeat(16, minmax(0, 1fr)) }
.po\:grid_cols_17 { grid-template-columns: repeat(17, minmax(0, 1fr)) }
.po\:grid_cols_18 { grid-template-columns: repeat(18, minmax(0, 1fr)) }
.po\:grid_cols_19 { grid-template-columns: repeat(19, minmax(0, 1fr)) }
.po\:grid_cols_20 { grid-template-columns: repeat(20, minmax(0, 1fr)) }
.po\:grid_cols_21 { grid-template-columns: repeat(21, minmax(0, 1fr)) }
.po\:grid_cols_22 { grid-template-columns: repeat(22, minmax(0, 1fr)) }
.po\:grid_rows_auto { grid-auto-rows: auto; }
.po\:grid_rows_min { grid-auto-rows: min-content; }
.po\:grid_rows_max { grid-auto-rows: max-content; }
.po\:grid_rows_fr { grid-auto-rows: minmax(0, 1fr); }
.po\:grid_rows_none { grid-template-rows: none; }
.po\:grid_rows_1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.po\:grid_rows_2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.po\:grid_rows_3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.po\:grid_rows_4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.po\:grid_rows_5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.po\:grid_rows_6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.po\:grid_rows_7 { grid-template-rows: repeat(7, minmax(0, 1fr)) }
.po\:grid_rows_8 { grid-template-rows: repeat(8, minmax(0, 1fr)) }
.po\:grid_rows_9 { grid-template-rows: repeat(9, minmax(0, 1fr)) }
.po\:grid_rows_10 { grid-template-rows: repeat(10, minmax(0, 1fr)) }
.po\:grid_rows_11 { grid-template-rows: repeat(11, minmax(0, 1fr)) }
.po\:grid_rows_12 { grid-template-rows: repeat(12, minmax(0, 1fr)) }
.po\:grid_rows_13 { grid-template-rows: repeat(13, minmax(0, 1fr)) }
.po\:grid_rows_14 { grid-template-rows: repeat(14, minmax(0, 1fr)) }
.po\:grid_rows_15 { grid-template-rows: repeat(15, minmax(0, 1fr)) }
.po\:grid_rows_16 { grid-template-rows: repeat(16, minmax(0, 1fr)) }
}

191
assets/css/image.css Normal file
View File

@ -0,0 +1,191 @@
/*******************************************************************************
* Image: *
*******************************************************************************/
/* Object Fit Property */
.obj_none { object-fit: none; }
.obj_cover { object-fit: cover; }
.obj_contain { object-fit: contain; }
.obj_fill { object-fit: fill; }
.obj_scaledown { object-fit: scale-down; }
/* Background Size */
.bg_none { background-size: none; }
.bg_cover { background-size: cover; }
.bg_contain { background-size: contain; }
.bg_fill { background-size: fill; }
.bg_scaledown { background-size: scale-down; }
/* Transformation */
.flip_x { transform: scaleX(-1); }
.flip_y { transform: scaleY(-1); }
.rotate90 { transform: rotate(90deg); }
.rotate-90 { transform: rotate(-90deg); }
.rotate45 { transform: rotate(45deg); }
.rotate-45 { transform: rotate(-45deg); }
/* Blend Mode */
.blend_normal { mix-blend-mode: normal; }
.blend_multiply { mix-blend-mode: multiply; }
.blend_screen { mix-blend-mode: screen; }
.blend_overlay { mix-blend-mode: overlay; }
.blend_darken { mix-blend-mode: darken; }
.blend_lighten { mix-blend-mode: lighten; }
.blend_color { mix-blend-mode: color; }
.blend_colordodge { mix-blend-mode: color-dodge; }
.blend_colorburn { mix-blend-mode: color-burn; }
.blend_hardlight { mix-blend-mode: hard-light; }
.blend_softlight { mix-blend-mode: soft-light; }
.blend_difference { mix-blend-mode: difference; }
.blend_exclusion { mix-blend-mode: exclusion; }
.blend_hue { mix-blend-mode: hue; }
.blend_saturation { mix-blend-mode: saturation; }
.blend_luminosity { mix-blend-mode: luminosity; }
/* Backdrop Filter */
.no_backdrop { backdrop-filter: none; }
.backdrop_blur0 { backdrop-filter: blur(0); }
.backdrop_blur0\.5 { backdrop-filter: blur(0.125rem); }
.backdrop_blur1 { backdrop-filter: blur(0.25rem); }
.backdrop_blur1\.5 { backdrop-filter: blur(0.375rem); }
.backdrop_blur2 { backdrop-filter: blur(0.5rem); }
.backdrop_blur2\.5 { backdrop-filter: blur(0.625rem); }
.backdrop_blur3 { backdrop-filter: blur(0.75rem); }
.backdrop_blur3\.5 { backdrop-filter: blur(0.875rem); }
.backdrop_blur4 { backdrop-filter: blur(1rem); }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:blend_normal { mix-blend-mode: normal; }
.sm\:blend_multiply { mix-blend-mode: multiply; }
.sm\:blend_screen { mix-blend-mode: screen; }
.sm\:blend_overlay { mix-blend-mode: overlay; }
.sm\:blend_darken { mix-blend-mode: darken; }
.sm\:blend_lighten { mix-blend-mode: lighten; }
.sm\:blend_color { mix-blend-mode: color; }
.sm\:blend_colordodge { mix-blend-mode: color-dodge; }
.sm\:blend_colorburn { mix-blend-mode: color-burn; }
.sm\:blend_hardlight { mix-blend-mode: hard-light; }
.sm\:blend_softlight { mix-blend-mode: soft-light; }
.sm\:blend_difference { mix-blend-mode: difference; }
.sm\:blend_exclusion { mix-blend-mode: exclusion; }
.sm\:blend_hue { mix-blend-mode: hue; }
.sm\:blend_saturation { mix-blend-mode: saturation; }
.sm\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (min-width: 768px) {
.md\:blend_normal { mix-blend-mode: normal; }
.md\:blend_multiply { mix-blend-mode: multiply; }
.md\:blend_screen { mix-blend-mode: screen; }
.md\:blend_overlay { mix-blend-mode: overlay; }
.md\:blend_darken { mix-blend-mode: darken; }
.md\:blend_lighten { mix-blend-mode: lighten; }
.md\:blend_color { mix-blend-mode: color; }
.md\:blend_colordodge { mix-blend-mode: color-dodge; }
.md\:blend_colorburn { mix-blend-mode: color-burn; }
.md\:blend_hardlight { mix-blend-mode: hard-light; }
.md\:blend_softlight { mix-blend-mode: soft-light; }
.md\:blend_difference { mix-blend-mode: difference; }
.md\:blend_exclusion { mix-blend-mode: exclusion; }
.md\:blend_hue { mix-blend-mode: hue; }
.md\:blend_saturation { mix-blend-mode: saturation; }
.md\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (min-width: 992px) {
.lg\:blend_normal { mix-blend-mode: normal; }
.lg\:blend_multiply { mix-blend-mode: multiply; }
.lg\:blend_screen { mix-blend-mode: screen; }
.lg\:blend_overlay { mix-blend-mode: overlay; }
.lg\:blend_darken { mix-blend-mode: darken; }
.lg\:blend_lighten { mix-blend-mode: lighten; }
.lg\:blend_color { mix-blend-mode: color; }
.lg\:blend_colordodge { mix-blend-mode: color-dodge; }
.lg\:blend_colorburn { mix-blend-mode: color-burn; }
.lg\:blend_hardlight { mix-blend-mode: hard-light; }
.lg\:blend_softlight { mix-blend-mode: soft-light; }
.lg\:blend_difference { mix-blend-mode: difference; }
.lg\:blend_exclusion { mix-blend-mode: exclusion; }
.lg\:blend_hue { mix-blend-mode: hue; }
.lg\:blend_saturation { mix-blend-mode: saturation; }
.lg\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (min-width: 1200px) {
.xl\:blend_normal { mix-blend-mode: normal; }
.xl\:blend_multiply { mix-blend-mode: multiply; }
.xl\:blend_screen { mix-blend-mode: screen; }
.xl\:blend_overlay { mix-blend-mode: overlay; }
.xl\:blend_darken { mix-blend-mode: darken; }
.xl\:blend_lighten { mix-blend-mode: lighten; }
.xl\:blend_color { mix-blend-mode: color; }
.xl\:blend_colordodge { mix-blend-mode: color-dodge; }
.xl\:blend_colorburn { mix-blend-mode: color-burn; }
.xl\:blend_hardlight { mix-blend-mode: hard-light; }
.xl\:blend_softlight { mix-blend-mode: soft-light; }
.xl\:blend_difference { mix-blend-mode: difference; }
.xl\:blend_exclusion { mix-blend-mode: exclusion; }
.xl\:blend_hue { mix-blend-mode: hue; }
.xl\:blend_saturation { mix-blend-mode: saturation; }
.xl\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (min-width: 1400px) {
.xxl\:blend_normal { mix-blend-mode: normal; }
.xxl\:blend_multiply { mix-blend-mode: multiply; }
.xxl\:blend_screen { mix-blend-mode: screen; }
.xxl\:blend_overlay { mix-blend-mode: overlay; }
.xxl\:blend_darken { mix-blend-mode: darken; }
.xxl\:blend_lighten { mix-blend-mode: lighten; }
.xxl\:blend_color { mix-blend-mode: color; }
.xxl\:blend_colordodge { mix-blend-mode: color-dodge; }
.xxl\:blend_colorburn { mix-blend-mode: color-burn; }
.xxl\:blend_hardlight { mix-blend-mode: hard-light; }
.xxl\:blend_softlight { mix-blend-mode: soft-light; }
.xxl\:blend_difference { mix-blend-mode: difference; }
.xxl\:blend_exclusion { mix-blend-mode: exclusion; }
.xxl\:blend_hue { mix-blend-mode: hue; }
.xxl\:blend_saturation { mix-blend-mode: saturation; }
.xxl\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (orientation: landscape) {
.ls\:blend_normal { mix-blend-mode: normal; }
.ls\:blend_multiply { mix-blend-mode: multiply; }
.ls\:blend_screen { mix-blend-mode: screen; }
.ls\:blend_overlay { mix-blend-mode: overlay; }
.ls\:blend_darken { mix-blend-mode: darken; }
.ls\:blend_lighten { mix-blend-mode: lighten; }
.ls\:blend_color { mix-blend-mode: color; }
.ls\:blend_colordodge { mix-blend-mode: color-dodge; }
.ls\:blend_colorburn { mix-blend-mode: color-burn; }
.ls\:blend_hardlight { mix-blend-mode: hard-light; }
.ls\:blend_softlight { mix-blend-mode: soft-light; }
.ls\:blend_difference { mix-blend-mode: difference; }
.ls\:blend_exclusion { mix-blend-mode: exclusion; }
.ls\:blend_hue { mix-blend-mode: hue; }
.ls\:blend_saturation { mix-blend-mode: saturation; }
.ls\:blend_luminosity { mix-blend-mode: luminosity; }
}
@media (orientation: portrait) {
.po\:blend_normal { mix-blend-mode: normal; }
.po\:blend_multiply { mix-blend-mode: multiply; }
.po\:blend_screen { mix-blend-mode: screen; }
.po\:blend_overlay { mix-blend-mode: overlay; }
.po\:blend_darken { mix-blend-mode: darken; }
.po\:blend_lighten { mix-blend-mode: lighten; }
.po\:blend_color { mix-blend-mode: color; }
.po\:blend_colordodge { mix-blend-mode: color-dodge; }
.po\:blend_colorburn { mix-blend-mode: color-burn; }
.po\:blend_hardlight { mix-blend-mode: hard-light; }
.po\:blend_softlight { mix-blend-mode: soft-light; }
.po\:blend_difference { mix-blend-mode: difference; }
.po\:blend_exclusion { mix-blend-mode: exclusion; }
.po\:blend_hue { mix-blend-mode: hue; }
.po\:blend_saturation { mix-blend-mode: saturation; }
.po\:blend_luminosity { mix-blend-mode: luminosity; }
}

191
assets/css/main.css Normal file
View File

@ -0,0 +1,191 @@
/*
Utility Classes
*/
@import url("~/assets/css/global-styles.css");
@import url("~assets/css/palette.css");
@import url("~assets/css/spacing/index.css");
@import url("~assets/css/containers/container.css");
@import url("~assets/css/containers/alignment.css");
@import url("~assets/css/containers/distal.css");
@import url("~assets/css/containers/center.css");
@import url("~assets/css/containers/gap.css");
@import url("~assets/css/grid/index.css");
@import url("~assets/css/cursors/index.css");
@import url("~assets/css/font/index.css");
@import url("~assets/css/positioning/index.css");
@import url("~assets/css/containers/flex.css");
@import url("~assets/css/border/index.css");
@import url("~assets/css/image.css");
@import url("~assets/css/misc.css");
@import url("~assets/css/animations/hover.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'poppins', 'Tahoma', 'Segoe UI', sans-serif;
scroll-behavior: smooth;
}
ul, ol {
padding-inline-start: 40px;
list-style: none;
}
:root {
/* Define you configurations here */
--bg-primary: #3a3dbe; /* #8c4bff */
--bg-secondary: #e0e0e0;
--bg-light: #f9fafd;
--bg-dark: #494949;
--text-primary: #3a3dbe;
--text-secondary: #e0e0e0;
--text-light: #f9fafd;
--text-dark: #494949;
--gutter-w: 1rem;
/* List of Z Indices */
--z-index-offsetted-borders: 10;
}
::selection {
/* Specify a global selection style */
}
/******************************************************************************/
/* Document */
/******************************************************************************/
h1 {
font-weight: 900;
font-size: 1.875rem;
}
h3 {
font-weight: 900;
font-size: 1.25rem; /* 1.313 */
}
p {
font-size: 0.938rem; /* 15px */
}
/******************************************************************************/
/* Buttons */
/******************************************************************************/
button {
/* Cancel browsers auto styles */
border: none;
outline: none;
/* Button styles */
background-color: #3a3dbe;
color: white;
font-family: 'poppins';
font-size: 0.938rem;
font-weight: 500;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
cursor: pointer;
/* Button Hover Animation */
/* display: inline-block; */
/* vertical-align: middle; */
/* transform: perspective(1px) translateZ(0); */
/* box-shadow: 0 0 1px rgba(0, 0, 0, 0); */
/* transition-duration: 0.5s; */
}
button:hover {
/* transform: scale(1.1); */
/* transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); */
}
button:active {
background-color: #30329b;
/* transform: scale(1.1); */
/* transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); */
}
button:focus {
/* transform: scale(1.1); */
/* transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); */
}
/******************************************************************************/
/* Text Inputs */
/******************************************************************************/
input[type=text],
textarea {
border: 0;
font-family: 'nunito';
background: white;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.15);
border-radius: 0.375rem;
padding: 0.75rem;
}
input[type=text]:focus,
textarea:focus {
border: 0;
outline: none;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.45);
}
input[type=text]::placeholder,
textarea::placeholder {
color: #a5a5a5;
top: 0;
}
/******************************************************************************/
/* Select */
/******************************************************************************/
select {
border: 0;
font-family: 'nunito';
background: white;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.15);
/* border: 0.5px solid #4f4f4f; */
border-radius: 0.375rem;
padding: 0.75rem;
}
select:focus {
border: 0;
outline: none;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.45);
}
option {
padding: 1rem;
}
/******************************************************************************/
/* Links */
/******************************************************************************/
a {
color: #3a3dbe;
text-decoration: none;
transition: color 0.5s, text-decoration 0.5s;
}
/******************************************************************************/
/* Lists */
/******************************************************************************/
ul.ul li::before {
content: '• ';
}
ul.ul li {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* ... */

131
assets/css/misc.css Normal file
View File

@ -0,0 +1,131 @@
/*******************************************************************************
* Miscellaneous: *
* Any other CSS property that cannot be categorized. *
*******************************************************************************/
.not_resizable { resize: none; }
.resizable { resize: both; }
.resizable_x { resize: horizontal; }
.resizable_y { resize: vertical; }
.border_box { box-sizing: border-box; }
.content_box { box-sizing: content-box; }
.no_overflow { overflow: hidden; }
.no_overflow_x { overflow-x: hidden; }
.no_overflow_y { overflow-y: hidden; }
.overflow_visible { overflow: visible; }
.overflow_x_visible { overflow-x: visible; }
.overflow_y_visible { overflow-y: visible; }
.overflow { overflow: scroll; }
.overflow_x { overflow-x: scroll; }
.overflow_y { overflow-y: scroll; }
.overflow_auto { overflow: auto; }
.overflow_x_auto { overflow-x: auto; }
.overflow_y_auto { overflow-y: auto; }
.float_left { float: left; }
.float_right { float: right; }
.float_none { float: none; }
.float_start { float: inline-start; }
.float_end { float: inline-end; }
.overlay::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--overlay-color, black);
opacity: 0.93;
}
.overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
.hline {
border: 1px solid #929395;
opacity: 0.3;
width: 100%;
}
@media (min-width: 576px) {
.sm\:no_overflow { overflow: hidden; }
.sm\:no_overflow_x { overflow-x: hidden; }
.sm\:no_overflow_y { overflow-y: hidden; }
.sm\:overflow_visible { overflow: visible; }
.sm\:overflow_x_visible { overflow-x: visible; }
.sm\:overflow_y_visible { overflow-y: visible; }
.sm\:overflow { overflow: scroll; }
.sm\:overflow_x { overflow-x: scroll; }
.sm\:overflow_y { overflow-y: scroll; }
.sm\:overflow_auto { overflow: auto; }
.sm\:overflow_x_auto { overflow-x: auto; }
.sm\:overflow_y_auto { overflow-y: auto; }
.sm\:overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
}
@media (min-width: 768px) {
.md\:no_overflow { overflow: hidden; }
.md\:no_overflow_x { overflow-x: hidden; }
.md\:no_overflow_y { overflow-y: hidden; }
.md\:overflow_visible { overflow: visible; }
.md\:overflow_x_visible { overflow-x: visible; }
.md\:overflow_y_visible { overflow-y: visible; }
.md\:overflow { overflow: scroll; }
.md\:overflow_x { overflow-x: scroll; }
.md\:overflow_y { overflow-y: scroll; }
.md\:overflow_auto { overflow: auto; }
.md\:overflow_x_auto { overflow-x: auto; }
.md\:overflow_y_auto { overflow-y: auto; }
.md\:overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
}
@media (min-width: 992px) {
.lg\:no_overflow { overflow: hidden; }
.lg\:no_overflow_x { overflow-x: hidden; }
.lg\:no_overflow_y { overflow-y: hidden; }
.lg\:overflow_visible { overflow: visible; }
.lg\:overflow_x_visible { overflow-x: visible; }
.lg\:overflow_y_visible { overflow-y: visible; }
.lg\:overflow { overflow: scroll; }
.lg\:overflow_x { overflow-x: scroll; }
.lg\:overflow_y { overflow-y: scroll; }
.lg\:overflow_auto { overflow: auto; }
.lg\:overflow_x_auto { overflow-x: auto; }
.lg\:overflow_y_auto { overflow-y: auto; }
.lg\:overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
}
@media (min-width: 1200px) {
.xl\:no_overflow { overflow: hidden; }
.xl\:no_overflow_x { overflow-x: hidden; }
.xl\:no_overflow_y { overflow-y: hidden; }
.xl\:overflow_visible { overflow: visible; }
.xl\:overflow_x_visible { overflow-x: visible; }
.xl\:overflow_y_visible { overflow-y: visible; }
.xl\:overflow { overflow: scroll; }
.xl\:overflow_x { overflow-x: scroll; }
.xl\:overflow_y { overflow-y: scroll; }
.xl\:overflow_auto { overflow: auto; }
.xl\:overflow_x_auto { overflow-x: auto; }
.xl\:overflow_y_auto { overflow-y: auto; }
.xl\:overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
}
@media (min-width: 1400px) {
.xxl\:no_overflow { overflow: hidden; }
.xxl\:no_overflow_x { overflow-x: hidden; }
.xxl\:no_overflow_y { overflow-y: hidden; }
.xxl\:overflow_visible { overflow: visible; }
.xxl\:overflow_x_visible { overflow-x: visible; }
.xxl\:overflow_y_visible { overflow-y: visible; }
.xxl\:overflow { overflow: scroll; }
.xxl\:overflow_x { overflow-x: scroll; }
.xxl\:overflow_y { overflow-y: scroll; }
.xxl\:overflow_auto { overflow: auto; }
.xxl\:overflow_x_auto { overflow-x: auto; }
.xxl\:overflow_y_auto { overflow-y: auto; }
.xxl\:overlay_primary { --overlay-color: var(--bg-primary, #007bff); }
}

134
assets/css/palette.css Normal file
View File

@ -0,0 +1,134 @@
/*******************************************************************************
Palette Colors:
Implementation:
* The 'hover' variations _MUST_ be specified before the normal variants,
otherwise, the hover variants will not take effect. */
/****************/
/* Hover Colors */
/****************/
.hover\:bg_primary:hover { background-color: var(--bg-primary , #007bff); }
.hover\:bg_secondary:hover { background-color: var(--bg-secondary , #6c757d); }
.hover\:bg_success:hover { background-color: var(--bg-success , #28a745); }
.hover\:bg_info:hover { background-color: var(--bg-info , #17a2b8); }
.hover\:bg_warning:hover { background-color: var(--bg-warning , #ffc107); }
.hover\:bg_danger:hover { background-color: var(--bg-danger , #dc3545); }
.hover\:bg_light:hover { background-color: var(--bg-light , #f8f9fa); }
.hover\:bg_dark:hover { background-color: var(--bg-dark , #343a40); }
.hover\:cl_white:hover { color: white; }
/* more here... */
.hover\:text_primary:hover { color: var(--text-primary , #007bff); }
.hover\:text_secondary:hover { color: var(--text-secondary , #6c757d); }
.hover\:text_success:hover { color: var(--text-success , #28a745); }
.hover\:text_info:hover { color: var(--text-info , #17a2b8); }
.hover\:text_warning:hover { color: var(--text-warning , #ffc107); }
.hover\:text_danger:hover { color: var(--text-danger , #dc3545); }
.hover\:text_light:hover { color: var(--text-light , #f8f9fa); }
.hover\:text_dark:hover { color: var(--text-dark , #343a40); }
.hover\:white:hover { background-color: white; }
/* more here... */
/*******************/
/* Disabled Colors */
/*******************/
.disabled\:bg_primary:disabled { background-color: var(--bg-primary , #007bff); }
.disabled\:bg_secondary:disabled { background-color: var(--bg-secondary , #6c757d); }
.disabled\:bg_success:disabled { background-color: var(--bg-success , #28a745); }
.disabled\:bg_info:disabled { background-color: var(--bg-info , #17a2b8); }
.disabled\:bg_warning:disabled { background-color: var(--bg-warning , #ffc107); }
.disabled\:bg_danger:disabled { background-color: var(--bg-danger , #dc3545); }
.disabled\:bg_light:disabled { background-color: var(--bg-light , #f8f9fa); }
.disabled\:bg_dark:disabled { background-color: var(--bg-dark , #343a40); }
.disabled\:cl_white:disabled { color: white; }
/* more here... */
.disabled\:text_primary:disabled { color: var(--text-primary , #007bff); }
.disabled\:text_secondary:disabled { color: var(--text-secondary , #6c757d); }
.disabled\:text_success:disabled { color: var(--text-success , #28a745); }
.disabled\:text_info:disabled { color: var(--text-info , #17a2b8); }
.disabled\:text_warning:disabled { color: var(--text-warning , #ffc107); }
.disabled\:text_danger:disabled { color: var(--text-danger , #dc3545); }
.disabled\:text_light:disabled { color: var(--text-light , #f8f9fa); }
.disabled\:text_dark:disabled { color: var(--text-dark , #343a40); }
.disabled\:white:disabled { background-color: white; }
/* more here... */
/****************/
/* Focus Colors */
/****************/
.focus\:bg_primary:focus { background-color: var(--bg-primary , #007bff); }
.focus\:bg_secondary:focus { background-color: var(--bg-secondary , #6c757d); }
.focus\:bg_success:focus { background-color: var(--bg-success , #28a745); }
.focus\:bg_info:focus { background-color: var(--bg-info , #17a2b8); }
.focus\:bg_warning:focus { background-color: var(--bg-warning , #ffc107); }
.focus\:bg_danger:focus { background-color: var(--bg-danger , #dc3545); }
.focus\:bg_light:focus { background-color: var(--bg-light , #f8f9fa); }
.focus\:bg_dark:focus { background-color: var(--bg-dark , #343a40); }
.focus\:cl_white:focus { color: white; }
/* more here... */
.focus\:text_primary:focus { color: var(--text-primary , #007bff); }
.focus\:text_secondary:focus { color: var(--text-secondary , #6c757d); }
.focus\:text_success:focus { color: var(--text-success , #28a745); }
.focus\:text_info:focus { color: var(--text-info , #17a2b8); }
.focus\:text_warning:focus { color: var(--text-warning , #ffc107); }
.focus\:text_danger:focus { color: var(--text-danger , #dc3545); }
.focus\:text_light:focus { color: var(--text-light , #f8f9fa); }
.focus\:text_dark:focus { color: var(--text-dark , #343a40); }
.docus\:white:focus { background-color: white; }
/* more here... */
/*********************/
/* Foreground Colors */
/*********************/
.text_primary { color: var(--text-primary , #007bff); }
.text_secondary { color: var(--text-secondary , #6c757d); }
.text_success { color: var(--text-success , #28a745); }
.text_info { color: var(--text-info , #17a2b8); }
.text_warning { color: var(--text-warning , #ffc107); }
.text_danger { color: var(--text-danger , #dc3545); }
.text_light { color: var(--text-light , #f8f9fa); }
.text_dark { color: var(--text-dark , #343a40); }
.cl_white { color: white; }
/* more here... */
/**********************/
/* Background Colors */
/**********************/
.bg_primary { background-color: var(--bg-primary , #007bff); }
.bg_secondary { background-color: var(--bg-secondary , #6c757d); }
.bg_success { background-color: var(--bg-success , #28a745); }
.bg_info { background-color: var(--bg-info , #17a2b8); }
.bg_warning { background-color: var(--bg-warning , #ffc107); }
.bg_danger { background-color: var(--bg-danger , #dc3545); }
.bg_light { background-color: var(--bg-light , #f8f9fa); }
.bg_dark { background-color: var(--bg-dark , #343a40); }
.white { background-color: white; }
/* more here... */
/******************************************************************************/
/* */
/******************************************************************************/
.cl_iralexpurple { color: #3a3dbe; }
.cl_iralexdarkgray { color: #6d6d6d; }
.cl_iralexgray { color: #929395; }
.cl_iralexlightgray { color: #e0e0e0; }
.cl_iralexwhite { color: #f9fafd; }
.cl_iralexblack { color: #494949; }
.iralexpurple { background-color: #3a3dbe; }
.iralexdarkgray { background-color: #e0e0e0; }
.iralexgray { background-color: #929395; }
.iralexlightgray { background-color: #6d6d6d; }
.iralexwhite { background-color: #f9fafd; }
.iralexblack { background-color: #494949; }
.text_muted { color: #999898; }
.cl_black { color: black; }
.red { background-color: red; }
.green { background-color: green; }
.active\:iralexdarkwhite:active { background-color: #e0e0e4; }

181
assets/css/positioning/display.css Normal file
View File

@ -0,0 +1,181 @@
/*******************************************************************************
* Display: *
* *
* Hiding Elements: *
* For faster mobile-friendly development, use responsive display classes for *
* showing and hiding elements by device. Avoid creating entirely differemt *
* versions of the same site; instead hide elements responsively for each *
* screen size. *
* To hide elements, simply use the 'hidden' class or one of the *
* {sm,md,lg,xl,xxk}:hidden classes for any responsive screen variation. *
* To show an element only on a given interval of screen sizes you can combine *
* one of the responsive variations of the 'hidden' class with a responsive *
* variation of one of other classes. For example *
* class="hidden md:block xl:hidden xxl:hidden" will hide the element for all *
* screen sizes except for medium and large screens. *
* *
* Display in Print: *
* You can change the display property of elements when printing with the *
* 'print:' variant.
*******************************************************************************/
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline_block { display: inline-block; }
.table { display: table; }
.inline_table { display: inline-table; }
.table_caption { display: table-caption; }
.table_cell { display: table-cell; }
.table_column { display: table-column; } /* The default for <col> */
.table_column_group { display: table-column-group; } /* The default for <colgroup> */
.table_footer_group { display: table-footer-group; }
.table_header_group { display: table-header-group; }
.table_row_group { display: table-row-group; } /* The default for <tbody> */
.table_row { display: table-row; } /* The default for <tr> */
.flow_root { display: flow-root; }
.contents { display: contents; }
.list_item { display: list-item; } /* The default for <li> */
.visible { visibility: visible; } /* I don't think this class will ever be used, please let me know if you ever do */
.invisible { visibility: hidden; }
.collapse { visibility: collapse; } /* Only for <tr>, <tbody>, <col> and <colgroup>, if used on other elements, it renderes as visibility:hidden; */
@media (min-width: 576px) {
.sm\:hidden { display: none; }
.sm\:block { display: block; }
.sm\:inline { display: inline; }
.sm\:inline_block { display: inline-block; }
.sm\:table { display: table; }
.sm\:inline_table { display: inline-table; }
.sm\:table_caption { display: table-caption; }
.sm\:table_cell { display: table-cell; }
.sm\:table_column { display: table-column; }
.sm\:table_column_group { display: table-column-group; }
.sm\:table_footer_group { display: table-footer-group; }
.sm\:table_header_group { display: table-header-group; }
.sm\:table_row_group { display: table-row-group; }
.sm\:table_row { display: table-row; }
.sm\:flow_root { display: flow-root; }
.sm\:contents { display: contents; }
.sm\:list_item { display: list-item; }
.sm\:visible { visibility: visible; }
.sm\:invisible { visibility: hidden; }
.sm\:collapse { visibility: collapse; }
}
@media (min-width: 768px) {
.md\:hidden { display: none; }
.md\:block { display: block; }
.md\:inline { display: inline; }
.md\:inline_block { display: inline-block; }
.md\:table { display: table; }
.md\:inline_table { display: inline-table; }
.md\:table_caption { display: table-caption; }
.md\:table_cell { display: table-cell; }
.md\:table_column { display: table-column; }
.md\:table_column_group { display: table-column-group; }
.md\:table_footer_group { display: table-footer-group; }
.md\:table_header_group { display: table-header-group; }
.md\:table_row_group { display: table-row-group; }
.md\:table_row { display: table-row; }
.md\:flow_root { display: flow-root; }
.md\:contents { display: contents; }
.md\:list_item { display: list-item; }
.md\:visible { visibility: visible; }
.md\:invisible { visibility: hidden; }
.md\:collapse { visibility: collapse; }
}
@media (min-width: 992px) {
.lg\:hidden { display: none; }
.lg\:block { display: block; }
.lg\:inline { display: inline; }
.lg\:inline_block { display: inline-block; }
.lg\:table { display: table; }
.lg\:inline_table { display: inline-table; }
.lg\:table_caption { display: table-caption; }
.lg\:table_cell { display: table-cell; }
.lg\:table_column { display: table-column; }
.lg\:table_column_group { display: table-column-group; }
.lg\:table_footer_group { display: table-footer-group; }
.lg\:table_header_group { display: table-header-group; }
.lg\:table_row_group { display: table-row-group; }
.lg\:table_row { display: table-row; }
.lg\:flow_root { display: flow-root; }
.lg\:contents { display: contents; }
.lg\:list_item { display: list-item; }
.lg\:visible { visibility: visible; }
.lg\:invisible { visibility: hidden; }
.lg\:collapse { visibility: collapse; }
}
@media (min-width: 1200px) {
.xl\:hidden { display: none; }
.xl\:block { display: block; }
.xl\:inline { display: inline; }
.xl\:inline_block { display: inline-block; }
.xl\:table { display: table; }
.xl\:inline_table { display: inline-table; }
.xl\:table_caption { display: table-caption; }
.xl\:table_cell { display: table-cell; }
.xl\:table_column { display: table-column; }
.xl\:table_column_group { display: table-column-group; }
.xl\:table_footer_group { display: table-footer-group; }
.xl\:table_header_group { display: table-header-group; }
.xl\:table_row_group { display: table-row-group; }
.xl\:table_row { display: table-row; }
.xl\:flow_root { display: flow-root; }
.xl\:contents { display: contents; }
.xl\:list_item { display: list-item; }
.xl\:visible { visibility: visible; }
.xl\:invisible { visibility: hidden; }
.xl\:collapse { visibility: collapse; }
}
@media (min-width: 1400px) {
.xxl\:hidden { display: none; }
.xxl\:block { display: block; }
.xxl\:inline { display: inline; }
.xxl\:inline_block { display: inline-block; }
.xxl\:table { display: table; }
.xxl\:inline_table { display: inline-table; }
.xxl\:table_caption { display: table-caption; }
.xxl\:table_cell { display: table-cell; }
.xxl\:table_column { display: table-column; }
.xxl\:table_column_group { display: table-column-group; }
.xxl\:table_footer_group { display: table-footer-group; }
.xxl\:table_header_group { display: table-header-group; }
.xxl\:table_row_group { display: table-row-group; }
.xxl\:table_row { display: table-row; }
.xxl\:flow_root { display: flow-root; }
.xxl\:contents { display: contents; }
.xxl\:list_item { display: list-item; }
.xxl\:visible { visibility: visible; }
.xxl\:invisible { visibility: hidden; }
.xxl\:collapse { visibility: collapse; }
}
@media print {
.print\:hidden { display: none; }
.print\:inline { display: inline; }
.print\:block { display: block; }
.print\:inline_block { display: inline-block; }
.print\:table { display: table; }
.print\:inline_table { display: inline-table; }
.print\:table_caption { display: table-caption; }
.print\:table_cell { display: table-cell; }
.print\:table_column { display: table-column; }
.print\:table_column_group { display: table-column-group; }
.print\:table_footer_group { display: table-footer-group; }
.print\:table_header_group { display: table-header-group; }
.print\:table_row_group { display: table-row-group; }
.print\:table_row { display: table-row; }
.print\:flow_root { display: flow-root; }
.print\:contents { display: contents; }
.print\:list_item { display: list-item; }
.print\:flex { display: flex; }
.print\:inline_flex { display: inline-flex; }
.print\:grid { display: grid; }
.print\:inline_grid { display: inline-grid; }
}

77
assets/css/positioning/index.css Normal file
View File

@ -0,0 +1,77 @@
/*******************************************************************************
* Location: *
* Utility classes for CSS properties related to sizing and positioning. *
* *
* Note: *
* The two properties display:flex; and display:grid; are in the "containers" *
* utility class folder. *
*******************************************************************************/
/* Imports */
@import url("~assets/css/positioning/display.css");
@import url("~assets/css/positioning/position.css");
@import url("~assets/css/positioning/size.css");
@import url("~assets/css/positioning/zindex.css");
/*
Vertical Alignment
These utility classes control the vertical alignment of an inline or table-cell
box.
*/
.\$baseline { vertical-align: baseline; }
.\$top { vertical-align: top; }
.\$middle { vertical-align: middle; }
.\$bottom { vertical-align: bottom; }
.\$sub { vertical-align: sub; }
.\$super { vertical-align: super; }
.\$text_bottom { vertical-align: text-bottom; }
.\$text_top { vertical-align: text-top; }
/* Aspect Ratios */
.aspect_ratio { aspect-ratio: attr(width) / attr(height); }
/* Square Aspect Ratios */
.apsect_ratio_1\/1 { aspect-ratio: 1 / 1; } /* Square aspect ratio */
/* Landscape Aspect Ratios */
.aspect_ratio_2\/1 { aspect-ratio: 2 / 1; }
.aspect_ratio_16\/9 { aspect-ratio: 16 / 9 ; }
.aspect_ratio_1\/1\.5 { aspect-ratio: 1 / 1.5; }
/* Portrait Aspect Ratios */
.aspect_ratio_1\/2 { aspect-ratio: 1 / 2; }
.aspect_ratio_1\/3 { aspect-ratio: 1 / 3; }
.aspect_ratio_2\/3 { aspect-ratio: 2 / 3; }
.isolate_auto { isolation: auto; }
.isolate { isolation: isolate; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:isolate_auto { isolation: auto; }
.sm\:isolate { isolation: isolate; }
}
@media (min-width: 768px) {
.md\:isolate_auto { isolation: auto; }
.md\:isolate { isolation: isolate; }
}
@media (min-width: 992px) {
.lg\:isolate_auto { isolation: auto; }
.lg\:isolate { isolation: isolate; }
}
@media (min-width: 1200px) {
.xl\:isolate_auto { isolation: auto; }
.xl\:isolate { isolation: isolate; }
}
@media (min-width: 1400px) {
.xxl\:isolate_auto { isolation: auto; }
.xxl\:isolate { isolation: isolate; }
}

49
assets/css/positioning/position.css Normal file
View File

@ -0,0 +1,49 @@
/*******************************************************************************
* Position: *
*******************************************************************************/
.static { position: static; }
.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.sticky { position: sticky; }
@media (min-width: 576px) {
.sm\:static { position: static; }
.sm\:relative { position: relative; }
.sm\:fixed { position: fixed; }
.sm\:absolute { position: absolute; }
.sm\:sticky { position: sticky; }
}
@media (min-width: 768px) {
.md\:static { position: static; }
.md\:relative { position: relative; }
.md\:fixed { position: fixed; }
.md\:absolute { position: absolute; }
.md\:sticky { position: sticky; }
}
@media (min-width: 992px) {
.lg\:static { position: static; }
.lg\:relative { position: relative; }
.lg\:fixed { position: fixed; }
.lg\:absolute { position: absolute; }
.lg\:sticky { position: sticky; }
}
@media (min-width: 1200px) {
.xl\:static { position: static; }
.xl\:relative { position: relative; }
.xl\:fixed { position: fixed; }
.xl\:absolute { position: absolute; }
.xl\:sticky { position: sticky; }
}
@media (min-width: 1400px) {
.xxl\:static { position: static; }
.xxl\:relative { position: relative; }
.xxl\:fixed { position: fixed; }
.xxl\:absolute { position: absolute; }
.xxl\:sticky { position: sticky; }
}

1366
assets/css/positioning/size.css Normal file
View File

File diff suppressed because it is too large Load Diff

190
assets/css/positioning/zindex.css Normal file
View File

@ -0,0 +1,190 @@
/*******************************************************************************
* Z-Index: *
* *
* Note that the z-index property will be applied ONLY if the element is *
* positioned (i.e. the element's position is anything but static) or are flex *
* items (i.e. they are direct children of display:flex or display:inline-flex *
* ). *
* *
* In the ASCII chart, the digit 0 is \30 and the digit 9 is \39. *
* Also, to use a digit right after an escaped character, you must separate *
* them with a space. *
*******************************************************************************/
/* */
.zindex_auto { z-index: auto; }
.-\31 00 { z-index: -100; }
.-\39 0 { z-index: -90; }
.-\38 0 { z-index: -80; }
.-\37 5 { z-index: -75; }
.-\37 0 { z-index: -70; }
.-\36 0 { z-index: -60; }
.-\35 0 { z-index: -50; }
.-\34 0 { z-index: -40; }
.-\33 0 { z-index: -30; }
.-\32 5 { z-index: -25; }
.-\32 0 { z-index: -20; }
.-\31 0 { z-index: -10; }
.\30 { z-index: 0; }
.\31 0 { z-index: 10; }
.\32 0 { z-index: 20; }
.\32 5 { z-index: 25; }
.\33 0 { z-index: 30; }
.\34 0 { z-index: 40; }
.\35 0 { z-index: 50; }
.\36 0 { z-index: 60; }
.\37 0 { z-index: 70; }
.\37 5 { z-index: 75; }
.\38 0 { z-index: 80; }
.\39 0 { z-index: 90; }
.\31 00 { z-index: 100; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:zindex_auto { z-index: auto; }
.sm\:-\31 00 { z-index: -100; }
.sm\:-\39 0 { z-index: -90; }
.sm\:-\38 0 { z-index: -80; }
.sm\:-\37 5 { z-index: -75; }
.sm\:-\37 0 { z-index: -70; }
.sm\:-\36 0 { z-index: -60; }
.sm\:-\35 0 { z-index: -50; }
.sm\:-\34 0 { z-index: -40; }
.sm\:-\33 0 { z-index: -30; }
.sm\:-\32 5 { z-index: -25; }
.sm\:-\32 0 { z-index: -20; }
.sm\:-\31 0 { z-index: -10; }
.sm\:\30 { z-index: 0; }
.sm\:\31 0 { z-index: 10; }
.sm\:\32 0 { z-index: 20; }
.sm\:\32 5 { z-index: 25; }
.sm\:\33 0 { z-index: 30; }
.sm\:\34 0 { z-index: 40; }
.sm\:\35 0 { z-index: 50; }
.sm\:\36 0 { z-index: 60; }
.sm\:\37 0 { z-index: 70; }
.sm\:\37 5 { z-index: 75; }
.sm\:\38 0 { z-index: 80; }
.sm\:\39 0 { z-index: 90; }
.sm\:\31 00 { z-index: 100; }
}
@media (min-width: 768px) {
.md\:zindex_auto { z-index: auto; }
.md\:-\31 00 { z-index: -100; }
.md\:-\39 0 { z-index: -90; }
.md\:-\38 0 { z-index: -80; }
.md\:-\37 5 { z-index: -75; }
.md\:-\37 0 { z-index: -70; }
.md\:-\36 0 { z-index: -60; }
.md\:-\35 0 { z-index: -50; }
.md\:-\34 0 { z-index: -40; }
.md\:-\33 0 { z-index: -30; }
.md\:-\32 5 { z-index: -25; }
.md\:-\32 0 { z-index: -20; }
.md\:-\31 0 { z-index: -10; }
.md\:\30 { z-index: 0; }
.md\:\31 0 { z-index: 10; }
.md\:\32 0 { z-index: 20; }
.md\:\32 5 { z-index: 25; }
.md\:\33 0 { z-index: 30; }
.md\:\34 0 { z-index: 40; }
.md\:\35 0 { z-index: 50; }
.md\:\36 0 { z-index: 60; }
.md\:\37 0 { z-index: 70; }
.md\:\37 5 { z-index: 75; }
.md\:\38 0 { z-index: 80; }
.md\:\39 0 { z-index: 90; }
.md\:\31 00 { z-index: 100; }
}
@media (min-width: 992px) {
.lg\:zindex_auto { z-index: auto; }
.lg\:-\31 00 { z-index: -100; }
.lg\:-\39 0 { z-index: -90; }
.lg\:-\38 0 { z-index: -80; }
.lg\:-\37 5 { z-index: -75; }
.lg\:-\37 0 { z-index: -70; }
.lg\:-\36 0 { z-index: -60; }
.lg\:-\35 0 { z-index: -50; }
.lg\:-\34 0 { z-index: -40; }
.lg\:-\33 0 { z-index: -30; }
.lg\:-\32 5 { z-index: -25; }
.lg\:-\32 0 { z-index: -20; }
.lg\:-\31 0 { z-index: -10; }
.lg\:\30 { z-index: 0; }
.lg\:\31 0 { z-index: 10; }
.lg\:\32 0 { z-index: 20; }
.lg\:\32 5 { z-index: 25; }
.lg\:\33 0 { z-index: 30; }
.lg\:\34 0 { z-index: 40; }
.lg\:\35 0 { z-index: 50; }
.lg\:\36 0 { z-index: 60; }
.lg\:\37 0 { z-index: 70; }
.lg\:\37 5 { z-index: 75; }
.lg\:\38 0 { z-index: 80; }
.lg\:\39 0 { z-index: 90; }
.lg\:\31 00 { z-index: 100; }
}
@media (min-width: 1200px) {
.xl\:zindex_auto { z-index: auto; }
.xl\:-\31 00 { z-index: -100; }
.xl\:-\39 0 { z-index: -90; }
.xl\:-\38 0 { z-index: -80; }
.xl\:-\37 5 { z-index: -75; }
.xl\:-\37 0 { z-index: -70; }
.xl\:-\36 0 { z-index: -60; }
.xl\:-\35 0 { z-index: -50; }
.xl\:-\34 0 { z-index: -40; }
.xl\:-\33 0 { z-index: -30; }
.xl\:-\32 5 { z-index: -25; }
.xl\:-\32 0 { z-index: -20; }
.xl\:-\31 0 { z-index: -10; }
.xl\:\30 { z-index: 0; }
.xl\:\31 0 { z-index: 10; }
.xl\:\32 0 { z-index: 20; }
.xl\:\32 5 { z-index: 25; }
.xl\:\33 0 { z-index: 30; }
.xl\:\34 0 { z-index: 40; }
.xl\:\35 0 { z-index: 50; }
.xl\:\36 0 { z-index: 60; }
.xl\:\37 0 { z-index: 70; }
.xl\:\37 5 { z-index: 75; }
.xl\:\38 0 { z-index: 80; }
.xl\:\39 0 { z-index: 90; }
.xl\:\31 00 { z-index: 100; }
}
@media (min-width: 1400px) {
.xxl\:zindex_auto { z-index: auto; }
.xxl\:-\31 00 { z-index: -100; }
.xxl\:-\39 0 { z-index: -90; }
.xxl\:-\38 0 { z-index: -80; }
.xxl\:-\37 5 { z-index: -75; }
.xxl\:-\37 0 { z-index: -70; }
.xxl\:-\36 0 { z-index: -60; }
.xxl\:-\35 0 { z-index: -50; }
.xxl\:-\34 0 { z-index: -40; }
.xxl\:-\33 0 { z-index: -30; }
.xxl\:-\32 5 { z-index: -25; }
.xxl\:-\32 0 { z-index: -20; }
.xxl\:-\31 0 { z-index: -10; }
.xxl\:\3 0 { z-index: 0; }
.xxl\:\31 0 { z-index: 10; }
.xxl\:\32 0 { z-index: 20; }
.xxl\:\32 5 { z-index: 25; }
.xxl\:\33 0 { z-index: 30; }
.xxl\:\34 0 { z-index: 40; }
.xxl\:\35 0 { z-index: 50; }
.xxl\:\36 0 { z-index: 60; }
.xxl\:\37 0 { z-index: 70; }
.xxl\:\37 5 { z-index: 75; }
.xxl\:\38 0 { z-index: 80; }
.xxl\:\39 0 { z-index: 90; }
.xxl\:\31 00 { z-index: 100; }
}

7
assets/css/spacing/index.css Normal file
View File

@ -0,0 +1,7 @@
/*******************************************************************************
* Spacing: *
*******************************************************************************/
@import url("~assets/css/spacing/padding.css");
@import url("~assets/css/spacing/margin.css");
@import url("~assets/css/spacing/space-between.css");

2989
assets/css/spacing/margin.css Normal file
View File

File diff suppressed because it is too large Load Diff

1495
assets/css/spacing/padding.css Normal file
View File

File diff suppressed because it is too large Load Diff

890
assets/css/spacing/space-between.css Normal file
View File

@ -0,0 +1,890 @@
/*******************************************************************************
* Space Between: *
* A bunch of utility classes for controlling the space between child elements.*
* *
* Description: *
* - The sx{amount} series of classes control the horizontal space between *
* child elements. *
* - The sy{amount} series of classes control the vertical space between child *
* elements. *
* - If your elements are in reverse order (e.g. using "flex row_reverse"), *
* use the 'sx_reverse' or 'sy_reverese" classes to ensure the space is *
* added to the correct side each element. *
* *
* Limitations: *
* These utility classes are really just a shortcut for adding margin to all *
* but the first item in a group, and aren't designed to handle complex cases *
* like grids, layouts that wrap, or situations where the children are rendered*
* in a complex custom order rather than their natural DOM order. *
* For those situations, it's better to use the gap utility classes when *
* possible, or add margin to every element with a matching negative margin on *
* the parent. *
* Also these classes are not designed to work together with the divide *
* utility classes. For those situations, consider adding margin/padding *
* classes to the children instead. *
* *
* Implementation: *
* Note that the 'sx_reverse' and 'sy_reverse' classes must be defined after *
* their corresponding classes, otherwise, the reverse variants will not work. *
*******************************************************************************/
/**********************/
/* Horizontal Spacing */
/**********************/
.sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
/********************/
/* Vertical Spacing */
/********************/
.sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
/***********************/
/* Responsive Variants */
/***********************/
@media (min-width: 576px) {
.sm\:sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.sm\:sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.sm\:sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.sm\:sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.sm\:sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.sm\:sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.sm\:sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.sm\:sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.sm\:sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.sm\:sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.sm\:sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.sm\:sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.sm\:sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.sm\:sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.sm\:sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.sm\:sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.sm\:sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.sm\:sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.sm\:sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.sm\:sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.sm\:sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.sm\:sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.sm\:sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.sm\:sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.sm\:sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.sm\:sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.sm\:sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.sm\:sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.sm\:sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
.sm\:sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.sm\:sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.sm\:sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.sm\:sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.sm\:sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.sm\:sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.sm\:sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.sm\:sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.sm\:sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.sm\:sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.sm\:sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.sm\:sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.sm\:sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.sm\:sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.sm\:sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.sm\:sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.sm\:sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.sm\:sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.sm\:sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.sm\:sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.sm\:sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.sm\:sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.sm\:sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.sm\:sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.sm\:sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.sm\:sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.sm\:sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.sm\:sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.sm\:sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
}
@media (min-width: 768px) {
.md\:sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.md\:sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.md\:sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.md\:sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.md\:sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.md\:sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.md\:sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.md\:sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.md\:sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.md\:sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.md\:sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.md\:sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.md\:sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.md\:sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.md\:sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.md\:sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.md\:sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.md\:sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.md\:sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.md\:sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.md\:sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.md\:sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.md\:sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.md\:sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.md\:sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.md\:sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.md\:sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.md\:sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.md\:sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.md\:sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.md\:sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.md\:sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.md\:sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.md\:sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.md\:sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.md\:sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.md\:sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.md\:sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.md\:sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.md\:sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.md\:sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.md\:sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.md\:sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.md\:sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.md\:sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.md\:sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.md\:sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.md\:sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.md\:sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.md\:sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.md\:sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.md\:sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
.md\:sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.md\:sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.md\:sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.md\:sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.md\:sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.md\:sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.md\:sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.md\:sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.md\:sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.md\:sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.md\:sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.md\:sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.md\:sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.md\:sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.md\:sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.md\:sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.md\:sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.md\:sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.md\:sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.md\:sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.md\:sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.md\:sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.md\:sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.md\:sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.md\:sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.md\:sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.md\:sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.md\:sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.md\:sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.md\:sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.md\:sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.md\:sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.md\:sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.md\:sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.md\:sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.md\:sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.md\:sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.md\:sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.md\:sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.md\:sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.md\:sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.md\:sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.md\:sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.md\:sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.md\:sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.md\:sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.md\:sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.md\:sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.md\:sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.md\:sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.md\:sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.md\:sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
}
@media (min-width: 992px) {
.lg\:sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.lg\:sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.lg\:sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.lg\:sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.lg\:sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.lg\:sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.lg\:sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.lg\:sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.lg\:sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.lg\:sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.lg\:sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.lg\:sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.lg\:sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.lg\:sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.lg\:sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.lg\:sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.lg\:sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.lg\:sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.lg\:sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.lg\:sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.lg\:sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.lg\:sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.lg\:sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.lg\:sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.lg\:sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.lg\:sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.lg\:sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.lg\:sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.lg\:sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
.lg\:sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.lg\:sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.lg\:sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.lg\:sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.lg\:sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.lg\:sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.lg\:sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.lg\:sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.lg\:sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.lg\:sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.lg\:sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.lg\:sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.lg\:sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.lg\:sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.lg\:sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.lg\:sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.lg\:sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.lg\:sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.lg\:sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.lg\:sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.lg\:sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.lg\:sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.lg\:sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.lg\:sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.lg\:sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.lg\:sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.lg\:sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.lg\:sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.lg\:sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
}
@media (min-width: 1200px) {
.xl\:sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.xl\:sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.xl\:sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.xl\:sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.xl\:sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.xl\:sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.xl\:sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.xl\:sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.xl\:sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.xl\:sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.xl\:sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.xl\:sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.xl\:sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.xl\:sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.xl\:sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.xl\:sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.xl\:sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.xl\:sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.xl\:sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.xl\:sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.xl\:sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.xl\:sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.xl\:sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.xl\:sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.xl\:sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.xl\:sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.xl\:sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.xl\:sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.xl\:sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
.xl\:sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.xl\:sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.xl\:sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.xl\:sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.xl\:sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.xl\:sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.xl\:sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.xl\:sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.xl\:sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.xl\:sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.xl\:sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.xl\:sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.xl\:sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.xl\:sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.xl\:sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.xl\:sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.xl\:sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.xl\:sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.xl\:sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.xl\:sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.xl\:sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.xl\:sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.xl\:sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.xl\:sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.xl\:sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.xl\:sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.xl\:sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.xl\:sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.xl\:sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
}
@media (min-width: 1400px) {
.xxl\:sx-96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-24rem * var(--sx-reverse)); margin-left: calc(-24rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-20rem * var(--sx-reverse)); margin-left: calc(-20rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-18rem * var(--sx-reverse)); margin-left: calc(-18rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-16rem * var(--sx-reverse)); margin-left: calc(-16rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-15rem * var(--sx-reverse)); margin-left: calc(-15rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-14rem * var(--sx-reverse)); margin-left: calc(-14rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-13rem * var(--sx-reverse)); margin-left: calc(-13rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-12rem * var(--sx-reverse)); margin-left: calc(-12rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-11rem * var(--sx-reverse)); margin-left: calc(-11rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-10rem * var(--sx-reverse)); margin-left: calc(-10rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-9rem * var(--sx-reverse)); margin-left: calc(-9rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-8rem * var(--sx-reverse)); margin-left: calc(-8rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-7rem * var(--sx-reverse)); margin-left: calc(-7rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-6rem * var(--sx-reverse)); margin-left: calc(-6rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-5rem * var(--sx-reverse)); margin-left: calc(-5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-4rem * var(--sx-reverse)); margin-left: calc(-4rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3.5rem * var(--sx-reverse)); margin-left: calc(-3.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-3rem * var(--sx-reverse)); margin-left: calc(-3rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.75rem * var(--sx-reverse)); margin-left: calc(-2.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.5rem * var(--sx-reverse)); margin-left: calc(-2.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2.25rem * var(--sx-reverse)); margin-left: calc(-2.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-2rem * var(--sx-reverse)); margin-left: calc(-2rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.75rem * var(--sx-reverse)); margin-left: calc(-1.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.5rem * var(--sx-reverse)); margin-left: calc(-1.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1.25rem * var(--sx-reverse)); margin-left: calc(-1.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-1rem * var(--sx-reverse)); margin-left: calc(-1rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.875rem * var(--sx-reverse)); margin-left: calc(-0.875rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.75rem * var(--sx-reverse)); margin-left: calc(-0.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.625rem * var(--sx-reverse)); margin-left: calc(-0.625rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.5rem * var(--sx-reverse)); margin-left: calc(-0.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.375rem * var(--sx-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.25rem * var(--sx-reverse)); margin-left: calc(-0.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx-0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(-0.125rem * var(--sx-reverse)); margin-left: calc(-0.125rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx0 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0 * var(--sx-reverse)); margin-left: calc(0 * calc(1 - var(--sx-reverse))); }
.xxl\:sx0\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.125rem * var(--sx-reverse)); margin-left: calc(0.125rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx1 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.25rem * var(--sx-reverse)); margin-left: calc(0.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx1\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.375rem * var(--sx-reverse)); margin-left: calc(0.375rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx2 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.5rem * var(--sx-reverse)); margin-left: calc(0.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx2\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.625rem * var(--sx-reverse)); margin-left: calc(0.625rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx3 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.75rem * var(--sx-reverse)); margin-left: calc(0.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx3\.5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(0.875rem * var(--sx-reverse)); margin-left: calc(0.875rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx4 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1rem * var(--sx-reverse)); margin-left: calc(1rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx5 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.25rem * var(--sx-reverse)); margin-left: calc(1.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx6 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.5rem * var(--sx-reverse)); margin-left: calc(1.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx7 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1.75rem * var(--sx-reverse)); margin-left: calc(1.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx8 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2rem * var(--sx-reverse)); margin-left: calc(2rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx9 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.25rem * var(--sx-reverse)); margin-left: calc(2.25rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx10 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.5rem * var(--sx-reverse)); margin-left: calc(2.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx11 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(2.75rem * var(--sx-reverse)); margin-left: calc(2.75rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx12 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3rem * var(--sx-reverse)); margin-left: calc(3rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx14 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(3.5rem * var(--sx-reverse)); margin-left: calc(3.5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx16 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(4rem * var(--sx-reverse)); margin-left: calc(4rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx20 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(5rem * var(--sx-reverse)); margin-left: calc(5rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx24 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(6rem * var(--sx-reverse)); margin-left: calc(6rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx28 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(7rem * var(--sx-reverse)); margin-left: calc(7rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx32 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(8rem * var(--sx-reverse)); margin-left: calc(8rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx36 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(9rem * var(--sx-reverse)); margin-left: calc(9rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx40 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(10rem * var(--sx-reverse)); margin-left: calc(10rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx44 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(11rem * var(--sx-reverse)); margin-left: calc(11rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx48 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(12rem * var(--sx-reverse)); margin-left: calc(12rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx52 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(13rem * var(--sx-reverse)); margin-left: calc(13rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx56 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(14rem * var(--sx-reverse)); margin-left: calc(14rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx60 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(15rem * var(--sx-reverse)); margin-left: calc(15rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx64 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(16rem * var(--sx-reverse)); margin-left: calc(16rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx72 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(18rem * var(--sx-reverse)); margin-left: calc(18rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx80 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(20rem * var(--sx-reverse)); margin-left: calc(20rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx96 > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(24rem * var(--sx-reverse)); margin-left: calc(24rem * calc(1 - var(--sx-reverse))); }
.xxl\:sx1px > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 0; margin-right: calc(1px * var(--sx-reverse)); margin-left: calc(1px * calc(1 - var(--sx-reverse))); }
.xxl\:sx_reverse > :not([hidden]) ~ :not([hidden]) { --sx-reverse: 1; }
.xxl\:sy-96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-24rem * var(--sy-reverse)); margin-top: calc(-24rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-20rem * var(--sy-reverse)); margin-top: calc(-20rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-18rem * var(--sy-reverse)); margin-top: calc(-18rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-16rem * var(--sy-reverse)); margin-top: calc(-16rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-15rem * var(--sy-reverse)); margin-top: calc(-15rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-14rem * var(--sy-reverse)); margin-top: calc(-14rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-13rem * var(--sy-reverse)); margin-top: calc(-13rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-12rem * var(--sy-reverse)); margin-top: calc(-12rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-11rem * var(--sy-reverse)); margin-top: calc(-11rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-10rem * var(--sy-reverse)); margin-top: calc(-10rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-9rem * var(--sy-reverse)); margin-top: calc(-9rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-8rem * var(--sy-reverse)); margin-top: calc(-8rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-7rem * var(--sy-reverse)); margin-top: calc(-7rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-6rem * var(--sy-reverse)); margin-top: calc(-6rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-5rem * var(--sy-reverse)); margin-top: calc(-5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-4rem * var(--sy-reverse)); margin-top: calc(-4rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3.5rem * var(--sy-reverse)); margin-top: calc(-3.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-3rem * var(--sy-reverse)); margin-top: calc(-3rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.75rem * var(--sy-reverse)); margin-top: calc(-2.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.5rem * var(--sy-reverse)); margin-top: calc(-2.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2.25rem * var(--sy-reverse)); margin-top: calc(-2.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-2rem * var(--sy-reverse)); margin-top: calc(-2rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.75rem * var(--sy-reverse)); margin-top: calc(-1.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.5rem * var(--sy-reverse)); margin-top: calc(-1.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1.25rem * var(--sy-reverse)); margin-top: calc(-1.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-1rem * var(--sy-reverse)); margin-top: calc(-1rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.875rem * var(--sy-reverse)); margin-top: calc(-0.875rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.75rem * var(--sy-reverse)); margin-top: calc(-0.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.625rem * var(--sy-reverse)); margin-top: calc(-0.625rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.5rem * var(--sy-reverse)); margin-top: calc(-0.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.375rem * var(--sy-reverse)); margin-top: calc(-0.375rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.25rem * var(--sy-reverse)); margin-top: calc(-0.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy-0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(-0.125rem * var(--sy-reverse)); margin-top: calc(-0.125rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy0 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0 * var(--sy-reverse)); margin-top: calc(0 * calc(1 - var(--sy-reverse))); }
.xxl\:sy0\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.125rem * var(--sy-reverse)); margin-top: calc(0.125rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy1 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.25rem * var(--sy-reverse)); margin-top: calc(0.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy1\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.375rem * var(--sy-reverse)); margin-top: calc(0.375rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy2 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.5rem * var(--sy-reverse)); margin-top: calc(0.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy2\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.625rem * var(--sy-reverse)); margin-top: calc(0.625rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy3 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.75rem * var(--sy-reverse)); margin-top: calc(0.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy3\.5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(0.875rem * var(--sy-reverse)); margin-top: calc(0.875rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy4 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1rem * var(--sy-reverse)); margin-top: calc(1rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy5 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.25rem * var(--sy-reverse)); margin-top: calc(1.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy6 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.5rem * var(--sy-reverse)); margin-top: calc(1.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy7 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1.75rem * var(--sy-reverse)); margin-top: calc(1.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy8 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2rem * var(--sy-reverse)); margin-top: calc(2rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy9 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.25rem * var(--sy-reverse)); margin-top: calc(2.25rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy10 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.5rem * var(--sy-reverse)); margin-top: calc(2.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy11 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(2.75rem * var(--sy-reverse)); margin-top: calc(2.75rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy12 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3rem * var(--sy-reverse)); margin-top: calc(3rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy14 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(3.5rem * var(--sy-reverse)); margin-top: calc(3.5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy16 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(4rem * var(--sy-reverse)); margin-top: calc(4rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy20 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(5rem * var(--sy-reverse)); margin-top: calc(5rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy24 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(6rem * var(--sy-reverse)); margin-top: calc(6rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy28 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(7rem * var(--sy-reverse)); margin-top: calc(7rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy32 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(8rem * var(--sy-reverse)); margin-top: calc(8rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy36 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(9rem * var(--sy-reverse)); margin-top: calc(9rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy40 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(10rem * var(--sy-reverse)); margin-top: calc(10rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy44 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(11rem * var(--sy-reverse)); margin-top: calc(11rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy48 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(12rem * var(--sy-reverse)); margin-top: calc(12rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy52 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(13rem * var(--sy-reverse)); margin-top: calc(13rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy56 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(14rem * var(--sy-reverse)); margin-top: calc(14rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy60 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(15rem * var(--sy-reverse)); margin-top: calc(15rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy64 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(16rem * var(--sy-reverse)); margin-top: calc(16rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy72 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(18rem * var(--sy-reverse)); margin-top: calc(18rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy80 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(20rem * var(--sy-reverse)); margin-top: calc(20rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy96 > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(24rem * var(--sy-reverse)); margin-top: calc(24rem * calc(1 - var(--sy-reverse))); }
.xxl\:sy1px > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 0; margin-bottom: calc(1px * var(--sx-reverse)); margin-top: calc(1px * calc(1 - var(--sy-reverse))); }
.xxl\:sy_reverse > :not([hidden]) ~ :not([hidden]) { --sy-reverse: 1; }
}

BIN
assets/font/nunito/nunito-black.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-blackitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-bolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-extrabold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-extrabolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-extralight.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-extralightitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-italic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-light.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-lightitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-semibold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/nunito/nunito-semibolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-black.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-blackitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-bolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-extrabold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-extrabolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-extralight.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-extralightitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-italic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-light.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-lightitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-mediumitalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-semibold.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-semibolditalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-thin.ttf Normal file
View File

Binary file not shown.

BIN
assets/font/poppins/poppins-thinitalic.ttf Normal file
View File

Binary file not shown.

48
assets/hp-primary-desktop.svg Normal file
View File

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="708px" height="548px" viewBox="0 0 708 548" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>Group 5 Copy</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="652" height="492" rx="31"></rect>
<filter x="-7.3%" y="-7.4%" width="114.6%" height="119.3%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="11" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.458823529 0 0 0 0 0.552941176 0 0 0 0 0.650980392 0 0 0 0.214160839 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy-13" transform="translate(-376.000000, -168.000000)">
<g id="Group-5-Copy" transform="translate(404.000000, 185.000000)">
<g id="Group-2">
<g id="Rectangle-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle" fill="#F5F9FF" mask="url(#mask-2)" x="0" y="2.27373675e-13" width="129" height="522"></rect>
<rect id="Rectangle" fill="#ADC6E2" mask="url(#mask-2)" x="30" y="75" width="59" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-10" fill="#ADC6E2" mask="url(#mask-2)" x="159" y="73" width="127" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-11" fill="#C3D7E9" mask="url(#mask-2)" x="159" y="88" width="59" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-12" fill="#C3D7E9" mask="url(#mask-2)" x="223" y="88" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-5" fill="#ADC6E2" mask="url(#mask-2)" x="30" y="167" width="59" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="96" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-2" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="122" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-7" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="135" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-4" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="188" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-6" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="201" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-8" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="214" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-9" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="227" width="37" height="5" rx="2.5"></rect>
<rect id="Rectangle-Copy-3" fill="#D2E0F1" mask="url(#mask-2)" x="30" y="109" width="37" height="5" rx="2.5"></rect>
</g>
<circle id="Oval" fill="#80EBFF" cx="35" cy="24" r="5"></circle>
<circle id="Oval-Copy" fill="#FD7A8C" cx="51" cy="24" r="5"></circle>
<circle id="Oval-Copy-2" fill="#FEE895" cx="67" cy="24" r="5"></circle>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
assets/png/billing-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
assets/png/btn-app-store.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
assets/png/btn-google-play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
assets/png/client-management-img-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
assets/png/dotted.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/png/email.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/png/features-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 MiB

BIN
assets/png/financial-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
assets/png/herobox-landing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
assets/png/laptop-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
assets/png/laptop-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
assets/png/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
assets/png/man1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
assets/png/man2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
assets/png/man3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
assets/png/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
assets/png/megamenu-img-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 KiB

BIN
assets/png/megamenu-img-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB

BIN
assets/png/news-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
assets/png/news-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
assets/png/news-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
assets/png/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
assets/png/practicemaster-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
assets/svg/billing.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.9999 2.13562V0.854864C30.9999 0.383492 30.5925 0 30.0917 0H0.908201C0.407419 0 0 0.383492 0 0.854864V2.13562H30.9999Z" fill="#3A3DBE"/>
<path d="M0 3.84521H30.9999V5.98071H0V3.84521Z" fill="#3A3DBE"/>
<path d="M25.8851 7.69055H5.11481C4.7195 10.1688 2.63288 12.1328 0 12.5049V18.6028C2.63288 18.9749 4.7195 20.939 5.11487 23.4172H25.8851C26.2804 20.939 28.3671 18.9749 31 18.6028V12.5049C28.3671 12.1328 26.2804 10.1688 25.8851 7.69055ZM8.01233 15.5115C7.99036 15.0498 8.44549 14.6567 8.92054 14.6567C9.42967 14.6567 9.8067 15.0484 9.82874 15.5115C9.85071 15.9732 9.39559 16.3664 8.92054 16.3664C8.4114 16.3664 8.03437 15.9747 8.01233 15.5115ZM18.5922 17.7426C18.4135 18.7433 17.6312 19.7571 16.4082 20.1181V20.5331C16.4082 21.0052 16.0015 21.388 15.5 21.388C14.9984 21.388 14.5918 21.0052 14.5918 20.5331V20.2246C13.9727 20.162 13.4648 19.9901 12.7756 19.5659C12.3558 19.3074 12.2382 18.7776 12.5128 18.3825C12.7874 17.9874 13.3502 17.8767 13.77 18.1351C14.3901 18.5169 14.6241 18.552 15.4417 18.5468C16.243 18.5417 16.708 17.9795 16.8009 17.4593C16.8462 17.2057 16.8635 16.5865 16.0486 16.3154C14.7535 15.8844 14.0031 15.5447 13.4584 15.1426C12.7863 14.6464 12.4786 13.7896 12.6554 12.9067C12.8471 11.9492 13.5566 11.1869 14.5071 10.9174C14.5355 10.9093 14.5635 10.9025 14.5917 10.8951V10.5748C14.5917 10.1027 14.9983 9.71991 15.4999 9.71991C16.0015 9.71991 16.4081 10.1027 16.4081 10.5748V10.8667C17.0056 11.0089 17.423 11.2667 17.5949 11.3877C17.9967 11.6703 18.0789 12.206 17.7786 12.5842C17.4783 12.9623 16.9093 13.0398 16.5074 12.757C16.3182 12.6239 15.7956 12.3376 15.031 12.5544C14.5817 12.6819 14.4653 13.0986 14.4403 13.2233C14.3912 13.4689 14.4471 13.6996 14.5794 13.7973C15.0485 14.1436 15.8913 14.4497 16.654 14.7034C18.0547 15.1694 18.8337 16.3908 18.5922 17.7426ZM23.8357 16.3664C23.3265 16.3664 22.9495 15.9747 22.9275 15.5115C22.9055 15.0498 23.3606 14.6567 23.8357 14.6567C24.3448 14.6567 24.7218 15.0484 24.7439 15.5115C24.7659 15.9732 24.3107 16.3664 23.8357 16.3664Z" fill="#3A3DBE"/>
<path d="M3.2691 7.69055H0V10.7678C1.62925 10.4346 2.91515 9.2242 3.2691 7.69055Z" fill="#3A3DBE"/>
<path d="M31.0001 7.69055H27.731C28.0849 9.2242 29.3708 10.4346 31.0001 10.7678V7.69055Z" fill="#3A3DBE"/>
<path d="M0 20.3401V22.5624C0 23.0337 0.40742 23.4172 0.908202 23.4172H3.2691C2.91515 21.8837 1.62925 20.6733 0 20.3401Z" fill="#3A3DBE"/>
<path d="M31.0001 20.3401C29.3708 20.6733 28.0849 21.8836 27.731 23.4172H30.0919C30.5926 23.4172 31.0001 23.0337 31.0001 22.5624V20.3401Z" fill="#3A3DBE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

3
assets/svg/calender.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 2.24525L17.9899 2.24527C17.1641 2.24527 16.4948 1.5759 16.4948 0.750176V0.750176C16.4948 0.335704 16.1591 0 15.7448 0C15.3304 0 14.9948 0.335704 14.9948 0.750176V0.750176C14.9948 1.57569 14.3255 2.2449 13.5 2.2449H10.4895C9.66396 2.2449 8.99475 1.57569 8.99475 0.750176V0.750176C8.99475 0.335704 8.65913 0 8.24475 0C7.83038 0 7.49475 0.335704 7.49475 0.750176V0.750176C7.49475 1.57569 6.82554 2.2449 6.00002 2.2449H1.5C0.671625 2.2449 0 2.91668 0 3.74525V22.4996C0 23.3282 0.671625 24 1.5 24H22.5C23.3284 24 24 23.3282 24 22.4996V3.74525C24 2.91704 23.3284 2.24525 22.5 2.24525ZM22.5 20.9996C22.5 21.8281 21.8284 22.4996 21 22.4996H3C2.17157 22.4996 1.5 21.8281 1.5 20.9996V5.24525C1.5 4.41683 2.17157 3.74525 3 3.74525H6.73895C7.15637 3.74525 7.49475 4.08364 7.49475 4.50105V4.50105C7.49475 4.9155 7.83038 5.25123 8.24475 5.25123C8.65913 5.25123 8.99475 4.9155 8.99475 4.50105V4.50105C8.99475 4.08384 9.33297 3.74563 9.75018 3.74563H14.2389C14.6564 3.74563 14.9948 4.08401 14.9948 4.50143V4.50143C14.9948 4.9159 15.3304 5.25161 15.7448 5.25161C16.1591 5.25161 16.4948 4.9159 16.4948 4.50143V4.50143C16.4948 4.08401 16.8331 3.74563 17.2506 3.74563H21C21.8284 3.74563 22.5 4.4172 22.5 5.24563V20.9996ZM17.25 11.9975H18.75C19.164 11.9975 19.5 11.6615 19.5 11.2474V9.74701C19.5 9.33291 19.164 8.99683 18.75 8.99683H17.25C16.836 8.99683 16.5 9.33291 16.5 9.74701V11.2474C16.5 11.6615 16.836 11.9975 17.25 11.9975ZM17.25 17.9986H18.75C19.164 17.9986 19.5 17.6629 19.5 17.2484V15.748C19.5 15.3339 19.164 14.9979 18.75 14.9979H17.25C16.836 14.9979 16.5 15.3339 16.5 15.748V17.2484C16.5 17.6632 16.836 17.9986 17.25 17.9986ZM12.75 14.9979H11.25C10.836 14.9979 10.5 15.3339 10.5 15.748V17.2484C10.5 17.6629 10.836 17.9986 11.25 17.9986H12.75C13.164 17.9986 13.5 17.6629 13.5 17.2484V15.748C13.5 15.3343 13.164 14.9979 12.75 14.9979ZM12.75 8.99683H11.25C10.836 8.99683 10.5 9.33291 10.5 9.74701V11.2474C10.5 11.6615 10.836 11.9975 11.25 11.9975H12.75C13.164 11.9975 13.5 11.6615 13.5 11.2474V9.74701C13.5 9.33254 13.164 8.99683 12.75 8.99683ZM6.75 8.99683H5.25C4.836 8.99683 4.5 9.33291 4.5 9.74701V11.2474C4.5 11.6615 4.836 11.9975 5.25 11.9975H6.75C7.164 11.9975 7.5 11.6615 7.5 11.2474V9.74701C7.5 9.33254 7.164 8.99683 6.75 8.99683ZM6.75 14.9979H5.25C4.836 14.9979 4.5 15.3339 4.5 15.748V17.2484C4.5 17.6629 4.836 17.9986 5.25 17.9986H6.75C7.164 17.9986 7.5 17.6629 7.5 17.2484V15.748C7.5 15.3343 7.164 14.9979 6.75 14.9979Z" fill="#3A3DBE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

Some files were not shown because too many files have changed in this diff Show More