❄️ Puppertino Siberian

CODE_OF_CONDUCT.md

@@ -1,84 +1,69 @@
+
 ![Puppertino Stars](https://img.shields.io/github/stars/codedgar/puppertino?style=for-the-badge) ![Puppertino's contributors](https://img.shields.io/github/contributors/codedgar/puppertino?style=for-the-badge)   [![Follow Puppertino_css](https://img.shields.io/twitter/follow/Puppertino_css?style=for-the-badge)](https://twitter.com/Puppertino_css) [![Follow Codedgar_dev](https://img.shields.io/twitter/follow/codedgar_dev?style=for-the-badge)](https://twitter.com/codedgar_dev)
 ![Puppertino Logo](https://i.imgur.com/r81X3Yj.png)
 
-# Welcome to Puppertino V 1.0!
+# Welcome to Puppertino Siberian by Codedgar
+
 
-Hi! Welcome to **Puppertino!** Puppertino is a framework meant to mimic the look
-of **macOS** and follow the **human guidelines**. Puppertino is a Framework
-created to be lightweight, modular, and cool looking!
+Welcome to **Puppertino**! This framework brings the macOS look and feel to your web applications, adhering closely to Apple’s Human Interface Guidelines. Designed to be lightweight and modular, Puppertino provides a seamless user experience with a focus on performance and style.
 
-> **NOTE**: Puppertino does not include any responsive system, you must use
-> Bootstrap, Flexbox Grid, Skeleton, or some other responsive Framework along
-> with it.
+## Key Framework Features
+- **Lightweight**: Puppertino is built with performance in mind. By avoiding unnecessary additions or dependencies, Puppertino ensures your website or app remains fast and responsive. You get the macOS-inspired design without compromising on speed and efficiency.
+- **Modular**: Flexibility is at the heart of Puppertino. Whether you need the entire framework or just specific components, you can pick and choose what fits your project. This modular approach allows you to minimize the size of your website, ensuring that you only include what’s necessary.
+- **Design-Focused**: Puppertino is not just about functionality—it’s about looking cool too! Inspired by macOS, the framework prioritizes a sleek and modern design, with room for creative enhancements beyond macOS guidelines when needed.
 
-## In a nutshell
+## Table of contents
 
-- [Components](#current-components)
-- [Usage](#usage)
-- [Documentation](https://codedgar.github.io/Puppertino/examples/)
+- [Get Started](#get-started)
+- [Current Components](#current-components)
+- [Examples and templates](https://codedgar.github.io/Puppertino/examples/)
 - [About the creator](#about-the-creator)
 
-## Lightweight
+## Get Started
 
-I'm focused on making Puppertino as Lightweight as possible, I want it to become
-a big framework, but not at the cost of weight and performance. So to keep it
-small, I won't be adding AnimateCSS, or any other framework (No matter how cool
-it is) on top of Puppertino. And to make it more lightweight, I have implemented
-my second point.
+To integrate Puppertino into your project, simply include the full.css file in your HTML head tag:
 
-## Modular
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/full.css">
+```
+### Customize your setup
+If you only need specific components, you can import them individually to reduce file size. Here’s how you can include only the buttons:
 
-I'm developing Puppertino to be used with only the components you need or to be
-used as a complete framework. Choosing the components that you need may help you
-throw some extra KB that you don't need in your website or app.
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/buttons.css">
+```
 
-## Cool looking
+You can also find the full list of individual components and their CDN links on the [Components page](https://codedgar.github.io/Puppertino/examples/).
 
-This is the most important part of Puppertino! This also means that I can go out
-of the main components of macOS and human guidelines in the future to add other
-things that I think maybe necessary or great to have in the framework. In any
-case, coolness, it's my main focus with Puppertino.
 
-# Current Components
+## Current Components
 
-Puppertino currently includes:
+Puppertino currently includes the following components:
 
-- Buttons
-- Switches
-- Actions
-- Form Elements (Inputs, select, form validation)
+- Buttons (Push, Icon, Action)
 - Modals
-- Icons
-- Font Layout
+- Forms and Inputs
+- Layout
+- Official Apple Colors
 - Segmented Controls
+- Shadows & Blur
 - Tabs
-- Shadows
-- NEW! Dark Mode
-- Color Palette
-
-Yeah... That's all. But no worries! I'm working on adding new components every day!
-
-# Usage
+- Navigation Bars
+- Dark Mode Manager
 
-You can use Puppertino in 3 ways (for now):
+For a full list and detailed usage instructions, check out the [Components page](https://codedgar.github.io/Puppertino/examples/).
 
-1. You can download the `newfull.css` file located in the `/dist/` directory.
-   Download this if you are sure that you need at least half of the elements
-   that are present in Puppertino.
-2. Download every component CSS that you need from the `/dist/` folder. Such as
-   buttons or form elements or other components. While it maybe tedious to
-   download  them one by one, this can help you to save some KBs in your website. :)
-3. ~~You can now download the SCSS version of Puppertino, also located in `/dist/`.~~ **(Deprecated)**
+If you can't find a component that you want, you can always [create an issue](https://github.com/codedgar/Puppertino/issues/new/choose) to vote for the new components.
 
-# Docs
+## Examples and templates
 
 Find all the documentation, examples, and list of components and how to use them
 at https://codedgar.github.io/Puppertino/.
 
 ## License
 
-Puppertino is free to use and abuse under the [open-source MIT license](https://github.com/codedgar/Puppertino/blob/master/LICENSE).
+Puppertino is open-source and available under the [open-source MIT license](https://github.com/codedgar/Puppertino/blob/master/LICENSE), allowing you to freely use and modify the framework for your projects.
 
 ## About the creator
 
-I'm [Edgar Pérez](https://twitter.com/codedgar_dev). And I make cool websites :)
+Puppertino was developed by [Edgar Pérez](https://codedgar.com/), a web developer passionate about creating clean, elegant web experiences. As the framework continues to evolve, more features and components will be added—so stay tuned for regular updates!

dist/css/buttons.css

@@ -12,7 +12,7 @@
 .p-btn {
   background: var(--p-btn-def-bg);
   border: 1px solid var(--p-btn-border);
-  border-radius: 10px; /* Match the secondary button's roundness */
+  border-radius: 10px;
   color: var(--p-btn-def-col);
   display: inline-block;
   font-family: -apple-system, "Inter", sans-serif;
@@ -63,7 +63,7 @@
 }
 
 .p-prim-col {
-  position: relative; /* To enable ::before element positioning */
+  position: relative; 
   background: #007AFF;
   border: none;
   box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.41), 0px 2px 3px -2px rgba(0, 0, 0, 0.3);
@@ -155,4 +155,4 @@
   border-color: currentColor;
   border-style: dashed;
   box-shadow: none;
-}
+} 

dist/css/cards.css

@@ -1,17 +1,21 @@
 :root{
   --p-color-card: #1a1a1a;
   --p-bg-card: #fff;
-  --p-bd-card: #c5c5c5;
+  --p-bd-card: #c5c5c55e;
 }
 .p-card {
   background: var(--p-bg-card);
   border: 1px solid var(--p-bd-card);
   color: var(--p-color-card);
   display: block;
-  margin-top: 30px;
+  margin: 15px;
+  margin-left:7.5px;
+  margin-right:7.5px;
   text-decoration: none;
   border-radius: 25px;
   padding: 20px 0px;
+  transition: .3s ease;
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
 }
 .p-card-image > img {
   border-bottom: 3px solid var(--accent-article);
@@ -37,11 +41,11 @@
 .p-card-title {
   font-size: 2rem;
   margin-bottom: 15px;
-  margin-top: 10px;
+  margin-top: 15px;
 }
 .p-card-content {
   padding: 15px;
-  padding-top: 5px;
+  padding-top: 15px;
 }
 .p-card-text {
   font-size: 17px;

dist/css/color_palette.css

@@ -86,6 +86,248 @@
 --p-dark-500: #333;
 --p-dark-700: #1a1a1a;
 --p-dark-900: #000;
+
+
+--p-apple-red: rgb(255, 59 , 48);
+--p-apple-red-dark: rgb(255, 69 , 58);
+--p-apple-orange: rgb(255,149,0);
+--p-apple-orange-dark: rgb(255,159,10);
+--p-apple-yellow: rgb(255,204,0);
+--p-apple-yellow-dark: rgb(255,214,10);
+--p-apple-green: rgb(40,205,65);
+--p-apple-green-dark: rgb(40,215,75);
+--p-apple-mint: rgb(0,199,190);
+--p-apple-mint-dark: rgb(102,212,207);
+--p-apple-teal: rgb(89, 173, 196);
+--p-apple-teal-dark: rgb(106, 196, 220);
+--p-apple-cyan: rgb(85,190,240);
+--p-apple-cyan-dark: rgb(90,200,245);
+--p-apple-blue: rgb(0, 122, 255);
+--p-apple-blue-dark: rgb(10, 132, 255);
+--p-apple-indigo: rgb(88, 86, 214);
+--p-apple-indigo-dark: rgb(94, 92, 230);
+--p-apple-purple: rgb(175, 82, 222);
+--p-apple-purple-dark: rgb(191, 90, 242);
+--p-apple-pink: rgb(255, 45, 85);
+--p-apple-pink-dark: rgb(255, 55, 95);
+--p-apple-brown: rgb(162, 132, 94);
+--p-apple-brown-dark: rgb(172, 142, 104);
+--p-apple-gray: rgb(142, 142, 147);
+--p-apple-gray-dark: rgb(152, 152, 157);
+
+}
+
+
+/*
+APPLE COLORS
+*/
+
+.p-apple-red{
+  background: rgb(255, 59 , 48);
+}
+
+.p-apple-red-dark{
+  background: rgb(255, 69 , 58);
+}
+
+.p-apple-orange{
+  background: rgb(255,149,0);
+}
+
+.p-apple-orange-dark{
+  background: rgb(255,159,10);
+}
+
+.p-apple-yellow{
+  background: rgb(255,204,0);
+}
+
+.p-apple-yellow-dark{
+  background: rgb(255,214,10);
+}
+
+.p-apple-green{
+  background: rgb(40,205,65);
+}
+
+.p-apple-green-dark{
+  background: rgb(40,215,75);
+}
+
+.p-apple-mint{
+  background: rgb(0,199,190);
+}
+
+.p-apple-mint-dark{
+  background: rgb(102,212,207);
+}
+
+.p-apple-teal{
+  background: rgb(89, 173, 196);
+}
+
+.p-apple-teal-dark{
+  background: rgb(106, 196, 220);
+}
+
+.p-apple-cyan{
+  background: rgb(85,190,240);
+}
+
+.p-apple-cyan-dark{
+  background: rgb(90,200,245);
+}
+
+.p-apple-blue{
+  background: rgb(0, 122, 255);
+}
+
+.p-apple-blue-dark{
+  background: rgb(10, 132, 255);
+}
+
+.p-apple-indigo{
+  background: rgb(88, 86, 214);
+}
+
+.p-apple-indigo-dark{
+  background: rgb(94, 92, 230);
+}
+
+.p-apple-purple{
+  background: rgb(175, 82, 222);
+}
+
+.p-apple-purple-dark{
+  background: rgb(191, 90, 242);
+}
+
+.p-apple-pink{
+  background: rgb(255, 45, 85);
+}
+
+.p-apple-pink-dark{
+  background: rgb(255, 55, 95);
+}
+
+.p-apple-brown{
+  background: rgb(162, 132, 94);
+}
+
+.p-apple-brown-dark{
+  background: rgb(172, 142, 104);
+}
+
+.p-apple-gray{
+  background: rgb(142, 142, 147);
+}
+
+.p-apple-gray-dark{
+  background: rgb(152, 152, 157);
+}
+
+.p-apple-red-color{
+  color: rgb(255, 59 , 48);
+}
+
+.p-apple-red-dark-color{
+  color: rgb(255, 69 , 58);
+}
+
+.p-apple-orange-color{
+  color: rgb(255,149,0);
+}
+
+.p-apple-orange-dark-color{
+  color: rgb(255,159,10);
+}
+
+.p-apple-yellow-color{
+  color: rgb(255,204,0);
+}
+
+.p-apple-yellow-dark-color{
+  color: rgb(255,214,10);
+}
+
+.p-apple-green-color{
+  color: rgb(40,205,65);
+}
+
+.p-apple-green-dark-color{
+  color: rgb(40,215,75);
+}
+
+.p-apple-mint-color{
+  color: rgb(0,199,190);
+}
+
+.p-apple-mint-dark-color{
+  color: rgb(102,212,207);
+}
+
+.p-apple-teal-color{
+  color: rgb(89, 173, 196);
+}
+
+.p-apple-teal-dark-color{
+  color: rgb(106, 196, 220);
+}
+
+.p-apple-cyan-color{
+  color: rgb(85,190,240);
+}
+
+.p-apple-cyan-dark-color{
+  color: rgb(90,200,245);
+}
+
+.p-apple-blue-color{
+  color: rgb(0, 122, 255);
+}
+
+.p-apple-blue-dark-color{
+  color: rgb(10, 132, 255);
+}
+
+.p-apple-indigo-color{
+  color: rgb(88, 86, 214);
+}
+
+.p-apple-indigo-dark-color{
+  color: rgb(94, 92, 230);
+}
+
+.p-apple-purple-color{
+  color: rgb(175, 82, 222);
+}
+
+.p-apple-purple-dark-color{
+  color: rgb(191, 90, 242);
+}
+
+.p-apple-pink-color{
+  color: rgb(255, 45, 85);
+}
+
+.p-apple-pink-dark-color{
+  color: rgb(255, 55, 95);
+}
+
+.p-apple-brown-color{
+  color: rgb(162, 132, 94);
+}
+
+.p-apple-brown-dark-color{
+  color: rgb(172, 142, 104);
+}
+
+.p-apple-gray-color{
+  color: rgb(142, 142, 147);
+}
+
+.p-apple-gray-dark-color{
+  color: rgb(152, 152, 157);
 }
 
 .p-strawberry {

dist/css/dark_mode.css

@@ -1,4 +1,4 @@
-.p-dark-mode {
+.p-dark-mode, [data-p-theme=darkmode] {
 
   --p-btn-border: #454545;
   --p-btn-def-bg: #262525;

dist/css/forms.css

@@ -3,6 +3,11 @@
   --primary-col-ac:#0f75f5;
   --bg-color-input:#fff;
 
+  --p-checkbox-gradient: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
+  --p-checkbox-border: rgba(0, 0, 0, 0.2);
+  --p-checkbox-border-active: rgba(0, 0, 0, 0.12);
+  --p-checkbox-bg: transparent;
+  --p-checkbox-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 2px rgba(0, 0, 0, 0.05);
 
   --p-input-bg:#fff;
   --p-input-color:#000;
@@ -16,6 +21,15 @@
   --valid-color:#94d63c;
 }
 
+.p-dark-mode{
+  --p-checkbox-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.13) 100%);
+  --p-checkbox-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 0.5px 0px rgba(255, 255, 255, 0.15);
+  --p-checkbox-border: rgba(0, 0, 0, 0);
+
+  --p-checkbox-gradient:  linear-gradient(180deg, #3168DD 0%, #2C5FC8 100%);
+  --p-checkbox-border-active: rgba(0, 0, 0, 0);
+}
+
 .p-form-select {
   border-radius: 5px;
   display: inline-block;
@@ -28,30 +42,20 @@
   outline: 2px solid #64baff;
 }
 
-.p-form-select::before {
-  border-color: #fff transparent transparent;
-  border-style: solid;
-  border-width: 5px;
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 5px;
-  top: calc(50% - 3px);
-  z-index: 3;
-}
-
 .p-form-select::after {
-  background: linear-gradient(to bottom, #4fc5fa 0%, #0f75f5 100%);
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
+  background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M.288 4.117 3.16 1.18c.168-.168.336-.246.54-.246a.731.731 0 0 1 .538.246L7.108 4.12c.125.121.184.27.184.45 0 .359-.293.656-.648.656a.655.655 0 0 1-.48-.211L3.701 2.465l-2.469 2.55a.664.664 0 0 1-.48.212.656.656 0 0 1-.465-1.11Zm3.41 7.324a.73.73 0 0 0 .54-.246l2.87-2.941a.601.601 0 0 0 .184-.45.656.656 0 0 0-.648-.656.677.677 0 0 0-.48.211L3.701 9.91 1.233 7.36a.68.68 0 0 0-.48-.212.656.656 0 0 0-.465 1.11l2.871 2.937c.172.168.336.246.54.246Z' fill='white' style='mix-blend-mode:luminosity'/%3E%3C/svg%3E"), #017AFF;
+  background-size: 100% 75%;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
   bottom: 0;
   content: "";
   display: block;
-  height: 100%;
+  height: 80%;
   pointer-events: none;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 3%;
+  top: 10%;
   width: 20px;
 }
 
@@ -63,7 +67,7 @@
   font-size: 14px;
   margin: 0;
   outline: none;
-  padding: 5px 30px 5px 10px;
+  padding: 5px 35px 5px 10px;
   position: relative;
   width: 100%;
   color: var(--p-input-color);
@@ -218,12 +222,11 @@ textarea.p-form-text {
   height: 20px;
   margin-right: 5px;
   position: relative;
-  transition: background 0.2s;
+  transition: 0.2s;
   width: 20px;
 }
 
-.p-form-radio-cont:hover > input + span,
-.p-form-checkbox-cont:hover > input + span {
+.p-form-radio-cont:hover > input + span{
   background: #f9f9f9;
 }
 
@@ -260,44 +263,37 @@ textarea.p-form-text {
 
 .p-form-checkbox-cont > input + span {
   border-radius: 5px;
+  box-shadow: var(--p-checkbox-shadow);
+  border: 0.5px solid var(--p-checkbox-border);
+  background: var(--p-checkbox-bg)
 }
 
 .p-form-checkbox-cont > input:checked + span {
-  background: #0f75f5;
+  background: var(--p-checkbox-gradient);
+  border: 0.5px solid var(--p-checkbox-border-active);
+  box-shadow: none;
 }
 
-.p-form-checkbox-cont > input + span::before,
-.p-form-checkbox-cont > input + span::after {
-  background: #fff;
-  border-radius: 20px;
+.p-form-checkbox-cont > input + span::before{
   content: "";
   display: block;
-  height: 8%;
+  height: 100%;
+  width: 100%;
   position: absolute;
+  left: 0%;
+  top: 0%;
   opacity: 0;
   transition: opacity 0.2s;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='m2 5 2.25 2.5L8.5 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='.75' y='.25' width='9' height='9' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='.5'/%3E%3CfeGaussianBlur stdDeviation='.25'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_201_11690'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_201_11690' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+  background-size: 70%;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-.p-form-checkbox-cont > input:checked + span::before,
-.p-form-checkbox-cont > input:checked + span::after {
+.p-form-checkbox-cont > input:checked + span::before{
   opacity: 1;
 }
 
-.p-form-checkbox-cont > input + span::before {
-  right: 30%;
-  top: 15%;
-  transform: rotate(-65deg);
-  transform-origin: top right;
-  width: 70%;
-}
-
-.p-form-checkbox-cont > input + span::after {
-  left: 30%;
-  top: 43%;
-  transform: rotate(59deg);
-  transform-origin: top left;
-  width: 40%;
-}
 
 .p-form-checkbox-cont > input[disabled] + span,
 .p-form-radio-cont > input[disabled] ~ span
@@ -464,93 +460,4 @@ textarea.p-form-text {
 .p-form-radio-cont[disabled]{
   filter: grayscale(1) opacity(.3);
   pointer-events: none;
-}
-
-
-
-/* LEGACY (WILL BE REMOVED ON FUTURE UPDATES) */
-input[type=range].p-form-range {
-  width: 100%;
-  margin: 11.5px 0;
-  background-color: transparent;
-  -webkit-appearance: none;
-}
-input[type=range].p-form-range:focus {
-  outline: none;
-}
-input[type=range].p-form-range::-webkit-slider-runnable-track {
-  background: var(--p-input-color);
-  border: 0;
-  width: 100%;
-  height: 2px;
-  cursor: pointer;
-}
-input[type=range].p-form-range::-webkit-slider-thumb {
-  margin-top: -11.5px;
-  width: 25px;
-  height: 25px;
-  background: #ffffff;
-  border: 1px solid rgba(115, 115, 115, 0.6);
-  border-radius: 30px;
-  cursor: pointer;
-  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.15);
-  -webkit-appearance: none;
-}
-input[type=range].p-form-range:focus::-webkit-slider-runnable-track {
-  background: #d7d7d7;
-}
-input[type=range].p-form-range::-moz-range-track {
-  background: var(--p-input-color);
-  border: 0;
-  width: 100%;
-  height: 2px;
-  cursor: pointer;
-}
-input[type=range].p-form-range::-moz-range-thumb {
-  width: 25px;
-  height: 25px;
-  background: #ffffff;
-  border: 1px solid rgba(115, 115, 115, 0.6);
-  border-radius: 30px;
-  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-}
-input[type=range].p-form-range::-ms-track {
-  background: transparent;
-  border-color: transparent;
-  border-width: 26.5px 0;
-  color: transparent;
-  width: 100%;
-  height: 2px;
-  cursor: pointer;
-}
-input[type=range].p-form-range::-ms-fill-lower {
-  background: #bdbdbd;
-  border: 0;
-}
-input[type=range].p-form-range::-ms-fill-upper {
-  background: var(--p-input-color);
-  border: 0;
-}
-input[type=range].p-form-range::-ms-thumb {
-  width: 25px;
-  height: 25px;
-  background: #ffffff;
-  border: 1px solid rgba(115, 115, 115, 0.6);
-  border-radius: 30px;
-  cursor: pointer;
-  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.15);
-  margin-top: 0px;
-}
-input[type=range].p-form-range:focus::-ms-fill-lower {
-  background: var(--p-input-color);
-}
-input[type=range].p-form-range:focus::-ms-fill-upper {
-  background: #d7d7d7;
-}
-@supports (-ms-ime-align:auto) {
-  input[type=range].p-form-range {
-    margin: 0;
-  }
-}
-
+}

dist/css/newfull.css

@@ -1,6 +1,6 @@
-@import url('layout.css');
 @import url('actions.css');
 @import url('buttons.css');
+@import url('layout.css');
 @import url('cards.css');
 @import url('color_palette.css');
 @import url('forms.css');

dist/css/shadows.css

@@ -1,17 +1,17 @@
 .p-shadow-1 {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.5px 1px 0.5px rgba(0, 0, 0, 0.1);
 }
 
 .p-shadow-2 {
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .p-shadow-3 {
-  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .p-shadow-4 {
-  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
 }
 
 .p-to-shadow-4,
@@ -23,17 +23,37 @@
 }
 
 .p-to-shadow-1:hover {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.5px 1px 0.5px rgba(0, 0, 0, 0.1);
 }
 
 .p-to-shadow-2:hover {
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .p-to-shadow-3:hover {
-  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .p-to-shadow-4:hover {
-  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
 }
+
+.p-blur-1{
+  backdrop-filter: saturate(180%) blur(20px);
+  background: rgba(0,0,0,.1);
+}
+
+.p-blur-2{
+  backdrop-filter: saturate(200%) blur(30px);
+  background: rgba(0,0,0,.1);
+}
+
+.p-blur-3{
+  backdrop-filter: saturate(200%) blur(45px);
+  background: rgba(0,0,0,.1);
+}
+
+.p-blur-4{
+  backdrop-filter: saturate(200%) blur(81px);
+  background: rgba(0,0,0,.1);
+}

docs/examples/actions.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/examples/buttons.html

@@ -2,6 +2,8 @@
 <html lang="en">
   <head>
     <title>Buttons - Puppertino Framework</title>
+    <link rel="stylesheet" href="../index-assets/bootstrap-utilities.css">
+    <link rel="stylesheet" href="../index-assets/bootstrap-grid.min.css">
     <link
       href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
@@ -52,7 +54,7 @@
         <h3>Alert</h3>
         <p>
           Some of the components/functionalities provided in this version of the framework will be changing moving forward. <br>
-          To keep yourself updated, and understand how to migrate to newer versions, follow @puppertino_theme</p>
+          To keep yourself updated, and understand how to migrate to newer versions, follow <a href="https://twitter.com/codedgar_dev" target="_blank">@codedgar_dev</a></p>
       </div>
     </div>
     <h1>Buttons</h1>
@@ -66,30 +68,32 @@
         <p>
           Push buttons come in several variations to suit different scenarios. They can be implemented as <code class="code">&#60;a></code> or <code class="code">&#60;button></code>elements, depending on the context. For cases where buttons need to be disabled, the disabled attribute can be applied to prevent user interaction. This ensures that the buttons are visually and functionally consistent with your design while maintaining clear communication with users about available actions.
         </p>
-
-        <div class="d-flex align-baseline">
-          <button class="p-btn">Default</button>
-
-          <button class="p-btn p-btn-destructive">Destructive</button>
-
-          <button class="p-btn" disabled="">Disabled</button>
-
-          <a href="#" class="p-btn p-prim-col">Primary</a>
-  
-          <a href="#" class="p-btn p-btn-mob">Btn mob</a>
-  
-          <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
-  
-          
-          <a href="#" class="p-btn p-btn-outline">Outline</a>
-  
-          <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
-  
-          <a href="#" class="p-btn p-btn-more">Custom action</a>
-        </div>
-
-
-
+        <div class="row">
+          <div class="col-md-6 mt-lg-5">
+            <div class="d-flex align-baseline mt-5">
+              <button class="p-btn">Default</button>
+
+              <button class="p-btn p-btn-destructive">Destructive</button>
+
+              <button class="p-btn" disabled="">Disabled</button>
+
+              <a href="#" class="p-btn p-prim-col">Primary</a>
+      
+              <a href="#" class="p-btn p-btn-mob">Btn mob</a>
+      
+              <a href="#" class="p-btn p-btn-round p-orange p-white-color p-white-color">Rounded</a>
+      
+              
+              <a href="#" class="p-btn p-btn-outline">Outline</a>
+      
+              <a href="#" class="p-btn p-btn-outline-dash">Outline dashed</a>
+      
+              <a href="#" class="p-btn p-btn-more">Custom action</a>
+            </div>
+            </div>
+
+
+            <div class="col-md-6 mt-lg-5">
         <p>Usage:</p>
         <div class="code">
           <pre>
@@ -99,17 +103,22 @@
 &#60;button class="p-btn p-btn-destructive">Destructive&#60;/button>
 
 &#60;a href="#" class="p-btn p-btn-disabled">Disabled&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-prim-col">Primary&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-mob">Btn mob&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-round">Rounded&#60;/a>
-
+    
 &#60;a href="#" class="p-btn p-btn-more">Custom action&#60;/a>
-				</code>
-			</pre>
+            </code>
+          </pre>
+            </div>
+          </div>
         </div>
+
+
+
       </div>
 
       <div class="talk-about-it">
@@ -132,12 +141,14 @@
 &#60;button class="p-btn p-prim-col p-grape p-white-color p-white-color">Primary Purple&#60;/button>
 
 &#60;button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success&#60;/button>
-
+    
 &#60;button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger&#60;/button>
-
+    
 &#60;button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error&#60;/button>
-        </code>
-      </pre>
+            </code>
+          </pre>
+            </div>
+          </div>
         </div>
 
       </div>
@@ -147,24 +158,31 @@
         <p>
           Button sizing was one of the most requested features during Puppertino's alpha phase. In response to that feedback, Puppertino now offers four distinct button sizes, providing flexibility to fit various design contexts:
         </p>
-        <a href="#" class="p-btn p-btn-mob p-btn-sm">Small size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-md">Medium size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-lg">Large size</a>
-        <a href="#" class="p-btn p-btn-mob p-btn-lg p-btn-block">Block size</a>
-
-                <p>Usage:</p>
-        <div class="code">
-          <pre>
-        <code class="html">
-&#60;a href="#" class="p-btn p-btn-sm">Small size&#60;/a>
-
-&#60;a href="#" class="p-btn p-btn-md">Medium size&#60;/a>
+        <div class="row">
+          <div class="col-md-6 mt-lg-5">
+            <a href="#" class="p-btn p-btn-mob p-btn-sm">Small size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-md">Medium size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-lg">Large size</a>
+            <a href="#" class="p-btn p-btn-mob p-btn-block">Block size</a>
+          </div>
+        <div class="col-md-6">
+          <p>Usage:</p>
+          <div class="code">
+            <pre>
+          <code class="html">
+  &#60;a href="#" class="p-btn p-btn-sm">Small size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-md">Medium size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
+  
+  &#60;a href="#" class="p-btn p-btn-block">Block size&#60;/a>
+          </code>
+        </pre>
+        </div>
+      </div>
 
-&#60;a href="#" class="p-btn p-btn-lg">Large size&#60;/a>
 
-&#60;a href="#" class="p-btn p-btn-lg p-btn-block">Block size&#60;/a>
-        </code>
-      </pre>
         </div>
 
       </div>
@@ -181,19 +199,19 @@
         <a href="#" class="p-btn-icon p-lime-color">🐶</a>
 
         <a href="#" class="p-btn-icon p-bubblegum-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-strawberry-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-orange p-silver-100-color p-btn-icon-no-border">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
         </a>
 
         <a href="#" class="p-btn-icon p-mint p-silver-100-color">
-          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
+          <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
         </a>
 
         <p>Usage:</p>

docs/examples/color_palette.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -73,6 +73,129 @@
         (Not recommended if you are just going to use this component).
       </p>
 
+      <div class="talk-about-it">
+        <h2>Official Apple Colors</h2>
+
+        <div class="row pad_15_row center_row">
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-red">
+              <h2 class="col-w">Apple Red</h2>
+            </div>
+            <div class="color_base h-50 p-apple-red-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-orange">
+              <h2 class="col-w">Apple Orange</h2>
+            </div>
+            <div class="color_base h-50 p-apple-orange-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-yellow">
+              <h2 class="col-w">Apple Yellow</h2>
+            </div>
+            <div class="color_base h-50 p-apple-yellow-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-green">
+              <h2 class="col-w">Apple Green</h2>
+            </div>
+            <div class="color_base h-50 p-apple-green-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-mint">
+              <h2 class="col-w">Apple Mint</h2>
+            </div>
+            <div class="color_base h-50 p-apple-mint-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-teal">
+              <h2 class="col-w">Apple Teal</h2>
+            </div>
+            <div class="color_base h-50 p-apple-teal-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-cyan">
+              <h2 class="col-w">Apple Cyan</h2>
+            </div>
+            <div class="color_base h-50 p-apple-cyan-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-blue">
+              <h2 class="col-w">Apple Blue</h2>
+            </div>
+            <div class="color_base h-50 p-apple-blue-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-indigo">
+              <h2 class="col-w">Apple Indigo</h2>
+            </div>
+            <div class="color_base h-50 p-apple-indigo-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-purple">
+              <h2 class="col-w">Apple Purple</h2>
+            </div>
+            <div class="color_base h-50 p-apple-purple-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-pink">
+              <h2 class="col-w">Apple Pink</h2>
+            </div>
+            <div class="color_base h-50 p-apple-pink-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-brown">
+              <h2 class="col-w">Apple Brown</h2>
+            </div>
+            <div class="color_base h-50 p-apple-brown-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="color_base h-50 p-apple-gray">
+              <h2 class="col-w">Apple Gray</h2>
+            </div>
+            <div class="color_base h-50 p-apple-gray-dark">
+              <p class="col-w">Dark</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="talk-about-it">
         <h2>General colors</h2>
         <p>

docs/examples/dark_mode.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -137,10 +137,67 @@
       <div class="talk-about-it" id="modifier">
         <h2>How to use manual.</h2>
         <p>
-          Manual will require you to create your own JS to toggle the class according to your needs (Examples will be added in 1.02). For the moment, if you do not wish to do any JS, we recommend you to do the automatic one. Is simple to use and it only requires one class.
-        </p>
+          <h3>Getting Started</h3>
+          <p><strong>1. Initializing PuppertinoThemeMan</strong></p>
+          <p>To get started, initialize <code class="code">PuppertinoThemeMan</code> by calling the <code class="code">init()</code> function. This setup allows you to customize theme behavior, including auto-detection based on system preferences.</p>
+          <div class="code">
+          <pre>
+<code class="js">
+  puppertinoThemeMan.init({
+    autoDetect: true, // Automatically detect system theme
+    darkThemeClass: 'p-dark-mode' // Your custom dark theme class (optional)
+  });  
+</code>
+        </pre>
       </div>
+      <h3>Options:</h3>
+      <ul>
+        <li>
+          <strong>autoDetect:</strong> Enable automatic detection of the system's preferred color scheme. If set to true, <code class="code">PuppertinoThemeMan</code> will adjust based on the system's light or dark mode.
+        </li>
+        <li>
+          <strong>darkThemeClass:</strong> Define the class name for the dark mode (defaults to <strong>p-dark-mode</strong>). Customize this if you’re using a different class for your dark theme styles.
+        </li>
+      </ul>
+      <h3>
+        2. Toggling Themes
+      </h3>
+      <p>Easily switch between light and dark themes using the <code class="code">toggle()</code> function. This function will apply the correct theme class and store the user’s selection for future visits.</p>
+      <div class="code">
+        <pre>
+<code>
+  puppertinoThemeMan.toggle();
+</code>
+      </pre>
+    </div>
+    <p>When this function is called, PuppertinoThemeMan will:</p>
+    <ul>
+      <li>Add or remove the dark theme class from the document’s body.</li>
+      <li>Save the user’s selection in <code class="code">localStorage</code> to remember the preference across sessions.</li>
+    </ul>
 
+    <h3>3. System Theme Auto-Detection</h3>
+    <p>If enabled in the <code class="code">init()</code> options, PuppertinoThemeMan can automatically switch to light or dark mode based on the user’s system preferences. This ensures a seamless experience aligned with the user’s device settings.</p>
+    <ul>
+      <li>The detection is powered by the prefers-color-scheme media query.</li>
+      <li>PuppertinoThemeMan will listen for changes to this setting and adjust the theme accordingly.</li>
+    </ul>
+    <h3>4. Consistency Across Tabs</h3>
+    <p>PuppertinoThemeMan synchronizes theme changes across multiple tabs. If a user changes their theme in one tab, the new theme will automatically apply to all open tabs in the same browser.
+      <br><br>
+      No extra configuration is needed—this behavior is built into PuppertinoThemeMan, ensuring a unified user experience.
+      </p>
+    <h3>5. Checking the Current Theme</h3>
+    <p>You can check whether the dark theme is active by using the isDarkThemeActive() function. This function returns true if the dark theme is currently applied.</p>
+    <div class="code">
+      <pre>
+<code>
+  const isDarkMode = puppertinoThemeMan.isDarkThemeActive();
+</code>
+    </pre>
+  </div>
+  <p>This allows you to tailor additional features based on the active theme.</p>
+    </div>
       <div class="talk-about-it" id="modifier">
         <h2>Under the hood.</h2>
         <p>

docs/examples/doc.css

@@ -3,6 +3,8 @@
   --color-docs: #1d1d1f;
   --route-bg:#e6e6e6;
   --white-or-black:#fff;
+  --p-talk-bg: var(--p-silver-100);
+  --p-talk-bd: var(--p-silver-300);
 }
 .dark_theme{
   --bg-docs: #0e0e0e;
@@ -10,11 +12,13 @@
   --route-bg:#040404;
   --white-or-black:#212121;
 }
-.p-dark-mode {
+.p-dark-mode,[data-p-theme=darkmode] {
   --bg-docs: #0e0e0e;
   --color-docs: #e6e6e6;
   --route-bg:#040404;
   --white-or-black:#212121;
+  --p-talk-bg: var(--route-bg);
+  --p-talk-bd: #242424;
 }
 html {
   scroll-behavior: smooth;
@@ -37,6 +41,8 @@ li {
 }
 h1 {
   font-size: 50px;
+  font-weight: 600;
+  opacity: .9;
 }
 a {
   color: var(--primary-col-ac);
@@ -51,7 +57,19 @@ a {
   max-width: 100%;
 }
 .talk-about-it {
-  padding: 1% 5%;
+  padding: 1% 2%;
+  border: 1px solid var(--p-talk-bd);
+  border-radius: 25px;
+  background-color: var(--p-talk-bg);
+  max-width: 1450px;
+  display: block;
+  margin: auto;
+  margin-top: 100px;
+}
+.talk-about-it h2{
+  font-weight: 400;
+  font-size: 2.11rem;
+  line-height: 115%;
 }
 .cta {
   height: 50vh;
@@ -181,8 +199,7 @@ pre {
   border-radius: 5px;
   padding: 1px 5px;
   color: #fff;
-  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
-  border: 2px solid #e0e0e0;
+  border: 1px solid #e0e0e0;
 }
 
 .content_smol{
@@ -255,6 +272,39 @@ pre {
   max-width: 200px;
 }
 
+.card_blur{
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+}
+
+.blur_elm{
+  height: 70%;
+  width: 70%;
+  border-radius: 10px;
+  position: absolute;
+  bottom: 1%;
+  left: 1%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blur_img{
+  height: 70%;
+  width: 70%;
+  border-radius: 10px;
+  background: blue;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  background: url('../landing-images/blur_example.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+
 @media (max-width: 768px){
   .sponsored{
     max-width: 100%;
@@ -288,4 +338,10 @@ pre {
 
 .align-baseline{
   align-items: baseline;
+}
+
+.talk-about-it {
+  background-color: transparent;
+  border-color: transparent;
+  margin-top: 30px;
 }

docs/examples/forms.html

@@ -5,7 +5,7 @@
 	<title>Forms - Puppertino Framework</title>
 	<link href="https://rsms.me/inter/inter.css" rel="stylesheet">
     <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/puppertino.css"> -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     
   	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   	<meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -419,26 +419,6 @@
         </div>
       </div>
 
-      <div class="talk-about-it">
-        <h2>Range.</h2>
-        <p>
-          The range slider has been made possible by <a href="https://github.com/danielstern/range.css" target="_blank">range.css</a>! Currently it's a rough implementation, but usage is really simple.
-        </p>
-
-        <input type="range" min="0" max="100" class="p-form-range">
-
-        <p>Usage:</p>
-        <div class="code">
-          <pre>
-        <code class="html">
-
-&#60;input type="range" min="0" max="100" class="p-form-range">
-
-        </code>
-      </pre>
-        </div>
-      </div>
-
       <div class="talk-about-it">
         <h2>Buttons.</h2>
         <p>

docs/examples/getting-started.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -52,7 +52,7 @@
         <h3>Alert</h3>
         <p>
           The way in which Puppertino is installed or works will drastically change in new versions. <br>
-          To keep yourself updated, and understand how to migrate to newer versions, follow @puppertino_theme</p>
+          To keep yourself updated, and understand how to migrate to newer versions, follow <a href="https://twitter.com/codedgar_dev" target="_blank">@codedgar_dev</a></p>
       </div>
     </div>
     <h1>Getting started</h1>

docs/examples/icons.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/index.html

@@ -12,7 +12,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -51,141 +51,115 @@
       </div>
       <div class="col-xs-11 col-md-3">
         <h3>Sponsor the project on GitHub</h3>
-        <p>A new Puppertino version is on the horizon, check <a href="https://github.com/codedgar/Puppertino/tree/big_woof">this branch</a> for more details!</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="getting-started.html" class="p-card p-blueberry p-white-color">
           <div class="p-card-content">
-            <h3 class="p-card-title">Introduction</h3>
-            <p class="p-card-text">How to get up and running with Puppertino.</p>
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M10.146 10.146l-.353.354.707.707.354-.353-.708-.708zM13.5 7.5l.354.354.353-.354-.353-.354-.354.354zm-2.646-3.354l-.354-.353-.707.707.353.354.708-.708zm-6.708 6.708l.354.353.707-.707-.353-.354-.708.708zM1.5 7.5l-.354-.354-.353.354.353.354L1.5 7.5zm3.354-2.646l.353-.354-.707-.707-.354.353.708.708zm6 6l3-3-.708-.708-3 3 .708.708zm3-3.708l-3-3-.708.708 3 3 .708-.708zm-9 3l-3-3-.708.708 3 3 .708-.708zm-3-2.292l3-3-.708-.708-3 3 .708.708zm6.153-6.436l-2 12 .986.164 2-12-.986-.164z" fill="currentColor"></path></svg>
+            <h3 class="p-card-title">Getting Started</h3>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="buttons.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M5.5 10V8.5m0 0v-5a1 1 0 012 0v4h3.353c.91 0 1.647.737 1.647 1.647V10A4.5 4.5 0 018 14.5h-.5a4 4 0 01-4-4 2 2 0 012-2zm3.5-3h2a2.5 2.5 0 000-5H4a2.5 2.5 0 000 5" stroke="currentColor"></path></svg>
             <h3 class="p-card-title">Buttons</h3>
-            <p class="p-card-text">Fancy buttons of macOS and iOS? We have them.</p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="forms.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path clip-rule="evenodd" d="M5.5 11.493l2 2.998 2-2.998h4a1 1 0 001-1V1.5a.999.999 0 00-1-.999h-12a1 1 0 00-1 1v8.993a1 1 0 001 1h4z" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"></path></svg>
             <h3 class="p-card-title">Forms</h3>
-            <p class="p-card-text">
-              Create elegant forms. Using our amazing components.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="modals.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M2 12.5v.5h1v-.5H2zm5 0v.5h1v-.5H7zm-4 0V12H2v.5h1zm4-.5v.5h1V12H7zm-2-2a2 2 0 012 2h1a3 3 0 00-3-3v1zm-2 2a2 2 0 012-2V9a3 3 0 00-3 3h1zm2-8a2 2 0 00-2 2h1a1 1 0 011-1V4zm2 2a2 2 0 00-2-2v1a1 1 0 011 1h1zM5 8a2 2 0 002-2H6a1 1 0 01-1 1v1zm0-1a1 1 0 01-1-1H3a2 2 0 002 2V7zM1.5 3h12V2h-12v1zm12.5.5v8h1v-8h-1zm-.5 8.5h-12v1h12v-1zM1 11.5v-8H0v8h1zm.5.5a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 13v-1zm12.5-.5a.5.5 0 01-.5.5v1a1.5 1.5 0 001.5-1.5h-1zM13.5 3a.5.5 0 01.5.5h1A1.5 1.5 0 0013.5 2v1zm-12-1A1.5 1.5 0 000 3.5h1a.5.5 0 01.5-.5V2zM9 6h3V5H9v1zm0 3h3V8H9v1zm-9 6h15v-1H0v1zM3 0v2.5h1V0H3zm8 0v2.5h1V0h-1z" fill="currentColor"></path></svg>
             <h3 class="p-card-title">Modals</h3>
-            <p class="p-card-text">
-              Trying to show a warning? Do it in a cool way.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="actions.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M15 14.5H0m15-14H0m13.5 9h-12v-4h12v4z" stroke="currentColor"></path></svg>
             <h3 class="p-card-title">Actions</h3>
-            <p class="p-card-text">
-              Pop-up actions from iOS are now in Puppertino.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="icons.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M6.5 5.5l1 1 1-1a1.414 1.414 0 012 2l-3 3-3-3a1.414 1.414 0 012-2z" stroke="currentColor"></path><path d="M.5 7.5a7 7 0 1014 0 7 7 0 00-14 0z" stroke="currentColor"></path></svg>
             <h3 class="p-card-title">Icons</h3>
-            <p class="p-card-text">
-              Complement your beautiful app with curated icons.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="layout.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 14V1.5M1.5 5V1.5h12V5m-10 8.5H11" stroke="currentColor"></path></svg>
             <h3 class="p-card-title">Layout</h3>
-            <p class="p-card-text">
-              Font sizing based on human guidelines for your web/app.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="color_palette.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M6.086 2.914l-.354-.353.354.353zM1.914 7.086l-.353-.354.353.354zm0 2.828l.354-.353-.354.353zm3.172 3.172l.353-.354-.353.354zm2.828 0l.354.353-.354-.353zm4.172-4.172l-.354-.353.354.353zm0-2.828l.353-.354-.353.354zM8.914 2.914l-.353.354.353-.354zm3.767 7.586l.353-.354-.353-.353-.354.353.354.354zm1.18 1.18l-.353.354.354-.353zM11.639 14l.312-.39-.312.39zm2.086 0l-.312-.39.312.39zM5.732 2.56L1.561 6.733l.707.707 4.171-4.171-.707-.707zm-4.171 7.708l3.171 3.171.707-.707-3.171-3.171-.707.707zm6.707 3.171l4.171-4.171-.707-.707-4.171 4.171.707.707zm4.171-7.707L9.268 2.561l-.707.707 3.171 3.171.707-.707zm0 3.536a2.5 2.5 0 000-3.536l-.707.707a1.5 1.5 0 010 2.122l.707.707zm-7.707 4.171a2.5 2.5 0 003.536 0l-.707-.707a1.5 1.5 0 01-2.122 0l-.707.707zM1.561 6.732a2.5 2.5 0 000 3.536l.707-.707a1.5 1.5 0 010-2.122l-.707-.707zm4.878-3.464a1.5 1.5 0 012.122 0l.707-.707a2.5 2.5 0 00-3.536 0l.707.707zM7 7V2.5H6V7h1zM2 2.5v4h1v-4H2zM4.5 0A2.5 2.5 0 002 2.5h1A1.5 1.5 0 014.5 1V0zM7 2.5A2.5 2.5 0 004.5 0v1A1.5 1.5 0 016 2.5h1zM1.5 10h10V9h-10v1zm10.827.854l1.181 1.18.707-.707-1.18-1.18-.708.707zm-.473 1.18l1.18-1.18-.707-.708-1.18 1.181.707.707zm.096 1.576c-.29-.232-.422-.51-.438-.77-.015-.257.081-.545.342-.806l-.707-.707c-.444.444-.667 1.004-.633 1.575.035.569.324 1.099.811 1.488l.625-.78zm1.462 0a1.17 1.17 0 01-1.462 0l-.625.78a2.17 2.17 0 002.711 0l-.624-.78zm.096-1.576c.26.26.357.549.341.807-.016.259-.147.537-.437.769l.624.78c.487-.39.777-.919.811-1.489.035-.57-.188-1.13-.632-1.574l-.707.707z" fill="currentColor"></path></svg>
             <h3 class="p-card-title">Colors</h3>
-            <p class="p-card-text">
-              Use the vibrant colors of Puppertino to make your project
-              beautiful.
-            </p>
           </div>
         </a>
       </div>
 
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="segmented_controls.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 1.5v12m-6-6h12m-12-6h12v12h-12v-12z" stroke="currentColor"></path></svg>
             <h3 class="p-card-title">Segmented controls</h3>
-            <p class="p-card-text">
-              The magnificent segmented controls of iOS are now in 
-              Puppertino.
-            </p>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="shadows.html" class="p-card">
           <div class="p-card-content">
-            <h3 class="p-card-title">Shadows</h3>
-            <p class="p-card-text">
-              Add depth to your project with this curated collection
-              of shadows.
-            </p>
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M1.5 8.5l-.395-.307a.5.5 0 00.041.66L1.5 8.5zm5-7l-.354.354L6.5 1.5zm2 2l.354.354.353-.354-.353-.354L8.5 3.5zm-2 2l-.354.354.354.353.354-.353L6.5 5.5zm-2-2l-.354.354L4.5 3.5zm3.136.864l.354.353-.354-.353zm-.272.272l-.354-.353.354.353zm.272 5.728l-.353-.354.353.354zm5.728-5.728l-.354-.353.354.353zm0-.272l-.354.353.354-.353zm-6 6l.353-.354-.353.354zM2 15h11v-1H2v1zm5.854-.854l-6-6-.708.708 6 6 .708-.707zm-5.96-5.339l3.5-4.5-.789-.614-3.5 4.5.79.614zm4.252-6.953l2 2 .708-.708-2-2-.708.708zm2 1.292l-2 2 .708.708 2-2-.708-.708zm-1.292 2l-2-2-.708.708 2 2 .708-.708zm-2-3.292a.914.914 0 011.292 0l.708-.708a1.914 1.914 0 00-2.708 0l.708.708zm-.708-.708a1.914 1.914 0 000 2.708l.708-.708a.914.914 0 010-1.292l-.708-.708zM7.283 4.01l-.273.273.707.707.273-.273-.707-.707zm.707 6.707l5.727-5.727-.707-.707-5.727 5.727.707.707zm5.727-5.727c.27-.27.27-.71 0-.98l-.707.707a.307.307 0 010-.434l.707.707zM7.01 10.717c.27.27.71.27.98 0l-.707-.707c.12-.12.314-.12.434 0l-.707.707zm0-6.434a4.55 4.55 0 000 6.434l.707-.707a3.55 3.55 0 010-5.02l-.707-.707zm.98.434a3.55 3.55 0 015.02 0l.707-.707a4.55 4.55 0 00-6.434 0l.707.707z" fill="currentColor"></path></svg>
+            <h3 class="p-card-title">Shadows & Blur</h3>
           </div>
         </a>
       </div>
 
-      <div class="col-xs-11 col-sm-4">
+      <div class="col-xs-11 col-sm-3">
         <a href="tabs.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M7.5 1.5l.197-.46a.5.5 0 00-.394 0l.197.46zm-7 3l-.197-.46a.5.5 0 000 .92L.5 4.5zm7 3l-.197.46a.5.5 0 00.394 0L7.5 7.5zm7-3l.197.46a.5.5 0 000-.92l-.197.46zm-7 6l-.197.46.197.084.197-.084-.197-.46zm0 3l-.197.46.197.084.197-.084-.197-.46zM7.303 1.04l-7 3 .394.92 7-3-.394-.92zm-7 3.92l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92zm7-3.92l-7-3-.394.92 7 3 .394-.92zM.303 7.96l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92zm-7.394 0l7 3 .394-.92-7-3-.394.92zm7.394 3l7-3-.394-.92-7 3 .394.92z" fill="currentColor"></path></svg>
             <h3 class="p-card-title">Tabs</h3>
-            <p class="p-card-text">
-              The amazing tabs for iOS and macOS now featured in
-              Puppertino
-            </p>
           </div>
         </a>
       </div>
 
 
-      <div class="col-xs-11 col-sm-4 p-dark-mode">
+      <div class="col-xs-11 col-sm-3 p-dark-mode">
         <a href="dark_mode.html" class="p-card">
           <div class="p-card-content">
+            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" stroke="currentColor" stroke-linejoin="round"></path></svg>
             <h3 class="p-card-title">Dark Mode</h3>
-            <p class="p-card-text">
-              Want that sweet dark mode with your Puppertino app?
-              It's here now.
-            </p>
           </div>
         </a>
       </div>

docs/examples/layout.html

@@ -11,7 +11,7 @@
       href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/modals.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/segmented_controls.html

@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

docs/examples/shadows.html

@@ -2,13 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Shadows - Puppertino Framework</title>
+    <title>Shadows & Blur - Puppertino Framework</title>
     <link
       href="https://rsms.me/inter/inter.css"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
+    />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -44,14 +48,14 @@
       <p>/</p>
       <a href="shadows.html" class="p-btn p-btn-scope">Shadows</a>
     </div>
-    <h1>Shadows</h1>
+    <h1>Shadows & Blur</h1>
     <div class="master">
       <p>
         Shadows are not so common on iOS or MacOS. But having a curated collection of shadows can help your interface, which is why I added it! You can use Shadows by downloading the  
         <a
           href="https://github.com/codedgar/Puppertino/blob/master/dist/css/shadows.css"
           target="_blank"
-          >CSS of Shadows</a
+          >CSS of Shadows & Blur</a
         >
         or
         <a
@@ -139,6 +143,69 @@
         </div>
       </div>
 
+      <div class="talk-about-it">
+        <h2>Blur</h2>
+        <p>Blur is used pretty commonly along macOS and iOS apps, we have created a collection of curated blur levels for your usage in your apps. Keep in mind that blur levels also include a background, that you can override if you desire.</p>
+
+        <div class="row pad_15_row center_row">
+          <div class="col-xs-10 col-sm-3">
+            <div class="card_blur">
+              <div class="blur_elm p-blur-1">
+                <p class="col-w">p-blur-1</p>
+              </div>
+              <div class="blur_img">
+              </div>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="card_blur">
+              <div class="blur_elm p-blur-2">
+                <p>p-blur-2</p>
+              </div>
+              <div class="blur_img">
+              </div>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="card_blur">
+              <div class="blur_elm p-blur-3">
+                <p>p-blur-3</p>
+              </div>
+              <div class="blur_img">
+              </div>
+            </div>
+          </div>
+
+          <div class="col-xs-10 col-sm-3">
+            <div class="card_blur">
+              <div class="blur_elm p-blur-4">
+                <p>p-blur-4</p>
+              </div>
+              <div class="blur_img">
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <p>Usage:</p>
+        <div class="code">
+          <pre>
+        <code class="html">
+&#60;div class="p-blur-1">&#60;/div>
+
+&#60;div class="p-blur-2">&#60;/div>
+
+&#60;div class="p-blur-3">&#60;/div>
+
+&#60;div class="p-blur-4">&#60;/div>
+        </code>
+      </pre>
+        </div>
+      </div>
+
     </div>
  
 </body>

docs/examples/tabs.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    <link rel="stylesheet" type="text/css" href="../../dist/css/newfull.css" />
     <meta charset="utf-8" />
     <meta
       name="viewport"

docs/index-assets/bootstrap-utilities.css

@@ -0,0 +1,4866 @@
+/*!
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.link-primary {
+  color: #0d6efd;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca;
+}
+
+.link-secondary {
+  color: #6c757d;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64;
+}
+
+.link-success {
+  color: #198754;
+}
+.link-success:hover, .link-success:focus {
+  color: #146c43;
+}
+
+.link-info {
+  color: #0dcaf0;
+}
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3;
+}
+
+.link-warning {
+  color: #ffc107;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39;
+}
+
+.link-danger {
+  color: #dc3545;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37;
+}
+
+.link-light {
+  color: #f8f9fa;
+}
+.link-light:hover, .link-light:focus {
+  color: #f9fafb;
+}
+
+.link-dark {
+  color: #212529;
+}
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21;
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: 0.25;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.float-start {
+  float: left !important;
+}
+
+.float-end {
+  float: right !important;
+}
+
+.float-none {
+  float: none !important;
+}
+
+.opacity-0 {
+  opacity: 0 !important;
+}
+
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+
+.opacity-100 {
+  opacity: 1 !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-grid {
+  display: grid !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-row {
+  display: table-row !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+}
+
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+.translate-middle {
+  transform: translate(-50%, -50%) !important;
+}
+
+.translate-middle-x {
+  transform: translateX(-50%) !important;
+}
+
+.translate-middle-y {
+  transform: translateY(-50%) !important;
+}
+
+.border {
+  border: 1px solid #dee2e6 !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top {
+  border-top: 1px solid #dee2e6 !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-end {
+  border-right: 1px solid #dee2e6 !important;
+}
+
+.border-end-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #dee2e6 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-start {
+  border-left: 1px solid #dee2e6 !important;
+}
+
+.border-start-0 {
+  border-left: 0 !important;
+}
+
+.border-primary {
+  border-color: #0d6efd !important;
+}
+
+.border-secondary {
+  border-color: #6c757d !important;
+}
+
+.border-success {
+  border-color: #198754 !important;
+}
+
+.border-info {
+  border-color: #0dcaf0 !important;
+}
+
+.border-warning {
+  border-color: #ffc107 !important;
+}
+
+.border-danger {
+  border-color: #dc3545 !important;
+}
+
+.border-light {
+  border-color: #f8f9fa !important;
+}
+
+.border-dark {
+  border-color: #212529 !important;
+}
+
+.border-white {
+  border-color: #fff !important;
+}
+
+.border-1 {
+  border-width: 1px !important;
+}
+
+.border-2 {
+  border-width: 2px !important;
+}
+
+.border-3 {
+  border-width: 3px !important;
+}
+
+.border-4 {
+  border-width: 4px !important;
+}
+
+.border-5 {
+  border-width: 5px !important;
+}
+
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+.mh-100 {
+  max-height: 100% !important;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem !important;
+}
+
+.gap-2 {
+  gap: 0.5rem !important;
+}
+
+.gap-3 {
+  gap: 1rem !important;
+}
+
+.gap-4 {
+  gap: 1.5rem !important;
+}
+
+.gap-5 {
+  gap: 3rem !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+.order-first {
+  order: -1 !important;
+}
+
+.order-0 {
+  order: 0 !important;
+}
+
+.order-1 {
+  order: 1 !important;
+}
+
+.order-2 {
+  order: 2 !important;
+}
+
+.order-3 {
+  order: 3 !important;
+}
+
+.order-4 {
+  order: 4 !important;
+}
+
+.order-5 {
+  order: 5 !important;
+}
+
+.order-last {
+  order: 6 !important;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mx-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.mx-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
+}
+
+.mx-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.mx-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.mx-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.mx-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mt-3 {
+  margin-top: 1rem !important;
+}
+
+.mt-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mt-5 {
+  margin-top: 3rem !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.me-0 {
+  margin-right: 0 !important;
+}
+
+.me-1 {
+  margin-right: 0.25rem !important;
+}
+
+.me-2 {
+  margin-right: 0.5rem !important;
+}
+
+.me-3 {
+  margin-right: 1rem !important;
+}
+
+.me-4 {
+  margin-right: 1.5rem !important;
+}
+
+.me-5 {
+  margin-right: 3rem !important;
+}
+
+.me-auto {
+  margin-right: auto !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 3rem !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ms-0 {
+  margin-left: 0 !important;
+}
+
+.ms-1 {
+  margin-left: 0.25rem !important;
+}
+
+.ms-2 {
+  margin-left: 0.5rem !important;
+}
+
+.ms-3 {
+  margin-left: 1rem !important;
+}
+
+.ms-4 {
+  margin-left: 1.5rem !important;
+}
+
+.ms-5 {
+  margin-left: 3rem !important;
+}
+
+.ms-auto {
+  margin-left: auto !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 1rem !important;
+}
+
+.p-4 {
+  padding: 1.5rem !important;
+}
+
+.p-5 {
+  padding: 3rem !important;
+}
+
+.px-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.px-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
+}
+
+.px-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+}
+
+.px-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.px-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.px-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.py-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.py-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.py-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pt-3 {
+  padding-top: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pt-5 {
+  padding-top: 3rem !important;
+}
+
+.pe-0 {
+  padding-right: 0 !important;
+}
+
+.pe-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pe-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pe-3 {
+  padding-right: 1rem !important;
+}
+
+.pe-4 {
+  padding-right: 1.5rem !important;
+}
+
+.pe-5 {
+  padding-right: 3rem !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 3rem !important;
+}
+
+.ps-0 {
+  padding-left: 0 !important;
+}
+
+.ps-1 {
+  padding-left: 0.25rem !important;
+}
+
+.ps-2 {
+  padding-left: 0.5rem !important;
+}
+
+.ps-3 {
+  padding-left: 1rem !important;
+}
+
+.ps-4 {
+  padding-left: 1.5rem !important;
+}
+
+.ps-5 {
+  padding-left: 3rem !important;
+}
+
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
+.fs-1 {
+  font-size: calc(1.375rem + 1.5vw) !important;
+}
+
+.fs-2 {
+  font-size: calc(1.325rem + 0.9vw) !important;
+}
+
+.fs-3 {
+  font-size: calc(1.3rem + 0.6vw) !important;
+}
+
+.fs-4 {
+  font-size: calc(1.275rem + 0.3vw) !important;
+}
+
+.fs-5 {
+  font-size: 1.25rem !important;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+}
+
+.fst-italic {
+  font-style: italic !important;
+}
+
+.fst-normal {
+  font-style: normal !important;
+}
+
+.fw-light {
+  font-weight: 300 !important;
+}
+
+.fw-lighter {
+  font-weight: lighter !important;
+}
+
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-bolder {
+  font-weight: bolder !important;
+}
+
+.lh-1 {
+  line-height: 1 !important;
+}
+
+.lh-sm {
+  line-height: 1.25 !important;
+}
+
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
+}
+
+.text-start {
+  text-align: left !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* rtl:end:remove */
+.text-primary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-secondary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-success {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-info {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-warning {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-danger {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-light {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-dark {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-black {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-white {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-body {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+}
+
+.text-muted {
+  --bs-text-opacity: 1;
+  color: #6c757d !important;
+}
+
+.text-black-50 {
+  --bs-text-opacity: 1;
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.text-white-50 {
+  --bs-text-opacity: 1;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.text-reset {
+  --bs-text-opacity: 1;
+  color: inherit !important;
+}
+
+.text-opacity-25 {
+  --bs-text-opacity: 0.25;
+}
+
+.text-opacity-50 {
+  --bs-text-opacity: 0.5;
+}
+
+.text-opacity-75 {
+  --bs-text-opacity: 0.75;
+}
+
+.text-opacity-100 {
+  --bs-text-opacity: 1;
+}
+
+.bg-primary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-secondary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-success {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-info {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-danger {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-light {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-dark {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-black {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-white {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-body {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-transparent {
+  --bs-bg-opacity: 1;
+  background-color: transparent !important;
+}
+
+.bg-opacity-10 {
+  --bs-bg-opacity: 0.1;
+}
+
+.bg-opacity-25 {
+  --bs-bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+  --bs-bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+  --bs-bg-opacity: 0.75;
+}
+
+.bg-opacity-100 {
+  --bs-bg-opacity: 1;
+}
+
+.bg-gradient {
+  background-image: var(--bs-gradient) !important;
+}
+
+.user-select-all {
+  -webkit-user-select: all !important;
+  -moz-user-select: all !important;
+  user-select: all !important;
+}
+
+.user-select-auto {
+  -webkit-user-select: auto !important;
+  -moz-user-select: auto !important;
+  user-select: auto !important;
+}
+
+.user-select-none {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  user-select: none !important;
+}
+
+.pe-none {
+  pointer-events: none !important;
+}
+
+.pe-auto {
+  pointer-events: auto !important;
+}
+
+.rounded {
+  border-radius: 0.25rem !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-1 {
+  border-radius: 0.2rem !important;
+}
+
+.rounded-2 {
+  border-radius: 0.25rem !important;
+}
+
+.rounded-3 {
+  border-radius: 0.3rem !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: 50rem !important;
+}
+
+.rounded-top {
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
+}
+
+.rounded-end {
+  border-top-right-radius: 0.25rem !important;
+  border-bottom-right-radius: 0.25rem !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: 0.25rem !important;
+  border-bottom-left-radius: 0.25rem !important;
+}
+
+.rounded-start {
+  border-bottom-left-radius: 0.25rem !important;
+  border-top-left-radius: 0.25rem !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+@media (min-width: 576px) {
+  .float-sm-start {
+    float: left !important;
+  }
+
+  .float-sm-end {
+    float: right !important;
+  }
+
+  .float-sm-none {
+    float: none !important;
+  }
+
+  .d-sm-inline {
+    display: inline !important;
+  }
+
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-sm-block {
+    display: block !important;
+  }
+
+  .d-sm-grid {
+    display: grid !important;
+  }
+
+  .d-sm-table {
+    display: table !important;
+  }
+
+  .d-sm-table-row {
+    display: table-row !important;
+  }
+
+  .d-sm-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-sm-flex {
+    display: flex !important;
+  }
+
+  .d-sm-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-sm-none {
+    display: none !important;
+  }
+
+  .flex-sm-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-sm-row {
+    flex-direction: row !important;
+  }
+
+  .flex-sm-column {
+    flex-direction: column !important;
+  }
+
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-sm-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-sm-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .gap-sm-0 {
+    gap: 0 !important;
+  }
+
+  .gap-sm-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-sm-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-sm-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-sm-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-sm-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-sm-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-sm-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-sm-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-sm-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-sm-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-sm-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-sm-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-sm-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-sm-center {
+    align-items: center !important;
+  }
+
+  .align-items-sm-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-sm-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-sm-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-sm-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-sm-center {
+    align-content: center !important;
+  }
+
+  .align-content-sm-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-sm-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-sm-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-sm-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-sm-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-sm-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-sm-center {
+    align-self: center !important;
+  }
+
+  .align-self-sm-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-sm-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-sm-first {
+    order: -1 !important;
+  }
+
+  .order-sm-0 {
+    order: 0 !important;
+  }
+
+  .order-sm-1 {
+    order: 1 !important;
+  }
+
+  .order-sm-2 {
+    order: 2 !important;
+  }
+
+  .order-sm-3 {
+    order: 3 !important;
+  }
+
+  .order-sm-4 {
+    order: 4 !important;
+  }
+
+  .order-sm-5 {
+    order: 5 !important;
+  }
+
+  .order-sm-last {
+    order: 6 !important;
+  }
+
+  .m-sm-0 {
+    margin: 0 !important;
+  }
+
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
+
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
+
+  .m-sm-auto {
+    margin: auto !important;
+  }
+
+  .mx-sm-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-sm-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-sm-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-sm-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-sm-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-sm-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-sm-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-sm-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-sm-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-sm-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-sm-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-sm-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-sm-auto {
+    margin-top: auto !important;
+  }
+
+  .me-sm-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-sm-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-sm-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-sm-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-sm-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-sm-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-sm-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-sm-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-sm-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-sm-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-sm-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-sm-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-sm-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-sm-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-sm-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-sm-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-sm-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-sm-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-sm-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-sm-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-sm-auto {
+    margin-left: auto !important;
+  }
+
+  .p-sm-0 {
+    padding: 0 !important;
+  }
+
+  .p-sm-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-sm-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-sm-3 {
+    padding: 1rem !important;
+  }
+
+  .p-sm-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-sm-5 {
+    padding: 3rem !important;
+  }
+
+  .px-sm-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-sm-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-sm-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-sm-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-sm-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-sm-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-sm-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-sm-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-sm-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-sm-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-sm-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-sm-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-sm-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-sm-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-sm-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-sm-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-sm-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-sm-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-sm-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-sm-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-sm-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-sm-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-sm-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-sm-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-sm-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-sm-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-sm-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-sm-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-sm-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-sm-5 {
+    padding-left: 3rem !important;
+  }
+
+  .text-sm-start {
+    text-align: left !important;
+  }
+
+  .text-sm-end {
+    text-align: right !important;
+  }
+
+  .text-sm-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 768px) {
+  .float-md-start {
+    float: left !important;
+  }
+
+  .float-md-end {
+    float: right !important;
+  }
+
+  .float-md-none {
+    float: none !important;
+  }
+
+  .d-md-inline {
+    display: inline !important;
+  }
+
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-md-block {
+    display: block !important;
+  }
+
+  .d-md-grid {
+    display: grid !important;
+  }
+
+  .d-md-table {
+    display: table !important;
+  }
+
+  .d-md-table-row {
+    display: table-row !important;
+  }
+
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-md-flex {
+    display: flex !important;
+  }
+
+  .d-md-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-md-none {
+    display: none !important;
+  }
+
+  .flex-md-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-md-row {
+    flex-direction: row !important;
+  }
+
+  .flex-md-column {
+    flex-direction: column !important;
+  }
+
+  .flex-md-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-md-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-md-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-md-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-md-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-md-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-md-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .gap-md-0 {
+    gap: 0 !important;
+  }
+
+  .gap-md-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-md-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-md-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-md-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-md-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-md-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-md-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-md-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-md-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-md-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-md-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-md-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-md-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-md-center {
+    align-items: center !important;
+  }
+
+  .align-items-md-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-md-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-md-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-md-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-md-center {
+    align-content: center !important;
+  }
+
+  .align-content-md-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-md-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-md-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-md-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-md-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-md-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-md-center {
+    align-self: center !important;
+  }
+
+  .align-self-md-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-md-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-md-first {
+    order: -1 !important;
+  }
+
+  .order-md-0 {
+    order: 0 !important;
+  }
+
+  .order-md-1 {
+    order: 1 !important;
+  }
+
+  .order-md-2 {
+    order: 2 !important;
+  }
+
+  .order-md-3 {
+    order: 3 !important;
+  }
+
+  .order-md-4 {
+    order: 4 !important;
+  }
+
+  .order-md-5 {
+    order: 5 !important;
+  }
+
+  .order-md-last {
+    order: 6 !important;
+  }
+
+  .m-md-0 {
+    margin: 0 !important;
+  }
+
+  .m-md-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-md-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-md-3 {
+    margin: 1rem !important;
+  }
+
+  .m-md-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-md-5 {
+    margin: 3rem !important;
+  }
+
+  .m-md-auto {
+    margin: auto !important;
+  }
+
+  .mx-md-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-md-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-md-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-md-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-md-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-md-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-md-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-md-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-md-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-md-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-md-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-md-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-md-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-md-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-md-auto {
+    margin-top: auto !important;
+  }
+
+  .me-md-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-md-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-md-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-md-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-md-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-md-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-md-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-md-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-md-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-md-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-md-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-md-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-md-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-md-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-md-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-md-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-md-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-md-auto {
+    margin-left: auto !important;
+  }
+
+  .p-md-0 {
+    padding: 0 !important;
+  }
+
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-md-3 {
+    padding: 1rem !important;
+  }
+
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-md-5 {
+    padding: 3rem !important;
+  }
+
+  .px-md-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-md-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-md-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-md-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-md-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-md-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-md-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-md-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-md-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-md-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-md-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-md-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-md-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-md-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-md-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-md-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-md-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-md-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-md-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-md-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-md-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-md-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-md-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-md-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-md-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-md-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-md-5 {
+    padding-left: 3rem !important;
+  }
+
+  .text-md-start {
+    text-align: left !important;
+  }
+
+  .text-md-end {
+    text-align: right !important;
+  }
+
+  .text-md-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 992px) {
+  .float-lg-start {
+    float: left !important;
+  }
+
+  .float-lg-end {
+    float: right !important;
+  }
+
+  .float-lg-none {
+    float: none !important;
+  }
+
+  .d-lg-inline {
+    display: inline !important;
+  }
+
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-lg-block {
+    display: block !important;
+  }
+
+  .d-lg-grid {
+    display: grid !important;
+  }
+
+  .d-lg-table {
+    display: table !important;
+  }
+
+  .d-lg-table-row {
+    display: table-row !important;
+  }
+
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-lg-flex {
+    display: flex !important;
+  }
+
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-lg-none {
+    display: none !important;
+  }
+
+  .flex-lg-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-lg-row {
+    flex-direction: row !important;
+  }
+
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
+
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-lg-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-lg-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .gap-lg-0 {
+    gap: 0 !important;
+  }
+
+  .gap-lg-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-lg-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-lg-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-lg-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-lg-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-lg-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-lg-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-lg-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-lg-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-lg-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-lg-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-lg-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-lg-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-lg-center {
+    align-items: center !important;
+  }
+
+  .align-items-lg-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-lg-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-lg-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-lg-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-lg-center {
+    align-content: center !important;
+  }
+
+  .align-content-lg-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-lg-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-lg-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-lg-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-lg-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-lg-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-lg-center {
+    align-self: center !important;
+  }
+
+  .align-self-lg-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-lg-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-lg-first {
+    order: -1 !important;
+  }
+
+  .order-lg-0 {
+    order: 0 !important;
+  }
+
+  .order-lg-1 {
+    order: 1 !important;
+  }
+
+  .order-lg-2 {
+    order: 2 !important;
+  }
+
+  .order-lg-3 {
+    order: 3 !important;
+  }
+
+  .order-lg-4 {
+    order: 4 !important;
+  }
+
+  .order-lg-5 {
+    order: 5 !important;
+  }
+
+  .order-lg-last {
+    order: 6 !important;
+  }
+
+  .m-lg-0 {
+    margin: 0 !important;
+  }
+
+  .m-lg-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-lg-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-lg-3 {
+    margin: 1rem !important;
+  }
+
+  .m-lg-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-lg-5 {
+    margin: 3rem !important;
+  }
+
+  .m-lg-auto {
+    margin: auto !important;
+  }
+
+  .mx-lg-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-lg-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-lg-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-lg-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-lg-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-lg-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-lg-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-lg-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-lg-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-lg-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-lg-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-lg-auto {
+    margin-top: auto !important;
+  }
+
+  .me-lg-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-lg-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-lg-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-lg-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-lg-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-lg-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-lg-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-lg-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-lg-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-lg-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-lg-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-lg-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-lg-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-lg-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-lg-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-lg-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-lg-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-lg-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-lg-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-lg-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-lg-auto {
+    margin-left: auto !important;
+  }
+
+  .p-lg-0 {
+    padding: 0 !important;
+  }
+
+  .p-lg-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-lg-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-lg-3 {
+    padding: 1rem !important;
+  }
+
+  .p-lg-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-lg-5 {
+    padding: 3rem !important;
+  }
+
+  .px-lg-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-lg-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-lg-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-lg-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-lg-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-lg-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-lg-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-lg-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-lg-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-lg-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-lg-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-lg-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-lg-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-lg-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-lg-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-lg-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-lg-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-lg-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-lg-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-lg-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-lg-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-lg-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-lg-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-lg-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-lg-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-lg-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-lg-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-lg-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-lg-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-lg-5 {
+    padding-left: 3rem !important;
+  }
+
+  .text-lg-start {
+    text-align: left !important;
+  }
+
+  .text-lg-end {
+    text-align: right !important;
+  }
+
+  .text-lg-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1200px) {
+  .float-xl-start {
+    float: left !important;
+  }
+
+  .float-xl-end {
+    float: right !important;
+  }
+
+  .float-xl-none {
+    float: none !important;
+  }
+
+  .d-xl-inline {
+    display: inline !important;
+  }
+
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-xl-block {
+    display: block !important;
+  }
+
+  .d-xl-grid {
+    display: grid !important;
+  }
+
+  .d-xl-table {
+    display: table !important;
+  }
+
+  .d-xl-table-row {
+    display: table-row !important;
+  }
+
+  .d-xl-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-xl-flex {
+    display: flex !important;
+  }
+
+  .d-xl-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-xl-none {
+    display: none !important;
+  }
+
+  .flex-xl-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-xl-row {
+    flex-direction: row !important;
+  }
+
+  .flex-xl-column {
+    flex-direction: column !important;
+  }
+
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-xl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-xl-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-xl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-xl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .gap-xl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xl-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-xl-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-xl-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-xl-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-xl-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-xl-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-xl-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-xl-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-xl-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-xl-center {
+    align-items: center !important;
+  }
+
+  .align-items-xl-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-xl-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-xl-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-xl-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-xl-center {
+    align-content: center !important;
+  }
+
+  .align-content-xl-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-xl-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-xl-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-xl-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-xl-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-xl-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-xl-center {
+    align-self: center !important;
+  }
+
+  .align-self-xl-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-xl-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-xl-first {
+    order: -1 !important;
+  }
+
+  .order-xl-0 {
+    order: 0 !important;
+  }
+
+  .order-xl-1 {
+    order: 1 !important;
+  }
+
+  .order-xl-2 {
+    order: 2 !important;
+  }
+
+  .order-xl-3 {
+    order: 3 !important;
+  }
+
+  .order-xl-4 {
+    order: 4 !important;
+  }
+
+  .order-xl-5 {
+    order: 5 !important;
+  }
+
+  .order-xl-last {
+    order: 6 !important;
+  }
+
+  .m-xl-0 {
+    margin: 0 !important;
+  }
+
+  .m-xl-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-xl-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-xl-3 {
+    margin: 1rem !important;
+  }
+
+  .m-xl-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-xl-5 {
+    margin: 3rem !important;
+  }
+
+  .m-xl-auto {
+    margin: auto !important;
+  }
+
+  .mx-xl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-xl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-xl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-xl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-xl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-xl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-xl-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-xl-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-xl-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-xl-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-xl-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-xl-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-xl-auto {
+    margin-top: auto !important;
+  }
+
+  .me-xl-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-xl-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-xl-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-xl-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-xl-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-xl-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-xl-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-xl-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-xl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-xl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-xl-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-xl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-xl-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-xl-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-xl-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-xl-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-xl-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-xl-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-xl-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-xl-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-xl-auto {
+    margin-left: auto !important;
+  }
+
+  .p-xl-0 {
+    padding: 0 !important;
+  }
+
+  .p-xl-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-xl-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-xl-3 {
+    padding: 1rem !important;
+  }
+
+  .p-xl-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+
+  .px-xl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-xl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-xl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-xl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-xl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-xl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-xl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-xl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-xl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-xl-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-xl-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-xl-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-xl-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-xl-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-xl-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-xl-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-xl-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-xl-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-xl-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-xl-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-xl-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-xl-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-xl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-xl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-xl-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-xl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-xl-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-xl-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-xl-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-xl-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-xl-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-xl-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-xl-5 {
+    padding-left: 3rem !important;
+  }
+
+  .text-xl-start {
+    text-align: left !important;
+  }
+
+  .text-xl-end {
+    text-align: right !important;
+  }
+
+  .text-xl-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
+  }
+
+  .float-xxl-end {
+    float: right !important;
+  }
+
+  .float-xxl-none {
+    float: none !important;
+  }
+
+  .d-xxl-inline {
+    display: inline !important;
+  }
+
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-xxl-block {
+    display: block !important;
+  }
+
+  .d-xxl-grid {
+    display: grid !important;
+  }
+
+  .d-xxl-table {
+    display: table !important;
+  }
+
+  .d-xxl-table-row {
+    display: table-row !important;
+  }
+
+  .d-xxl-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-xxl-flex {
+    display: flex !important;
+  }
+
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-xxl-none {
+    display: none !important;
+  }
+
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-xxl-row {
+    flex-direction: row !important;
+  }
+
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
+
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-xxl-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-xxl-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-xxl-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-xxl-center {
+    align-items: center !important;
+  }
+
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-xxl-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-xxl-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-xxl-center {
+    align-content: center !important;
+  }
+
+  .align-content-xxl-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-xxl-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-xxl-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-xxl-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-xxl-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-xxl-center {
+    align-self: center !important;
+  }
+
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
+  }
+
+  .order-xxl-first {
+    order: -1 !important;
+  }
+
+  .order-xxl-0 {
+    order: 0 !important;
+  }
+
+  .order-xxl-1 {
+    order: 1 !important;
+  }
+
+  .order-xxl-2 {
+    order: 2 !important;
+  }
+
+  .order-xxl-3 {
+    order: 3 !important;
+  }
+
+  .order-xxl-4 {
+    order: 4 !important;
+  }
+
+  .order-xxl-5 {
+    order: 5 !important;
+  }
+
+  .order-xxl-last {
+    order: 6 !important;
+  }
+
+  .m-xxl-0 {
+    margin: 0 !important;
+  }
+
+  .m-xxl-1 {
+    margin: 0.25rem !important;
+  }
+
+  .m-xxl-2 {
+    margin: 0.5rem !important;
+  }
+
+  .m-xxl-3 {
+    margin: 1rem !important;
+  }
+
+  .m-xxl-4 {
+    margin: 1.5rem !important;
+  }
+
+  .m-xxl-5 {
+    margin: 3rem !important;
+  }
+
+  .m-xxl-auto {
+    margin: auto !important;
+  }
+
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+
+  .mt-xxl-0 {
+    margin-top: 0 !important;
+  }
+
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
+  }
+
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
+  }
+
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
+  }
+
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
+  }
+
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
+  }
+
+  .mt-xxl-auto {
+    margin-top: auto !important;
+  }
+
+  .me-xxl-0 {
+    margin-right: 0 !important;
+  }
+
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
+  }
+
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
+
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
+
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
+
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
+
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
+
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
+
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
+  }
+
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
+  }
+
+  .ms-xxl-0 {
+    margin-left: 0 !important;
+  }
+
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
+  }
+
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
+  }
+
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
+  }
+
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
+  }
+
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
+  }
+
+  .ms-xxl-auto {
+    margin-left: auto !important;
+  }
+
+  .p-xxl-0 {
+    padding: 0 !important;
+  }
+
+  .p-xxl-1 {
+    padding: 0.25rem !important;
+  }
+
+  .p-xxl-2 {
+    padding: 0.5rem !important;
+  }
+
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
+
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
+
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
+
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
+
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
+
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
+
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
+
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
+
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
+
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
+
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
+
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
+  }
+
+  .text-xxl-start {
+    text-align: left !important;
+  }
+
+  .text-xxl-end {
+    text-align: right !important;
+  }
+
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+
+  .fs-3 {
+    font-size: 1.75rem !important;
+  }
+
+  .fs-4 {
+    font-size: 1.5rem !important;
+  }
+}
+@media print {
+  .d-print-inline {
+    display: inline !important;
+  }
+
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-print-block {
+    display: block !important;
+  }
+
+  .d-print-grid {
+    display: grid !important;
+  }
+
+  .d-print-table {
+    display: table !important;
+  }
+
+  .d-print-table-row {
+    display: table-row !important;
+  }
+
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+
+  .d-print-flex {
+    display: flex !important;
+  }
+
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+
+  .d-print-none {
+    display: none !important;
+  }
+}
+
+/*# sourceMappingURL=bootstrap-utilities.css.map */

docs/index.html

@@ -2,55 +2,40 @@
 <html lang="en">
   <head>
     <title>Home - Puppertino Framework</title>
-    <link
-      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;500;900:500,800&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
+    
+    <link rel="stylesheet" type="text/css" href="../dist/css/newfull.css" />
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
-    />
+    <link rel="stylesheet" href="./index-assets/bootstrap-utilities.css">
+    <link rel="stylesheet" href="./index-assets/bootstrap-grid.min.css">
     <meta
       name="description"
       content="Have you ever thought: Man, I would love a macOS based Framework? Fear not, Puppertino is here!"
     />
     <link rel="icon" type="image/png" href="landing-images/doggo.png" />
     <style type="text/css">
+      @import url('https://rsms.me/inter/inter.css');
+      html { font-family: 'Inter', sans-serif; }
+      @supports (font-variation-settings: normal) {
+        html { font-family: 'Inter var', sans-serif; }
+      }
+
       :root {
         --text_color: #252525;
         --bg_page_color: #f5f5f5;
       }
-      .p-dark-mode{
-        --bg_page_color: #252525;
+      .p-dark-mode, [data-p-theme=darkmode]{
+        --bg_page_color: #0e0e0e;
         --text_color: #f5f5f5;
       }
       body {
         margin: 0px;
         --font:  -apple-system, "Inter", sans-serif;
         background: var(--bg_page_color);
+        transition: .5s ease;
       }
-      img {
-        display: block;
-        margin: auto;
-        max-width: 100%;
-      }
-      .text_black {
-        color: var(--text_color);
-      }
-      .cta_pupper {
-        min-height: 100vh;
-        background: url("landing-images/pupper_cta.jpg"), #000;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: 50% -30%;
-      }
+
       h1,
       h2,
       h3,
@@ -58,68 +43,198 @@
       a,
       p {
         font-family: -apple-system, "Inter", sans-serif;
+        color: var(--text_color);
+        transition: .5s ease;
       }
-      h1 {
-        padding-top: 20vh;
-        padding-left: 5vw;
-        padding-right: 3vw;
-        margin-top: 0;
-        margin-bottom: 10px;
-        display: block;
-        color: white;
-        font-size: 4rem;
+
+      h1{
+        font-size: 70px;
+        font-weight: 700;
+        margin:0;
       }
-      h2 {
-        font-size: 50px;
+
+      .main-cta{
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          height: 80vh;
+          background: url('./landing-images/Puppertino_Main_Image.jpg'), rgba(0,0,0,0.3);
+          background-blend-mode: overlay;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: bottom center;
       }
-      p {
-        font-size: 20px;
+
+      .main-cta h2{
+        font-weight: 400;
+        margin-bottom: 20px;
+        font-size: 30px;
+        color: #fff;
+      }
+
+      .main-cta img{
+          margin-top: 100px;
       }
-      .cta_pupper p {
-        color: white;
-        padding: 0px 10vw;
+      
+      .main-cta h1{
+        color: #fff;
       }
-      .cta_pupper {
-        text-align: center;
+
+      .p-link{
+          text-decoration: none;
+          
       }
-      .p-link {
-        color: #f5f5f5;
-        font-size: 15px;
-        text-decoration: none;
+
+      .mt-20px{
+          margin-top: 10px;
+          display: inline-block;
       }
-      .p-link:hover {
-        text-decoration: underline;
+
+      .mt-100{
+        margin-top: 100px;
       }
-      .title {
-        text-align: center;
-        display: block;
+
+      .mb-100{
+        margin-bottom: 100px;
+      }
+
+      .b-25{
+        border-radius: 25px;
+      }
+
+      .p-btn{
+        font-size: 20px;
+      }
+
+      .learn-more-link{
+          margin:0;
+      }
+
+      sup{
+        font-size: 1.5rem;
+      }
+
+      .dark-mode-show{
+        width:100%;
+        height: 473px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .dark-mode-show::before{
+        content: '';
+        background: url('https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        position: absolute;
+        top:0;
+        bottom: 0;
         width: 100%;
+        height: 100%;
       }
-      .speed_boye {
-        min-height: 30vh;
-        background: url("landing-images/speed.jpg");
+
+      .dark-mode-show::after{
+        content: '';
+        background: url('https://images.unsplash.com/photo-1609699068536-72103600c53e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
-        padding: 15vh 3vw;
+        position: absolute;
+        top:0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: .5s ease;
       }
-      .container-no-pad .row {
-        margin: 0px;
+
+      .p-dark-mode .dark-mode-show::after{
+        opacity: 1;
       }
-      .speed_h2,
-      .speed_p {
-        color: #f5f5f5;
-        text-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
+
+      .p-dark-mode .p-white-darkmode, [data-p-theme=darkmode] .p-white-darkmode{
+        color: #fff;
       }
-      .speed_h2 {
-        margin-bottom: 10px;
+
+      #puppertino_speed{
+        background: url('./landing-images/Fast Loading Puppertino.jpg'),  rgba(0,0,0,0.3);
+        background-blend-mode: overlay;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center ;
+        padding: 0px;
+        padding: 100px 0px;
+      }
+
+      .puppertino-footer{
+        background: var(--p-slate-700);
+        color: #fff;
+      }
+
+      .puppertino-footer p,
+      .puppertino-footer a{
+        color: #fff;
       }
-      .speed_p {
-        margin: 0;
+
+      p sup{
+        font-size: 10px;
+      }
+
+      .p-form-switch span{
+        border: 1px solid var(--p-bd-card);
       }
-      .pad_5 {
-        padding: 10vh 0vw 20vh;
+
+      .puppertino-footer .footer-links a{
+        width: fit-content;
+        margin-top: 5px;
       }
+
+      @media (max-width: 768px){
+        h1{
+          font-size: 34px;
+        }
+
+        .container{
+          padding: 0;
+        }
+        .row{
+          margin-left:0;
+          margin-right:0;
+        }
+
+        .dark-mode-show{
+          height: 273px;
+        }
+
+        .main-cta{
+          padding: 20px;
+          height: 70vh;
+          background-position: bottom right;
+        }
+
+        .mt-100{
+          margin-top: 50px;
+        }
+        .main-cta h2{
+          font-size: 20px;
+        }
+
+        .main-cta h1{
+          font-size: 47px;
+        }
+      }
+
+      @media (min-width: 1919px){
+        .container{
+          max-width: 1600px;
+        }
+      }
+
+      .mw-780{
+        max-width: 780px;
+      }
+
     </style>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
@@ -131,93 +246,155 @@
       gtag('config', 'UA-176821843-1');
     </script>
   </head>
-  <body>
-    <div class="cta_pupper">
-      <h1>Your websites. Better.</h1>
-      <p>
-        Separate yourself from the rest. Create something unique with
-        <span>Puppertino</span>
-      </p>
-      <a
-        href="https://github.com/codedgar/Puppertino"
-        class="p-btn p-prim-col p-btn-round"
-        >Learn more</a
-      >
-      <a href="examples" class="p-link">Read the docs</a>
+<body>
+  <div class="main-cta">
+    <div class="container">
+      <div class="row">
+          <div class="col-md-10">
+            <div class="mw-780">
+              <h1>Puppertino Siberian: <br> Frosted Precision</h1>
+              <h2>A new era of web design, blending speed and style with Apple's human guidelines.</h2>
+              <div class="d-block d-md-flex align-items-center text-center">
+                <a href="https://github.com/codedgar/Puppertino" class="d-block d-md-inline-block p-btn p-prim-col">Download</a>
+                <a href="examples" class="d-block d-md-inline-block p-link p-silver-100-color p-white-darkmode p-footnote learn-more-link">Read the docs</a>
+              </div>
+          </div>
+          </div>
+      </div>
     </div>
-    <div class="container-no-pad pad_5" id="what">
-      <div class="row around-xs middle-xs">
-        <h2 class="title text_black">More than a framework</h2>
-        <div class="col-xs-11 col-md-3" data-aos="fade-in">
-          <img src="landing-images/apple.png" />
-        </div>
-        <div class="col-xs-11 col-md-5">
-          <p class="text_black">
-            Puppertino is a framework designed based on the
-            <strong>Human guidelines</strong> and
-            <strong>iOS and macOS</strong> from Apple, while adding our
-            flavor to the mix.<br /><br />
-            That doesn't mean that it's a direct rip-off of everything you would
-            find in the Human Guidelines. We work hard to feature components
-            that will be necessary   to build apps or websites.<br /><br />Puppertino
-            is built to work with any framework available, so if you use
-            <strong
-              >Bootstrap, Bulma, Flexbox Grid, Skeleton, or any
-              framework</strong
-            >, you should still be able to use Puppertino without problems.<br /><br />Last
-            but not least, Puppertino is <strong>modular</strong>, so if you
-            only want buttons or form elements, you can just use them.
+  </div>
+
+
+    <div class="container mt-100">
+      <div class="row align-items-center justify-content-around">
+        <div class="col-md-5">
+          <h1>All about Style<sup>(css)</sup> </h1>
+          <p>Welcome to <strong>Puppertino Siberian</strong>, a CSS framework designed to bridge the gap between the web and native macOS apps, delivering stunning interfaces that blend seamlessly into Apple's design language.
+            <br><br>
+            With Puppertino, developers and designers can effortlessly craft pixel-perfect websites and apps that look and feel like native experiences on macOS. Its curated design system simplifies your workflow, allowing you to focus on functionality while giving you the freedom to personalize every element to fit your brand.
           </p>
         </div>
+        <div class="col-md-5 mt-4 mt-md-0">
+          <img class="w-100 b-25" src="https://images.unsplash.com/photo-1606818855637-f637cdb124b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="">
+        </div>
       </div>
     </div>
-    <div class="speed_boye container-no-pad">
-      <div class="row">
-        <div class="col-xs-11 col-md-offset-1 col-md-5">
-          <h2 class="speed_h2">Focused on speed.</h2>
-          <p class="speed_p">
-            Puppertino weighs less than 50KB, making your website shine even in
-            the worst connections.
+
+    <div class="container mt-100">
+      <div class="row align-items-center justify-content-around">
+        <div class="col-md-5">
+          <img class="w-100 b-25" src="https://images.unsplash.com/photo-1494947665470-20322015e3a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
+        </div>
+        <div class="col-md-5 mt-4 mt-md-0">
+          <h1>It's Modular</h1>
+          <p>
+            With Puppertino Siberian, you’re in complete control. It’s designed to be fully modular, allowing you to import only the components you need. Don’t need the Layout CSS? Simply leave it out! Customize your app’s design with precision and efficiency, integrating only the styles that matter to your project.
+            <br><br>
+            By using only what’s essential, your app will load faster, perform better, and—most importantly—look incredible throughout the process. 
           </p>
         </div>
       </div>
     </div>
 
-    <div class="container-no-pad pad_5">
-      <h2 class="title text_black">Enhance your apps.</h2>
-      <div class="row around-xs">
-        <div class="col-xs-11 col-md-5">
-          <p class="text_black">
-            If you are creating WebApps, you can use Puppertino to make your
-            apps look more like a native app without having to style a lot of
-            things.<br /><br />
-            And if you are creating a website for a macOS / iOS app, Puppertino
-            can help you make it look nice without having to import a big
-            framework.<br /><br />Don't know where to start? Check these:
+    <div class="container mt-100">
+      <div class="row align-items-center justify-content-around"  id="darkmode-enter">
+        <div class="col-md-5">
+          <label class="p-form-switch toggles_dark_mode">
+            <input type="checkbox">
+            <span></span>
+          </label>
+          <h1>Dark Mode?<br> Of course.</h1>
+          <p>Puppertino comes ready with theming options, offering both dark and light versions using pure CSS. This allows you to seamlessly reuse colors and elements across both themes.
+            <br><br>
+            Easily integrate dark mode into your websites and apps with Puppertino's built-in Dark Mode Manager. It includes features like tab synchronization, user preference detection, and more, making it effortless to enhance the user experience across different environments.
           </p>
-          <a href="examples" class="p-btn p-prim-col">Examples</a>
-          <a href="examples" class="p-btn">Documentation</a>
         </div>
-        <div class="col-xs-11 col-md-5">
-          <img src="landing-images/devices.png" />
+        <div class="col-md-5 mt-4 mt-md-0">
+          <div class="dark-mode-show b-25"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid mt-100 p-0">
+      <div class="row m-0" id="puppertino_speed">
+        <div class="col-md-5 offset-md-1">
+          <h1 class="p-white-color">Your users won't see it coming</h1>
+          <p class="p-white-color mt-4">Puppertino is built for speed. Like, really fast. Every line of CSS is carefully crafted to ensure maximum efficiency, so your website or app runs as smoothly as a Siberian Husky sprinting through the snow. Puppertino keeps your project fast and sleek, delivering stunning visuals without compromising performance.          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mt-100 mb-100">
+      <div class="row align-items-center justify-content-center text-center">
+        <div class="col-md-7">
+          <h1>What are you waiting for? Let's get to it!</h1>
+          <p class="mt-5">Husky references aside, Puppertino is the CSS framework that simplifies bringing that Apple-inspired style to your project. Updated monthly, it’s packed with everything you need to make your website or app look stunning from the get-go.</p>
+          <div class="d-block d-md-flex align-items-center justify-content-center">
+            <a href="https://github.com/codedgar/Puppertino" class="d-block d-md-inline-block p-btn p-prim-col">Download</a>
+            <a href="examples" class="d-block d-md-inline-block p-link p-slate-700-color p-white-darkmode p-footnote learn-more-link">Read the docs</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid p-0 m-0">
+      <div class="row m-0">
+        <div class="puppertino-footer pt-5">
+          <div class="container">
+            <div class="row footer-links justify-content-around">
+              <div class="col-md-3">
+                <p><strong>The basics</strong></p>
+                <a href="examples/getting-started.html" class="d-block">Getting Started</a>
+                <a href="examples/buttons.html" class="d-block">Buttons</a>
+                <a href="examples/forms.html" class="d-block">Forms</a>
+              </div>
+              <div class="col-md-3">
+                <p><strong>Interactive Elements</strong></p>
+                <a href="examples/modals.html" class="d-block">Modals</a>
+                <a href="examples/tabs.html" class="d-block">Tabs</a>
+                <a href="examples/actions.html" class="d-block">Actions</a>
+                <a href="examples/segmented_controls.html" class="d-block">Segmented Controls</a>
+              </div>
+              <div class="col-md-3">
+                <p><strong>Decorative Elements</strong></p>
+                <a href="examples/layout.html" class="d-block">Layout</a>
+                <a href="examples/icons.html" class="d-block">Icons</a>
+                <a href="examples/shadows.html" class="d-block">Shadows & Blur</a>
+                <a href="examples" class="d-block">View All</a>
+              </div>
+              <div class="col-md-3">
+                <p><strong>Theming</strong></p>
+                <a href="examples/colors.html" class="d-block">Colors</a>
+                <a href="examples/dark_mode.html" class="d-block">Dark Mode</a>
+                <a href="examples/theming.html" class="d-block">Theming</a>
+                <a href="#" class="d-block">Advanced Theming</a>
+              </div>
+            </div>
+          </div>
+          <div class="text-center mt-5">
+            <p>Puppertino is not associated in any way with Apple Inc. <sup>(But could be, hmu Apple)</sup></p>
+            <p>Made by <a href="//twitter.com/codedgar_dev" class="p-blueberry-100-color">Codedgar</a>.</p>
+          </div>
         </div>
       </div>
     </div>
- 
 </body>
+  <script src="../src/js/dakmode_manager.js"></script>
   <script defer>
 
-    function retrieve_theme(){
-      let theme = localStorage.getItem('puppertino_theme');
-      if(theme != null){
-        document.body.classList.remove('default', 'p-dark-mode'); document.body.classList.add(theme);
-      }
+    document.querySelector('.toggles_dark_mode input').addEventListener('change',function(){
+      puppertinoThemeMan.toggle();
+    });
+
+    puppertinoThemeMan.init({autoDetect: true});
+    
+    const isDarkActive = puppertinoThemeMan.isDarkThemeActive();
+    console.log(isDarkActive);
+    if(isDarkActive){
+      document.querySelector('.toggles_dark_mode input').checked = true 
     }
 
-    window.addEventListener("storage",function(){
-      retrieve_theme();
-    },false);
 
-    retrieve_theme();
+
    </script>
 </html>

src/js/Puppertino.js

@@ -0,0 +1,33 @@
+function Puppertino(options, selector){
+    return {
+        options: options,
+        selector: selector,
+        modal: function(selector){
+            console.log('AAAAAAAA');
+
+            this.init = function(){
+                console.log('huh');
+            }
+            this.show = function(selector){
+                console.log(document.querySelector(selector));
+            }
+            this.hide = function(selector){
+
+                console.log(document.querySelector(selector));
+            }
+            this.toggle = function(selector){
+                console.log(document.querySelector(selector));
+            }
+            return this
+        }
+    }
+}
+
+options = {
+    'modal': {
+        'selector': 'try'
+    }
+}
+
+const robo1 = Puppertino().modal().show('body');
+

src/js/dakmode_manager.js

@@ -0,0 +1,71 @@
+const puppertinoThemeMan = (function () {
+  let options = {
+    autoDetect: true,
+    darkThemeClass: 'p-dark-mode',
+  };
+
+  function retrieveTheme() {
+    let theme = localStorage.getItem('puppertino_theme');
+    if (theme) {
+      document.body.classList.remove('default', options.darkThemeClass);
+      document.body.classList.add(theme);
+    }
+  }
+
+  function saveTheme(theme) {
+    localStorage.setItem('puppertino_theme', theme);
+    document.body.classList.remove('default', options.darkThemeClass);
+    document.body.classList.add(theme);
+  }
+
+  function detectSystemTheme() {
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (prefersDarkMode) {
+      saveTheme(options.darkThemeClass);
+    } else {
+      saveTheme('default');
+    }
+  }
+
+  return {
+    init: function (userOptions = {}) {
+      options = { ...options, ...userOptions };
+
+      // Check if the user has already selected a theme, otherwise detect system theme
+      const userTheme = localStorage.getItem('puppertino_theme');
+      if (!userTheme) {
+        if (options.autoDetect && window.matchMedia) {
+          detectSystemTheme();
+          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectSystemTheme);
+        } else {
+          retrieveTheme();
+        }
+      } else {
+        retrieveTheme();
+      }
+
+      // Detect changes to puppertino_theme in other tabs
+      window.addEventListener('storage', function (event) {
+        if (event.key === 'puppertino_theme') {
+          retrieveTheme();
+        }
+      }, false);
+    },
+
+    toggle: function () {
+      const currentTheme = document.body.classList.contains(options.darkThemeClass) ? 'default' : options.darkThemeClass;
+      saveTheme(currentTheme);
+    },
+
+    isDarkThemeActive: function () {
+      return document.body.classList.contains(options.darkThemeClass);
+    }
+  };
+})();
+
+// Usage:
+// puppertinoThemeMan.init({ autoDetect: true, darkThemeClass: 'custom-dark-theme' });
+// To toggle between light and dark mode:
+// puppertinoThemeMan.toggle();
+// To check if dark theme is active:
+// const isDarkActive = puppertinoThemeMan.isDarkThemeActive();