diff --git a/LICENSE b/LICENSE index 3178eae9..04653795 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2020-23 CodeForms / Fatih Kececi +Copyright (c) 2020-25 Fatih Kececi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 77d539b8..debe0ae6 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,5 @@ -## Introduction -

- Nightly Builds | - Templates | - Changelog -

- -

- Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. -

+## Punica CSS Framework - Documentation

- - -

- -### Your custom CSS Framework -Punica also lets you create your custom CSS Framework. You can customize all the class names, apply your color scheme, enable or disable features of element/component, change all variables as your need and create your themes according to your taste. You are completely free! - -### API for Developers -Punica API is based on SCSS maps for various options, values, generating class names, and themes. The Punica SCSS maps contain a key list of options/values/class names/theme variables. For example, you can customize the Punica as you wish with the ```options.scss``` and ```classnames.scss``` API files and of course generate your custom themes with [Punica's theme maps](https://github.com/codeforms/punica-themes). Take a look at the official [SASS docs](https://sass-lang.com/documentation/values/maps) to get started about SASS maps. - -### Install From CDN -If you want to quickly add the Punica CSS to your project, you can use the JsDelivr CDN; -```html - -``` - -### HTML Markup & Including Material Symbols and Icons library -For your default setup, add the Punica CSS file to the element of your HTML5 document. Also Punica CSS uses Material Symbols and Icons library, therefore you should include this library as well. That's it! -```html - - - - Title - - - - - - - - -``` + This static documentation site has been created using Jigsaw, a Laravel-based static site generator. +

\ No newline at end of file diff --git a/api/configuration/index.html b/api/configuration/index.html new file mode 100644 index 00000000..6bd9a584 --- /dev/null +++ b/api/configuration/index.html @@ -0,0 +1,215 @@ + + + + + + + Configuration - Punica CSS Framework v3 + + + + + + +
+
+
+ + + + + +
+ + Punica CSS v3 + +
+ +
+
+
+ Modules + Utilities + API Docs +
+
+
+
+
+ + Preview keyboard_arrow_down + + +
+
+ + + +
+
+
+
+
+
+
+
+
+
api docs
+ Configuration +
+
+
+
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Configuration +

    +
    +
    +
    Punica CSS Framework allows you to seamlessly modify all configuration settings through 3 API files (options, utilities, and themes), enabling effortless customization and recompilation for your project.
    +
    +
    +
    +
    +
    +
    + The options.scss API file defines the settings and options for all modules. It allows you to completely enable/disable any module or turn on/off its features. You can also customize styles by adding new size or color options, renaming class names, and modifying all CSS properties for full flexibility. +
    +
    + +
    +
    + The utilities.scss API file provides a flexible interface for managing and customizing Punica’s utility class library. It allows you to add new utility classes, disable existing ones, and adjust predefined settings to seamlessly align with your project’s needs. +
    +
    + +
    +
    + You can create new themes using the themes.scss API file and manage all settings in the options.scss and utilities.scss API files through your theme map. This approach allows for easy customization and flexibility, enabling you to adapt Punica to meet the specific needs of your project. By consolidating all configuration settings into a single theme map, you streamline the process of updating or switching between themes without the need for modifying multiple files. +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/core/global-colors/index.html b/api/core/global-colors/index.html new file mode 100644 index 00000000..52b4cf26 --- /dev/null +++ b/api/core/global-colors/index.html @@ -0,0 +1,203 @@ + + + + + + + Core/Global/Colors.scss - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Core/Global/Colors.scss +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Core/Global/Colors.scss +

    +
    +
    + + article Source + +
    +
    +
    The Colors.scss file is used to add extra colors to Punica. The defined color variables can be applied across various files of Punica. These colors are completely separate from the dynamically generated color palette.
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/core/global-getters/index.html b/api/core/global-getters/index.html new file mode 100644 index 00000000..5e704320 --- /dev/null +++ b/api/core/global-getters/index.html @@ -0,0 +1,334 @@ + + + + + + + Core/Global/Getters.scss - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Core/Global/Getters.scss +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Core/Global/Getters.scss +

    +
    +
    + + article Source + +
    +
    +
    +
    +
    +
    +
    +
    +
    + alternate_emailfunction options ($keys...) +
    +
    +
    +

    Get options value by key from the options.scss API file

    + + + + + + + + + + + + + +
    ParametersType
    $keysString(s)
    +
    +
    + +
    +
    +
    + alternate_emailfunction settings ($node, $keys...) +
    +
    +
    +

    Get default "settings" of a specific module from the options.scss API file

    + + + + + + + + + + + + + + + + + +
    ParametersType
    $nodeString
    $keysString(s)
    +
    +
    + +
    +
    +
    + alternate_emailfunction class ($node, $key) +
    +
    +
    +

    Get class name of a specific module from the options.scss API file

    + + + + + + + + + + + + + + + + + +
    ParametersType
    $nodeString
    $keyString
    +
    +
    + +
    +
    +
    + alternate_emailfunction utils ($node, $key: null) +
    +
    +
    +

    Get variable of a specific utility from the utilities.scss file

    + + + + + + + + + + + + + + + + + +
    ParametersType
    $nodeString
    $keyString
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/core/global-options/index.html b/api/core/global-options/index.html new file mode 100644 index 00000000..6fe16476 --- /dev/null +++ b/api/core/global-options/index.html @@ -0,0 +1,301 @@ + + + + + + + Core/Global/Options.scss - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Core/Global/Options.scss +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Core/Global/Options.scss +

    +
    +
    + + article Source + +
    +
    +
    This file consists of helper functions created to retrieve variables from the options.scss API file.
    +
    +
    +
    +
    +
    +
    +
    + alternate_emailfunction module ($keys...) +
    +
    +
    +

    Get a specific module's variable from the theme map or from the options.scss API file, which contains the default settings.

    + + + + + + + + + + + + + +
    ParametersType
    $keysString(s)
    +
    +
    + +
    +
    +
    + alternate_emailfunction features ($module, $feature: null): bool +
    +
    +
    +

    Get features of a module from the theme map or from the options.scss API file, which contains the default settings.

    + + + + + + + + + + + + + + + + + +
    ParametersType
    $moduleString
    $featureString|null
    +
    +
    + +
    +
    +
    + alternate_emailfunction enabled ($module: null): bool +
    +
    +
    +

    Is module enabled?

    + + + + + + + + + + + + + +
    ParametersType
    $moduleString|null
    +
    +
    + +
    +
    +
    + alternate_emailfunction set_variable ($keys...) +
    +
    +
    + + + + + + + + + + + + + +
    ParametersType
    $keysString(s)
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/core/theme-getters/index.html b/api/core/theme-getters/index.html new file mode 100644 index 00000000..2635ff9b --- /dev/null +++ b/api/core/theme-getters/index.html @@ -0,0 +1,224 @@ + + + + + + + Core/Theme/Getters.scss - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Core/Theme/Getters.scss +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Core/Theme/Getters.scss +

    +
    +
    + + article Source + +
    +
    +
    This file contains the theme() function, which retrieves variables specific to Punica's active theme.
    +
    +
    +
    +
    +
    +
    +
    + alternate_emailfunction theme ($node, $keys...) +
    +
    +
    +

    Get active theme's value by key(s) from the theme map

    + + + + + + + + + + + + + + + + + +
    ParametersType
    $nodeString
    $keysString(s)
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/installation/index.html b/api/installation/index.html new file mode 100644 index 00000000..4f8df9ae --- /dev/null +++ b/api/installation/index.html @@ -0,0 +1,215 @@ + + + + + + + Get Started - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Get Started +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Get Started +

    +
    +
    +
    It is easy to compile the Punica from source, all you need to do clone this repo locally;
    +
    +
    +
    +
    +
    +
    + +
    +
    + Next, install official SASS package for Punica using the Node Package Manager; + +
    +
    +
    Compile the Punica
    +
    +
    + And finally, you can compile the Punica using watch or prod commands. The difference between prod and watch is the prod command will compile the Punica then exit while the watch command will compile the Punica then watch the files and recompile when one of them changes. +
    +
    +

    ..compile the Punica then exit;

    + +

    ..Or compile the Punica then watch the files and recompile when one of them changes;

    + +

    ..Or;

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/options/index.html b/api/options/index.html new file mode 100644 index 00000000..2503b2c8 --- /dev/null +++ b/api/options/index.html @@ -0,0 +1,230 @@ + + + + + + + Options API - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Options API +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Options API +

    +
    +
    + + article Source + +
    +
    +
    The options.scss API file defines the default settings and options for all modules. You can enable/disable any module to fit your project's needs, customize class names, and modify all CSS settings. Additionally, you can define new size or color styles for specific modules to further tailor the framework to your preferences.
    +
    +
    +
    +
    +
    +
    +
    + You can easily modify or override all settings in this file through your theme map. +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyDescription
    enabledUsed to enable/disable a module
    featuresUsed to enable/disable features of a module
    classnamesUsed to modify class names of a module
    settingsUsed to customize settings of a module
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/themes/index.html b/api/themes/index.html new file mode 100644 index 00000000..c7f4acdb --- /dev/null +++ b/api/themes/index.html @@ -0,0 +1,456 @@ + + + + + + + Themes API - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Themes API +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Themes API +

    +
    +
    + + article Source + +
    +
    +
    You can create new themes using the themes.scss API file and manage all settings in the options.scss and utilities.scss API files through your theme map. This approach allows for easy customization and flexibility, enabling you to adapt Punica to meet the specific needs of your project.

    By consolidating all configuration settings into a single theme map, you streamline the process of updating or switching between themes without the need for modifying multiple API files.
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Structure of a Theme Map
    KeyDescription
    nameName of your theme
    typeStyle of your theme (light or dark)
    typographyGlobal typography properties of your theme
    + font-family
    + font-url
    + font-size
    + font-weight
    + line-height +     		+ ''
    + ''
    + ''
    + ''
    + '' +
    colorGlobal color preferences of your theme
    + text
    + background
    + primary
    + success
    + warning
    + error
    + dark +     		+ ''
    + ''
    + ''
    + ''
    + ''
    + ''
    + '' +
    borderGlobal border properties of your theme
    + color
    + width
    + style
    + radius +     		+ ''
    + ''
    + ''
    + ''
    + '' +
    shadowGlobal shadow properties of your theme
    OptionalDescription
    classnamesUsed to change/override classnames of a module
    modulesUsed to change/override properties of a module
    utilitiesUsed to change/override properties of an utility
    +
    +
    +
    Your Custom Theme
    +
    +
    +

    + In Punica, the default theme map in themes.scss is structured to help you create your own theme. The classnames, modules, and utilities keys are fully optional and can be used as needed for your project. +

    + +

    + If you've finished creating your theme, simply update the $active-theme variable in the punica.scss starter file with your theme's name and recompile Punica. +

    + +
    +
    +
    Customization & Override
    +
    +
    +

    + In Punica, if you want to override default settings, variables, and class names in the options.scss and utilities.scss API files, you can use the classnames, modules, and utilities keys within your theme map. These keys allow you to customize Punica's default settings and recompile it to fit your project's needs. +

    +
    +
    + If you want to change the class names of a module through your theme map; + +
    +
    + If you want to modify the settings of a module through your theme map; + +
    +
    + If you want to modify the settings of an utility through your theme map; + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/api/utils/index.html b/api/utils/index.html new file mode 100644 index 00000000..8807f575 --- /dev/null +++ b/api/utils/index.html @@ -0,0 +1,250 @@ + + + + + + + Utilities API - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    api docs
    + Utilities API +
    +
    +
    +
  • + Installation +
    • +
  • + Configuration +
    • +
  • + Root Directory +
    +
    + + options.scss + + + utilities.scss + + + themes.scss + + + folder_open Core / Global + +
    +
    + + Colors.scss + +
    +
    + + Getters.scss + +
    +
    + + Options.scss + +
    +
    + + folder_open Core / Theme +
    +
    + + Getters.scss + +
    +
    + +
    +
    +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Utilities API +

    +
    +
    + + article Source + +
    +
    +
    The utilities.scss API file provides a flexible interface for managing and customizing Punica’s utility class library. It allows you to add new utility classes, disable existing ones, and adjust predefined settings to seamlessly align with your project’s needs.
    +
    +
    +
    +
    +
    +
    +
    + You can easily modify or override all settings in this file through your theme map. +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyDescription
    enabledUsed to enable/disable an utility
    propertyCSS property name of an utility class
    prefixPrefix of class name for an utility
    specificityStyle declaration applied to a utility class
    unitLength or angle units used for a utility's value. (optional)
    argsExtra variables used for a utility's value. (optional)
    paletteVariables for the color palette to be created. (optional)
    variablesVariables used for a utility's value.
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/assets/build/css/prism.css b/assets/build/css/prism.css new file mode 100644 index 00000000..338f459b --- /dev/null +++ b/assets/build/css/prism.css @@ -0,0 +1,5 @@ +/* PrismJS 1.29.0 +https://prismjs.com/ +Theme : Material Dark - Custom Punica Style for PrismJS +download.html#themes=prism&languages=markup+css+clike+javascript+scss&plugins=unescaped-markup+normalize-whitespace+toolbar+copy-to-clipboard */ +code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#eee;background: #2c2c31;font-family:monospace,monospace;font-size:.96rem;line-height:1.4;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius: 12px;}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;margin:.5em 0;padding:1.25em 1em}.language-css>code,.language-sass>code,.language-scss>code,.token.number,.token.unit{color:#fd9170}[class*=language-] .namespace{opacity:.7}.token.atrule,.token.boolean,.token.constant,.token.function,.token.keyword,.token.symbol{color:#f66}.token.attr-name,.token.builtin,.token.class{color:#F5B74F}.token.attr-value,.token.attribute,.token.pseudo-class,.token.pseudo-element,.token.string{color:#ABD174}.token.cdata,.token.char,.token.inserted,.token.property{color:#61C5DA}.token.class-name,.token.hexcode,.token.regex{color:#f2ff00}.token.comment,.token.doctype,.token.prolog{color:#616161}.token.deleted,.token.entity,.token.selector,.token.tag,.token.url,.token.variable{color:#f66}.token.id,.token.important{color:#B882DB;font-weight:700}.token.operator,.token.punctuation{color:#61C5DA}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:1;top:6px;left:-1px}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>button{border:0;font:inherit;line-height:normal;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#ddd;font-size:.8em;padding:.4em .5em;background:#3f3f46;box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-top-right-radius:.2em; border-bottom-right-radius:.2em;cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:#fff;text-decoration:none} diff --git a/assets/build/js/prism.js b/assets/build/js/prism.js new file mode 100644 index 00000000..ecfbf022 --- /dev/null +++ b/assets/build/js/prism.js @@ -0,0 +1,12 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+scss&plugins=unescaped-markup+normalize-whitespace+toolbar+copy-to-clipboard */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; +!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; +Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss; +"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Prism.plugins.UnescapedMarkup=!0,Prism.hooks.add("before-highlightall",(function(e){e.selector+=', [class*="lang-"] script[type="text/plain"], [class*="language-"] script[type="text/plain"], script[type="text/plain"][class*="lang-"], script[type="text/plain"][class*="language-"]'})),Prism.hooks.add("before-sanity-check",(function(e){var t=e.element;if(t.matches('script[type="text/plain"]')){var a=document.createElement("code"),c=document.createElement("pre");c.className=a.className=t.className;var n=t.dataset;return Object.keys(n||{}).forEach((function(e){Object.prototype.hasOwnProperty.call(n,e)&&(c.dataset[e]=n[e])})),a.textContent=e.code=e.code.replace(/<\/script(?:>|>)/gi,"<\/script>"),c.appendChild(a),t.parentNode.replaceChild(c,t),void(e.element=a)}if(!e.code){var o=t.childNodes;1===o.length&&"#comment"==o[0].nodeName&&(t.textContent=e.code=o[0].textContent)}}))); +!function(){if("undefined"!=typeof Prism){var e=Object.assign||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e},t={"remove-trailing":"boolean","remove-indent":"boolean","left-trim":"boolean","right-trim":"boolean","break-lines":"number",indent:"number","remove-initial-line-feed":"boolean","tabs-to-spaces":"number","spaces-to-tabs":"number"};n.prototype={setDefaults:function(t){this.defaults=e(this.defaults,t)},normalize:function(t,n){for(var r in n=e(this.defaults,n)){var i=r.replace(/-(\w)/g,(function(e,t){return t.toUpperCase()}));"normalize"!==r&&"setDefaults"!==i&&n[r]&&this[i]&&(t=this[i].call(this,t,n[r]))}return t},leftTrim:function(e){return e.replace(/^\s+/,"")},rightTrim:function(e){return e.replace(/\s+$/,"")},tabsToSpaces:function(e,t){return t=0|t||4,e.replace(/\t/g,new Array(++t).join(" "))},spacesToTabs:function(e,t){return t=0|t||4,e.replace(RegExp(" {"+t+"}","g"),"\t")},removeTrailing:function(e){return e.replace(/\s*?$/gm,"")},removeInitialLineFeed:function(e){return e.replace(/^(?:\r?\n|\r)/,"")},removeIndent:function(e){var t=e.match(/^[^\S\n\r]*(?=\S)/gm);return t&&t[0].length?(t.sort((function(e,t){return e.length-t.length})),t[0].length?e.replace(RegExp("^"+t[0],"gm"),""):e):e},indent:function(e,t){return e.replace(/^[^\S\n\r]*(?=\S)/gm,new Array(++t).join("\t")+"$&")},breakLines:function(e,t){t=!0===t?80:0|t||80;for(var n=e.split("\n"),i=0;it&&(o[l]="\n"+o[l],a=s)}n[i]=o.join("")}return n.join("\n")}},"undefined"!=typeof module&&module.exports&&(module.exports=n),Prism.plugins.NormalizeWhitespace=new n({"remove-trailing":!0,"remove-indent":!0,"left-trim":!0,"right-trim":!0}),Prism.hooks.add("before-sanity-check",(function(e){var n=Prism.plugins.NormalizeWhitespace;if((!e.settings||!1!==e.settings["whitespace-normalization"])&&Prism.util.isActive(e.element,"whitespace-normalization",!0))if(e.element&&e.element.parentNode||!e.code){var r=e.element.parentNode;if(e.code&&r&&"pre"===r.nodeName.toLowerCase()){for(var i in null==e.settings&&(e.settings={}),t)if(Object.hasOwnProperty.call(t,i)){var o=t[i];if(r.hasAttribute("data-"+i))try{var a=JSON.parse(r.getAttribute("data-"+i)||"true");typeof a===o&&(e.settings[i]=a)}catch(e){}}for(var l=r.childNodes,s="",c="",u=!1,m=0;mcode,:not(pre)>kbd,:not(pre)>samp{color:#972727;white-space:nowrap;padding:2px 6px;font-size:1em}.container{width:100%;margin:0 auto;padding:0 40px}@media only screen and (max-width: 768px){.container{padding:0 13.3333333333px}}.row{display:grid;grid-gap:6px;grid-template-columns:repeat(16, 1fr)}.row>[class^=col]{height:fit-content;padding:.3rem;min-height:.125rem}.row.equal>[class^=col]{height:auto}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}.col-13{grid-column:span 13}.col-14{grid-column:span 14}.col-15{grid-column:span 15}.col-16{grid-column:span 16}@media only screen and (min-width: 0){.col-xs-1{grid-column:span 1}.col-xs-2{grid-column:span 2}.col-xs-3{grid-column:span 3}.col-xs-4{grid-column:span 4}.col-xs-5{grid-column:span 5}.col-xs-6{grid-column:span 6}.col-xs-7{grid-column:span 7}.col-xs-8{grid-column:span 8}.col-xs-9{grid-column:span 9}.col-xs-10{grid-column:span 10}.col-xs-11{grid-column:span 11}.col-xs-12{grid-column:span 12}.col-xs-13{grid-column:span 13}.col-xs-14{grid-column:span 14}.col-xs-15{grid-column:span 15}.col-xs-16{grid-column:span 16}}@media only screen and (min-width: 500px){.col-sm-1{grid-column:span 1}.col-sm-2{grid-column:span 2}.col-sm-3{grid-column:span 3}.col-sm-4{grid-column:span 4}.col-sm-5{grid-column:span 5}.col-sm-6{grid-column:span 6}.col-sm-7{grid-column:span 7}.col-sm-8{grid-column:span 8}.col-sm-9{grid-column:span 9}.col-sm-10{grid-column:span 10}.col-sm-11{grid-column:span 11}.col-sm-12{grid-column:span 12}.col-sm-13{grid-column:span 13}.col-sm-14{grid-column:span 14}.col-sm-15{grid-column:span 15}.col-sm-16{grid-column:span 16}}@media only screen and (min-width: 768px){.col-md-1{grid-column:span 1}.col-md-2{grid-column:span 2}.col-md-3{grid-column:span 3}.col-md-4{grid-column:span 4}.col-md-5{grid-column:span 5}.col-md-6{grid-column:span 6}.col-md-7{grid-column:span 7}.col-md-8{grid-column:span 8}.col-md-9{grid-column:span 9}.col-md-10{grid-column:span 10}.col-md-11{grid-column:span 11}.col-md-12{grid-column:span 12}.col-md-13{grid-column:span 13}.col-md-14{grid-column:span 14}.col-md-15{grid-column:span 15}.col-md-16{grid-column:span 16}}@media only screen and (min-width: 992px){.col-lg-1{grid-column:span 1}.col-lg-2{grid-column:span 2}.col-lg-3{grid-column:span 3}.col-lg-4{grid-column:span 4}.col-lg-5{grid-column:span 5}.col-lg-6{grid-column:span 6}.col-lg-7{grid-column:span 7}.col-lg-8{grid-column:span 8}.col-lg-9{grid-column:span 9}.col-lg-10{grid-column:span 10}.col-lg-11{grid-column:span 11}.col-lg-12{grid-column:span 12}.col-lg-13{grid-column:span 13}.col-lg-14{grid-column:span 14}.col-lg-15{grid-column:span 15}.col-lg-16{grid-column:span 16}}@media only screen and (min-width: 1260px){.col-xl-1{grid-column:span 1}.col-xl-2{grid-column:span 2}.col-xl-3{grid-column:span 3}.col-xl-4{grid-column:span 4}.col-xl-5{grid-column:span 5}.col-xl-6{grid-column:span 6}.col-xl-7{grid-column:span 7}.col-xl-8{grid-column:span 8}.col-xl-9{grid-column:span 9}.col-xl-10{grid-column:span 10}.col-xl-11{grid-column:span 11}.col-xl-12{grid-column:span 12}.col-xl-13{grid-column:span 13}.col-xl-14{grid-column:span 14}.col-xl-15{grid-column:span 15}.col-xl-16{grid-column:span 16}}@media only screen and (min-width: 1400px){.col-xxl-1{grid-column:span 1}.col-xxl-2{grid-column:span 2}.col-xxl-3{grid-column:span 3}.col-xxl-4{grid-column:span 4}.col-xxl-5{grid-column:span 5}.col-xxl-6{grid-column:span 6}.col-xxl-7{grid-column:span 7}.col-xxl-8{grid-column:span 8}.col-xxl-9{grid-column:span 9}.col-xxl-10{grid-column:span 10}.col-xxl-11{grid-column:span 11}.col-xxl-12{grid-column:span 12}.col-xxl-13{grid-column:span 13}.col-xxl-14{grid-column:span 14}.col-xxl-15{grid-column:span 15}.col-xxl-16{grid-column:span 16}}@media only screen and (min-width: 0){.col-xs-1.offset-xs-2{grid-column:2/span 1}.col-xs-1.offset-xs-3{grid-column:3/span 1}.col-xs-1.offset-xs-4{grid-column:4/span 1}.col-xs-1.offset-xs-5{grid-column:5/span 1}.col-xs-1.offset-xs-6{grid-column:6/span 1}.col-xs-1.offset-xs-7{grid-column:7/span 1}.col-xs-1.offset-xs-8{grid-column:8/span 1}.col-xs-1.offset-xs-9{grid-column:9/span 1}.col-xs-1.offset-xs-10{grid-column:10/span 1}.col-xs-1.offset-xs-11{grid-column:11/span 1}.col-xs-1.offset-xs-12{grid-column:12/span 1}.col-xs-1.offset-xs-13{grid-column:13/span 1}.col-xs-1.offset-xs-14{grid-column:14/span 1}.col-xs-1.offset-xs-15{grid-column:15/span 1}.col-xs-1.offset-xs-16{grid-column:16/span 1}.col-xs-2.offset-xs-2{grid-column:2/span 2}.col-xs-2.offset-xs-3{grid-column:3/span 2}.col-xs-2.offset-xs-4{grid-column:4/span 2}.col-xs-2.offset-xs-5{grid-column:5/span 2}.col-xs-2.offset-xs-6{grid-column:6/span 2}.col-xs-2.offset-xs-7{grid-column:7/span 2}.col-xs-2.offset-xs-8{grid-column:8/span 2}.col-xs-2.offset-xs-9{grid-column:9/span 2}.col-xs-2.offset-xs-10{grid-column:10/span 2}.col-xs-2.offset-xs-11{grid-column:11/span 2}.col-xs-2.offset-xs-12{grid-column:12/span 2}.col-xs-2.offset-xs-13{grid-column:13/span 2}.col-xs-2.offset-xs-14{grid-column:14/span 2}.col-xs-2.offset-xs-15{grid-column:15/span 2}.col-xs-2.offset-xs-16{grid-column:16/span 2}.col-xs-3.offset-xs-2{grid-column:2/span 3}.col-xs-3.offset-xs-3{grid-column:3/span 3}.col-xs-3.offset-xs-4{grid-column:4/span 3}.col-xs-3.offset-xs-5{grid-column:5/span 3}.col-xs-3.offset-xs-6{grid-column:6/span 3}.col-xs-3.offset-xs-7{grid-column:7/span 3}.col-xs-3.offset-xs-8{grid-column:8/span 3}.col-xs-3.offset-xs-9{grid-column:9/span 3}.col-xs-3.offset-xs-10{grid-column:10/span 3}.col-xs-3.offset-xs-11{grid-column:11/span 3}.col-xs-3.offset-xs-12{grid-column:12/span 3}.col-xs-3.offset-xs-13{grid-column:13/span 3}.col-xs-3.offset-xs-14{grid-column:14/span 3}.col-xs-3.offset-xs-15{grid-column:15/span 3}.col-xs-3.offset-xs-16{grid-column:16/span 3}.col-xs-4.offset-xs-2{grid-column:2/span 4}.col-xs-4.offset-xs-3{grid-column:3/span 4}.col-xs-4.offset-xs-4{grid-column:4/span 4}.col-xs-4.offset-xs-5{grid-column:5/span 4}.col-xs-4.offset-xs-6{grid-column:6/span 4}.col-xs-4.offset-xs-7{grid-column:7/span 4}.col-xs-4.offset-xs-8{grid-column:8/span 4}.col-xs-4.offset-xs-9{grid-column:9/span 4}.col-xs-4.offset-xs-10{grid-column:10/span 4}.col-xs-4.offset-xs-11{grid-column:11/span 4}.col-xs-4.offset-xs-12{grid-column:12/span 4}.col-xs-4.offset-xs-13{grid-column:13/span 4}.col-xs-4.offset-xs-14{grid-column:14/span 4}.col-xs-4.offset-xs-15{grid-column:15/span 4}.col-xs-4.offset-xs-16{grid-column:16/span 4}.col-xs-5.offset-xs-2{grid-column:2/span 5}.col-xs-5.offset-xs-3{grid-column:3/span 5}.col-xs-5.offset-xs-4{grid-column:4/span 5}.col-xs-5.offset-xs-5{grid-column:5/span 5}.col-xs-5.offset-xs-6{grid-column:6/span 5}.col-xs-5.offset-xs-7{grid-column:7/span 5}.col-xs-5.offset-xs-8{grid-column:8/span 5}.col-xs-5.offset-xs-9{grid-column:9/span 5}.col-xs-5.offset-xs-10{grid-column:10/span 5}.col-xs-5.offset-xs-11{grid-column:11/span 5}.col-xs-5.offset-xs-12{grid-column:12/span 5}.col-xs-5.offset-xs-13{grid-column:13/span 5}.col-xs-5.offset-xs-14{grid-column:14/span 5}.col-xs-5.offset-xs-15{grid-column:15/span 5}.col-xs-5.offset-xs-16{grid-column:16/span 5}.col-xs-6.offset-xs-2{grid-column:2/span 6}.col-xs-6.offset-xs-3{grid-column:3/span 6}.col-xs-6.offset-xs-4{grid-column:4/span 6}.col-xs-6.offset-xs-5{grid-column:5/span 6}.col-xs-6.offset-xs-6{grid-column:6/span 6}.col-xs-6.offset-xs-7{grid-column:7/span 6}.col-xs-6.offset-xs-8{grid-column:8/span 6}.col-xs-6.offset-xs-9{grid-column:9/span 6}.col-xs-6.offset-xs-10{grid-column:10/span 6}.col-xs-6.offset-xs-11{grid-column:11/span 6}.col-xs-6.offset-xs-12{grid-column:12/span 6}.col-xs-6.offset-xs-13{grid-column:13/span 6}.col-xs-6.offset-xs-14{grid-column:14/span 6}.col-xs-6.offset-xs-15{grid-column:15/span 6}.col-xs-6.offset-xs-16{grid-column:16/span 6}.col-xs-7.offset-xs-2{grid-column:2/span 7}.col-xs-7.offset-xs-3{grid-column:3/span 7}.col-xs-7.offset-xs-4{grid-column:4/span 7}.col-xs-7.offset-xs-5{grid-column:5/span 7}.col-xs-7.offset-xs-6{grid-column:6/span 7}.col-xs-7.offset-xs-7{grid-column:7/span 7}.col-xs-7.offset-xs-8{grid-column:8/span 7}.col-xs-7.offset-xs-9{grid-column:9/span 7}.col-xs-7.offset-xs-10{grid-column:10/span 7}.col-xs-7.offset-xs-11{grid-column:11/span 7}.col-xs-7.offset-xs-12{grid-column:12/span 7}.col-xs-7.offset-xs-13{grid-column:13/span 7}.col-xs-7.offset-xs-14{grid-column:14/span 7}.col-xs-7.offset-xs-15{grid-column:15/span 7}.col-xs-7.offset-xs-16{grid-column:16/span 7}.col-xs-8.offset-xs-2{grid-column:2/span 8}.col-xs-8.offset-xs-3{grid-column:3/span 8}.col-xs-8.offset-xs-4{grid-column:4/span 8}.col-xs-8.offset-xs-5{grid-column:5/span 8}.col-xs-8.offset-xs-6{grid-column:6/span 8}.col-xs-8.offset-xs-7{grid-column:7/span 8}.col-xs-8.offset-xs-8{grid-column:8/span 8}.col-xs-8.offset-xs-9{grid-column:9/span 8}.col-xs-8.offset-xs-10{grid-column:10/span 8}.col-xs-8.offset-xs-11{grid-column:11/span 8}.col-xs-8.offset-xs-12{grid-column:12/span 8}.col-xs-8.offset-xs-13{grid-column:13/span 8}.col-xs-8.offset-xs-14{grid-column:14/span 8}.col-xs-8.offset-xs-15{grid-column:15/span 8}.col-xs-8.offset-xs-16{grid-column:16/span 8}.col-xs-9.offset-xs-2{grid-column:2/span 9}.col-xs-9.offset-xs-3{grid-column:3/span 9}.col-xs-9.offset-xs-4{grid-column:4/span 9}.col-xs-9.offset-xs-5{grid-column:5/span 9}.col-xs-9.offset-xs-6{grid-column:6/span 9}.col-xs-9.offset-xs-7{grid-column:7/span 9}.col-xs-9.offset-xs-8{grid-column:8/span 9}.col-xs-9.offset-xs-9{grid-column:9/span 9}.col-xs-9.offset-xs-10{grid-column:10/span 9}.col-xs-9.offset-xs-11{grid-column:11/span 9}.col-xs-9.offset-xs-12{grid-column:12/span 9}.col-xs-9.offset-xs-13{grid-column:13/span 9}.col-xs-9.offset-xs-14{grid-column:14/span 9}.col-xs-9.offset-xs-15{grid-column:15/span 9}.col-xs-9.offset-xs-16{grid-column:16/span 9}.col-xs-10.offset-xs-2{grid-column:2/span 10}.col-xs-10.offset-xs-3{grid-column:3/span 10}.col-xs-10.offset-xs-4{grid-column:4/span 10}.col-xs-10.offset-xs-5{grid-column:5/span 10}.col-xs-10.offset-xs-6{grid-column:6/span 10}.col-xs-10.offset-xs-7{grid-column:7/span 10}.col-xs-10.offset-xs-8{grid-column:8/span 10}.col-xs-10.offset-xs-9{grid-column:9/span 10}.col-xs-10.offset-xs-10{grid-column:10/span 10}.col-xs-10.offset-xs-11{grid-column:11/span 10}.col-xs-10.offset-xs-12{grid-column:12/span 10}.col-xs-10.offset-xs-13{grid-column:13/span 10}.col-xs-10.offset-xs-14{grid-column:14/span 10}.col-xs-10.offset-xs-15{grid-column:15/span 10}.col-xs-10.offset-xs-16{grid-column:16/span 10}.col-xs-11.offset-xs-2{grid-column:2/span 11}.col-xs-11.offset-xs-3{grid-column:3/span 11}.col-xs-11.offset-xs-4{grid-column:4/span 11}.col-xs-11.offset-xs-5{grid-column:5/span 11}.col-xs-11.offset-xs-6{grid-column:6/span 11}.col-xs-11.offset-xs-7{grid-column:7/span 11}.col-xs-11.offset-xs-8{grid-column:8/span 11}.col-xs-11.offset-xs-9{grid-column:9/span 11}.col-xs-11.offset-xs-10{grid-column:10/span 11}.col-xs-11.offset-xs-11{grid-column:11/span 11}.col-xs-11.offset-xs-12{grid-column:12/span 11}.col-xs-11.offset-xs-13{grid-column:13/span 11}.col-xs-11.offset-xs-14{grid-column:14/span 11}.col-xs-11.offset-xs-15{grid-column:15/span 11}.col-xs-11.offset-xs-16{grid-column:16/span 11}.col-xs-12.offset-xs-2{grid-column:2/span 12}.col-xs-12.offset-xs-3{grid-column:3/span 12}.col-xs-12.offset-xs-4{grid-column:4/span 12}.col-xs-12.offset-xs-5{grid-column:5/span 12}.col-xs-12.offset-xs-6{grid-column:6/span 12}.col-xs-12.offset-xs-7{grid-column:7/span 12}.col-xs-12.offset-xs-8{grid-column:8/span 12}.col-xs-12.offset-xs-9{grid-column:9/span 12}.col-xs-12.offset-xs-10{grid-column:10/span 12}.col-xs-12.offset-xs-11{grid-column:11/span 12}.col-xs-12.offset-xs-12{grid-column:12/span 12}.col-xs-12.offset-xs-13{grid-column:13/span 12}.col-xs-12.offset-xs-14{grid-column:14/span 12}.col-xs-12.offset-xs-15{grid-column:15/span 12}.col-xs-12.offset-xs-16{grid-column:16/span 12}.col-xs-13.offset-xs-2{grid-column:2/span 13}.col-xs-13.offset-xs-3{grid-column:3/span 13}.col-xs-13.offset-xs-4{grid-column:4/span 13}.col-xs-13.offset-xs-5{grid-column:5/span 13}.col-xs-13.offset-xs-6{grid-column:6/span 13}.col-xs-13.offset-xs-7{grid-column:7/span 13}.col-xs-13.offset-xs-8{grid-column:8/span 13}.col-xs-13.offset-xs-9{grid-column:9/span 13}.col-xs-13.offset-xs-10{grid-column:10/span 13}.col-xs-13.offset-xs-11{grid-column:11/span 13}.col-xs-13.offset-xs-12{grid-column:12/span 13}.col-xs-13.offset-xs-13{grid-column:13/span 13}.col-xs-13.offset-xs-14{grid-column:14/span 13}.col-xs-13.offset-xs-15{grid-column:15/span 13}.col-xs-13.offset-xs-16{grid-column:16/span 13}.col-xs-14.offset-xs-2{grid-column:2/span 14}.col-xs-14.offset-xs-3{grid-column:3/span 14}.col-xs-14.offset-xs-4{grid-column:4/span 14}.col-xs-14.offset-xs-5{grid-column:5/span 14}.col-xs-14.offset-xs-6{grid-column:6/span 14}.col-xs-14.offset-xs-7{grid-column:7/span 14}.col-xs-14.offset-xs-8{grid-column:8/span 14}.col-xs-14.offset-xs-9{grid-column:9/span 14}.col-xs-14.offset-xs-10{grid-column:10/span 14}.col-xs-14.offset-xs-11{grid-column:11/span 14}.col-xs-14.offset-xs-12{grid-column:12/span 14}.col-xs-14.offset-xs-13{grid-column:13/span 14}.col-xs-14.offset-xs-14{grid-column:14/span 14}.col-xs-14.offset-xs-15{grid-column:15/span 14}.col-xs-14.offset-xs-16{grid-column:16/span 14}.col-xs-15.offset-xs-2{grid-column:2/span 15}.col-xs-15.offset-xs-3{grid-column:3/span 15}.col-xs-15.offset-xs-4{grid-column:4/span 15}.col-xs-15.offset-xs-5{grid-column:5/span 15}.col-xs-15.offset-xs-6{grid-column:6/span 15}.col-xs-15.offset-xs-7{grid-column:7/span 15}.col-xs-15.offset-xs-8{grid-column:8/span 15}.col-xs-15.offset-xs-9{grid-column:9/span 15}.col-xs-15.offset-xs-10{grid-column:10/span 15}.col-xs-15.offset-xs-11{grid-column:11/span 15}.col-xs-15.offset-xs-12{grid-column:12/span 15}.col-xs-15.offset-xs-13{grid-column:13/span 15}.col-xs-15.offset-xs-14{grid-column:14/span 15}.col-xs-15.offset-xs-15{grid-column:15/span 15}.col-xs-15.offset-xs-16{grid-column:16/span 15}.col-xs-16.offset-xs-2{grid-column:2/span 16}.col-xs-16.offset-xs-3{grid-column:3/span 16}.col-xs-16.offset-xs-4{grid-column:4/span 16}.col-xs-16.offset-xs-5{grid-column:5/span 16}.col-xs-16.offset-xs-6{grid-column:6/span 16}.col-xs-16.offset-xs-7{grid-column:7/span 16}.col-xs-16.offset-xs-8{grid-column:8/span 16}.col-xs-16.offset-xs-9{grid-column:9/span 16}.col-xs-16.offset-xs-10{grid-column:10/span 16}.col-xs-16.offset-xs-11{grid-column:11/span 16}.col-xs-16.offset-xs-12{grid-column:12/span 16}.col-xs-16.offset-xs-13{grid-column:13/span 16}.col-xs-16.offset-xs-14{grid-column:14/span 16}.col-xs-16.offset-xs-15{grid-column:15/span 16}.col-xs-16.offset-xs-16{grid-column:16/span 16}}@media only screen and (min-width: 500px){.col-sm-1.offset-sm-2{grid-column:2/span 1}.col-sm-1.offset-sm-3{grid-column:3/span 1}.col-sm-1.offset-sm-4{grid-column:4/span 1}.col-sm-1.offset-sm-5{grid-column:5/span 1}.col-sm-1.offset-sm-6{grid-column:6/span 1}.col-sm-1.offset-sm-7{grid-column:7/span 1}.col-sm-1.offset-sm-8{grid-column:8/span 1}.col-sm-1.offset-sm-9{grid-column:9/span 1}.col-sm-1.offset-sm-10{grid-column:10/span 1}.col-sm-1.offset-sm-11{grid-column:11/span 1}.col-sm-1.offset-sm-12{grid-column:12/span 1}.col-sm-1.offset-sm-13{grid-column:13/span 1}.col-sm-1.offset-sm-14{grid-column:14/span 1}.col-sm-1.offset-sm-15{grid-column:15/span 1}.col-sm-1.offset-sm-16{grid-column:16/span 1}.col-sm-2.offset-sm-2{grid-column:2/span 2}.col-sm-2.offset-sm-3{grid-column:3/span 2}.col-sm-2.offset-sm-4{grid-column:4/span 2}.col-sm-2.offset-sm-5{grid-column:5/span 2}.col-sm-2.offset-sm-6{grid-column:6/span 2}.col-sm-2.offset-sm-7{grid-column:7/span 2}.col-sm-2.offset-sm-8{grid-column:8/span 2}.col-sm-2.offset-sm-9{grid-column:9/span 2}.col-sm-2.offset-sm-10{grid-column:10/span 2}.col-sm-2.offset-sm-11{grid-column:11/span 2}.col-sm-2.offset-sm-12{grid-column:12/span 2}.col-sm-2.offset-sm-13{grid-column:13/span 2}.col-sm-2.offset-sm-14{grid-column:14/span 2}.col-sm-2.offset-sm-15{grid-column:15/span 2}.col-sm-2.offset-sm-16{grid-column:16/span 2}.col-sm-3.offset-sm-2{grid-column:2/span 3}.col-sm-3.offset-sm-3{grid-column:3/span 3}.col-sm-3.offset-sm-4{grid-column:4/span 3}.col-sm-3.offset-sm-5{grid-column:5/span 3}.col-sm-3.offset-sm-6{grid-column:6/span 3}.col-sm-3.offset-sm-7{grid-column:7/span 3}.col-sm-3.offset-sm-8{grid-column:8/span 3}.col-sm-3.offset-sm-9{grid-column:9/span 3}.col-sm-3.offset-sm-10{grid-column:10/span 3}.col-sm-3.offset-sm-11{grid-column:11/span 3}.col-sm-3.offset-sm-12{grid-column:12/span 3}.col-sm-3.offset-sm-13{grid-column:13/span 3}.col-sm-3.offset-sm-14{grid-column:14/span 3}.col-sm-3.offset-sm-15{grid-column:15/span 3}.col-sm-3.offset-sm-16{grid-column:16/span 3}.col-sm-4.offset-sm-2{grid-column:2/span 4}.col-sm-4.offset-sm-3{grid-column:3/span 4}.col-sm-4.offset-sm-4{grid-column:4/span 4}.col-sm-4.offset-sm-5{grid-column:5/span 4}.col-sm-4.offset-sm-6{grid-column:6/span 4}.col-sm-4.offset-sm-7{grid-column:7/span 4}.col-sm-4.offset-sm-8{grid-column:8/span 4}.col-sm-4.offset-sm-9{grid-column:9/span 4}.col-sm-4.offset-sm-10{grid-column:10/span 4}.col-sm-4.offset-sm-11{grid-column:11/span 4}.col-sm-4.offset-sm-12{grid-column:12/span 4}.col-sm-4.offset-sm-13{grid-column:13/span 4}.col-sm-4.offset-sm-14{grid-column:14/span 4}.col-sm-4.offset-sm-15{grid-column:15/span 4}.col-sm-4.offset-sm-16{grid-column:16/span 4}.col-sm-5.offset-sm-2{grid-column:2/span 5}.col-sm-5.offset-sm-3{grid-column:3/span 5}.col-sm-5.offset-sm-4{grid-column:4/span 5}.col-sm-5.offset-sm-5{grid-column:5/span 5}.col-sm-5.offset-sm-6{grid-column:6/span 5}.col-sm-5.offset-sm-7{grid-column:7/span 5}.col-sm-5.offset-sm-8{grid-column:8/span 5}.col-sm-5.offset-sm-9{grid-column:9/span 5}.col-sm-5.offset-sm-10{grid-column:10/span 5}.col-sm-5.offset-sm-11{grid-column:11/span 5}.col-sm-5.offset-sm-12{grid-column:12/span 5}.col-sm-5.offset-sm-13{grid-column:13/span 5}.col-sm-5.offset-sm-14{grid-column:14/span 5}.col-sm-5.offset-sm-15{grid-column:15/span 5}.col-sm-5.offset-sm-16{grid-column:16/span 5}.col-sm-6.offset-sm-2{grid-column:2/span 6}.col-sm-6.offset-sm-3{grid-column:3/span 6}.col-sm-6.offset-sm-4{grid-column:4/span 6}.col-sm-6.offset-sm-5{grid-column:5/span 6}.col-sm-6.offset-sm-6{grid-column:6/span 6}.col-sm-6.offset-sm-7{grid-column:7/span 6}.col-sm-6.offset-sm-8{grid-column:8/span 6}.col-sm-6.offset-sm-9{grid-column:9/span 6}.col-sm-6.offset-sm-10{grid-column:10/span 6}.col-sm-6.offset-sm-11{grid-column:11/span 6}.col-sm-6.offset-sm-12{grid-column:12/span 6}.col-sm-6.offset-sm-13{grid-column:13/span 6}.col-sm-6.offset-sm-14{grid-column:14/span 6}.col-sm-6.offset-sm-15{grid-column:15/span 6}.col-sm-6.offset-sm-16{grid-column:16/span 6}.col-sm-7.offset-sm-2{grid-column:2/span 7}.col-sm-7.offset-sm-3{grid-column:3/span 7}.col-sm-7.offset-sm-4{grid-column:4/span 7}.col-sm-7.offset-sm-5{grid-column:5/span 7}.col-sm-7.offset-sm-6{grid-column:6/span 7}.col-sm-7.offset-sm-7{grid-column:7/span 7}.col-sm-7.offset-sm-8{grid-column:8/span 7}.col-sm-7.offset-sm-9{grid-column:9/span 7}.col-sm-7.offset-sm-10{grid-column:10/span 7}.col-sm-7.offset-sm-11{grid-column:11/span 7}.col-sm-7.offset-sm-12{grid-column:12/span 7}.col-sm-7.offset-sm-13{grid-column:13/span 7}.col-sm-7.offset-sm-14{grid-column:14/span 7}.col-sm-7.offset-sm-15{grid-column:15/span 7}.col-sm-7.offset-sm-16{grid-column:16/span 7}.col-sm-8.offset-sm-2{grid-column:2/span 8}.col-sm-8.offset-sm-3{grid-column:3/span 8}.col-sm-8.offset-sm-4{grid-column:4/span 8}.col-sm-8.offset-sm-5{grid-column:5/span 8}.col-sm-8.offset-sm-6{grid-column:6/span 8}.col-sm-8.offset-sm-7{grid-column:7/span 8}.col-sm-8.offset-sm-8{grid-column:8/span 8}.col-sm-8.offset-sm-9{grid-column:9/span 8}.col-sm-8.offset-sm-10{grid-column:10/span 8}.col-sm-8.offset-sm-11{grid-column:11/span 8}.col-sm-8.offset-sm-12{grid-column:12/span 8}.col-sm-8.offset-sm-13{grid-column:13/span 8}.col-sm-8.offset-sm-14{grid-column:14/span 8}.col-sm-8.offset-sm-15{grid-column:15/span 8}.col-sm-8.offset-sm-16{grid-column:16/span 8}.col-sm-9.offset-sm-2{grid-column:2/span 9}.col-sm-9.offset-sm-3{grid-column:3/span 9}.col-sm-9.offset-sm-4{grid-column:4/span 9}.col-sm-9.offset-sm-5{grid-column:5/span 9}.col-sm-9.offset-sm-6{grid-column:6/span 9}.col-sm-9.offset-sm-7{grid-column:7/span 9}.col-sm-9.offset-sm-8{grid-column:8/span 9}.col-sm-9.offset-sm-9{grid-column:9/span 9}.col-sm-9.offset-sm-10{grid-column:10/span 9}.col-sm-9.offset-sm-11{grid-column:11/span 9}.col-sm-9.offset-sm-12{grid-column:12/span 9}.col-sm-9.offset-sm-13{grid-column:13/span 9}.col-sm-9.offset-sm-14{grid-column:14/span 9}.col-sm-9.offset-sm-15{grid-column:15/span 9}.col-sm-9.offset-sm-16{grid-column:16/span 9}.col-sm-10.offset-sm-2{grid-column:2/span 10}.col-sm-10.offset-sm-3{grid-column:3/span 10}.col-sm-10.offset-sm-4{grid-column:4/span 10}.col-sm-10.offset-sm-5{grid-column:5/span 10}.col-sm-10.offset-sm-6{grid-column:6/span 10}.col-sm-10.offset-sm-7{grid-column:7/span 10}.col-sm-10.offset-sm-8{grid-column:8/span 10}.col-sm-10.offset-sm-9{grid-column:9/span 10}.col-sm-10.offset-sm-10{grid-column:10/span 10}.col-sm-10.offset-sm-11{grid-column:11/span 10}.col-sm-10.offset-sm-12{grid-column:12/span 10}.col-sm-10.offset-sm-13{grid-column:13/span 10}.col-sm-10.offset-sm-14{grid-column:14/span 10}.col-sm-10.offset-sm-15{grid-column:15/span 10}.col-sm-10.offset-sm-16{grid-column:16/span 10}.col-sm-11.offset-sm-2{grid-column:2/span 11}.col-sm-11.offset-sm-3{grid-column:3/span 11}.col-sm-11.offset-sm-4{grid-column:4/span 11}.col-sm-11.offset-sm-5{grid-column:5/span 11}.col-sm-11.offset-sm-6{grid-column:6/span 11}.col-sm-11.offset-sm-7{grid-column:7/span 11}.col-sm-11.offset-sm-8{grid-column:8/span 11}.col-sm-11.offset-sm-9{grid-column:9/span 11}.col-sm-11.offset-sm-10{grid-column:10/span 11}.col-sm-11.offset-sm-11{grid-column:11/span 11}.col-sm-11.offset-sm-12{grid-column:12/span 11}.col-sm-11.offset-sm-13{grid-column:13/span 11}.col-sm-11.offset-sm-14{grid-column:14/span 11}.col-sm-11.offset-sm-15{grid-column:15/span 11}.col-sm-11.offset-sm-16{grid-column:16/span 11}.col-sm-12.offset-sm-2{grid-column:2/span 12}.col-sm-12.offset-sm-3{grid-column:3/span 12}.col-sm-12.offset-sm-4{grid-column:4/span 12}.col-sm-12.offset-sm-5{grid-column:5/span 12}.col-sm-12.offset-sm-6{grid-column:6/span 12}.col-sm-12.offset-sm-7{grid-column:7/span 12}.col-sm-12.offset-sm-8{grid-column:8/span 12}.col-sm-12.offset-sm-9{grid-column:9/span 12}.col-sm-12.offset-sm-10{grid-column:10/span 12}.col-sm-12.offset-sm-11{grid-column:11/span 12}.col-sm-12.offset-sm-12{grid-column:12/span 12}.col-sm-12.offset-sm-13{grid-column:13/span 12}.col-sm-12.offset-sm-14{grid-column:14/span 12}.col-sm-12.offset-sm-15{grid-column:15/span 12}.col-sm-12.offset-sm-16{grid-column:16/span 12}.col-sm-13.offset-sm-2{grid-column:2/span 13}.col-sm-13.offset-sm-3{grid-column:3/span 13}.col-sm-13.offset-sm-4{grid-column:4/span 13}.col-sm-13.offset-sm-5{grid-column:5/span 13}.col-sm-13.offset-sm-6{grid-column:6/span 13}.col-sm-13.offset-sm-7{grid-column:7/span 13}.col-sm-13.offset-sm-8{grid-column:8/span 13}.col-sm-13.offset-sm-9{grid-column:9/span 13}.col-sm-13.offset-sm-10{grid-column:10/span 13}.col-sm-13.offset-sm-11{grid-column:11/span 13}.col-sm-13.offset-sm-12{grid-column:12/span 13}.col-sm-13.offset-sm-13{grid-column:13/span 13}.col-sm-13.offset-sm-14{grid-column:14/span 13}.col-sm-13.offset-sm-15{grid-column:15/span 13}.col-sm-13.offset-sm-16{grid-column:16/span 13}.col-sm-14.offset-sm-2{grid-column:2/span 14}.col-sm-14.offset-sm-3{grid-column:3/span 14}.col-sm-14.offset-sm-4{grid-column:4/span 14}.col-sm-14.offset-sm-5{grid-column:5/span 14}.col-sm-14.offset-sm-6{grid-column:6/span 14}.col-sm-14.offset-sm-7{grid-column:7/span 14}.col-sm-14.offset-sm-8{grid-column:8/span 14}.col-sm-14.offset-sm-9{grid-column:9/span 14}.col-sm-14.offset-sm-10{grid-column:10/span 14}.col-sm-14.offset-sm-11{grid-column:11/span 14}.col-sm-14.offset-sm-12{grid-column:12/span 14}.col-sm-14.offset-sm-13{grid-column:13/span 14}.col-sm-14.offset-sm-14{grid-column:14/span 14}.col-sm-14.offset-sm-15{grid-column:15/span 14}.col-sm-14.offset-sm-16{grid-column:16/span 14}.col-sm-15.offset-sm-2{grid-column:2/span 15}.col-sm-15.offset-sm-3{grid-column:3/span 15}.col-sm-15.offset-sm-4{grid-column:4/span 15}.col-sm-15.offset-sm-5{grid-column:5/span 15}.col-sm-15.offset-sm-6{grid-column:6/span 15}.col-sm-15.offset-sm-7{grid-column:7/span 15}.col-sm-15.offset-sm-8{grid-column:8/span 15}.col-sm-15.offset-sm-9{grid-column:9/span 15}.col-sm-15.offset-sm-10{grid-column:10/span 15}.col-sm-15.offset-sm-11{grid-column:11/span 15}.col-sm-15.offset-sm-12{grid-column:12/span 15}.col-sm-15.offset-sm-13{grid-column:13/span 15}.col-sm-15.offset-sm-14{grid-column:14/span 15}.col-sm-15.offset-sm-15{grid-column:15/span 15}.col-sm-15.offset-sm-16{grid-column:16/span 15}.col-sm-16.offset-sm-2{grid-column:2/span 16}.col-sm-16.offset-sm-3{grid-column:3/span 16}.col-sm-16.offset-sm-4{grid-column:4/span 16}.col-sm-16.offset-sm-5{grid-column:5/span 16}.col-sm-16.offset-sm-6{grid-column:6/span 16}.col-sm-16.offset-sm-7{grid-column:7/span 16}.col-sm-16.offset-sm-8{grid-column:8/span 16}.col-sm-16.offset-sm-9{grid-column:9/span 16}.col-sm-16.offset-sm-10{grid-column:10/span 16}.col-sm-16.offset-sm-11{grid-column:11/span 16}.col-sm-16.offset-sm-12{grid-column:12/span 16}.col-sm-16.offset-sm-13{grid-column:13/span 16}.col-sm-16.offset-sm-14{grid-column:14/span 16}.col-sm-16.offset-sm-15{grid-column:15/span 16}.col-sm-16.offset-sm-16{grid-column:16/span 16}}@media only screen and (min-width: 768px){.col-md-1.offset-md-2{grid-column:2/span 1}.col-md-1.offset-md-3{grid-column:3/span 1}.col-md-1.offset-md-4{grid-column:4/span 1}.col-md-1.offset-md-5{grid-column:5/span 1}.col-md-1.offset-md-6{grid-column:6/span 1}.col-md-1.offset-md-7{grid-column:7/span 1}.col-md-1.offset-md-8{grid-column:8/span 1}.col-md-1.offset-md-9{grid-column:9/span 1}.col-md-1.offset-md-10{grid-column:10/span 1}.col-md-1.offset-md-11{grid-column:11/span 1}.col-md-1.offset-md-12{grid-column:12/span 1}.col-md-1.offset-md-13{grid-column:13/span 1}.col-md-1.offset-md-14{grid-column:14/span 1}.col-md-1.offset-md-15{grid-column:15/span 1}.col-md-1.offset-md-16{grid-column:16/span 1}.col-md-2.offset-md-2{grid-column:2/span 2}.col-md-2.offset-md-3{grid-column:3/span 2}.col-md-2.offset-md-4{grid-column:4/span 2}.col-md-2.offset-md-5{grid-column:5/span 2}.col-md-2.offset-md-6{grid-column:6/span 2}.col-md-2.offset-md-7{grid-column:7/span 2}.col-md-2.offset-md-8{grid-column:8/span 2}.col-md-2.offset-md-9{grid-column:9/span 2}.col-md-2.offset-md-10{grid-column:10/span 2}.col-md-2.offset-md-11{grid-column:11/span 2}.col-md-2.offset-md-12{grid-column:12/span 2}.col-md-2.offset-md-13{grid-column:13/span 2}.col-md-2.offset-md-14{grid-column:14/span 2}.col-md-2.offset-md-15{grid-column:15/span 2}.col-md-2.offset-md-16{grid-column:16/span 2}.col-md-3.offset-md-2{grid-column:2/span 3}.col-md-3.offset-md-3{grid-column:3/span 3}.col-md-3.offset-md-4{grid-column:4/span 3}.col-md-3.offset-md-5{grid-column:5/span 3}.col-md-3.offset-md-6{grid-column:6/span 3}.col-md-3.offset-md-7{grid-column:7/span 3}.col-md-3.offset-md-8{grid-column:8/span 3}.col-md-3.offset-md-9{grid-column:9/span 3}.col-md-3.offset-md-10{grid-column:10/span 3}.col-md-3.offset-md-11{grid-column:11/span 3}.col-md-3.offset-md-12{grid-column:12/span 3}.col-md-3.offset-md-13{grid-column:13/span 3}.col-md-3.offset-md-14{grid-column:14/span 3}.col-md-3.offset-md-15{grid-column:15/span 3}.col-md-3.offset-md-16{grid-column:16/span 3}.col-md-4.offset-md-2{grid-column:2/span 4}.col-md-4.offset-md-3{grid-column:3/span 4}.col-md-4.offset-md-4{grid-column:4/span 4}.col-md-4.offset-md-5{grid-column:5/span 4}.col-md-4.offset-md-6{grid-column:6/span 4}.col-md-4.offset-md-7{grid-column:7/span 4}.col-md-4.offset-md-8{grid-column:8/span 4}.col-md-4.offset-md-9{grid-column:9/span 4}.col-md-4.offset-md-10{grid-column:10/span 4}.col-md-4.offset-md-11{grid-column:11/span 4}.col-md-4.offset-md-12{grid-column:12/span 4}.col-md-4.offset-md-13{grid-column:13/span 4}.col-md-4.offset-md-14{grid-column:14/span 4}.col-md-4.offset-md-15{grid-column:15/span 4}.col-md-4.offset-md-16{grid-column:16/span 4}.col-md-5.offset-md-2{grid-column:2/span 5}.col-md-5.offset-md-3{grid-column:3/span 5}.col-md-5.offset-md-4{grid-column:4/span 5}.col-md-5.offset-md-5{grid-column:5/span 5}.col-md-5.offset-md-6{grid-column:6/span 5}.col-md-5.offset-md-7{grid-column:7/span 5}.col-md-5.offset-md-8{grid-column:8/span 5}.col-md-5.offset-md-9{grid-column:9/span 5}.col-md-5.offset-md-10{grid-column:10/span 5}.col-md-5.offset-md-11{grid-column:11/span 5}.col-md-5.offset-md-12{grid-column:12/span 5}.col-md-5.offset-md-13{grid-column:13/span 5}.col-md-5.offset-md-14{grid-column:14/span 5}.col-md-5.offset-md-15{grid-column:15/span 5}.col-md-5.offset-md-16{grid-column:16/span 5}.col-md-6.offset-md-2{grid-column:2/span 6}.col-md-6.offset-md-3{grid-column:3/span 6}.col-md-6.offset-md-4{grid-column:4/span 6}.col-md-6.offset-md-5{grid-column:5/span 6}.col-md-6.offset-md-6{grid-column:6/span 6}.col-md-6.offset-md-7{grid-column:7/span 6}.col-md-6.offset-md-8{grid-column:8/span 6}.col-md-6.offset-md-9{grid-column:9/span 6}.col-md-6.offset-md-10{grid-column:10/span 6}.col-md-6.offset-md-11{grid-column:11/span 6}.col-md-6.offset-md-12{grid-column:12/span 6}.col-md-6.offset-md-13{grid-column:13/span 6}.col-md-6.offset-md-14{grid-column:14/span 6}.col-md-6.offset-md-15{grid-column:15/span 6}.col-md-6.offset-md-16{grid-column:16/span 6}.col-md-7.offset-md-2{grid-column:2/span 7}.col-md-7.offset-md-3{grid-column:3/span 7}.col-md-7.offset-md-4{grid-column:4/span 7}.col-md-7.offset-md-5{grid-column:5/span 7}.col-md-7.offset-md-6{grid-column:6/span 7}.col-md-7.offset-md-7{grid-column:7/span 7}.col-md-7.offset-md-8{grid-column:8/span 7}.col-md-7.offset-md-9{grid-column:9/span 7}.col-md-7.offset-md-10{grid-column:10/span 7}.col-md-7.offset-md-11{grid-column:11/span 7}.col-md-7.offset-md-12{grid-column:12/span 7}.col-md-7.offset-md-13{grid-column:13/span 7}.col-md-7.offset-md-14{grid-column:14/span 7}.col-md-7.offset-md-15{grid-column:15/span 7}.col-md-7.offset-md-16{grid-column:16/span 7}.col-md-8.offset-md-2{grid-column:2/span 8}.col-md-8.offset-md-3{grid-column:3/span 8}.col-md-8.offset-md-4{grid-column:4/span 8}.col-md-8.offset-md-5{grid-column:5/span 8}.col-md-8.offset-md-6{grid-column:6/span 8}.col-md-8.offset-md-7{grid-column:7/span 8}.col-md-8.offset-md-8{grid-column:8/span 8}.col-md-8.offset-md-9{grid-column:9/span 8}.col-md-8.offset-md-10{grid-column:10/span 8}.col-md-8.offset-md-11{grid-column:11/span 8}.col-md-8.offset-md-12{grid-column:12/span 8}.col-md-8.offset-md-13{grid-column:13/span 8}.col-md-8.offset-md-14{grid-column:14/span 8}.col-md-8.offset-md-15{grid-column:15/span 8}.col-md-8.offset-md-16{grid-column:16/span 8}.col-md-9.offset-md-2{grid-column:2/span 9}.col-md-9.offset-md-3{grid-column:3/span 9}.col-md-9.offset-md-4{grid-column:4/span 9}.col-md-9.offset-md-5{grid-column:5/span 9}.col-md-9.offset-md-6{grid-column:6/span 9}.col-md-9.offset-md-7{grid-column:7/span 9}.col-md-9.offset-md-8{grid-column:8/span 9}.col-md-9.offset-md-9{grid-column:9/span 9}.col-md-9.offset-md-10{grid-column:10/span 9}.col-md-9.offset-md-11{grid-column:11/span 9}.col-md-9.offset-md-12{grid-column:12/span 9}.col-md-9.offset-md-13{grid-column:13/span 9}.col-md-9.offset-md-14{grid-column:14/span 9}.col-md-9.offset-md-15{grid-column:15/span 9}.col-md-9.offset-md-16{grid-column:16/span 9}.col-md-10.offset-md-2{grid-column:2/span 10}.col-md-10.offset-md-3{grid-column:3/span 10}.col-md-10.offset-md-4{grid-column:4/span 10}.col-md-10.offset-md-5{grid-column:5/span 10}.col-md-10.offset-md-6{grid-column:6/span 10}.col-md-10.offset-md-7{grid-column:7/span 10}.col-md-10.offset-md-8{grid-column:8/span 10}.col-md-10.offset-md-9{grid-column:9/span 10}.col-md-10.offset-md-10{grid-column:10/span 10}.col-md-10.offset-md-11{grid-column:11/span 10}.col-md-10.offset-md-12{grid-column:12/span 10}.col-md-10.offset-md-13{grid-column:13/span 10}.col-md-10.offset-md-14{grid-column:14/span 10}.col-md-10.offset-md-15{grid-column:15/span 10}.col-md-10.offset-md-16{grid-column:16/span 10}.col-md-11.offset-md-2{grid-column:2/span 11}.col-md-11.offset-md-3{grid-column:3/span 11}.col-md-11.offset-md-4{grid-column:4/span 11}.col-md-11.offset-md-5{grid-column:5/span 11}.col-md-11.offset-md-6{grid-column:6/span 11}.col-md-11.offset-md-7{grid-column:7/span 11}.col-md-11.offset-md-8{grid-column:8/span 11}.col-md-11.offset-md-9{grid-column:9/span 11}.col-md-11.offset-md-10{grid-column:10/span 11}.col-md-11.offset-md-11{grid-column:11/span 11}.col-md-11.offset-md-12{grid-column:12/span 11}.col-md-11.offset-md-13{grid-column:13/span 11}.col-md-11.offset-md-14{grid-column:14/span 11}.col-md-11.offset-md-15{grid-column:15/span 11}.col-md-11.offset-md-16{grid-column:16/span 11}.col-md-12.offset-md-2{grid-column:2/span 12}.col-md-12.offset-md-3{grid-column:3/span 12}.col-md-12.offset-md-4{grid-column:4/span 12}.col-md-12.offset-md-5{grid-column:5/span 12}.col-md-12.offset-md-6{grid-column:6/span 12}.col-md-12.offset-md-7{grid-column:7/span 12}.col-md-12.offset-md-8{grid-column:8/span 12}.col-md-12.offset-md-9{grid-column:9/span 12}.col-md-12.offset-md-10{grid-column:10/span 12}.col-md-12.offset-md-11{grid-column:11/span 12}.col-md-12.offset-md-12{grid-column:12/span 12}.col-md-12.offset-md-13{grid-column:13/span 12}.col-md-12.offset-md-14{grid-column:14/span 12}.col-md-12.offset-md-15{grid-column:15/span 12}.col-md-12.offset-md-16{grid-column:16/span 12}.col-md-13.offset-md-2{grid-column:2/span 13}.col-md-13.offset-md-3{grid-column:3/span 13}.col-md-13.offset-md-4{grid-column:4/span 13}.col-md-13.offset-md-5{grid-column:5/span 13}.col-md-13.offset-md-6{grid-column:6/span 13}.col-md-13.offset-md-7{grid-column:7/span 13}.col-md-13.offset-md-8{grid-column:8/span 13}.col-md-13.offset-md-9{grid-column:9/span 13}.col-md-13.offset-md-10{grid-column:10/span 13}.col-md-13.offset-md-11{grid-column:11/span 13}.col-md-13.offset-md-12{grid-column:12/span 13}.col-md-13.offset-md-13{grid-column:13/span 13}.col-md-13.offset-md-14{grid-column:14/span 13}.col-md-13.offset-md-15{grid-column:15/span 13}.col-md-13.offset-md-16{grid-column:16/span 13}.col-md-14.offset-md-2{grid-column:2/span 14}.col-md-14.offset-md-3{grid-column:3/span 14}.col-md-14.offset-md-4{grid-column:4/span 14}.col-md-14.offset-md-5{grid-column:5/span 14}.col-md-14.offset-md-6{grid-column:6/span 14}.col-md-14.offset-md-7{grid-column:7/span 14}.col-md-14.offset-md-8{grid-column:8/span 14}.col-md-14.offset-md-9{grid-column:9/span 14}.col-md-14.offset-md-10{grid-column:10/span 14}.col-md-14.offset-md-11{grid-column:11/span 14}.col-md-14.offset-md-12{grid-column:12/span 14}.col-md-14.offset-md-13{grid-column:13/span 14}.col-md-14.offset-md-14{grid-column:14/span 14}.col-md-14.offset-md-15{grid-column:15/span 14}.col-md-14.offset-md-16{grid-column:16/span 14}.col-md-15.offset-md-2{grid-column:2/span 15}.col-md-15.offset-md-3{grid-column:3/span 15}.col-md-15.offset-md-4{grid-column:4/span 15}.col-md-15.offset-md-5{grid-column:5/span 15}.col-md-15.offset-md-6{grid-column:6/span 15}.col-md-15.offset-md-7{grid-column:7/span 15}.col-md-15.offset-md-8{grid-column:8/span 15}.col-md-15.offset-md-9{grid-column:9/span 15}.col-md-15.offset-md-10{grid-column:10/span 15}.col-md-15.offset-md-11{grid-column:11/span 15}.col-md-15.offset-md-12{grid-column:12/span 15}.col-md-15.offset-md-13{grid-column:13/span 15}.col-md-15.offset-md-14{grid-column:14/span 15}.col-md-15.offset-md-15{grid-column:15/span 15}.col-md-15.offset-md-16{grid-column:16/span 15}.col-md-16.offset-md-2{grid-column:2/span 16}.col-md-16.offset-md-3{grid-column:3/span 16}.col-md-16.offset-md-4{grid-column:4/span 16}.col-md-16.offset-md-5{grid-column:5/span 16}.col-md-16.offset-md-6{grid-column:6/span 16}.col-md-16.offset-md-7{grid-column:7/span 16}.col-md-16.offset-md-8{grid-column:8/span 16}.col-md-16.offset-md-9{grid-column:9/span 16}.col-md-16.offset-md-10{grid-column:10/span 16}.col-md-16.offset-md-11{grid-column:11/span 16}.col-md-16.offset-md-12{grid-column:12/span 16}.col-md-16.offset-md-13{grid-column:13/span 16}.col-md-16.offset-md-14{grid-column:14/span 16}.col-md-16.offset-md-15{grid-column:15/span 16}.col-md-16.offset-md-16{grid-column:16/span 16}}@media only screen and (min-width: 992px){.col-lg-1.offset-lg-2{grid-column:2/span 1}.col-lg-1.offset-lg-3{grid-column:3/span 1}.col-lg-1.offset-lg-4{grid-column:4/span 1}.col-lg-1.offset-lg-5{grid-column:5/span 1}.col-lg-1.offset-lg-6{grid-column:6/span 1}.col-lg-1.offset-lg-7{grid-column:7/span 1}.col-lg-1.offset-lg-8{grid-column:8/span 1}.col-lg-1.offset-lg-9{grid-column:9/span 1}.col-lg-1.offset-lg-10{grid-column:10/span 1}.col-lg-1.offset-lg-11{grid-column:11/span 1}.col-lg-1.offset-lg-12{grid-column:12/span 1}.col-lg-1.offset-lg-13{grid-column:13/span 1}.col-lg-1.offset-lg-14{grid-column:14/span 1}.col-lg-1.offset-lg-15{grid-column:15/span 1}.col-lg-1.offset-lg-16{grid-column:16/span 1}.col-lg-2.offset-lg-2{grid-column:2/span 2}.col-lg-2.offset-lg-3{grid-column:3/span 2}.col-lg-2.offset-lg-4{grid-column:4/span 2}.col-lg-2.offset-lg-5{grid-column:5/span 2}.col-lg-2.offset-lg-6{grid-column:6/span 2}.col-lg-2.offset-lg-7{grid-column:7/span 2}.col-lg-2.offset-lg-8{grid-column:8/span 2}.col-lg-2.offset-lg-9{grid-column:9/span 2}.col-lg-2.offset-lg-10{grid-column:10/span 2}.col-lg-2.offset-lg-11{grid-column:11/span 2}.col-lg-2.offset-lg-12{grid-column:12/span 2}.col-lg-2.offset-lg-13{grid-column:13/span 2}.col-lg-2.offset-lg-14{grid-column:14/span 2}.col-lg-2.offset-lg-15{grid-column:15/span 2}.col-lg-2.offset-lg-16{grid-column:16/span 2}.col-lg-3.offset-lg-2{grid-column:2/span 3}.col-lg-3.offset-lg-3{grid-column:3/span 3}.col-lg-3.offset-lg-4{grid-column:4/span 3}.col-lg-3.offset-lg-5{grid-column:5/span 3}.col-lg-3.offset-lg-6{grid-column:6/span 3}.col-lg-3.offset-lg-7{grid-column:7/span 3}.col-lg-3.offset-lg-8{grid-column:8/span 3}.col-lg-3.offset-lg-9{grid-column:9/span 3}.col-lg-3.offset-lg-10{grid-column:10/span 3}.col-lg-3.offset-lg-11{grid-column:11/span 3}.col-lg-3.offset-lg-12{grid-column:12/span 3}.col-lg-3.offset-lg-13{grid-column:13/span 3}.col-lg-3.offset-lg-14{grid-column:14/span 3}.col-lg-3.offset-lg-15{grid-column:15/span 3}.col-lg-3.offset-lg-16{grid-column:16/span 3}.col-lg-4.offset-lg-2{grid-column:2/span 4}.col-lg-4.offset-lg-3{grid-column:3/span 4}.col-lg-4.offset-lg-4{grid-column:4/span 4}.col-lg-4.offset-lg-5{grid-column:5/span 4}.col-lg-4.offset-lg-6{grid-column:6/span 4}.col-lg-4.offset-lg-7{grid-column:7/span 4}.col-lg-4.offset-lg-8{grid-column:8/span 4}.col-lg-4.offset-lg-9{grid-column:9/span 4}.col-lg-4.offset-lg-10{grid-column:10/span 4}.col-lg-4.offset-lg-11{grid-column:11/span 4}.col-lg-4.offset-lg-12{grid-column:12/span 4}.col-lg-4.offset-lg-13{grid-column:13/span 4}.col-lg-4.offset-lg-14{grid-column:14/span 4}.col-lg-4.offset-lg-15{grid-column:15/span 4}.col-lg-4.offset-lg-16{grid-column:16/span 4}.col-lg-5.offset-lg-2{grid-column:2/span 5}.col-lg-5.offset-lg-3{grid-column:3/span 5}.col-lg-5.offset-lg-4{grid-column:4/span 5}.col-lg-5.offset-lg-5{grid-column:5/span 5}.col-lg-5.offset-lg-6{grid-column:6/span 5}.col-lg-5.offset-lg-7{grid-column:7/span 5}.col-lg-5.offset-lg-8{grid-column:8/span 5}.col-lg-5.offset-lg-9{grid-column:9/span 5}.col-lg-5.offset-lg-10{grid-column:10/span 5}.col-lg-5.offset-lg-11{grid-column:11/span 5}.col-lg-5.offset-lg-12{grid-column:12/span 5}.col-lg-5.offset-lg-13{grid-column:13/span 5}.col-lg-5.offset-lg-14{grid-column:14/span 5}.col-lg-5.offset-lg-15{grid-column:15/span 5}.col-lg-5.offset-lg-16{grid-column:16/span 5}.col-lg-6.offset-lg-2{grid-column:2/span 6}.col-lg-6.offset-lg-3{grid-column:3/span 6}.col-lg-6.offset-lg-4{grid-column:4/span 6}.col-lg-6.offset-lg-5{grid-column:5/span 6}.col-lg-6.offset-lg-6{grid-column:6/span 6}.col-lg-6.offset-lg-7{grid-column:7/span 6}.col-lg-6.offset-lg-8{grid-column:8/span 6}.col-lg-6.offset-lg-9{grid-column:9/span 6}.col-lg-6.offset-lg-10{grid-column:10/span 6}.col-lg-6.offset-lg-11{grid-column:11/span 6}.col-lg-6.offset-lg-12{grid-column:12/span 6}.col-lg-6.offset-lg-13{grid-column:13/span 6}.col-lg-6.offset-lg-14{grid-column:14/span 6}.col-lg-6.offset-lg-15{grid-column:15/span 6}.col-lg-6.offset-lg-16{grid-column:16/span 6}.col-lg-7.offset-lg-2{grid-column:2/span 7}.col-lg-7.offset-lg-3{grid-column:3/span 7}.col-lg-7.offset-lg-4{grid-column:4/span 7}.col-lg-7.offset-lg-5{grid-column:5/span 7}.col-lg-7.offset-lg-6{grid-column:6/span 7}.col-lg-7.offset-lg-7{grid-column:7/span 7}.col-lg-7.offset-lg-8{grid-column:8/span 7}.col-lg-7.offset-lg-9{grid-column:9/span 7}.col-lg-7.offset-lg-10{grid-column:10/span 7}.col-lg-7.offset-lg-11{grid-column:11/span 7}.col-lg-7.offset-lg-12{grid-column:12/span 7}.col-lg-7.offset-lg-13{grid-column:13/span 7}.col-lg-7.offset-lg-14{grid-column:14/span 7}.col-lg-7.offset-lg-15{grid-column:15/span 7}.col-lg-7.offset-lg-16{grid-column:16/span 7}.col-lg-8.offset-lg-2{grid-column:2/span 8}.col-lg-8.offset-lg-3{grid-column:3/span 8}.col-lg-8.offset-lg-4{grid-column:4/span 8}.col-lg-8.offset-lg-5{grid-column:5/span 8}.col-lg-8.offset-lg-6{grid-column:6/span 8}.col-lg-8.offset-lg-7{grid-column:7/span 8}.col-lg-8.offset-lg-8{grid-column:8/span 8}.col-lg-8.offset-lg-9{grid-column:9/span 8}.col-lg-8.offset-lg-10{grid-column:10/span 8}.col-lg-8.offset-lg-11{grid-column:11/span 8}.col-lg-8.offset-lg-12{grid-column:12/span 8}.col-lg-8.offset-lg-13{grid-column:13/span 8}.col-lg-8.offset-lg-14{grid-column:14/span 8}.col-lg-8.offset-lg-15{grid-column:15/span 8}.col-lg-8.offset-lg-16{grid-column:16/span 8}.col-lg-9.offset-lg-2{grid-column:2/span 9}.col-lg-9.offset-lg-3{grid-column:3/span 9}.col-lg-9.offset-lg-4{grid-column:4/span 9}.col-lg-9.offset-lg-5{grid-column:5/span 9}.col-lg-9.offset-lg-6{grid-column:6/span 9}.col-lg-9.offset-lg-7{grid-column:7/span 9}.col-lg-9.offset-lg-8{grid-column:8/span 9}.col-lg-9.offset-lg-9{grid-column:9/span 9}.col-lg-9.offset-lg-10{grid-column:10/span 9}.col-lg-9.offset-lg-11{grid-column:11/span 9}.col-lg-9.offset-lg-12{grid-column:12/span 9}.col-lg-9.offset-lg-13{grid-column:13/span 9}.col-lg-9.offset-lg-14{grid-column:14/span 9}.col-lg-9.offset-lg-15{grid-column:15/span 9}.col-lg-9.offset-lg-16{grid-column:16/span 9}.col-lg-10.offset-lg-2{grid-column:2/span 10}.col-lg-10.offset-lg-3{grid-column:3/span 10}.col-lg-10.offset-lg-4{grid-column:4/span 10}.col-lg-10.offset-lg-5{grid-column:5/span 10}.col-lg-10.offset-lg-6{grid-column:6/span 10}.col-lg-10.offset-lg-7{grid-column:7/span 10}.col-lg-10.offset-lg-8{grid-column:8/span 10}.col-lg-10.offset-lg-9{grid-column:9/span 10}.col-lg-10.offset-lg-10{grid-column:10/span 10}.col-lg-10.offset-lg-11{grid-column:11/span 10}.col-lg-10.offset-lg-12{grid-column:12/span 10}.col-lg-10.offset-lg-13{grid-column:13/span 10}.col-lg-10.offset-lg-14{grid-column:14/span 10}.col-lg-10.offset-lg-15{grid-column:15/span 10}.col-lg-10.offset-lg-16{grid-column:16/span 10}.col-lg-11.offset-lg-2{grid-column:2/span 11}.col-lg-11.offset-lg-3{grid-column:3/span 11}.col-lg-11.offset-lg-4{grid-column:4/span 11}.col-lg-11.offset-lg-5{grid-column:5/span 11}.col-lg-11.offset-lg-6{grid-column:6/span 11}.col-lg-11.offset-lg-7{grid-column:7/span 11}.col-lg-11.offset-lg-8{grid-column:8/span 11}.col-lg-11.offset-lg-9{grid-column:9/span 11}.col-lg-11.offset-lg-10{grid-column:10/span 11}.col-lg-11.offset-lg-11{grid-column:11/span 11}.col-lg-11.offset-lg-12{grid-column:12/span 11}.col-lg-11.offset-lg-13{grid-column:13/span 11}.col-lg-11.offset-lg-14{grid-column:14/span 11}.col-lg-11.offset-lg-15{grid-column:15/span 11}.col-lg-11.offset-lg-16{grid-column:16/span 11}.col-lg-12.offset-lg-2{grid-column:2/span 12}.col-lg-12.offset-lg-3{grid-column:3/span 12}.col-lg-12.offset-lg-4{grid-column:4/span 12}.col-lg-12.offset-lg-5{grid-column:5/span 12}.col-lg-12.offset-lg-6{grid-column:6/span 12}.col-lg-12.offset-lg-7{grid-column:7/span 12}.col-lg-12.offset-lg-8{grid-column:8/span 12}.col-lg-12.offset-lg-9{grid-column:9/span 12}.col-lg-12.offset-lg-10{grid-column:10/span 12}.col-lg-12.offset-lg-11{grid-column:11/span 12}.col-lg-12.offset-lg-12{grid-column:12/span 12}.col-lg-12.offset-lg-13{grid-column:13/span 12}.col-lg-12.offset-lg-14{grid-column:14/span 12}.col-lg-12.offset-lg-15{grid-column:15/span 12}.col-lg-12.offset-lg-16{grid-column:16/span 12}.col-lg-13.offset-lg-2{grid-column:2/span 13}.col-lg-13.offset-lg-3{grid-column:3/span 13}.col-lg-13.offset-lg-4{grid-column:4/span 13}.col-lg-13.offset-lg-5{grid-column:5/span 13}.col-lg-13.offset-lg-6{grid-column:6/span 13}.col-lg-13.offset-lg-7{grid-column:7/span 13}.col-lg-13.offset-lg-8{grid-column:8/span 13}.col-lg-13.offset-lg-9{grid-column:9/span 13}.col-lg-13.offset-lg-10{grid-column:10/span 13}.col-lg-13.offset-lg-11{grid-column:11/span 13}.col-lg-13.offset-lg-12{grid-column:12/span 13}.col-lg-13.offset-lg-13{grid-column:13/span 13}.col-lg-13.offset-lg-14{grid-column:14/span 13}.col-lg-13.offset-lg-15{grid-column:15/span 13}.col-lg-13.offset-lg-16{grid-column:16/span 13}.col-lg-14.offset-lg-2{grid-column:2/span 14}.col-lg-14.offset-lg-3{grid-column:3/span 14}.col-lg-14.offset-lg-4{grid-column:4/span 14}.col-lg-14.offset-lg-5{grid-column:5/span 14}.col-lg-14.offset-lg-6{grid-column:6/span 14}.col-lg-14.offset-lg-7{grid-column:7/span 14}.col-lg-14.offset-lg-8{grid-column:8/span 14}.col-lg-14.offset-lg-9{grid-column:9/span 14}.col-lg-14.offset-lg-10{grid-column:10/span 14}.col-lg-14.offset-lg-11{grid-column:11/span 14}.col-lg-14.offset-lg-12{grid-column:12/span 14}.col-lg-14.offset-lg-13{grid-column:13/span 14}.col-lg-14.offset-lg-14{grid-column:14/span 14}.col-lg-14.offset-lg-15{grid-column:15/span 14}.col-lg-14.offset-lg-16{grid-column:16/span 14}.col-lg-15.offset-lg-2{grid-column:2/span 15}.col-lg-15.offset-lg-3{grid-column:3/span 15}.col-lg-15.offset-lg-4{grid-column:4/span 15}.col-lg-15.offset-lg-5{grid-column:5/span 15}.col-lg-15.offset-lg-6{grid-column:6/span 15}.col-lg-15.offset-lg-7{grid-column:7/span 15}.col-lg-15.offset-lg-8{grid-column:8/span 15}.col-lg-15.offset-lg-9{grid-column:9/span 15}.col-lg-15.offset-lg-10{grid-column:10/span 15}.col-lg-15.offset-lg-11{grid-column:11/span 15}.col-lg-15.offset-lg-12{grid-column:12/span 15}.col-lg-15.offset-lg-13{grid-column:13/span 15}.col-lg-15.offset-lg-14{grid-column:14/span 15}.col-lg-15.offset-lg-15{grid-column:15/span 15}.col-lg-15.offset-lg-16{grid-column:16/span 15}.col-lg-16.offset-lg-2{grid-column:2/span 16}.col-lg-16.offset-lg-3{grid-column:3/span 16}.col-lg-16.offset-lg-4{grid-column:4/span 16}.col-lg-16.offset-lg-5{grid-column:5/span 16}.col-lg-16.offset-lg-6{grid-column:6/span 16}.col-lg-16.offset-lg-7{grid-column:7/span 16}.col-lg-16.offset-lg-8{grid-column:8/span 16}.col-lg-16.offset-lg-9{grid-column:9/span 16}.col-lg-16.offset-lg-10{grid-column:10/span 16}.col-lg-16.offset-lg-11{grid-column:11/span 16}.col-lg-16.offset-lg-12{grid-column:12/span 16}.col-lg-16.offset-lg-13{grid-column:13/span 16}.col-lg-16.offset-lg-14{grid-column:14/span 16}.col-lg-16.offset-lg-15{grid-column:15/span 16}.col-lg-16.offset-lg-16{grid-column:16/span 16}}@media only screen and (min-width: 1260px){.col-xl-1.offset-xl-2{grid-column:2/span 1}.col-xl-1.offset-xl-3{grid-column:3/span 1}.col-xl-1.offset-xl-4{grid-column:4/span 1}.col-xl-1.offset-xl-5{grid-column:5/span 1}.col-xl-1.offset-xl-6{grid-column:6/span 1}.col-xl-1.offset-xl-7{grid-column:7/span 1}.col-xl-1.offset-xl-8{grid-column:8/span 1}.col-xl-1.offset-xl-9{grid-column:9/span 1}.col-xl-1.offset-xl-10{grid-column:10/span 1}.col-xl-1.offset-xl-11{grid-column:11/span 1}.col-xl-1.offset-xl-12{grid-column:12/span 1}.col-xl-1.offset-xl-13{grid-column:13/span 1}.col-xl-1.offset-xl-14{grid-column:14/span 1}.col-xl-1.offset-xl-15{grid-column:15/span 1}.col-xl-1.offset-xl-16{grid-column:16/span 1}.col-xl-2.offset-xl-2{grid-column:2/span 2}.col-xl-2.offset-xl-3{grid-column:3/span 2}.col-xl-2.offset-xl-4{grid-column:4/span 2}.col-xl-2.offset-xl-5{grid-column:5/span 2}.col-xl-2.offset-xl-6{grid-column:6/span 2}.col-xl-2.offset-xl-7{grid-column:7/span 2}.col-xl-2.offset-xl-8{grid-column:8/span 2}.col-xl-2.offset-xl-9{grid-column:9/span 2}.col-xl-2.offset-xl-10{grid-column:10/span 2}.col-xl-2.offset-xl-11{grid-column:11/span 2}.col-xl-2.offset-xl-12{grid-column:12/span 2}.col-xl-2.offset-xl-13{grid-column:13/span 2}.col-xl-2.offset-xl-14{grid-column:14/span 2}.col-xl-2.offset-xl-15{grid-column:15/span 2}.col-xl-2.offset-xl-16{grid-column:16/span 2}.col-xl-3.offset-xl-2{grid-column:2/span 3}.col-xl-3.offset-xl-3{grid-column:3/span 3}.col-xl-3.offset-xl-4{grid-column:4/span 3}.col-xl-3.offset-xl-5{grid-column:5/span 3}.col-xl-3.offset-xl-6{grid-column:6/span 3}.col-xl-3.offset-xl-7{grid-column:7/span 3}.col-xl-3.offset-xl-8{grid-column:8/span 3}.col-xl-3.offset-xl-9{grid-column:9/span 3}.col-xl-3.offset-xl-10{grid-column:10/span 3}.col-xl-3.offset-xl-11{grid-column:11/span 3}.col-xl-3.offset-xl-12{grid-column:12/span 3}.col-xl-3.offset-xl-13{grid-column:13/span 3}.col-xl-3.offset-xl-14{grid-column:14/span 3}.col-xl-3.offset-xl-15{grid-column:15/span 3}.col-xl-3.offset-xl-16{grid-column:16/span 3}.col-xl-4.offset-xl-2{grid-column:2/span 4}.col-xl-4.offset-xl-3{grid-column:3/span 4}.col-xl-4.offset-xl-4{grid-column:4/span 4}.col-xl-4.offset-xl-5{grid-column:5/span 4}.col-xl-4.offset-xl-6{grid-column:6/span 4}.col-xl-4.offset-xl-7{grid-column:7/span 4}.col-xl-4.offset-xl-8{grid-column:8/span 4}.col-xl-4.offset-xl-9{grid-column:9/span 4}.col-xl-4.offset-xl-10{grid-column:10/span 4}.col-xl-4.offset-xl-11{grid-column:11/span 4}.col-xl-4.offset-xl-12{grid-column:12/span 4}.col-xl-4.offset-xl-13{grid-column:13/span 4}.col-xl-4.offset-xl-14{grid-column:14/span 4}.col-xl-4.offset-xl-15{grid-column:15/span 4}.col-xl-4.offset-xl-16{grid-column:16/span 4}.col-xl-5.offset-xl-2{grid-column:2/span 5}.col-xl-5.offset-xl-3{grid-column:3/span 5}.col-xl-5.offset-xl-4{grid-column:4/span 5}.col-xl-5.offset-xl-5{grid-column:5/span 5}.col-xl-5.offset-xl-6{grid-column:6/span 5}.col-xl-5.offset-xl-7{grid-column:7/span 5}.col-xl-5.offset-xl-8{grid-column:8/span 5}.col-xl-5.offset-xl-9{grid-column:9/span 5}.col-xl-5.offset-xl-10{grid-column:10/span 5}.col-xl-5.offset-xl-11{grid-column:11/span 5}.col-xl-5.offset-xl-12{grid-column:12/span 5}.col-xl-5.offset-xl-13{grid-column:13/span 5}.col-xl-5.offset-xl-14{grid-column:14/span 5}.col-xl-5.offset-xl-15{grid-column:15/span 5}.col-xl-5.offset-xl-16{grid-column:16/span 5}.col-xl-6.offset-xl-2{grid-column:2/span 6}.col-xl-6.offset-xl-3{grid-column:3/span 6}.col-xl-6.offset-xl-4{grid-column:4/span 6}.col-xl-6.offset-xl-5{grid-column:5/span 6}.col-xl-6.offset-xl-6{grid-column:6/span 6}.col-xl-6.offset-xl-7{grid-column:7/span 6}.col-xl-6.offset-xl-8{grid-column:8/span 6}.col-xl-6.offset-xl-9{grid-column:9/span 6}.col-xl-6.offset-xl-10{grid-column:10/span 6}.col-xl-6.offset-xl-11{grid-column:11/span 6}.col-xl-6.offset-xl-12{grid-column:12/span 6}.col-xl-6.offset-xl-13{grid-column:13/span 6}.col-xl-6.offset-xl-14{grid-column:14/span 6}.col-xl-6.offset-xl-15{grid-column:15/span 6}.col-xl-6.offset-xl-16{grid-column:16/span 6}.col-xl-7.offset-xl-2{grid-column:2/span 7}.col-xl-7.offset-xl-3{grid-column:3/span 7}.col-xl-7.offset-xl-4{grid-column:4/span 7}.col-xl-7.offset-xl-5{grid-column:5/span 7}.col-xl-7.offset-xl-6{grid-column:6/span 7}.col-xl-7.offset-xl-7{grid-column:7/span 7}.col-xl-7.offset-xl-8{grid-column:8/span 7}.col-xl-7.offset-xl-9{grid-column:9/span 7}.col-xl-7.offset-xl-10{grid-column:10/span 7}.col-xl-7.offset-xl-11{grid-column:11/span 7}.col-xl-7.offset-xl-12{grid-column:12/span 7}.col-xl-7.offset-xl-13{grid-column:13/span 7}.col-xl-7.offset-xl-14{grid-column:14/span 7}.col-xl-7.offset-xl-15{grid-column:15/span 7}.col-xl-7.offset-xl-16{grid-column:16/span 7}.col-xl-8.offset-xl-2{grid-column:2/span 8}.col-xl-8.offset-xl-3{grid-column:3/span 8}.col-xl-8.offset-xl-4{grid-column:4/span 8}.col-xl-8.offset-xl-5{grid-column:5/span 8}.col-xl-8.offset-xl-6{grid-column:6/span 8}.col-xl-8.offset-xl-7{grid-column:7/span 8}.col-xl-8.offset-xl-8{grid-column:8/span 8}.col-xl-8.offset-xl-9{grid-column:9/span 8}.col-xl-8.offset-xl-10{grid-column:10/span 8}.col-xl-8.offset-xl-11{grid-column:11/span 8}.col-xl-8.offset-xl-12{grid-column:12/span 8}.col-xl-8.offset-xl-13{grid-column:13/span 8}.col-xl-8.offset-xl-14{grid-column:14/span 8}.col-xl-8.offset-xl-15{grid-column:15/span 8}.col-xl-8.offset-xl-16{grid-column:16/span 8}.col-xl-9.offset-xl-2{grid-column:2/span 9}.col-xl-9.offset-xl-3{grid-column:3/span 9}.col-xl-9.offset-xl-4{grid-column:4/span 9}.col-xl-9.offset-xl-5{grid-column:5/span 9}.col-xl-9.offset-xl-6{grid-column:6/span 9}.col-xl-9.offset-xl-7{grid-column:7/span 9}.col-xl-9.offset-xl-8{grid-column:8/span 9}.col-xl-9.offset-xl-9{grid-column:9/span 9}.col-xl-9.offset-xl-10{grid-column:10/span 9}.col-xl-9.offset-xl-11{grid-column:11/span 9}.col-xl-9.offset-xl-12{grid-column:12/span 9}.col-xl-9.offset-xl-13{grid-column:13/span 9}.col-xl-9.offset-xl-14{grid-column:14/span 9}.col-xl-9.offset-xl-15{grid-column:15/span 9}.col-xl-9.offset-xl-16{grid-column:16/span 9}.col-xl-10.offset-xl-2{grid-column:2/span 10}.col-xl-10.offset-xl-3{grid-column:3/span 10}.col-xl-10.offset-xl-4{grid-column:4/span 10}.col-xl-10.offset-xl-5{grid-column:5/span 10}.col-xl-10.offset-xl-6{grid-column:6/span 10}.col-xl-10.offset-xl-7{grid-column:7/span 10}.col-xl-10.offset-xl-8{grid-column:8/span 10}.col-xl-10.offset-xl-9{grid-column:9/span 10}.col-xl-10.offset-xl-10{grid-column:10/span 10}.col-xl-10.offset-xl-11{grid-column:11/span 10}.col-xl-10.offset-xl-12{grid-column:12/span 10}.col-xl-10.offset-xl-13{grid-column:13/span 10}.col-xl-10.offset-xl-14{grid-column:14/span 10}.col-xl-10.offset-xl-15{grid-column:15/span 10}.col-xl-10.offset-xl-16{grid-column:16/span 10}.col-xl-11.offset-xl-2{grid-column:2/span 11}.col-xl-11.offset-xl-3{grid-column:3/span 11}.col-xl-11.offset-xl-4{grid-column:4/span 11}.col-xl-11.offset-xl-5{grid-column:5/span 11}.col-xl-11.offset-xl-6{grid-column:6/span 11}.col-xl-11.offset-xl-7{grid-column:7/span 11}.col-xl-11.offset-xl-8{grid-column:8/span 11}.col-xl-11.offset-xl-9{grid-column:9/span 11}.col-xl-11.offset-xl-10{grid-column:10/span 11}.col-xl-11.offset-xl-11{grid-column:11/span 11}.col-xl-11.offset-xl-12{grid-column:12/span 11}.col-xl-11.offset-xl-13{grid-column:13/span 11}.col-xl-11.offset-xl-14{grid-column:14/span 11}.col-xl-11.offset-xl-15{grid-column:15/span 11}.col-xl-11.offset-xl-16{grid-column:16/span 11}.col-xl-12.offset-xl-2{grid-column:2/span 12}.col-xl-12.offset-xl-3{grid-column:3/span 12}.col-xl-12.offset-xl-4{grid-column:4/span 12}.col-xl-12.offset-xl-5{grid-column:5/span 12}.col-xl-12.offset-xl-6{grid-column:6/span 12}.col-xl-12.offset-xl-7{grid-column:7/span 12}.col-xl-12.offset-xl-8{grid-column:8/span 12}.col-xl-12.offset-xl-9{grid-column:9/span 12}.col-xl-12.offset-xl-10{grid-column:10/span 12}.col-xl-12.offset-xl-11{grid-column:11/span 12}.col-xl-12.offset-xl-12{grid-column:12/span 12}.col-xl-12.offset-xl-13{grid-column:13/span 12}.col-xl-12.offset-xl-14{grid-column:14/span 12}.col-xl-12.offset-xl-15{grid-column:15/span 12}.col-xl-12.offset-xl-16{grid-column:16/span 12}.col-xl-13.offset-xl-2{grid-column:2/span 13}.col-xl-13.offset-xl-3{grid-column:3/span 13}.col-xl-13.offset-xl-4{grid-column:4/span 13}.col-xl-13.offset-xl-5{grid-column:5/span 13}.col-xl-13.offset-xl-6{grid-column:6/span 13}.col-xl-13.offset-xl-7{grid-column:7/span 13}.col-xl-13.offset-xl-8{grid-column:8/span 13}.col-xl-13.offset-xl-9{grid-column:9/span 13}.col-xl-13.offset-xl-10{grid-column:10/span 13}.col-xl-13.offset-xl-11{grid-column:11/span 13}.col-xl-13.offset-xl-12{grid-column:12/span 13}.col-xl-13.offset-xl-13{grid-column:13/span 13}.col-xl-13.offset-xl-14{grid-column:14/span 13}.col-xl-13.offset-xl-15{grid-column:15/span 13}.col-xl-13.offset-xl-16{grid-column:16/span 13}.col-xl-14.offset-xl-2{grid-column:2/span 14}.col-xl-14.offset-xl-3{grid-column:3/span 14}.col-xl-14.offset-xl-4{grid-column:4/span 14}.col-xl-14.offset-xl-5{grid-column:5/span 14}.col-xl-14.offset-xl-6{grid-column:6/span 14}.col-xl-14.offset-xl-7{grid-column:7/span 14}.col-xl-14.offset-xl-8{grid-column:8/span 14}.col-xl-14.offset-xl-9{grid-column:9/span 14}.col-xl-14.offset-xl-10{grid-column:10/span 14}.col-xl-14.offset-xl-11{grid-column:11/span 14}.col-xl-14.offset-xl-12{grid-column:12/span 14}.col-xl-14.offset-xl-13{grid-column:13/span 14}.col-xl-14.offset-xl-14{grid-column:14/span 14}.col-xl-14.offset-xl-15{grid-column:15/span 14}.col-xl-14.offset-xl-16{grid-column:16/span 14}.col-xl-15.offset-xl-2{grid-column:2/span 15}.col-xl-15.offset-xl-3{grid-column:3/span 15}.col-xl-15.offset-xl-4{grid-column:4/span 15}.col-xl-15.offset-xl-5{grid-column:5/span 15}.col-xl-15.offset-xl-6{grid-column:6/span 15}.col-xl-15.offset-xl-7{grid-column:7/span 15}.col-xl-15.offset-xl-8{grid-column:8/span 15}.col-xl-15.offset-xl-9{grid-column:9/span 15}.col-xl-15.offset-xl-10{grid-column:10/span 15}.col-xl-15.offset-xl-11{grid-column:11/span 15}.col-xl-15.offset-xl-12{grid-column:12/span 15}.col-xl-15.offset-xl-13{grid-column:13/span 15}.col-xl-15.offset-xl-14{grid-column:14/span 15}.col-xl-15.offset-xl-15{grid-column:15/span 15}.col-xl-15.offset-xl-16{grid-column:16/span 15}.col-xl-16.offset-xl-2{grid-column:2/span 16}.col-xl-16.offset-xl-3{grid-column:3/span 16}.col-xl-16.offset-xl-4{grid-column:4/span 16}.col-xl-16.offset-xl-5{grid-column:5/span 16}.col-xl-16.offset-xl-6{grid-column:6/span 16}.col-xl-16.offset-xl-7{grid-column:7/span 16}.col-xl-16.offset-xl-8{grid-column:8/span 16}.col-xl-16.offset-xl-9{grid-column:9/span 16}.col-xl-16.offset-xl-10{grid-column:10/span 16}.col-xl-16.offset-xl-11{grid-column:11/span 16}.col-xl-16.offset-xl-12{grid-column:12/span 16}.col-xl-16.offset-xl-13{grid-column:13/span 16}.col-xl-16.offset-xl-14{grid-column:14/span 16}.col-xl-16.offset-xl-15{grid-column:15/span 16}.col-xl-16.offset-xl-16{grid-column:16/span 16}}@media only screen and (min-width: 1400px){.col-xxl-1.offset-xxl-2{grid-column:2/span 1}.col-xxl-1.offset-xxl-3{grid-column:3/span 1}.col-xxl-1.offset-xxl-4{grid-column:4/span 1}.col-xxl-1.offset-xxl-5{grid-column:5/span 1}.col-xxl-1.offset-xxl-6{grid-column:6/span 1}.col-xxl-1.offset-xxl-7{grid-column:7/span 1}.col-xxl-1.offset-xxl-8{grid-column:8/span 1}.col-xxl-1.offset-xxl-9{grid-column:9/span 1}.col-xxl-1.offset-xxl-10{grid-column:10/span 1}.col-xxl-1.offset-xxl-11{grid-column:11/span 1}.col-xxl-1.offset-xxl-12{grid-column:12/span 1}.col-xxl-1.offset-xxl-13{grid-column:13/span 1}.col-xxl-1.offset-xxl-14{grid-column:14/span 1}.col-xxl-1.offset-xxl-15{grid-column:15/span 1}.col-xxl-1.offset-xxl-16{grid-column:16/span 1}.col-xxl-2.offset-xxl-2{grid-column:2/span 2}.col-xxl-2.offset-xxl-3{grid-column:3/span 2}.col-xxl-2.offset-xxl-4{grid-column:4/span 2}.col-xxl-2.offset-xxl-5{grid-column:5/span 2}.col-xxl-2.offset-xxl-6{grid-column:6/span 2}.col-xxl-2.offset-xxl-7{grid-column:7/span 2}.col-xxl-2.offset-xxl-8{grid-column:8/span 2}.col-xxl-2.offset-xxl-9{grid-column:9/span 2}.col-xxl-2.offset-xxl-10{grid-column:10/span 2}.col-xxl-2.offset-xxl-11{grid-column:11/span 2}.col-xxl-2.offset-xxl-12{grid-column:12/span 2}.col-xxl-2.offset-xxl-13{grid-column:13/span 2}.col-xxl-2.offset-xxl-14{grid-column:14/span 2}.col-xxl-2.offset-xxl-15{grid-column:15/span 2}.col-xxl-2.offset-xxl-16{grid-column:16/span 2}.col-xxl-3.offset-xxl-2{grid-column:2/span 3}.col-xxl-3.offset-xxl-3{grid-column:3/span 3}.col-xxl-3.offset-xxl-4{grid-column:4/span 3}.col-xxl-3.offset-xxl-5{grid-column:5/span 3}.col-xxl-3.offset-xxl-6{grid-column:6/span 3}.col-xxl-3.offset-xxl-7{grid-column:7/span 3}.col-xxl-3.offset-xxl-8{grid-column:8/span 3}.col-xxl-3.offset-xxl-9{grid-column:9/span 3}.col-xxl-3.offset-xxl-10{grid-column:10/span 3}.col-xxl-3.offset-xxl-11{grid-column:11/span 3}.col-xxl-3.offset-xxl-12{grid-column:12/span 3}.col-xxl-3.offset-xxl-13{grid-column:13/span 3}.col-xxl-3.offset-xxl-14{grid-column:14/span 3}.col-xxl-3.offset-xxl-15{grid-column:15/span 3}.col-xxl-3.offset-xxl-16{grid-column:16/span 3}.col-xxl-4.offset-xxl-2{grid-column:2/span 4}.col-xxl-4.offset-xxl-3{grid-column:3/span 4}.col-xxl-4.offset-xxl-4{grid-column:4/span 4}.col-xxl-4.offset-xxl-5{grid-column:5/span 4}.col-xxl-4.offset-xxl-6{grid-column:6/span 4}.col-xxl-4.offset-xxl-7{grid-column:7/span 4}.col-xxl-4.offset-xxl-8{grid-column:8/span 4}.col-xxl-4.offset-xxl-9{grid-column:9/span 4}.col-xxl-4.offset-xxl-10{grid-column:10/span 4}.col-xxl-4.offset-xxl-11{grid-column:11/span 4}.col-xxl-4.offset-xxl-12{grid-column:12/span 4}.col-xxl-4.offset-xxl-13{grid-column:13/span 4}.col-xxl-4.offset-xxl-14{grid-column:14/span 4}.col-xxl-4.offset-xxl-15{grid-column:15/span 4}.col-xxl-4.offset-xxl-16{grid-column:16/span 4}.col-xxl-5.offset-xxl-2{grid-column:2/span 5}.col-xxl-5.offset-xxl-3{grid-column:3/span 5}.col-xxl-5.offset-xxl-4{grid-column:4/span 5}.col-xxl-5.offset-xxl-5{grid-column:5/span 5}.col-xxl-5.offset-xxl-6{grid-column:6/span 5}.col-xxl-5.offset-xxl-7{grid-column:7/span 5}.col-xxl-5.offset-xxl-8{grid-column:8/span 5}.col-xxl-5.offset-xxl-9{grid-column:9/span 5}.col-xxl-5.offset-xxl-10{grid-column:10/span 5}.col-xxl-5.offset-xxl-11{grid-column:11/span 5}.col-xxl-5.offset-xxl-12{grid-column:12/span 5}.col-xxl-5.offset-xxl-13{grid-column:13/span 5}.col-xxl-5.offset-xxl-14{grid-column:14/span 5}.col-xxl-5.offset-xxl-15{grid-column:15/span 5}.col-xxl-5.offset-xxl-16{grid-column:16/span 5}.col-xxl-6.offset-xxl-2{grid-column:2/span 6}.col-xxl-6.offset-xxl-3{grid-column:3/span 6}.col-xxl-6.offset-xxl-4{grid-column:4/span 6}.col-xxl-6.offset-xxl-5{grid-column:5/span 6}.col-xxl-6.offset-xxl-6{grid-column:6/span 6}.col-xxl-6.offset-xxl-7{grid-column:7/span 6}.col-xxl-6.offset-xxl-8{grid-column:8/span 6}.col-xxl-6.offset-xxl-9{grid-column:9/span 6}.col-xxl-6.offset-xxl-10{grid-column:10/span 6}.col-xxl-6.offset-xxl-11{grid-column:11/span 6}.col-xxl-6.offset-xxl-12{grid-column:12/span 6}.col-xxl-6.offset-xxl-13{grid-column:13/span 6}.col-xxl-6.offset-xxl-14{grid-column:14/span 6}.col-xxl-6.offset-xxl-15{grid-column:15/span 6}.col-xxl-6.offset-xxl-16{grid-column:16/span 6}.col-xxl-7.offset-xxl-2{grid-column:2/span 7}.col-xxl-7.offset-xxl-3{grid-column:3/span 7}.col-xxl-7.offset-xxl-4{grid-column:4/span 7}.col-xxl-7.offset-xxl-5{grid-column:5/span 7}.col-xxl-7.offset-xxl-6{grid-column:6/span 7}.col-xxl-7.offset-xxl-7{grid-column:7/span 7}.col-xxl-7.offset-xxl-8{grid-column:8/span 7}.col-xxl-7.offset-xxl-9{grid-column:9/span 7}.col-xxl-7.offset-xxl-10{grid-column:10/span 7}.col-xxl-7.offset-xxl-11{grid-column:11/span 7}.col-xxl-7.offset-xxl-12{grid-column:12/span 7}.col-xxl-7.offset-xxl-13{grid-column:13/span 7}.col-xxl-7.offset-xxl-14{grid-column:14/span 7}.col-xxl-7.offset-xxl-15{grid-column:15/span 7}.col-xxl-7.offset-xxl-16{grid-column:16/span 7}.col-xxl-8.offset-xxl-2{grid-column:2/span 8}.col-xxl-8.offset-xxl-3{grid-column:3/span 8}.col-xxl-8.offset-xxl-4{grid-column:4/span 8}.col-xxl-8.offset-xxl-5{grid-column:5/span 8}.col-xxl-8.offset-xxl-6{grid-column:6/span 8}.col-xxl-8.offset-xxl-7{grid-column:7/span 8}.col-xxl-8.offset-xxl-8{grid-column:8/span 8}.col-xxl-8.offset-xxl-9{grid-column:9/span 8}.col-xxl-8.offset-xxl-10{grid-column:10/span 8}.col-xxl-8.offset-xxl-11{grid-column:11/span 8}.col-xxl-8.offset-xxl-12{grid-column:12/span 8}.col-xxl-8.offset-xxl-13{grid-column:13/span 8}.col-xxl-8.offset-xxl-14{grid-column:14/span 8}.col-xxl-8.offset-xxl-15{grid-column:15/span 8}.col-xxl-8.offset-xxl-16{grid-column:16/span 8}.col-xxl-9.offset-xxl-2{grid-column:2/span 9}.col-xxl-9.offset-xxl-3{grid-column:3/span 9}.col-xxl-9.offset-xxl-4{grid-column:4/span 9}.col-xxl-9.offset-xxl-5{grid-column:5/span 9}.col-xxl-9.offset-xxl-6{grid-column:6/span 9}.col-xxl-9.offset-xxl-7{grid-column:7/span 9}.col-xxl-9.offset-xxl-8{grid-column:8/span 9}.col-xxl-9.offset-xxl-9{grid-column:9/span 9}.col-xxl-9.offset-xxl-10{grid-column:10/span 9}.col-xxl-9.offset-xxl-11{grid-column:11/span 9}.col-xxl-9.offset-xxl-12{grid-column:12/span 9}.col-xxl-9.offset-xxl-13{grid-column:13/span 9}.col-xxl-9.offset-xxl-14{grid-column:14/span 9}.col-xxl-9.offset-xxl-15{grid-column:15/span 9}.col-xxl-9.offset-xxl-16{grid-column:16/span 9}.col-xxl-10.offset-xxl-2{grid-column:2/span 10}.col-xxl-10.offset-xxl-3{grid-column:3/span 10}.col-xxl-10.offset-xxl-4{grid-column:4/span 10}.col-xxl-10.offset-xxl-5{grid-column:5/span 10}.col-xxl-10.offset-xxl-6{grid-column:6/span 10}.col-xxl-10.offset-xxl-7{grid-column:7/span 10}.col-xxl-10.offset-xxl-8{grid-column:8/span 10}.col-xxl-10.offset-xxl-9{grid-column:9/span 10}.col-xxl-10.offset-xxl-10{grid-column:10/span 10}.col-xxl-10.offset-xxl-11{grid-column:11/span 10}.col-xxl-10.offset-xxl-12{grid-column:12/span 10}.col-xxl-10.offset-xxl-13{grid-column:13/span 10}.col-xxl-10.offset-xxl-14{grid-column:14/span 10}.col-xxl-10.offset-xxl-15{grid-column:15/span 10}.col-xxl-10.offset-xxl-16{grid-column:16/span 10}.col-xxl-11.offset-xxl-2{grid-column:2/span 11}.col-xxl-11.offset-xxl-3{grid-column:3/span 11}.col-xxl-11.offset-xxl-4{grid-column:4/span 11}.col-xxl-11.offset-xxl-5{grid-column:5/span 11}.col-xxl-11.offset-xxl-6{grid-column:6/span 11}.col-xxl-11.offset-xxl-7{grid-column:7/span 11}.col-xxl-11.offset-xxl-8{grid-column:8/span 11}.col-xxl-11.offset-xxl-9{grid-column:9/span 11}.col-xxl-11.offset-xxl-10{grid-column:10/span 11}.col-xxl-11.offset-xxl-11{grid-column:11/span 11}.col-xxl-11.offset-xxl-12{grid-column:12/span 11}.col-xxl-11.offset-xxl-13{grid-column:13/span 11}.col-xxl-11.offset-xxl-14{grid-column:14/span 11}.col-xxl-11.offset-xxl-15{grid-column:15/span 11}.col-xxl-11.offset-xxl-16{grid-column:16/span 11}.col-xxl-12.offset-xxl-2{grid-column:2/span 12}.col-xxl-12.offset-xxl-3{grid-column:3/span 12}.col-xxl-12.offset-xxl-4{grid-column:4/span 12}.col-xxl-12.offset-xxl-5{grid-column:5/span 12}.col-xxl-12.offset-xxl-6{grid-column:6/span 12}.col-xxl-12.offset-xxl-7{grid-column:7/span 12}.col-xxl-12.offset-xxl-8{grid-column:8/span 12}.col-xxl-12.offset-xxl-9{grid-column:9/span 12}.col-xxl-12.offset-xxl-10{grid-column:10/span 12}.col-xxl-12.offset-xxl-11{grid-column:11/span 12}.col-xxl-12.offset-xxl-12{grid-column:12/span 12}.col-xxl-12.offset-xxl-13{grid-column:13/span 12}.col-xxl-12.offset-xxl-14{grid-column:14/span 12}.col-xxl-12.offset-xxl-15{grid-column:15/span 12}.col-xxl-12.offset-xxl-16{grid-column:16/span 12}.col-xxl-13.offset-xxl-2{grid-column:2/span 13}.col-xxl-13.offset-xxl-3{grid-column:3/span 13}.col-xxl-13.offset-xxl-4{grid-column:4/span 13}.col-xxl-13.offset-xxl-5{grid-column:5/span 13}.col-xxl-13.offset-xxl-6{grid-column:6/span 13}.col-xxl-13.offset-xxl-7{grid-column:7/span 13}.col-xxl-13.offset-xxl-8{grid-column:8/span 13}.col-xxl-13.offset-xxl-9{grid-column:9/span 13}.col-xxl-13.offset-xxl-10{grid-column:10/span 13}.col-xxl-13.offset-xxl-11{grid-column:11/span 13}.col-xxl-13.offset-xxl-12{grid-column:12/span 13}.col-xxl-13.offset-xxl-13{grid-column:13/span 13}.col-xxl-13.offset-xxl-14{grid-column:14/span 13}.col-xxl-13.offset-xxl-15{grid-column:15/span 13}.col-xxl-13.offset-xxl-16{grid-column:16/span 13}.col-xxl-14.offset-xxl-2{grid-column:2/span 14}.col-xxl-14.offset-xxl-3{grid-column:3/span 14}.col-xxl-14.offset-xxl-4{grid-column:4/span 14}.col-xxl-14.offset-xxl-5{grid-column:5/span 14}.col-xxl-14.offset-xxl-6{grid-column:6/span 14}.col-xxl-14.offset-xxl-7{grid-column:7/span 14}.col-xxl-14.offset-xxl-8{grid-column:8/span 14}.col-xxl-14.offset-xxl-9{grid-column:9/span 14}.col-xxl-14.offset-xxl-10{grid-column:10/span 14}.col-xxl-14.offset-xxl-11{grid-column:11/span 14}.col-xxl-14.offset-xxl-12{grid-column:12/span 14}.col-xxl-14.offset-xxl-13{grid-column:13/span 14}.col-xxl-14.offset-xxl-14{grid-column:14/span 14}.col-xxl-14.offset-xxl-15{grid-column:15/span 14}.col-xxl-14.offset-xxl-16{grid-column:16/span 14}.col-xxl-15.offset-xxl-2{grid-column:2/span 15}.col-xxl-15.offset-xxl-3{grid-column:3/span 15}.col-xxl-15.offset-xxl-4{grid-column:4/span 15}.col-xxl-15.offset-xxl-5{grid-column:5/span 15}.col-xxl-15.offset-xxl-6{grid-column:6/span 15}.col-xxl-15.offset-xxl-7{grid-column:7/span 15}.col-xxl-15.offset-xxl-8{grid-column:8/span 15}.col-xxl-15.offset-xxl-9{grid-column:9/span 15}.col-xxl-15.offset-xxl-10{grid-column:10/span 15}.col-xxl-15.offset-xxl-11{grid-column:11/span 15}.col-xxl-15.offset-xxl-12{grid-column:12/span 15}.col-xxl-15.offset-xxl-13{grid-column:13/span 15}.col-xxl-15.offset-xxl-14{grid-column:14/span 15}.col-xxl-15.offset-xxl-15{grid-column:15/span 15}.col-xxl-15.offset-xxl-16{grid-column:16/span 15}.col-xxl-16.offset-xxl-2{grid-column:2/span 16}.col-xxl-16.offset-xxl-3{grid-column:3/span 16}.col-xxl-16.offset-xxl-4{grid-column:4/span 16}.col-xxl-16.offset-xxl-5{grid-column:5/span 16}.col-xxl-16.offset-xxl-6{grid-column:6/span 16}.col-xxl-16.offset-xxl-7{grid-column:7/span 16}.col-xxl-16.offset-xxl-8{grid-column:8/span 16}.col-xxl-16.offset-xxl-9{grid-column:9/span 16}.col-xxl-16.offset-xxl-10{grid-column:10/span 16}.col-xxl-16.offset-xxl-11{grid-column:11/span 16}.col-xxl-16.offset-xxl-12{grid-column:12/span 16}.col-xxl-16.offset-xxl-13{grid-column:13/span 16}.col-xxl-16.offset-xxl-14{grid-column:14/span 16}.col-xxl-16.offset-xxl-15{grid-column:15/span 16}.col-xxl-16.offset-xxl-16{grid-column:16/span 16}}a.button,.button{display:inline-flex;font-family:"IBM Plex Sans Hebrew",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1em;font-weight:700;text-decoration:none;white-space:nowrap;outline:none;width:min-content;background:#fff;background-image:none;border:1px solid #c6c6c6;appearance:none;color:#202123;border-radius:4px;box-sizing:border-box;cursor:pointer;line-height:1;padding:.935rem 1.6rem;transition:.2s;user-select:none;box-shadow:none;align-items:center;justify-content:center;overflow:visible;text-align:center}a.button:focus,a.button:hover,.button:focus,.button:hover{transition:.2s;background-image:none}a.button:hover,.button:hover{background:#e6e6e6}a.button:active,a.button:focus,.button:active,.button:focus{background:#fff}a.button.gradient,.button.gradient{z-index:1;position:relative;background:linear-gradient(to top, white 0%, white 100%)}a.button.gradient:before,.button.gradient:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(to bottom, white 0%, white 100%)}a.button.gradient:hover::before,.button.gradient:hover::before{opacity:1}a.button.gradient:active::before,a.button.gradient:focus::before,.button.gradient:active::before,.button.gradient:focus::before{background:linear-gradient(to bottom, white 0%, white 100%)}a.button.active,.button.active{color:#202123;background:#dcdcdc;background-image:none;text-decoration:none}a.button.active:focus,a.button.active:hover,.button.active:focus,.button.active:hover{color:#202123;background:#e6e6e6}a.button.inactive,.button.inactive{pointer-events:none;cursor:default;background-image:none}a.button.block,.button.block{display:flex;flex:1;width:auto}a.button i,a.button [class^=material-symbols-outlined],.button i,.button [class^=material-symbols-outlined]{font-size:1.12rem;color:#202123;text-shadow:none}a.button.primary,.button.primary{background:#314a93;color:#fff;text-shadow:0 1px 1px #293e7c;border:1px solid #3a57ae}a.button.primary i,a.button.primary [class^=material-symbols-outlined],.button.primary i,.button.primary [class^=material-symbols-outlined]{color:#fff}a.button.primary:hover,.button.primary:hover{background:#3b58b0;color:#fff}a.button.primary:hover i,a.button.primary:hover [class^=material-symbols-outlined],.button.primary:hover i,.button.primary:hover [class^=material-symbols-outlined]{color:#fff}a.button.primary:active,a.button.primary.active,.button.primary:active,.button.primary.active{background:#3b58b0;color:#fff}a.button.primary:active:focus,a.button.primary:active:hover,a.button.primary.active:focus,a.button.primary.active:hover,.button.primary:active:focus,.button.primary:active:hover,.button.primary.active:focus,.button.primary.active:hover{background:#4363c0}a.button.primary.gradient,.button.primary.gradient{background:#314a93;z-index:1;position:relative;background:linear-gradient(to top, #314a93 0%, #647ecb 100%)}a.button.primary.gradient:before,.button.primary.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #314a93 0%, #6b85ce 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.primary.gradient:hover::before,.button.primary.gradient:hover::before{opacity:1}a.button.primary.gradient:active::before,a.button.primary.gradient:focus::before,.button.primary.gradient:active::before,.button.primary.gradient:focus::before{background:#314a93;background:linear-gradient(to bottom, #314a93 0%, #7b91d3 100%)}a.button.primary.gradient-ltr,.button.primary.gradient-ltr{background:linear-gradient(125deg, #647ecb, #2b4080)}a.button.primary.gradient-rtl,.button.primary.gradient-rtl{background:linear-gradient(-125deg, #647ecb, #2b4080)}a.button.primary.gradient-ltr,a.button.primary.gradient-rtl,.button.primary.gradient-ltr,.button.primary.gradient-rtl{z-index:1;position:relative}a.button.primary.gradient-ltr:before,a.button.primary.gradient-rtl:before,.button.primary.gradient-ltr:before,.button.primary.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #647ecb, #2e468b)}a.button.primary.gradient-ltr:hover::before,a.button.primary.gradient-rtl:hover::before,.button.primary.gradient-ltr:hover::before,.button.primary.gradient-rtl:hover::before{opacity:1}a.button.primary.gradient-ltr:active::before,a.button.primary.gradient-ltr:focus::before,a.button.primary.gradient-rtl:active::before,a.button.primary.gradient-rtl:focus::before,.button.primary.gradient-ltr:active::before,.button.primary.gradient-ltr:focus::before,.button.primary.gradient-rtl:active::before,.button.primary.gradient-rtl:focus::before{background:linear-gradient(0deg, #738bd0, #314a93)}a.button.primary.outlined,.button.primary.outlined{background:rgba(0,0,0,0);color:#314a93;text-shadow:0 1px 1px #293e7c;border:1px solid #3a57ae}a.button.primary.outlined i,a.button.primary.outlined [class^=material-symbols-outlined],.button.primary.outlined i,.button.primary.outlined [class^=material-symbols-outlined]{color:#314a93}a.button.primary.outlined:hover,.button.primary.outlined:hover{background:#3b58b0;color:#fff}a.button.primary.outlined:hover i,a.button.primary.outlined:hover [class^=material-symbols-outlined],.button.primary.outlined:hover i,.button.primary.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.primary.outlined:active,a.button.primary.outlined.active,.button.primary.outlined:active,.button.primary.outlined.active{background:#3b58b0;color:#fff}a.button.primary.outlined:active:focus,a.button.primary.outlined:active:hover,a.button.primary.outlined.active:focus,a.button.primary.outlined.active:hover,.button.primary.outlined:active:focus,.button.primary.outlined:active:hover,.button.primary.outlined.active:focus,.button.primary.outlined.active:hover{background:#4363c0}a.button.success,.button.success{background:#297d51;color:#fff;text-shadow:0 1px 1px #216642;border:1px solid #329862}a.button.success i,a.button.success [class^=material-symbols-outlined],.button.success i,.button.success [class^=material-symbols-outlined]{color:#fff}a.button.success:hover,.button.success:hover{background:#329a64;color:#fff}a.button.success:hover i,a.button.success:hover [class^=material-symbols-outlined],.button.success:hover i,.button.success:hover [class^=material-symbols-outlined]{color:#fff}a.button.success:active,a.button.success.active,.button.success:active,.button.success.active{background:#329a64;color:#fff}a.button.success:active:focus,a.button.success:active:hover,a.button.success.active:focus,a.button.success.active:hover,.button.success:active:focus,.button.success:active:hover,.button.success.active:focus,.button.success.active:hover{background:#39ad70}a.button.success.gradient,.button.success.gradient{background:#297d51;z-index:1;position:relative;background:linear-gradient(to top, #297d51 0%, #4dc486 100%)}a.button.success.gradient:before,.button.success.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #297d51 0%, #54c78b 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.success.gradient:hover::before,.button.success.gradient:hover::before{opacity:1}a.button.success.gradient:active::before,a.button.success.gradient:focus::before,.button.success.gradient:active::before,.button.success.gradient:focus::before{background:#297d51;background:linear-gradient(to bottom, #297d51 0%, #64cc95 100%)}a.button.success.gradient-ltr,.button.success.gradient-ltr{background:linear-gradient(125deg, #4dc486, #236a45)}a.button.success.gradient-rtl,.button.success.gradient-rtl{background:linear-gradient(-125deg, #4dc486, #236a45)}a.button.success.gradient-ltr,a.button.success.gradient-rtl,.button.success.gradient-ltr,.button.success.gradient-rtl{z-index:1;position:relative}a.button.success.gradient-ltr:before,a.button.success.gradient-rtl:before,.button.success.gradient-ltr:before,.button.success.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #4dc486, #26754c)}a.button.success.gradient-ltr:hover::before,a.button.success.gradient-rtl:hover::before,.button.success.gradient-ltr:hover::before,.button.success.gradient-rtl:hover::before{opacity:1}a.button.success.gradient-ltr:active::before,a.button.success.gradient-ltr:focus::before,a.button.success.gradient-rtl:active::before,a.button.success.gradient-rtl:focus::before,.button.success.gradient-ltr:active::before,.button.success.gradient-ltr:focus::before,.button.success.gradient-rtl:active::before,.button.success.gradient-rtl:focus::before{background:linear-gradient(0deg, #5cca90, #297d51)}a.button.success.outlined,.button.success.outlined{background:rgba(0,0,0,0);color:#297d51;text-shadow:0 1px 1px #216642;border:1px solid #329862}a.button.success.outlined i,a.button.success.outlined [class^=material-symbols-outlined],.button.success.outlined i,.button.success.outlined [class^=material-symbols-outlined]{color:#297d51}a.button.success.outlined:hover,.button.success.outlined:hover{background:#329a64;color:#fff}a.button.success.outlined:hover i,a.button.success.outlined:hover [class^=material-symbols-outlined],.button.success.outlined:hover i,.button.success.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.success.outlined:active,a.button.success.outlined.active,.button.success.outlined:active,.button.success.outlined.active{background:#329a64;color:#fff}a.button.success.outlined:active:focus,a.button.success.outlined:active:hover,a.button.success.outlined.active:focus,a.button.success.outlined.active:hover,.button.success.outlined:active:focus,.button.success.outlined:active:hover,.button.success.outlined.active:focus,.button.success.outlined.active:hover{background:#39ad70}a.button.warning,.button.warning{background:#956d28;color:#fff;text-shadow:0 1px 1px #7d5b22;border:1px solid #b18230}a.button.warning i,a.button.warning [class^=material-symbols-outlined],.button.warning i,.button.warning [class^=material-symbols-outlined]{color:#fff}a.button.warning:hover,.button.warning:hover{background:#b38330;color:#fff}a.button.warning:hover i,a.button.warning:hover [class^=material-symbols-outlined],.button.warning:hover i,.button.warning:hover [class^=material-symbols-outlined]{color:#fff}a.button.warning:active,a.button.warning.active,.button.warning:active,.button.warning.active{background:#b38330;color:#fff}a.button.warning:active:focus,a.button.warning:active:hover,a.button.warning.active:focus,a.button.warning.active:hover,.button.warning:active:focus,.button.warning:active:hover,.button.warning.active:focus,.button.warning.active:hover{background:#c79235}a.button.warning.gradient,.button.warning.gradient{background:#956d28;z-index:1;position:relative;background:linear-gradient(to top, #956d28 0%, #d2a456 100%)}a.button.warning.gradient:before,.button.warning.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #956d28 0%, #d4a95e 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.warning.gradient:hover::before,.button.warning.gradient:hover::before{opacity:1}a.button.warning.gradient:active::before,a.button.warning.gradient:focus::before,.button.warning.gradient:active::before,.button.warning.gradient:focus::before{background:#956d28;background:linear-gradient(to bottom, #956d28 0%, #d8b16e 100%)}a.button.warning.gradient-ltr,.button.warning.gradient-ltr{background:linear-gradient(125deg, #d2a456, #815e23)}a.button.warning.gradient-rtl,.button.warning.gradient-rtl{background:linear-gradient(-125deg, #d2a456, #815e23)}a.button.warning.gradient-ltr,a.button.warning.gradient-rtl,.button.warning.gradient-ltr,.button.warning.gradient-rtl{z-index:1;position:relative}a.button.warning.gradient-ltr:before,a.button.warning.gradient-rtl:before,.button.warning.gradient-ltr:before,.button.warning.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d2a456, #8d6726)}a.button.warning.gradient-ltr:hover::before,a.button.warning.gradient-rtl:hover::before,.button.warning.gradient-ltr:hover::before,.button.warning.gradient-rtl:hover::before{opacity:1}a.button.warning.gradient-ltr:active::before,a.button.warning.gradient-ltr:focus::before,a.button.warning.gradient-rtl:active::before,a.button.warning.gradient-rtl:focus::before,.button.warning.gradient-ltr:active::before,.button.warning.gradient-ltr:focus::before,.button.warning.gradient-rtl:active::before,.button.warning.gradient-rtl:focus::before{background:linear-gradient(0deg, #d6ad66, #956d28)}a.button.warning.outlined,.button.warning.outlined{background:rgba(0,0,0,0);color:#956d28;text-shadow:0 1px 1px #7d5b22;border:1px solid #b18230}a.button.warning.outlined i,a.button.warning.outlined [class^=material-symbols-outlined],.button.warning.outlined i,.button.warning.outlined [class^=material-symbols-outlined]{color:#956d28}a.button.warning.outlined:hover,.button.warning.outlined:hover{background:#b38330;color:#fff}a.button.warning.outlined:hover i,a.button.warning.outlined:hover [class^=material-symbols-outlined],.button.warning.outlined:hover i,.button.warning.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.warning.outlined:active,a.button.warning.outlined.active,.button.warning.outlined:active,.button.warning.outlined.active{background:#b38330;color:#fff}a.button.warning.outlined:active:focus,a.button.warning.outlined:active:hover,a.button.warning.outlined.active:focus,a.button.warning.outlined.active:hover,.button.warning.outlined:active:focus,.button.warning.outlined:active:hover,.button.warning.outlined.active:focus,.button.warning.outlined.active:hover{background:#c79235}a.button.error,.button.error{background:#972727;color:#fff;text-shadow:0 1px 1px #7f2121;border:1px solid #b32e2e}a.button.error i,a.button.error [class^=material-symbols-outlined],.button.error i,.button.error [class^=material-symbols-outlined]{color:#fff}a.button.error:hover,.button.error:hover{background:#b52f2f;color:#fff}a.button.error:hover i,a.button.error:hover [class^=material-symbols-outlined],.button.error:hover i,.button.error:hover [class^=material-symbols-outlined]{color:#fff}a.button.error:active,a.button.error.active,.button.error:active,.button.error.active{background:#b52f2f;color:#fff}a.button.error:active:focus,a.button.error:active:hover,a.button.error.active:focus,a.button.error.active:hover,.button.error:active:focus,.button.error:active:hover,.button.error.active:focus,.button.error.active:hover{background:#ca3434}a.button.error.gradient,.button.error.gradient{background:#972727;z-index:1;position:relative;background:linear-gradient(to top, #972727 0%, #d35656 100%)}a.button.error.gradient:before,.button.error.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #972727 0%, #d55e5e 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.error.gradient:hover::before,.button.error.gradient:hover::before{opacity:1}a.button.error.gradient:active::before,a.button.error.gradient:focus::before,.button.error.gradient:active::before,.button.error.gradient:focus::before{background:#972727;background:linear-gradient(to bottom, #972727 0%, #da6e6e 100%)}a.button.error.gradient-ltr,.button.error.gradient-ltr{background:linear-gradient(125deg, #d35656, #832222)}a.button.error.gradient-rtl,.button.error.gradient-rtl{background:linear-gradient(-125deg, #d35656, #832222)}a.button.error.gradient-ltr,a.button.error.gradient-rtl,.button.error.gradient-ltr,.button.error.gradient-rtl{z-index:1;position:relative}a.button.error.gradient-ltr:before,a.button.error.gradient-rtl:before,.button.error.gradient-ltr:before,.button.error.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d35656, #8f2525)}a.button.error.gradient-ltr:hover::before,a.button.error.gradient-rtl:hover::before,.button.error.gradient-ltr:hover::before,.button.error.gradient-rtl:hover::before{opacity:1}a.button.error.gradient-ltr:active::before,a.button.error.gradient-ltr:focus::before,a.button.error.gradient-rtl:active::before,a.button.error.gradient-rtl:focus::before,.button.error.gradient-ltr:active::before,.button.error.gradient-ltr:focus::before,.button.error.gradient-rtl:active::before,.button.error.gradient-rtl:focus::before{background:linear-gradient(0deg, #d76666, #972727)}a.button.error.outlined,.button.error.outlined{background:rgba(0,0,0,0);color:#972727;text-shadow:0 1px 1px #7f2121;border:1px solid #b32e2e}a.button.error.outlined i,a.button.error.outlined [class^=material-symbols-outlined],.button.error.outlined i,.button.error.outlined [class^=material-symbols-outlined]{color:#972727}a.button.error.outlined:hover,.button.error.outlined:hover{background:#b52f2f;color:#fff}a.button.error.outlined:hover i,a.button.error.outlined:hover [class^=material-symbols-outlined],.button.error.outlined:hover i,.button.error.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.error.outlined:active,a.button.error.outlined.active,.button.error.outlined:active,.button.error.outlined.active{background:#b52f2f;color:#fff}a.button.error.outlined:active:focus,a.button.error.outlined:active:hover,a.button.error.outlined.active:focus,a.button.error.outlined.active:hover,.button.error.outlined:active:focus,.button.error.outlined:active:hover,.button.error.outlined.active:focus,.button.error.outlined.active:hover{background:#ca3434}a.button.dark,.button.dark{background:#252831;color:#fff;text-shadow:0 1px 1px #181a20;border:1px solid #343945}a.button.dark i,a.button.dark [class^=material-symbols-outlined],.button.dark i,.button.dark [class^=material-symbols-outlined]{color:#fff}a.button.dark:hover,.button.dark:hover{background:#353a47;color:#fff}a.button.dark:hover i,a.button.dark:hover [class^=material-symbols-outlined],.button.dark:hover i,.button.dark:hover [class^=material-symbols-outlined]{color:#fff}a.button.dark:active,a.button.dark.active,.button.dark:active,.button.dark.active{background:#353a47;color:#fff}a.button.dark:active:focus,a.button.dark:active:hover,a.button.dark.active:focus,a.button.dark.active:hover,.button.dark:active:focus,.button.dark:active:hover,.button.dark.active:focus,.button.dark.active:hover{background:#404655}a.button.dark.gradient,.button.dark.gradient{background:#252831;z-index:1;position:relative;background:linear-gradient(to top, #252831 0%, #535a6e 100%)}a.button.dark.gradient:before,.button.dark.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #252831 0%, #575f74 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.dark.gradient:hover::before,.button.dark.gradient:hover::before{opacity:1}a.button.dark.gradient:active::before,a.button.dark.gradient:focus::before,.button.dark.gradient:active::before,.button.dark.gradient:focus::before{background:#252831;background:linear-gradient(to bottom, #252831 0%, #60687f 100%)}a.button.dark.gradient-ltr,.button.dark.gradient-ltr{background:linear-gradient(125deg, #535a6e, #1a1c22)}a.button.dark.gradient-rtl,.button.dark.gradient-rtl{background:linear-gradient(-125deg, #535a6e, #1a1c22)}a.button.dark.gradient-ltr,a.button.dark.gradient-rtl,.button.dark.gradient-ltr,.button.dark.gradient-rtl{z-index:1;position:relative}a.button.dark.gradient-ltr:before,a.button.dark.gradient-rtl:before,.button.dark.gradient-ltr:before,.button.dark.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #535a6e, #21232b)}a.button.dark.gradient-ltr:hover::before,a.button.dark.gradient-rtl:hover::before,.button.dark.gradient-ltr:hover::before,.button.dark.gradient-rtl:hover::before{opacity:1}a.button.dark.gradient-ltr:active::before,a.button.dark.gradient-ltr:focus::before,a.button.dark.gradient-rtl:active::before,a.button.dark.gradient-rtl:focus::before,.button.dark.gradient-ltr:active::before,.button.dark.gradient-ltr:focus::before,.button.dark.gradient-rtl:active::before,.button.dark.gradient-rtl:focus::before{background:linear-gradient(0deg, #5c637a, #252831)}a.button.dark.outlined,.button.dark.outlined{background:rgba(0,0,0,0);color:#252831;text-shadow:0 1px 1px #181a20;border:1px solid #343945}a.button.dark.outlined i,a.button.dark.outlined [class^=material-symbols-outlined],.button.dark.outlined i,.button.dark.outlined [class^=material-symbols-outlined]{color:#252831}a.button.dark.outlined:hover,.button.dark.outlined:hover{background:#353a47;color:#fff}a.button.dark.outlined:hover i,a.button.dark.outlined:hover [class^=material-symbols-outlined],.button.dark.outlined:hover i,.button.dark.outlined:hover [class^=material-symbols-outlined]{color:#fff}a.button.dark.outlined:active,a.button.dark.outlined.active,.button.dark.outlined:active,.button.dark.outlined.active{background:#353a47;color:#fff}a.button.dark.outlined:active:focus,a.button.dark.outlined:active:hover,a.button.dark.outlined.active:focus,a.button.dark.outlined.active:hover,.button.dark.outlined:active:focus,.button.dark.outlined:active:hover,.button.dark.outlined.active:focus,.button.dark.outlined.active:hover{background:#404655}a.button.link.button,a.button.top>.button,.button.link.button,.button.top>.button{background:rgba(0,0,0,0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0);border:1px solid;box-shadow:none;border:none;color:#314a93;text-decoration:underline;font-weight:400}a.button.link.button i,a.button.link.button [class^=material-symbols-outlined],a.button.top>.button i,a.button.top>.button [class^=material-symbols-outlined],.button.link.button i,.button.link.button [class^=material-symbols-outlined],.button.top>.button i,.button.top>.button [class^=material-symbols-outlined]{color:#fff}a.button.link.button:hover,a.button.top>.button:hover,.button.link.button:hover,.button.top>.button:hover{background:rgba(19,19,19,0);color:#fff}a.button.link.button:hover i,a.button.link.button:hover [class^=material-symbols-outlined],a.button.top>.button:hover i,a.button.top>.button:hover [class^=material-symbols-outlined],.button.link.button:hover i,.button.link.button:hover [class^=material-symbols-outlined],.button.top>.button:hover i,.button.top>.button:hover [class^=material-symbols-outlined]{color:#fff}a.button.link.button:active,a.button.link.button.active,a.button.top>.button:active,a.button.top>.button.active,.button.link.button:active,.button.link.button.active,.button.top>.button:active,.button.top>.button.active{background:rgba(19,19,19,0);color:#fff}a.button.link.button:active:focus,a.button.link.button:active:hover,a.button.link.button.active:focus,a.button.link.button.active:hover,a.button.top>.button:active:focus,a.button.top>.button:active:hover,a.button.top>.button.active:focus,a.button.top>.button.active:hover,.button.link.button:active:focus,.button.link.button:active:hover,.button.link.button.active:focus,.button.link.button.active:hover,.button.top>.button:active:focus,.button.top>.button:active:hover,.button.top>.button.active:focus,.button.top>.button.active:hover{background:rgba(32,32,32,0)}a.button.link.button.gradient,a.button.top>.button.gradient,.button.link.button.gradient,.button.top>.button.gradient{background:rgba(0,0,0,0);z-index:1;position:relative;background:linear-gradient(to top, transparent 0%, rgba(54, 54, 54, 0) 100%)}a.button.link.button.gradient:before,a.button.top>.button.gradient:before,.button.link.button.gradient:before,.button.top>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, transparent 0%, rgba(59, 59, 59, 0) 100%);opacity:0;transition:opacity .25s;z-index:-1}a.button.link.button.gradient:hover::before,a.button.top>.button.gradient:hover::before,.button.link.button.gradient:hover::before,.button.top>.button.gradient:hover::before{opacity:1}a.button.link.button.gradient:active::before,a.button.link.button.gradient:focus::before,a.button.top>.button.gradient:active::before,a.button.top>.button.gradient:focus::before,.button.link.button.gradient:active::before,.button.link.button.gradient:focus::before,.button.top>.button.gradient:active::before,.button.top>.button.gradient:focus::before{background:rgba(0,0,0,0);background:linear-gradient(to bottom, transparent 0%, rgba(69, 69, 69, 0) 100%)}a.button.link.button.gradient-ltr,a.button.top>.button.gradient-ltr,.button.link.button.gradient-ltr,.button.top>.button.gradient-ltr{background:linear-gradient(125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-rtl,a.button.top>.button.gradient-rtl,.button.link.button.gradient-rtl,.button.top>.button.gradient-rtl{background:linear-gradient(-125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-ltr,a.button.link.button.gradient-rtl,a.button.top>.button.gradient-ltr,a.button.top>.button.gradient-rtl,.button.link.button.gradient-ltr,.button.link.button.gradient-rtl,.button.top>.button.gradient-ltr,.button.top>.button.gradient-rtl{z-index:1;position:relative}a.button.link.button.gradient-ltr:before,a.button.link.button.gradient-rtl:before,a.button.top>.button.gradient-ltr:before,a.button.top>.button.gradient-rtl:before,.button.link.button.gradient-ltr:before,.button.link.button.gradient-rtl:before,.button.top>.button.gradient-ltr:before,.button.top>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}a.button.link.button.gradient-ltr:hover::before,a.button.link.button.gradient-rtl:hover::before,a.button.top>.button.gradient-ltr:hover::before,a.button.top>.button.gradient-rtl:hover::before,.button.link.button.gradient-ltr:hover::before,.button.link.button.gradient-rtl:hover::before,.button.top>.button.gradient-ltr:hover::before,.button.top>.button.gradient-rtl:hover::before{opacity:1}a.button.link.button.gradient-ltr:active::before,a.button.link.button.gradient-ltr:focus::before,a.button.link.button.gradient-rtl:active::before,a.button.link.button.gradient-rtl:focus::before,a.button.top>.button.gradient-ltr:active::before,a.button.top>.button.gradient-ltr:focus::before,a.button.top>.button.gradient-rtl:active::before,a.button.top>.button.gradient-rtl:focus::before,.button.link.button.gradient-ltr:active::before,.button.link.button.gradient-ltr:focus::before,.button.link.button.gradient-rtl:active::before,.button.link.button.gradient-rtl:focus::before,.button.top>.button.gradient-ltr:active::before,.button.top>.button.gradient-ltr:focus::before,.button.top>.button.gradient-rtl:active::before,.button.top>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, rgba(64, 64, 64, 0), transparent)}a.button.link.button:hover,a.button.top>.button:hover,.button.link.button:hover,.button.top>.button:hover{color:#202123}a.button.link.button i,a.button.link.button [class^=material-symbols-outlined],a.button.top>.button i,a.button.top>.button [class^=material-symbols-outlined],.button.link.button i,.button.link.button [class^=material-symbols-outlined],.button.top>.button i,.button.top>.button [class^=material-symbols-outlined]{color:#202123}a.button.tiny,.button.tiny{font-size:.809em;padding:.415rem .5rem}a.button.mini,.button.mini{font-size:.909em;padding:.445rem .9rem}a.button.small,.button.small{font-size:.979em;padding:.645rem 1.4rem}a.button.large,.button.large{font-size:1.25em;padding:1.15rem 2.1rem}a.button.huge,.button.huge{font-size:1.45em;padding:1.3rem 2.4rem}a.button.secondary,.button.secondary{color:#202123;border-color:#c6c6c6;background:linear-gradient(to top, #e6e6e6 0%, #ffffff 100%)}a.button.secondary:focus,a.button.secondary:hover,a.button.secondary:active,a.button.secondary.active,.button.secondary:focus,.button.secondary:hover,.button.secondary:active,.button.secondary.active{color:#202123;background:linear-gradient(to bottom, #e6e6e6 0%, #ffffff 100%)}a.button.secondary i,a.button.secondary [class^=material-symbols-outlined],.button.secondary i,.button.secondary [class^=material-symbols-outlined]{color:#202123}.buttons{display:inline-flex;flex-wrap:wrap;flex-shrink:0;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);width:fit-content}.buttons .button{box-shadow:none}.buttons .button:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.buttons .button:not(:first-child):not(:last-child){border-radius:0;margin-left:-1px}.buttons .button:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.buttons.secondary>.button{color:#202123;border-color:#c6c6c6;background:linear-gradient(to top, #e6e6e6 0%, #ffffff 100%)}.buttons.secondary>.button:focus,.buttons.secondary>.button:hover,.buttons.secondary>.button:active,.buttons.secondary>.button.active{color:#202123;background:linear-gradient(to bottom, #e6e6e6 0%, #ffffff 100%)}.buttons.secondary>.button i,.buttons.secondary>.button [class^=material-symbols-outlined]{color:#202123}.buttons.block{display:flex;width:auto}.buttons.block .button{flex:1 0 0}.buttons.tiny>.button,.buttons.tiny>.dropdown>.button{font-size:.809em;padding:.415rem .5rem}.buttons.mini>.button,.buttons.mini>.dropdown>.button{font-size:.909em;padding:.445rem .9rem}.buttons.small>.button,.buttons.small>.dropdown>.button{font-size:.979em;padding:.645rem 1.4rem}.buttons.large>.button,.buttons.large>.dropdown>.button{font-size:1.25em;padding:1.15rem 2.1rem}.buttons.huge>.button,.buttons.huge>.dropdown>.button{font-size:1.45em;padding:1.3rem 2.4rem}.buttons.primary>.button,.buttons.primary>.dropdown>.button{background:#314a93;color:#fff;text-shadow:0 1px 1px #293e7c;border:1px solid #283d78}.buttons.primary>.button i,.buttons.primary>.button [class^=material-symbols-outlined],.buttons.primary>.dropdown>.button i,.buttons.primary>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.primary>.button:hover,.buttons.primary>.dropdown>.button:hover{background:#3b58b0;color:#fff}.buttons.primary>.button:hover i,.buttons.primary>.button:hover [class^=material-symbols-outlined],.buttons.primary>.dropdown>.button:hover i,.buttons.primary>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.primary>.button:active,.buttons.primary>.button.active,.buttons.primary>.dropdown>.button:active,.buttons.primary>.dropdown>.button.active{background:#3b58b0;color:#fff}.buttons.primary>.button:active:focus,.buttons.primary>.button:active:hover,.buttons.primary>.button.active:focus,.buttons.primary>.button.active:hover,.buttons.primary>.dropdown>.button:active:focus,.buttons.primary>.dropdown>.button:active:hover,.buttons.primary>.dropdown>.button.active:focus,.buttons.primary>.dropdown>.button.active:hover{background:#4363c0}.buttons.primary>.button.gradient,.buttons.primary>.dropdown>.button.gradient{background:#314a93;z-index:1;position:relative;background:linear-gradient(to top, #314a93 0%, #647ecb 100%)}.buttons.primary>.button.gradient:before,.buttons.primary>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #314a93 0%, #6b85ce 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.primary>.button.gradient:hover::before,.buttons.primary>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.primary>.button.gradient:active::before,.buttons.primary>.button.gradient:focus::before,.buttons.primary>.dropdown>.button.gradient:active::before,.buttons.primary>.dropdown>.button.gradient:focus::before{background:#314a93;background:linear-gradient(to bottom, #314a93 0%, #7b91d3 100%)}.buttons.primary>.button.gradient-ltr,.buttons.primary>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #647ecb, #2b4080)}.buttons.primary>.button.gradient-rtl,.buttons.primary>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #647ecb, #2b4080)}.buttons.primary>.button.gradient-ltr,.buttons.primary>.button.gradient-rtl,.buttons.primary>.dropdown>.button.gradient-ltr,.buttons.primary>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.primary>.button.gradient-ltr:before,.buttons.primary>.button.gradient-rtl:before,.buttons.primary>.dropdown>.button.gradient-ltr:before,.buttons.primary>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #647ecb, #2e468b)}.buttons.primary>.button.gradient-ltr:hover::before,.buttons.primary>.button.gradient-rtl:hover::before,.buttons.primary>.dropdown>.button.gradient-ltr:hover::before,.buttons.primary>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.primary>.button.gradient-ltr:active::before,.buttons.primary>.button.gradient-ltr:focus::before,.buttons.primary>.button.gradient-rtl:active::before,.buttons.primary>.button.gradient-rtl:focus::before,.buttons.primary>.dropdown>.button.gradient-ltr:active::before,.buttons.primary>.dropdown>.button.gradient-ltr:focus::before,.buttons.primary>.dropdown>.button.gradient-rtl:active::before,.buttons.primary>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #738bd0, #314a93)}.buttons.success>.button,.buttons.success>.dropdown>.button{background:#297d51;color:#fff;text-shadow:0 1px 1px #216642;border:1px solid #206240}.buttons.success>.button i,.buttons.success>.button [class^=material-symbols-outlined],.buttons.success>.dropdown>.button i,.buttons.success>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.success>.button:hover,.buttons.success>.dropdown>.button:hover{background:#329a64;color:#fff}.buttons.success>.button:hover i,.buttons.success>.button:hover [class^=material-symbols-outlined],.buttons.success>.dropdown>.button:hover i,.buttons.success>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.success>.button:active,.buttons.success>.button.active,.buttons.success>.dropdown>.button:active,.buttons.success>.dropdown>.button.active{background:#329a64;color:#fff}.buttons.success>.button:active:focus,.buttons.success>.button:active:hover,.buttons.success>.button.active:focus,.buttons.success>.button.active:hover,.buttons.success>.dropdown>.button:active:focus,.buttons.success>.dropdown>.button:active:hover,.buttons.success>.dropdown>.button.active:focus,.buttons.success>.dropdown>.button.active:hover{background:#39ad70}.buttons.success>.button.gradient,.buttons.success>.dropdown>.button.gradient{background:#297d51;z-index:1;position:relative;background:linear-gradient(to top, #297d51 0%, #4dc486 100%)}.buttons.success>.button.gradient:before,.buttons.success>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #297d51 0%, #54c78b 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.success>.button.gradient:hover::before,.buttons.success>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.success>.button.gradient:active::before,.buttons.success>.button.gradient:focus::before,.buttons.success>.dropdown>.button.gradient:active::before,.buttons.success>.dropdown>.button.gradient:focus::before{background:#297d51;background:linear-gradient(to bottom, #297d51 0%, #64cc95 100%)}.buttons.success>.button.gradient-ltr,.buttons.success>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #4dc486, #236a45)}.buttons.success>.button.gradient-rtl,.buttons.success>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #4dc486, #236a45)}.buttons.success>.button.gradient-ltr,.buttons.success>.button.gradient-rtl,.buttons.success>.dropdown>.button.gradient-ltr,.buttons.success>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.success>.button.gradient-ltr:before,.buttons.success>.button.gradient-rtl:before,.buttons.success>.dropdown>.button.gradient-ltr:before,.buttons.success>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #4dc486, #26754c)}.buttons.success>.button.gradient-ltr:hover::before,.buttons.success>.button.gradient-rtl:hover::before,.buttons.success>.dropdown>.button.gradient-ltr:hover::before,.buttons.success>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.success>.button.gradient-ltr:active::before,.buttons.success>.button.gradient-ltr:focus::before,.buttons.success>.button.gradient-rtl:active::before,.buttons.success>.button.gradient-rtl:focus::before,.buttons.success>.dropdown>.button.gradient-ltr:active::before,.buttons.success>.dropdown>.button.gradient-ltr:focus::before,.buttons.success>.dropdown>.button.gradient-rtl:active::before,.buttons.success>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #5cca90, #297d51)}.buttons.warning>.button,.buttons.warning>.dropdown>.button{background:#956d28;color:#fff;text-shadow:0 1px 1px #7d5b22;border:1px solid #795820}.buttons.warning>.button i,.buttons.warning>.button [class^=material-symbols-outlined],.buttons.warning>.dropdown>.button i,.buttons.warning>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.warning>.button:hover,.buttons.warning>.dropdown>.button:hover{background:#b38330;color:#fff}.buttons.warning>.button:hover i,.buttons.warning>.button:hover [class^=material-symbols-outlined],.buttons.warning>.dropdown>.button:hover i,.buttons.warning>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.warning>.button:active,.buttons.warning>.button.active,.buttons.warning>.dropdown>.button:active,.buttons.warning>.dropdown>.button.active{background:#b38330;color:#fff}.buttons.warning>.button:active:focus,.buttons.warning>.button:active:hover,.buttons.warning>.button.active:focus,.buttons.warning>.button.active:hover,.buttons.warning>.dropdown>.button:active:focus,.buttons.warning>.dropdown>.button:active:hover,.buttons.warning>.dropdown>.button.active:focus,.buttons.warning>.dropdown>.button.active:hover{background:#c79235}.buttons.warning>.button.gradient,.buttons.warning>.dropdown>.button.gradient{background:#956d28;z-index:1;position:relative;background:linear-gradient(to top, #956d28 0%, #d2a456 100%)}.buttons.warning>.button.gradient:before,.buttons.warning>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #956d28 0%, #d4a95e 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.warning>.button.gradient:hover::before,.buttons.warning>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.warning>.button.gradient:active::before,.buttons.warning>.button.gradient:focus::before,.buttons.warning>.dropdown>.button.gradient:active::before,.buttons.warning>.dropdown>.button.gradient:focus::before{background:#956d28;background:linear-gradient(to bottom, #956d28 0%, #d8b16e 100%)}.buttons.warning>.button.gradient-ltr,.buttons.warning>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #d2a456, #815e23)}.buttons.warning>.button.gradient-rtl,.buttons.warning>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #d2a456, #815e23)}.buttons.warning>.button.gradient-ltr,.buttons.warning>.button.gradient-rtl,.buttons.warning>.dropdown>.button.gradient-ltr,.buttons.warning>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.warning>.button.gradient-ltr:before,.buttons.warning>.button.gradient-rtl:before,.buttons.warning>.dropdown>.button.gradient-ltr:before,.buttons.warning>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d2a456, #8d6726)}.buttons.warning>.button.gradient-ltr:hover::before,.buttons.warning>.button.gradient-rtl:hover::before,.buttons.warning>.dropdown>.button.gradient-ltr:hover::before,.buttons.warning>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.warning>.button.gradient-ltr:active::before,.buttons.warning>.button.gradient-ltr:focus::before,.buttons.warning>.button.gradient-rtl:active::before,.buttons.warning>.button.gradient-rtl:focus::before,.buttons.warning>.dropdown>.button.gradient-ltr:active::before,.buttons.warning>.dropdown>.button.gradient-ltr:focus::before,.buttons.warning>.dropdown>.button.gradient-rtl:active::before,.buttons.warning>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #d6ad66, #956d28)}.buttons.error>.button,.buttons.error>.dropdown>.button{background:#972727;color:#fff;text-shadow:0 1px 1px #7f2121;border:1px solid #7b2020}.buttons.error>.button i,.buttons.error>.button [class^=material-symbols-outlined],.buttons.error>.dropdown>.button i,.buttons.error>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.error>.button:hover,.buttons.error>.dropdown>.button:hover{background:#b52f2f;color:#fff}.buttons.error>.button:hover i,.buttons.error>.button:hover [class^=material-symbols-outlined],.buttons.error>.dropdown>.button:hover i,.buttons.error>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.error>.button:active,.buttons.error>.button.active,.buttons.error>.dropdown>.button:active,.buttons.error>.dropdown>.button.active{background:#b52f2f;color:#fff}.buttons.error>.button:active:focus,.buttons.error>.button:active:hover,.buttons.error>.button.active:focus,.buttons.error>.button.active:hover,.buttons.error>.dropdown>.button:active:focus,.buttons.error>.dropdown>.button:active:hover,.buttons.error>.dropdown>.button.active:focus,.buttons.error>.dropdown>.button.active:hover{background:#ca3434}.buttons.error>.button.gradient,.buttons.error>.dropdown>.button.gradient{background:#972727;z-index:1;position:relative;background:linear-gradient(to top, #972727 0%, #d35656 100%)}.buttons.error>.button.gradient:before,.buttons.error>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #972727 0%, #d55e5e 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.error>.button.gradient:hover::before,.buttons.error>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.error>.button.gradient:active::before,.buttons.error>.button.gradient:focus::before,.buttons.error>.dropdown>.button.gradient:active::before,.buttons.error>.dropdown>.button.gradient:focus::before{background:#972727;background:linear-gradient(to bottom, #972727 0%, #da6e6e 100%)}.buttons.error>.button.gradient-ltr,.buttons.error>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #d35656, #832222)}.buttons.error>.button.gradient-rtl,.buttons.error>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #d35656, #832222)}.buttons.error>.button.gradient-ltr,.buttons.error>.button.gradient-rtl,.buttons.error>.dropdown>.button.gradient-ltr,.buttons.error>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.error>.button.gradient-ltr:before,.buttons.error>.button.gradient-rtl:before,.buttons.error>.dropdown>.button.gradient-ltr:before,.buttons.error>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #d35656, #8f2525)}.buttons.error>.button.gradient-ltr:hover::before,.buttons.error>.button.gradient-rtl:hover::before,.buttons.error>.dropdown>.button.gradient-ltr:hover::before,.buttons.error>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.error>.button.gradient-ltr:active::before,.buttons.error>.button.gradient-ltr:focus::before,.buttons.error>.button.gradient-rtl:active::before,.buttons.error>.button.gradient-rtl:focus::before,.buttons.error>.dropdown>.button.gradient-ltr:active::before,.buttons.error>.dropdown>.button.gradient-ltr:focus::before,.buttons.error>.dropdown>.button.gradient-rtl:active::before,.buttons.error>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #d76666, #972727)}.buttons.dark>.button,.buttons.dark>.dropdown>.button{background:#252831;color:#fff;text-shadow:0 1px 1px #181a20;border:1px solid #16171d}.buttons.dark>.button i,.buttons.dark>.button [class^=material-symbols-outlined],.buttons.dark>.dropdown>.button i,.buttons.dark>.dropdown>.button [class^=material-symbols-outlined]{color:#fff}.buttons.dark>.button:hover,.buttons.dark>.dropdown>.button:hover{background:#353a47;color:#fff}.buttons.dark>.button:hover i,.buttons.dark>.button:hover [class^=material-symbols-outlined],.buttons.dark>.dropdown>.button:hover i,.buttons.dark>.dropdown>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.dark>.button:active,.buttons.dark>.button.active,.buttons.dark>.dropdown>.button:active,.buttons.dark>.dropdown>.button.active{background:#353a47;color:#fff}.buttons.dark>.button:active:focus,.buttons.dark>.button:active:hover,.buttons.dark>.button.active:focus,.buttons.dark>.button.active:hover,.buttons.dark>.dropdown>.button:active:focus,.buttons.dark>.dropdown>.button:active:hover,.buttons.dark>.dropdown>.button.active:focus,.buttons.dark>.dropdown>.button.active:hover{background:#404655}.buttons.dark>.button.gradient,.buttons.dark>.dropdown>.button.gradient{background:#252831;z-index:1;position:relative;background:linear-gradient(to top, #252831 0%, #535a6e 100%)}.buttons.dark>.button.gradient:before,.buttons.dark>.dropdown>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, #252831 0%, #575f74 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.dark>.button.gradient:hover::before,.buttons.dark>.dropdown>.button.gradient:hover::before{opacity:1}.buttons.dark>.button.gradient:active::before,.buttons.dark>.button.gradient:focus::before,.buttons.dark>.dropdown>.button.gradient:active::before,.buttons.dark>.dropdown>.button.gradient:focus::before{background:#252831;background:linear-gradient(to bottom, #252831 0%, #60687f 100%)}.buttons.dark>.button.gradient-ltr,.buttons.dark>.dropdown>.button.gradient-ltr{background:linear-gradient(125deg, #535a6e, #1a1c22)}.buttons.dark>.button.gradient-rtl,.buttons.dark>.dropdown>.button.gradient-rtl{background:linear-gradient(-125deg, #535a6e, #1a1c22)}.buttons.dark>.button.gradient-ltr,.buttons.dark>.button.gradient-rtl,.buttons.dark>.dropdown>.button.gradient-ltr,.buttons.dark>.dropdown>.button.gradient-rtl{z-index:1;position:relative}.buttons.dark>.button.gradient-ltr:before,.buttons.dark>.button.gradient-rtl:before,.buttons.dark>.dropdown>.button.gradient-ltr:before,.buttons.dark>.dropdown>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, #535a6e, #21232b)}.buttons.dark>.button.gradient-ltr:hover::before,.buttons.dark>.button.gradient-rtl:hover::before,.buttons.dark>.dropdown>.button.gradient-ltr:hover::before,.buttons.dark>.dropdown>.button.gradient-rtl:hover::before{opacity:1}.buttons.dark>.button.gradient-ltr:active::before,.buttons.dark>.button.gradient-ltr:focus::before,.buttons.dark>.button.gradient-rtl:active::before,.buttons.dark>.button.gradient-rtl:focus::before,.buttons.dark>.dropdown>.button.gradient-ltr:active::before,.buttons.dark>.dropdown>.button.gradient-ltr:focus::before,.buttons.dark>.dropdown>.button.gradient-rtl:active::before,.buttons.dark>.dropdown>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, #5c637a, #252831)}.buttons.link.button,.buttons.top>.button{background:rgba(0,0,0,0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0);border:1px solid;box-shadow:none;border:none;color:#314a93;text-decoration:underline;font-weight:400}.buttons.link.button i,.buttons.link.button [class^=material-symbols-outlined],.buttons.top>.button i,.buttons.top>.button [class^=material-symbols-outlined]{color:#fff}.buttons.link.button:hover,.buttons.top>.button:hover{background:rgba(19,19,19,0);color:#fff}.buttons.link.button:hover i,.buttons.link.button:hover [class^=material-symbols-outlined],.buttons.top>.button:hover i,.buttons.top>.button:hover [class^=material-symbols-outlined]{color:#fff}.buttons.link.button:active,.buttons.link.button.active,.buttons.top>.button:active,.buttons.top>.button.active{background:rgba(19,19,19,0);color:#fff}.buttons.link.button:active:focus,.buttons.link.button:active:hover,.buttons.link.button.active:focus,.buttons.link.button.active:hover,.buttons.top>.button:active:focus,.buttons.top>.button:active:hover,.buttons.top>.button.active:focus,.buttons.top>.button.active:hover{background:rgba(32,32,32,0)}.buttons.link.button.gradient,.buttons.top>.button.gradient{background:rgba(0,0,0,0);z-index:1;position:relative;background:linear-gradient(to top, transparent 0%, rgba(54, 54, 54, 0) 100%)}.buttons.link.button.gradient:before,.buttons.top>.button.gradient:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, transparent 0%, rgba(59, 59, 59, 0) 100%);opacity:0;transition:opacity .25s;z-index:-1}.buttons.link.button.gradient:hover::before,.buttons.top>.button.gradient:hover::before{opacity:1}.buttons.link.button.gradient:active::before,.buttons.link.button.gradient:focus::before,.buttons.top>.button.gradient:active::before,.buttons.top>.button.gradient:focus::before{background:rgba(0,0,0,0);background:linear-gradient(to bottom, transparent 0%, rgba(69, 69, 69, 0) 100%)}.buttons.link.button.gradient-ltr,.buttons.top>.button.gradient-ltr{background:linear-gradient(125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-rtl,.buttons.top>.button.gradient-rtl{background:linear-gradient(-125deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-ltr,.buttons.link.button.gradient-rtl,.buttons.top>.button.gradient-ltr,.buttons.top>.button.gradient-rtl{z-index:1;position:relative}.buttons.link.button.gradient-ltr:before,.buttons.link.button.gradient-rtl:before,.buttons.top>.button.gradient-ltr:before,.buttons.top>.button.gradient-rtl:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity .25s;z-index:-1;background:linear-gradient(0deg, rgba(54, 54, 54, 0), rgba(0, 0, 0, 0))}.buttons.link.button.gradient-ltr:hover::before,.buttons.link.button.gradient-rtl:hover::before,.buttons.top>.button.gradient-ltr:hover::before,.buttons.top>.button.gradient-rtl:hover::before{opacity:1}.buttons.link.button.gradient-ltr:active::before,.buttons.link.button.gradient-ltr:focus::before,.buttons.link.button.gradient-rtl:active::before,.buttons.link.button.gradient-rtl:focus::before,.buttons.top>.button.gradient-ltr:active::before,.buttons.top>.button.gradient-ltr:focus::before,.buttons.top>.button.gradient-rtl:active::before,.buttons.top>.button.gradient-rtl:focus::before{background:linear-gradient(0deg, rgba(64, 64, 64, 0), transparent)}.buttons.link.button:hover,.buttons.top>.button:hover{color:#202123}.buttons.link.button i,.buttons.link.button [class^=material-symbols-outlined],.buttons.top>.button i,.buttons.top>.button [class^=material-symbols-outlined]{color:#202123}.buttons .dropdown:last-child:not(:first-child),.buttons .dropdown:last-child:not(:first-child)>.button{border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}.buttons .dropdown:last-child,.buttons .dropdown:last-child>.button:first-child,.buttons .dropdown:last-child>.button:last-child{border-bottom-right-radius:4px;border-top-right-radius:4px}.buttons .dropdown:not(:first-child):not(:last-child)>.button{border-radius:0;margin-left:-1px}@media only screen and (max-width: 768px){.buttons{box-shadow:none}}.buttons.vertical{flex-flow:column}.buttons.vertical>.button,.buttons.vertical.block,.buttons.vertical.block>.button,.buttons.vertical>.dropdown>.button{width:100%}.buttons.vertical>.button{border-radius:0}.buttons.vertical>.button:last-child:not(:first-child),.buttons.vertical>.button:not(:first-child):not(:last-child){margin:-1px 0 0}.buttons.vertical.block{display:inline-flex}.buttons.vertical>.dropdown:last-child:not(:first-child),.buttons.vertical>.dropdown:last-child:not(:first-child)>.button,.buttons.vertical>.dropdown:not(:first-child):not(:last-child)>.button{margin:-1px 0 0;border-radius:0}.buttons.vertical>.primary.button,.buttons.vertical>.dropdown>.primary.button{border:1px solid #293e7c}.buttons.vertical>.success.button,.buttons.vertical>.dropdown>.success.button{border:1px solid #216642}.buttons.vertical>.warning.button,.buttons.vertical>.dropdown>.warning.button{border:1px solid #7d5b22}.buttons.vertical>.error.button,.buttons.vertical>.dropdown>.error.button{border:1px solid #7f2121}.buttons.vertical>.dark.button,.buttons.vertical>.dropdown>.dark.button{border:1px solid #181a20}.dropdown{display:inline-block;position:relative}.dropdown>.menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:45vh;overflow-y:auto;position:absolute;top:100%;z-index:301;width:auto}.dropdown>.menu>.item>a{padding:.1rem .9rem}.dropdown.right>.menu,.dropdown.left>.menu{top:0}.dropdown.right>.menu{left:100%;right:auto}.dropdown.left>.menu{left:auto;right:100%}.dropdown.top.left>.menu{right:auto !important;left:0 !important}.dropdown.top.right>.menu{right:0 !important;left:auto !important}.dropdown.top>.menu{bottom:100%;top:auto;right:0;left:auto;box-shadow:0 -2px 4px 0 rgba(0,0,0,.2)}.dropdown.bottom.left>.menu,.dropdown.bottom.right>.menu{top:100%}.dropdown.bottom.left>.menu{right:auto !important;left:0 !important}.dropdown.bottom.right>.menu{right:0 !important;left:auto !important}.dropdown.active>.menu,.dropdown>.toggle:focus+.menu,.dropdown>.toggle:hover+.menu,.dropdown>.menu:focus,.dropdown>.menu:hover{display:block}.dropdown.clickable>.toggle:hover+.menu{display:none}.dropdown.clickable>.toggle:focus+.menu,.dropdown.clickable>.toggle:active+.menu{display:block}.dropdown>.buttons>.toggle:nth-last-child(2){border-bottom-right-radius:4px;border-top-right-radius:4px}.dropdown.tiny>.button,.dropdown.tiny>.dropdown>.button{font-size:.809em;padding:.415rem .5rem}.dropdown.mini>.button,.dropdown.mini>.dropdown>.button{font-size:.909em;padding:.445rem .9rem}.dropdown.small>.button,.dropdown.small>.dropdown>.button{font-size:.979em;padding:.645rem 1.4rem}.dropdown.large>.button,.dropdown.large>.dropdown>.button{font-size:1.25em;padding:1.15rem 2.1rem}.dropdown.huge>.button,.dropdown.huge>.dropdown>.button{font-size:1.45em;padding:1.3rem 2.4rem}.caption{display:flex;align-items:center;margin:1.3em .2rem;font-size:1.95rem;font-weight:700;line-height:1.5;text-align:left}.caption>img,.caption>.material-symbols-outlined,.caption>i{margin-right:.559em}.caption>.material-symbols-outlined,.caption>i{font-size:2.73rem}.caption.divided{border-bottom:1px solid #c6c6c6;padding-bottom:.559em}.caption>span,.caption>div{display:contents}.caption.centered{flex-direction:column;text-align:center;margin:inherit}.caption.centered>img,.caption.centered>.material-symbols-outlined,.caption.centered>i{margin-right:unset;margin-bottom:2rem}.caption.small{font-size:1.65rem;margin:1em .1rem;font-weight:400}.caption.small>.material-symbols-outlined,.caption.small>i{font-size:2.31rem}.caption.large{font-size:2.35rem;margin:1.4em .3rem;font-weight:700}.caption.large>.material-symbols-outlined,.caption.large>i{font-size:3.29rem}@media only screen and (max-width: 768px){.caption{flex-direction:column;text-align:center;margin:inherit}.caption>img,.caption>.material-symbols-outlined,.caption>i{margin-right:unset;margin-bottom:2rem}}input[type=color],input[type=date],input[type=time],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],input[type=week],input[type=file],input:not([type]),textarea,select{-webkit-appearance:none;background-color:#fff;border-width:1px;border-style:solid;border-color:#c6c6c6;height:2.5rem;border-radius:0;outline:2px solid rgba(0,0,0,0);box-shadow:none;box-sizing:inherit;outline-offset:-2px;padding:.4rem .5rem;width:100%;max-width:100%;font-family:inherit;color:#202123;font-size:1.088em;transition:.35s}input[type=color]:focus,input[type=date]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,input[type=week]:focus,input[type=file]:focus,input:not([type]):focus,textarea:focus,select:focus{outline:2px solid #252831;outline-offset:-2px;background-color:#fff}input[type=color].success,input[type=date].success,input[type=time].success,input[type=datetime].success,input[type=datetime-local].success,input[type=email].success,input[type=month].success,input[type=number].success,input[type=password].success,input[type=search].success,input[type=tel].success,input[type=text].success,input[type=url].success,input[type=week].success,input[type=file].success,input:not([type]).success,textarea.success,select.success{color:#297d51;outline-color:#297d51}input[type=color].error,input[type=date].error,input[type=time].error,input[type=datetime].error,input[type=datetime-local].error,input[type=email].error,input[type=month].error,input[type=number].error,input[type=password].error,input[type=search].error,input[type=tel].error,input[type=text].error,input[type=url].error,input[type=week].error,input[type=file].error,input:not([type]).error,textarea.error,select.error{color:#972727;outline-color:#972727}select{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNnoiLz48L3N2Zz4=");background-repeat:no-repeat;background-position:right 10px center}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem;resize:vertical}label,legend{display:block;font-size:1rem;font-weight:400}fieldset{border-width:0;padding:0}input[type=checkbox],input[type=radio]{display:inline}input:disabled{opacity:.59}.form{position:relative;max-width:100%;padding:0 16px}.form .item{height:fit-content;margin:6px;display:inline-flex;flex-wrap:wrap;width:100%;max-width:100%;position:relative;align-items:center}.form label,.form .item>label{margin:0;color:#202123;font-size:.8579rem;font-weight:600;text-transform:none;height:fit-content}.form .item>input[type=file]{opacity:0;position:absolute;top:0;left:0;height:100%;cursor:default}.form .group,.form .item>.group{display:flex;width:100%}.form .group>*,.form .item>.group>*{flex:1 1 auto}.form .group>*:last-child,.form .item>.group>*:last-child{margin-left:-1px}.form .group>*:not(:first-child):not(:last-child),.form .item>.group>*:not(:first-child):not(:last-child){margin-left:-1px;margin-right:0}.form .group>.buttons,.form .item>.group>.buttons{box-shadow:none}.form .group>.button,.form .item>.group>.button{height:2.5rem;box-shadow:none}.form .group>.button:first-child,.form .item>.group>.button:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.form .group>.button:last-child:not(:first-child),.form .item>.group>.button:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.form .items{margin:6px 0 .75em;display:flex;flex-wrap:wrap}.form .items>.item{margin:6px}.form .two.items>.item{flex:0 0 calc(100%*(1 / 2) - (2 * 6px))}@media only screen and (max-width: 768px){.form .two.form .two.items>.item{flex:0 0 100%}}.form .three.items>.item{flex:0 0 calc(100%*(1 / 3) - (2 * 6px))}@media only screen and (max-width: 768px){.form .three.form .three.items>.item{flex:0 0 100%}}.form .four.items>.item{flex:0 0 calc(100%*(1 / 4) - (2 * 6px))}@media only screen and (max-width: 768px){.form .four.form .four.items>.item{flex:0 0 100%}}.form .five.items>.item{flex:0 0 calc(100%*(1 / 5) - (2 * 6px))}@media only screen and (max-width: 768px){.form .five.form .five.items>.item{flex:0 0 100%}}.form .six.items>.item{flex:0 0 calc(100%*(1 / 6) - (2 * 6px))}@media only screen and (max-width: 768px){.form .six.form .six.items>.item{flex:0 0 100%}}.form .seven.items>.item{flex:0 0 calc(100%*(1 / 7) - (2 * 6px))}@media only screen and (max-width: 768px){.form .seven.form .seven.items>.item{flex:0 0 100%}}.form .eight.items>.item{flex:0 0 calc(100%*(1 / 8) - (2 * 6px))}@media only screen and (max-width: 768px){.form .eight.form .eight.items>.item{flex:0 0 100%}}.form .nine.items>.item{flex:0 0 calc(100%*(1 / 9) - (2 * 6px))}@media only screen and (max-width: 768px){.form .nine.form .nine.items>.item{flex:0 0 100%}}.form .ten.items>.item{flex:0 0 calc(100%*(1 / 10) - (2 * 6px))}@media only screen and (max-width: 768px){.form .ten.form .ten.items>.item{flex:0 0 100%}}.form .eleven.items>.item{flex:0 0 calc(100%*(1 / 11) - (2 * 6px))}@media only screen and (max-width: 768px){.form .eleven.form .eleven.items>.item{flex:0 0 100%}}.form .twelve.items>.item{flex:0 0 calc(100%*(1 / 12) - (2 * 6px))}@media only screen and (max-width: 768px){.form .twelve.form .twelve.items>.item{flex:0 0 100%}}.form .thirteen.items>.item{flex:0 0 calc(100%*(1 / 13) - (2 * 6px))}@media only screen and (max-width: 768px){.form .thirteen.form .thirteen.items>.item{flex:0 0 100%}}.form .fourteen.items>.item{flex:0 0 calc(100%*(1 / 14) - (2 * 6px))}@media only screen and (max-width: 768px){.form .fourteen.form .fourteen.items>.item{flex:0 0 100%}}.form .fifteen.items>.item{flex:0 0 calc(100%*(1 / 15) - (2 * 6px))}@media only screen and (max-width: 768px){.form .fifteen.form .fifteen.items>.item{flex:0 0 100%}}.form .sixteen.items>.item{flex:0 0 calc(100%*(1 / 16) - (2 * 6px))}@media only screen and (max-width: 768px){.form .sixteen.form .sixteen.items>.item{flex:0 0 100%}}.form.small input[type=color],.form.small input[type=date],.form.small input[type=time],.form.small input[type=datetime],.form.small input[type=datetime-local],.form.small input[type=email],.form.small input[type=month],.form.small input[type=number],.form.small input[type=password],.form.small input[type=search],.form.small input[type=tel],.form.small input[type=text],.form.small input[type=url],.form.small input[type=week],.form.small input[type=file],.form.small input:not([type]),.form.small textarea,.form.small select{height:1.9rem;font-size:1em}.form.small .button{height:1.9rem !important;font-size:.979em !important;padding:.645rem 1.4rem !important}.form.small label,.form.small>.items>.item>label,.form.small>.item>label{font-size:1em}.form.large input[type=color],.form.large input[type=date],.form.large input[type=time],.form.large input[type=datetime],.form.large input[type=datetime-local],.form.large input[type=email],.form.large input[type=month],.form.large input[type=number],.form.large input[type=password],.form.large input[type=search],.form.large input[type=tel],.form.large input[type=text],.form.large input[type=url],.form.large input[type=week],.form.large input[type=file],.form.large input:not([type]),.form.large textarea,.form.large select{height:2.9rem;font-size:1.2em}.form.large .button{height:2.9rem !important;font-size:1.25em !important;padding:1.15rem 2.1rem !important}.form.large label,.form.large>.items>.item>label,.form.large>.item>label{font-size:1.2em}.radio,.checkbox{position:relative}.radio label,.checkbox label{padding:0 1.2rem 0 1.7rem;cursor:pointer;user-select:none;font-weight:400;margin:0}.radio input,.checkbox input{left:0;opacity:0;position:absolute;top:0}.radio input+label::before,.radio input+label::after,.checkbox input+label::before,.checkbox input+label::after{position:absolute;transition:opacity .11s ease-in-out;font-family:"Material Symbols Outlined";font-style:normal;font-weight:normal;text-transform:none;font-size:1.35rem;top:-8px;left:0}.radio input+label::before,.checkbox input+label::before{opacity:1}.radio input+label::after,.checkbox input+label::after{opacity:0}.radio input:checked+label::after,.checkbox input:checked+label::after{opacity:1}.checkbox input+label::before{content:"check_box_outline_blank";color:#202123}.checkbox input+label::after{content:"check_box";color:#314a93}.radio input+label::before{content:"radio_button_unchecked";color:#202123}.radio input+label::after{content:"radio_button_checked";color:#314a93}h1{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h1,.h1{font-size:2em;font-weight:700}@media only screen and (max-width: 768px){h1,.h1{font-size:1.7em}}h2{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h2,.h2{font-size:1.8em;font-weight:700}@media only screen and (max-width: 768px){h2,.h2{font-size:1.5em}}h3{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h3,.h3{font-size:1.6em;font-weight:700}@media only screen and (max-width: 768px){h3,.h3{font-size:1.3em}}h4{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h4,.h4{font-size:1.4em;font-weight:700}@media only screen and (max-width: 768px){h4,.h4{font-size:1.1em}}h5{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h5,.h5{font-size:1.2em;font-weight:700}@media only screen and (max-width: 768px){h5,.h5{font-size:.9em}}h6{margin-top:0;color:inherit;line-height:2;margin-bottom:1em}h6,.h6{font-size:1em;font-weight:700}@media only screen and (max-width: 768px){h6,.h6{font-size:inherit}}h1.bordered,h2.bordered,h3.bordered,h4.bordered,h5.bordered,h6.bordered,.h1.bordered,.h2.bordered,.h3.bordered,.h4.bordered,.h5.bordered,.h6.bordered{border-width:0 0 1px 0 !important;padding-bottom:10px;margin-bottom:20px}p{margin:0 0 1em;font-size:1rem}a,ins,u{text-decoration-skip:ink edges}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}blockquote{border-left:.1rem dotted #252831;margin-left:0;padding:.4rem .8rem;font-style:italic;color:#202123}small{font-size:86%}sub,sup{font-size:78%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}.table{position:relative;border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;text-align:left;margin-bottom:1.5rem}.table caption{text-align:inherit;color:#202123;font-size:1rem;font-weight:bold;padding:.7rem;border-bottom:1px solid #202123}.table.striped tr.active,.table.striped tbody tr.active{background:#e6e6e6}.table.striped tr:nth-of-type(odd),.table.striped tbody tr:nth-of-type(odd){background:#e6e6e6}.table.hovered tr:hover,.table.hovered tbody tr:hover{background:#e6e6e6;color:#202123}.table tr,.table tbody tr{transition:all .3s}.table tr.active,.table tr.active:hover,.table tbody tr.active,.table tbody tr.active:hover{background:#e6e6e6}.table td,.table th{border-bottom:1px solid #c6c6c6;padding:5px .7rem;text-align:inherit}.table thead tr{background:rgba(0,0,0,0) !important}.table thead tr th{border-bottom-color:#c6c6c6;font-weight:400;color:#979797;padding:.7rem}.material-symbols-outlined{font-size:1.12rem;line-height:1;vertical-align:middle}a.label,.label{background-color:#fff;color:#202123;display:inline-block;font-weight:bold;line-height:1.2;margin:.1rem .05rem;border-radius:4px;text-decoration:none;border:1px solid #c6c6c6;box-shadow:0 .155em 0 rgba(0,0,0,.095) rgba(0,0,0,.2);border-color:#c6c6c6;padding:.28rem .9rem;font-size:.9195em}a.label>i,a.label>.material-icons,.label>i,.label>.material-icons{vertical-align:text-top}a.label.primary,.label.primary{background-color:#314a93;color:#fff;border-color:#283d78}a.label.success,.label.success{background-color:#297d51;color:#fff;border-color:#206240}a.label.warning,.label.warning{background-color:#956d28;color:#fff;border-color:#795820}a.label.error,.label.error{background-color:#972727;color:#fff;border-color:#7b2020}a.label.dark,.label.dark{background-color:#252831;color:#fff;border-color:#16171d}a.label.small,.label.small{padding:.18rem .85rem;font-size:.8195em}a.label.large,.label.large{padding:.415rem 1.159rem;font-size:1em}.alert{background-color:#fff;color:#202123;display:block;border:1px solid #c6c6c6;border-radius:4px;padding:.6rem;margin:0 0 8px;width:100%;font-weight:bold}.alert a{color:#202123;text-decoration:underline}.alert a:focus,.alert a:hover,.alert a:active,.alert a.active{opacity:.75}.alert p:last-child{margin-bottom:0}.alert>i,.alert>.material-symbols-outlined{vertical-align:text-top}.alert.primary{background-color:#314a93;color:#fff;border-color:#2b4080}.alert.success{background-color:#297d51;color:#fff;border-color:#236a45}.alert.warning{background-color:#956d28;color:#fff;border-color:#815e23}.alert.error{background-color:#972727;color:#fff;border-color:#832222}.alert.dark{background-color:#252831;color:#fff;border-color:#1a1c22}.alert.small{padding:.4rem;font-size:.749rem}.alert.large{padding:.8rem;font-size:1.1rem}.badge{background-color:#e6e6e6;color:#202123;position:relative;white-space:nowrap;display:inline-flex;justify-content:center;align-items:center;font-weight:bold;border-radius:500px;border:1px solid #d5d5d5;padding:1px 6px;font-size:1em}.badge.primary{background-color:#314a93;color:#fff;border-color:#293d7a}.badge.success{background-color:#297d51;color:#fff;border-color:#216441}.badge.warning{background-color:#956d28;color:#fff;border-color:#7b5a21}.badge.error{background-color:#972727;color:#fff;border-color:#7d2020}.badge.dark{background-color:#252831;color:#fff;border-color:#17191e}.badge.tiny{padding:0 4px !important;font-size:.659rem !important}.badge.small{padding:1px 4px !important;font-size:.749rem !important}.badge.large{padding:2px 8px !important;font-size:1.1rem !important}.billboard{background-color:#fff;color:#202123;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:4.5rem 2.5rem;border-color:#f4f4f4;border:1px solid #c6c6c6}.billboard.primary{background-color:#314a93;color:#fff;border-color:#2b4182}.billboard.success{background-color:#297d51;color:#fff;border-color:#236c46}.billboard.warning{background-color:#956d28;color:#fff;border-color:#836023}.billboard.error{background-color:#972727;color:#fff;border-color:#852222}.billboard.dark{background-color:#252831;color:#fff;border-color:#1b1d24}.billboard.small{padding:2.5rem 1.5rem;font-size:1em}.billboard.small .body{padding:2.5rem 1.5rem}.billboard.small p{font-size:1em}.billboard.large{padding:7.5rem 4rem;font-size:1.6em}.billboard.large .body{padding:7.5rem 4rem}.billboard.large p{font-size:1.6em}.billboard .media{flex:0 0 auto}.billboard .body{padding:4.5rem 2.5rem;flex:1 1 auto;display:flex;justify-content:center;flex-direction:column}.billboard.cover{min-height:100vh;max-height:100%;min-width:100%;border:0;background-size:cover;background-position:center center;background-repeat:no-repeat}@media only screen and (max-width: 768px){.billboard{padding:2.5rem 1rem;flex-direction:column}.billboard .media img{width:100%}.billboard .body{padding:2.5rem 1rem}.billboard.small{padding:1rem}.billboard.small .body{padding:1rem}.billboard.small p{font-size:1em}.billboard.large{padding:1rem}.billboard.large .body{padding:1rem}.billboard.large p{font-size:1.358em}}.breadcrumb{display:inline-block;white-space:nowrap}.breadcrumb a.item,.breadcrumb .item{text-decoration:none;font-size:inherit;font-weight:bold}.breadcrumb a.item:focus,.breadcrumb a.item:hover,.breadcrumb a.item:active,.breadcrumb a.item.active,.breadcrumb .item:focus,.breadcrumb .item:hover,.breadcrumb .item:active,.breadcrumb .item.active{color:#314a93}.breadcrumb a.item::after,.breadcrumb .item::after{font-family:"Material Symbols Outlined";content:"keyboard_arrow_right";color:#314a93;padding:0 .25em;vertical-align:middle;font-size:1.4rem;cursor:auto}.breadcrumb a.item:first-child,.breadcrumb .item:first-child{margin-left:0}.breadcrumb a.item.active,.breadcrumb .item.active{color:#314a93;font-weight:bold}.breadcrumb a.item.active::after,.breadcrumb .item.active::after{content:none}.breadcrumb.small .item{font-size:.9589em}.breadcrumb.small .item::after{padding:.15em;font-size:1.25rem}.breadcrumb.large .item{font-size:1.18em}.breadcrumb.large .item::after{padding:.18em;font-size:1.7rem}@media only screen and (max-width: 768px){.breadcrumb .item:after{font-size:1rem;vertical-align:middle}}.cards{display:flex;flex-wrap:wrap}.cards.two>.card{flex:0 0 calc(100%*(1 / 2) - (2 * 10px));height:auto;margin:10px}.cards.three>.card{flex:0 0 calc(100%*(1 / 3) - (2 * 10px));height:auto;margin:10px}.cards.four>.card{flex:0 0 calc(100%*(1 / 4) - (2 * 10px));height:auto;margin:10px}.cards.five>.card{flex:0 0 calc(100%*(1 / 5) - (2 * 10px));height:auto;margin:10px}.cards.six>.card{flex:0 0 calc(100%*(1 / 6) - (2 * 10px));height:auto;margin:10px}.cards.seven>.card{flex:0 0 calc(100%*(1 / 7) - (2 * 10px));height:auto;margin:10px}.cards.eight>.card{flex:0 0 calc(100%*(1 / 8) - (2 * 10px));height:auto;margin:10px}.cards.nine>.card{flex:0 0 calc(100%*(1 / 9) - (2 * 10px));height:auto;margin:10px}.cards.ten>.card{flex:0 0 calc(100%*(1 / 10) - (2 * 10px));height:auto;margin:10px}.cards.eleven>.card{flex:0 0 calc(100%*(1 / 11) - (2 * 10px));height:auto;margin:10px}.cards.twelve>.card{flex:0 0 calc(100%*(1 / 12) - (2 * 10px));height:auto;margin:10px}.cards.thirteen>.card{flex:0 0 calc(100%*(1 / 13) - (2 * 10px));height:auto;margin:10px}.cards.fourteen>.card{flex:0 0 calc(100%*(1 / 14) - (2 * 10px));height:auto;margin:10px}.cards.fifteen>.card{flex:0 0 calc(100%*(1 / 15) - (2 * 10px));height:auto;margin:10px}.cards.sixteen>.card{flex:0 0 calc(100%*(1 / 16) - (2 * 10px));height:auto;margin:10px}.card{background-color:#fff;border:1px solid #c6c6c6;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;width:240px;height:100%;overflow:hidden}.card>.body .title,.card>.title{color:#202123;line-height:initial}.card>.body .title>.subtitle,.card>.title>.subtitle{color:#979797;flex:1 1 auto}.card>.title,.card>.description,.card>.actions{padding:16px}.card>.description{flex:1 1 auto;color:#202123}.card>.media{display:flex;flex-wrap:wrap}.card>.media img{display:block;width:100%}.card>.media.two{padding-bottom:initial !important;height:auto}.card>.media.two>div,.card>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:0}.card>.media.three{padding-bottom:initial !important;height:auto}.card>.media.three>div,.card>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:0}.card>.media.four{padding-bottom:initial !important;height:auto}.card>.media.four>div,.card>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:0}.card>.media.five{padding-bottom:initial !important;height:auto}.card>.media.five>div,.card>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:0}.card>.media.six{padding-bottom:initial !important;height:auto}.card>.media.six>div,.card>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:0}.card>.media.seven{padding-bottom:initial !important;height:auto}.card>.media.seven>div,.card>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:0}.card>.media.eight{padding-bottom:initial !important;height:auto}.card>.media.eight>div,.card>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:0}.card>.media.nine{padding-bottom:initial !important;height:auto}.card>.media.nine>div,.card>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:0}.card>.media.ten{padding-bottom:initial !important;height:auto}.card>.media.ten>div,.card>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:0}.card>.media.eleven{padding-bottom:initial !important;height:auto}.card>.media.eleven>div,.card>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:0}.card>.media.twelve{padding-bottom:initial !important;height:auto}.card>.media.twelve>div,.card>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:0}.card>.media.thirteen{padding-bottom:initial !important;height:auto}.card>.media.thirteen>div,.card>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:0}.card>.media.fourteen{padding-bottom:initial !important;height:auto}.card>.media.fourteen>div,.card>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:0}.card>.media.fifteen{padding-bottom:initial !important;height:auto}.card>.media.fifteen>div,.card>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:0}.card>.media.sixteen{padding-bottom:initial !important;height:auto}.card>.media.sixteen>div,.card>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:0}.card.horizontal{flex-direction:row;width:100%;align-items:center;margin-bottom:15px}.card.horizontal>.media{align-self:normal;width:fit-content}.card.horizontal>.media img{width:auto;object-fit:cover}.card.horizontal>.body{flex:inherit}.card.horizontal>.body .title,.card.horizontal>.body .description{padding:calc(16px / 2) 16px}.card.horizontal>.body .description{flex:1}@media only screen and (max-width: 768px){.card,.cards>.card{flex:0 0 100% !important;width:100%;height:fit-content !important}.card.horizontal{flex-direction:column}}.list{list-style:none;margin:1rem 0}.list>.item{display:flex;align-items:center;padding:.55em;margin:0;transition:.15s}.list>.item>img,.list>.item>.material-symbols-outlined,.list>.item>i{margin-right:1rem}.list>.item>span,.list>.item>div{display:contents}.list>.item>.body{flex:1;line-height:1.4;text-align:left;display:initial}.list>.item>.body>.title,.list>.item>.body>.subtitle{display:block}.list>.item>.body>.title{font-size:1.28rem;font-weight:700;line-height:1.4}.list>.item>.body>.subtitle{font-size:.889em;font-weight:400;color:#314a93;margin-bottom:7px}.list>.item>.actions{width:auto;margin-left:1rem}.list>.item.active{background:#e3e3e3}.list.divided>.item{border-bottom:1px solid #c6c6c6}.list.divided>.item:last-child{border-bottom:none}.list.striped>.item:nth-of-type(odd){background:#e6e6e6}.list.hovered>.item:hover{background:#e6e6e6;transition:.15s}.menu{background-color:#fff;border-radius:0;list-style:none;margin:0;width:100%;min-width:max-content;padding:.9rem;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);z-index:300}.menu .title{font-size:1.25em;min-height:2rem;color:#202123;padding:.6rem 0;font-weight:700;letter-spacing:-0.015rem}.menu .item{padding:0;position:relative;text-decoration:none;text-align:left}.menu .item>a{color:#202123;display:block;width:100%;padding:.28rem .9rem;text-decoration:none;font-size:1em;font-weight:400;transition:background .15s}.menu .item>a:hover{background:#e6e6e6;color:#202123;transition:background .15s}.menu .item>a:active,.menu .item>a:focus,.menu .item>a.active{background:#e6e6e6;color:#202123;transition:background .15s}.menu .item i,.menu .item span.material-symbols-outlined{color:#979797;font-size:1.2rem;margin-right:10px;vertical-align:text-bottom}.menu .item .menu{padding:.4rem}.menu .badge{position:absolute;right:0;top:4px;padding:0 4px;font-size:.93em}.menu.small>.item a{font-size:.945em}.menu.divided .item{border-bottom:1px solid #c6c6c6}.menu.divided .item:last-child{border-bottom:none}.navbar-spacer{margin-top:105px}.navbar{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;min-height:80px;background:#314a93;color:#fff;width:100%}.navbar .container{display:flex;width:100%}.navbar .brand{padding:0;display:flex;justify-content:center;min-height:100%;align-items:center;margin-right:1rem;white-space:nowrap}.navbar .brand img{width:7rem}.navbar .brand a,.navbar .brand a:visited{font-size:1.128em;text-decoration:none;color:#fff;display:flex;font-weight:bold}.navbar input[type=checkbox]#burger,.navbar .burger{display:none}.navbar .burger::before{content:"dehaze";font-family:"Material Symbols Outlined";font-size:2.459rem;display:none;min-height:80px;max-height:80px;position:absolute;cursor:pointer;right:0;top:0}.navbar section.links{display:flex;flex:1 0 0;align-items:center}.navbar section.links div.section{flex:1 0 0;display:flex;height:100%;align-items:center}.navbar section.links div.section:not(:first-child):last-child{justify-content:flex-end}.navbar section.links div.section input[type=text]{background-color:#283d78;color:#fff;border-color:#3b59b2}.navbar section.links div.section input[type=text]::placeholder{color:#fff}.navbar section.links div.section input[type=text]:focus{outline:2px solid #778ed2}.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border-width:0 1px !important}.navbar section.links div.section.divided .buttons>.button:first-child{border-left-width:0 !important}.navbar section.links div.section.divided .buttons>.button:last-child{border-right-width:0 !important}.navbar section.links div.section.divided .buttons .dropdown:first-child .button{border-left-width:0 !important}.navbar section.links div.section.divided .buttons .dropdown:last-child .button{border-right-width:0 !important;border-left-width:0 !important;margin-left:1px}.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border:solid #283c78}@media only screen and (max-width: 768px){.navbar section.links div.section.divided .buttons .button,.navbar section.links div.section.divided .buttons .dropdown .button{border:0 !important}}.navbar.fixed{position:fixed;top:0;left:0;right:0px;margin-top:0;transform:translateY(0px);z-index:5}.navbar .buttons{height:100%;min-height:100%;box-shadow:none}.navbar .buttons .button,.navbar .buttons .dropdown .button{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:#fff;min-height:100%;border-radius:0;border:0}.navbar .buttons .button i,.navbar .buttons .button span.material-symbols-outlined,.navbar .buttons .dropdown .button i,.navbar .buttons .dropdown .button span.material-symbols-outlined{color:#fff}.navbar .buttons .button:hover,.navbar .buttons .dropdown .button:hover{background:#24366c;border-radius:0}.navbar .buttons .button:active,.navbar .buttons .button.active,.navbar .buttons .dropdown .button:active,.navbar .buttons .dropdown .button.active{color:#fff;background:#283d78;transition:.2s}.navbar .buttons .button:active:hover,.navbar .buttons .button.active:hover,.navbar .buttons .dropdown .button:active:hover,.navbar .buttons .dropdown .button.active:hover{transition:.2s;background:#24376d}.navbar .buttons .dropdown:last-child,.navbar .buttons .dropdown:last-child>.button:first-child,.navbar .buttons .dropdown:last-child>.button:last-child{border-radius:0}.navbar .button,.navbar .dropdown .button{font-size:1.128em;padding:.935rem 1.4rem;font-weight:700}.navbar.gradient{background:linear-gradient(to top, #314a93 0%, #4060bf 2%, #2d4488 97%, #4060bf 100%)}.navbar.gradient-ltr{background:linear-gradient(135deg, #3b58b0, #314a93)}.navbar.gradient-rtl{background:linear-gradient(-135deg, #3b58b0, #314a93)}.navbar.light{background:#fff;color:#303232}.navbar.light.gradient{background:linear-gradient(to top, white 0%, white 2%, #f7f7f7 97%, white 100%)}.navbar.light.gradient-ltr{background:linear-gradient(135deg, white, white)}.navbar.light.gradient-rtl{background:linear-gradient(-135deg, white, white)}.navbar.light .buttons .button{color:#303232;min-height:100%}.navbar.light .buttons .button i,.navbar.light .buttons .button span.material-symbols-outlined{color:#303232}.navbar.light .buttons .button:hover{background:#e5e5e5}.navbar.light .brand a,.navbar.light .brand a:visited{color:#303232}.navbar.light section.links div.section input[type=text]{background-color:#fff;border-color:#252831;color:#303232}.navbar.light section.links div.section input[type=text]::placeholder{color:#303232}.navbar.light section.links div.section input[type=text]:focus{outline:2px solid #424757}.navbar.light section.links div.section .buttons .button:active,.navbar.light section.links div.section .buttons .button.active,.navbar.light section.links div.section .buttons .dropdown .button:active,.navbar.light section.links div.section .buttons .dropdown .button.active{color:#303232;background:#ededed;transition:.2s}.navbar.light section.links div.section .buttons .button:active:hover,.navbar.light section.links div.section .buttons .button.active:hover,.navbar.light section.links div.section .buttons .dropdown .button:active:hover,.navbar.light section.links div.section .buttons .dropdown .button.active:hover{transition:.2s;background:#e6e6e6}.navbar.light section.links div.section.divided .buttons .button,.navbar.light section.links div.section.divided .buttons .dropdown .button{border:solid #979797}.navbar.dark{background:#252831;color:#fff}.navbar.dark.gradient{background:linear-gradient(to top, #252831 0%, #3e4352 2%, #1e2128 97%, #3e4352 100%)}.navbar.dark.gradient-ltr{background:linear-gradient(135deg, #393d4b, #252831)}.navbar.dark.gradient-rtl{background:linear-gradient(-135deg, #393d4b, #252831)}.navbar.dark .buttons .button{color:#fff;min-height:100%}.navbar.dark .buttons .button i,.navbar.dark .buttons .button span.material-symbols-outlined{color:#fff}.navbar.dark .buttons .button:hover{background:#0f1014}.navbar.dark .brand a,.navbar.dark .brand a:visited{color:#fff}.navbar.dark section.links div.section input[type=text]{background-color:#343945;border-color:#5e657c;color:#fff}.navbar.dark section.links div.section input[type=text]::placeholder{color:#fff}.navbar.dark section.links div.section input[type=text]:focus{outline:2px solid #7e869e}.navbar.dark section.links div.section .buttons .button:active,.navbar.dark section.links div.section .buttons .button.active,.navbar.dark section.links div.section .buttons .dropdown .button:active,.navbar.dark section.links div.section .buttons .dropdown .button.active{color:#fff;background:#16171d;transition:.2s}.navbar.dark section.links div.section .buttons .button:active:hover,.navbar.dark section.links div.section .buttons .button.active:hover,.navbar.dark section.links div.section .buttons .dropdown .button:active:hover,.navbar.dark section.links div.section .buttons .dropdown .button.active:hover{transition:.2s;background:#0f1014}.navbar.dark section.links div.section.divided .buttons .button,.navbar.dark section.links div.section.divided .buttons .dropdown .button{border:solid #414655}.navbar.mini{min-height:45px}.navbar.mini .button,.navbar.mini .dropdown .button{font-size:.9839em;padding:.445rem .9rem}.navbar-spacer-mini{margin-top:70px !important}@media only screen and (max-width: 768px){.navbar-spacer-mini{margin-top:div(70px, 2) !important}}.navbar.small{min-height:65px}.navbar.small .button,.navbar.small .dropdown .button{font-size:1em;padding:.645rem 1.4rem}.navbar-spacer-small{margin-top:90px !important}@media only screen and (max-width: 768px){.navbar-spacer-small{margin-top:div(90px, 2) !important}}.navbar.large{min-height:95px}.navbar.large .button,.navbar.large .dropdown .button{font-size:1.28em;padding:.645rem 1.4rem}.navbar-spacer-large{margin-top:115px !important}@media only screen and (max-width: 768px){.navbar-spacer-large{margin-top:div(115px, 2) !important}}@media only screen and (max-width: 768px){.navbar-spacer{margin-top:0}.navbar .container{padding:0 div(40px, 2)}.navbar.fixed{position:relative}.navbar section.links{position:absolute;display:block;width:100%;height:0;top:80px;left:0;overflow-x:auto;overflow-y:hidden;background:#e6e6e6;z-index:1;margin:0 !important;padding:0 !important;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.navbar section.links .section,.navbar section.links .section .buttons,.navbar section.links .section .buttons .dropdown,.navbar section.links .section .buttons .dropdown .menu,.navbar section.links .section .buttons .dropdown .menu .button,.navbar section.links .section .buttons .dropdown .button,.navbar section.links .section .buttons .button{display:block !important;width:100%;text-align:left;position:relative}.navbar section.links .section .buttons .dropdown .button,.navbar section.links .section .buttons .button{color:#202123;background:#e6e6e6}.navbar section.links .section .buttons .dropdown .button i,.navbar section.links .section .buttons .dropdown .button span.material-symbols-outlined,.navbar section.links .section .buttons .button i,.navbar section.links .section .buttons .button span.material-symbols-outlined{display:none}.navbar section.links .section .buttons .dropdown .menu{max-height:100%;box-shadow:none}.navbar .burger{display:flex;align-items:center;justify-content:center}.navbar .burger::before{content:"close";padding:0 1.5rem;font-size:2.459rem;display:flex;align-items:center;justify-content:center;top:auto}.navbar.mini .burger,.navbar.mini .burger::before{min-height:45px;max-height:45px}.navbar.mini section.links{top:45px}.navbar.small .burger,.navbar.small .burger::before{min-height:65px;max-height:65px}.navbar.small section.links{top:65px}.navbar.large .burger,.navbar.large .burger::before{min-height:95px;max-height:95px}.navbar.large section.links{top:95px}.navbar input[type=checkbox]#burger:not(:checked)~section.links{height:0}.navbar input[type=checkbox]#burger:checked~section.links{height:auto}.navbar input[type=checkbox]#burger:not(:checked)~.burger::before{content:"dehaze"}.navbar input[type=checkbox]#burger:checked~.burger::before{content:"close"}}.panel{display:flex;flex-direction:column;border:1px solid #c6c6c6;border-radius:4px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);background-color:#fff;margin:16px 0}.panel>.header,.panel>.bottom{display:flex;flex-direction:row;align-items:center}.panel>.header .actions,.panel>.bottom .actions{margin-left:auto}.panel>.header .actions:before,.panel>.bottom .actions:before{flex-grow:1}.panel>.header{border-bottom:1px solid #c6c6c6;padding:12px 16px}.panel>.header.dashed{border-bottom-style:dashed}.panel>.header.dotted{border-bottom-style:dotted}.panel>.header>.title{font-size:1.185rem;font-weight:700}.panel>.content{flex:1 1 auto;padding:16px;height:auto}.panel>.content>.media{min-width:0;flex:auto;margin-bottom:32px;flex-wrap:wrap;display:flex;position:relative;padding-bottom:56.25% !important;height:0;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box}.panel>.content>.media iframe,.panel>.content>.media object,.panel>.content>.media embed{position:absolute;top:0;left:0;width:100%;height:100%}.panel>.content>.media video{max-width:100%;height:auto;box-sizing:border-box}.panel>.content>.media img{display:block}.panel>.content>.media.two{padding-bottom:initial !important;height:auto}.panel>.content>.media.two>div,.panel>.content>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:1px}.panel>.content>.media.three{padding-bottom:initial !important;height:auto}.panel>.content>.media.three>div,.panel>.content>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:1px}.panel>.content>.media.four{padding-bottom:initial !important;height:auto}.panel>.content>.media.four>div,.panel>.content>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:1px}.panel>.content>.media.five{padding-bottom:initial !important;height:auto}.panel>.content>.media.five>div,.panel>.content>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:1px}.panel>.content>.media.six{padding-bottom:initial !important;height:auto}.panel>.content>.media.six>div,.panel>.content>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:1px}.panel>.content>.media.seven{padding-bottom:initial !important;height:auto}.panel>.content>.media.seven>div,.panel>.content>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:1px}.panel>.content>.media.eight{padding-bottom:initial !important;height:auto}.panel>.content>.media.eight>div,.panel>.content>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:1px}.panel>.content>.media.nine{padding-bottom:initial !important;height:auto}.panel>.content>.media.nine>div,.panel>.content>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:1px}.panel>.content>.media.ten{padding-bottom:initial !important;height:auto}.panel>.content>.media.ten>div,.panel>.content>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:1px}.panel>.content>.media.eleven{padding-bottom:initial !important;height:auto}.panel>.content>.media.eleven>div,.panel>.content>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:1px}.panel>.content>.media.twelve{padding-bottom:initial !important;height:auto}.panel>.content>.media.twelve>div,.panel>.content>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:1px}.panel>.content>.media.thirteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.thirteen>div,.panel>.content>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:1px}.panel>.content>.media.fourteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.fourteen>div,.panel>.content>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:1px}.panel>.content>.media.fifteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.fifteen>div,.panel>.content>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:1px}.panel>.content>.media.sixteen{padding-bottom:initial !important;height:auto}.panel>.content>.media.sixteen>div,.panel>.content>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:1px}.panel>.content .headline,.panel>.content p.headline{font-size:1.39em;line-height:1.5;margin-bottom:26px;color:#000;letter-spacing:-0.0158em}.panel>.bottom{min-height:50px;border-top:1px solid #c6c6c6;padding:16px}.panel.mini>.header{padding:4px 8px}.panel.mini>.header .title{font-size:.985rem}.panel.mini>.content,.panel.mini>.bottom{padding:4px 8px}.panel.small>.header{padding:8px 12px}.panel.small>.header .title{font-size:1.038rem}.panel.small>.content,.panel.small>.bottom{padding:8px 12px}.process{display:flex;flex-wrap:nowrap;margin:1em 0 5em;width:100%;list-style:none}.process .item{flex:1 1 0;min-height:4rem;position:relative;align-items:center;justify-content:center;display:flex;word-break:break-word;line-height:1.3;text-align:center}.process .item:not(:first-child)::before{background:#314a93;content:"";height:6px;left:-50%;position:absolute;top:0;width:100%}.process .item a{color:#202123;display:inline-block;padding:10px 10px 0;text-decoration:none;font-weight:bold}.process .item a::before{position:absolute;content:"";background:#314a93;top:0;left:50%;height:.8rem;width:3px;z-index:1}.process .item a:first-child::before{left:calc(50% - (3px - 1px))}.process .item.active a{color:#314a93}.process .item.active a::after{content:"beenhere";font-family:"Material Symbols Outlined";position:absolute;top:calc(-15px - 1.8rem);left:calc(50% - (3px * 10)/2);color:#314a93;font-size:1.8rem}.process .item.active~.item::before{background:#c6c6c6}.process .item.active~.item a{color:#202123}.process .item.active~.item a:hover{color:#314a93}.process .item.active~.item a::before{background:#c6c6c6}.process.success .item:not(:first-child)::before{background:#297d51}.process.success .item a{padding:10px}.process.success .item a::before{background:#297d51}.process.success .item.active a{color:#297d51}.process.success .item.active a::after{color:#297d51}.process.success .item.active~.item::before{background:#c6c6c6}.process.warning .item:not(:first-child)::before{background:#956d28}.process.warning .item a{padding:10px}.process.warning .item a::before{background:#956d28}.process.warning .item.active a{color:#956d28}.process.warning .item.active a::after{color:#956d28}.process.warning .item.active~.item::before{background:#c6c6c6}.process.error .item:not(:first-child)::before{background:#972727}.process.error .item a{padding:10px}.process.error .item a::before{background:#972727}.process.error .item.active a{color:#972727}.process.error .item.active a::after{color:#972727}.process.error .item.active~.item::before{background:#c6c6c6}.process.dark .item:not(:first-child)::before{background:#202123}.process.dark .item a{padding:10px}.process.dark .item a::before{background:#202123}.process.dark .item.active a{color:#202123}.process.dark .item.active a::after{color:#202123}.process.dark .item.active~.item::before{background:#c6c6c6}.process.vertical{display:flex;padding:1.25em 2em 2.85em;margin:1em 0;flex-direction:column;align-items:flex-start}.process.vertical .item{justify-content:flex-start;align-items:center;max-width:100%;min-width:100%;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;padding-left:20px}.process.vertical .item:first-child{border-top:1px solid #c6c6c6}.process.vertical .item:not(:first-child)::before{width:3px;height:100%;left:0}.process.vertical .item a::before{width:9px}.process.vertical .item a:first-child::before{left:0;height:100%}.process.vertical .item.active a{font-weight:bold}.process.vertical .item.active a::after{top:15px;left:calc(-15px - 1.8rem)}.process.vertical.reversed{flex-direction:column-reverse}.process.vertical.reversed .item:last-child{border-top:1px solid #c6c6c6}.process.vertical.reversed .item:first-child{border-top:none}@media only screen and (max-width: 768px){.process{display:flex;padding:1.25em 2em 2.85em;margin:1em 0;flex-direction:column;align-items:flex-start}.process .item{justify-content:flex-start;align-items:center;max-width:100%;min-width:100%;border-bottom:1px solid #c6c6c6;border-right:1px solid #c6c6c6;padding-left:20px}.process .item:first-child{border-top:1px solid #c6c6c6}.process .item:not(:first-child)::before{width:3px;height:100%;left:0}.process .item a::before{width:9px}.process .item a:first-child::before{left:0;height:100%}.process .item.active a{font-weight:bold}.process .item.active a::after{top:15px;left:calc(-15px - 1.8rem)}.process.reversed{flex-direction:column-reverse}.process.reversed .item:last-child{border-top:1px solid #c6c6c6}.process.reversed .item:first-child{border-top:none}}.progress{width:100%;height:12px;background:#e6e6e6;box-shadow:0 1px 2px rgba(0,0,0,.15) inset;border-radius:16px;appearance:none}.progress::-webkit-progress-bar{background:rgba(0,0,0,0);border-radius:16px}.progress::-webkit-progress-value{background:#314a93;border-radius:16px}.progress::-moz-progress-bar{background:#314a93;border-radius:16px}.progress.success::-webkit-progress-value{background:#297d51}.progress.warning::-webkit-progress-value{background:#956d28}.progress.error::-webkit-progress-value{background:#972727}.progress.dark::-webkit-progress-value{background:#202123}.stats,a.stats{display:inline-flex;flex-direction:column;background-color:rgba(0,0,0,0);margin:0 1.1em .8em;border-width:1px;border-color:#c6c6c6;border-style:solid;border-radius:4px;padding:8px 2.76em;line-height:2.1em;text-decoration:none;transition:.15s}.stats>.title,.stats>.subtitle,.stats>.value,a.stats>.title,a.stats>.subtitle,a.stats>.value{display:flex;flex-direction:column}.stats>.title,a.stats>.title{font-size:1.1em}.stats>.subtitle,a.stats>.subtitle{font-size:.816rem;margin-top:-4px;color:#979797}.stats>.value,a.stats>.value{font-weight:bold;font-size:1.65rem;flex-direction:row;line-height:1.2;align-items:center}.stats>.value>img,.stats>.value>.material-symbols-outlined,.stats>.value>i,a.stats>.value>img,a.stats>.value>.material-symbols-outlined,a.stats>.value>i{font-weight:normal;display:inline-block;vertical-align:baseline;font-size:1em;margin-right:.5em}.stats.primary,a.stats.primary{background-color:#314a93;color:#fff;border-color:#314a93;background:rgba(0,0,0,0);color:inherit}.stats.primary>.value,a.stats.primary>.value{color:inherit}.stats.primary>.value>.material-symbols-outlined,.stats.primary>.value>i,a.stats.primary>.value>.material-symbols-outlined,a.stats.primary>.value>i{color:#314a93}.stats.success,a.stats.success{background-color:#297d51;color:#fff;border-color:#297d51;background:rgba(0,0,0,0);color:inherit}.stats.success>.value,a.stats.success>.value{color:inherit}.stats.success>.value>.material-symbols-outlined,.stats.success>.value>i,a.stats.success>.value>.material-symbols-outlined,a.stats.success>.value>i{color:#297d51}.stats.warning,a.stats.warning{background-color:#956d28;color:#fff;border-color:#956d28;background:rgba(0,0,0,0);color:inherit}.stats.warning>.value,a.stats.warning>.value{color:inherit}.stats.warning>.value>.material-symbols-outlined,.stats.warning>.value>i,a.stats.warning>.value>.material-symbols-outlined,a.stats.warning>.value>i{color:#956d28}.stats.error,a.stats.error{background-color:#972727;color:#fff;border-color:#972727;background:rgba(0,0,0,0);color:inherit}.stats.error>.value,a.stats.error>.value{color:inherit}.stats.error>.value>.material-symbols-outlined,.stats.error>.value>i,a.stats.error>.value>.material-symbols-outlined,a.stats.error>.value>i{color:#972727}.stats.dark,a.stats.dark{background-color:#363b48;color:#fff;border-color:#363b48;background:rgba(0,0,0,0);color:inherit}.stats.dark>.value,a.stats.dark>.value{color:inherit}.stats.dark>.value>.material-symbols-outlined,.stats.dark>.value>i,a.stats.dark>.value>.material-symbols-outlined,a.stats.dark>.value>i{color:#363b48}a.stats:hover{background-color:#f3f3f3}.tab{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;border-bottom:2px solid #c6c6c6;padding:0}.tab>.buttons{box-shadow:none;border-radius:0}.tab>.button,.tab>a.button,.tab>.buttons>.button,.tab>.buttons>a.button,.tab>.dropdown>.button,.tab>.dropdown>a.button,.tab>.buttons>.dropdown>.button,.tab>.buttons>.dropdown>a.button{background:rgba(0,0,0,0);border:none;border-radius:0 !important;line-height:unset;font-size:1.025em;font-weight:600;color:#202123;padding:.935rem 1.4rem;box-shadow:none;border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-2px}.tab>.button:hover,.tab>a.button:hover,.tab>.buttons>.button:hover,.tab>.buttons>a.button:hover,.tab>.dropdown>.button:hover,.tab>.dropdown>a.button:hover,.tab>.buttons>.dropdown>.button:hover,.tab>.buttons>.dropdown>a.button:hover{color:#202123;border-bottom-color:#979797}.tab>.button:focus,.tab>a.button:focus,.tab>.buttons>.button:focus,.tab>.buttons>a.button:focus,.tab>.dropdown>.button:focus,.tab>.dropdown>a.button:focus,.tab>.buttons>.dropdown>.button:focus,.tab>.buttons>.dropdown>a.button:focus{background:rgba(0,0,0,0)}.tab>.button.active,.tab>a.button.active,.tab>.buttons>.button.active,.tab>.buttons>a.button.active,.tab>.dropdown>.button.active,.tab>.dropdown>a.button.active,.tab>.buttons>.dropdown>.button.active,.tab>.buttons>.dropdown>a.button.active{border-bottom-color:#314a93}.tab>.button.active i,.tab>.button.active [class^=material-symbols-outlined],.tab>a.button.active i,.tab>a.button.active [class^=material-symbols-outlined],.tab>.buttons>.button.active i,.tab>.buttons>.button.active [class^=material-symbols-outlined],.tab>.buttons>a.button.active i,.tab>.buttons>a.button.active [class^=material-symbols-outlined],.tab>.dropdown>.button.active i,.tab>.dropdown>.button.active [class^=material-symbols-outlined],.tab>.dropdown>a.button.active i,.tab>.dropdown>a.button.active [class^=material-symbols-outlined],.tab>.buttons>.dropdown>.button.active i,.tab>.buttons>.dropdown>.button.active [class^=material-symbols-outlined],.tab>.buttons>.dropdown>a.button.active i,.tab>.buttons>.dropdown>a.button.active [class^=material-symbols-outlined]{color:inherit}.tab>.button i,.tab>.button [class^=material-symbols-outlined],.tab>a.button i,.tab>a.button [class^=material-symbols-outlined],.tab>.buttons>.button i,.tab>.buttons>.button [class^=material-symbols-outlined],.tab>.buttons>a.button i,.tab>.buttons>a.button [class^=material-symbols-outlined],.tab>.dropdown>.button i,.tab>.dropdown>.button [class^=material-symbols-outlined],.tab>.dropdown>a.button i,.tab>.dropdown>a.button [class^=material-symbols-outlined],.tab>.buttons>.dropdown>.button i,.tab>.buttons>.dropdown>.button [class^=material-symbols-outlined],.tab>.buttons>.dropdown>a.button i,.tab>.buttons>.dropdown>a.button [class^=material-symbols-outlined]{font-size:1.12rem}.tab.bottom{border-bottom:0;border-top:2px solid #e6e6e6}.tab.bottom>.button,.tab.bottom>a.button,.tab.bottom>.buttons>.button,.tab.bottom>.buttons>a.button,.tab.bottom>.dropdown>.button,.tab.bottom>.dropdown>a.button,.tab.bottom>.buttons>.dropdown>.button,.tab.bottom>.buttons>.dropdown>a.button{margin-top:-2px;border-top:2px solid rgba(0,0,0,0);border-bottom:0;margin-bottom:0}.tab.bottom>.button:hover,.tab.bottom>a.button:hover,.tab.bottom>.buttons>.button:hover,.tab.bottom>.buttons>a.button:hover,.tab.bottom>.dropdown>.button:hover,.tab.bottom>.dropdown>a.button:hover,.tab.bottom>.buttons>.dropdown>.button:hover,.tab.bottom>.buttons>.dropdown>a.button:hover{border-top-color:#979797}.tab.bottom>.button.active,.tab.bottom>a.button.active,.tab.bottom>.buttons>.button.active,.tab.bottom>.buttons>a.button.active,.tab.bottom>.dropdown>.button.active,.tab.bottom>.dropdown>a.button.active,.tab.bottom>.buttons>.dropdown>.button.active,.tab.bottom>.buttons>.dropdown>a.button.active{border-top-color:#314a93}.tab.success .button.active,.tab.success a.button.active,.tab.success .dropdown .button.active,.tab.success .dropdown a.button.active{border-bottom-color:#297d51}.tab.success.bottom .button.active,.tab.success.bottom a.button.active,.tab.success.bottom .dropdown .button.active,.tab.success.bottom .dropdown a.button.active{border-top-color:#297d51}.tab.warning .button.active,.tab.warning a.button.active,.tab.warning .dropdown .button.active,.tab.warning .dropdown a.button.active{border-bottom-color:#956d28}.tab.warning.bottom .button.active,.tab.warning.bottom a.button.active,.tab.warning.bottom .dropdown .button.active,.tab.warning.bottom .dropdown a.button.active{border-top-color:#956d28}.tab.error .button.active,.tab.error a.button.active,.tab.error .dropdown .button.active,.tab.error .dropdown a.button.active{border-bottom-color:#972727}.tab.error.bottom .button.active,.tab.error.bottom a.button.active,.tab.error.bottom .dropdown .button.active,.tab.error.bottom .dropdown a.button.active{border-top-color:#972727}.tab.dark .button.active,.tab.dark a.button.active,.tab.dark .dropdown .button.active,.tab.dark .dropdown a.button.active{border-bottom-color:#202123}.tab.dark.bottom .button.active,.tab.dark.bottom a.button.active,.tab.dark.bottom .dropdown .button.active,.tab.dark.bottom .dropdown a.button.active{border-top-color:#202123}.tab.centered{justify-content:center}.timeline .activity{display:flex;padding:1.25em 2em 2.85em;position:relative;flex-direction:column;justify-content:center}.timeline .activity::before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:1px;background-color:#c6c6c6}.timeline .activity:target .type{border-color:#314a93;box-shadow:0 0 .2em #314a93}.timeline .activity .type{position:absolute;z-index:1;display:flex;width:32px;height:32px;top:13px;left:-15px;align-items:center;background-color:#e6e6e6;border:2px solid #c6c6c6;border-radius:50%;justify-content:center;flex-shrink:0;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.timeline .activity .type.primary{background-color:#314a93;color:#fff;border-color:#2b4080}.timeline .activity .type.success{background-color:#297d51;color:#fff;border-color:#236a45}.timeline .activity .type.warning{background-color:#956d28;color:#fff;border-color:#815e23}.timeline .activity .type.error{background-color:#972727;color:#fff;border-color:#832222}.timeline .activity .type.dark{background-color:#202123;color:#979797;border-color:#141416}.timeline .activity .author,.timeline .activity .body,.timeline .activity .date,.timeline .activity .actions,.timeline .activity .media{min-width:0;max-width:100%;color:#202123;flex:auto;margin-left:10px;width:100%}.timeline .activity .author{font-weight:bold;font-size:1rem;color:#030303}.timeline .activity .date{font-size:.9em;opacity:.6}.timeline .activity .media{margin-top:16px;display:flex;flex-wrap:wrap;position:relative;padding-bottom:56.25% !important;height:0;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box}.timeline .activity .media iframe,.timeline .activity .media object,.timeline .activity .media embed{position:absolute;top:0;left:0;width:100%;height:100%}.timeline .activity .media video{max-width:100%;height:auto;box-sizing:border-box}.timeline .activity .media img{display:block}.timeline .activity>.media.two{padding-bottom:initial !important;height:auto}.timeline .activity>.media.two>div,.timeline .activity>.media.two>a{flex:0 0 calc(100%*(1 / 2));flex-grow:1;padding:1px}.timeline .activity>.media.three{padding-bottom:initial !important;height:auto}.timeline .activity>.media.three>div,.timeline .activity>.media.three>a{flex:0 0 calc(100%*(1 / 3));flex-grow:1;padding:1px}.timeline .activity>.media.four{padding-bottom:initial !important;height:auto}.timeline .activity>.media.four>div,.timeline .activity>.media.four>a{flex:0 0 calc(100%*(1 / 4));flex-grow:1;padding:1px}.timeline .activity>.media.five{padding-bottom:initial !important;height:auto}.timeline .activity>.media.five>div,.timeline .activity>.media.five>a{flex:0 0 calc(100%*(1 / 5));flex-grow:1;padding:1px}.timeline .activity>.media.six{padding-bottom:initial !important;height:auto}.timeline .activity>.media.six>div,.timeline .activity>.media.six>a{flex:0 0 calc(100%*(1 / 6));flex-grow:1;padding:1px}.timeline .activity>.media.seven{padding-bottom:initial !important;height:auto}.timeline .activity>.media.seven>div,.timeline .activity>.media.seven>a{flex:0 0 calc(100%*(1 / 7));flex-grow:1;padding:1px}.timeline .activity>.media.eight{padding-bottom:initial !important;height:auto}.timeline .activity>.media.eight>div,.timeline .activity>.media.eight>a{flex:0 0 calc(100%*(1 / 8));flex-grow:1;padding:1px}.timeline .activity>.media.nine{padding-bottom:initial !important;height:auto}.timeline .activity>.media.nine>div,.timeline .activity>.media.nine>a{flex:0 0 calc(100%*(1 / 9));flex-grow:1;padding:1px}.timeline .activity>.media.ten{padding-bottom:initial !important;height:auto}.timeline .activity>.media.ten>div,.timeline .activity>.media.ten>a{flex:0 0 calc(100%*(1 / 10));flex-grow:1;padding:1px}.timeline .activity>.media.eleven{padding-bottom:initial !important;height:auto}.timeline .activity>.media.eleven>div,.timeline .activity>.media.eleven>a{flex:0 0 calc(100%*(1 / 11));flex-grow:1;padding:1px}.timeline .activity>.media.twelve{padding-bottom:initial !important;height:auto}.timeline .activity>.media.twelve>div,.timeline .activity>.media.twelve>a{flex:0 0 calc(100%*(1 / 12));flex-grow:1;padding:1px}.timeline .activity>.media.thirteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.thirteen>div,.timeline .activity>.media.thirteen>a{flex:0 0 calc(100%*(1 / 13));flex-grow:1;padding:1px}.timeline .activity>.media.fourteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.fourteen>div,.timeline .activity>.media.fourteen>a{flex:0 0 calc(100%*(1 / 14));flex-grow:1;padding:1px}.timeline .activity>.media.fifteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.fifteen>div,.timeline .activity>.media.fifteen>a{flex:0 0 calc(100%*(1 / 15));flex-grow:1;padding:1px}.timeline .activity>.media.sixteen{padding-bottom:initial !important;height:auto}.timeline .activity>.media.sixteen>div,.timeline .activity>.media.sixteen>a{flex:0 0 calc(100%*(1 / 16));flex-grow:1;padding:1px}.timeline .activity .actions{margin-top:16px}.timeline .activity:last-child::before{background:linear-gradient(180deg, #c6c6c6 45%, rgba(255, 255, 255, 0) 100%)}.timeline .activity:first-child::before{background:linear-gradient(0deg, #c6c6c6 45%, rgba(255, 255, 255, 0) 100%)}.tooltip{display:inline-flex;justify-content:center;align-items:center;position:relative;cursor:default}.tooltip .text{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9em;font-weight:bold;visibility:hidden;background-color:#252831;border-radius:4px;min-width:100px;max-width:180px;padding:5px;top:120%;opacity:0;transition:opacity .18s;z-index:1}.tooltip .text::after{content:"";position:absolute;top:auto;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #252831 rgba(0,0,0,0)}.tooltip.left>.text,.tooltip.right>.text,.tooltip.top>.text{top:auto}.tooltip.left>.text::after,.tooltip.right>.text::after,.tooltip.top>.text::after{bottom:auto}.tooltip.right>.text{left:110%}.tooltip.right>.text::after{right:100%;left:auto;border-color:rgba(0,0,0,0) #252831 rgba(0,0,0,0) rgba(0,0,0,0)}.tooltip.left>.text{right:110%}.tooltip.left>.text::after{left:100%;right:auto;margin:auto -5px auto auto;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #252831}.tooltip.top>.text{bottom:120%}.tooltip.top>.text::after{top:100%;border-color:#252831 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.tooltip:hover .text{visibility:visible;opacity:1}.align-items-baseline{align-items:baseline !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-stretch{align-items:stretch !important}.align-items-initial{align-items:initial !important}.align-items-inherit{align-items:inherit !important}.align-self-auto{align-self:auto !important}.align-self-baseline{align-self:baseline !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-stretch{align-self:stretch !important}.align-self-initial{align-self:initial !important}.align-self-inherit{align-self:inherit !important}.align-content-stretch{align-content:stretch !important}.align-content-center{align-content:center !important}.align-content-start{align-content:flex-start !important}.align-content-end{align-content:flex-end !important}.align-content-between{align-content:space-between !important}.align-content-around{align-content:space-around !important}.align-content-evenly{align-content:space-evenly !important}.align-content-initial{align-content:initial !important}.align-content-inherit{align-content:inherit !important}.backdrop-blur-4{backdrop-filter:blur(4px)}.backdrop-blur-7{backdrop-filter:blur(7px)}.backdrop-blur-10{backdrop-filter:blur(10px)}.backdrop-blur-12{backdrop-filter:blur(12px)}.backdrop-blur-16{backdrop-filter:blur(16px)}.backdrop-blur-20{backdrop-filter:blur(20px)}.backdrop-brightness-0{backdrop-filter:brightness(0)}.backdrop-brightness-25{backdrop-filter:brightness(0.25)}.backdrop-brightness-50{backdrop-filter:brightness(0.5)}.backdrop-brightness-75{backdrop-filter:brightness(0.75)}.backdrop-brightness-100{backdrop-filter:brightness(1)}.backdrop-brightness-125{backdrop-filter:brightness(1.25)}.backdrop-brightness-150{backdrop-filter:brightness(1.5)}.backdrop-brightness-175{backdrop-filter:brightness(1.75)}.backdrop-brightness-200{backdrop-filter:brightness(2)}.backdrop-contrast-0{backdrop-filter:contrast(0)}.backdrop-contrast-25{backdrop-filter:contrast(0.25)}.backdrop-contrast-50{backdrop-filter:contrast(0.5)}.backdrop-contrast-75{backdrop-filter:contrast(0.75)}.backdrop-contrast-100{backdrop-filter:contrast(1)}.backdrop-contrast-125{backdrop-filter:contrast(1.25)}.backdrop-contrast-150{backdrop-filter:contrast(1.5)}.backdrop-contrast-175{backdrop-filter:contrast(1.75)}.backdrop-contrast-200{backdrop-filter:contrast(2)}.backdrop-grayscale-0{backdrop-filter:grayscale(0)}.backdrop-grayscale-25{backdrop-filter:grayscale(0.25)}.backdrop-grayscale-50{backdrop-filter:grayscale(0.5)}.backdrop-grayscale-75{backdrop-filter:grayscale(0.75)}.backdrop-grayscale-100{backdrop-filter:grayscale(1)}.backdrop-grayscale-125{backdrop-filter:grayscale(1.25)}.backdrop-grayscale-150{backdrop-filter:grayscale(1.5)}.backdrop-grayscale-175{backdrop-filter:grayscale(1.75)}.backdrop-grayscale-200{backdrop-filter:grayscale(2)}.backdrop-invert-0{backdrop-filter:invert(0)}.backdrop-invert-25{backdrop-filter:invert(0.25)}.backdrop-invert-50{backdrop-filter:invert(0.5)}.backdrop-invert-75{backdrop-filter:invert(0.75)}.backdrop-invert-100{backdrop-filter:invert(1)}.backdrop-invert-125{backdrop-filter:invert(1.25)}.backdrop-invert-150{backdrop-filter:invert(1.5)}.backdrop-invert-175{backdrop-filter:invert(1.75)}.backdrop-invert-200{backdrop-filter:invert(2)}.backdrop-opacity-0{backdrop-filter:opacity(0)}.backdrop-opacity-25{backdrop-filter:opacity(0.25)}.backdrop-opacity-50{backdrop-filter:opacity(0.5)}.backdrop-opacity-75{backdrop-filter:opacity(0.75)}.backdrop-opacity-100{backdrop-filter:opacity(1)}.backdrop-opacity-125{backdrop-filter:opacity(1.25)}.backdrop-opacity-150{backdrop-filter:opacity(1.5)}.backdrop-opacity-175{backdrop-filter:opacity(1.75)}.backdrop-opacity-200{backdrop-filter:opacity(2)}.backdrop-saturate-0{backdrop-filter:saturate(0)}.backdrop-saturate-25{backdrop-filter:saturate(0.25)}.backdrop-saturate-50{backdrop-filter:saturate(0.5)}.backdrop-saturate-75{backdrop-filter:saturate(0.75)}.backdrop-saturate-100{backdrop-filter:saturate(1)}.backdrop-saturate-125{backdrop-filter:saturate(1.25)}.backdrop-saturate-150{backdrop-filter:saturate(1.5)}.backdrop-saturate-175{backdrop-filter:saturate(1.75)}.backdrop-saturate-200{backdrop-filter:saturate(2)}.backdrop-sepia-0{backdrop-filter:sepia(0)}.backdrop-sepia-25{backdrop-filter:sepia(0.25)}.backdrop-sepia-50{backdrop-filter:sepia(0.5)}.backdrop-sepia-75{backdrop-filter:sepia(0.75)}.backdrop-sepia-100{backdrop-filter:sepia(1)}.backdrop-sepia-125{backdrop-filter:sepia(1.25)}.backdrop-sepia-150{backdrop-filter:sepia(1.5)}.backdrop-sepia-175{backdrop-filter:sepia(1.75)}.backdrop-sepia-200{backdrop-filter:sepia(2)}.bg-color{background-color:white !important}.bg-grey{background-color:#979797 !important}.bg-secondary{background-color:#e6e6e6 !important}.bg-white{background-color:white !important}.bg-black{background-color:black !important}.bg-dark{background-color:#252831 !important}.bg-primary{background-color:#314a93 !important}.bg-success{background-color:#297d51 !important}.bg-warning{background-color:#956d28 !important}.bg-error{background-color:#972727 !important}.bg-color-darken-5{background-color:#f2f2f2 !important}.bg-color-lighten-5{background-color:#fff !important}.bg-grey-darken-5{background-color:#8f8f8f !important}.bg-grey-lighten-5{background-color:#9c9c9c !important}.bg-secondary-darken-5{background-color:#dbdbdb !important}.bg-secondary-lighten-5{background-color:#e7e7e7 !important}.bg-white-darken-5{background-color:#f2f2f2 !important}.bg-white-lighten-5{background-color:#fff !important}.bg-black-darken-5{background-color:#000 !important}.bg-black-lighten-5{background-color:#0d0d0d !important}.bg-dark-darken-5{background-color:#23262f !important}.bg-dark-lighten-5{background-color:#30333b !important}.bg-primary-darken-5{background-color:#2f468c !important}.bg-primary-lighten-5{background-color:#3b5398 !important}.bg-success-darken-5{background-color:#27774d !important}.bg-success-lighten-5{background-color:#34845a !important}.bg-warning-darken-5{background-color:#8e6826 !important}.bg-warning-lighten-5{background-color:#9a7433 !important}.bg-error-darken-5{background-color:#8f2525 !important}.bg-error-lighten-5{background-color:#9c3232 !important}.bg-color-darken-10{background-color:#e6e6e6 !important}.bg-color-lighten-10{background-color:#fff !important}.bg-grey-darken-10{background-color:#888 !important}.bg-grey-lighten-10{background-color:#a1a1a1 !important}.bg-secondary-darken-10{background-color:#cfcfcf !important}.bg-secondary-lighten-10{background-color:#e9e9e9 !important}.bg-white-darken-10{background-color:#e6e6e6 !important}.bg-white-lighten-10{background-color:#fff !important}.bg-black-darken-10{background-color:#000 !important}.bg-black-lighten-10{background-color:#1a1a1a !important}.bg-dark-darken-10{background-color:#21242c !important}.bg-dark-lighten-10{background-color:#3b3e46 !important}.bg-primary-darken-10{background-color:#2c4384 !important}.bg-primary-lighten-10{background-color:#465c9e !important}.bg-success-darken-10{background-color:#257149 !important}.bg-success-lighten-10{background-color:#3e8a62 !important}.bg-warning-darken-10{background-color:#866224 !important}.bg-warning-lighten-10{background-color:#a07c3e !important}.bg-error-darken-10{background-color:#882323 !important}.bg-error-lighten-10{background-color:#a13d3d !important}.bg-color-darken-15{background-color:#d9d9d9 !important}.bg-color-lighten-15{background-color:#fff !important}.bg-grey-darken-15{background-color:gray !important}.bg-grey-lighten-15{background-color:#a7a7a7 !important}.bg-secondary-darken-15{background-color:#c4c4c4 !important}.bg-secondary-lighten-15{background-color:#eaeaea !important}.bg-white-darken-15{background-color:#d9d9d9 !important}.bg-white-lighten-15{background-color:#fff !important}.bg-black-darken-15{background-color:#000 !important}.bg-black-lighten-15{background-color:#262626 !important}.bg-dark-darken-15{background-color:#1f222a !important}.bg-dark-lighten-15{background-color:#464850 !important}.bg-primary-darken-15{background-color:#2a3f7d !important}.bg-primary-lighten-15{background-color:#5065a3 !important}.bg-success-darken-15{background-color:#236a45 !important}.bg-success-lighten-15{background-color:#49916b !important}.bg-warning-darken-15{background-color:#7f5d22 !important}.bg-warning-lighten-15{background-color:#a58348 !important}.bg-error-darken-15{background-color:#802121 !important}.bg-error-lighten-15{background-color:#a74747 !important}.bg-color-darken-20{background-color:#ccc !important}.bg-color-lighten-20{background-color:#fff !important}.bg-grey-darken-20{background-color:#797979 !important}.bg-grey-lighten-20{background-color:#acacac !important}.bg-secondary-darken-20{background-color:#b8b8b8 !important}.bg-secondary-lighten-20{background-color:#ebebeb !important}.bg-white-darken-20{background-color:#ccc !important}.bg-white-lighten-20{background-color:#fff !important}.bg-black-darken-20{background-color:#000 !important}.bg-black-lighten-20{background-color:#333 !important}.bg-dark-darken-20{background-color:#1e2027 !important}.bg-dark-lighten-20{background-color:#51535a !important}.bg-primary-darken-20{background-color:#273b76 !important}.bg-primary-lighten-20{background-color:#5a6ea9 !important}.bg-success-darken-20{background-color:#216441 !important}.bg-success-lighten-20{background-color:#549774 !important}.bg-warning-darken-20{background-color:#775720 !important}.bg-warning-lighten-20{background-color:#aa8a53 !important}.bg-error-darken-20{background-color:#791f1f !important}.bg-error-lighten-20{background-color:#ac5252 !important}.bg-color-darken-25{background-color:#bfbfbf !important}.bg-color-lighten-25{background-color:#fff !important}.bg-grey-darken-25{background-color:#717171 !important}.bg-grey-lighten-25{background-color:#b1b1b1 !important}.bg-secondary-darken-25{background-color:#adadad !important}.bg-secondary-lighten-25{background-color:#ececec !important}.bg-white-darken-25{background-color:#bfbfbf !important}.bg-white-lighten-25{background-color:#fff !important}.bg-black-darken-25{background-color:#000 !important}.bg-black-lighten-25{background-color:#404040 !important}.bg-dark-darken-25{background-color:#1c1e25 !important}.bg-dark-lighten-25{background-color:#5c5e65 !important}.bg-primary-darken-25{background-color:#25386e !important}.bg-primary-lighten-25{background-color:#6577ae !important}.bg-success-darken-25{background-color:#1f5e3d !important}.bg-success-lighten-25{background-color:#5f9e7d !important}.bg-warning-darken-25{background-color:#70521e !important}.bg-warning-lighten-25{background-color:#b0925e !important}.bg-error-darken-25{background-color:#711d1d !important}.bg-error-lighten-25{background-color:#b15d5d !important}.bg-color-darken-30{background-color:#b3b3b3 !important}.bg-color-lighten-30{background-color:#fff !important}.bg-grey-darken-30{background-color:#6a6a6a !important}.bg-grey-lighten-30{background-color:#b6b6b6 !important}.bg-secondary-darken-30{background-color:#a1a1a1 !important}.bg-secondary-lighten-30{background-color:#eee !important}.bg-white-darken-30{background-color:#b3b3b3 !important}.bg-white-lighten-30{background-color:#fff !important}.bg-black-darken-30{background-color:#000 !important}.bg-black-lighten-30{background-color:#4d4d4d !important}.bg-dark-darken-30{background-color:#1a1c22 !important}.bg-dark-lighten-30{background-color:#66696f !important}.bg-primary-darken-30{background-color:#223467 !important}.bg-primary-lighten-30{background-color:#6f80b3 !important}.bg-success-darken-30{background-color:#1d5839 !important}.bg-success-lighten-30{background-color:#69a485 !important}.bg-warning-darken-30{background-color:#684c1c !important}.bg-warning-lighten-30{background-color:#b59969 !important}.bg-error-darken-30{background-color:#6a1b1b !important}.bg-error-lighten-30{background-color:#b66868 !important}.bg-color-darken-35{background-color:#a6a6a6 !important}.bg-color-lighten-35{background-color:#fff !important}.bg-grey-darken-35{background-color:#626262 !important}.bg-grey-lighten-35{background-color:#bbb !important}.bg-secondary-darken-35{background-color:#969696 !important}.bg-secondary-lighten-35{background-color:#efefef !important}.bg-white-darken-35{background-color:#a6a6a6 !important}.bg-white-lighten-35{background-color:#fff !important}.bg-black-darken-35{background-color:#000 !important}.bg-black-lighten-35{background-color:#595959 !important}.bg-dark-darken-35{background-color:#181a20 !important}.bg-dark-lighten-35{background-color:#717379 !important}.bg-primary-darken-35{background-color:#203060 !important}.bg-primary-lighten-35{background-color:#7989b9 !important}.bg-success-darken-35{background-color:#1b5135 !important}.bg-success-lighten-35{background-color:#74ab8e !important}.bg-warning-darken-35{background-color:#61471a !important}.bg-warning-lighten-35{background-color:#baa073 !important}.bg-error-darken-35{background-color:#621919 !important}.bg-error-lighten-35{background-color:#bb7373 !important}.border-0{border-width:0px !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}.border-top-0{border-top-width:0px !important}.border-top-1{border-top-width:1px !important}.border-top-2{border-top-width:2px !important}.border-top-3{border-top-width:3px !important}.border-top-4{border-top-width:4px !important}.border-top-5{border-top-width:5px !important}.border-right-0{border-right-width:0px !important}.border-right-1{border-right-width:1px !important}.border-right-2{border-right-width:2px !important}.border-right-3{border-right-width:3px !important}.border-right-4{border-right-width:4px !important}.border-right-5{border-right-width:5px !important}.border-bottom-0{border-bottom-width:0px !important}.border-bottom-1{border-bottom-width:1px !important}.border-bottom-2{border-bottom-width:2px !important}.border-bottom-3{border-bottom-width:3px !important}.border-bottom-4{border-bottom-width:4px !important}.border-bottom-5{border-bottom-width:5px !important}.border-left-0{border-left-width:0px !important}.border-left-1{border-left-width:1px !important}.border-left-2{border-left-width:2px !important}.border-left-3{border-left-width:3px !important}.border-left-4{border-left-width:4px !important}.border-left-5{border-left-width:5px !important}.border-x-0{border-left-width:0px !important;border-right-width:0px !important}.border-y-0{border-top-width:0px !important;border-bottom-width:0px !important}.border-x-1{border-left-width:1px !important;border-right-width:1px !important}.border-y-1{border-top-width:1px !important;border-bottom-width:1px !important}.border-x-2{border-left-width:2px !important;border-right-width:2px !important}.border-y-2{border-top-width:2px !important;border-bottom-width:2px !important}.border-x-3{border-left-width:3px !important;border-right-width:3px !important}.border-y-3{border-top-width:3px !important;border-bottom-width:3px !important}.border-x-4{border-left-width:4px !important;border-right-width:4px !important}.border-y-4{border-top-width:4px !important;border-bottom-width:4px !important}.border-x-5{border-left-width:5px !important;border-right-width:5px !important}.border-y-5{border-top-width:5px !important;border-bottom-width:5px !important}.radius-2{border-radius:2px !important}.radius-4{border-radius:4px !important}.radius-8{border-radius:8px !important}.radius-10{border-radius:10px !important}.radius-12{border-radius:12px !important}.radius-14{border-radius:14px !important}.radius-16{border-radius:16px !important}.radius-500{border-radius:500px !important}.border-solid{border-style:solid !important}.border-dashed{border-style:dashed !important}.border-dotted{border-style:dotted !important}.border-double{border-style:double !important}.border-groove{border-style:groove !important}.border-ridge{border-style:ridge !important}.cursor-alias{cursor:alias !important}.cursor-default{cursor:default !important}.cursor-grab{cursor:grab !important}.cursor-help{cursor:help !important}.cursor-move{cursor:move !important}.cursor-pointer{cursor:pointer !important}.cursor-wait{cursor:wait !important}.cursor-zoom-in{cursor:zoom-in !important}.cursor-zoom-out{cursor:zoom-out !important}.filter-invert{filter:invert(100%)}.filter-gray{filter:grayscale(100%)}.display-inline{display:inline !important}.display-flex{display:flex !important}.display-inline-flex{display:inline-flex !important}.display-grid{display:grid !important}.display-inline-grid{display:inline-grid !important}.display-block{display:block !important}.display-inline-block{display:inline-block !important}.display-table{display:table !important}.display-inline-table{display:inline-table !important}.display-table-row{display:table-row !important}.display-table-column{display:table-column !important}.display-table-cell{display:table-cell !important}.flex-1{flex:1 1 0% !important}.flex-auto{flex:1 1 auto !important}.flex-initial{flex:0 1 auto !important}.flex-none{flex:none !important}.flex-direction-row{flex-direction:row !important}.flex-direction-row-reverse{flex-direction:row-reverse !important}.flex-direction-column{flex-direction:column !important}.flex-direction-column-reverse{flex-direction:column-reverse !important}.flex-direction-initial{flex-direction:initial !important}.flex-direction-inherit{flex-direction:inherit !important}.flex-grow{flex-grow:1 !important}.flex-grow-0{flex-grow:0 !important}.flex-shrink{flex-shrink:1 !important}.flex-shrink-0{flex-shrink:0 !important}.flex-wrap{flex-wrap:wrap !important}.flex-wrap-reverse{flex-wrap:wrap-reverse !important}.flex-nowrap{flex-wrap:nowrap !important}.float-right{float:right !important}.float-left{float:left !important}.float-none{float:none !important}.mini-text{font-size:60% !important}.tiny-text{font-size:73% !important}.small-text{font-size:85% !important}.large-text{font-size:120% !important}.big-text{font-size:175% !important}.huge-text{font-size:200% !important}.giant-text{font-size:350% !important}.weight-100{font-weight:100 !important}.weight-200{font-weight:200 !important}.weight-300{font-weight:300 !important}.weight-400{font-weight:400 !important}.weight-500{font-weight:500 !important}.weight-600{font-weight:600 !important}.weight-700{font-weight:700 !important}.weight-800{font-weight:800 !important}.weight-900{font-weight:900 !important}.weight-normal{font-weight:normal !important}.weight-bold{font-weight:bold !important}.weight-bolder{font-weight:bolder !important}.weight-lighter{font-weight:lighter !important}.height-min-content{height:min-content !important}.height-max-content{height:max-content !important}.height-fit-content{height:fit-content !important}.height-25{height:25% !important}.height-50{height:50% !important}.height-75{height:75% !important}.height-100{height:100% !important}.tiny-height{height:1rem !important}.mini-height{height:2rem !important}.small-height{height:4rem !important}.large-height{height:8rem !important}.big-height{height:10rem !important}.huge-height{height:12rem !important}.massive-height{height:18rem !important}.giant-height{height:24rem !important}.top-0{top:0}.top-auto{top:auto}.bottom-0{bottom:0}.bottom-auto{bottom:auto}.left-0{left:0}.left-auto{left:auto}.right-0{right:0}.right-auto{right:auto}.justify-content-baseline{justify-content:baseline !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-initial{justify-content:initial !important}.justify-content-inherit{justify-content:inherit !important}.justify-items-stretch{justify-items:stretch !important}.justify-items-start{justify-items:start !important}.justify-items-left{justify-items:left !important}.justify-items-center{justify-items:center !important}.justify-items-end{justify-items:end !important}.justify-items-right{justify-items:right !important}.justify-items-initial{justify-items:initial !important}.justify-items-inherit{justify-items:inherit !important}.justify-self-auto{justify-self:auto !important}.justify-self-normal{justify-self:normal !important}.justify-self-stretch{justify-self:stretch !important}.justify-self-start{justify-self:start !important}.justify-self-left{justify-self:left !important}.justify-self-center{justify-self:center !important}.justify-self-end{justify-self:end !important}.justify-self-right{justify-self:right !important}.justify-self-first-baseline{justify-self:first baseline !important}.justify-self-last-baseline{justify-self:last baseline !important}.justify-self-initial{justify-self:initial !important}.justify-self-inherit{justify-self:inherit !important}.line-height-0{line-height:0 !important}.line-height-1{line-height:1 !important}.line-height-2{line-height:2 !important}.line-height-3{line-height:3 !important}.line-height-4{line-height:4 !important}.line-height-5{line-height:5 !important}.m-0{margin:0px !important}.m-5{margin:5px !important}.m-10{margin:10px !important}.m-15{margin:15px !important}.m-20{margin:20px !important}.m-30{margin:30px !important}.m-40{margin:40px !important}.m-50{margin:50px !important}.m-75{margin:75px !important}.m-100{margin:100px !important}.m-125{margin:125px !important}.m-150{margin:150px !important}.m-175{margin:175px !important}.m-200{margin:200px !important}.mt-0{margin-top:0px !important}.mt-5{margin-top:5px !important}.mt-10{margin-top:10px !important}.mt-15{margin-top:15px !important}.mt-20{margin-top:20px !important}.mt-30{margin-top:30px !important}.mt-40{margin-top:40px !important}.mt-50{margin-top:50px !important}.mt-75{margin-top:75px !important}.mt-100{margin-top:100px !important}.mt-125{margin-top:125px !important}.mt-150{margin-top:150px !important}.mt-175{margin-top:175px !important}.mt-200{margin-top:200px !important}.mr-0{margin-right:0px !important}.mr-5{margin-right:5px !important}.mr-10{margin-right:10px !important}.mr-15{margin-right:15px !important}.mr-20{margin-right:20px !important}.mr-30{margin-right:30px !important}.mr-40{margin-right:40px !important}.mr-50{margin-right:50px !important}.mr-75{margin-right:75px !important}.mr-100{margin-right:100px !important}.mr-125{margin-right:125px !important}.mr-150{margin-right:150px !important}.mr-175{margin-right:175px !important}.mr-200{margin-right:200px !important}.mb-0{margin-bottom:0px !important}.mb-5{margin-bottom:5px !important}.mb-10{margin-bottom:10px !important}.mb-15{margin-bottom:15px !important}.mb-20{margin-bottom:20px !important}.mb-30{margin-bottom:30px !important}.mb-40{margin-bottom:40px !important}.mb-50{margin-bottom:50px !important}.mb-75{margin-bottom:75px !important}.mb-100{margin-bottom:100px !important}.mb-125{margin-bottom:125px !important}.mb-150{margin-bottom:150px !important}.mb-175{margin-bottom:175px !important}.mb-200{margin-bottom:200px !important}.ml-0{margin-left:0px !important}.ml-5{margin-left:5px !important}.ml-10{margin-left:10px !important}.ml-15{margin-left:15px !important}.ml-20{margin-left:20px !important}.ml-30{margin-left:30px !important}.ml-40{margin-left:40px !important}.ml-50{margin-left:50px !important}.ml-75{margin-left:75px !important}.ml-100{margin-left:100px !important}.ml-125{margin-left:125px !important}.ml-150{margin-left:150px !important}.ml-175{margin-left:175px !important}.ml-200{margin-left:200px !important}.m-tiny{margin:1rem !important}.m-mini{margin:2rem !important}.m-small{margin:4rem !important}.m-large{margin:8rem !important}.m-big{margin:10rem !important}.m-huge{margin:12rem !important}.m-massive{margin:18rem !important}.m-giant{margin:24rem !important}.mt-tiny{margin-top:1rem !important}.mt-mini{margin-top:2rem !important}.mt-small{margin-top:4rem !important}.mt-large{margin-top:8rem !important}.mt-big{margin-top:10rem !important}.mt-huge{margin-top:12rem !important}.mt-massive{margin-top:18rem !important}.mt-giant{margin-top:24rem !important}.mr-tiny{margin-right:1rem !important}.mr-mini{margin-right:2rem !important}.mr-small{margin-right:4rem !important}.mr-large{margin-right:8rem !important}.mr-big{margin-right:10rem !important}.mr-huge{margin-right:12rem !important}.mr-massive{margin-right:18rem !important}.mr-giant{margin-right:24rem !important}.mb-tiny{margin-bottom:1rem !important}.mb-mini{margin-bottom:2rem !important}.mb-small{margin-bottom:4rem !important}.mb-large{margin-bottom:8rem !important}.mb-big{margin-bottom:10rem !important}.mb-huge{margin-bottom:12rem !important}.mb-massive{margin-bottom:18rem !important}.mb-giant{margin-bottom:24rem !important}.ml-tiny{margin-left:1rem !important}.ml-mini{margin-left:2rem !important}.ml-small{margin-left:4rem !important}.ml-large{margin-left:8rem !important}.ml-big{margin-left:10rem !important}.ml-huge{margin-left:12rem !important}.ml-massive{margin-left:18rem !important}.ml-giant{margin-left:24rem !important}.m-auto{margin:auto !important}.mt-auto{margin-top:auto !important}.mr-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ml-auto{margin-left:auto !important}.fit-fill{object-fit:fill !important}.fit-contain{object-fit:contain !important}.fit-cover{object-fit:cover !important}.fit-none{object-fit:none !important}.fit-scale-down{object-fit:scale-down !important}.fit-initial{object-fit:initial !important}.fit-inherit{object-fit:inherit !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}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-visible{overflow-x:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-visible{overflow-y:visible}.overflow-y-scroll{overflow-y:scroll}.p-0{padding:0px !important}.p-5{padding:5px !important}.p-10{padding:10px !important}.p-15{padding:15px !important}.p-20{padding:20px !important}.p-30{padding:30px !important}.p-40{padding:40px !important}.p-50{padding:50px !important}.p-75{padding:75px !important}.p-100{padding:100px !important}.p-125{padding:125px !important}.p-150{padding:150px !important}.p-175{padding:175px !important}.p-200{padding:200px !important}.pt-0{padding-top:0px !important}.pt-5{padding-top:5px !important}.pt-10{padding-top:10px !important}.pt-15{padding-top:15px !important}.pt-20{padding-top:20px !important}.pt-30{padding-top:30px !important}.pt-40{padding-top:40px !important}.pt-50{padding-top:50px !important}.pt-75{padding-top:75px !important}.pt-100{padding-top:100px !important}.pt-125{padding-top:125px !important}.pt-150{padding-top:150px !important}.pt-175{padding-top:175px !important}.pt-200{padding-top:200px !important}.pr-0{padding-right:0px !important}.pr-5{padding-right:5px !important}.pr-10{padding-right:10px !important}.pr-15{padding-right:15px !important}.pr-20{padding-right:20px !important}.pr-30{padding-right:30px !important}.pr-40{padding-right:40px !important}.pr-50{padding-right:50px !important}.pr-75{padding-right:75px !important}.pr-100{padding-right:100px !important}.pr-125{padding-right:125px !important}.pr-150{padding-right:150px !important}.pr-175{padding-right:175px !important}.pr-200{padding-right:200px !important}.pb-0{padding-bottom:0px !important}.pb-5{padding-bottom:5px !important}.pb-10{padding-bottom:10px !important}.pb-15{padding-bottom:15px !important}.pb-20{padding-bottom:20px !important}.pb-30{padding-bottom:30px !important}.pb-40{padding-bottom:40px !important}.pb-50{padding-bottom:50px !important}.pb-75{padding-bottom:75px !important}.pb-100{padding-bottom:100px !important}.pb-125{padding-bottom:125px !important}.pb-150{padding-bottom:150px !important}.pb-175{padding-bottom:175px !important}.pb-200{padding-bottom:200px !important}.pl-0{padding-left:0px !important}.pl-5{padding-left:5px !important}.pl-10{padding-left:10px !important}.pl-15{padding-left:15px !important}.pl-20{padding-left:20px !important}.pl-30{padding-left:30px !important}.pl-40{padding-left:40px !important}.pl-50{padding-left:50px !important}.pl-75{padding-left:75px !important}.pl-100{padding-left:100px !important}.pl-125{padding-left:125px !important}.pl-150{padding-left:150px !important}.pl-175{padding-left:175px !important}.pl-200{padding-left:200px !important}.p-tiny{padding:1rem !important}.p-mini{padding:2rem !important}.p-small{padding:4rem !important}.p-large{padding:8rem !important}.p-big{padding:10rem !important}.p-huge{padding:12rem !important}.p-massive{padding:18rem !important}.p-giant{padding:24rem !important}.pt-tiny{padding-top:1rem !important}.pt-mini{padding-top:2rem !important}.pt-small{padding-top:4rem !important}.pt-large{padding-top:8rem !important}.pt-big{padding-top:10rem !important}.pt-huge{padding-top:12rem !important}.pt-massive{padding-top:18rem !important}.pt-giant{padding-top:24rem !important}.pr-tiny{padding-right:1rem !important}.pr-mini{padding-right:2rem !important}.pr-small{padding-right:4rem !important}.pr-large{padding-right:8rem !important}.pr-big{padding-right:10rem !important}.pr-huge{padding-right:12rem !important}.pr-massive{padding-right:18rem !important}.pr-giant{padding-right:24rem !important}.pb-tiny{padding-bottom:1rem !important}.pb-mini{padding-bottom:2rem !important}.pb-small{padding-bottom:4rem !important}.pb-large{padding-bottom:8rem !important}.pb-big{padding-bottom:10rem !important}.pb-huge{padding-bottom:12rem !important}.pb-massive{padding-bottom:18rem !important}.pb-giant{padding-bottom:24rem !important}.pl-tiny{padding-left:1rem !important}.pl-mini{padding-left:2rem !important}.pl-small{padding-left:4rem !important}.pl-large{padding-left:8rem !important}.pl-big{padding-left:10rem !important}.pl-huge{padding-left:12rem !important}.pl-massive{padding-left:18rem !important}.pl-giant{padding-left:24rem !important}.p-auto{padding:auto !important}.pt-auto{padding-top:auto !important}.pr-auto{padding-right:auto !important}.pb-auto{padding-bottom:auto !important}.pl-auto{padding-left:auto !important}.place-content-stretch{place-content:stretch !important}.place-content-start{place-content:start !important}.place-content-end{place-content:end !important}.place-content-center{place-content:center !important}.place-content-between{place-content:space-between !important}.place-content-around{place-content:space-around !important}.place-content-evenly{place-content:space-evenly !important}.place-content-initial{place-content:initial !important}.place-content-inherit{place-content:inherit !important}.place-items-stretch{place-items:stretch !important}.place-items-start{place-items:start !important}.place-items-end{place-items:end !important}.place-items-center{place-items:center !important}.place-items-baseline{place-items:baseline !important}.place-self-auto{place-self:auto !important}.place-self-stretch{place-self:stretch !important}.place-self-start{place-self:start !important}.place-self-left{place-self:left !important}.place-self-center{place-self:center !important}.place-self-end{place-self:end !important}.place-self-right{place-self:right !important}.position-static{position:static !important}.position-absolute{position:absolute !important}.position-fixed{position:fixed !important}.position-relative{position:relative !important}.position-sticky{position:sticky !important}.position-initial{position:initial !important}.position-inherit{position:inherit !important}.resize-none{resize:none !important}.resize-both{resize:both !important}.resize-horizontal{resize:horizontal !important}.resize-vertical{resize:vertical !important}.resize-initial{resize:initial !important}.resize-inherit{resize:inherit !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-justify{text-align:justify !important}.text-start{text-align:start !important}.text-end{text-align:end !important}.color-grey{color:#979797 !important}.color-white{color:white !important}.color-black{color:black !important}.color-primary{color:#314a93 !important}.color-success{color:#297d51 !important}.color-warning{color:#956d28 !important}.color-error{color:#972727 !important}.color-grey-darken-5{color:#8f8f8f !important}.color-grey-lighten-5{color:#9c9c9c !important}.color-white-darken-5{color:#f2f2f2 !important}.color-white-lighten-5{color:#fff !important}.color-black-darken-5{color:#000 !important}.color-black-lighten-5{color:#0d0d0d !important}.color-primary-darken-5{color:#2f468c !important}.color-primary-lighten-5{color:#3b5398 !important}.color-success-darken-5{color:#27774d !important}.color-success-lighten-5{color:#34845a !important}.color-warning-darken-5{color:#8e6826 !important}.color-warning-lighten-5{color:#9a7433 !important}.color-error-darken-5{color:#8f2525 !important}.color-error-lighten-5{color:#9c3232 !important}.color-grey-darken-10{color:#888 !important}.color-grey-lighten-10{color:#a1a1a1 !important}.color-white-darken-10{color:#e6e6e6 !important}.color-white-lighten-10{color:#fff !important}.color-black-darken-10{color:#000 !important}.color-black-lighten-10{color:#1a1a1a !important}.color-primary-darken-10{color:#2c4384 !important}.color-primary-lighten-10{color:#465c9e !important}.color-success-darken-10{color:#257149 !important}.color-success-lighten-10{color:#3e8a62 !important}.color-warning-darken-10{color:#866224 !important}.color-warning-lighten-10{color:#a07c3e !important}.color-error-darken-10{color:#882323 !important}.color-error-lighten-10{color:#a13d3d !important}.color-grey-darken-15{color:gray !important}.color-grey-lighten-15{color:#a7a7a7 !important}.color-white-darken-15{color:#d9d9d9 !important}.color-white-lighten-15{color:#fff !important}.color-black-darken-15{color:#000 !important}.color-black-lighten-15{color:#262626 !important}.color-primary-darken-15{color:#2a3f7d !important}.color-primary-lighten-15{color:#5065a3 !important}.color-success-darken-15{color:#236a45 !important}.color-success-lighten-15{color:#49916b !important}.color-warning-darken-15{color:#7f5d22 !important}.color-warning-lighten-15{color:#a58348 !important}.color-error-darken-15{color:#802121 !important}.color-error-lighten-15{color:#a74747 !important}.color-grey-darken-20{color:#797979 !important}.color-grey-lighten-20{color:#acacac !important}.color-white-darken-20{color:#ccc !important}.color-white-lighten-20{color:#fff !important}.color-black-darken-20{color:#000 !important}.color-black-lighten-20{color:#333 !important}.color-primary-darken-20{color:#273b76 !important}.color-primary-lighten-20{color:#5a6ea9 !important}.color-success-darken-20{color:#216441 !important}.color-success-lighten-20{color:#549774 !important}.color-warning-darken-20{color:#775720 !important}.color-warning-lighten-20{color:#aa8a53 !important}.color-error-darken-20{color:#791f1f !important}.color-error-lighten-20{color:#ac5252 !important}.color-grey-darken-25{color:#717171 !important}.color-grey-lighten-25{color:#b1b1b1 !important}.color-white-darken-25{color:#bfbfbf !important}.color-white-lighten-25{color:#fff !important}.color-black-darken-25{color:#000 !important}.color-black-lighten-25{color:#404040 !important}.color-primary-darken-25{color:#25386e !important}.color-primary-lighten-25{color:#6577ae !important}.color-success-darken-25{color:#1f5e3d !important}.color-success-lighten-25{color:#5f9e7d !important}.color-warning-darken-25{color:#70521e !important}.color-warning-lighten-25{color:#b0925e !important}.color-error-darken-25{color:#711d1d !important}.color-error-lighten-25{color:#b15d5d !important}.color-grey-darken-30{color:#6a6a6a !important}.color-grey-lighten-30{color:#b6b6b6 !important}.color-white-darken-30{color:#b3b3b3 !important}.color-white-lighten-30{color:#fff !important}.color-black-darken-30{color:#000 !important}.color-black-lighten-30{color:#4d4d4d !important}.color-primary-darken-30{color:#223467 !important}.color-primary-lighten-30{color:#6f80b3 !important}.color-success-darken-30{color:#1d5839 !important}.color-success-lighten-30{color:#69a485 !important}.color-warning-darken-30{color:#684c1c !important}.color-warning-lighten-30{color:#b59969 !important}.color-error-darken-30{color:#6a1b1b !important}.color-error-lighten-30{color:#b66868 !important}.color-grey-darken-35{color:#626262 !important}.color-grey-lighten-35{color:#bbb !important}.color-white-darken-35{color:#a6a6a6 !important}.color-white-lighten-35{color:#fff !important}.color-black-darken-35{color:#000 !important}.color-black-lighten-35{color:#595959 !important}.color-primary-darken-35{color:#203060 !important}.color-primary-lighten-35{color:#7989b9 !important}.color-success-darken-35{color:#1b5135 !important}.color-success-lighten-35{color:#74ab8e !important}.color-warning-darken-35{color:#61471a !important}.color-warning-lighten-35{color:#baa073 !important}.color-error-darken-35{color:#621919 !important}.color-error-lighten-35{color:#bb7373 !important}.underline{text-decoration:underline !important}.overline{text-decoration:overline !important}.line-through{text-decoration:line-through !important}.text-uppercase{text-transform:uppercase !important}.text-lowercase{text-transform:lowercase !important}.text-capitalize{text-transform:capitalize !important}.user-select-none{user-select:none !important}.user-select-auto{user-select:auto !important}.user-select-text{user-select:text !important}.user-select-all{user-select:all !important}.width-min-content{width:min-content !important}.width-max-content{width:max-content !important}.width-fit-content{width:fit-content !important}.width-25{width:25% !important}.width-33{width:33% !important}.width-50{width:50% !important}.width-66{width:66% !important}.width-75{width:75% !important}.width-100{width:100% !important}.tiny-width{width:1rem !important}.mini-width{width:2rem !important}.small-width{width:4rem !important}.large-width{width:8rem !important}.big-width{width:10rem !important}.huge-width{width:12rem !important}.massive-width{width:18rem !important}.giant-width{width:24rem !important}.z--1{z-index:-1 !important}.z-0{z-index:0 !important}.z-1{z-index:1 !important}.z-10{z-index:10 !important}.z-20{z-index:20 !important}.z-30{z-index:30 !important}.z-40{z-index:40 !important}.z-50{z-index:50 !important}.z-100{z-index:100 !important}.z-999{z-index:999 !important}.z-9999{z-index:9999 !important}.z-99999{z-index:99999 !important}.centered{margin:0 auto}.align.right{text-align:right !important}.align.left{text-align:left !important}.align.center{text-align:center !important}.align.justify{text-align:justify !important}.float.right{float:right}.float.left{float:left}.full.width{width:100%;max-width:100%;min-width:100%}.full.height{height:100%;min-height:100%;max-height:100%}.vh-100{height:100vh}.vw-100{width:100vw}.ungap{gap:0}.fade{opacity:0}.hide{display:none !important}.spacer{flex-grow:1 !important;outline:none}.avatar{display:inline-block;border-radius:50%}.reset{padding:0 !important;margin:0 !important}.reverse{transform:rotateY(180deg);unicode-bidi:bidi-override;direction:rtl}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transparent{background:rgba(0,0,0,0) !important}.pure,.pure>div{background:rgba(0,0,0,0) !important;border:none;box-shadow:none !important}[disabled],:disabled,.disabled{opacity:.49;cursor:default;pointer-events:none}.bordered{border:1px solid #c6c6c6}.borderless{border:none !important}.rounded{border-radius:4px}.radiusless{border-radius:0 !important}.shadowed{box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}.shadowless{box-shadow:none !important}.inset-0{top:0;right:0;bottom:0;left:0}.inset-auto{top:auto;right:auto;bottom:auto;left:auto} diff --git a/index.html b/index.html new file mode 100644 index 00000000..34940ba9 --- /dev/null +++ b/index.html @@ -0,0 +1,269 @@ + + + + + + + Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Welcome To +
    +
    + Punica CSS v3 +
    +
    +
    +

    + Punica CSS Framework is a clean, lightweight, responsive, modern, + and fully customizable API-driven framework built with SASS/SCSS, + offering multi-theme support. +

    +

    + View on Github +

    +
    +
    +
    CDN
    +
    +
    + Default Theme + +
    +
    + Default Dark Theme + +
    +
    +
    HTML Markup
    +
    +
    +

    + For your default setup, add the Punica CSS file to the head element of your HTML5 document. +

    + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    InfoDefault Theme Variable
    Font Family + Inter Tight +
    Font Size1rem
    Font Weight400
    Line Height1.7
    +
    +
    + Typography +
    +
    +
    +
    +

    Heading H1

    +

    Heading H2

    +

    Heading H3

    +

    Heading H4

    +
    Heading H5
    +
    Heading H6
    +
    +
    +

    Example Title

    +

    + Lorem ipsum dolor sit amet, quo in nibh mediocritatem concludaturque. Aeque consectetuer nam ut, ad appetere ocurreret mea. Nec an facilis torquatos. Pro te ferri democritum inciderint. Quis inani virtute vim cu, ad debet tincidunt mea. Audire mentitum deleniti has ex, sea veri omnis ut. Pri eu enim prodesset abhorreant. +

    +
    +
    +
    +
    +

    Learning never exhausts the mind.

    + - Leonardo da Vinci +
    +
    +
    +
    +
    + +
    +
    Lists
    +
    +
    +
    +
    +
    Unordered list
    +
      +
    • list item 1
      • +
    • list item 2 +
        +
      • list item 2.1
        • +
      • list item 2.2
        • +
      • list item 2.3
        • +
      +
      • +
    • list item 3
      • +
    +
    +
    +
    Ordered list
    +
      +
    1. list item 1
      2. +
    2. list item 2 +
        +
      1. list item 2.1
        2. +
      2. list item 2.2
        3. +
      3. list item 2.3
        4. +
      +
      3. +
    3. list item 3
      4. +
    +
    +
    +
    Description List
    +
    +
    Coffee
    +
    - black hot drink
    +
    Milk
    +
    - white cold drink
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/alert/index.html b/modules/alert/index.html new file mode 100644 index 00000000..8ad0a01b --- /dev/null +++ b/modules/alert/index.html @@ -0,0 +1,345 @@ + + + + + + + Alert - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Alert +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Alert +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Alert module is designed to display important messages or notifications to users. It offers a straightforward and effective way to capture attention, emphasize key information, or convey the status of an action. With six available themes; default, .primary, .success, .warning, .error, and .dark. Alerts are highly customizable to suit various designs and themes. Simply add the .alert class to a span or div container element to create an alert.
    +
    +
    +
    +
    +
    +
    + This is my default alert. + This is my closable default alert. +
    +
    + +
    +
    +
    This is my primary alert.
    +
    This is my primary closable alert.
    +
    This is my success alert.
    +
    This is my warning alert.
    +
    This is my error alert.
    +
    This is my dark alert.
    +
    +
    + +
    +
    +
    Outlined Style
    +
    +
    +
    This is my outlined primary alert.
    +
    This is my outlined closable success alert.
    +
    Utility : border-2
    +
    +
    + +
    +
    +
    Sizes
    +
    +
    + Small + Default + Large +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    StylesCombinators
    primary.primary.alert
    success.success.alert
    warning.warning.alert
    error.error.alert
    dark.dark.alert
    outlined.outlined.alert
    StatesCombinators
    closable.closable.alert
    SizesCombinators
    small.small.alert
    large.large.alert
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/breadcrumb/index.html b/modules/breadcrumb/index.html new file mode 100644 index 00000000..9f45b802 --- /dev/null +++ b/modules/breadcrumb/index.html @@ -0,0 +1,324 @@ + + + + + + + Breadcrumb - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Breadcrumb +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Breadcrumb +

    +
    +
    +
    + Source + API +
    +
    +
    +
    Breadcrumbs are used to show navigational hierarchies between contents. You can easily create breadcrumbs to show users their location within a website. To apply this module, add a container element with the .breadcrumb class and add child elements with the .item class.
    +
    +
    +
    +
    +
    +
    +
    + Punica + Modules + Breadcrumb +
    +
    +
    + +
    +
    + Sizes of Breadcrumb +
    +
    +

    + Add the .small and .large class to a breadcrumb to make it smaller or + larger. +

    +
    +
    +
    + Home + Services + Web Development + SPA +
    +
    +
    +
    + Home + Services + Web Development + SPA +
    +
    +
    +
    + Home + Services + Web Development + SPA +
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    breadcrumb.breadcrumb
    item.breadcrumb > .item
    active.breadcrumb > .active.item
    SizesCombinators
    small.small.breadcrumb
    large.large.breadcrumb
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/button/index.html b/modules/button/index.html new file mode 100644 index 00000000..6f0ba112 --- /dev/null +++ b/modules/button/index.html @@ -0,0 +1,948 @@ + + + + + + + Button - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Button +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Button +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Button module in Punica CSS Framework is a versatile element designed for triggering actions or navigating users. It supports various styles, sizes, and states, allowing seamless customization to suit different use cases. To apply this module, add the .button class to an a or button element.
    +
    +
    +
    +
    +
    +
    +
    Default
    +
    Active
    +
    Disabled
    +
    Inactive
    +
    Preloader
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    + +
    + +
    + + +
    + + Sizes of Button + +
    +
    +

    + Add the .tiny, .mini, .small, .large or .huge class to a button to make it smaller + or larger. + Also, you can add the .block class for a full-width button. +

    +
    +
    + Tiny + Mini + Small + Default + Large + Huge +

    + Block Button +
    +
    + +
    + + +
    + + Button Groups + +
    +
    +

    + To create a button group, add the .buttons class to a div element around the + buttons. +

    +
    +
    + + + Button + + +
    +
    + +
    +
    + + person + +
    254
    +
    +
    + + thumb_up + +
    276
    +
    +
    + + edit + + + clear + +
    +
    + + lock + +
    63
    +
    +
    + +
    +
    +
    + shopping_cart +
    +
    + $175 +
    +
    + Checkout Now ! +
    +
    +
    +
    +
    +
    + + keyboard_arrow_left + + 1 + 2 + 3 + + ... + + 56 + 57 + 58 + + keyboard_arrow_right + +
    +
    +
    + +
    + + +
    +
    Sizes of button groups
    +
    +
    + Also, add the .tiny, .mini, .small, .large or .huge class to .buttons to + make + it smaller or larger group buttons. +
    +
    +
    + + + Mini + + +
    +
    + + + Large + + +
    +
    +
    + +
    + + +
    +
    Full-width Button Groups
    +
    +
    + And you can add the .block class to .buttons for a full-width button group. +
    +
    +
    + + Button + + + Button + + + Button + +
    +
    +
    + +
    + + +
    + + Button with Dropdown + +
    +
    +

    + A button can be used to trigger a dropdown menu. +

    +
    +
    +
    +
    + + Default Dropdown keyboard_arrow_down + + +
    +
    +
    +
    + + Clickable Dropdown keyboard_arrow_down + + +
    +
    +
    +
    Dropdown
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    + drafts Mini +
    +
    254
    +
    + + keyboard_arrow_up + + +
    +
    +
    +
    + + keyboard_arrow_up + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    +
    +
    +

    + You can change the direction of the dropdown by adding any .right .left + .top .top.left .top.right .bottom.left .bottom.right classes to .dropdown + container. +

    +
    +
    +
    + + north_west + + +
    +
    +
    +
    + + north_east + + +
    +
    +
    +
    +
    +
    + + west + + +
    +
    +
    +
    + + east + + +
    +
    +
    +
    +
    +
    + + south_west + + +
    +
    +
    +
    + + south_east + + +
    +
    +
    +
    +
    + +
    + + +
    +
    + Vertical Button Groups +
    +
    +
    +

    + Also, just add the .vertical class to .buttons to make it vertical button group. +

    +
    +
    +
    + + + +
    +
    + + + +
    +
    + +
    + + keyboard_arrow_left verified_user + + +
    +
    + + settings keyboard_arrow_right + + +
    +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    + + Scheduled Reminders keyboard_arrow_right + + +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    buttons.buttons
    button.button
    .buttons > .button
    StylesCombinators
    primary.primary.button
    .primary.buttons
    success.success.button
    .success.buttons
    warning.warning.button
    .warning.buttons
    error.error.button
    .error.buttons
    dark.dark.button
    .dark.buttons
    outlined.outlined.button
    SizesCombinators
    tiny.tiny.button
    .tiny.buttons
    mini.mini.button
    .mini.buttons
    small.small.button
    .small.buttons
    large.large.button
    .large.buttons
    huge.huge.button
    .huge.buttons
    StatesCombinators
    active.active.button
    inactive.inactive.button
    disabled.disabled.button
    block.block.button
    .block.buttons
    vertical.vertical.buttons
    preloader.preloader.button
    DropdownCombinators
    dropdown.dropdown
    .buttons > dropdown
    right.right.dropdown
    left.left.dropdown
    top.top.dropdown
    bottom.bottom.dropdown
    toggle.dropdown > .button.toggle
    clickable.clickable.dropdown
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/caption/index.html b/modules/caption/index.html new file mode 100644 index 00000000..683f9891 --- /dev/null +++ b/modules/caption/index.html @@ -0,0 +1,402 @@ + + + + + + + Caption - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Caption +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Caption +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Caption module highlights short, descriptive text with a large font size and a supporting image or icon. It provides a clean, visually appealing way to emphasize key information. Just add the .caption class to a span or div element to create a caption.
    +
    +
    +
    +
    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga delectus + commodi illo dolore, officia ratione? +
    +
    +
    + +
    + + +
    +
    + Sizes of Caption +
    +
    +
    +

    Add the .small or .large class to a caption to make it smaller or larger. +

    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga delectus + commodi illo dolore, officia ratione? +
    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga delectus + commodi illo dolore, officia ratione? +
    +
    +
    + +
    + + +
    + + Divided Modifier + +
    +
    +
    + Lorem ipsum, dolor sit amet... +
    +
    +
    + +
    + + +
    + + Media Items in Caption + +
    +
    +
    + toys Lorem ipsum, dolor sit amet consectetur + adipisicing elit. Fuga delectus + commodi illo dolore, officia ratione? +
    +
    +
    +
    + Lorem + ipsum, dolor sit + amet + consectetur. +
    +
    +
    + +
    + + +
    +
    + Centered Modifier +
    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Fuga + delectus commodi illo dolore, officia ratione? +
    +
    +
    +
    + flutter_dash Lorem ipsum, dolor sit amet + consectetur + adipisicing elit.
    Fuga delectus commodi illo dolore, officia + ratione? +
    +
    +
    +
    + Lorem + ipsum, dolor sit amet consectetur adipisicing elit.
    Fuga delectus commodi illo dolore, officia + ratione? +
    +
    +
    + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    caption.caption
    divided.caption.divided
    centered.caption.centered
    SizesCombinators
    small.caption.small
    large.caption.large
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/card/index.html b/modules/card/index.html new file mode 100644 index 00000000..b4f0938f --- /dev/null +++ b/modules/card/index.html @@ -0,0 +1,695 @@ + + + + + + + Card - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Card +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Card +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Card module is a flexible and modular container for displaying content. It typically includes elements like a title/subtitle, image, description, and actions section, but can be customized to suit various needs. Cards are perfect for organizing information in a visually appealing and consistent layout.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    Title
    +
    Subtitle
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat. +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + Multi-Card +
    +
    +
    + You can define any number of cards per row based on your preference. The default system supports a maximum of 11 cards per row (ranging from 2 to 12). In the example below, three cards fit in the first row, while the fourth card dynamically moves to the second row. Additionally, card groups automatically apply flex styles to ensure cards in the same row have matching heights. +
    +
    +
    +
    +
    +
    First Card
    +
    Card Subtitle
    +
    +
    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero saepe assumenda, + impedit veniam unde dolorem. +
    +
    +
    +
    +
    Second Card
    +
    Card Subtitle
    +
    +
    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, repudiandae neque obcaecati quae temporibus autem. +
    +
    +
    +
    +
    Third Card
    +
    Card Subtitle
    +
    +
    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. +
    +
    +
    +
    +
    Fourth Card
    +
    Yep, i'm in the second row
    +
    +
    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero. +
    +
    +
    +
    +
    + +
    +
    +
    + Multi-Image +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + +
    +
    +
    Card Title
    +
    Card Subtitle
    +
    +
    + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos eos odio vero saepe assumenda, + impedit veniam unde dolorem. +
    +
    +
    +
    + person An Item +
    +
    + email A Second Item +
    +
    + notifications_active A Third + Item +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + Hovered Card +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    Title
    +
    Subtitle
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat. +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + Zoom-in Effect for Media +
    +
    +
    +
    +
    + + + +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    + Horizontal Cards +
    +
    +
    +

    + Just add the .horizontal class to .card container class. +

    +
    +
    +
    +
    + +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere vim. +

    + +
    + + + +
    +
    +
    +
    +
    +
    +
    + .title, .subtitle and .description classes should be used in + .body container class for horizontal cards. +
    + +
    +
    +
    +
    +
    +
    Multi-Image
    +
    Punica CSS Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere vim, et vel aeque + vitae + abhorreant. +

    + +
    + + + +
    +
    +
    +
    + + + + + + + + + + + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + check +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    cards.cards
    card.card
    .cards > .card
    media.card > .media
    title.card > .title
    .horizontal.card > .body .title
    subtitle.card > .title > .subtitle
    .horizontal.card > .body .title > + .subtitle +
    description.card > .description
    .horizontal.card > .body .description
    actions.card > .actions
    body (only for horizontal card).horizontal.card > .body
    StatesCombinators
    horizontal.horizontal.card
    hovered.hovered.cards
    .hovered.card
    zoom-in.card > .zoom-in.media
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/form/index.html b/modules/form/index.html new file mode 100644 index 00000000..9431e1ae --- /dev/null +++ b/modules/form/index.html @@ -0,0 +1,780 @@ + + + + + + + Form - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Form +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Form +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Form module in Punica CSS Framework offers a robust and flexible structure for creating user input elements, including text fields, checkboxes, radio buttons, and dropdowns. With support for customization and validation, it ensures an intuitive and accessible user experience.
    +
    +
    +
    +
    +
    + + +
    +
    +
    + + + This is my description +
    +
    +
    + +
    + +
    + + +
    + Form Items +
    +
    +

    + Form inputs in Punica are designed to adapt seamlessly to your form's layout requirements. You can specify a custom column count per row, with the default system supporting up to five items. For instance, using the .three.items classes will arrange three items in the first row, with the fourth item automatically flowing to the second row. This flexibility ensures clean and organized form layouts. +

    +
    +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    +
    +
    +
    + +
    + + +
    + Validation Feedbacks +
    +
    + You can indicate the validation state of form fields using the .error, .warning, or .success classes. Simply add the appropriate class to the input, textarea, or select elements to reflect the desired validation state. +
    +
    +
    +
    +
    + + + Valid name +
    +
    + + + Invalid item +
    +
    + + + Invalid name +
    + +
    +
    +
    +
    + +
    + + +
    + Form Groups +
    +
    + You can group form elements such as select, input, or button together with an input field. To apply this, add the .group class to a container within the .item wrapper. +
    +
    +
    +
    + +
    + + + +
    + This is my description +
    +
    +
    +
    + +
    + + +
    + Sizes of Input +
    +
    +

    + Add the .small or .large class to .form class to make it smaller or + larger + inputs or buttons. +

    +
    +
    + +
    + + + + + +
    +
    +
    +
    +
    + +
    + + + + + +
    +
    +
    +
    +
    + +
    + + +
    + Checkbox & Radio +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    Two Items
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    Four Items
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    +
    +
    Using Utilities
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    Using Utilities
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    form.form
    items.form > .items
    item.form > .item
    .form > .items >.item
    checkbox.form > .item > .checkbox
    .form > .items >.item > .checkbox
    radio.form > .item > .radio
    .form > .items >.item > .radio
    group.form > .item > .group
    .form > .items >.item > .group
    SizesCombinators
    small.small.form
    large.large.form
    ValidationsCombinators
    success.success
    warning.warning
    error.error
    Max Items (2 through 6)Combinators
    two.two.items
    three.three.items
    four.four.items
    five.five.items
    six.six.items
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/grid/index.html b/modules/grid/index.html new file mode 100644 index 00000000..ac0fa3c3 --- /dev/null +++ b/modules/grid/index.html @@ -0,0 +1,526 @@ + + + + + + + Grid - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Grid +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Grid +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Grid module in Punica utilizes the capabilities of CSS Grid to deliver a responsive and versatile layout system. With support for up to 16 columns and offset functionality, it offers precise control over content placement and alignment. Perfect for modern and structured designs, the Grid module ensures consistency and adaptability across all screen sizes.
    +
    +
    +
    +
    +
    +
    +
    +

    CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can + handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

    + CSS-Tricks +
    +
    +
    +
    +
    +
    1
    +
    15
    +
    2
    +
    14
    +
    3
    +
    13
    +
    4
    +
    12
    +
    5
    +
    11
    +
    6
    +
    10
    +
    7
    +
    9
    +
    8
    +
    8
    +
    9
    +
    7
    +
    10
    +
    6
    +
    11
    +
    5
    +
    12
    +
    4
    +
    13
    +
    3
    +
    14
    +
    2
    +
    15
    +
    1
    +
    16
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    PropsValue
    Grid Size16
    Gap6px
    NameDefault Class Name
    Row.row
    Container.container
    .container-{*}
    Column.col-{*}
    .col-{*}-{*}
    Offset.offset-{*}-{*}
    Equal Height.equal
    BreakpointsDefault classViewportContainers
    Extra Small.col-xs-{*}--
    Small.col-sm-{*}500pxcontainer-sm
    Medium.col-md-{*}768pxcontainer-md
    Large.col-lg-{*}992pxcontainer-lg
    Extra Largecol-xl-{*}1260pxcontainer-xl
    Extra Extra Largecol-xxl-{*}1400pxcontainer-xxl
    +
    +
    + +
    +
    +
    Standard Columns
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. +
    +
    col-4
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes + vulputate, sed cibo incorrupte ad, no nam atqui accusam. +
    +
    col-4
    +
    +
    +
    + +
    +
    +
    Responsive Columns
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. +
    +
    col-lg-4
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes + vulputate, sed cibo incorrupte ad, no nam atqui accusam. +
    +
    col-lg-4
    +
    +
    +
    + +
    +
    +
    Equal Height
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. +
    +
    col-4
    +
    + Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi + nonumes + vulputate, sed cibo incorrupte ad, no nam atqui accusam. +
    +
    col-4
    +
    +
    +
    + +
    +
    +
    + Offset +
    +
    +
    + Punica CSS Framework's Grid system supports up to 16 columns and includes an offset feature with responsive flexibility. Offset classes, such as offset-sm-{*}, offset-md-{*}, offset-lg-{*}, offset-xl-{*}, and offset-xxl-{*}, allow you to create empty spaces within the grid at different breakpoints. This enables precise control over content alignment and spacing, ensuring adaptable and balanced layouts across various screen sizes. +
    +
    +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-lg-4 offset-lg-12 +
    +
    + col-md-4 offset-md-6 +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-sm-4 offset-sm-12 +
    +
    + col-lg-2
    offset-lg-2 +
    +
    + col-lg-2
    offset-lg-6 +
    +
    + col-lg-2
    offset-lg-10 +
    +
    + col-lg-2
    offset-lg-14 +
    +
    +
    +
    + +
    +
    +
    + Containers +
    +
    +
    + Punica CSS Framework's Grid system features flexible container classes—container-sm, container-md, container-lg, container-xl, and container-xxl—that provide responsive layout control. These containers ensure consistent alignment and structure, adapting seamlessly to different screen sizes while forming the foundation for Punica's Grid-based designs. +
    +
    +
    container-sm
    +
    container-md
    +
    container-lg
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/label/index.html b/modules/label/index.html new file mode 100644 index 00000000..5830ca55 --- /dev/null +++ b/modules/label/index.html @@ -0,0 +1,402 @@ + + + + + + + Label - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Label +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Label +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Label module is used to provide clear and concise descriptions or identifiers for tags or status indicators. It enhances usability and accessibility by associating text with specific UI elements. With flexible styling options, Labels can be easily customized to fit various designs and contexts. Just add the .label class to a span or div element to create a label.
    +
    +
    +
    +
    +
    +
    + Default +
    Primary
    +
    Success
    +
    Warning
    +
    Error
    +
    Dark
    +
    +
    + +
    +
    +
    + Sizes of Label +
    +
    +
    +

    Add the .small or .large class to a label to make it smaller or larger.

    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    StylesCombinators
    primary.primary.label
    success.success.label
    warning.warning.label
    error.error.label
    dark.dark.label
    SizesCombinators
    small.small.label
    large.large.label
    +
    + +
    +
    + Badge +
    +
    +
    + The Badge module is a small, attention-grabbing element used to display additional information or highlight specific content. Commonly used to indicate notifications, counts, or status labels, Badges are versatile and can be easily attached to buttons, icons, or other UI elements. With customizable styles and sizes, they seamlessly integrate into any design. Just add the .badge class to a span or div container element to create a badge. +
    +
    +
    0
    +
    25
    +
    Online
    +
    Pending
    +
    Offline
    +
    39
    +
    +
    + +
    +
    +
    + Sizes of Badge +
    +
    +
    +

    Add the .small or .large class to a badge to make it smaller or larger.

    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    StylesCombinators
    primary.primary.badge
    success.success.badge
    warning.warning.badge
    error.error.badge
    dark.dark.badge
    SizesCombinators
    small.small.badge
    large.large.badge
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/list/index.html b/modules/list/index.html new file mode 100644 index 00000000..a1d37cfe --- /dev/null +++ b/modules/list/index.html @@ -0,0 +1,630 @@ + + + + + + + List - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + List +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + List +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The List module is a versatile tool for organizing and displaying items in a structured and sequential manner. It supports both ordered and unordered formats and can include form elements or visuals alongside text for enhanced functionality and design. With customizable styles and layouts, the List module adapts seamlessly to various use cases. To apply this module, add the .list class to an unordered/ordered list or even div element. And also, use the .item class for each list items.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Unordered List +
    +
      +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    +
    +
    +
    + Ordered List +
    +
      +
    1. + Lorem ipsum dolor sit amet +
      2. +
    2. + Lorem ipsum dolor sit amet +
      3. +
    3. + Lorem ipsum dolor sit amet +
      4. +
    +
    +
    +
    + List Title +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    + +
    +
    +
    Striped, Divided, and Hovered List
    +
    +
    +

    + You can add the zebra-striping to a list by adding the .striped class and add the + .hovered class to display a hover state on list items. +

    +
    +
    +
    +
    + Striped List +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    + Hovered List +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    + Divided List +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    + +
    +
    List with inputs
    +
    +
    +

    + Lists can contain variety of form inputs. +

    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    Media List
    +
    +
    +

    + Also, Lists can contain variety of media elements and actions buttons. +

    +
    +
    +
    +
    + +
    + Title + Subtitle + Lorem ipsum dolor. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Title + Subtitle + Lorem ipsum dolor. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Title + Subtitle + Lorem ipsum dolor. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    HTML Lists
    +
    +
    +
    +
    +
    Unordered list
    +
      +
    • list item 1
      • +
    • list item 2 +
        +
      • list item 2.1
        • +
      • list item 2.2
        • +
      • list item 2.3
        • +
      +
      • +
    • list item 3
      • +
    +
    +
    +
    Ordered list
    +
      +
    1. list item 1
      2. +
    2. list item 2 +
        +
      1. list item 2.1
        2. +
      2. list item 2.2
        3. +
      3. list item 2.3
        4. +
      +
      3. +
    3. list item 3
      4. +
    +
    +
    +
    Description List
    +
    +
    Coffee
    +
    - black hot drink
    +
    Milk
    +
    - white cold drink
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    list.list
    item.list > .item
    active.list > .active.item
    body.list > .item > .body
    title.list > .item > .body > .title
    subtitle.list > .item > .body > .body
    actions.list > .item > .actions
    StatesCombinators
    divided.divided.list
    hovered.hovered.list
    striped.striped.list
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/menu/index.html b/modules/menu/index.html new file mode 100644 index 00000000..4401d9de --- /dev/null +++ b/modules/menu/index.html @@ -0,0 +1,372 @@ + + + + + + + Menu - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Menu +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Menu +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Menu module is designed to display navigation options or actions in a vertical layout. It enables easy organization of links or actions, and can include icons or Badge module for enhanced functionality. With helper classes, the Menu module can seamlessly integrates into a variety of designs. To apply this module, add a container element with the .menu class and add .item class for child elements.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Title
    +
    + + Active + +
    +
    + + Disabled + +
    + 63 +
    +
    +
    + + Item + +
    + 85 +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Divided Pure Small Menu
    +
    + + Item + +
    +
    + + Second Item + +
    + 63 +
    +
    +
    + + Last Item + +
    + 85 +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    menu.menu
    title.menu .title
    item.menu.item
    badge.menu .item .badge
    active.menu .item > a.active
    disabled.menu .disabled.item
    divided.divided.menu
    SizeCombinators
    small.small.menu
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/navbar/index.html b/modules/navbar/index.html new file mode 100644 index 00000000..2665587e --- /dev/null +++ b/modules/navbar/index.html @@ -0,0 +1,825 @@ + + + + + + + Navbar - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Navbar +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Navbar +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Navbar module is a flexible navigation bar that allows users to easily access different sections of a website or application. It typically includes links, branding, and optional elements like icons, search bars, or dropdowns. Each section with the .section class will be evenly distributed in the container. And the last .section item in the navbar will always to the right side.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + Punica CSS + +
    +
    +
    +
    +
    + + Item keyboard_arrow_down + + +
    +
    +
    +
    +
    + + person + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    + If you want a primary or dark style navbar, just add the .primary or .dark class + to .navbar. +

    +
    +
    +
    +
    +
    + + Primary + +
    +
    +
    +
    +
    + + Item keyboard_arrow_down + + +
    +
    +
    +
    +
    + + person + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + Dark + +
    +
    +
    +
    +
    + + Item keyboard_arrow_down + + +
    +
    +
    +
    +
    + + person + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + +
    + Sizes of Navbar +
    +
    +

    + Add the .mini, .small or .large class to a .navbar to + make it smaller. +

    +
    + +
    +
    +
    +
    + + Mini Navbar + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Small Navbar + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Large Navbar + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    + + +
    + Divided Navbar +
    +
    +
    +
    +
    + + Divided + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + Gradient Navbar +
    +
    +
    +
    +
    + + Gradient + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + Gradient LTR + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + Gradient RTL + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    navbar.navbar
    container.navbar > .container
    links.navbar > .links
    section.navbar > .links > .section
    buttons
    button    		.navbar > .links > .section > .buttons
    .navbar > .links > + .section > .button
    brand.brand
    dropdown.navbar > .links > .section > .buttons > .dropdown
    .navbar + > .links > .section > .dropdown
    divided.navbar > .links > .section.divided
    burger.burger
    Styles/StatesCombinators
    primary.primary.navbar
    dark.dark.navbar
    gradient.gradient.navbar
    gradient-ltr.gradient-ltr.navbar
    gradient-rtl.gradient-rtl.navbar
    fixed.fixed.navbar
    shadowed.shadowed.navbar
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SizesCombinatorsHeight (rem)Height (px)
    Default-5rem80px
    mini.mini.navbar2.813rem45px
    small.small.navbar4.063rem65px
    large.large.navbar5.938rem95px
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/panel/index.html b/modules/panel/index.html new file mode 100644 index 00000000..b477ecb3 --- /dev/null +++ b/modules/panel/index.html @@ -0,0 +1,519 @@ + + + + + + + Panel - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Panel +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Panel +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Panel module is a versatile container used to group and organize content into distinct sections. It includes a header, content area, and footer, and can be customized with elements like buttons, links, or forms. Panels are ideal for separating information or actions within a layout, helping to provide clarity and structure. To apply this module, just add the .panel class to a container element.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Title
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    + Actions +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    Sizes of Panel
    +
    +
    +

    Add the .mini or .small class to a panel to make it smaller or larger.

    +
    +
    +
    +
    + +
    +
    +
    Mini Panel
    +
    +
    +
    +
    +

    +
    +
    +
    +
    +
    + +
    +
    +
    Small Panel
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Panel Title
    +
    +
    + + launch + + + person + +
    +
    +
    +
    +
    + Lorem ipsum dolor sit amet, eu duo inermis vocibus similique, vix ei facer mediocrem. +
    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal integre est cu, sea + tacimates percipitur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. +

    +
    +
    + +
    +
    + +
    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil tempore adipisci saepe fugiat accusamus molestiae amet illo corrupti veritatis esse. Porro, officia quisquam officiis ut nulla aliquid velit eos dolor? +

    +
    +
    +
    Button
    +
    +
    + + launch + +
    + + keyboard_arrow_up + + +
    +
    +
    +
    +
    +
    +
    +
    + error +
    +

    + To remove border and shadow from the panel, just add the .pure helper class to + .panel container element. +

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    Panel with Media Elements
    +
    +
    +
    +
    +
    +
    +
    + +
    +

    Lorem ipsum dolor

    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal integre est cu, sea + tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend sadipscing + scriptorem. +

    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    + + + + + + + + + +
    +

    Lorem ipsum dolor

    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal integre est cu, sea + tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend sadipscing + scriptorem. +

    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    panel.panel
    header.panel > .header
    title.panel > .header > .title
    content.panel > .content
    headline.panel > .content > .headline
    media.panel > .content > .media
    bottom.panel > .bottom
    actions.panel > .bottom > .actions
    SizesCombinators
    mini.mini.panel
    small.small.panel
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/process/index.html b/modules/process/index.html new file mode 100644 index 00000000..56c6ede7 --- /dev/null +++ b/modules/process/index.html @@ -0,0 +1,462 @@ + + + + + + + Process - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Process +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Process +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Process module is used to visually represent a sequence of steps or stages in a process or workflow. It helps users easily follow the progression of tasks or actions, often with the use of numbered steps, icons, or progress indicators. The Process module can be customized to fit various design styles and is perfect for guiding users through multi-step tasks or processes. Add a container element with the .process class and add child elements with the .item class. Also through the .active or .failed class will be highlighted items and indicate the current state of process.
    +
    +
    +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    + +
    +
    +
    + Failed Process +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    + Vertical Process +
    +
    +
    +

    + Also, just add the .vertical class to .process to make it vertical style. +

    +
    + Vertical style is also used for mobile devices. +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + Reversed Vertical Process +
    +
    +
    +

    + And also, you can reverse the items of process using by .reversed class. +

    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    process.process
    item.process .item
    active.process .active.item
    failed.process .failed.item
    PositionsCombinators
    vertical.vertical.process
    reversed (only for vertical position).reversed.vertical.process
    StylesCombinators
    success.success.process
    warning.warning.process
    error.error.process
    dark.dark.process
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/stats/index.html b/modules/stats/index.html new file mode 100644 index 00000000..1ded37c3 --- /dev/null +++ b/modules/stats/index.html @@ -0,0 +1,426 @@ + + + + + + + Stats - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Stats +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Stats +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Stats module is designed to display key information in a visually engaging format. It includes a title, subtitle, and value sections, and supports the use of icons or images for enhanced presentation. Ideal for showcasing statistics, metrics, or important data, the Stats module can be customized to fit various design needs. Add the .stats class to a container to make a status/statistic bar.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Title
    +
    Value
    +
    This is a subtitle.
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + Styles +
    +
    +
    + +
    Primary style
    +
    46,6K
    +
    This is a subtitle.
    +     +
    +
    Success style
    +
    + redeem 83K +
    +
    This is a subtitle.
    +
    +
    +
    Warning style
    +
    + surfing 7K +
    +
    This is a subtitle.
    +
    +
    +
    Error style
    +
    + beenhere 3.765 +
    +
    This is a subtitle.
    +
    +
    +
    Dark style
    +
    + ads_click 549 +
    +
    This is a subtitle.
    +
    +
    +
    Stats with Photo
    +
    + 15K +
    +
    This is a subtitle.
    +
    +
    +
    + +
    +
    +
    + Using Helpers +
    +
    +
    +
    +
    Borderless Stats
    +
    + shopping_cart 16 +
    +
    This is a subtitle.
    +
    +
    +
    Centered Stats
    +
    + view_in_ar 9k +
    +
    This is a subtitle.
    +
    +
    +
    Shadowed Stats
    +
    + pets 234 +
    +
    This is a subtitle.
    +
    +
    +
    Disabled Stats
    +
    + flutter_dash 234 +
    +
    This is a subtitle.
    +
    + +
    +
    Full width
    +
    + webhook 9k +
    +
    This is a subtitle.
    +
    + +
    +
    +
    +
    Dotted Border
    +
    + coronavirus 2px +
    +
    This is a subtitle.
    +
    +
    +
    +
    +
    Dashed Border
    +
    + hive 2px +
    +
    This is a subtitle.
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    stats.stats
    title.stats > .title
    value.stats > .value
    subtitle.stats > .subtitle
    StylesCombinators
    primary.primary.stats
    success.success.stats
    warning.warning.stats
    error.error.stats
    dark.dark.stats
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/table/index.html b/modules/table/index.html new file mode 100644 index 00000000..2a99de6a --- /dev/null +++ b/modules/table/index.html @@ -0,0 +1,529 @@ + + + + + + + Table - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Table +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Table +

    +
    +
    +
    + Source + API +
    +
    +
    +
    Just add the .table class to any table module. The class will add padding, border and emphasized table header.
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeaderHeaderHeader
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    table.table
    striped.table.striped
    hovered.table.hovered
    active.table > tr.active
    +
    +
    +
    + Table with Caption +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Caption
    HeaderHeaderHeader
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + +
    + +
    +
    + Hovered Tables +
    +
    +
    +

    + Add the .hovered class to display a hover state on table rows. +

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeaderHeaderHeader
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    +
    +
    + +
    + + +
    +
    + Striped Tables +
    +
    +
    +

    + Add zebra-striping to a table by adding the .striped class. +

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeaderHeaderHeader
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    +
    +
    + +
    + + +
    +
    + Active Table Row +
    +
    +
    +

    + Just add the .active class to any tr element in table. +

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    HeaderHeaderHeader
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    ActiveTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/tabnav/index.html b/modules/tabnav/index.html new file mode 100644 index 00000000..e58f2da6 --- /dev/null +++ b/modules/tabnav/index.html @@ -0,0 +1,447 @@ + + + + + + + Tabnav - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Tabnav +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Tabnav +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Tabnav module in the Punica CSS Framework offers a straightforward and stylish tabbed interface design. Similar to the Navbar module, it consists entirely of button elements. To create a tabbed navigation, simply add the .tab class to a container element, which will organize the buttons into a cohesive tab layout.
    +
    +
    +
    +
    +
    +
    +
    +
    Item
    +
    Active 45
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    +
    +
    + Bottom Position +
    +
    +
    +
    +
    Item
    +
    Active
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_up + + +
    +
    +
    +
    +
    + +
    + + +
    +
    + Centered Tabs +
    +
    +
    +
    + + panorama_wide_angle + + + edit_location_alt + + + mail + + + shopping_cart + +
    +
    +
    +
    +
    Email
    +
    Notifications 45
    +
    Privacy
    +
    Account Info
    +
    +
    +
    + +
    + + +
    + Using helpers +
    +
    +
    +
    +
    Item
    +
    Active 45
    +
    Disabled
    +
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    tab.tab
    button.tab > .buttons > .button
    .tab > .button
    active.tab > .active.button
    bottom.bottom.tab
    StylesCombinators
    success.success.tab
    warning.warning.tab
    error.error.tab
    dark.dark.tab
    SizesCombinators
    small.small.tab
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/timeline/index.html b/modules/timeline/index.html new file mode 100644 index 00000000..391dae47 --- /dev/null +++ b/modules/timeline/index.html @@ -0,0 +1,467 @@ + + + + + + + Timeline - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Timeline +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Timeline +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Timeline module is used to display a sequence of events or milestones in chronological order. It can be customized with various styles, images, videos, and icons to enhance clarity and engagement. To apply this module, add a container element with the .timeline class and add .item class for child elements.
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + lock +
    +
    12.12.2020
    +
    John Doe,
    +
    + Te vidisse cotidieque est, in adhuc honestatis his. +
    +
    +
    +
    + wifi_protected_setup +
    +
    + Jane Doe aliquid consequat + debitis eos. +
    +
    +
    +
    + extension +
    +
    John Doe,
    +
    + Oeehhh, that's awesome.. Me too! +
    +
    12.12.2020
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + Media & Actions +
    +
    +
    +

    + Also, you can add the media elements or actions to Timeline module with the .media and + .actions classes. +

    +
    +
    +
    +
    +
    + photo +
    +
    Single Photo
    +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis + ut ullum hendrerit. +
    +
    2 weeks ago
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + play_arrow +
    + Youtube Video +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. + Omnes voluptaria ea nam, vis ut ullum hendrerit. +
    +
    2 hours ago
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + photo +
    +
    Three Photo Columns
    +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis + ut ullum hendrerit. +
    +
    2 weeks ago
    +
    +
    + +
    +
    + +
    + + + + + + + + + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    timeline.timeline
    item.timeline .item
    author.timeline .item .author
    body.timeline .item .body
    type.timeline .item .type
    date.timeline .item .date
    media.timeline .item .media
    actions.timeline .item .actions
    StyleCombinators
    primary.primary.type
    success.success.type
    warning.warning.type
    error.error.type
    dark.dark.type
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/modules/tooltip/index.html b/modules/tooltip/index.html new file mode 100644 index 00000000..5bafff7d --- /dev/null +++ b/modules/tooltip/index.html @@ -0,0 +1,332 @@ + + + + + + + Tooltip - Punica CSS Framework v3 + + + + + + +
    +
    +
    + + + + + +
    + + Punica CSS v3 + +
    + +
    +
    +
    + Modules + Utilities + API Docs +
    +
    +
    +
    +
    + + Preview keyboard_arrow_down + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Modules
    + Tooltip +
    +
    +
    +
  • + + Alert + +
    • +
  • + + Breadcrumb + +
    • +
  • + + Button + +
    • +
  • + + Caption + +
    • +
  • + + Card + +
    • +
  • + + Form + +
    • +
  • + + Grid + +
    • +
  • + + Label + +
    • +
  • + + List + +
    • +
  • + + Menu + +
    • +
  • + + Navbar + +
    • +
  • + + Panel + +
    • +
  • + + Process + +
    • +
  • + + Stats + +
    • +
  • + + Table + +
    • +
  • + + Tabnav + +
    • +
  • + + Timeline + +
    • +
  • + + Tooltip + +
    • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Tooltip +

    +
    +
    +
    + Source + API +
    +
    +
    +
    The Tooltip module provides additional information when a user hovers over on an element. It is ideal for offering brief descriptions, tips, or clarifications without cluttering the layout. Tooltips can be customized in terms of content, style, and positioning to fit various design needs. Just add the .tooltip class to a span, button or div element to create a tooltip.
    +
    +
    +
    +
    +
    +
    + + Button + Hello World! + +
    + Long Text + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + +
    +
    + Text + Hello World! +
    +
    +
    + +
    + +
    + Directions of Tooltip +
    +
    +

    + You can change the direction of the tooltip by adding any .right, .left and + .top classes to .tooltip container. +

    + + Left + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + Top + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + + + Right + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + + +
    +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Props
    Default Class NameCombinators
    tooltip.tooltip
    text.tooltip > .text
    DirectionsCombinators
    left.left.tooltip
    right.right.tooltip
    top.top.tooltip
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + diff --git a/package.json b/package.json deleted file mode 100644 index 60a37542..00000000 --- a/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "Punica-CSS-Framework", - "description": "Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support.", - "version": "2.8.20", - "homepage": "http://www.punicacss.com/", - "author": "CodeForms (https://github.com/codeforms)", - "license": "MIT", - "keywords": [ - "css", "framework", "sass", "responsive", "customizable", "multi-theme" - ], - "scripts": { - "prod": "sass src/punica.scss dist/punica.min.css --no-source-map --style compressed", - "unminify": "sass src/punica.scss dist/punica.css --no-source-map", - "watch": "npm run prod -- -w" - }, - "dependencies": { - "dart-sass": "^1.25.0" - } -} diff --git a/preview/dark/index.html b/preview/dark/index.html new file mode 100644 index 00000000..ad2f3179 --- /dev/null +++ b/preview/dark/index.html @@ -0,0 +1,2155 @@ + + + + + Default Dark Theme - Punica CSS Framework v3 + + + + + + + +
    +
    + + + + + + +
    + + Punica CSS Framework + +
    +
    +
    +
    + Item +
    + + Dropdown keyboard_arrow_down + + +
    + Active +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + Dropdown keyboard_arrow_down + + +
    +
    + Button +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + Welcome To +
    +
    + Punica CSS v3 +
    +
    +
    +

    + Punica CSS Framework is a clean, lightweight, responsive, modern, + and fully customizable API-driven framework built with + SASS/SCSS, + offering multi-theme support. +

    +

    + View on Github +

    +
    +
    +
    + Default Dark Theme +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    InfoDefault Variable
    Font Family + + Inter Tight + +
    Font Size1rem
    Font Weight500
    Line Height1.7
    +
    +
    + + +
    +
    + Grid +
    +
    +
    +
    +
    1
    +
    15
    +
    2
    +
    14
    +
    3
    +
    13
    +
    4
    +
    12
    +
    5
    +
    11
    +
    6
    +
    10
    +
    7
    +
    9
    +
    8
    +
    8
    +
    9
    +
    7
    +
    10
    +
    6
    +
    11
    +
    5
    +
    12
    +
    4
    +
    13
    +
    3
    +
    14
    +
    2
    +
    15
    +
    1
    +
    16
    +
    +
    +
    +
    +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-lg-4 offset-lg-12 +
    +
    + col-md-4 offset-md-6 +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-sm-4 offset-sm-12 +
    +
    + col-lg-2
    offset-lg-2 +
    +
    + col-lg-2
    offset-lg-6 +
    +
    + col-lg-2
    offset-lg-10 +
    +
    + col-lg-2
    offset-lg-14 +
    +
    +
    +
    + + +
    +
    + Typography +
    +
    +
    +
    +

    Heading H1

    +

    Heading H2

    +

    Heading H3

    +

    Heading H4

    +
    Heading H5
    +
    Heading H6
    +
    +
    +

    Example Title

    +

    + Lorem ipsum dolor sit amet, quo in nibh mediocritatem concludaturque. Aeque consectetuer nam + ut, ad appetere ocurreret mea. Nec an facilis torquatos. Pro te ferri + democritum inciderint. +

    +

    + Quis inani virtute vim cu, ad debet tincidunt mea. Audire mentitum deleniti has ex, + sea veri omnis ut. Pri eu enim prodesset abhorreant. +

    +
    +
    +
    +
    +

    Learning never exhausts the mind.

    + - Leonardo da Vinci +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Table
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    This is my table caption
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Active Table RowTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    +
    +
    + + +
    +
    +
    HTML Lists
    +
    +
    +
    +
    +
    Unordered list
    +
      +
    • list item 1
      • +
    • list item 2 +
        +
      • list item 2.1
        • +
      • list item 2.2
        • +
      • list item 2.3
        • +
      +
      • +
    • list item 3
      • +
    +
    +
    +
    Ordered list
    +
      +
    1. list item 1
      2. +
    2. list item 2 +
        +
      1. list item 2.1
        2. +
      2. list item 2.2
        3. +
      3. list item 2.3
        4. +
      +
      3. +
    3. list item 3
      4. +
    +
    +
    +
    Description List
    +
    +
    Coffee
    +
    - black hot drink
    +
    Milk
    +
    - white cold drink
    +
    +
    +
    +
    +
    + + +
    +
    +
    Form
    +
    +
    +
    +
    +
    +
    + + + This is my description +
    + +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + +
    + +
    + + + +
    + This is my description +
    +
    + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit +
    +
    + + + This is my description +
    +
    +
    +
    +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + Navbar +
    + +
    +
    +
    +
    + + Mini + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Small + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Primary + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + deployed_code + + + settings + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Dark + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    +
    + + +
    +
    + Buttons +
    +
    +
    +
    +
    +
    +
    Default
    +
    Active
    +
    Disabled
    +
    Inactive
    +
    Preloader
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + Tiny + Mini + Small + Default + Large + Huge +

    + Block Button +
    +
    +
    + + Button + + + Button + + + Button + +
    +
    +
    +
    + + + Button + + +
    +
    +
    +
    +
    + + Default Dropdown keyboard_arrow_down + + +
    +
    +
    +
    + + Clickable Dropdown keyboard_arrow_down + + +
    +
    +
    +
    Small Dropdown
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    + drafts Mini +
    +
    254
    +
    + + keyboard_arrow_up + + +
    +
    +
    + + edit + + + clear + +
    +
    +
    + + keyboard_arrow_up + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    +
    + + keyboard_arrow_left + + 1 + 2 + 3 + + ... + + 56 + 57 + 58 + + keyboard_arrow_right + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    + +
    + + keyboard_arrow_left + verified_user + + +
    +
    + + settings keyboard_arrow_right + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Menu
    +
    +
    +
    +
    +
    +
    Menu
    +
    + + Active Menu Item + +
    +
    + + Disabled Menu Item + +
    + 63 +
    +
    +
    + + Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Divided Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Pure Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Pure Small Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    Panel
    +
    +
    +
    +
    +
    Title
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    + Actions +
    +
    +
    + +
    +
    +
    +
    +
    Mini Panel
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    Actions
    +
    +
    +
    +
    +
    +
    +
    Small Panel
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    Actions
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    Panel with Media
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal + integre est cu, sea tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend + sadipscing scriptorem. +

    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Pure Panel with Photos
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal + integre est cu, sea tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend + sadipscing scriptorem. +

    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Card
    +
    +
    +
    +
    +
    + +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo velit debitis eos. +
    +
    +
    + + +
    +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo velit debitis eos. +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo + velit debitis eos.Te vidisse cotidieque est, in adhuc honestatis his. Vel et clita + oporteat, nam in + quaeque ocurreret. +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo + velit debitis eos.Te vidisse cotidieque est, in adhuc honestatis his. Vel et clita + oporteat, nam in + quaeque ocurreret. +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere + vim, et vel aeque + vitae + abhorreant. Id simul omnesque efficiantur pro. +

    + +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere + vim, et vel aeque vitae abhorreant. Id simul omnesque efficiantur pro. +

    + +
    + + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Process
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    + + +
    +
    +
    Tabnav
    +
    +
    +
    +
    Item
    +
    Active 45
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    +
    Item
    +
    Active
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_up + + +
    +
    +
    +
    +
    +
    + + panorama_wide_angle + + + edit_location_alt + + + mail + + + shopping_cart + +
    +
    +
    +
    +
    Email
    +
    Notifications 45 +
    +
    Privacy
    +
    Account Info
    +
    +
    +
    + + +
    +
    +
    Timeline
    +
    +
    +
    +
    +
    +
    +
    + lock +
    +
    12.12.2020
    +
    John Doe,
    +
    + Te vidisse cotidieque est, in adhuc honestatis his. +
    +
    +
    +
    + lock +
    +
    12.12.2020
    +
    Jane Doe,
    +
    + Te vidisse cotidieque est, in adhuc honestatis his. +
    +
    +
    +
    + wifi_protected_setup +
    +
    + Jane Doe aliquid consequat + debitis eos. +
    +
    +
    +
    + extension +
    +
    John Doe,
    +
    + Oeehhh, that's awesome.. Me too! +
    +
    12.12.2020
    +
    +
    +
    + build +
    +
    Jane Doe,
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata! +
    +
    12.12.2020
    +
    +
    +
    + build +
    +
    John Doe,
    +
    + Random words in front of other random words create a random sentence. +
    +
    12.12.2020
    +
    +
    +
    +
    +
    +
    +
    + play_arrow +
    + Youtube Video +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum + hendrerit. +
    +
    2 hours ago
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + photo +
    +
    Two Photo Columns
    +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes + voluptaria ea nam, vis ut ullum hendrerit. +
    +
    2 weeks ago
    +
    +
    + +
    + + + + + + + + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Caption
    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    +
    + + +
    +
    +
    Breadcrumb
    +
    +
    +
    + Punica + Components + Breadcrumb +

    +
    + Punica + Components + Breadcrumb +

    +
    + Punica + Components + Breadcrumb +
    +
    +
    + + +
    +
    +
    Alert
    +
    +
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + + +
    +
    +
    Label
    +
    +
    + Default +
    Primary
    +
    Success
    +
    Warning
    +
    Error
    +
    Dark
    +
    +
    + Small + Default + Large +
    +
    + + +
    +
    +
    Badge
    +
    +
    +
    12
    +
    75
    +
    336
    +
    89567
    +
    59
    +
    549
    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + + +
    +
    +
    Stats
    +
    +
    + +
    Primary style
    +
    46,6K
    +
    This is a subtitle.
    +     +
    +
    Success style
    +
    + redeem 83K +
    +
    This is a subtitle.
    +
    +
    +
    Warning style
    +
    + surfing 7K +
    +
    This is a subtitle.
    +
    +
    +
    Error style
    +
    + beenhere 3.765 +
    +
    This is a subtitle.
    +
    +
    +
    Dark style
    +
    + ads_click 549 +
    +
    This is a subtitle.
    +
    +
    +
    Stats with Photo
    +
    + 15K +
    +
    This is a subtitle.
    +
    +
    +
    + + +
    +
    +
    Tooltip
    +
    +
    +
    +
    Button
    + Hello World! +
    +
    + Long Text + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + +
    +
    + Text + Hello World! +
    +
    +
    +
    +
    Left
    + Hello World! +
    +
    +
    Top
    + Hello World! +
    +
    +
    Right
    + Hello World! +
    +
    +
    + + +
    +
    +
    List
    +
    +
    +
    +
    +
      +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    +
    +
    +
    +
    + Divided List +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Striped List +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    + Hovered List +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + diff --git a/preview/default/index.html b/preview/default/index.html new file mode 100644 index 00000000..d97eb78b --- /dev/null +++ b/preview/default/index.html @@ -0,0 +1,2155 @@ + + + + + Default Theme - Punica CSS Framework v3 + + + + + + + +
    +
    + + + + + + +
    + + Punica CSS Framework + +
    +
    +
    +
    + Item +
    + + Dropdown keyboard_arrow_down + + +
    + Active +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + Dropdown keyboard_arrow_down + + +
    +
    + Button +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + Welcome To +
    +
    + Punica CSS v3 +
    +
    +
    +

    + Punica CSS Framework is a clean, lightweight, responsive, modern, + and fully customizable API-driven framework built with + SASS/SCSS, + offering multi-theme support. +

    +

    + View on Github +

    +
    +
    +
    + Default Theme +
    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    InfoDefault Variable
    Font Family + + Inter Tight + +
    Font Size1rem
    Font Weight400
    Line Height1.7
    +
    +
    + + +
    +
    + Grid +
    +
    +
    +
    +
    1
    +
    15
    +
    2
    +
    14
    +
    3
    +
    13
    +
    4
    +
    12
    +
    5
    +
    11
    +
    6
    +
    10
    +
    7
    +
    9
    +
    8
    +
    8
    +
    9
    +
    7
    +
    10
    +
    6
    +
    11
    +
    5
    +
    12
    +
    4
    +
    13
    +
    3
    +
    14
    +
    2
    +
    15
    +
    1
    +
    16
    +
    +
    +
    +
    +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-lg-4 offset-lg-12 +
    +
    + col-md-4 offset-md-6 +
    +
    + col-lg-4 offset-lg-2 +
    +
    + col-sm-4 offset-sm-12 +
    +
    + col-lg-2
    offset-lg-2 +
    +
    + col-lg-2
    offset-lg-6 +
    +
    + col-lg-2
    offset-lg-10 +
    +
    + col-lg-2
    offset-lg-14 +
    +
    +
    +
    + + +
    +
    + Typography +
    +
    +
    +
    +

    Heading H1

    +

    Heading H2

    +

    Heading H3

    +

    Heading H4

    +
    Heading H5
    +
    Heading H6
    +
    +
    +

    Example Title

    +

    + Lorem ipsum dolor sit amet, quo in nibh mediocritatem concludaturque. Aeque consectetuer nam + ut, ad appetere ocurreret mea. Nec an facilis torquatos. Pro te ferri + democritum inciderint. +

    +

    + Quis inani virtute vim cu, ad debet tincidunt mea. Audire mentitum deleniti has ex, + sea veri omnis ut. Pri eu enim prodesset abhorreant. +

    +
    +
    +
    +
    +

    Learning never exhausts the mind.

    + - Leonardo da Vinci +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Table
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    This is my table caption
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    Table DataTable DataTable Data
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table HeadingTable HeadingTable Heading
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Active Table RowTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    Table DataTable DataTable Data +
    + + edit + + + delete + +
    +
    +
    +
    + + +
    +
    +
    HTML Lists
    +
    +
    +
    +
    +
    Unordered list
    +
      +
    • list item 1
      • +
    • list item 2 +
        +
      • list item 2.1
        • +
      • list item 2.2
        • +
      • list item 2.3
        • +
      +
      • +
    • list item 3
      • +
    +
    +
    +
    Ordered list
    +
      +
    1. list item 1
      2. +
    2. list item 2 +
        +
      1. list item 2.1
        2. +
      2. list item 2.2
        3. +
      3. list item 2.3
        4. +
      +
      3. +
    3. list item 3
      4. +
    +
    +
    +
    Description List
    +
    +
    Coffee
    +
    - black hot drink
    +
    Milk
    +
    - white cold drink
    +
    +
    +
    +
    +
    + + +
    +
    +
    Form
    +
    +
    +
    +
    +
    +
    + + + This is my description +
    + +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + +
    + +
    + + + +
    + This is my description +
    +
    + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit +
    +
    + + + This is my description +
    +
    +
    +
    +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    + + + This is my description +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + Navbar +
    + +
    +
    +
    +
    + + Mini + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Small + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + person + + + settings + +
    + Signin +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Primary + +
    +
    +
    +
    + Home +
    + + Features keyboard_arrow_down + + +
    + Pricing +
    +
    +
    +
    + + deployed_code + + + settings + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + Dark + +
    +
    +
    +
    + Developers +
    + + Documentation keyboard_arrow_down + + +
    + + person + +
    + Signin +
    +
    +
    +
    +
    +
    + + +
    +
    + Buttons +
    +
    +
    +
    +
    +
    +
    Default
    +
    Active
    +
    Disabled
    +
    Inactive
    +
    Preloader
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + +
    Outlined
    + Active +
    Disabled
    +
    Inactive
    +
    Rounded
    +
    +
    + Tiny + Mini + Small + Default + Large + Huge +

    + Block Button +
    +
    +
    + + Button + + + Button + + + Button + +
    +
    +
    +
    + + + Button + + +
    +
    +
    +
    +
    + + Default Dropdown keyboard_arrow_down + + +
    +
    +
    +
    + + Clickable Dropdown keyboard_arrow_down + + +
    +
    +
    +
    Small Dropdown
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    + drafts Mini +
    +
    254
    +
    + + keyboard_arrow_up + + +
    +
    +
    + + edit + + + clear + +
    +
    +
    + + keyboard_arrow_up + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    254
    +
    + drafts +
    +
    +
    +
    +
    + + keyboard_arrow_left + + 1 + 2 + 3 + + ... + + 56 + 57 + 58 + + keyboard_arrow_right + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    + +
    + + keyboard_arrow_left + verified_user + + +
    +
    + + settings keyboard_arrow_right + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Menu
    +
    +
    +
    +
    +
    +
    Menu
    +
    + + Active Menu Item + +
    +
    + + Disabled Menu Item + +
    + 63 +
    +
    +
    + + Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Divided Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Pure Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    +
    +
    Pure Small Menu
    +
    + + person My profile + +
    +
    + + email Mail + +
    + 63 +
    +
    +
    + + notifications_active Notifications + +
    + 85 +
    +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    Panel
    +
    +
    +
    +
    +
    Title
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    + Actions +
    +
    +
    + +
    +
    +
    +
    +
    Mini Panel
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    Actions
    +
    +
    +
    +
    +
    +
    +
    Small Panel
    +
    Actions
    +
    +
    +
    + Headline +
    +

    Content

    +
    +
    + Bottom +
    Actions
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    Panel with Media
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal + integre est cu, sea tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend + sadipscing scriptorem. +

    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Pure Panel with Photos
    +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal + integre est cu, sea tacimates + percipitur adversarium ei, + justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend + sadipscing scriptorem. +

    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Card
    +
    +
    +
    +
    +
    + +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo velit debitis eos. +
    +
    +
    + + +
    +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo velit debitis eos. +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo + velit debitis eos.Te vidisse cotidieque est, in adhuc honestatis his. Vel et clita + oporteat, nam in + quaeque ocurreret. +
    +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata, ut aliquid consequat + temporibus vix, ei probo + velit debitis eos.Te vidisse cotidieque est, in adhuc honestatis his. Vel et clita + oporteat, nam in + quaeque ocurreret. +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere + vim, et vel aeque + vitae + abhorreant. Id simul omnesque efficiantur pro. +

    + +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    Punica CSS v3
    +
    API-Driven Framework
    +
    +
    +

    + Lorem ipsum dolor sit amet, his harum mediocrem euripidis at, in mutat legere + vim, et vel aeque vitae abhorreant. Id simul omnesque efficiantur pro. +

    + +
    + + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Process
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    +
    +
    + Planning +
    +
    + Design +
    +
    + Content +
    +
    + Coding +
    +
    + Testing +
    +
    + Maintenance +
    +
    +
    +
    + + +
    +
    +
    Tabnav
    +
    +
    +
    +
    Item
    +
    Active 45
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    +
    Item
    +
    Active
    +
    Disabled
    +
    +
    +
    + add Add +
    +
    + + Options keyboard_arrow_up + + +
    +
    +
    +
    +
    +
    + + panorama_wide_angle + + + edit_location_alt + + + mail + + + shopping_cart + +
    +
    +
    +
    +
    Email
    +
    Notifications 45 +
    +
    Privacy
    +
    Account Info
    +
    +
    +
    + + +
    +
    +
    Timeline
    +
    +
    +
    +
    +
    +
    +
    + lock +
    +
    12.12.2020
    +
    John Doe,
    +
    + Te vidisse cotidieque est, in adhuc honestatis his. +
    +
    +
    +
    + lock +
    +
    12.12.2020
    +
    Jane Doe,
    +
    + Te vidisse cotidieque est, in adhuc honestatis his. +
    +
    +
    +
    + wifi_protected_setup +
    +
    + Jane Doe aliquid consequat + debitis eos. +
    +
    +
    +
    + extension +
    +
    John Doe,
    +
    + Oeehhh, that's awesome.. Me too! +
    +
    12.12.2020
    +
    +
    +
    + build +
    +
    Jane Doe,
    +
    + Lorem ipsum dolor sit amet, eam ut singulis vituperata! +
    +
    12.12.2020
    +
    +
    +
    + build +
    +
    John Doe,
    +
    + Random words in front of other random words create a random sentence. +
    +
    12.12.2020
    +
    +
    +
    +
    +
    +
    +
    + play_arrow +
    + Youtube Video +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes voluptaria ea nam, vis ut ullum + hendrerit. +
    +
    2 hours ago
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + photo +
    +
    Two Photo Columns
    +
    + Et equidem ponderum posidonium ius, eu eum modo dictas impetus. Omnes + voluptaria ea nam, vis ut ullum hendrerit. +
    +
    2 weeks ago
    +
    +
    + +
    + + + + + + + + + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    Caption
    +
    +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga + delectus + commodi illo dolore, officia ratione? +
    +
    +
    + + +
    +
    +
    Breadcrumb
    +
    +
    +
    + Punica + Components + Breadcrumb +

    +
    + Punica + Components + Breadcrumb +

    +
    + Punica + Components + Breadcrumb +
    +
    +
    + + +
    +
    +
    Alert
    +
    +
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    Lorem ipsum dolor sit amet.
    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + + +
    +
    +
    Label
    +
    +
    + Default +
    Primary
    +
    Success
    +
    Warning
    +
    Error
    +
    Dark
    +
    +
    + Small + Default + Large +
    +
    + + +
    +
    +
    Badge
    +
    +
    +
    12
    +
    75
    +
    336
    +
    89567
    +
    59
    +
    549
    +
    +
    +
    Small
    +
    Default
    +
    Large
    +
    +
    + + +
    +
    +
    Stats
    +
    +
    + +
    Primary style
    +
    46,6K
    +
    This is a subtitle.
    +     +
    +
    Success style
    +
    + redeem 83K +
    +
    This is a subtitle.
    +
    +
    +
    Warning style
    +
    + surfing 7K +
    +
    This is a subtitle.
    +
    +
    +
    Error style
    +
    + beenhere 3.765 +
    +
    This is a subtitle.
    +
    +
    +
    Dark style
    +
    + ads_click 549 +
    +
    This is a subtitle.
    +
    +
    +
    Stats with Photo
    +
    + 15K +
    +
    This is a subtitle.
    +
    +
    +
    + + +
    +
    +
    Tooltip
    +
    +
    +
    +
    Button
    + Hello World! +
    +
    + Long Text + + Lorem ipsum dolor sit amet, consectetur adipisicing elit + +
    +
    + Text + Hello World! +
    +
    +
    +
    +
    Left
    + Hello World! +
    +
    +
    Top
    + Hello World! +
    +
    +
    Right
    + Hello World! +
    +
    +
    + + +
    +
    +
    List
    +
    +
    +
    +
    +
      +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    • + Lorem ipsum dolor sit amet +
      • +
    +
    +
    +
    +
    + Divided List +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + Striped List +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    +
    +
    +
    +
    + Hovered List +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    + reorder +
    + Lorem ipsum dolor sit amet +
    +
    +
    + + edit + + + delete + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    + reorder +
    +
    +
    +
    + + + + clear + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    + +
    + Lorem ipsum dolor + Lorem ipsum dolor + Lorem ipsum dolor sit amet consectetur. +
    +
    +
    +
    + + keyboard_arrow_down + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + diff --git a/src/Components/Alert/Alert.scss b/src/Components/Alert/Alert.scss deleted file mode 100644 index 7122e1cd..00000000 --- a/src/Components/Alert/Alert.scss +++ /dev/null @@ -1,58 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Alert -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if alert is enable -@if options('alert', 'enable') { - .#{class('alert', 'name')} { - @include set-style(theme('color', 'background'), theme('color', 'text')) { - display: block; - @include border(); - border-radius: theme('border', 'radius'); - padding: variables('alert', 'padding'); - margin: variables('alert', 'margin'); - width: variables('alert', 'width'); - font-weight: bold; - a { - color: theme('color', 'text'); - text-decoration: underline; - &:focus,&:hover,&:active,&.#{class('alert', 'active')} { - opacity: .75; - } - } - p { - &:last-child { - margin-bottom: 0; - } - } - >i, - >.#{class('icon', 'class-name')} { - vertical-align: variables('alert', 'icon', 'vertical-align'); - } - } - /// - /// STYLES - /// - @if options('alert', 'features', 'styles') { - @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { - border-color: darken($bg-color, 5%); - }; - } - } - /// - /// SIZES - /// - @if options('alert', 'features', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { - @include set-size($font-size, $padding, $size-name); - } - } - } -} \ No newline at end of file diff --git a/src/Components/Alert/variables.scss b/src/Components/Alert/variables.scss deleted file mode 100644 index 60224975..00000000 --- a/src/Components/Alert/variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Alert -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - .749rem, // font-size - .4rem // padding - ), - ( - "large", // size name (class) - 1.1rem, // font-size - .8rem // padding - ) -); \ No newline at end of file diff --git a/src/Components/Badge/Badge.scss b/src/Components/Badge/Badge.scss deleted file mode 100644 index 62bd4a98..00000000 --- a/src/Components/Badge/Badge.scss +++ /dev/null @@ -1,44 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Badge -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if badge is enable -@if options('badge', 'enable') { - .#{class('badge', 'name')} { - @include set-style(theme('color', 'secondary'), theme('color', 'text')) { - position: relative; - white-space: nowrap; - display: inline-flex; - justify-content: center; - align-items: center; - font-weight: bold; - border-radius: variables('badge', 'border-radius'); - border: theme('border', 'width') theme('border', 'style') darken(theme('color', 'secondary'), 6.5%); - }; - @include set-size(1em, 1px 6px); - /// - /// STYLES - /// - @if options('badge', 'features', 'styles') { - @each $name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $name) { - border-color: darken($bg-color, 6.5%); - }; - } - } - /// - /// SIZES - /// - @if options('badge', 'features', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { - @include set-size($font-size, $padding, $size-name); - } - } - } -} \ No newline at end of file diff --git a/src/Components/Badge/variables.scss b/src/Components/Badge/variables.scss deleted file mode 100644 index 73812644..00000000 --- a/src/Components/Badge/variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Badge -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "tiny", // size name (class) - .659rem!important, // font-size - 0 4px!important // padding - ), - ( - "small", // size name (class) - .749rem!important, // font-size - 1px 4px!important // padding - ), - ( - "large", // size name (class) - 1.1rem!important, // font-size - 2px 8px!important // padding - ) -); \ No newline at end of file diff --git a/src/Components/Billboard/Billboard.scss b/src/Components/Billboard/Billboard.scss deleted file mode 100644 index 256fded1..00000000 --- a/src/Components/Billboard/Billboard.scss +++ /dev/null @@ -1,107 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Billboard -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if billboard is enable -@if options('billboard', 'enable') { - .#{class('billboard', 'name')} { - @include set-style(theme('color', 'background'), theme('color', 'text')) { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: variables('billboard', 'padding'); - border-color: darken(theme('color', 'background'), 4.5%); - @include border(); - }; - /// - /// STYLES - /// - @if options('billboard', 'features', 'styles') { - @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { - border-color: darken($bg-color, 4.5%); - }; - } - } - /// - /// SIZES - /// - @if options('billboard', 'features', 'sizes') { - @each $size-name, $padding, $font-size in variables.$sizes { - @include set-size($font-size, $padding, $size-name) { - .#{class('billboard', 'body')} { - padding: $padding; - } - p { - font-size: $font-size; - } - }; - } - } - .#{class('billboard', 'media')} { - flex: 0 0 auto; - } - .#{class('billboard', 'body')} { - padding: variables('billboard', 'body', 'padding'); - flex: 1 1 auto; - display: flex; - justify-content: center; - flex-direction: column; - } - /// - /// COVER - /// - @if options('billboard', 'features', 'cover') { - &.#{class('billboard', 'cover')} { - min-height: 100vh; - max-height: 100%; - min-width: 100%; - border: 0; - background-size: cover; - background-position: center center; - background-repeat: no-repeat; - } - } - } - /// - /// - /// - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('billboard', 'name')} { - padding: 2.5rem 1rem; - flex-direction: column; - .#{class('billboard', 'media')} { - img { - width: 100%; - } - } - .#{class('billboard', 'body')} { - padding: 2.5rem 1rem; - } - /// - /// SIZES - /// - @if options('billboard', 'features', 'sizes') { - @each $size, $padding, $font-size in variables.$responsive-sizes { - &.#{$size} { - padding: $padding; - .#{class('billboard', 'body')} { - padding: $padding; - } - p { - font-size: $font-size; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/Components/Billboard/variables.scss b/src/Components/Billboard/variables.scss deleted file mode 100644 index 89df6c2d..00000000 --- a/src/Components/Billboard/variables.scss +++ /dev/null @@ -1,42 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Billboard -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - 2.5rem 1.5rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 7.5rem 4rem, // padding - 1.6em // font-size - ) -); -$responsive-sizes: ( - ( - "small", // size name (class) - 1rem, // padding - 1em // font-size - ), - ( - "large", // size name (class) - 1rem, // padding - 1.358em // font-size - ) -); \ No newline at end of file diff --git a/src/Components/Breadcrumb/Breadcrumb.scss b/src/Components/Breadcrumb/Breadcrumb.scss deleted file mode 100644 index d1013bd0..00000000 --- a/src/Components/Breadcrumb/Breadcrumb.scss +++ /dev/null @@ -1,81 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Breadcrumb -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if breadcrumb is enable -@if options('breadcrumb', 'enable') { - .#{class('breadcrumb', 'name')} { - display: inline-block; - white-space: nowrap; - a.#{class('breadcrumb', 'item')}, - .#{class('breadcrumb', 'item')} { - text-decoration: none; - font-size: inherit; - font-weight: variables('breadcrumb', 'font-weight'); - &:focus,&:hover,&:active,&.active { - color: theme('color', 'primary'); - } - &::after { - font-family: '#{variables('icon', 'font-family')}'; - content: variables('icon', 'breadcrumb', 'seperator'); // [*] - color: theme('color', 'primary'); - padding: variables('breadcrumb', 'seperator', 'padding'); - vertical-align: variables('breadcrumb', 'seperator', 'vertical-align'); - font-size: variables('breadcrumb', 'seperator', 'font-size'); - cursor: variables('breadcrumb', 'seperator', 'cursor'); - } - &:first-child { - margin-left: 0; - } - &.#{class('breadcrumb', 'active')} { - color: theme('color', 'primary'); - font-weight: variables('breadcrumb', 'active-weight'); - &::after { - content: none; - } - } - } - /// - /// SIZES - /// - @if options('breadcrumb', 'features', 'sizes') { - // size, font-size, seperator-padding, seperator-size - @each $size, $font-size, $seperator-padding, $seperator-size in variables.$sizes { - &.#{$size} { - .#{class('breadcrumb', 'item')} { - font-size: $font-size; - &::after { - padding: $seperator-padding; - font-size: $seperator-size; - } - } - } - } - } - } - /// - /// - /// - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('breadcrumb', 'name')} { - .#{class('breadcrumb', 'item')} { - &:after { - font-size: 1rem; - vertical-align: middle; - } - } - } - } -} -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ diff --git a/src/Components/Breadcrumb/variables.scss b/src/Components/Breadcrumb/variables.scss deleted file mode 100644 index 76ad1d61..00000000 --- a/src/Components/Breadcrumb/variables.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Breadcrumb -> Variables -/// - -/// SIZES =============================================== -$sizes: ( - ( - 'small', // size name (class) - .9589em, // font-size - .15em, // seperator-padding - 1.25rem // seperator-size - ), - ( - 'large', // size name (class) - 1.18em, // font-size - .18em, // seperator-padding - 1.7rem // seperator-size - ) -); - diff --git a/src/Components/Card/Card.scss b/src/Components/Card/Card.scss deleted file mode 100644 index 13ffea6c..00000000 --- a/src/Components/Card/Card.scss +++ /dev/null @@ -1,143 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Card -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_global/variables" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "../../Elements/Typography/variables" as *; -@use "variables"; - -/// if card is enable -@if options('card', 'enable') { - .#{class('card', 'cards')} { - display: flex; - flex-wrap: wrap; - } - /// - /// CARD GROUPS - /// - @if options('card', 'features', 'group') { - @each $name, $number in $grids { - .#{class('card', 'cards')}.#{$name} { - &>.#{class('card', 'name')} { - flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{variables('card', 'group', 'margin')})); - height: auto; - margin: variables('card', 'group', 'margin'); - } - } - } - } - .#{class('card', 'name')} { - /// background color - background-color: if(theme('components', 'card', 'background'), theme('components', 'card', 'background'), theme('color', 'background')); - - // has card border? - @if options('card', 'features', 'border') { - @include border(); - /// border radius - border-radius: if(theme('components', 'card', 'radius'), theme('components', 'card', 'radius'), theme('border', 'radius')); - } - - // has card shadow? - @if options('card', 'features', 'shadow') { - @include shadow(); - } - - display: flex; - flex-direction: column; - width: variables('card', 'width'); // for only a single card - height: variables('card', 'height'); - overflow: hidden; - >.#{class('card', 'body')} .#{class('card', 'title')}, - >.#{class('card', 'title')} { - color: theme('color', 'text'); - line-height: initial; - &>.#{class('card', 'subtitle')} { - color: theme('color', 'grey'); - flex: 1 1 auto; - } - } - >.#{class('card', 'title')}, - >.#{class('card', 'description')}, - >.#{class('card', 'actions')} { - padding: variables('card', 'padding'); - } - >.#{class('card', 'description')} { - flex: 1 1 auto; - color: theme('color', 'text'); - } - /// - /// MEDIA - /// - @if options('card', 'features', 'media') { - &>.#{class('card', 'media')} { - display: flex; - flex-wrap: wrap; - img { - display: block; - width: 100%; - } - } - /// - /// MEDIA GROUP - /// - @if options('card', 'features', 'media-group') { - @include media-group-specs(class('card', 'media'), 0); - } - } - /// - /// HORIZONTAL CARDS - /// - @if options('card', 'features', 'horizontal') { - &.#{class('card', 'horizontal')} { - flex-direction: row; - width: 100%; - align-items: center; - margin-bottom: variables('card', 'horizontal', 'margin-bottom'); - /// - /// MEDIA - /// - @if options('card', 'features', 'media') { - >.#{class('card', 'media')} { - align-self: normal; - width: fit-content; - img { - width: auto; - object-fit: cover - } - } - } - >.#{class('card', 'body')} { - flex: inherit; - .#{class('card', 'title')}, - .#{class('card', 'description')} { - padding: calc(#{variables('card', 'padding')} / 2) #{variables('card', 'padding')}; - } - .#{class('card', 'description')} { - flex: 1; - } - } - } - } - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('card', 'name')}, - .#{class('card', 'cards')} > .#{class('card', 'name')} { - flex: 0 0 100% !important; - width: 100%; // for only a single card - height: fit-content !important; - } - /// - /// HORIZONTAL CARDS - /// - @if options('card', 'features', 'horizontal') { - .#{class('card', 'name')}.#{class('card', 'horizontal')} { - flex-direction: column; - } - } - } -} diff --git a/src/Components/Card/variables.scss b/src/Components/Card/variables.scss deleted file mode 100644 index 77c6496b..00000000 --- a/src/Components/Card/variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Card -> Variables -/// - diff --git a/src/Components/List/List.scss b/src/Components/List/List.scss deleted file mode 100644 index 984e36a6..00000000 --- a/src/Components/List/List.scss +++ /dev/null @@ -1,102 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : List -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if list is enable -@if options('list', 'enable') { - .#{class('list', 'name')} { - list-style: none; - margin: variables('list', 'margin'); - >.#{class('list', 'item')} { - display: flex; - align-items: center; - padding: variables('list', 'item', 'padding'); - margin: variables('list', 'item', 'margin'); - transition: variables('list', 'item', 'transition'); - >img, - >.#{class('icon', 'class-name')}, - >i { - margin-right: variables('list', 'media', 'margin-right'); - } - &>span, - &>div { - /// ..children of a flex container are - /// forced to have a block-flavored display type. - display: contents; - } - >.#{class('list', 'body')} { - flex: 1; - line-height: variables('list', 'body', 'line-height'); - text-align: variables('list', 'body', 'text-align'); - display: initial; - >.#{class('list', 'title')}, - >.#{class('list', 'subtitle')} { - display: block; - } - >.#{class('list', 'title')} { - font-size: variables('list', 'title', 'font-size'); - font-weight: theme('typography', 'header-weight'); - line-height: variables('list', 'body', 'line-height'); - } - >.#{class('list', 'subtitle')} { - font-size: variables('list', 'subtitle', 'font-size'); - font-weight: theme('typography', 'font-weight'); - color: theme('color', 'primary'); - margin-bottom: variables('list', 'subtitle', 'margin-bottom'); - } - } - >.#{class('list', 'actions')} { - width: variables('list', 'actions', 'width'); - margin-left: variables('list', 'actions', 'margin-left'); - } - &.#{class('list', 'active')} { - background: darken(theme('color', 'background'), 11%); - } - } - /// - /// DIVIDED - /// - @if options('list', 'features', 'divided') { - &.#{class('list', 'divided')} { - >.#{class('list', 'item')} { - border-bottom: set-border(); - &:last-child { - border-bottom: none; - } - } - } - } - /// - /// STRIPED - /// - @if options('list', 'features', 'striped') { - &.#{class('list', 'striped')} { - >.#{class('list', 'item')} { - &:nth-of-type(odd) { - background: theme('color', 'secondary'); - } - } - } - } - /// - /// HOVERED - /// - @if options('list', 'features', 'hovered') { - &.#{class('list', 'hovered')} { - >.#{class('list', 'item')} { - &:hover { - background: theme('color', 'secondary'); - transition: variables('list', 'item', 'transition'); - } - } - } - } - } -} diff --git a/src/Components/List/variables.scss b/src/Components/List/variables.scss deleted file mode 100644 index 5fbdf3ed..00000000 --- a/src/Components/List/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : List -> Variables -/// diff --git a/src/Components/Menu/Menu.scss b/src/Components/Menu/Menu.scss deleted file mode 100644 index 396a9ea5..00000000 --- a/src/Components/Menu/Menu.scss +++ /dev/null @@ -1,93 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Menu -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if menu is enable -@if options('menu', 'enable') { - .#{class('menu', 'name')} { - background-color: if(theme('components', 'menu', 'background'), theme('components', 'menu', 'background'), lighten(theme('color', 'background'), 2.5%)); - border-radius: variables('menu', 'border-radius'); - list-style: none; - margin: variables('menu', 'margin'); - width: variables('menu', 'width'); - min-width: max-content; - padding: variables('menu', 'padding'); - @include shadow(); - z-index: 300; - // menu title - .#{class('menu', 'title')} { - font-size: variables('menu', 'title', 'font-size'); - min-height: variables('menu', 'title', 'min-height'); - color: theme('color', 'text'); - padding: variables('menu', 'title', 'padding'); - font-weight: theme('typography', 'header-weight'); - letter-spacing: variables('menu', 'title', 'letter-spacing'); - } - // menu item - .#{class('menu', 'item')} { - padding: 0; // default container - position: relative; - text-decoration: none; - text-align: variables('menu', 'item', 'text-align'); - & > a { - color: theme('color', 'text'); - display: block; - width: variables('menu', 'item', 'width'); - padding: variables('menu', 'item', 'padding'); - text-decoration: none; - font-size: variables('menu', 'item', 'font-size'); - font-weight: theme('typography', 'font-weight'); - transition: variables('menu', 'item', 'transition'); - &:hover { - background: theme('color', 'secondary'); - color: theme('color', 'text'); - transition: variables('menu', 'item', 'transition'); - } - &:active, - &:focus, - &.#{class('menu', 'active')} { - background: theme('color', 'secondary'); - color: theme('color', 'text'); - transition: variables('menu', 'item', 'transition'); - } - } - i, span.#{class('icon', 'class-name')} { - color: theme('color', 'grey'); - font-size: variables('menu', 'icon', 'font-size'); - margin-right: variables('menu', 'icon', 'margin-right'); - vertical-align: variables('menu', 'icon', 'vertical-align'); - } - .#{class('menu', 'name')} { - padding: variables('menu', 'item', 'sub-padding'); - } - } - // menu badge - .#{class('menu', 'badge')} { - position: absolute; - right: variables('menu', 'badge', 'right'); - top: variables('menu', 'badge', 'top'); - padding: variables('menu', 'badge', 'padding'); - font-size: variables('menu', 'badge', 'font-size'); - } - // small menu - &.#{class('menu', 'small')} > .#{class('menu', 'item')} a { - font-size: variables('menu', 'item', 'small-size'); - } - // divided menu - &.#{class('menu', 'divided')} { - .#{class('menu', 'item')} { - border-bottom: set-border(); - &:last-child { - border-bottom: none; - } - } - } - } -} diff --git a/src/Components/Menu/variables.scss b/src/Components/Menu/variables.scss deleted file mode 100644 index cfbac376..00000000 --- a/src/Components/Menu/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Menu -> Variables -/// \ No newline at end of file diff --git a/src/Components/Navbar/Navbar.scss b/src/Components/Navbar/Navbar.scss deleted file mode 100644 index b48cf77e..00000000 --- a/src/Components/Navbar/Navbar.scss +++ /dev/null @@ -1,332 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Navbar -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "mixins"; -@use "variables"; - -/// if navbar is enable -@if options('navbar', 'enable') { - .#{class('navbar', 'spacer')} { - margin-top: variables('navbar', 'spacer-top'); - } - .#{class('navbar', 'name')} { - display: flex; - flex-wrap: wrap; - align-items: stretch; - justify-content: space-between; - min-height: variables('navbar', 'min-height'); - background: theme('color', 'primary'); - color: theme('color', 'negative'); - width: 100%; - // grid container - .#{class('grid', 'container')} { - display: flex; - width: variables('grid', 'container', 'width'); // options->grid - } - // navbar brand - .#{class('navbar', 'brand')} { - padding: variables('navbar', 'brand', 'padding'); - display: flex; - justify-content: center; - min-height: 100%; - align-items: center; - margin-right: variables('navbar', 'brand', 'margin-right'); - white-space: nowrap; - img { - width: variables('navbar', 'brand', 'img-width'); - } - a, - a:visited { - font-size: variables('navbar', 'font-size'); - text-decoration: none; - color: theme('color', 'negative'); - display: flex; - font-weight: variables('navbar', 'brand', 'font-weight'); - } - } - // navbar burger - input[type=checkbox]##{class('navbar', 'burger')}, - .#{class('navbar', 'burger')} { - display: none; - } - .#{class('navbar', 'burger')} { - &::before { - content: "#{variables('icon', 'navbar', 'open')}"; // [*] - font-family: "#{variables('icon', 'font-family')}"; // [*] - font-size: variables('navbar', 'burger', 'icon-size'); - display: none; - min-height: variables('navbar', 'min-height'); - max-height: variables('navbar', 'min-height'); - position: absolute; - cursor: pointer; - right: 0; - top: 0; - } - } - // navbar links - section.#{class('navbar', 'links')} { - display: flex; - flex: 1 0 0; - align-items: center; - // navbar sections - div.#{class('navbar', 'section')} { - flex: 1 0 0; - display: flex; - height: 100%; - align-items: center; - &:not(:first-child):last-child { - justify-content: flex-end; - } - input[type='text'] { - background-color: darken(theme('color', 'primary'), 7%); - color: theme('color', 'negative'); - border-color: lighten(theme('color', 'primary'), 8%); - &::placeholder { - color: theme('color', 'negative'); - } - &:focus { - outline: theme('input', 'outline-width') solid lighten(theme('color', 'primary'), 26%); - } - } - /// - /// DIVIDED NAVBAR - /// - @if options('navbar', 'features', 'divided') { - &.#{class('navbar', 'divided')} { - @include mixins.navbar-divided(); - .#{class('button', 'group')} { - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - border: solid darken(theme('color', 'primary'), 7.15%); - } - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('button', 'group')} { - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - border: 0 !important; - } - } - } - } - } - } - } - &.#{class('navbar', 'fixed')} { - position: fixed; - top: 0; - left: 0; - right: 0px; - margin-top: 0; - transform: translateY(0px); - z-index: 5; - } - .#{class('button', 'group')} { - height: 100%; - min-height: 100%; - box-shadow: none; - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - background: transparent; - border-color: transparent; - color: theme('color', 'negative'); - min-height: 100%; - border-radius: 0; - border: 0; - i, span.#{class('icon', 'class-name')} { - color: theme('color', 'negative'); - } - &:hover { - background: darken(theme('color', 'primary'), 10.15%); - border-radius: 0; - } - &:active, - &.#{class('button', 'active')} { - color: theme('color', 'negative'); - background: darken(theme('color', 'primary'), 7%); - transition: variables('button', 'transition'); - &:hover { - transition: variables('button', 'transition'); - background: darken(theme('color', 'primary'), 10%); - } - } - } - .#{class('button', 'dropdown')}:last-child, - .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:first-child, - .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:last-child { - border-radius: 0; - } - } - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - font-size: variables('navbar', 'font-size'); - padding: variables('navbar', 'button-padding'); - font-weight: theme('components','navbar', 'font-weight'); - } - - /// - /// GRADIENT - /// - @if options('navbar', 'features', 'gradient') { - &.#{class('navbar', 'gradient')} { - background: linear-gradient( - to top, - theme('color', 'primary') 0%, - lighten(theme('color', 'primary'), 11.5%) 2%, - darken(theme('color', 'primary'), 3%) 97%, - lighten(theme('color', 'primary'), 11.5%) 100% - ); - } - /// Gradient Left-To-Right - &.#{class('navbar', 'gradient')}#{'-ltr'} { - background: linear-gradient(135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary')); - } - /// Gradient Right-To-Left - &.#{class('navbar', 'gradient')}#{'-rtl'} { - background: linear-gradient(-135deg, lighten(theme('color', 'primary'), 7.5%), theme('color', 'primary')); - } - } - - /// - /// NAVBAR THEMES - /// - @if options('navbar', 'features', 'themes') { - @each $theme-name, $bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color in variables.$themes { - &.#{$theme-name} { - @include mixins.navbar-themes($bg-color, $text-color, $input-bg, $input-color, $input-border-color, $divider-color); - } - } - } - /// - /// NAVBAR SIZES - /// - @if options('navbar', 'features', 'sizes') { - @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { - &.#{$size-name} { - min-height: $min-height; - & .#{class('button', 'name')}, - & .#{class('button', 'dropdown')} .#{class('button', 'name')} { - font-size: $font-size; - padding: $button-padding; - } - @at-root .#{class('navbar', 'spacer')}-#{$size-name} { - margin-top: $spacer-top !important; - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - @at-root .#{class('navbar', 'spacer')}-#{$size-name} { - margin-top: div($spacer-top, 2) !important; - } - } - } - } - } - } - // - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('navbar', 'spacer')} { - margin-top: 0; - } - .#{class('navbar', 'name')} { - // grid container - .#{class('grid', 'container')} { - padding: 0 div(variables('grid', 'container', 'padding'), 2); - } - &.#{class('navbar', 'fixed')} { - position: relative; - } - section.#{class('navbar', 'links')} { - position: absolute; - display: block; - width: 100%; - height: 0; - top: variables('navbar', 'min-height'); - left: 0; - overflow-x: auto; - overflow-y: hidden; - background: theme('color', 'secondary'); - z-index: 1; - margin: 0 !important; - padding: 0 !important; - @include shadow(); - .#{class('navbar', 'section')}, - .#{class('navbar', 'section')} .#{class('button', 'group')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('menu', 'name')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('menu', 'name')} .#{class('button', 'name')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('button', 'name')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'name')} { - display: block !important; - width: 100%; - text-align: left; - position: relative; - } - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('button', 'name')}, - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'name')} { - color: theme('color', 'text'); - background: theme('color', 'secondary'); - i, span.#{class('icon', 'class-name')} { - display: none; - } - } - .#{class('navbar', 'section')} .#{class('button', 'group')} .#{class('button', 'dropdown')} .#{class('menu', 'name')} { - max-height: 100%; - box-shadow: none; - } - } - .#{class('navbar', 'burger')} { - display: flex; - align-items: center; - justify-content: center; - &::before { - content: "#{variables('icon', 'navbar', 'close')}"; // [*] - padding: variables('navbar', 'burger', 'padding'); - font-size: variables('navbar', 'burger', 'icon-size'); - display: flex; - align-items: center; - justify-content: center; - top: auto; - } - } - /// - /// NAVBAR SIZES - /// - @if options('navbar', 'features', 'sizes') { - @each $size-name, $min-height, $font-size, $button-padding, $spacer-top in variables.$sizes { - &.#{$size-name} { - & .#{class('navbar', 'burger')}, - & .#{class('navbar', 'burger')}::before { - min-height: $min-height; - max-height: $min-height; - } - section.#{class('navbar', 'links')} { - top: $min-height; - } - } - } - } - input[type=checkbox]##{class('navbar', 'burger')}:not(:checked) ~ section.#{class('navbar', 'links')} { - height: 0; - } - input[type=checkbox]##{class('navbar', 'burger')}:checked ~ section.#{class('navbar', 'links')} { - height: auto; - } - input[type=checkbox]##{class('navbar', 'burger')}:not(:checked) ~ .#{class('navbar', 'burger')}::before { - content: "#{variables('icon', 'navbar', 'open')}"; // [*] - } - input[type=checkbox]##{class('navbar', 'burger')}:checked ~ .#{class('navbar', 'burger')}::before { - content: "#{variables('icon', 'navbar', 'close')}"; // [*] - } - } - } -} -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ \ No newline at end of file diff --git a/src/Components/Navbar/mixins.scss b/src/Components/Navbar/mixins.scss deleted file mode 100644 index a60eb57c..00000000 --- a/src/Components/Navbar/mixins.scss +++ /dev/null @@ -1,142 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Navbar -> Mixins -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; - -/// -/// Navbar Themes -/// @param {Color} $bg-color -/// @param {Color} $text-color -/// @param {Color} $input-bg -/// @param {Color} $input-color -/// @param {Color} $input-border-color -/// -@mixin navbar-themes( - $bg-color: $navbar-bg, - $text-color: $navbar-color, - $input-bg: $navbar-color, - $input-color: $main-font-color, - $input-border-color: inherit, - $divider-color: inherit -) { - background: $bg-color; - color: $text-color; - - /// - /// GRADIENT - /// - @if options('navbar', 'features', 'gradient') { - &.#{class('navbar', 'gradient')} { - background: linear-gradient( - to top, - $bg-color 0%, - lighten($bg-color, 11.5%) 2%, - darken($bg-color, 3%) 97%, - lighten($bg-color, 11.5%) 100% - ); - } - /// Gradient Left-To-Right - &.#{class('navbar', 'gradient')}#{'-ltr'} { - background: linear-gradient(135deg, lighten($bg-color, 9%), $bg-color); - } - /// Gradient Right-To-Left - &.#{class('navbar', 'gradient')}#{'-rtl'} { - background: linear-gradient(-135deg, lighten($bg-color, 9%), $bg-color); - } - } - - .#{class('button', 'group')} { - .#{class('button', 'name')} { - color: $text-color; - min-height: 100%; - i, span.#{class('icon', 'class-name')} { - color: $text-color; - } - &:hover { - background: darken($bg-color, 10.15%); - } - } - } - .#{class('navbar', 'brand')} { - a, - a:visited { - color: $text-color; - } - } - section.#{class('navbar', 'links')} { - div.#{class('navbar', 'section')} { - input[type='text'] { - background-color: $input-bg; - border-color: $input-border-color; - color: $input-color; - &::placeholder { - color: $text-color; - } - &:focus { - outline: theme('input', 'outline-width') solid lighten($input-border-color, 13%); - } - } - .#{class('button', 'group')} { - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - &:active, - &.#{class('button', 'active')} { - color: $text-color; - background: darken($bg-color, 7%); - transition: variables('button', 'transition'); - &:hover { - transition: variables('button', 'transition'); - background: darken($bg-color, 10%); - } - } - } - } - /// - /// DIVIDED NAVBAR - /// - @if options('navbar', 'features', 'divided') { - &.#{class('navbar', 'divided')} { - .#{class('button', 'group')} { - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - border: solid $divider-color; - } - } - } - } - } - } -} - -/// -/// Divided Navbar -/// -@mixin navbar-divided() { - .#{class('button', 'group')} { - .#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')} { - border-width: 0 1px !important; - } - &>.#{class('button', 'name')}:first-child { - border-left-width: 0 !important; - } - &>.#{class('button', 'name')}:last-child { - border-right-width: 0 !important; - } - .#{class('button', 'dropdown')}:first-child { - .#{class('button', 'name')} { - border-left-width: 0 !important; - } - } - .#{class('button', 'dropdown')}:last-child { - .#{class('button', 'name')} { - border-right-width: 0 !important; - border-left-width: 0 !important; - margin-left: 1px; - } - } - } -} \ No newline at end of file diff --git a/src/Components/Navbar/variables.scss b/src/Components/Navbar/variables.scss deleted file mode 100644 index 5acc9ac6..00000000 --- a/src/Components/Navbar/variables.scss +++ /dev/null @@ -1,55 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Navbar -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -// you can add your own custom styles. -$themes: ( - ( - "light", // theme name (class) - white, // bg color - #303232, // text color - white, // input bg - #303232, // input color - theme('color', 'dark'), // input border color - theme('color', 'grey') // divider color - ), - ( - "dark", // theme name (class) - theme('color', 'dark'), // bg color - theme('color', 'negative'), // text color - lighten(theme('color', 'dark'), 7%), // input bg - theme('color', 'negative'), // input color - lighten(theme('color', 'dark'), 25.75%), // input border color - lighten(theme('color', 'dark'), 12.55%) // divider color - ) -); - -/// SIZES =============================================== -// you can add your own custom sizes. -$sizes: ( - ( - "mini", // size name (class) - 45px, // min-height - .9839em, // button font-size - .445rem .9rem, // button padding - 70px // top spacer for navbar (min-height + 25px) - ), - ( - "small", // size name (class) - 65px, // min-height - 1em, // button font-size - .645rem 1.4rem, // button padding - 90px // top spacer for navbar (min-height + 25px) - ), - ( - "large", // size name (class) - 95px, // min-height - 1.28em, // button font-size - .645rem 1.4rem, // button padding - 115px // top spacer for navbar (min-height + 25px) - ) -); diff --git a/src/Components/Panel/Panel.scss b/src/Components/Panel/Panel.scss deleted file mode 100644 index 5bd6cbde..00000000 --- a/src/Components/Panel/Panel.scss +++ /dev/null @@ -1,120 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Panel -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if panel is enable -@if options('panel', 'enable') { - .#{class('panel', 'name')} { - display: flex; - flex-direction: column; - - // has panel border? - @if options('panel', 'features', 'border') { - @include border(); - /// border radius - border-radius: if(theme('components', 'panel', 'radius'), theme('components', 'panel', 'radius'), theme('border', 'radius')); - } - - // has panel shadow? - @if options('panel', 'features', 'shadow') { - @include shadow(); - } - - /// background color - background-color: if(theme('components', 'panel', 'background'), theme('components', 'panel', 'background'), theme('color', 'background')); - - margin: variables('panel', 'margin'); - &>.#{class('panel', 'header')}, - &>.#{class('panel', 'bottom')} { - display: flex; - flex-direction: row; - align-items: center; - .#{class('panel', 'actions')} { - margin-left: auto; - &:before { - flex-grow: 1; - } - } - } - &>.#{class('panel', 'header')} { - border-bottom: set-border(); - padding: variables('panel', 'title-padding'); - &.dashed { - border-bottom-style: dashed; - } - &.dotted { - border-bottom-style: dotted; - } - >.#{class('panel', 'title')} { - font-size: 1.185rem; - font-weight: theme('typography', 'header-weight'); - } - } - &>.#{class('panel', 'content')} { - flex: 1 1 auto; - padding: variables('panel', 'padding'); - height: auto; - /// - /// MEDIA - /// - @if options('panel', 'features', 'media') { - &>.#{class('panel', 'media')} { - min-width: 0; - flex: auto; - margin-bottom: 32px; - flex-wrap: wrap; - display: flex; - @include embedded-media(); - img { - display: block; - } - } - /// - /// MEDIA GROUP - /// - @if options('panel', 'features', 'media-group') { - @include media-group-specs(class('panel', 'media')); - } - } - .#{class('panel', 'headline')}, - p.#{class('panel', 'headline')} { - font-size: 1.39em; - line-height: 1.5; - margin-bottom: 26px; - color: darken(theme('color', 'text'), 16%); - letter-spacing: -.0158em; - } - } - &>.#{class('panel', 'bottom')} { - min-height: 50px; - border-top: set-border(); - padding: variables('panel', 'padding'); - } - /// - /// SIZES - /// - @if options('panel', 'features', 'sizes') { - @each $size-name, $font-size, $padding in variables.$sizes { - &.#{$size-name} { - >.#{class('panel', 'header')} { - padding: $padding; - .#{class('panel', 'title')} { - font-size: $font-size; - } - } - >.#{class('panel', 'content')}, - >.#{class('panel', 'bottom')} { - padding: $padding; - } - } - } - } - } -} diff --git a/src/Components/Panel/variables.scss b/src/Components/Panel/variables.scss deleted file mode 100644 index c14236fa..00000000 --- a/src/Components/Panel/variables.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Panel -> Variables -/// - -/// SIZES =============================================== -$sizes: ( - ( - "mini", // size name (class) - .985rem, // font-size (title) - 4px 8px // padding (title/content/bottom) - ), - ( - "small", // size name (class) - 1.038rem, // font-size (title) - 8px 12px // padding (title/content/bottom) - ) -); \ No newline at end of file diff --git a/src/Components/Process/Process.scss b/src/Components/Process/Process.scss deleted file mode 100644 index 45e1e2e3..00000000 --- a/src/Components/Process/Process.scss +++ /dev/null @@ -1,118 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Process -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "mixins"; -@use "variables"; - -/// if process is enable -@if options('process', 'enable') { - .#{class('process', 'name')} { - display: flex; - flex-wrap: nowrap; - margin: variables('process', 'margin'); - width: 100%; - list-style: none; - .#{class('process', 'item')} { - flex: 1 1 0; - min-height: variables('process', 'min-height'); - position: relative; - align-items: center; - justify-content: center; - display: flex; - word-break: break-word; - line-height: 1.3; - text-align: center; - &:not(:first-child)::before { - background: theme('color', 'primary'); - content: ""; - height: variables('process', 'stepbar', 'height'); - left: -50%; - position: absolute; - top: 0; - width: 100%; - } - a { - color: theme('color', 'text'); - display: inline-block; - padding: 10px 10px 0; - text-decoration: none; - font-weight: bold; - &::before { - position: absolute; - content: ""; - background: theme('color', 'primary'); - top: 0; - left: 50%; - height: variables('process', 'stickbar', 'height'); - width: variables('process', 'stickbar', 'width'); - z-index: 1; - } - &:first-child::before { - left: calc(50% - (#{variables('process', 'stickbar', 'width')} - 1px)); - } - } - &.#{class('process', 'active')} { - a { - color: theme('color', 'primary'); - &::after { - content: "#{variables('icon', 'process', 'current')}"; // [*] - font-family: "#{variables('icon', 'font-family')}"; // [*] - position: absolute; - top: calc(-15px - #{variables('process', 'icon-size')}); - left: calc(50% - ((#{variables('process', 'stickbar', 'width')} * 10) / 2)); - color: theme('color', 'primary'); - font-size: variables('process', 'icon-size'); - } - } - &~.#{class('process', 'item')} { - &::before { - background: theme('border', 'color'); - } - a { - color: theme('color', 'text'); - &:hover { - color: theme('color', 'primary'); - } - &::before { - background: theme('border', 'color'); - } - } - } - } - } - /// - /// STYLES - /// - @if options('process', 'features', 'styles') { - @each $type, $bg-color in variables.$styles { - &.#{$type} { - @include mixins.process-styles($bg-color); - } - } - } - /// - /// VERTICAL PROCESS - /// - @if options('process', 'features', 'vertical') { - &.#{class('process', 'vertical')} { - @include mixins.process-vertical(); - } - } - - // vertical style is setted as "true" for mobile devices - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - @include mixins.process-vertical(); - } - } -} -/* -REFERENCES ****************************************** -[*] Defined at options.scss file -> 'icon' -https://material.io/resources/icons/ -*****************************************************/ \ No newline at end of file diff --git a/src/Components/Process/mixins.scss b/src/Components/Process/mixins.scss deleted file mode 100644 index 4c411204..00000000 --- a/src/Components/Process/mixins.scss +++ /dev/null @@ -1,96 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Process -> Mixins -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; - -/// -/// Process Styles -/// @param {Color} $color -/// -@mixin process-styles($color: $primary-color) { - .#{class('process', 'item')} { - &:not(:first-child)::before { - background: $color; - } - a { - padding: 10px; - &::before { - background: $color; - } - } - &.#{class('process', 'active')} { - a { - color: $color; - &::after { - color: $color; - } - } - &~.#{class('process', 'item')} { - &::before { - background: theme('border', 'color'); - } - } - } - } -} - -/// -/// Vertical Process -/// -@mixin process-vertical() { - display: flex; - padding: 1.25em 2em 2.85em; - margin: variables('process', 'vertical', 'margin'); - flex-direction: column; - align-items: flex-start; - .#{class('process', 'item')} { - justify-content: flex-start; - align-items: center; - max-width: 100%; - min-width: 100%; - border-bottom: set-border(); - border-right: set-border(); - padding-left: 20px; - &:first-child { - border-top: set-border(); - } - &:not(:first-child)::before { - width: variables('process', 'stickbar', 'width'); - height: 100%; - left: 0; - } - a { - &::before { - width: variables('process', 'vertical', 'stickbar-width'); - } - &:first-child::before { - left: 0; - height: 100%; - } - } - &.#{class('process', 'active')} { - a { - font-weight: bold; - &::after { - top: 15px; - left: calc(-15px - #{variables('process', 'icon-size')}); - } - } - } - } - &.#{class('process', 'reversed')} { - flex-direction: column-reverse; - .#{class('process', 'item')} { - &:last-child { - border-top: set-border(); - } - &:first-child { - border-top: none; - } - } - } -} \ No newline at end of file diff --git a/src/Components/Process/variables.scss b/src/Components/Process/variables.scss deleted file mode 100644 index 602e4667..00000000 --- a/src/Components/Process/variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Process -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), color theme - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'text'), -); diff --git a/src/Components/Progress/Progress.scss b/src/Components/Progress/Progress.scss deleted file mode 100644 index bc44e2be..00000000 --- a/src/Components/Progress/Progress.scss +++ /dev/null @@ -1,44 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Progress -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if progress is enable -@if options('progress', 'enable') { - .#{class('progress', 'name')} { - width: variables('progress', 'width'); - height: variables('progress', 'height'); - background: theme('color', 'secondary'); - @include shadow(0, 1px, 2px, rgba(0, 0, 0, 0.15), inset); - border-radius: variables('progress', 'border-radius'); - appearance: none; - &::-webkit-progress-bar { - background: transparent; - border-radius: variables('progress', 'border-radius'); - } - &::-webkit-progress-value { - background: theme('color', 'primary'); - border-radius: variables('progress', 'border-radius'); - } - &::-moz-progress-bar { - background: theme('color', 'primary'); - border-radius: variables('progress', 'border-radius'); - } - /// - /// STYLES - /// - @if options('progress', 'features', 'styles') { - @each $type, $color in variables.$styles { - &.#{$type}::-webkit-progress-value { - background: $color; - } - } - } - } -} diff --git a/src/Components/Progress/variables.scss b/src/Components/Progress/variables.scss deleted file mode 100644 index 51cc2ecc..00000000 --- a/src/Components/Progress/variables.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Progress -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), color theme - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'text'), -); diff --git a/src/Components/Stats/Stats.scss b/src/Components/Stats/Stats.scss deleted file mode 100644 index aab46c40..00000000 --- a/src/Components/Stats/Stats.scss +++ /dev/null @@ -1,86 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Stats -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if stats is enable -@if options('stats', 'enable') { - .#{class('stats', 'name')}, - a.#{class('stats', 'name')} { - display: inline-flex; - flex-direction: column; - background-color: transparent; - margin: variables('stats', 'margin'); - border-width: variables('stats', 'border-width'); - border-color: theme('border', 'color'); - border-style: theme('border', 'style'); - border-radius: variables('stats', 'border-radius'); - padding: variables('stats', 'padding'); - line-height: variables('stats', 'line-height'); - text-decoration: none; - transition: variables('stats', 'transition'); - >.#{class('stats', 'title')}, - >.#{class('stats', 'subtitle')}, - >.#{class('stats', 'value')} { - display: flex; - flex-direction: column; - } - >.#{class('stats', 'title')} { - font-size: variables('stats', 'title', 'font-size'); - } - >.#{class('stats', 'subtitle')} { - font-size: variables('stats', 'subtitle', 'font-size'); - margin-top: variables('stats', 'subtitle', 'margin-top'); - color: theme('color', 'grey'); - } - >.#{class('stats', 'value')} { - font-weight: variables('stats', 'value', 'font-weight'); - font-size: variables('stats', 'value', 'font-size'); - flex-direction: row; - line-height: variables('stats', 'value', 'line-height'); - align-items: center; - >img, - >.#{class('icon', 'class-name')}, - >i { - font-weight: normal; - display: inline-block; - vertical-align: baseline; - font-size: variables('stats', 'media', 'font-size'); - margin-right: variables('stats', 'media', 'margin-right'); - } - } - /// - /// STYLES - /// - @if options('stats', 'features', 'styles') { - @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { - border-color: $bg-color; - background: transparent; - color: inherit; - >.#{class('stats', 'value')} { - color: inherit; - >.#{class('icon', 'class-name')}, - >i { - color: $bg-color; - } - } - }; - } - } - } - a.#{class('stats', 'name')}:hover { - @if theme('type') == 'light' { - background-color: darken(theme('color', 'background'), 4.75%); - } @else { - background-color: lighten(theme('color', 'background'), 3.25%); - } - - } -} \ No newline at end of file diff --git a/src/Components/Stats/variables.scss b/src/Components/Stats/variables.scss deleted file mode 100644 index 05ab2d45..00000000 --- a/src/Components/Stats/variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Stats -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : lighten(theme('color', 'dark'), 7.85%), -); \ No newline at end of file diff --git a/src/Components/Tabnav/Tabnav.scss b/src/Components/Tabnav/Tabnav.scss deleted file mode 100755 index d3a7488a..00000000 --- a/src/Components/Tabnav/Tabnav.scss +++ /dev/null @@ -1,109 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tabnav -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "mixins"; -@use "variables"; - -/// if tabnav is enable -@if options('tabnav', 'enable') { - .#{class('tabnav', 'name')} { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: flex-end; - border-bottom: variables('tabnav', 'border-width') theme('border', 'style') theme('border', 'color'); - padding: 0; - &>.#{class('button', 'group')} { - box-shadow: none; - border-radius: 0; - } - /// Default button styles in Tabnav - @include mixins.tab-button-styles() { - background: transparent; - border: none; - border-radius: 0 !important; - line-height: unset; - font-size: 1.025em; - font-weight: theme('components', 'tabnav', 'font-weight'); - color: theme('color', 'text'); - padding: .935rem 1.4rem; - box-shadow: none; - border-bottom: variables('tabnav', 'border-width') solid transparent; - margin-bottom: -#{variables('tabnav', 'border-width')}; - &:hover { - color: theme('color', 'text'); - border-bottom-color: theme('color', 'grey'); - } - &:focus { - background: transparent; - } - &.#{class('tabnav', 'active')} { - border-bottom-color: theme('color', 'primary'); - i, [class^="#{class('icon', 'class-name')}"] { - color: inherit; - } - } - i, [class^="#{class('icon', 'class-name')}"] { - font-size: variables('button', 'icon', 'font-size'); - } - } - /// Bottom Tabnav - @if options('tabnav', 'features', 'bottom-position') { - &.#{class('tabnav', 'bottom')} { - border-bottom: 0; - border-top: variables('tabnav', 'border-width') theme('border', 'style') theme('color', 'secondary'); - @include mixins.tab-button-styles() { - margin-top: -#{variables('tabnav', 'border-width')}; - border-top: variables('tabnav', 'border-width') solid transparent; - border-bottom: 0; - margin-bottom: 0; - &:hover { - border-top-color: theme('color', 'grey'); - } - &.#{class('tabnav', 'active')} { - border-top-color: theme('color', 'primary'); - } - } - } - } - /// - /// STYLES - /// - @if options('tabnav', 'features', 'styles') { - @each $type-name, $color in variables.$styles { - &.#{$type-name} { - .#{class('button', 'name')}, - a.#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')}, - .#{class('button', 'dropdown')} a.#{class('button', 'name')} { - &.#{class('tabnav', 'active')} { - border-bottom-color: $color; - } - } - } - /// Bottom Tabnav - @if options('tabnav', 'features', 'bottom-position') { - &.#{$type-name}.#{class('tabnav', 'bottom')} { - .#{class('button', 'name')}, - a.#{class('button', 'name')}, - .#{class('button', 'dropdown')} .#{class('button', 'name')}, - .#{class('button', 'dropdown')} a.#{class('button', 'name')} { - &.#{class('tabnav', 'active')} { - border-top-color: $color; - } - } - } - } - } - } - &.#{class('tabnav', 'centered')} { - justify-content: center; - } - } -} diff --git a/src/Components/Tabnav/mixins.scss b/src/Components/Tabnav/mixins.scss deleted file mode 100644 index 8923d038..00000000 --- a/src/Components/Tabnav/mixins.scss +++ /dev/null @@ -1,22 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tabnav -> Mixins -/// - -@use "../../_global/_getters" as *; - -/// -/// Default button styles in Tabnav -/// -@mixin tab-button-styles() { - &>.#{class('button', 'name')}, - &>a.#{class('button', 'name')}, - &>.#{class('button', 'group')} > .#{class('button', 'name')}, - &>.#{class('button', 'group')} > a.#{class('button', 'name')}, - &>.#{class('button', 'dropdown')} > .#{class('button', 'name')}, - &>.#{class('button', 'dropdown')} > a.#{class('button', 'name')}, - &>.#{class('button', 'group')} > .#{class('button', 'dropdown')} > .#{class('button', 'name')}, - &>.#{class('button', 'group')} > .#{class('button', 'dropdown')} > a.#{class('button', 'name')} { - @content - } -} \ No newline at end of file diff --git a/src/Components/Tabnav/variables.scss b/src/Components/Tabnav/variables.scss deleted file mode 100644 index 4f173250..00000000 --- a/src/Components/Tabnav/variables.scss +++ /dev/null @@ -1,26 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tabnav -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - ( - 'success', // style name (class) - theme('color', 'success') // color - ), - ( - 'warning', // style name (class) - theme('color', 'warning') // color - ), - ( - 'error', // style name (class) - theme('color', 'error') // color - ), - ( - 'dark', // style name (class) - theme('color', 'text') // color - ) -); \ No newline at end of file diff --git a/src/Components/Timeline/Timeline.scss b/src/Components/Timeline/Timeline.scss deleted file mode 100644 index 8919fd23..00000000 --- a/src/Components/Timeline/Timeline.scss +++ /dev/null @@ -1,115 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Timeline -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if timeline is enable -@if options('timeline', 'enable') { - .#{class('timeline', 'name')} { - .#{class('timeline', 'item')} { - display: flex; - padding: variables('timeline', 'item', 'padding'); - position: relative; - flex-direction: column; - justify-content: center; - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: variables('timeline', 'border-width'); - background-color: theme('border', 'color'); - } - &:target .#{class('timeline', 'type')} { - border-color: theme('color', 'primary'); - box-shadow: 0 0 0.2em theme('color', 'primary'); - } - .#{class('timeline', 'type')} { - position: absolute; - z-index: 1; - display: flex; - width: variables('timeline', 'type-width'); - height: variables('timeline', 'type-width'); - top: 13px; - left: -(calc(variables('timeline', 'type-width') / 2px) - variables('timeline', 'border-width')); - align-items: center; - background-color: theme('color', 'secondary'); - border: 2px theme('border', 'style') theme('border', 'color'); - border-radius: 50%; - justify-content: center; - flex-shrink: 0; - @include shadow(); - /// - /// STYLES - /// - @if options('timeline', 'features', 'styles') { - @each $type, $bg-color, $color in variables.$styles { - &.#{$type} { - background-color: $bg-color; - color: $color; - border-color: darken($bg-color, 5%); - } - } - } - } - .#{class('timeline', 'author')}, - .#{class('timeline', 'body')}, - .#{class('timeline', 'date')}, - .#{class('timeline', 'actions')}, - .#{class('timeline', 'media')} { - min-width: 0; - max-width: 100%; - color: theme('color', 'text'); - flex: auto; - margin-left: 10px; - width: 100%; - } - .#{class('timeline', 'author')} { - font-weight: bold; - font-size: 1rem; - color: darken(theme('color', 'text'), 12%); - } - .#{class('timeline', 'date')} { - font-size: .9em; - opacity: .6; - } - /// - /// MEDIA - /// - @if options('timeline', 'features', 'media') { - .#{class('timeline', 'media')} { - margin-top: 16px; - display: flex; - flex-wrap: wrap; - @include embedded-media(); - img { - display: block; - } - } - /// - /// MEDIA GROUP - /// - @if options('timeline', 'features', 'media-group') { - @include media-group-specs(class('timeline', 'media')); - } - } - .#{class('timeline', 'actions')} { - margin-top: 16px; - } - &:last-child::before { - background: linear-gradient(180deg, theme('border', 'color') 45%, rgba(255,255,255,0) 100%); - } - &:first-child::before { - background: linear-gradient(0deg, theme('border', 'color') 45%, rgba(255,255,255,0) 100%); - } - } - } -} \ No newline at end of file diff --git a/src/Components/Timeline/variables.scss b/src/Components/Timeline/variables.scss deleted file mode 100644 index 580c1e84..00000000 --- a/src/Components/Timeline/variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Timeline -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - ( - "primary", // style name (class) - theme('color', 'primary'), // bg color - theme('color', 'negative') // text color - ), - ( - "success", // style name (class) - theme('color', 'success'), // bg color - theme('color', 'negative') // text color - ), - ( - "warning", // style name (class) - theme('color', 'warning'), // bg color - theme('color', 'negative') // text color - ), - ( - "error", // style name (class) - theme('color', 'error'), // bg color - theme('color', 'negative') // text color - ), - ( - "dark", // style name (class) - theme('color', 'text'), // bg color - theme('color', 'grey') // text color - ), -); \ No newline at end of file diff --git a/src/Components/Tooltip/Tooltip.scss b/src/Components/Tooltip/Tooltip.scss deleted file mode 100644 index 5b684dd1..00000000 --- a/src/Components/Tooltip/Tooltip.scss +++ /dev/null @@ -1,95 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tooltip -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if tooltip is enable -@if options('tooltip', 'enable') { - .#{class('tooltip', 'name')} { - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - cursor: default; - .#{class('tooltip', 'text')} { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - color: theme('color', 'negative'); - font-size: variables('tooltip', 'font-size'); - font-weight: variables('tooltip', 'font-weight'); - visibility: hidden; - background-color: theme('color', 'dark'); - border-radius: theme('border', 'radius'); - min-width: variables('tooltip', 'min-width'); - max-width: variables('tooltip', 'max-width'); - padding: variables('tooltip', 'padding'); - top: 120%; - opacity: 0; - transition: variables('tooltip', 'transition'); - z-index: 1; - &::after { - content: ""; - position: absolute; - top: auto; - bottom: 100%; - left: 50%; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent theme('color', 'dark') transparent; - } - } - &.#{class('tooltip', 'left')}, - &.#{class('tooltip', 'right')}, - &.#{class('tooltip', 'top')} { - &>.#{class('tooltip', 'text')} { - top: auto; - &::after { - bottom: auto; - } - } - } - &.#{class('tooltip', 'right')} { - &>.#{class('tooltip', 'text')} { - left: 110%; - &::after { - right: 100%; - left: auto; - border-color: transparent theme('color', 'dark') transparent transparent; - } - } - } - &.#{class('tooltip', 'left')} { - &>.#{class('tooltip', 'text')} { - right: 110%; - &::after { - left: 100%; - right: auto; - margin: auto -5px auto auto ; - border-color: transparent transparent transparent theme('color', 'dark'); - } - } - } - &.#{class('tooltip', 'top')} { - &>.#{class('tooltip', 'text')} { - bottom: 120%; - &::after { - top: 100%; - border-color: theme('color', 'dark') transparent transparent transparent; - } - } - } - &:hover .#{class('tooltip', 'text')} { - visibility: visible; - opacity: 1; - } - } -} \ No newline at end of file diff --git a/src/Components/Tooltip/variables.scss b/src/Components/Tooltip/variables.scss deleted file mode 100644 index 52b84502..00000000 --- a/src/Components/Tooltip/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Components : Tooltip -> Variables -/// diff --git a/src/Components/index.scss b/src/Components/index.scss deleted file mode 100644 index 7ad3a5cf..00000000 --- a/src/Components/index.scss +++ /dev/null @@ -1,20 +0,0 @@ -/// -/// Punica CSS Framework -/// Components -/// - -@forward "Alert/Alert"; -@forward "Badge/Badge"; -@forward "Billboard/Billboard"; -@forward "Breadcrumb/Breadcrumb"; -@forward "Card/Card"; -@forward "List/List"; -@forward "Menu/Menu"; -@forward "Navbar/Navbar"; -@forward "Panel/Panel"; -@forward "Process/Process"; -@forward "Progress/Progress"; -@forward "Stats/Stats"; -@forward "Tabnav/Tabnav"; -@forward "Timeline/Timeline"; -@forward "Tooltip/Tooltip"; \ No newline at end of file diff --git a/src/Elements/Button/Button.scss b/src/Elements/Button/Button.scss deleted file mode 100644 index fd14a387..00000000 --- a/src/Elements/Button/Button.scss +++ /dev/null @@ -1,163 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Button -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "../../Elements/Typography/variables" as *; -@use "variables" as *; -@use "mixins" as *; - -/// if button is enable -@if options('button', 'enable') { - a.#{class('button', 'name')}, - .#{class('button', 'name')} { - display: inline-flex; - font-family: $font-family; // typography > variables - font-size: variables('button', 'font-size'); - font-weight: theme('elements', 'button', 'font-weight'); - text-decoration: none; - white-space: nowrap; - outline: none; - width: variables('button', 'width'); - background: theme('color', 'background'); - background-image: none; - @include border(); - appearance: none; - color: theme('color', 'text'); - - /// border radius - border-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - - box-sizing: border-box; - cursor: pointer; - line-height: variables('button', 'line-height'); - padding: variables('button', 'padding'); - transition: variables('button', 'transition'); - user-select: none; - box-shadow: none; - align-items: center; - justify-content: center; - overflow: visible; - text-align: center; - &:focus, - &:hover { - transition: variables('button', 'transition'); - background-image: none; - } - &:hover { - background: theme('color', 'secondary'); - } - &:active, - &:focus { - background: theme('color', 'background'); - } - - /// - /// GRADIENT - /// - @if options('button', 'features', 'gradient') { - &.#{class('button', 'gradient')} { - z-index: 1; - position: relative; - @include set-gradient(theme('color', 'background')); - &:before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0; - transition: opacity 0.25s; - z-index: -1; - @include set-gradient(theme('color', 'background'), to bottom, 23%); - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - @include set-gradient(theme('color', 'background'), to bottom, 27%); - } - } - } - - &.#{class('button', 'active')} { - color: theme('color', 'text'); - background: theme('color', 'active'); - background-image: none; - text-decoration: none; - &:focus, - &:hover { - color: theme('color', 'text'); - background: lighten(theme('color', 'active'), 4%); - } - } - &.#{class('button', 'inactive')} { - pointer-events: none; - cursor: default; - background-image: none; - } - // Block Button - &.#{class('button', 'block')} { - display: flex; - flex: 1; - width: auto; - } - i, [class^="#{class('icon', 'class-name')}"] { - font-size: variables('button', 'icon', 'font-size'); - color: theme('color', 'text'); - text-shadow: none; - } - /// - /// STYLES - /// - @if options('button', 'features', 'styles') { - @each $theme-name, $theme-color, $border-color in $button-styles { - &.#{$theme-name} { - @include button-styles($theme-color, $border-color); - } - @if options('button', 'features', 'outlined') { - &.#{$theme-name}.#{class('button', 'outlined')} { - @include button-styles($theme-color, $border-color, true); - } - } - } - } - - // Button Link - @include link-button(); - - /// - /// SIZES - /// - @if options('button', 'features', 'sizes') { - @include button-sizes(); - } - - /// - /// SECONDARY BUTTON - /// - @if options('button', 'features', 'secondary') { - &.#{class('button', 'secondary')} { - @include secondary-button(); - } - } - } - /// - /// BUTTON GROUPS - /// - @if options('button', 'features', 'group') { - @include button-group(); - } - /// - /// DROPDOWN - /// - @if options('button', 'features', 'dropdown') { - @include dropdown(); - } -} diff --git a/src/Elements/Button/mixins.scss b/src/Elements/Button/mixins.scss deleted file mode 100644 index 76d96a55..00000000 --- a/src/Elements/Button/mixins.scss +++ /dev/null @@ -1,448 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Button -> Mixins -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_setters" as *; -@use "../../_themes/_getters" as *; -@use "variables"; - -/// -/// Dropdown -/// -@mixin dropdown() { - .#{class('button', 'dropdown')} { - display: inline-block; - position: relative; - &>.#{class('menu', 'name')} { - animation: slide-down .15s ease 1; - display: none; - left: 0; - max-height: 45vh; - overflow-y: auto; - position: absolute; - top: 100%; - z-index: 300 + 1; // menu z-index + 1 - width: auto; - &>.#{class('menu', 'item')} { - & > a { - padding: .1rem .9rem; - } - } - } - &.#{class('button', 'dropdown-right')}, - &.#{class('button', 'dropdown-left')} { - &>.#{class('menu', 'name')} { - top: 0; - } - } - &.#{class('button', 'dropdown-right')} { - &>.#{class('menu', 'name')} { - left: 100%; - right: auto; - } - } - &.#{class('button', 'dropdown-left')} { - &>.#{class('menu', 'name')} { - left: auto; - right: 100%; - } - } - &.#{class('button', 'dropdown-top')}.#{class('button', 'dropdown-left')} { - &>.#{class('menu', 'name')} { - right: auto !important; - left: 0 !important; - } - } - &.#{class('button', 'dropdown-top')}.#{class('button', 'dropdown-right')} { - &>.#{class('menu', 'name')} { - right: 0 !important; - left: auto !important; - } - } - &.#{class('button', 'dropdown-top')} { - &>.#{class('menu', 'name')} { - bottom: 100%; - top: auto; - right: 0; - left: auto; - @include shadow(0, -2px); - } - } - &.#{class('button', 'dropdown-bottom')}.#{class('button', 'dropdown-left')}, - &.#{class('button', 'dropdown-bottom')}.#{class('button', 'dropdown-right')} { - &>.#{class('menu', 'name')} { - top: 100%; - } - } - &.#{class('button', 'dropdown-bottom')}.#{class('button', 'dropdown-left')} { - &>.#{class('menu', 'name')} { - right: auto !important; - left: 0 !important; - } - } - &.#{class('button', 'dropdown-bottom')}.#{class('button', 'dropdown-right')} { - &>.#{class('menu', 'name')} { - right: 0 !important; - left: auto !important; - } - } - // dropdown hover (default) - &.#{class('menu', 'active')} > .#{class('menu', 'name')}, - &>.#{class('button', 'dropdown-toggle')}:focus + .#{class('menu', 'name')}, - &>.#{class('button', 'dropdown-toggle')}:hover + .#{class('menu', 'name')}, - &>.#{class('menu', 'name')}:focus, - &>.#{class('menu', 'name')}:hover { - display: block; - } - // clickable dropdown - &.#{class('button', 'dropdown-clickable')} { - &>.#{class('button', 'dropdown-toggle')}:hover + .#{class('menu', 'name')} { - display: none; - } - &>.#{class('button', 'dropdown-toggle')}:focus + .#{class('menu', 'name')}, - &>.#{class('button', 'dropdown-toggle')}:active + .#{class('menu', 'name')} { - display: block; - } - } - /// - /// BUTTON GROUPS - /// - @if options('button', 'features', 'group') { - &>.#{class('button', 'group')} { - &>.#{class('button', 'dropdown-toggle')}:nth-last-child(2) { - border-bottom-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - border-top-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - } - } - } - /// - /// SIZES - /// - @if options('button', 'features', 'sizes') { - @include button-sizes(true); - } - } -} - -/// -/// Button Group -/// -@mixin button-group() { - .#{class('button', 'group')} { - display: inline-flex; - flex-wrap: wrap; - flex-shrink: 0; - border-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - @include shadow(); - width: fit-content; - .#{class('button', 'name')} { - box-shadow: none; - &:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - &:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -#{theme('border', 'width')}; - } - &:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -#{theme('border', 'width')}; - } - } - /// - /// SECONDARY BUTTON - /// - @if options('button', 'features', 'secondary') { - &.#{class('button', 'secondary')} > .#{class('button', 'name')} { - @include secondary-button(); - } - } - &.#{class('button', 'block')} { - display: flex; - width: auto; - .#{class('button', 'name')} { - flex: 1 0 0; - } - } - /// - /// SIZES - /// - @if options('button', 'features', 'sizes') { - @include button-sizes(true); - } - /// - /// STYLES - /// - @if options('button', 'features', 'sizes') { - @each $theme-name, $theme-color in variables.$button-styles { - &.#{$theme-name} > .#{class('button', 'name')}, - &.#{$theme-name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { - @include button-styles($theme-color, darken($theme-color, 7%)); - } - } - } - // Button Link - @include link-button(); - /// - /// DROPDOWN - /// - @if options('button', 'features', 'dropdown') { - .#{class('button', 'dropdown')}:last-child:not(:first-child), - .#{class('button', 'dropdown')}:last-child:not(:first-child) > .#{class('button', 'name')} { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: -1px; - } - .#{class('button', 'dropdown')}:last-child, - .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:first-child, - .#{class('button', 'dropdown')}:last-child > .#{class('button', 'name')}:last-child { - border-bottom-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - border-top-right-radius: if(theme('elements', 'button', 'radius'), theme('elements', 'button', 'radius'), theme('border', 'radius')); - } - .#{class('button', 'dropdown')}:not(:first-child):not(:last-child) > .#{class('button', 'name')} { - border-radius: 0; - margin-left: -1px; - } - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - //button-class-group - box-shadow: none; - } - /// - /// VERTICAL BUTTONS - /// - @if options('button', 'features', 'vertical') { - &.#{class('button', 'vertical')} { - flex-flow: column; - >.#{class('button', 'name')}, - &.#{class('button', 'block')}, - &.#{class('button', 'block')} > .#{class('button', 'name')}, - &>.#{class('button', 'dropdown')} >.#{class('button', 'name')} { - width: 100%; - } - >.#{class('button', 'name')} { - border-radius: 0; - &:last-child:not(:first-child), - &:not(:first-child):not(:last-child) { - margin: -#{theme('border', 'width')} 0 0; - } - } - &.#{class('button', 'block')} { - display: inline-flex; - } - /// - /// DROPDOWN FOR VERTICAL BUTTONS - /// - @if options('button', 'features', 'dropdown') { - &>.#{class('button', 'dropdown')}:last-child:not(:first-child), - &>.#{class('button', 'dropdown')}:last-child:not(:first-child) > .#{class('button', 'name')}, - &>.#{class('button', 'dropdown')}:not(:first-child):not(:last-child) > .#{class('button', 'name')} { - margin: -#{theme('border', 'width')} 0 0; - border-radius: 0; - } - } - /// - /// STYLES - /// - @if options('button', 'features', 'styles') { - @each $theme-name, $theme-color in variables.$button-styles { - &>.#{$theme-name}.#{class('button', 'name')}, - &>.#{class('button', 'dropdown')} > .#{$theme-name}.#{class('button', 'name')} { - border: theme('border', 'width') solid darken($theme-color, 6%); - } - } - } - } - } - } -} - -/// -/// Button Styles -/// @param {Color} $bg-color -/// @param {Color} $border-color -/// @param {Boolean} $outlined -/// -@mixin button-styles( - $bg-color: theme('color', 'primary'), - $border-color: null, - $outlined : false -) { - /// - /// OUTLINED STYLE - /// - @if $outlined { - $textcolor: if(theme('type') == 'dark', theme('color', 'negative'), $bg-color); - background: transparent; - color: $textcolor; - i, [class^="#{class('icon', 'class-name')}"] { - color: $textcolor; - } - } @else { - background: $bg-color; - color: theme('color', 'negative'); - i, [class^="#{class('icon', 'class-name')}"] { - color: theme('color', 'negative'); - } - } - text-shadow: 0 1px 1px darken($bg-color, 6%); - border: theme('border', 'width') theme('border', 'style') $border-color; - &:hover { - background: lighten($bg-color, 7.5%); - color: theme('color', 'negative'); - i, [class^="#{class('icon', 'class-name')}"] { - color: theme('color', 'negative'); - } - } - &:active, - &.#{class('button', 'active')} { - background: lighten($bg-color, 7.5%); - color: theme('color', 'negative'); - &:focus, - &:hover { - background: lighten($bg-color, 12.5%); - } - } - - /// - /// GRADIENT - /// Gradient is not for outlined style - /// - @if $outlined != true { - @if options('button', 'features', 'gradient') { - &.#{class('button', 'gradient')} { - background: $bg-color; - z-index: 1; - position: relative; - @include set-gradient($bg-color, to top); - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - @include set-gradient($bg-color, to bottom, 23%); - opacity: 0; - transition: opacity 0.25s; - z-index: -1; - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - background: $bg-color; - @include set-gradient($bg-color, to bottom, 27%); - } - } - /// Gradient Left-To-Right - &.#{class('button', 'gradient')}#{'-ltr'} { - background: linear-gradient(125deg, lighten($bg-color, 21%), darken($bg-color, 5%)); - } - /// Gradient Right-To-Left - &.#{class('button', 'gradient')}#{'-rtl'} { - background: linear-gradient(-125deg, lighten($bg-color, 21%), darken($bg-color, 5%)); - } - &.#{class('button', 'gradient')}#{'-ltr'}, - &.#{class('button', 'gradient')}#{'-rtl'} { - z-index: 1; - position: relative; - &:before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0; - transition: opacity 0.25s; - z-index: -1; - background: linear-gradient(0deg, lighten($bg-color, 21%), darken($bg-color, 2%)); - } - &:hover::before { - opacity: 1; - } - &:active::before, - &:focus::before { - background: linear-gradient(0deg, lighten($bg-color, 25%), $bg-color); - } - } - } - } - @content; -} - -/// -/// Button Sizes -/// @param {Boolean} $class-name -/// -@mixin button-sizes($class-name: false) { - @each $name, $font-size, $padding in variables.$button-sizes { - @if $class-name { - &.#{$name} > .#{class('button', 'name')}, - &.#{$name} > .#{class('button', 'dropdown')} > .#{class('button', 'name')} { - font-size: $font-size; - padding: $padding; - } - } @else { - &.#{$name} { - font-size: $font-size; - padding: $padding; - } - } - } -} - -/// -/// Secondary Button -/// -@mixin secondary-button( - $color: theme('elements', 'button', 'secondary', 'color'), - $hover-color: theme('elements', 'button', 'secondary', 'hover-color'), - $hover-bg: theme('elements', 'button', 'secondary', 'hover-bg'), - $border-color: theme('elements', 'button', 'secondary', 'border-color'), -) { - $setColor: if($color, $color, theme('color', 'text')); - color: $setColor; - border-color: if($border-color, $border-color, theme('border', 'color')); - background: theme('elements', 'button', 'secondary', 'background'); - &:focus, - &:hover, - &:active, - &.#{class('button', 'active')} { - color: if($hover-color, $hover-color, $setColor); - background: theme('elements', 'button', 'secondary', 'hover-bg'); - //z-index: 1; - } - i, [class^="#{class('icon', 'class-name')}"] { - color: $setColor; - } -} - -/// -/// Link Button -/// -@mixin link-button() { - &.#{class('button', 'link')}.#{class('button', 'name')}, - &.#{class('tooltip', 'top')} > .#{class('button', 'name')} { - @include button-styles(transparent) { - box-shadow: none; - border: none; - color: theme('color', 'primary'); - text-decoration: underline; - font-weight: theme('typography', 'font-weight'); - &:hover { - color: theme('color', 'text'); - } - i, [class^="#{class('icon', 'class-name')}"] { - color: theme('color', 'text'); - } - }; - } -} diff --git a/src/Elements/Button/variables.scss b/src/Elements/Button/variables.scss deleted file mode 100644 index b1f23374..00000000 --- a/src/Elements/Button/variables.scss +++ /dev/null @@ -1,64 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Button -> Variables -/// - -@use "../../_themes/_getters" as *; - -// SIZES ================================================ -$button-sizes: ( - ( - "tiny", // size name (class) - .809em, // font-size - .415rem .5rem // padding - ), - ( - "mini", // size name (class) - .909em, // font-size - .445rem .9rem // padding - ), - ( - "small", // size name (class) - .979em, // font-size - .645rem 1.4rem // padding - ), - ( - "large", // size name (class) - 1.25em, // font-size - 1.15rem 2.1rem // padding - ), - ( - "huge", // size name (class) - 1.45em, // font-size - 1.3rem 2.4rem // padding - ) -); - -/// STYLES ============================================== -$button-styles: ( - ( - 'primary', // class name - theme('color', 'primary'), // bg color - lighten(theme('color', 'primary'), 7%) // border color - ), - ( - 'success', // class name - theme('color', 'success'), // bg color - lighten(theme('color', 'success'), 7%) // border color - ), - ( - 'warning', // class name - theme('color', 'warning'), // bg color - lighten(theme('color', 'warning'), 7%) // border color - ), - ( - 'error', // class name - theme('color', 'error'), // bg color - lighten(theme('color', 'error'), 7%) // border color - ), - ( - 'dark', // class name - theme('color', 'dark'), // bg color - lighten(theme('color', 'dark'), 7%) // border color - ) -); diff --git a/src/Elements/Caption/Caption.scss b/src/Elements/Caption/Caption.scss deleted file mode 100644 index b017b544..00000000 --- a/src/Elements/Caption/Caption.scss +++ /dev/null @@ -1,80 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Caption -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_setters" as *; -@use "../../_themes/_getters" as *; -@use "variables"; - -/// if caption is enable -@if options('caption', 'enable') { - .#{class('caption', 'name')} { - display: flex; - align-items: center; - margin: variables('caption', 'margin'); - font-size: variables('caption', 'font-size'); - font-weight: theme('typography', 'header-weight'); - line-height: theme('typography', 'line-height') - .2; - text-align: left; - >img, - >.#{class('icon', 'class-name')}, - >i { - margin-right: variables('caption', 'media', 'margin'); - } - >.#{class('icon', 'class-name')}, - >i { - font-size: variables('caption', 'font-size') * 1.4; - } - &.#{class('caption', 'divided')} { - border-bottom: set-border(); - padding-bottom: variables('caption', 'media', 'margin'); - } - &>span, - &>div { - /// ..children of a flex container are - /// forced to have a block-flavored display type. - display: contents; - } - &.#{class('caption', 'centered')} { - flex-direction: column; - text-align: center; - margin: inherit; - >img, - >.#{class('icon', 'class-name')}, - >i { - margin-right: unset; - margin-bottom: 2rem; - } - } - /// - /// SIZES - /// - @if options('caption', 'features', 'sizes') { - @each $size-name, $margin, $font-size, $font-weight in variables.$caption-sizes { - @include set-size($font-size, null, $size-name) { - margin: $margin; - font-weight: $font-weight; - >.#{class('icon', 'class-name')}, - >i { - font-size: $font-size * 1.4; - } - }; - } - } - // - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - flex-direction: column; - text-align: center; - margin: inherit; - >img, - >.#{class('icon', 'class-name')}, - >i { - margin-right: unset; - margin-bottom: 2rem; - } - } - } -} \ No newline at end of file diff --git a/src/Elements/Caption/variables.scss b/src/Elements/Caption/variables.scss deleted file mode 100644 index a44ca1cb..00000000 --- a/src/Elements/Caption/variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Caption -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// SIZES =============================================== -$caption-sizes: ( - ( - "small", // size name (class) - 1em .1rem, // margin - 1.65rem, // font-size - theme('typography', 'font-weight') // font-weight - ), - ( - "large", // size name (class) - 1.4em .3rem, // margin - 2.35rem, // font-size - theme('typography', 'header-weight') // font-weight - ) -); \ No newline at end of file diff --git a/src/Elements/Form/Form.scss b/src/Elements/Form/Form.scss deleted file mode 100644 index 94d36c23..00000000 --- a/src/Elements/Form/Form.scss +++ /dev/null @@ -1,264 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Form -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_global/variables" as *; -@use "../../_themes/_getters" as *; -@use "variables"; -@use "mixins"; - -/// if form is enable -@if options('form', 'enable') { - @include mixins.form-inputs() { - -webkit-appearance: none; - background-color: theme('input', 'background'); - border-width: theme('border', 'width'); - border-style: theme('border', 'style'); - border-color: if(theme('input', 'border-color'), theme('input', 'border-color'), theme('border', 'color')); - height: variables('form', 'input', 'height'); - border-radius: variables('form', 'input', 'border-radius'); - outline: theme('input', 'outline-width') solid transparent; - box-shadow: none; - box-sizing: inherit; - outline-offset: -#{theme('input', 'outline-width')}; - padding: variables('form', 'input', 'padding'); - width: 100%; - max-width: 100%; - font-family: inherit; - color: if(theme('input', 'color'), theme('input', 'color'), theme('color', 'text')); - font-size: variables('form', 'input', 'font-size'); - transition: theme('input', 'transition'); - &:focus { - outline: theme('input', 'outline-width') solid theme('input', 'outline-color'); - outline-offset: -#{theme('input', 'outline-width')}; - background-color: lighten(theme('input', 'background'), 5.5%); - } - /// - /// VALIDATION STYLES - /// - @if options('form', 'features', 'validation-styles') { - @each $style-name, $style-color in variables.$input-styles { - &.#{$style-name} { - color: $style-color; - outline-color: $style-color; - } - } - } - }; - select { - background-image: - url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNnoiLz48L3N2Zz4="); - background-repeat: no-repeat; - background-position: right 10px center; - &[multiple] { - background: none; - height: auto; - } - } - textarea { - min-height: 6.5rem; - resize: vertical; - } - label, - legend { - display: block; - font-size: 1rem; - font-weight: theme('typography', 'font-weight'); - } - fieldset { - border-width: 0; - padding: 0; - } - input[type='checkbox'], - input[type='radio'] { - display: inline; - } - input:disabled { - opacity: .59; - } - .#{class('form', 'name')} { - position: relative; - max-width: 100%; - padding: variables('form', 'padding'); - .#{class('form', 'item')} { - height: fit-content; - margin: variables('form', 'item', 'margin'); - display: inline-flex; - flex-wrap: wrap; - width: 100%; - max-width: 100%; - position: relative; - align-items: center; - @at-root .#{class('form', 'name')} label, - &>label { - margin: variables('form', 'label', 'margin'); - color: theme('color', 'text'); - font-size: variables('form', 'label', 'font-size'); - font-weight: theme('input', 'label-weight'); - text-transform: none; - height: fit-content; - } - /// - /// Custom file input - /// - @if options('form', 'features', 'upload') { - > input[type="file"] { - opacity: 0; - position: absolute; - top: 0; - left: 0; - height: 100%; - cursor: default; - } - } - /// - /// FORM GROUPS - /// - @if options('form', 'features', 'group') { - @at-root .#{class('form', 'name')} .#{class('form', 'group')}, - &>.#{class('form', 'group')} { - display: flex; - width: 100%; - >* { - flex: 1 1 auto; - &:last-child { - margin-left: -1px; - } - &:not(:first-child):not(:last-child) { - margin-left: -1px; - margin-right: 0; - } - } - >.#{class('button', 'group')} { - box-shadow: none; - } - >.#{class('button', 'name')} { - height: variables('form', 'input', 'height'); - box-shadow: none; - &:first-child { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - &:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } - } - } - } - .#{class('form', 'items')} { - margin: variables('form', 'items', 'margin'); - display: flex; - flex-wrap: wrap; - &>.#{class('form', 'item')} { - margin: variables('form', 'item', 'margin'); - } - } - @each $name, $number in $grids { - .#{$name}.#{class('form', 'items')} { - >.#{class('form', 'item')} { - flex: 0 0 calc(100% * (1 / #{$number}) - (2 * #{variables('form', 'item', 'margin')})); - } - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{$name}.#{class('form', 'name')} { - .#{$name}.#{class('form', 'items')} { - >.#{class('form', 'item')} { - flex: 0 0 100%; - } - } - } - } - } - /// - /// INPUT SIZES - /// - @if options('form', 'features', 'sizes') { - @each $size-name, $font-size, $input-height, $button-padding, $button-font-size in variables.$input-sizes { - &.#{$size-name} { - @include mixins.form-inputs() { - height: $input-height; - font-size: $font-size; - } - .#{class('button', 'name')} { - height: $input-height !important; - font-size: $button-font-size !important; - padding: $button-padding !important; - } - @at-root .#{class('form', 'name')}.#{$size-name} label, - &>.#{class('form', 'items')}>.#{class('form', 'item')}>label, - &>.#{class('form', 'item')}>label { - font-size: $font-size; - } - } - } - } - } - /// - /// CHECKBOX & RADIO - /// - @if options('form', 'features', 'checkbox-radio') { - .#{class('form', 'radio')}, - .#{class('form', 'checkbox')} { - position: relative; - label { - padding: variables('form', 'radio-checkbox', 'label-padding'); - cursor: pointer; - user-select: none; - font-weight: theme('typography', 'font-weight'); - margin: 0; - } - input { - left: 0; - opacity: 0; - position: absolute; - top: 0; - } - input + label::before, - input + label::after { - position: absolute; - transition: opacity 0.11s ease-in-out; - font-family: '#{variables('icon', 'font-family')}'; - font-style: normal; - font-weight: normal; - text-transform: none; - font-size: variables('form', 'radio-checkbox', 'font-size'); - top: variables('form', 'radio-checkbox', 'top'); - left: variables('form', 'radio-checkbox', 'left'); - } - input + label::before { - opacity: 1; - } - input + label::after { - opacity: 0; - } - input:checked + label::after { - opacity: 1; - } - } - .#{class('form', 'checkbox')} { - input + label::before { - content: variables('icon', 'form', 'checkbox-before'); - color: theme('color', 'text'); - } - input + label::after { - content: variables('icon', 'form', 'checkbox-after'); - color: theme('color', 'primary'); - } - } - .#{class('form', 'radio')} { - input + label::before { - content: variables('icon', 'form', 'radio-before'); - color: theme('color', 'text'); - } - input + label::after { - content: variables('icon', 'form', 'radio-after'); - color: theme('color', 'primary'); - } - } - } -} diff --git a/src/Elements/Form/mixins.scss b/src/Elements/Form/mixins.scss deleted file mode 100644 index ee3365f4..00000000 --- a/src/Elements/Form/mixins.scss +++ /dev/null @@ -1,27 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Form -> Mixins -/// - -@mixin form-inputs() { - input[type='color'], - input[type='date'], - input[type='time'], - input[type='datetime'], - input[type='datetime-local'], - input[type='email'], - input[type='month'], - input[type='number'], - input[type='password'], - input[type='search'], - input[type='tel'], - input[type='text'], - input[type='url'], - input[type='week'], - input[type='file'], - input:not([type]), - textarea, - select { - @content; - } -} \ No newline at end of file diff --git a/src/Elements/Form/variables.scss b/src/Elements/Form/variables.scss deleted file mode 100644 index d61818a5..00000000 --- a/src/Elements/Form/variables.scss +++ /dev/null @@ -1,38 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Form -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// SIZES =============================================== -// [*] referenced from button variables -$input-sizes: ( - ( - 'small', // class name - 1em, // font-size - 1.9rem, // input height - .645rem 1.4rem, // button padding[*] - .979em // button font size[*] - ), - ( - 'large', // class name - 1.2em, // font-size - 2.9rem, // input height - 1.15rem 2.1rem, // button padding[*] - 1.25em // button font size[*] - ) -); - -/// STYLES ============================================== -// for input validations -$input-styles: ( - ( - 'success', // class name - theme('color', 'success') // color - ), - ( - 'error', // class name - theme('color', 'error') // color - ) -); diff --git a/src/Elements/Icon/Icon.scss b/src/Elements/Icon/Icon.scss deleted file mode 100644 index 93d79cc3..00000000 --- a/src/Elements/Icon/Icon.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Icon -/// - -@use "../../_global/_getters" as *; - -/// if icon is enable -@if options('icon', 'enable') { - .#{class('icon', 'class-name')} { - font-size: variables('icon', 'font-size'); - line-height: variables('icon', 'line-height'); - vertical-align: variables('icon', 'vertical-align'); - } -} \ No newline at end of file diff --git a/src/Elements/Icon/variables.scss b/src/Elements/Icon/variables.scss deleted file mode 100644 index 9ec465ac..00000000 --- a/src/Elements/Icon/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Icon -> Variables -/// \ No newline at end of file diff --git a/src/Elements/Label/Label.scss b/src/Elements/Label/Label.scss deleted file mode 100644 index 22ab1e86..00000000 --- a/src/Elements/Label/Label.scss +++ /dev/null @@ -1,50 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Label -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; -@use "variables"; - -/// if label is enable -@if options('label', 'enable') { - a.#{class('label', 'name')}, - .#{class('label', 'name')} { - @include set-style(theme('color', 'background'), theme('color', 'text')) { - display: inline-block; - font-weight: bold; - line-height: 1.2; - margin: variables('label', 'margin'); - border-radius: theme('border', 'radius'); - text-decoration: none; - @include border(); - @include shadow(0, .155em, 0, rgba(0, 0, 0, 0.095)); - border-color: theme('border', 'color'); - @include set-size(variables('label', 'font-size'), variables('label', 'padding')); - >i, - >.material-icons { - vertical-align: text-top; - } - }; - /// - /// STYLES - /// - @if options('label', 'features', 'styles') { - @each $style-name, $bg-color in variables.$styles { - @include set-style($bg-color, theme('color', 'negative'), $style-name) { - border-color: darken($bg-color, 7%); - }; - } - } - /// - /// SIZES - /// - @if options('label', 'features', 'sizes') { - @each $size-name, $padding, $font-size in variables.$sizes { - @include set-size($font-size, $padding, $size-name); - } - } - } -} \ No newline at end of file diff --git a/src/Elements/Label/variables.scss b/src/Elements/Label/variables.scss deleted file mode 100644 index a967e218..00000000 --- a/src/Elements/Label/variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Label -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// STYLES ============================================== -$styles: ( - // style name (class), theme variable - "primary" : theme('color', 'primary'), - "success" : theme('color', 'success'), - "warning" : theme('color', 'warning'), - "error" : theme('color', 'error'), - "dark" : theme('color', 'dark'), -); - -/// SIZES =============================================== -$sizes: ( - ( - "small", // size name (class) - .18rem .85rem, // padding - .8195em // font-size - ), - ( - "large", // size name (class) - .415rem 1.159rem, // padding - 1em // font-size - ) -); \ No newline at end of file diff --git a/src/Elements/Table/Table.scss b/src/Elements/Table/Table.scss deleted file mode 100644 index 20ac1a7b..00000000 --- a/src/Elements/Table/Table.scss +++ /dev/null @@ -1,82 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Table -/// - -@use "../../_global/_getters" as *; -@use "../../_themes/_getters" as *; -@use "../../_themes/_setters" as *; - -/// if table is enable -@if options('table', 'enable') { - .#{class('table', 'name')} { - position: relative; - border-collapse: collapse; - border-spacing: 0; - width: 100%; - max-width: 100%; - text-align: left; - margin-bottom: 1.5rem; - caption { - text-align: inherit; - color: theme('color', 'text'); - font-size: 1rem; - font-weight: bold; - padding: variables('table', 'th', 'padding'); - border-bottom: theme('border', 'width') theme('border', 'style') theme('color', 'text'); - } - /// - /// STRIPED - /// - @if options('table', 'features', 'striped') { - &.#{class('table', 'striped')} { - tr, - tbody tr { - &.#{class('table', 'active')} { - background: theme('color', 'secondary'); - } - &:nth-of-type(odd) { - background: theme('color', 'secondary'); - } - } - } - } - /// - /// HOVERED - /// - @if options('table', 'features', 'hovered') { - &.#{class('table', 'hovered')} { - tr, - tbody tr { - &:hover { - background: theme('color', 'secondary'); - color: theme('color', 'text'); - } - } - } - } - tr, - tbody tr { - transition: all 0.3s; - &.#{class('table', 'active')}, - &.#{class('table', 'active')}:hover { - background: theme('color', 'secondary'); - } - } - td, - th { - border-bottom: set-border(); - padding: variables('table', 'td', 'padding'); - text-align: inherit; - } - thead tr { - background: transparent !important; - th { - border-bottom-color: theme('border', 'color'); - font-weight: theme('typography', 'font-weight'); - color: theme('color', 'grey'); - padding: variables('table', 'th', 'padding'); - } - } - } -} \ No newline at end of file diff --git a/src/Elements/Table/variables.scss b/src/Elements/Table/variables.scss deleted file mode 100644 index 81c50620..00000000 --- a/src/Elements/Table/variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Table -> Variables -/// \ No newline at end of file diff --git a/src/Elements/Typography/Typography.scss b/src/Elements/Typography/Typography.scss deleted file mode 100644 index 42ea45be..00000000 --- a/src/Elements/Typography/Typography.scss +++ /dev/null @@ -1,82 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Typography -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "../../_themes/_getters" as *; -@use "variables"; - -/// Headers -@each $header, $font-size, $responsive-size in variables.$headers { - #{$header} { - margin-top: 0; - color: inherit; - line-height: 2; - margin-bottom: 1em; - } - #{$header}, - .#{$header} { - font-size: $font-size; - font-weight: theme('typography', 'header-weight'); - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - #{$header}, - .#{$header} { - font-size: $responsive-size; - } - } -} -h1.bordered, -h2.bordered, -h3.bordered, -h4.bordered, -h5.bordered, -h6.bordered, -.h1.bordered, -.h2.bordered, -.h3.bordered, -.h4.bordered, -.h5.bordered, -.h6.bordered { - border-width: 0 0 theme('border', 'width') 0 !important; - padding-bottom: 10px; - margin-bottom: 20px; -} -p { - margin: 0 0 1em; - font-size: 1rem; -} -a, ins, u { - text-decoration-skip: ink edges; -} -abbr[title] { - border-bottom: 1px dotted; - cursor: help; - text-decoration: none; -} -blockquote { - border-left: .1rem dotted theme('color', 'dark'); - margin-left: 0; - padding: .4rem .8rem; - font-style: italic; - color: theme('color', 'text'); -} -small { - font-size: 86%; -} -sub, -sup { - font-size: 78%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} \ No newline at end of file diff --git a/src/Elements/Typography/variables.scss b/src/Elements/Typography/variables.scss deleted file mode 100644 index 4d60fc4c..00000000 --- a/src/Elements/Typography/variables.scss +++ /dev/null @@ -1,47 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements : Typography -> Variables -/// - -@use "../../_themes/_getters" as *; - -/// -/// Google Fonts -/// @link https://developers.google.com/fonts/docs/css2 -/// -@import url('https://fonts.googleapis.com/css2?family=#{theme('google-font', 'name')}:wght@#{theme('google-font', 'weights')}&display=swap'); - -/// PREFERENCES ========================================= -$font-family: theme('typography', 'font-family'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; -$headers: ( - ( - "h1", // class name - 2em, // font-size - 1.7em // responsive font-size - ), - ( - "h2", // class name - 1.8em, // font-size - 1.5em // responsive font-size - ), - ( - "h3", // class name - 1.6em, // font-size - 1.3em // responsive font-size - ), - ( - "h4", // class name - 1.4em, // font-size - 1.1em // responsive font-size - ), - ( - "h5", // class name - 1.2em, // font-size - .9em // responsive font-size - ), - ( - "h6", // class name - 1em, // font-size - inherit // responsive font-size - ) -); \ No newline at end of file diff --git a/src/Elements/index.scss b/src/Elements/index.scss deleted file mode 100644 index 5eeb60cd..00000000 --- a/src/Elements/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -/// -/// Punica CSS Framework -/// Elements -/// - -@forward "Button/Button"; -@forward "Caption/Caption"; -@forward "Form/Form"; -@forward "Typography/Typography"; -@forward "Table/Table"; -@forward "Icon/Icon"; -@forward "Label/Label"; \ No newline at end of file diff --git a/src/Layout/Base/Base.scss b/src/Layout/Base/Base.scss deleted file mode 100644 index 72e8e4c0..00000000 --- a/src/Layout/Base/Base.scss +++ /dev/null @@ -1,123 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout : Base -/// - -@use "../../_themes/_getters" as *; -@use "../../Elements/Typography/variables"; - -/*! - * PUNICA CSS - #{theme('name')} - * v2.8.20 build 1054 - * - * @link http://www.punicacss.com - * @link http://github.com/codeforms/Punica-CSS-Framework - * - * Released under the MIT license - * @link http://opensource.org/licenses/MIT - */ - -*, -*:after, -*:before { - box-sizing: inherit; - border: 0 solid theme('border', 'color'); -} -* { - margin: 0; - padding: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important; -} -html { - box-sizing: border-box; - -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: transparent; -} -body { - font-family: variables.$font-family; // typography > variables - font-size: theme('typography', 'font-size'); - font-weight: theme('typography', 'font-weight'); - line-height: theme('typography', 'line-height'); - color: theme('color', 'text'); - background-color: theme('color', 'background'); -} -html, body { - min-height: 100%; - height: 100%; - padding: 0; - margin: 0; - border: none; -} -::selection { - background-color: theme('color', 'primary'); - color: theme('color', 'negative'); -} -::placeholder { - color: theme('color', 'text'); - opacity: .5; -} -a { - color: theme('color', 'text'); - outline: none; - text-decoration: none; - &:focus, - &:hover { - color: theme('color', 'primary'); - text-decoration: underline; - } -} -hr { - margin: 15px 0; - background-color: theme('border', 'color'); - border: none; - height: 1px; -} -/* List */ -ul, ol { - margin: .8rem 0 .8rem .8rem; - padding: 0; - ul, ol { - margin: .8rem 0 .8rem .8rem; - } - li { - margin-top: .4rem; - } -} -ul { - list-style: disc inside; -} -ol { - list-style: decimal inside; -} -dl { - dt { - font-weight: bold; - } -} -/* embedded content */ -img, -canvas, -embed, -object, -video { - max-width: 100%; - height: auto; - box-sizing: border-box; -} -img { - border-style: none; -} -iframe { - outline: 0; -} -:not(pre)>code, -:not(pre)>kbd, -:not(pre)>samp { - color: theme('color', 'error'); - white-space: nowrap; - padding: 2px 6px; - font-size: 1em; -} \ No newline at end of file diff --git a/src/Layout/Grid/Grid.scss b/src/Layout/Grid/Grid.scss deleted file mode 100644 index 200a4b76..00000000 --- a/src/Layout/Grid/Grid.scss +++ /dev/null @@ -1,68 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout : Grid -/// - -@use "../../_global/_getters" as *; -@use "../../_global/mixins" as *; -@use "variables" as *; - -/// if grid is enable -@if options('grid', 'enable') { - .#{class('grid', 'container')} { - width: variables('grid', 'container', 'width'); - margin: variables('grid', 'container', 'margin'); - padding: 0 variables('grid', 'container', 'padding'); - } - @include breakpoints(variables('grid', 'breakpoints', 'medium'), 'max-width') { - .#{class('grid', 'container')} { - padding: 0 calc(variables('grid', 'container', 'padding') / 3); - } - } - .#{class('grid', 'row')} { - display: grid; - grid-gap: variables('grid', 'gap'); - grid-template-columns: repeat(variables('grid', 'columns', 'size'), 1fr); - &> [class^="#{class('grid', 'column')}"] { - height: fit-content; - padding: variables('grid', 'columns', 'padding'); - min-height: variables('grid', 'columns', 'min-height'); - } - /// Equal height - @if options('grid', 'features', 'equal') { - &.#{class('grid', 'equal')} > [class^="#{class('grid', 'column')}"] { - height: auto; - } - } - } - // Default Grid System - @for $id from 1 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$id} { - grid-column: span #{$id}; - } - } - // Breakpoints - @each $label, $breakpoint in $viewports { - @include breakpoints($breakpoint) { - @for $id from 1 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$label}-#{$id} { - grid-column: span #{$id}; - } - } - } - } - // Offset - @if options('grid', 'features', 'offset') { - @each $label, $breakpoint in $viewports { - @include breakpoints($breakpoint) { - @for $id from 1 through variables('grid', 'columns', 'size') { - @for $offset-id from 2 through variables('grid', 'columns', 'size') { - .#{class('grid', 'column')}-#{$label}-#{$id}.#{class('grid', 'offset')}-#{$label}-#{$offset-id} { - grid-column: #{$offset-id} / span #{$id}; - } - } - } - } - } - } -} diff --git a/src/Layout/Grid/variables.scss b/src/Layout/Grid/variables.scss deleted file mode 100644 index 3fae7132..00000000 --- a/src/Layout/Grid/variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout : Grid -> Variables -/// - -@use "../../_global/_getters" as *; - -/// PREFERENCES ========================================= -$viewports: ( - (class('grid', 'extra-small'), variables('grid', 'breakpoints', 'extra-small')), - (class('grid', 'small'), variables('grid', 'breakpoints', 'small')), - (class('grid', 'medium'), variables('grid', 'breakpoints', 'medium')), - (class('grid', 'large'), variables('grid', 'breakpoints', 'large')), - (class('grid', 'extra-large'), variables('grid', 'breakpoints', 'extra-large')), - (class('grid', 'extra-extra-large'), variables('grid', 'breakpoints', 'extra-extra-large')) -); diff --git a/src/Layout/index.scss b/src/Layout/index.scss deleted file mode 100644 index 21eb7179..00000000 --- a/src/Layout/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -/// -/// Punica CSS Framework -/// Layout -/// - -@forward "Base/Base"; -@forward "Grid/Grid"; \ No newline at end of file diff --git a/src/Utilities/_config/_specs.scss b/src/Utilities/_config/_specs.scss deleted file mode 100644 index 305161c4..00000000 --- a/src/Utilities/_config/_specs.scss +++ /dev/null @@ -1,25 +0,0 @@ -/// -/// Punica CSS Framework -/// Utilities : Helpers -> Specs -/// - -$specs: ( - "spaces" : (0,5,10,15,20,30,40,50,75,100,125,150,175,200), // padding and margin (px) - "font-weight" : (100,200,300,400,500,600,700,800,900,normal,bold,bolder,lighter), - "borders" : (0,1,2,3,4,5), // border width (px) - "border-radius" : (2,4,8,10,12,14,16,500), // (px) - "orders" : (1,2,3,4,5), - "line-height" : (0,1,2,3,4,5), - "z-index" : (-1,0,1,10,20,30,40,50,100,999,9999,99999), - "sizes" : ( - // used for padding, margin, width and height - ("tiny", 1rem), // 16px - ("mini", 2rem), // 32px - ("small", 4rem), // 64px - ("large", 8rem), // 128px - ("big", 10rem), // 160px - ("huge", 12rem), // 190px - ("massive", 18rem), // 288px - ("giant", 24rem) // 384px - ), -); \ No newline at end of file diff --git a/src/Utilities/_config/align-content.scss b/src/Utilities/_config/align-content.scss deleted file mode 100644 index f6487d53..00000000 --- a/src/Utilities/_config/align-content.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// -/// Align Content -/// -/// The align-content property specifies -/// how flex lines are distributed along the -/// cross axis in a flexbox container. -/// -$align-content: ( - // class name, value - ("align-content-stretch", stretch), - ("align-content-center", center), - ("align-content-start", flex-start), - ("align-content-end", flex-end), - ("align-content-between", space-between), - ("align-content-around", space-around), - ("align-content-evenly", space-evenly), - ("align-content-initial", initial), - ("align-content-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/align-items.scss b/src/Utilities/_config/align-items.scss deleted file mode 100644 index 6688b9b4..00000000 --- a/src/Utilities/_config/align-items.scss +++ /dev/null @@ -1,16 +0,0 @@ -/// -/// Align Items -/// -/// The align-items property specifies the default alignment -/// for items inside a flexbox or grid container. -/// -$align-items: ( - // class name, value - ("align-items-baseline", baseline), - ("align-items-start", flex-start), - ("align-items-end", flex-end), - ("align-items-center", center), - ("align-items-stretch", stretch), - ("align-items-initial", initial), - ("align-items-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/align-self.scss b/src/Utilities/_config/align-self.scss deleted file mode 100644 index f94e8712..00000000 --- a/src/Utilities/_config/align-self.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Align Self -/// -/// The align-self property specifies the alignment -/// in the block direction for the selected item -/// inside a flexbox or grid container. -/// -$align-self: ( - // class name, value - ("align-self-auto", auto), - ("align-self-baseline", baseline), - ("align-self-start", flex-start), - ("align-self-end", flex-end), - ("align-self-center", center), - ("align-self-stretch", stretch), - ("align-self-initial", initial), - ("align-self-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/backdrop-filter.scss b/src/Utilities/_config/backdrop-filter.scss deleted file mode 100644 index 81d30735..00000000 --- a/src/Utilities/_config/backdrop-filter.scss +++ /dev/null @@ -1,30 +0,0 @@ -/// -/// Backdrop Filter -/// -/// The backdrop-filter property is used to apply -/// a graphical effect to the area behind an element. -/// -$backdrop-blur-ranges: ( - // (values, suffixes) - (4px,4)(7px,7)(10px,10)(12px,12)(16px,16)(20px,20) -); -$backdrop-blur: ( - // class name (prefix), filter function - ("backdrop-blur-", "blur"), -); -$backdrop-filter-ranges: ( - // (values, suffixes) - (0,0)(.25,25)(.5,50)(.75,75)(1,100)(1.25,125)(1.5,150)(1.75,175)(2,200) -); -$backdrop-filters: ( - // class name (prefix), filter function - ("backdrop-brightness-", "brightness"), - ("backdrop-contrast-", "contrast"), - //("backdrop-shadow-", "drop-shadow"), - ("backdrop-grayscale-", "grayscale"), - //("backdrop-hue-", "hue-rotate"), - ("backdrop-invert-", "invert"), - ("backdrop-opacity-", "opacity"), - ("backdrop-saturate-", "saturate"), - ("backdrop-sepia-", "sepia"), -); \ No newline at end of file diff --git a/src/Utilities/_config/bg-colors.scss b/src/Utilities/_config/bg-colors.scss deleted file mode 100644 index b232018d..00000000 --- a/src/Utilities/_config/bg-colors.scss +++ /dev/null @@ -1,24 +0,0 @@ -/// -/// Background Colors -/// -/// The background-color property sets -/// the background color of an element. The background of -/// an element is the total size of the element, -/// including padding and border (but not the margin). -/// - -@use "../../_themes/_getters" as *; - -$bg-colors: ( - // class name, value - ("bg-color", theme('color', 'background')), - ("bg-grey", theme('color', 'grey')), - ("bg-secondary", theme('color', 'secondary')), - ("bg-white", white), - ("bg-black", black), - ("bg-dark", theme('color', 'dark')), - ("bg-primary", theme('color', 'primary')), - ("bg-success", theme('color', 'success')), - ("bg-warning", theme('color', 'warning')), - ("bg-error", theme('color', 'error')) -); \ No newline at end of file diff --git a/src/Utilities/_config/border-radius.scss b/src/Utilities/_config/border-radius.scss deleted file mode 100644 index 5245cbde..00000000 --- a/src/Utilities/_config/border-radius.scss +++ /dev/null @@ -1,10 +0,0 @@ -/// -/// Border Radius -/// -/// The border-radius property defines -/// the radius of the element's corners. -/// -$border-radius: ( - // class name (prefix), property - "radius-": "border-radius" -); \ No newline at end of file diff --git a/src/Utilities/_config/border-style.scss b/src/Utilities/_config/border-style.scss deleted file mode 100644 index 91154136..00000000 --- a/src/Utilities/_config/border-style.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Border Styles -/// -/// The border-style property sets -/// the style of an element's four borders. -/// -$border-styles: ( - // class name, value - ("border-solid", solid), - ("border-dashed", dashed), - ("border-dotted", dotted), - ("border-double", double), - ("border-groove", groove), - ("border-ridge", ridge) -); \ No newline at end of file diff --git a/src/Utilities/_config/border.scss b/src/Utilities/_config/border.scss deleted file mode 100644 index 8153ac52..00000000 --- a/src/Utilities/_config/border.scss +++ /dev/null @@ -1,14 +0,0 @@ -/// -/// Border -/// -/// The border property is a shorthand property for -/// border-width, border-style and border-color. -/// -$borders:( - // class name (prefix), property - ("border-", "border-width") - ("border-top-", "border-top-width") - ("border-right-", "border-right-width") - ("border-bottom-", "border-bottom-width") - ("border-left-", "border-left-width") -); \ No newline at end of file diff --git a/src/Utilities/_config/cursors.scss b/src/Utilities/_config/cursors.scss deleted file mode 100644 index 41a26454..00000000 --- a/src/Utilities/_config/cursors.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Cursor -/// -/// The cursor property specifies the mouse cursor -/// to be displayed when pointing over an element. -/// -$cursors: ( - // class name, value - ("cursor-alias", alias), - ("cursor-default", default), - ("cursor-grab", grab), - ("cursor-help", help), - ("cursor-move", move), - ("cursor-pointer", pointer), - ("cursor-wait", wait), - ("cursor-zoom-in", zoom-in), - ("cursor-zoom-out", zoom-out) -); \ No newline at end of file diff --git a/src/Utilities/_config/display-filter.scss b/src/Utilities/_config/display-filter.scss deleted file mode 100644 index deb928e1..00000000 --- a/src/Utilities/_config/display-filter.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Filter -/// -/// The filter property defines visual effects -/// (like blur and saturation) to an element (often ). -/// -$display-filters: ( - // class name, property, value - ("filter-invert", "filter", invert(100%)), - ("filter-gray", "filter", grayscale(100%)), -); \ No newline at end of file diff --git a/src/Utilities/_config/display.scss b/src/Utilities/_config/display.scss deleted file mode 100644 index dca31eca..00000000 --- a/src/Utilities/_config/display.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// -/// Display -/// -/// The display property specifies the -/// display behavior (the type of rendering box) of an element. -/// -$display-properties: ( - // class name, value - ("display-inline", inline), - ("display-flex", flex), - ("display-inline-flex", inline-flex), - ("display-grid", grid), - ("display-inline-grid", inline-grid), - ("display-block", block), - ("display-inline-block", inline-block), - ("display-table", table), - ("display-inline-table", inline-table), - ("display-table-row", table-row), - ("display-table-column", table-column), - ("display-table-cell", table-cell) -); \ No newline at end of file diff --git a/src/Utilities/_config/flex-direction.scss b/src/Utilities/_config/flex-direction.scss deleted file mode 100644 index 2d4d0f4a..00000000 --- a/src/Utilities/_config/flex-direction.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Flex Direction -/// -/// The flex-direction property specifies -/// the direction of the flexible items. -/// -$flex-directions: ( - // class name, value - ("flex-direction-row", row), - ("flex-direction-row-reverse", row-reverse), - ("flex-direction-column", column), - ("flex-direction-column-reverse", column-reverse), - ("flex-direction-initial", initial), - ("flex-direction-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/flex-grow.scss b/src/Utilities/_config/flex-grow.scss deleted file mode 100644 index bf540dc8..00000000 --- a/src/Utilities/_config/flex-grow.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Grow -/// -/// The flex-grow property specifies how much the item -/// will grow relative to the rest of the flexible items -/// inside the same container. -/// -$flex-grow: ( - ("flex-grow", 1), - ("flex-grow-0", 0) -); \ No newline at end of file diff --git a/src/Utilities/_config/flex-shrink.scss b/src/Utilities/_config/flex-shrink.scss deleted file mode 100644 index 0705322d..00000000 --- a/src/Utilities/_config/flex-shrink.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Shrink -/// -/// The flex-shrink property specifies how the item -/// will shrink relative to the rest of the flexible items -/// inside the same container. -/// -$flex-shrink: ( - ("flex-shrink", 1), - ("flex-shrink-0", 0) -); \ No newline at end of file diff --git a/src/Utilities/_config/flex-wrap.scss b/src/Utilities/_config/flex-wrap.scss deleted file mode 100644 index 2cc311d1..00000000 --- a/src/Utilities/_config/flex-wrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// -/// Flex Wrap -/// -/// The flex-wrap property specifies whether -/// the flexible items should wrap or not. -/// -$flex-wrap: ( - ("flex-wrap", wrap), - ("flex-wrap-reverse", wrap-reverse), - ("flex-nowrap", nowrap) -); \ No newline at end of file diff --git a/src/Utilities/_config/flex.scss b/src/Utilities/_config/flex.scss deleted file mode 100644 index fd551c22..00000000 --- a/src/Utilities/_config/flex.scss +++ /dev/null @@ -1,14 +0,0 @@ -/// -/// Flex -/// -/// The flex property sets the flexible length on flexible items. -/// The flex property is a shorthand property for flex-grow, flex-shrink -/// and flex-basis. -/// -$flex-helpers: ( - // class name, value - ("flex-1", 1 1 0%), - ("flex-auto", 1 1 auto), - ("flex-initial", 0 1 auto), - ("flex-none", none) -); \ No newline at end of file diff --git a/src/Utilities/_config/float.scss b/src/Utilities/_config/float.scss deleted file mode 100644 index 1efc55db..00000000 --- a/src/Utilities/_config/float.scss +++ /dev/null @@ -1,12 +0,0 @@ -/// -/// Float -/// -/// The float property specifies whether an element should -/// float to the left, right, or not at all. -/// -$float-helpers: ( - // class name, value - ("float-right", right), - ("float-left", left), - ("float-none", none) -); \ No newline at end of file diff --git a/src/Utilities/_config/font-sizes.scss b/src/Utilities/_config/font-sizes.scss deleted file mode 100644 index e11bfdc2..00000000 --- a/src/Utilities/_config/font-sizes.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Font Size -/// -/// The font-size property sets the size of a font. -/// -$font-sizes: ( - // class name, value - ("mini-text", 60%), - ("tiny-text", 73%), - ("small-text", 85%), - ("large-text", 120%), - ("big-text", 175%), - ("huge-text", 200%), - ("giant-text", 350%) -); \ No newline at end of file diff --git a/src/Utilities/_config/font-weight.scss b/src/Utilities/_config/font-weight.scss deleted file mode 100644 index ae146a0a..00000000 --- a/src/Utilities/_config/font-weight.scss +++ /dev/null @@ -1,10 +0,0 @@ -/// -/// Font Weight -/// -/// The font-weight property sets how thick -/// or thin characters in text should be displayed. -/// -$font-weights: ( - // class name (prefix), property - "weight-": "font-weight" -); \ No newline at end of file diff --git a/src/Utilities/_config/height.scss b/src/Utilities/_config/height.scss deleted file mode 100644 index dfc77927..00000000 --- a/src/Utilities/_config/height.scss +++ /dev/null @@ -1,15 +0,0 @@ -/// -/// Height -/// -/// The height property sets the height of an element. -/// -$height-helpers: ( - // class name, value - ("height-min-content", min-content), - ("height-max-content", max-content), - ("height-fit-content", fit-content), - ("height-25", 25%), - ("height-50", 50%), - ("height-75", 75%), - ("height-100", 100%), -); \ No newline at end of file diff --git a/src/Utilities/_config/inset.scss b/src/Utilities/_config/inset.scss deleted file mode 100644 index 9268ad2b..00000000 --- a/src/Utilities/_config/inset.scss +++ /dev/null @@ -1,13 +0,0 @@ -/// -/// Inset -/// -/// The inset property sets the distance -/// between an element and the parent element. -/// -$insets: ( - // class name, [values] - 'top'(0, auto), - 'bottom'(0, auto), - 'left'(0, auto), - 'right'(0, auto), -); \ No newline at end of file diff --git a/src/Utilities/_config/justify-content.scss b/src/Utilities/_config/justify-content.scss deleted file mode 100644 index 20264223..00000000 --- a/src/Utilities/_config/justify-content.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Justify Content -/// -/// The justify-content property aligns the flexible -/// container's items when the items do not use -/// all available space on the main-axis (horizontally). -/// -$justify-content: ( - // class name, value - ("justify-content-baseline", baseline), - ("justify-content-start", flex-start), - ("justify-content-end", flex-end), - ("justify-content-center", center), - ("justify-content-between", space-between), - ("justify-content-around", space-around), - ("justify-content-initial", initial), - ("justify-content-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/justify-items.scss b/src/Utilities/_config/justify-items.scss deleted file mode 100644 index 3c6b0bdb..00000000 --- a/src/Utilities/_config/justify-items.scss +++ /dev/null @@ -1,18 +0,0 @@ -/// -/// Justify Items -/// -/// The justify-items property is set -/// on the grid container to give child elements (grid items) -/// alignment in the inline direction. -/// -$justify-items: ( - // class name, value - ("justify-items-stretch", stretch), - ("justify-items-start", start), - ("justify-items-left", left), - ("justify-items-center", center), - ("justify-items-end", end), - ("justify-items-right", right), - ("justify-items-initial", initial), - ("justify-items-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/justify-self.scss b/src/Utilities/_config/justify-self.scss deleted file mode 100644 index 04bc7c6c..00000000 --- a/src/Utilities/_config/justify-self.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// -/// Justify Self -/// -/// The justify-self property aligns a grid item -/// within its grid cell in the inline direction. -/// -$justify-self: ( - // class name, value - ("justify-self-auto", auto), - ("justify-self-normal", normal), - ("justify-self-stretch", stretch), - ("justify-self-start", start), - ("justify-self-left", left), - ("justify-self-center", center), - ("justify-self-end", end), - ("justify-self-right", right), - ("justify-self-first-baseline", first baseline), - ("justify-self-last-baseline", last baseline), - ("justify-self-initial", initial), - ("justify-self-inherit", inherit) -); \ No newline at end of file diff --git a/src/Utilities/_config/line-height.scss b/src/Utilities/_config/line-height.scss deleted file mode 100644 index 7d63dddf..00000000 --- a/src/Utilities/_config/line-height.scss +++ /dev/null @@ -1,9 +0,0 @@ -/// -/// Line Height -/// -/// The line-height property specifies the height of a line. -/// -$line-heights: ( - // class name (prefix), property - "line-height-": "line-height" -); \ No newline at end of file diff --git a/src/Utilities/_config/margin.scss b/src/Utilities/_config/margin.scss deleted file mode 100644 index 63f53af6..00000000 --- a/src/Utilities/_config/margin.scss +++ /dev/null @@ -1,13 +0,0 @@ -/// -/// Margin -/// -/// The margin property sets the margins for an element. -/// -$margin-helpers: ( - // class name (prefix), property - ("m-", "margin"), - ("mt-", "margin-top"), - ("mr-", "margin-right"), - ("mb-", "margin-bottom"), - ("ml-", "margin-left") -); \ No newline at end of file diff --git a/src/Utilities/_config/object-fit.scss b/src/Utilities/_config/object-fit.scss deleted file mode 100644 index 35f7492d..00000000 --- a/src/Utilities/_config/object-fit.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// -/// Object Fit -/// -/// The object-fit property is used to specify -/// how an or