diff --git a/mix-manifest.json b/mix-manifest.json new file mode 100644 index 0000000..29e55e5 --- /dev/null +++ b/mix-manifest.json @@ -0,0 +1,4 @@ +{ + "/spritemap.js": "/spritemap.js?id=2dda73ecee3bb668b395026efda6524c", + "/public/css/styles.css": "/public/css/styles.css?id=c80a1181f87f3c3ef715844b545559f4" +} diff --git a/package.json b/package.json index d98bbb8..034fec1 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "packages/*" ], "scripts": { - "build": "yarn workspace server run build", + "build": "yarn workspace frontend run build", "start": "yarn workspace server run start" } } diff --git a/packages/frontend/package.json b/packages/frontend/package.json index d0b3d47..de68b9e 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -1,6 +1,9 @@ { "name": "frontend", "version": "0.1.0", + "scripts": { + "build": "npx mix" + }, "dependencies": { "@tiny-components/plain-ui": "^0.6.0", "riot": "^6.1.2" diff --git a/packages/frontend/scss/styles.scss b/packages/frontend/scss/styles.scss new file mode 100644 index 0000000..6fd4cdb --- /dev/null +++ b/packages/frontend/scss/styles.scss @@ -0,0 +1,3 @@ +@import + + '@tiny-components/plain-ui/src/scss/plain-ui'; \ No newline at end of file diff --git a/packages/frontend/views/404.liquid b/packages/frontend/views/404.eta similarity index 64% rename from packages/frontend/views/404.liquid rename to packages/frontend/views/404.eta index 7a18894..8639fbb 100644 --- a/packages/frontend/views/404.liquid +++ b/packages/frontend/views/404.eta @@ -2,7 +2,7 @@ {% block siteHeader %}

- { site.404_title } + {{ page.data.title }}

{% endblock %} @@ -11,7 +11,9 @@
- { marked.parse(site.404_message) } + {% if settings.404_message %} + {{ settings.404_message }} + {% endif %}
diff --git a/packages/frontend/views/layout.eta b/packages/frontend/views/layout.eta new file mode 100644 index 0000000..fb40d79 --- /dev/null +++ b/packages/frontend/views/layout.eta @@ -0,0 +1,43 @@ + + + + + + + + {{ it.page.data.title }} | {{ it.settings.data.project_name }} + + + + + +
+ +
+
+ {{# if (isHome(it.page)) { }} +

+ {{ it.page.data.title }} +

+ {{# } else { }} + + {{ it.page.data.title }} + + {{# } }} +
+
+ +
+ +
+ {{! it.body }} +
+ + + + + \ No newline at end of file diff --git a/packages/frontend/views/layout.liquid b/packages/frontend/views/layout.liquid deleted file mode 100644 index 470228c..0000000 --- a/packages/frontend/views/layout.liquid +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - {{ page.data.title }} - - - - - - {% block head %}{% endblock %} - - -
- {% block siteHeader %} -

- {{ page.data.title }} - {{ options.data.title }} -

- {% endblock %} -
- -
- {% block siteMain %} - - {% endblock %} -
- - - - {% block script %}{% endblock %} - - \ No newline at end of file diff --git a/packages/frontend/views/templates/page/blog.eta b/packages/frontend/views/templates/page/blog.eta new file mode 100644 index 0000000..896425e --- /dev/null +++ b/packages/frontend/views/templates/page/blog.eta @@ -0,0 +1,12 @@ +{% layout('layout') %} + +{{# const posts = await it.injectStore('post') }} + +{{# if posts.data.length > 0 }} + {{# posts.data.forEach((post) => { }} + {{ post.title }} + {{ marked.parse(page.data.content) }} + {{# }) }} +{{# } else { }} + +{{# } }} \ No newline at end of file diff --git a/packages/frontend/views/templates/page/blog.liquid b/packages/frontend/views/templates/page/blog.liquid deleted file mode 100644 index 27e8387..0000000 --- a/packages/frontend/views/templates/page/blog.liquid +++ /dev/null @@ -1,13 +0,0 @@ -{% layout 'layout.liquid' %} - -{% block siteMain %} -
-
-
-
- { marked.parse(page.data.content) } -
-
-
-
-{% endblock %} \ No newline at end of file diff --git a/packages/frontend/views/templates/page/default.liquid b/packages/frontend/views/templates/page/default.eta similarity index 58% rename from packages/frontend/views/templates/page/default.liquid rename to packages/frontend/views/templates/page/default.eta index 564a800..92f7600 100644 --- a/packages/frontend/views/templates/page/default.liquid +++ b/packages/frontend/views/templates/page/default.eta @@ -1,13 +1,11 @@ -{% layout 'layout.liquid' %} +{{# layout('layout') }} -{% block siteMain %}
- {{ page.data.content }} + {{! it.parseMarkdown(it.page.data.content) }}
-
-{% endblock %} \ No newline at end of file + \ No newline at end of file diff --git a/packages/frontend/webpack.mix.js b/packages/frontend/webpack.mix.js new file mode 100644 index 0000000..33b14bf --- /dev/null +++ b/packages/frontend/webpack.mix.js @@ -0,0 +1,84 @@ +const mix = require('laravel-mix') +const path = require('path') + +require('laravel-mix-purgecss') + +// plugins +const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin') + +/* + |-------------------------------------------------------------------------- + | Mix Asset Management + |-------------------------------------------------------------------------- + | + | Mix provides a clean, fluent API for defining some Webpack build steps + | for your Laravel applications. By default, we are compiling the CSS + | file for the application as well as bundling up all the JS files. + | + */ + + +mix.webpackConfig({ + module: { + rules: [{ + test: /\.riot$/, + use: [{ + loader: '@riotjs/webpack-loader', + options: { + hot: false + } + }] + } + ]}, + plugins: [ + new SvgSpritemapPlugin([ + './node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg', + './icons/*.svg' + ], { + output: { + filename: 'public/symbol-defs.svg', + chunk: { + keep: true + }, + svgo: { + plugins: [{ + name: 'convertStyleToAttrs', + active: true + },{ + name: 'removeStyleElement', + active: true + }, { + name: 'removeAttrs', + params: { + attrs: 'fill' + } + }] + } + }, + sprite: { + prefix: 'icon-' + } + }) + ] +}) + +mix + .setPublicPath('../../') + //.js('js/app.js', 'public/js') + .sass('scss/styles.scss', 'public/css') + .purgeCss({ + extend: { + content: [ + path.join(__dirname, 'js/**/*.riot'), + path.join(__dirname, 'views/*.liquid') + ] + } + }) + .options({ + terser: { + extractComments: false, + }, + processCssUrls: false + }) + .copyDirectory('node_modules/@tiny-components/plain-ui/src/fonts/**', '../../public/css') + .version() diff --git a/packages/server/_bootstrap.js b/packages/server/_bootstrap.js index e25b581..1c258a2 100644 --- a/packages/server/_bootstrap.js +++ b/packages/server/_bootstrap.js @@ -15,28 +15,42 @@ const server = fastify() * */ -import { Liquid } from 'liquidjs' +import * as Eta from 'eta' import view from '@fastify/view' -const engine = new Liquid({ - root: path.join(path.resolve(), '/../frontend/views'), - extname: '.liquid', -}) - server.register(view, { engine: { - liquid: engine + eta: Eta + + }, + root: path.join(path.resolve(), '/../frontend/views'), + extname: '.eta', + options: { + tags: [ '{{', '}}' ], + includeViewExtension: true, + parse: { + exec: "#", + interpolate: "", + raw: "!" + }, + useWith: true, + async: true } }) - /** * adding preHandler * * */ -import SettingsStore from './stores/Settings.js' +import SettingsStore from './stores/settings.js' + +import templateClass from './eta/templateClass.js' +import isHome from './eta/isHome.js' +import injectStore from './eta/injectStore.js' +import parseMarkdown from './eta/parseMarkdown.js' + // getting options from directus add to all views server.addHook('preHandler', async function (request, response) { @@ -44,7 +58,11 @@ server.addHook('preHandler', async function (request, response) { const settings = await settingsStore.find() response.locals = { - settings: settings + settings: settings, + templateClass: templateClass, + isHome: isHome, + injectStore: injectStore, + parseMarkdown: parseMarkdown } }) @@ -53,30 +71,27 @@ server.addHook('onRequest', async function (request, response) { const url = request.url - let pathname = url.split('/') - pathname.shift() + let pathname = url.split('/').shift() // default value for paged let paged = 1 - // check if pathname has values - if (pathname.length > 0) { + // check if pathname has values and is not 404 + if (pathname.length > 0 && request.url !== '/404') { - // try to get number const result = Number(pathname[pathname.length - 1]) - // is result is integer + // is result is an integer if (Number.isInteger(result)) { paged = result - // remove last element + // remove last from pathname, add default url to request, + // and check if pathname has more than one, join pathname for new url pathname.pop() + request.raw.url = '/' - // @TODO change, thats looks strange if (pathname.length > 0) { request.raw.url = pathname.join('/') - } else { - request.raw.url = '/' } } } diff --git a/packages/server/eta/injectStore.js b/packages/server/eta/injectStore.js new file mode 100644 index 0000000..b462afc --- /dev/null +++ b/packages/server/eta/injectStore.js @@ -0,0 +1,14 @@ +import slugify from 'slugify' + +/** + * + * + * + */ + +export default async function injectStore(name) { + const StoreClass = await import('./../stores/' + name + '.js') + const store = new StoreClass.default() + + return await store.find() +} \ No newline at end of file diff --git a/packages/server/eta/isHome.js b/packages/server/eta/isHome.js new file mode 100644 index 0000000..95429f5 --- /dev/null +++ b/packages/server/eta/isHome.js @@ -0,0 +1,18 @@ +import slugify from 'slugify' + +/** + * + * + * + */ + +export default function isHome(entity) { + + let result = false + + if (entity.data && entity.data.permalink && entity.data.permalink === "/") { + result = true + } + + return result +} \ No newline at end of file diff --git a/packages/server/eta/parseMarkdown.js b/packages/server/eta/parseMarkdown.js new file mode 100644 index 0000000..13e2c5e --- /dev/null +++ b/packages/server/eta/parseMarkdown.js @@ -0,0 +1,11 @@ +import { marked } from 'marked' + +/** + * + * + * + */ + +export default function parseMarkdown(value) { + return marked.parse(value) +} \ No newline at end of file diff --git a/packages/server/eta/templateClass.js b/packages/server/eta/templateClass.js new file mode 100644 index 0000000..6cdc9c6 --- /dev/null +++ b/packages/server/eta/templateClass.js @@ -0,0 +1,15 @@ +import slugify from 'slugify' + +/** + * + * + * + */ + +export default function templateClass(entity, prefix = 'page') { + if (entity.data && entity.data.template) { + prefix += '-' + entity.data.template + } + + return prefix +} \ No newline at end of file diff --git a/packages/server/handlers/assets.js b/packages/server/handlers/assets.js new file mode 100644 index 0000000..1c9fa75 --- /dev/null +++ b/packages/server/handlers/assets.js @@ -0,0 +1,117 @@ +/** + * function similar to blade asset + * + * @param $path + * @return string + * + */ +function asset($path, $prefix = '/public') +{ + // get flight + $app = Flight::app(); + + // getting basePath + $basePath = $app->get('basePath'); + + // path to mix-manifest + $file = $app->get('basePath').'mix-manifest.json'; + + if (file_exists($file)) { + $manifest = file_get_contents($file); + $files = json_decode($manifest, true); + + if (isset($files[$prefix.$path])) { + $path = str_replace($prefix, '', $files[$prefix.$path]); + } + } + + return $path; +} + +/** + * getting name of view as slug + * + * @param array $page + * @return string + * + */ +function viewName(array $page) +{ + $slugify = new \Cocur\Slugify\Slugify(); + return $slugify->slugify($page['data']['view']); +} + +/** + * getting name of view as slug + * + * @param array $page + * @return string + * + */ +function canonical() +{ + if (isset($_SERVER['HTTPS'])) { + $canoncial = 'https'; + } else { + $canoncial = 'http'; + } + + $canoncial .= '://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; + + return $canoncial; +} + +/** + * getting title for head + * + * @param array $page + * @param array $site + * @return string + */ +function title($page, $site) +{ + $title = []; + + if (isset($site['data']['title'])) { + $title[] = $site['data']['title']; + } + + // if not homepage set page title first + if ($page['data']['slug']) { + array_unshift($title, $page['data']['title']); + } else { + $title[] = $page['data']['title']; + } + + return join(' | ', $title); +} + +/** + * getting url for assets of directus api + * + * @param string string + * @param array array + * @return string + * + */ +function assetsUrl(string $id, array $options = NULL) +{ + $query = NULL; + + if ($options) { + $query = '?'.http_build_query($options); + } + + return $_ENV['DIRECTUS_API_URL'].'/assets/'.$id.$query; +} + +function styles($values) { + + $result = ''; + + if ($values && is_array($values)) { + $result = implode(' ', $values); + } + + return $result; +} \ No newline at end of file diff --git a/packages/server/handlers/directusResponse.js b/packages/server/handlers/directusResponse.js index 9cd9195..24f6f12 100644 --- a/packages/server/handlers/directusResponse.js +++ b/packages/server/handlers/directusResponse.js @@ -12,8 +12,8 @@ const directusResponseHandler = { single(entity, response) { - // if data is empty redirect to 404 - if (entity.data.length === 0) { + // if data not exists or data is empty redirect to 404 + if (!entity.data || entity.data.length === 0) { return response.redirect('/404') } @@ -25,7 +25,7 @@ const directusResponseHandler = { entity.data.template = 'default' } - return entity + response.locals.page = entity } } diff --git a/packages/server/http/notfound.js b/packages/server/http/notfound.js index 5c83bc4..2804823 100644 --- a/packages/server/http/notfound.js +++ b/packages/server/http/notfound.js @@ -17,9 +17,18 @@ export default async function(fastify, opts) { * */ fastify.get('/404', async function(request, response) { + + const page = { + data: { + title: '404' + } + } + return response .code(404) - .view('../frontend/views/404') + .view('../frontend/views/404', { + page: page + }) }) } \ No newline at end of file diff --git a/packages/server/http/page.js b/packages/server/http/page.js index 2944178..aac8895 100644 --- a/packages/server/http/page.js +++ b/packages/server/http/page.js @@ -1,6 +1,6 @@ import path from 'path' -import PageStore from './../stores/Page.js' +import PageStore from './../stores/page.js' import directusResponseHandler from './../handlers/directusResponse.js' @@ -29,7 +29,8 @@ export default async function(fastify, opts) { // getting single page const page = await pageStore.findOneByPermalink(request.url) - response.page = directusResponseHandler.single(page, response) + directusResponseHandler.single(page, response) + }) /** @@ -40,8 +41,6 @@ export default async function(fastify, opts) { * */ fastify.get('/*', async function(request, response) { - return response.view('../frontend/views/templates/page/' + response.page.data.template, { - 'page' : response.page - }) + return response.view('../views/templates/page/' + response.locals.page.data.template) }) } \ No newline at end of file diff --git a/packages/server/http/post.js b/packages/server/http/post.js index b848807..0f726fe 100644 --- a/packages/server/http/post.js +++ b/packages/server/http/post.js @@ -1,4 +1,4 @@ -import PageStore from './../stores/Post.js' +import PageStore from './../stores/post.js' import path from 'path' /** @@ -38,8 +38,6 @@ export default async function(fastify, opts) { * */ fastify.get('/:slug([-a-zA-Z0-9]{0,255})', async function(request, response) { - response.view('../frontend/views/templates/post/' + response.post.data.template, { - 'page' : post - }) + response.view('../views/templates/post/' + response.locals.page.data.template) }) } \ No newline at end of file diff --git a/packages/server/http/sitemap.js b/packages/server/http/sitemap.js index 87a1f5c..899b43a 100644 --- a/packages/server/http/sitemap.js +++ b/packages/server/http/sitemap.js @@ -1,6 +1,6 @@ import path from 'path' -import PageStore from './../stores/Page.js' +import PageStore from './../stores/page.js' import directusResponseHandler from './../handlers/directusResponse.js' @@ -51,6 +51,6 @@ export default async function(fastify, opts) { }) - + }) } \ No newline at end of file diff --git a/packages/server/package-lock.json b/packages/server/package-lock.json index 88a1065..b1753eb 100644 --- a/packages/server/package-lock.json +++ b/packages/server/package-lock.json @@ -1,7 +1,8 @@ { "name": "server", - "requires": true, + "version": "0.1.0", "lockfileVersion": 1, + "requires": true, "dependencies": { "@directus/sdk": { "version": "9.14.2", @@ -223,6 +224,11 @@ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" }, + "eta": { + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/eta/-/eta-1.12.3.tgz", + "integrity": "sha512-qHixwbDLtekO/d51Yr4glcaUJCIjGVJyTzuqV4GPlgZo1YpgOKG+avQynErZIYrfM6JIJdtiG2Kox8tbb+DoGg==" + }, "etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -386,11 +392,6 @@ "set-cookie-parser": "^2.4.1" } }, - "liquidjs": { - "version": "9.39.1", - "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-9.39.1.tgz", - "integrity": "sha512-TFu19Cml0K2T34UY50ZKUApHgiiEaayqNW9J3o3ubLQCuhMFhY7jqwNpY1oVvvAJxCCxVqL6bJnGc1Fktth0Fw==" - }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -618,6 +619,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "slugify": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.5.tgz", + "integrity": "sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==" + }, "sonic-boom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-3.0.0.tgz", diff --git a/packages/server/package.json b/packages/server/package.json index 165b76c..fca9247 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -12,8 +12,9 @@ "dayjs": "^1.11.4", "dompurify": "^2.3.10", "dotenv": "^10.0.0", + "eta": "^1.12.3", "fastify": "^4.2.1", - "liquidjs": "^9.39.1", - "marked": "^4.0.18" + "marked": "^4.0.18", + "slugify": "^1.6.5" } } diff --git a/packages/server/stores/comment.js b/packages/server/stores/comment.js index 9a09eec..d2be840 100644 --- a/packages/server/stores/comment.js +++ b/packages/server/stores/comment.js @@ -1,4 +1,4 @@ -import DirectusAbstractStore from './DirectusAbstract.js' +import DirectusAbstractStore from './directusAbstract.js' /** * Comments diff --git a/packages/server/stores/DirectusAbstract.js b/packages/server/stores/directusAbstract.js similarity index 100% rename from packages/server/stores/DirectusAbstract.js rename to packages/server/stores/directusAbstract.js diff --git a/packages/server/stores/Page.js b/packages/server/stores/page.js similarity index 89% rename from packages/server/stores/Page.js rename to packages/server/stores/page.js index 3f7c034..21d0769 100644 --- a/packages/server/stores/Page.js +++ b/packages/server/stores/page.js @@ -1,4 +1,4 @@ -import DirectusAbstractStore from './DirectusAbstract.js' +import DirectusAbstractStore from './directusAbstract.js' /** * Pages from Directus @@ -21,7 +21,7 @@ class PageStore extends DirectusAbstractStore { /** * getting page by permalink - * + * * * @param {string} permalink * @return {object} diff --git a/packages/server/stores/Post.js b/packages/server/stores/post.js similarity index 92% rename from packages/server/stores/Post.js rename to packages/server/stores/post.js index 9fb7e82..b0e7152 100644 --- a/packages/server/stores/Post.js +++ b/packages/server/stores/post.js @@ -1,4 +1,4 @@ -import DirectusAbstractStore from './DirectusAbstract.js' +import DirectusAbstractStore from './directusAbstract.js' /** * Posts from Directus @@ -26,10 +26,11 @@ class PostStore extends DirectusAbstractStore { * @return {object} */ find(page = 1, limit = 20) { - return this.items.readOne({ + return this.items.readByQuery({ fields: [ 'title', 'slug', + 'status', 'user_created.first_name', 'user_created.last_name', @@ -40,7 +41,6 @@ class PostStore extends DirectusAbstractStore { 'teaser_media.description', ], filter: { - slug : slug, status : 'published', published_at : { '_nnull': true diff --git a/packages/server/stores/Settings.js b/packages/server/stores/settings.js similarity index 89% rename from packages/server/stores/Settings.js rename to packages/server/stores/settings.js index 5d8803b..43b737a 100644 --- a/packages/server/stores/Settings.js +++ b/packages/server/stores/settings.js @@ -1,4 +1,4 @@ -import DirectusAbstractStore from './DirectusAbstract.js' +import DirectusAbstractStore from './directusAbstract.js' /** * Settings diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..899ce3e --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,14797 @@ +@charset "UTF-8"; +@font-face { + font-family: "IBM Plex Mono"; + src: url("IBMPlexMono.eot"); + src: url("IBMPlexMono.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono.woff2") format("woff2"), url("IBMPlexMono.woff") format("woff"), url("IBMPlexMono.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "IBM Plex Mono"; + src: url("IBMPlexMono-Bold.eot"); + src: url("IBMPlexMono-Bold.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono-Bold.woff2") format("woff2"), url("IBMPlexMono-Bold.woff") format("woff"), url("IBMPlexMono-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + font-display: swap; +} +/** + * functions + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * strip unit from value + * + * @param {mixed} $value + * @return {number} + * + */ +/** + * + * + * https://css-tricks.com/snippets/sass/str-replace-function/ + * + */ +/** + * get value of key "default" in map + * + * @param {map} $value + * @return {boolean|unit} + * + */ +/** + * factor + * + * + * + * @param {integer} $x + * @return {float} + * + */ +/** + * mixins + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * Clear Floats + * + * + * + */ +/** + * clear styles from list + * + * + */ +/** + * media-queries as mixins + * based on breakpoints from variables + * + * + * + */ +/** + * Set property and his value for each Breakpoint + * + * ( + * $md: 10px + * ) + * + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set property and his value with an factor for each Breakpoint + * + * ( + * $md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size + * + * ( + * $md: 1rem + * ) + * + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] + * + */ +/** + * adding overlay with z-index and color + * + * @param {z-index} + * @param {color} + * + */ +/** + * variables + * + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * grid + * + */ +:root { + --grid-columns: 12; + --grid-grid-spacing: 15px; + --grid-xs: 576px; + --grid-sm: 768px; + --grid-md: 992px; + --grid-lg: 1200px; + --grid-xlg: 1600px; + --grid-xxs-max: 575px; + --grid-xs-max: 767px; + --grid-sm-max: 991px; + --grid-md-max: 1199px; + --grid-lg-max: 1599px; +} + +/** + * fonts + * + */ +/** + * colors + * + * + */ +/** + * margin + * + */ +/** + * padding + * + */ +/** + * border + * + */ +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +:root { + --body: #f9f9f9; + --text: #363636; + --text-contrast: #ffffff; + --primary: #3e3e3e; + --primary-contrast: #3e3e3e; + --active: #717171; + --active-contrast: #ffffff; + --link: #363636; + --link-hover: #d95959; + --danger: #d95959; + --danger-contrast: #ecacac; + --info: #0090d4; + --info-constrast: #3bc0ff; + --success: #64ac64; + --success-contrast: #a6d0a6; + --warning: #f0ad4e; + --warning-contrast: #f8d9ac; + --background: #3e3e3e; + --background-contrast: #ffffff; + --background-alpha: rgba(0, 0, 0, 0.7); + --border: #3e3e3e; + --border-contrast: #ffffff; + --font-family: IBM Plex Mono, sans-serif; +} + +html { + font-size: 100%; + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +body, +html { + margin: 0; + height: 100%; +} + +html, +legend { + box-sizing: border-box; +} + +body { + font-family: var(--font-family); + color: var(--text); + background-color: var(--body); + direction: ltr; + font-size: 0.9rem; + line-height: 1.618; +} +@media only screen and (min-width: 992px) { + body { + font-size: 1rem; + } +} + +a { + color: var(--link); + transition: color 0.5s; + text-decoration: none; +} +a:hover { + color: var(--link-hover); +} +a:focus { + outline: none; +} + +main { + display: block; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +figure { + margin: 0; +} + +figcaption { + margin: 0; +} + +p { + margin: 0; +} + +/** + * form elements + * + * + */ +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +fieldset { + margin: 0 0 1rem; +} + +button, +select { + text-transform: none; +} + +[type=button], +[type=reset], +[type=submit], +button { + -webkit-appearance: button; +} + +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} + +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} + +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +[type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/** + * hr + * + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + border-top: 1px solid var(--border); + margin: 0 0 1rem; +} + +progress { + vertical-align: baseline; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +code, +kbd, +pre, +samp { + font-family: var(--font-family); + font-size: 0.9rem; +} + +/** + * Content + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.content { + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + /** + * blockquote + * + * + */ + /** + * lists + * + */ +} +.content p { + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content p { + margin: 0 0 1.2rem; + } +} +.content a, +.content ins, +.content u { + -webkit-text-decoration-skip: ink edges; + text-decoration-skip: ink edges; +} +.content a { + text-decoration: underline; +} +.content b, +.content strong { + font-weight: bolder; +} +.content small { + font-size: 80%; +} +.content sub, +.content sup { + font-size: 70%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.content sub { + bottom: -0.25em; +} +.content sup { + top: -0.5em; +} +.content abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} +.content mark { + padding: 0.25rem; + background-color: var(--warning); +} +.content blockquote { + border-left: 1px solid var(--border); + margin-left: 0; + padding: 0.6rem 0.8rem; +} +.content blockquote p:last-child { + margin-bottom: 0; +} +.content dl, +.content ol, +.content ul { + padding: 0; + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content dl, +.content ol, +.content ul { + margin: 0 0 1.2rem; + } +} +.content ul { + margin-left: 1.5rem; +} +.content ol { + margin-left: 2.5rem; +} +.content ol ol, +.content ul ul { + margin-top: 0; + margin-left: 1.5rem; +} +.content ol { + list-style: decimal outside; +} +.content ul { + list-style: square outside; +} +.content dl { + margin-left: 0.5rem; +} +.content dd, +.content dt { + margin: 0; +} +.content dt { + font-weight: bold; +} +.content code { + white-space: pre; + display: block; + color: var(--text-contrast); + overflow-y: hidden; + overflow-x: auto; + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background); + margin: 0 0 1rem; + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .content code { + margin: 0 0 1.2rem; + } +} +@media only screen and (min-width: 992px) { + .content code { + padding: 0.7rem 1rem 0.9rem; + } +} + +.highlight { + padding: 0.15rem 0.4rem 0.25rem; + background: var(--primary); + color: var(--text-contrast); + border-radius: 2px; +} + +/** + * Heading + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * add font-size for heading as class and element + * + * + */ +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "IBM Plex Mono", sans-serif; + font-weight: bold; + line-height: 1.2; + margin: 0 0 1rem; +} +h1.highlight, .h1.highlight, +h2.highlight, .h2.highlight, +h3.highlight, .h3.highlight, +h4.highlight, .h4.highlight, +h5.highlight, .h5.highlight, +h6.highlight, .h6.highlight { + display: table; +} + +h1, .h1 { + font-size: 2.5rem; +} + +h2, .h2 { + font-size: 2rem; +} + +h3, .h3 { + font-size: 1.75rem; +} + +h4, .h4 { + font-size: 1.5rem; +} + +h5, .h5 { + font-size: 1.25rem; +} + +h6, .h6 { + font-size: 1rem; +} + +@media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 2.75rem; + } + h2, .h2 { + font-size: 2.5rem; + } + h3, .h3 { + font-size: 2rem; + } + h4, .h4 { + font-size: 1.75rem; + } + h5, .h5 { + font-size: 1.5rem; + } + h6, .h6 { + font-size: 1.2rem; + } +} +/** + * + * A + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.badge { + display: inline-block; + background-color: var(--background); + color: var(--text-contrast); + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + border: 1px solid var(--border); + border-radius: 2px; +} +.badge--round { + display: inline-flex; + justify-content: center; + border-radius: 50%; + width: 2.8em; +} + +/** + * Button + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * + * + */ +/** + * + * + */ +/** + * + * + */ +.button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + display: inline-flex; + align-items: center; + text-decoration: none; + font-family: var(--font-family); + font-size: 1rem; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--text); + border-radius: 2px; + transition: background-color 0.1s; + margin: 0 0 1rem; + padding: 0.5rem 1.3rem; + width: 100%; +} +@media only screen and (min-width: 768px) { + .button { + width: auto; + } +} +.button--small { + padding: 0.3rem 1.1rem; + font-size: 0.8rem; +} +.button:hover, .button--selected { + cursor: pointer; + text-decoration: none; + color: white; + background-color: var(--active); +} +.button:focus, .button:active { + outline: 1px solid var(--active); +} +.button:disabled { + opacity: 0.5; +} +.button:disabled:hover { + cursor: not-allowed; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--border); +} +.button--transparent { + margin: 0; + padding: 0; + border: none; + background: transparent; + border-radius: 0; +} +.button--transparent:focus, .button--transparent:active { + outline: none; +} +.button--danger { + border-color: var(--danger); +} +.button--danger:hover { + background-color: var(--danger); +} +.button--danger:focus, .button--danger:active { + outline: 2px solid var(--danger); +} +.button--info { + border-color: var(--info); +} +.button--info:hover { + background-color: var(--info); +} +.button--info:focus, .button--info:active { + outline: 2px solid var(--info); +} +.button--warning { + border-color: var(--warning); +} +.button--warning:hover { + background-color: var(--warning); +} +.button--warning:focus, .button--warning:active { + outline: 2px solid var(--warning); +} +.button--success { + border-color: var(--success); +} +.button--success:hover { + background-color: var(--success); +} +.button--success:focus, .button--success:active { + outline: 2px solid var(--success); +} +.button--outline { + background-color: transparent; +} +.button--outline:hover { + color: var(--border); + border-color: #a4a4a4; + background-color: transparent; +} +.button--danger.button--outline:hover { + border-color: #ecacac; +} +.button--info.button--outline:hover { + border-color: #3bc0ff; +} +.button--warning.button--outline:hover { + border-color: #f8d9ac; +} +.button--success.button--outline:hover { + border-color: #a6d0a6; +} +.button--full { + background-color: var(--active); + color: white; +} +.button--full:hover { + background-color: var(--background-contrast); + color: var(--text); +} +.button--danger.button--full { + background-color: var(--danger); +} +.button--danger.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--danger); +} +.button--danger.button--full:focus, .button--danger.button--full:active { + outline: 2px solid var(--danger); +} +.button--info.button--full { + background-color: var(--info); +} +.button--info.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--info); +} +.button--info.button--full:focus, .button--info.button--full:active { + outline: 2px solid var(--info); +} +.button--warning.button--full { + background-color: var(--warning); +} +.button--warning.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--warning); +} +.button--warning.button--full:focus, .button--warning.button--full:active { + outline: 2px solid var(--warning); +} +.button--success.button--full { + background-color: var(--success); +} +.button--success.button--full:hover { + background-color: var(--background-contrast); + border-color: var(--success); +} +.button--success.button--full:focus, .button--success.button--full:active { + outline: 2px solid var(--success); +} + +/** + * + * fields + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.field-group { + margin: 0 0 1rem; +} +.field-group--valid .field-text { + border-color: var(--success); +} +.field-group--valid .icon { + fill: var(--success); +} +.field-group--error .field-text { + border-color: var(--danger); +} +.field-group--error .icon { + fill: var(--danger); +} + +.field-label { + font-size: 1rem; + font-family: var(--font-family); +} +.field-label .icon { + vertical-align: text-bottom; +} +.field-label:hover { + cursor: pointer; +} + +.field-text, .field-choice { + font-family: var(--font-family); + font-size: 0.95rem; + width: 100%; + border: 1px solid #a4a4a4; + border-radius: 2px; + margin: 0.7rem 0 0; +} +.field-text:focus, .field-text:active, .field-choice:focus, .field-choice:active { + outline: 0; + border-color: var(--border); +} + +.field-text { + padding: 0.8em 1.1em; +} + +textarea.field-text { + height: 180px; +} + +/** + * field-choice + * + * + */ +.field-choice { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0.8em; + background-image: linear-gradient(to right, #717171, #717171); + background-position: 100%; + background-size: 1.5rem 100%; + background-repeat: no-repeat; +} +.field-choice:active, .field-choice:focus { + background-image: linear-gradient(to right, #3e3e3e, #3e3e3e); +} + +/** + * radio & checkbox + * + *
+ * + *
+ * + */ +[type=checkbox].field-choice, +[type=radio].field-choice { + position: relative; + display: none; +} +[type=checkbox].field-choice ~ .field-choice__checked, +[type=radio].field-choice ~ .field-choice__checked { + display: none; +} +[type=checkbox].field-choice:checked ~ .field-choice__checked, +[type=radio].field-choice:checked ~ .field-choice__checked { + display: inline-block; +} +[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +[type=radio].field-choice:checked ~ .field-choice__unchecked { + display: none; +} + +svg.field-choice__unchecked { + fill: var(--active); +} + +svg.field-choice__checked { + fill: var(--success); +} + +.field-help, .field-error { + display: inline-block; + width: 100%; + padding: 0.6em 0.5em; + font-size: 0.8rem; +} + +/** + * + * + */ +.field-switch { + position: relative; + display: inline-block; + width: 75px; + height: 35px; + border: 1px solid var(--border); + border-radius: 2px; +} +.field-switch:after { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + content: ""; + border: 1px solid var(--border); + border-color: var(--border-contrast); + border-radius: 2px; + background-color: var(--active); + transition: transform 0.25s; +} + +[type=checkbox].field-choice ~ .field-switch:after { + left: 0; +} +[type=checkbox].field-choice:checked ~ .field-switch { + border-color: var(--success); +} +[type=checkbox].field-choice:checked ~ .field-switch:after { + background-color: var(--success); + transform: translateX(100%); +} + +/** + * display error for fields + * + */ +.field-error { + color: var(--danger); +} + +/** + * + *
+ * + * A + * + *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.group__item { + width: auto; + display: inline-block; + margin: 0 0 1rem; + margin-right: 0.25rem; +} +.group__item:last-child { + margin-right: 0; +} + +/** + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.icon { + width: 1em; + height: 1em; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + overflow: hidden; + font-size: 1.4rem; + fill: var(--text); +} + +/** + *
+ * image + *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.hero { + position: relative; +} +.hero img { + width: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 50% 50%; + object-position: 50% 50%; +} + +/** + * + * tabs + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.tabs { + display: flex; + flex-direction: column; + width: 100%; + border-bottom: 1px solid var(--border); +} +@media only screen and (min-width: 768px) { + .tabs { + width: auto; + flex-direction: row; + } +} +.tabs__item { + min-height: 2.8em; + display: flex; + align-items: center; + padding: 0 1em; + color: var(--text); + transition: background-color 0.1s; + border-bottom: 3px solid transparent; + background-color: transparent; + width: 100%; +} +@media only screen and (min-width: 768px) { + .tabs__item { + width: auto; + display: inline-flex; + } +} +.tabs__item:hover { + cursor: pointer; + background-color: var(--active); + color: var(--text-contrast); + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +.tabs__item--selected { + color: var(--text); + border-color: var(--border); +} +.tabs--contrast { + border: 0; +} +.tabs--contrast .tabs__item { + color: var(--text-contrast); +} +.tabs--contrast .tabs__item:hover { + background-color: var(--background-contrast); + color: var(--text); + border-radius: 0; +} +.tabs--contrast .tabs__item--selected { + border-color: var(--border-contrast); +} +.tabs--contrast .tabs__item--selected:hover { + border-color: var(--active); +} + +/** + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.panel, .sidebar__inner { + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background-contrast); +} +.panel__body, .sidebar__body { + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .panel__body, .sidebar__body { + padding: 0.7rem 1rem 0.9rem; + } +} +.panel--border-highlight { + border-left-width: 12px; +} + +/** + *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.progress { + height: 40px; + width: 100%; + border: 1px solid var(--border); +} +.progress__inner { + height: 100%; + border: 1px solid var(--background-contrast); + background-color: var(--background); +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.figure { + margin: 0; + display: inline-block; + line-height: 0; + border: 1px solid var(--border); + border-radius: 2px; + overflow: hidden; +} +.figure__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: var(--background); + line-height: 1.618; + margin: 0; + color: var(--text-contrast); + border-top: 1px solid var(--border-contrast); +} +.figure .media { + border: 0; + border-radius: 0; +} + +.media { + border-radius: 2px; + border: 1px solid var(--border); + width: 100%; + height: auto; +} + +/** + * + * table + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.table { + width: 100%; + border: 1px solid var(--border); + background: var(--white); +} +.table--scroll { + overflow-x: auto; +} +.table__td { + color: var(--text); +} +.table__td, .table__th { + text-align: left; + border-bottom: 1px solid var(--border); + padding: 0.25em 0.75em; +} +@media only screen and (min-width: 992px) { + .table__td, .table__th { + padding: 0.5em 1.25em; + } +} +.table__th { + color: white; + background-color: var(--background); +} +.table--striped .table__tr:nth-child(even) .table__td { + background-color: #e4e4e4; +} +.table--hover .table__tr:hover .table__td { + color: white; + background-color: #585858; +} + +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.bar { + display: flex; + min-height: 2.8em; + background-color: var(--background); + color: var(--text-contrast); + border: 1px solid var(--border); + border-radius: 2px; +} +.bar__start { + justify-content: start; +} +.bar__main { + flex-grow: 1; +} +.bar__end { + justify-content: end; +} +.bar__start, .bar__main, .bar__end { + display: flex; + align-self: center; + align-items: center; + margin-left: 0.75em; +} +.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { + margin-right: 0.75em; +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.modal { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + visibility: hidden; + transition: visibility 0s linear 0.5s; + padding: 1rem; + z-index: 20; + align-items: center; + justify-content: center; +} +.modal:before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + transition: background-color 0.5s; + z-index: 19; + content: ""; + transition: background-color 0.5s; +} +.modal__inner { + position: relative; + z-index: 21; + transition: transform 0.5s; + transform: scale(0); + max-width: 600px; + width: 100%; +} +.modal__title { + font-size: 2rem; + text-align: center; + white-space: pre-line; + margin-bottom: 2rem; +} +.modal__title .icon { + font-size: 3rem; +} +.modal__title, .modal__body { + color: var(--text-contrast); +} +.modal__body { + margin-bottom: 1.5rem; +} +.modal .button { + color: var(--text-contrast); +} +.modal--open { + display: flex; + visibility: visible; + transition: visibility 0s linear 0s; +} +.modal--open:before { + background-color: var(--background-alpha); +} +.modal--open .modal__inner { + transform: scale(1); +} + +/** + *
+ * + * + * + *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.loading { + height: 60px; + width: 47px; + margin: 0 auto; + display: flex; + align-items: center; +} +.loading span { + display: block; + width: 15px; + height: 80px; + background-color: var(--background); + -webkit-animation-name: loading-animation; + animation-name: loading-animation; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); +} +.loading span:first-child { + margin-right: 1px; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.loading span:last-child { + margin-left: 1px; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +@-webkit-keyframes loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} + +@keyframes loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.sidebar { + position: fixed; + z-index: 9; + top: 0; + left: 0; + width: 100%; + height: 100%; + max-width: 95%; + visibility: hidden; + transition: visibility 0s linear 0.5s; +} +.sidebar:before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + transition: background-color 0.5s; + z-index: 9; + content: ""; + transition: background-color 0.5s; +} +.sidebar__inner { + position: relative; + height: 100%; + z-index: 10; + transition: transform 0.2s; + transform: translateX(-100%); +} +.sidebar__footer { + position: fixed; + left: 0; + bottom: 0; + display: flex; + justify-content: space-between; + background: var(--background); + width: 100%; + padding: 1rem; +} +.sidebar--open { + visibility: visible; + transition: visibility 0s linear 0s; +} +.sidebar--open .sidebar__inner { + transform: translateX(0); +} +.sidebar--open:before { + background: var(--background-alpha); +} +@media only screen and (min-width: 992px) { + .sidebar { + max-width: 33%; + } +} + +/** + *
+ *
+ *
+ * + *
+ *
+ * + *
+ *
+ * + *
+ *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.toast { + display: flex; + background: var(--background); + border: 1px solid var(--border); + max-width: 800px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin-top: 1.25rem; + position: relative; + left: calc(-100% - 2rem); + transition: left 0.1s; + pointer-events: auto; +} +.toast--animation { + left: 0; +} +.toast__body { + width: 100%; + padding: 1em 1.25em; +} +.toast__button { + border: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--background); +} +.toast__button:hover { + cursor: pointer; +} +.toast__body, .toast__button { + color: var(--text-contrast); +} +.toast__icon, .toast__button { + display: flex; + align-self: stretch; + align-items: center; + padding: 0 1em; +} +.toast__icon svg, .toast__button svg { + font-size: 2rem; +} +.toast--danger { + background: var(--danger); +} +.toast--danger .toast__button { + background: var(--danger); +} +.toast--info { + background: var(--info); +} +.toast--info .toast__button { + background: var(--info); +} +.toast--success { + background: var(--success); +} +.toast--success .toast__button { + background: var(--success); +} +.toast--warning { + background: var(--warning); +} +.toast--warning .toast__button { + background: var(--warning); +} +.toast-wrapper { + position: fixed; + left: 0; + bottom: 0; + margin: 2rem; + z-index: 30; + pointer-events: none; +} +.toast-wrapper--right { + left: inherit; + right: 0; +} +.toast-wrapper--right .toast { + left: inherit; + right: calc(-100% - 2rem); + transition: right 0.1s; +} +.toast-wrapper--right .toast--animation { + left: inherit; + right: 0; +} +.toast-wrapper--top { + bottom: inherit; + top: 0; +} + +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.masonry { + display: flex; + width: 100%; + flex-flow: row wrap; + gap: 15px; +} +.masonry__item { + width: 100%; + height: 200px; +} +@media only screen and (min-width: 768px) { + .masonry__item { + height: 300px; + } + .masonry__item:nth-child(4n+1) { + width: calc(25% - 10px); + } + .masonry__item:nth-child(4n+2) { + width: calc(55% - 10px); + } + .masonry__item:nth-child(4n+3) { + width: calc(20% - 10px); + } + .masonry__item:nth-child(4n+4) { + width: calc(67% - 10px); + } + .masonry__item:nth-child(4n+5) { + width: calc(33% - 10px); + } +} + +/** + * slider + * + *
+ *
+ *
+ *
+ *
+ * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.slider { + position: relative; + overflow-x: visible; +} +.slider__inner { + display: flex; + white-space: nowrap; +} +.slider__item { + padding: 0 0.6em; + display: inline-block; + white-space: normal; + flex-shrink: 0; +} + +/** + * grid + * + * This Grid is mainly the Reflex Grid from Lee Gordon https://reflexgrid.com/, he has + * done a great work, for i few changes it was needed to integrated + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * grid: mixin + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * order class generation mixins + * + */ +/** + * offset class generation mixins + * + */ +/** + * modifier mixins + * + */ +/** + * justify-content + * + * Uses "text-align" for the fallback inline-block grid + * "text-align" is globally supported and works on all rows except the last + * "text-align-last", where supported, handles the last line (and, happily, grids with only one row) + * + */ +/** + * Responsible Visibility + * + */ +/** + * Breakpoint viewport sizes and media queries + * + * Breakpoints are defined as a map of (name: minimum width), order from small to large: + * (xs: 576px, sm: 768px, md: 992px) + * The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default. + * Name of the next breakpoint, or null for the last breakpoint. + * >> breakpoint-next(sm) -> md + * >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md + * >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md + * + */ +/** + * Minimum breakpoint width. Null for the smallest (first) breakpoint. + * breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px + * + */ +/** + * Media of at most the maximum breakpoint width. No query for the largest breakpoint. + * Makes the @content apply to the given breakpoint and narrower. + * + */ +/** + * Media between the breakpoint's minimum and maximum widths. + * No minimum for the smallest breakpoint, and no maximum for the largest one. + * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. + * + */ +/** + * grid: helpers + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.wrap { + flex-wrap: wrap; +} + +.no-wrap { + flex-wrap: nowrap; +} +.no-wrap [class*=col-] { + flex-shrink: 1; +} + +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +/** + * flex-direction + * + */ +.direction-row { + flex-direction: row; +} + +.direction-row-reverse { + flex-direction: row-reverse; +} + +.direction-column { + flex-direction: column; +} + +.direction-column-reverse { + flex-direction: column-reverse; +} + +/** + * align items (cross axis) + * + */ +.align-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.align-center { + align-items: center; +} + +.align-baseline { + align-items: baseline; +} + +/** + * align content (cross axis) + * + */ +.align-content-start { + align-content: flex-start; +} + +.align-content-end { + align-content: flex-end; +} +.align-content-end [class*=col-] { + vertical-align: bottom; +} + +.align-content-center { + align-content: center; +} + +.align-content-space-between { + align-content: space-between; +} + +.align-content-space-around { + align-content: space-around; +} + +/** + * align-self + * + */ +.align-self-stretch { + align-self: stretch; +} + +.align-self-start { + align-self: flex-start; +} + +.align-self-end { + align-self: flex-end; + vertical-align: bottom; +} + +.align-self-center { + align-self: center; + vertical-align: middle; +} + +.align-self-baseline { + align-self: baseline; + vertical-align: baseline; +} + +/** + * justify-content (main axis) + * + */ +.justify-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-space-between { + justify-content: space-between; +} + +.justify-space-around { + justify-content: space-around; +} + +/** + * cosmetic grid modifiers + * + */ +.grid-bleed [class*=col-] { + padding: 0; +} + +/** + * col modifiers + * + */ +.col-grid { + display: flex; + flex-direction: column; +} +.col-grid.direction-row { + flex-direction: row; +} + +.col-bleed { + padding: 0; +} + +.col-bleed-x { + padding: 15px 0; +} + +.col-bleed-y { + padding: 0 15px; +} + +/** + * col-grid contents + * + */ +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; +} + +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; +} +.flex-footer > :last-child { + margin-bottom: 0; +} + +/** + * Responsive visibility modifiers + * + */ +@media (min-width: 0px) and (max-width: 575px) { + .hidden-xxs { + display: none; + } +} + +@media (min-width: 576px) { + .hidden-xs-up { + display: none; + } +} + +@media (max-width: 767px) { + .hidden-xs-down { + display: none; + } +} + +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; + } +} + +@media (min-width: 768px) { + .hidden-sm-up { + display: none; + } +} + +@media (max-width: 991px) { + .hidden-sm-down { + display: none; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; + } +} + +@media (min-width: 992px) { + .hidden-md-up { + display: none; + } +} + +@media (max-width: 1199px) { + .hidden-md-down { + display: none; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; + } +} + +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; + } +} + +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; + } +} + +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; + } +} + +@media (min-width: 1600px) { + .hidden-xlg { + display: none; + } +} + +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} +.container .grid, +.container-full .grid { + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 992px) { + .container { + max-width: 992px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } +} +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } +} + +.grid { + display: block; + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + list-style-type: none; +} +.grid::after, .grid::before { + box-sizing: border-box; +} + +.col-item, .col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { + box-sizing: border-box; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; +} +.col-item::after, .col-xs-auto::after, .col-sm-auto::after, .col-lg-auto::after, .col-xlg-auto::after, .col-auto::after, .col-12::after, .col-11::after, .col-10::after, .col-9::after, .col-8::after, .col-7::after, .col-6::after, .col-5::after, .col-4::after, .col-3::after, .col-2::after, .col-1::after, .col-item::before, .col-xs-auto::before, .col-sm-auto::before, .col-lg-auto::before, .col-xlg-auto::before, .col-auto::before, .col-12::before, .col-11::before, .col-10::before, .col-9::before, .col-8::before, .col-7::before, .col-6::before, .col-5::before, .col-4::before, .col-3::before, .col-2::before, .col-1::before { + box-sizing: border-box; +} +.col-item .grid, .col-xs-auto .grid, .col-sm-auto .grid, .col-lg-auto .grid, .col-xlg-auto .grid, .col-auto .grid, .col-12 .grid, .col-11 .grid, .col-10 .grid, .col-9 .grid, .col-8 .grid, .col-7 .grid, .col-6 .grid, .col-5 .grid, .col-4 .grid, .col-3 .grid, .col-2 .grid, .col-1 .grid { + flex: 1 1 auto; + margin: -15px; +} + +/** + * grid generation + * + * + */ +.col-12 { + width: 100%; +} + +.col-11 { + width: 91.6666666667%; +} + +.col-10 { + width: 83.3333333333%; +} + +.col-9 { + width: 75%; +} + +.col-8 { + width: 66.6666666667%; +} + +.col-7 { + width: 58.3333333333%; +} + +.col-6 { + width: 50%; +} + +.col-5 { + width: 41.6666666667%; +} + +.col-4 { + width: 33.3333333333%; +} + +.col-3 { + width: 25%; +} + +.col-2 { + width: 16.6666666667%; +} + +.col-1 { + width: 8.3333333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + } + .col-xs-11 { + width: 91.6666666667%; + } + .col-xs-10 { + width: 83.3333333333%; + } + .col-xs-9 { + width: 75%; + } + .col-xs-8 { + width: 66.6666666667%; + } + .col-xs-7 { + width: 58.3333333333%; + } + .col-xs-6 { + width: 50%; + } + .col-xs-5 { + width: 41.6666666667%; + } + .col-xs-4 { + width: 33.3333333333%; + } + .col-xs-3 { + width: 25%; + } + .col-xs-2 { + width: 16.6666666667%; + } + .col-xs-1 { + width: 8.3333333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.6666666667%; + } + .col-sm-10 { + width: 83.3333333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.6666666667%; + } + .col-sm-7 { + width: 58.3333333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.6666666667%; + } + .col-sm-4 { + width: 33.3333333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.6666666667%; + } + .col-sm-1 { + width: 8.3333333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.6666666667%; + } + .col-md-10 { + width: 83.3333333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.6666666667%; + } + .col-md-7 { + width: 58.3333333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.6666666667%; + } + .col-md-4 { + width: 33.3333333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.6666666667%; + } + .col-md-1 { + width: 8.3333333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.6666666667%; + } + .col-lg-10 { + width: 83.3333333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.6666666667%; + } + .col-lg-7 { + width: 58.3333333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.6666666667%; + } + .col-lg-4 { + width: 33.3333333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.6666666667%; + } + .col-lg-1 { + width: 8.3333333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + } + .col-xlg-11 { + width: 91.6666666667%; + } + .col-xlg-10 { + width: 83.3333333333%; + } + .col-xlg-9 { + width: 75%; + } + .col-xlg-8 { + width: 66.6666666667%; + } + .col-xlg-7 { + width: 58.3333333333%; + } + .col-xlg-6 { + width: 50%; + } + .col-xlg-5 { + width: 41.6666666667%; + } + .col-xlg-4 { + width: 33.3333333333%; + } + .col-xlg-3 { + width: 25%; + } + .col-xlg-2 { + width: 16.6666666667%; + } + .col-xlg-1 { + width: 8.3333333333%; + } +} +/** + * col-auto + * + * + */ +.col-auto { + flex: 1 0 0px; +} + +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + } +} +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + } +} +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + } +} +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + } +} +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + } +} +/** + * order helpers generation + * + * + */ +.order-12 { + order: 12; +} + +.order-11 { + order: 11; +} + +.order-10 { + order: 10; +} + +.order-9 { + order: 9; +} + +.order-8 { + order: 8; +} + +.order-7 { + order: 7; +} + +.order-6 { + order: 6; +} + +.order-5 { + order: 5; +} + +.order-4 { + order: 4; +} + +.order-3 { + order: 3; +} + +.order-2 { + order: 2; +} + +.order-1 { + order: 1; +} + +.order-0 { + order: 0; +} + +@media (min-width: 576px) { + .order-xs-12 { + order: 12; + } + .order-xs-11 { + order: 11; + } + .order-xs-10 { + order: 10; + } + .order-xs-9 { + order: 9; + } + .order-xs-8 { + order: 8; + } + .order-xs-7 { + order: 7; + } + .order-xs-6 { + order: 6; + } + .order-xs-5 { + order: 5; + } + .order-xs-4 { + order: 4; + } + .order-xs-3 { + order: 3; + } + .order-xs-2 { + order: 2; + } + .order-xs-1 { + order: 1; + } + .order-xs-0 { + order: 0; + } +} +@media (min-width: 768px) { + .order-sm-12 { + order: 12; + } + .order-sm-11 { + order: 11; + } + .order-sm-10 { + order: 10; + } + .order-sm-9 { + order: 9; + } + .order-sm-8 { + order: 8; + } + .order-sm-7 { + order: 7; + } + .order-sm-6 { + order: 6; + } + .order-sm-5 { + order: 5; + } + .order-sm-4 { + order: 4; + } + .order-sm-3 { + order: 3; + } + .order-sm-2 { + order: 2; + } + .order-sm-1 { + order: 1; + } + .order-sm-0 { + order: 0; + } +} +@media (min-width: 992px) { + .order-md-12 { + order: 12; + } + .order-md-11 { + order: 11; + } + .order-md-10 { + order: 10; + } + .order-md-9 { + order: 9; + } + .order-md-8 { + order: 8; + } + .order-md-7 { + order: 7; + } + .order-md-6 { + order: 6; + } + .order-md-5 { + order: 5; + } + .order-md-4 { + order: 4; + } + .order-md-3 { + order: 3; + } + .order-md-2 { + order: 2; + } + .order-md-1 { + order: 1; + } + .order-md-0 { + order: 0; + } +} +@media (min-width: 1200px) { + .order-lg-12 { + order: 12; + } + .order-lg-11 { + order: 11; + } + .order-lg-10 { + order: 10; + } + .order-lg-9 { + order: 9; + } + .order-lg-8 { + order: 8; + } + .order-lg-7 { + order: 7; + } + .order-lg-6 { + order: 6; + } + .order-lg-5 { + order: 5; + } + .order-lg-4 { + order: 4; + } + .order-lg-3 { + order: 3; + } + .order-lg-2 { + order: 2; + } + .order-lg-1 { + order: 1; + } + .order-lg-0 { + order: 0; + } +} +@media (min-width: 1600px) { + .order-xlg-12 { + order: 12; + } + .order-xlg-11 { + order: 11; + } + .order-xlg-10 { + order: 10; + } + .order-xlg-9 { + order: 9; + } + .order-xlg-8 { + order: 8; + } + .order-xlg-7 { + order: 7; + } + .order-xlg-6 { + order: 6; + } + .order-xlg-5 { + order: 5; + } + .order-xlg-4 { + order: 4; + } + .order-xlg-3 { + order: 3; + } + .order-xlg-2 { + order: 2; + } + .order-xlg-1 { + order: 1; + } + .order-xlg-0 { + order: 0; + } +} +/** + * offset helpers generation + * + * + */ +.offset-11 { + margin-left: 91.6666666667%; +} + +.offset-10 { + margin-left: 83.3333333333%; +} + +.offset-9 { + margin-left: 75%; +} + +.offset-8 { + margin-left: 66.6666666667%; +} + +.offset-7 { + margin-left: 58.3333333333%; +} + +.offset-6 { + margin-left: 50%; +} + +.offset-5 { + margin-left: 41.6666666667%; +} + +.offset-4 { + margin-left: 33.3333333333%; +} + +.offset-3 { + margin-left: 25%; +} + +.offset-2 { + margin-left: 16.6666666667%; +} + +.offset-1 { + margin-left: 8.3333333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.6666666667%; + } + .offset-xs-10 { + margin-left: 83.3333333333%; + } + .offset-xs-9 { + margin-left: 75%; + } + .offset-xs-8 { + margin-left: 66.6666666667%; + } + .offset-xs-7 { + margin-left: 58.3333333333%; + } + .offset-xs-6 { + margin-left: 50%; + } + .offset-xs-5 { + margin-left: 41.6666666667%; + } + .offset-xs-4 { + margin-left: 33.3333333333%; + } + .offset-xs-3 { + margin-left: 25%; + } + .offset-xs-2 { + margin-left: 16.6666666667%; + } + .offset-xs-1 { + margin-left: 8.3333333333%; + } + .offset-xs-0 { + margin-left: 0; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.6666666667%; + } + .offset-sm-10 { + margin-left: 83.3333333333%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-8 { + margin-left: 66.6666666667%; + } + .offset-sm-7 { + margin-left: 58.3333333333%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-5 { + margin-left: 41.6666666667%; + } + .offset-sm-4 { + margin-left: 33.3333333333%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-2 { + margin-left: 16.6666666667%; + } + .offset-sm-1 { + margin-left: 8.3333333333%; + } + .offset-sm-0 { + margin-left: 0; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.6666666667%; + } + .offset-md-10 { + margin-left: 83.3333333333%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-8 { + margin-left: 66.6666666667%; + } + .offset-md-7 { + margin-left: 58.3333333333%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-5 { + margin-left: 41.6666666667%; + } + .offset-md-4 { + margin-left: 33.3333333333%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-2 { + margin-left: 16.6666666667%; + } + .offset-md-1 { + margin-left: 8.3333333333%; + } + .offset-md-0 { + margin-left: 0; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.6666666667%; + } + .offset-lg-10 { + margin-left: 83.3333333333%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-8 { + margin-left: 66.6666666667%; + } + .offset-lg-7 { + margin-left: 58.3333333333%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-5 { + margin-left: 41.6666666667%; + } + .offset-lg-4 { + margin-left: 33.3333333333%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-2 { + margin-left: 16.6666666667%; + } + .offset-lg-1 { + margin-left: 8.3333333333%; + } + .offset-lg-0 { + margin-left: 0; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.6666666667%; + } + .offset-xlg-10 { + margin-left: 83.3333333333%; + } + .offset-xlg-9 { + margin-left: 75%; + } + .offset-xlg-8 { + margin-left: 66.6666666667%; + } + .offset-xlg-7 { + margin-left: 58.3333333333%; + } + .offset-xlg-6 { + margin-left: 50%; + } + .offset-xlg-5 { + margin-left: 41.6666666667%; + } + .offset-xlg-4 { + margin-left: 33.3333333333%; + } + .offset-xlg-3 { + margin-left: 25%; + } + .offset-xlg-2 { + margin-left: 16.6666666667%; + } + .offset-xlg-1 { + margin-left: 8.3333333333%; + } + .offset-xlg-0 { + margin-left: 0; + } +} +/** + * core + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.border { + border: 1px solid var(--border); +} + +.border-round { + border-radius: 2px; +} + +.border-0 { + border: 0; +} + +.radius-0 { + border-radius: 0; +} + +.round { + border-radius: 50%; +} + +/** + * z-index + * + * + */ +.z-index-1 { + z-index: 1; +} + +.z-index-2 { + z-index: 2; +} + +.z-index-3 { + z-index: 3; +} + +.z-index-4 { + z-index: 4; +} + +.z-index-5 { + z-index: 5; +} + +.z-index-6 { + z-index: 6; +} + +.z-index-7 { + z-index: 7; +} + +.z-index-8 { + z-index: 8; +} + +.z-index-9 { + z-index: 9; +} + +.z-index-10 { + z-index: 10; +} + +.z-index-11 { + z-index: 11; +} + +.z-index-12 { + z-index: 12; +} + +.z-index-13 { + z-index: 13; +} + +.z-index-14 { + z-index: 14; +} + +.z-index-15 { + z-index: 15; +} + +.z-index-16 { + z-index: 16; +} + +.z-index-17 { + z-index: 17; +} + +.z-index-18 { + z-index: 18; +} + +.z-index-19 { + z-index: 19; +} + +.z-index-20 { + z-index: 20; +} + +/** + * floating + * + * + */ +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.float-none { + float: none; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +.clearfix::before, .clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +/** + * position + * + * + */ +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.relative { + position: relative !important; +} + +/** + * + * + */ +.vertical-align-bottom { + vertical-align: bottom; +} + +.vertical-align-top { + vertical-align: top; +} + +.vertical-align-baseline { + vertical-align: baseline; +} + +/** + * + * + */ +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.object-fit-cover { + -o-object-fit: cover; + object-fit: cover; +} + +/** + * Sizing + * + * Width and Height Classes, + * Sizes with percentage will calculate with the Reflex Grid + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * mixin: sizing + * + */ +/** + * mixin: sizing for each breakpoint + * + * + */ +.w-0 { + width: 0; +} + +@media only screen and (min-width: 576px) { + .w-xs-1 { + width: 0; + } +} +@media only screen and (min-width: 768px) { + .w-sm-1 { + width: 0; + } +} +@media only screen and (min-width: 992px) { + .w-md-1 { + width: 0; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-1 { + width: 0; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-1 { + width: 0; + } +} +.h-0 { + height: 0; +} + +@media only screen and (min-width: 576px) { + .h-xs-1 { + height: 0; + } +} +@media only screen and (min-width: 768px) { + .h-sm-1 { + height: 0; + } +} +@media only screen and (min-width: 992px) { + .h-md-1 { + height: 0; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-1 { + height: 0; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-1 { + height: 0; + } +} +.w-1 { + width: 1px; +} + +@media only screen and (min-width: 576px) { + .w-xs-1 { + width: 1px; + } +} +@media only screen and (min-width: 768px) { + .w-sm-1 { + width: 1px; + } +} +@media only screen and (min-width: 992px) { + .w-md-1 { + width: 1px; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-1 { + width: 1px; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-1 { + width: 1px; + } +} +.h-1 { + height: 1px; +} + +@media only screen and (min-width: 576px) { + .h-xs-1 { + height: 1px; + } +} +@media only screen and (min-width: 768px) { + .h-sm-1 { + height: 1px; + } +} +@media only screen and (min-width: 992px) { + .h-md-1 { + height: 1px; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-1 { + height: 1px; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-1 { + height: 1px; + } +} +.w-100 { + width: 100%; +} + +@media only screen and (min-width: 576px) { + .w-xs-100 { + width: 100%; + } +} +@media only screen and (min-width: 768px) { + .w-sm-100 { + width: 100%; + } +} +@media only screen and (min-width: 992px) { + .w-md-100 { + width: 100%; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-100 { + width: 100%; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-100 { + width: 100%; + } +} +.w-auto { + width: auto; +} + +@media only screen and (min-width: 576px) { + .w-xs-auto { + width: auto; + } +} +@media only screen and (min-width: 768px) { + .w-sm-auto { + width: auto; + } +} +@media only screen and (min-width: 992px) { + .w-md-auto { + width: auto; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-auto { + width: auto; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-auto { + width: auto; + } +} +.h-100 { + height: 100%; +} + +@media only screen and (min-width: 576px) { + .h-xs-100 { + height: 100%; + } +} +@media only screen and (min-width: 768px) { + .h-sm-100 { + height: 100%; + } +} +@media only screen and (min-width: 992px) { + .h-md-100 { + height: 100%; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-100 { + height: 100%; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-100 { + height: 100%; + } +} +.h-auto { + height: auto; +} + +@media only screen and (min-width: 576px) { + .h-xs-auto { + height: auto; + } +} +@media only screen and (min-width: 768px) { + .h-sm-auto { + height: auto; + } +} +@media only screen and (min-width: 992px) { + .h-md-auto { + height: auto; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-auto { + height: auto; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-auto { + height: auto; + } +} +.w-col-1 { + width: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-1 { + width: 8.3333333333%; + } +} +.h-col-1 { + height: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-1 { + height: 8.3333333333%; + } +} +.w-col-2 { + width: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-2 { + width: 16.6666666667%; + } +} +.h-col-2 { + height: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-2 { + height: 16.6666666667%; + } +} +.w-col-3 { + width: 25%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-3 { + width: 25%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-3 { + width: 25%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-3 { + width: 25%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-3 { + width: 25%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-3 { + width: 25%; + } +} +.h-col-3 { + height: 25%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-3 { + height: 25%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-3 { + height: 25%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-3 { + height: 25%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-3 { + height: 25%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-3 { + height: 25%; + } +} +.w-col-4 { + width: 33.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-4 { + width: 33.3333333333%; + } +} +.h-col-4 { + height: 33.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-4 { + height: 33.3333333333%; + } +} +.w-col-5 { + width: 41.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-5 { + width: 41.6666666667%; + } +} +.h-col-5 { + height: 41.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-5 { + height: 41.6666666667%; + } +} +.w-col-6 { + width: 50%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-6 { + width: 50%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-6 { + width: 50%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-6 { + width: 50%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-6 { + width: 50%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-6 { + width: 50%; + } +} +.h-col-6 { + height: 50%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-6 { + height: 50%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-6 { + height: 50%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-6 { + height: 50%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-6 { + height: 50%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-6 { + height: 50%; + } +} +.w-col-7 { + width: 58.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-7 { + width: 58.3333333333%; + } +} +.h-col-7 { + height: 58.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-7 { + height: 58.3333333333%; + } +} +.w-col-8 { + width: 66.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-8 { + width: 66.6666666667%; + } +} +.h-col-8 { + height: 66.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-8 { + height: 66.6666666667%; + } +} +.w-col-9 { + width: 75%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-9 { + width: 75%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-9 { + width: 75%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-9 { + width: 75%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-9 { + width: 75%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-9 { + width: 75%; + } +} +.h-col-9 { + height: 75%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-9 { + height: 75%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-9 { + height: 75%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-9 { + height: 75%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-9 { + height: 75%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-9 { + height: 75%; + } +} +.w-col-10 { + width: 83.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-10 { + width: 83.3333333333%; + } +} +.h-col-10 { + height: 83.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-10 { + height: 83.3333333333%; + } +} +.w-col-11 { + width: 91.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-11 { + width: 91.6666666667%; + } +} +.h-col-11 { + height: 91.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-11 { + height: 91.6666666667%; + } +} +.w-col-12 { + width: 100%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-12 { + width: 100%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-12 { + width: 100%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-12 { + width: 100%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-12 { + width: 100%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-12 { + width: 100%; + } +} +.h-col-12 { + height: 100%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-12 { + height: 100%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-12 { + height: 100%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-12 { + height: 100%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-12 { + height: 100%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-12 { + height: 100%; + } +} +.w-1 { + width: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-1 { + width: 0.5rem; + } +} +.w-2 { + width: 1rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-2 { + width: 1rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-2 { + width: 1rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-2 { + width: 1rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-2 { + width: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-2 { + width: 1rem; + } +} +.w-3 { + width: 1.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-3 { + width: 1.5rem; + } +} +.w-4 { + width: 2rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-4 { + width: 2rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-4 { + width: 2rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-4 { + width: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-4 { + width: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-4 { + width: 2rem; + } +} +.w-5 { + width: 2.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-5 { + width: 2.5rem; + } +} +.w-6 { + width: 3rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-6 { + width: 3rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-6 { + width: 3rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-6 { + width: 3rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-6 { + width: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-6 { + width: 3rem; + } +} +.w-7 { + width: 3.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-7 { + width: 3.5rem; + } +} +.w-8 { + width: 4rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-8 { + width: 4rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-8 { + width: 4rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-8 { + width: 4rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-8 { + width: 4rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-8 { + width: 4rem; + } +} +.w-9 { + width: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-9 { + width: 4.5rem; + } +} +.w-10 { + width: 5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-10 { + width: 5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-10 { + width: 5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-10 { + width: 5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-10 { + width: 5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-10 { + width: 5rem; + } +} +.w-11 { + width: 5.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-11 { + width: 5.5rem; + } +} +.w-12 { + width: 6rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-12 { + width: 6rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-12 { + width: 6rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-12 { + width: 6rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-12 { + width: 6rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-12 { + width: 6rem; + } +} +.w-13 { + width: 6.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-13 { + width: 6.5rem; + } +} +.w-14 { + width: 7rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-14 { + width: 7rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-14 { + width: 7rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-14 { + width: 7rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-14 { + width: 7rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-14 { + width: 7rem; + } +} +.w-15 { + width: 7.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-15 { + width: 7.5rem; + } +} +.w-16 { + width: 8rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-16 { + width: 8rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-16 { + width: 8rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-16 { + width: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-16 { + width: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-16 { + width: 8rem; + } +} +.w-17 { + width: 8.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-17 { + width: 8.5rem; + } +} +.w-18 { + width: 9rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-18 { + width: 9rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-18 { + width: 9rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-18 { + width: 9rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-18 { + width: 9rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-18 { + width: 9rem; + } +} +.w-19 { + width: 9.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-19 { + width: 9.5rem; + } +} +.w-20 { + width: 10rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-20 { + width: 10rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-20 { + width: 10rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-20 { + width: 10rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-20 { + width: 10rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-20 { + width: 10rem; + } +} +.w-21 { + width: 10.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-21 { + width: 10.5rem; + } +} +.w-22 { + width: 11rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-22 { + width: 11rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-22 { + width: 11rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-22 { + width: 11rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-22 { + width: 11rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-22 { + width: 11rem; + } +} +.w-23 { + width: 11.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-23 { + width: 11.5rem; + } +} +.w-24 { + width: 12rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-24 { + width: 12rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-24 { + width: 12rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-24 { + width: 12rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-24 { + width: 12rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-24 { + width: 12rem; + } +} +.w-25 { + width: 12.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-25 { + width: 12.5rem; + } +} +.w-26 { + width: 13rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-26 { + width: 13rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-26 { + width: 13rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-26 { + width: 13rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-26 { + width: 13rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-26 { + width: 13rem; + } +} +.w-27 { + width: 13.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-27 { + width: 13.5rem; + } +} +.w-28 { + width: 14rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-28 { + width: 14rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-28 { + width: 14rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-28 { + width: 14rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-28 { + width: 14rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-28 { + width: 14rem; + } +} +.w-29 { + width: 14.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-29 { + width: 14.5rem; + } +} +.w-30 { + width: 15rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-30 { + width: 15rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-30 { + width: 15rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-30 { + width: 15rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-30 { + width: 15rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-30 { + width: 15rem; + } +} +.w-31 { + width: 15.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-31 { + width: 15.5rem; + } +} +.w-32 { + width: 16rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-32 { + width: 16rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-32 { + width: 16rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-32 { + width: 16rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-32 { + width: 16rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-32 { + width: 16rem; + } +} +.w-33 { + width: 16.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-33 { + width: 16.5rem; + } +} +.w-34 { + width: 17rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-34 { + width: 17rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-34 { + width: 17rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-34 { + width: 17rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-34 { + width: 17rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-34 { + width: 17rem; + } +} +.w-35 { + width: 17.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-35 { + width: 17.5rem; + } +} +.w-36 { + width: 18rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-36 { + width: 18rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-36 { + width: 18rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-36 { + width: 18rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-36 { + width: 18rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-36 { + width: 18rem; + } +} +.w-37 { + width: 18.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-37 { + width: 18.5rem; + } +} +.w-38 { + width: 19rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-38 { + width: 19rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-38 { + width: 19rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-38 { + width: 19rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-38 { + width: 19rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-38 { + width: 19rem; + } +} +.w-39 { + width: 19.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-39 { + width: 19.5rem; + } +} +.w-40 { + width: 20rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-40 { + width: 20rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-40 { + width: 20rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-40 { + width: 20rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-40 { + width: 20rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-40 { + width: 20rem; + } +} +.w-41 { + width: 20.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-41 { + width: 20.5rem; + } +} +.w-42 { + width: 21rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-42 { + width: 21rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-42 { + width: 21rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-42 { + width: 21rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-42 { + width: 21rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-42 { + width: 21rem; + } +} +.w-43 { + width: 21.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-43 { + width: 21.5rem; + } +} +.w-44 { + width: 22rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-44 { + width: 22rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-44 { + width: 22rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-44 { + width: 22rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-44 { + width: 22rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-44 { + width: 22rem; + } +} +.w-45 { + width: 22.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-45 { + width: 22.5rem; + } +} +.w-46 { + width: 23rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-46 { + width: 23rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-46 { + width: 23rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-46 { + width: 23rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-46 { + width: 23rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-46 { + width: 23rem; + } +} +.w-47 { + width: 23.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-47 { + width: 23.5rem; + } +} +.w-48 { + width: 24rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-48 { + width: 24rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-48 { + width: 24rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-48 { + width: 24rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-48 { + width: 24rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-48 { + width: 24rem; + } +} +.w-49 { + width: 24.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-49 { + width: 24.5rem; + } +} +.w-50 { + width: 25rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-50 { + width: 25rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-50 { + width: 25rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-50 { + width: 25rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-50 { + width: 25rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-50 { + width: 25rem; + } +} +.w-51 { + width: 25.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-51 { + width: 25.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-51 { + width: 25.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-51 { + width: 25.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-51 { + width: 25.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-51 { + width: 25.5rem; + } +} +.w-52 { + width: 26rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-52 { + width: 26rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-52 { + width: 26rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-52 { + width: 26rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-52 { + width: 26rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-52 { + width: 26rem; + } +} +.w-53 { + width: 26.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-53 { + width: 26.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-53 { + width: 26.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-53 { + width: 26.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-53 { + width: 26.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-53 { + width: 26.5rem; + } +} +.w-54 { + width: 27rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-54 { + width: 27rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-54 { + width: 27rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-54 { + width: 27rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-54 { + width: 27rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-54 { + width: 27rem; + } +} +.w-55 { + width: 27.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-55 { + width: 27.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-55 { + width: 27.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-55 { + width: 27.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-55 { + width: 27.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-55 { + width: 27.5rem; + } +} +.w-56 { + width: 28rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-56 { + width: 28rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-56 { + width: 28rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-56 { + width: 28rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-56 { + width: 28rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-56 { + width: 28rem; + } +} +.w-57 { + width: 28.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-57 { + width: 28.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-57 { + width: 28.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-57 { + width: 28.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-57 { + width: 28.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-57 { + width: 28.5rem; + } +} +.w-58 { + width: 29rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-58 { + width: 29rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-58 { + width: 29rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-58 { + width: 29rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-58 { + width: 29rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-58 { + width: 29rem; + } +} +.w-59 { + width: 29.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-59 { + width: 29.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-59 { + width: 29.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-59 { + width: 29.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-59 { + width: 29.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-59 { + width: 29.5rem; + } +} +.w-60 { + width: 30rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-60 { + width: 30rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-60 { + width: 30rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-60 { + width: 30rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-60 { + width: 30rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-60 { + width: 30rem; + } +} +.w-61 { + width: 30.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-61 { + width: 30.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-61 { + width: 30.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-61 { + width: 30.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-61 { + width: 30.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-61 { + width: 30.5rem; + } +} +.w-62 { + width: 31rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-62 { + width: 31rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-62 { + width: 31rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-62 { + width: 31rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-62 { + width: 31rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-62 { + width: 31rem; + } +} +.w-63 { + width: 31.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-63 { + width: 31.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-63 { + width: 31.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-63 { + width: 31.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-63 { + width: 31.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-63 { + width: 31.5rem; + } +} +.w-64 { + width: 32rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-64 { + width: 32rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-64 { + width: 32rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-64 { + width: 32rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-64 { + width: 32rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-64 { + width: 32rem; + } +} +.w-65 { + width: 32.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-65 { + width: 32.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-65 { + width: 32.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-65 { + width: 32.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-65 { + width: 32.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-65 { + width: 32.5rem; + } +} +.w-66 { + width: 33rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-66 { + width: 33rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-66 { + width: 33rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-66 { + width: 33rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-66 { + width: 33rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-66 { + width: 33rem; + } +} +.w-67 { + width: 33.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-67 { + width: 33.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-67 { + width: 33.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-67 { + width: 33.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-67 { + width: 33.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-67 { + width: 33.5rem; + } +} +.w-68 { + width: 34rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-68 { + width: 34rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-68 { + width: 34rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-68 { + width: 34rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-68 { + width: 34rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-68 { + width: 34rem; + } +} +.w-69 { + width: 34.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-69 { + width: 34.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-69 { + width: 34.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-69 { + width: 34.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-69 { + width: 34.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-69 { + width: 34.5rem; + } +} +.w-70 { + width: 35rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-70 { + width: 35rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-70 { + width: 35rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-70 { + width: 35rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-70 { + width: 35rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-70 { + width: 35rem; + } +} +.w-71 { + width: 35.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-71 { + width: 35.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-71 { + width: 35.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-71 { + width: 35.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-71 { + width: 35.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-71 { + width: 35.5rem; + } +} +.w-72 { + width: 36rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-72 { + width: 36rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-72 { + width: 36rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-72 { + width: 36rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-72 { + width: 36rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-72 { + width: 36rem; + } +} +.w-73 { + width: 36.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-73 { + width: 36.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-73 { + width: 36.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-73 { + width: 36.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-73 { + width: 36.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-73 { + width: 36.5rem; + } +} +.w-74 { + width: 37rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-74 { + width: 37rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-74 { + width: 37rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-74 { + width: 37rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-74 { + width: 37rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-74 { + width: 37rem; + } +} +.w-75 { + width: 37.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-75 { + width: 37.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-75 { + width: 37.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-75 { + width: 37.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-75 { + width: 37.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-75 { + width: 37.5rem; + } +} +.w-76 { + width: 38rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-76 { + width: 38rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-76 { + width: 38rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-76 { + width: 38rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-76 { + width: 38rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-76 { + width: 38rem; + } +} +.w-77 { + width: 38.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-77 { + width: 38.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-77 { + width: 38.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-77 { + width: 38.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-77 { + width: 38.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-77 { + width: 38.5rem; + } +} +.w-78 { + width: 39rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-78 { + width: 39rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-78 { + width: 39rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-78 { + width: 39rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-78 { + width: 39rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-78 { + width: 39rem; + } +} +.w-79 { + width: 39.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-79 { + width: 39.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-79 { + width: 39.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-79 { + width: 39.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-79 { + width: 39.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-79 { + width: 39.5rem; + } +} +.w-80 { + width: 40rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-80 { + width: 40rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-80 { + width: 40rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-80 { + width: 40rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-80 { + width: 40rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-80 { + width: 40rem; + } +} +.w-81 { + width: 40.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-81 { + width: 40.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-81 { + width: 40.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-81 { + width: 40.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-81 { + width: 40.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-81 { + width: 40.5rem; + } +} +.w-82 { + width: 41rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-82 { + width: 41rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-82 { + width: 41rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-82 { + width: 41rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-82 { + width: 41rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-82 { + width: 41rem; + } +} +.w-83 { + width: 41.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-83 { + width: 41.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-83 { + width: 41.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-83 { + width: 41.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-83 { + width: 41.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-83 { + width: 41.5rem; + } +} +.w-84 { + width: 42rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-84 { + width: 42rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-84 { + width: 42rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-84 { + width: 42rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-84 { + width: 42rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-84 { + width: 42rem; + } +} +.w-85 { + width: 42.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-85 { + width: 42.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-85 { + width: 42.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-85 { + width: 42.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-85 { + width: 42.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-85 { + width: 42.5rem; + } +} +.w-86 { + width: 43rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-86 { + width: 43rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-86 { + width: 43rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-86 { + width: 43rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-86 { + width: 43rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-86 { + width: 43rem; + } +} +.w-87 { + width: 43.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-87 { + width: 43.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-87 { + width: 43.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-87 { + width: 43.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-87 { + width: 43.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-87 { + width: 43.5rem; + } +} +.w-88 { + width: 44rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-88 { + width: 44rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-88 { + width: 44rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-88 { + width: 44rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-88 { + width: 44rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-88 { + width: 44rem; + } +} +.w-89 { + width: 44.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-89 { + width: 44.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-89 { + width: 44.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-89 { + width: 44.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-89 { + width: 44.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-89 { + width: 44.5rem; + } +} +.w-90 { + width: 45rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-90 { + width: 45rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-90 { + width: 45rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-90 { + width: 45rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-90 { + width: 45rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-90 { + width: 45rem; + } +} +.w-91 { + width: 45.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-91 { + width: 45.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-91 { + width: 45.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-91 { + width: 45.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-91 { + width: 45.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-91 { + width: 45.5rem; + } +} +.w-92 { + width: 46rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-92 { + width: 46rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-92 { + width: 46rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-92 { + width: 46rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-92 { + width: 46rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-92 { + width: 46rem; + } +} +.w-93 { + width: 46.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-93 { + width: 46.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-93 { + width: 46.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-93 { + width: 46.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-93 { + width: 46.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-93 { + width: 46.5rem; + } +} +.w-94 { + width: 47rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-94 { + width: 47rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-94 { + width: 47rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-94 { + width: 47rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-94 { + width: 47rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-94 { + width: 47rem; + } +} +.w-95 { + width: 47.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-95 { + width: 47.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-95 { + width: 47.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-95 { + width: 47.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-95 { + width: 47.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-95 { + width: 47.5rem; + } +} +.w-96 { + width: 48rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-96 { + width: 48rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-96 { + width: 48rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-96 { + width: 48rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-96 { + width: 48rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-96 { + width: 48rem; + } +} +.w-97 { + width: 48.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-97 { + width: 48.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-97 { + width: 48.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-97 { + width: 48.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-97 { + width: 48.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-97 { + width: 48.5rem; + } +} +.w-98 { + width: 49rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-98 { + width: 49rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-98 { + width: 49rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-98 { + width: 49rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-98 { + width: 49rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-98 { + width: 49rem; + } +} +.w-99 { + width: 49.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-99 { + width: 49.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-99 { + width: 49.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-99 { + width: 49.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-99 { + width: 49.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-99 { + width: 49.5rem; + } +} +.h-1 { + height: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-1 { + height: 0.5rem; + } +} +.h-2 { + height: 1rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-2 { + height: 1rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-2 { + height: 1rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-2 { + height: 1rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-2 { + height: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-2 { + height: 1rem; + } +} +.h-3 { + height: 1.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-3 { + height: 1.5rem; + } +} +.h-4 { + height: 2rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-4 { + height: 2rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-4 { + height: 2rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-4 { + height: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-4 { + height: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-4 { + height: 2rem; + } +} +.h-5 { + height: 2.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-5 { + height: 2.5rem; + } +} +.h-6 { + height: 3rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-6 { + height: 3rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-6 { + height: 3rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-6 { + height: 3rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-6 { + height: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-6 { + height: 3rem; + } +} +.h-7 { + height: 3.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-7 { + height: 3.5rem; + } +} +.h-8 { + height: 4rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-8 { + height: 4rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-8 { + height: 4rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-8 { + height: 4rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-8 { + height: 4rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-8 { + height: 4rem; + } +} +.h-9 { + height: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-9 { + height: 4.5rem; + } +} +.h-10 { + height: 5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-10 { + height: 5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-10 { + height: 5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-10 { + height: 5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-10 { + height: 5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-10 { + height: 5rem; + } +} +.h-11 { + height: 5.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-11 { + height: 5.5rem; + } +} +.h-12 { + height: 6rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-12 { + height: 6rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-12 { + height: 6rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-12 { + height: 6rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-12 { + height: 6rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-12 { + height: 6rem; + } +} +.h-13 { + height: 6.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-13 { + height: 6.5rem; + } +} +.h-14 { + height: 7rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-14 { + height: 7rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-14 { + height: 7rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-14 { + height: 7rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-14 { + height: 7rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-14 { + height: 7rem; + } +} +.h-15 { + height: 7.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-15 { + height: 7.5rem; + } +} +.h-16 { + height: 8rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-16 { + height: 8rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-16 { + height: 8rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-16 { + height: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-16 { + height: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-16 { + height: 8rem; + } +} +.h-17 { + height: 8.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-17 { + height: 8.5rem; + } +} +.h-18 { + height: 9rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-18 { + height: 9rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-18 { + height: 9rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-18 { + height: 9rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-18 { + height: 9rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-18 { + height: 9rem; + } +} +.h-19 { + height: 9.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-19 { + height: 9.5rem; + } +} +.h-20 { + height: 10rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-20 { + height: 10rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-20 { + height: 10rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-20 { + height: 10rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-20 { + height: 10rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-20 { + height: 10rem; + } +} +.h-21 { + height: 10.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-21 { + height: 10.5rem; + } +} +.h-22 { + height: 11rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-22 { + height: 11rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-22 { + height: 11rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-22 { + height: 11rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-22 { + height: 11rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-22 { + height: 11rem; + } +} +.h-23 { + height: 11.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-23 { + height: 11.5rem; + } +} +.h-24 { + height: 12rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-24 { + height: 12rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-24 { + height: 12rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-24 { + height: 12rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-24 { + height: 12rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-24 { + height: 12rem; + } +} +.h-25 { + height: 12.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-25 { + height: 12.5rem; + } +} +.h-26 { + height: 13rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-26 { + height: 13rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-26 { + height: 13rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-26 { + height: 13rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-26 { + height: 13rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-26 { + height: 13rem; + } +} +.h-27 { + height: 13.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-27 { + height: 13.5rem; + } +} +.h-28 { + height: 14rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-28 { + height: 14rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-28 { + height: 14rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-28 { + height: 14rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-28 { + height: 14rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-28 { + height: 14rem; + } +} +.h-29 { + height: 14.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-29 { + height: 14.5rem; + } +} +.h-30 { + height: 15rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-30 { + height: 15rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-30 { + height: 15rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-30 { + height: 15rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-30 { + height: 15rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-30 { + height: 15rem; + } +} +.h-31 { + height: 15.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-31 { + height: 15.5rem; + } +} +.h-32 { + height: 16rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-32 { + height: 16rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-32 { + height: 16rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-32 { + height: 16rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-32 { + height: 16rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-32 { + height: 16rem; + } +} +.h-33 { + height: 16.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-33 { + height: 16.5rem; + } +} +.h-34 { + height: 17rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-34 { + height: 17rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-34 { + height: 17rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-34 { + height: 17rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-34 { + height: 17rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-34 { + height: 17rem; + } +} +.h-35 { + height: 17.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-35 { + height: 17.5rem; + } +} +.h-36 { + height: 18rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-36 { + height: 18rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-36 { + height: 18rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-36 { + height: 18rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-36 { + height: 18rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-36 { + height: 18rem; + } +} +.h-37 { + height: 18.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-37 { + height: 18.5rem; + } +} +.h-38 { + height: 19rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-38 { + height: 19rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-38 { + height: 19rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-38 { + height: 19rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-38 { + height: 19rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-38 { + height: 19rem; + } +} +.h-39 { + height: 19.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-39 { + height: 19.5rem; + } +} +.h-40 { + height: 20rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-40 { + height: 20rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-40 { + height: 20rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-40 { + height: 20rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-40 { + height: 20rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-40 { + height: 20rem; + } +} +.h-41 { + height: 20.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-41 { + height: 20.5rem; + } +} +.h-42 { + height: 21rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-42 { + height: 21rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-42 { + height: 21rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-42 { + height: 21rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-42 { + height: 21rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-42 { + height: 21rem; + } +} +.h-43 { + height: 21.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-43 { + height: 21.5rem; + } +} +.h-44 { + height: 22rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-44 { + height: 22rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-44 { + height: 22rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-44 { + height: 22rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-44 { + height: 22rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-44 { + height: 22rem; + } +} +.h-45 { + height: 22.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-45 { + height: 22.5rem; + } +} +.h-46 { + height: 23rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-46 { + height: 23rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-46 { + height: 23rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-46 { + height: 23rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-46 { + height: 23rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-46 { + height: 23rem; + } +} +.h-47 { + height: 23.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-47 { + height: 23.5rem; + } +} +.h-48 { + height: 24rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-48 { + height: 24rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-48 { + height: 24rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-48 { + height: 24rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-48 { + height: 24rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-48 { + height: 24rem; + } +} +.h-49 { + height: 24.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-49 { + height: 24.5rem; + } +} +.h-50 { + height: 25rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-50 { + height: 25rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-50 { + height: 25rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-50 { + height: 25rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-50 { + height: 25rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-50 { + height: 25rem; + } +} +.h-51 { + height: 25.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-51 { + height: 25.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-51 { + height: 25.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-51 { + height: 25.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-51 { + height: 25.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-51 { + height: 25.5rem; + } +} +.h-52 { + height: 26rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-52 { + height: 26rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-52 { + height: 26rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-52 { + height: 26rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-52 { + height: 26rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-52 { + height: 26rem; + } +} +.h-53 { + height: 26.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-53 { + height: 26.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-53 { + height: 26.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-53 { + height: 26.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-53 { + height: 26.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-53 { + height: 26.5rem; + } +} +.h-54 { + height: 27rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-54 { + height: 27rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-54 { + height: 27rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-54 { + height: 27rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-54 { + height: 27rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-54 { + height: 27rem; + } +} +.h-55 { + height: 27.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-55 { + height: 27.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-55 { + height: 27.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-55 { + height: 27.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-55 { + height: 27.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-55 { + height: 27.5rem; + } +} +.h-56 { + height: 28rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-56 { + height: 28rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-56 { + height: 28rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-56 { + height: 28rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-56 { + height: 28rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-56 { + height: 28rem; + } +} +.h-57 { + height: 28.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-57 { + height: 28.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-57 { + height: 28.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-57 { + height: 28.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-57 { + height: 28.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-57 { + height: 28.5rem; + } +} +.h-58 { + height: 29rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-58 { + height: 29rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-58 { + height: 29rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-58 { + height: 29rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-58 { + height: 29rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-58 { + height: 29rem; + } +} +.h-59 { + height: 29.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-59 { + height: 29.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-59 { + height: 29.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-59 { + height: 29.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-59 { + height: 29.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-59 { + height: 29.5rem; + } +} +.h-60 { + height: 30rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-60 { + height: 30rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-60 { + height: 30rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-60 { + height: 30rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-60 { + height: 30rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-60 { + height: 30rem; + } +} +.h-61 { + height: 30.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-61 { + height: 30.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-61 { + height: 30.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-61 { + height: 30.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-61 { + height: 30.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-61 { + height: 30.5rem; + } +} +.h-62 { + height: 31rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-62 { + height: 31rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-62 { + height: 31rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-62 { + height: 31rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-62 { + height: 31rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-62 { + height: 31rem; + } +} +.h-63 { + height: 31.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-63 { + height: 31.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-63 { + height: 31.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-63 { + height: 31.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-63 { + height: 31.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-63 { + height: 31.5rem; + } +} +.h-64 { + height: 32rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-64 { + height: 32rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-64 { + height: 32rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-64 { + height: 32rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-64 { + height: 32rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-64 { + height: 32rem; + } +} +.h-65 { + height: 32.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-65 { + height: 32.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-65 { + height: 32.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-65 { + height: 32.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-65 { + height: 32.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-65 { + height: 32.5rem; + } +} +.h-66 { + height: 33rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-66 { + height: 33rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-66 { + height: 33rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-66 { + height: 33rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-66 { + height: 33rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-66 { + height: 33rem; + } +} +.h-67 { + height: 33.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-67 { + height: 33.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-67 { + height: 33.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-67 { + height: 33.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-67 { + height: 33.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-67 { + height: 33.5rem; + } +} +.h-68 { + height: 34rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-68 { + height: 34rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-68 { + height: 34rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-68 { + height: 34rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-68 { + height: 34rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-68 { + height: 34rem; + } +} +.h-69 { + height: 34.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-69 { + height: 34.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-69 { + height: 34.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-69 { + height: 34.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-69 { + height: 34.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-69 { + height: 34.5rem; + } +} +.h-70 { + height: 35rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-70 { + height: 35rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-70 { + height: 35rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-70 { + height: 35rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-70 { + height: 35rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-70 { + height: 35rem; + } +} +.h-71 { + height: 35.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-71 { + height: 35.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-71 { + height: 35.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-71 { + height: 35.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-71 { + height: 35.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-71 { + height: 35.5rem; + } +} +.h-72 { + height: 36rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-72 { + height: 36rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-72 { + height: 36rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-72 { + height: 36rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-72 { + height: 36rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-72 { + height: 36rem; + } +} +.h-73 { + height: 36.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-73 { + height: 36.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-73 { + height: 36.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-73 { + height: 36.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-73 { + height: 36.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-73 { + height: 36.5rem; + } +} +.h-74 { + height: 37rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-74 { + height: 37rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-74 { + height: 37rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-74 { + height: 37rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-74 { + height: 37rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-74 { + height: 37rem; + } +} +.h-75 { + height: 37.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-75 { + height: 37.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-75 { + height: 37.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-75 { + height: 37.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-75 { + height: 37.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-75 { + height: 37.5rem; + } +} +.h-76 { + height: 38rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-76 { + height: 38rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-76 { + height: 38rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-76 { + height: 38rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-76 { + height: 38rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-76 { + height: 38rem; + } +} +.h-77 { + height: 38.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-77 { + height: 38.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-77 { + height: 38.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-77 { + height: 38.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-77 { + height: 38.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-77 { + height: 38.5rem; + } +} +.h-78 { + height: 39rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-78 { + height: 39rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-78 { + height: 39rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-78 { + height: 39rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-78 { + height: 39rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-78 { + height: 39rem; + } +} +.h-79 { + height: 39.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-79 { + height: 39.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-79 { + height: 39.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-79 { + height: 39.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-79 { + height: 39.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-79 { + height: 39.5rem; + } +} +.h-80 { + height: 40rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-80 { + height: 40rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-80 { + height: 40rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-80 { + height: 40rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-80 { + height: 40rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-80 { + height: 40rem; + } +} +.h-81 { + height: 40.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-81 { + height: 40.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-81 { + height: 40.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-81 { + height: 40.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-81 { + height: 40.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-81 { + height: 40.5rem; + } +} +.h-82 { + height: 41rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-82 { + height: 41rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-82 { + height: 41rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-82 { + height: 41rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-82 { + height: 41rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-82 { + height: 41rem; + } +} +.h-83 { + height: 41.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-83 { + height: 41.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-83 { + height: 41.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-83 { + height: 41.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-83 { + height: 41.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-83 { + height: 41.5rem; + } +} +.h-84 { + height: 42rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-84 { + height: 42rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-84 { + height: 42rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-84 { + height: 42rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-84 { + height: 42rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-84 { + height: 42rem; + } +} +.h-85 { + height: 42.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-85 { + height: 42.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-85 { + height: 42.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-85 { + height: 42.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-85 { + height: 42.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-85 { + height: 42.5rem; + } +} +.h-86 { + height: 43rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-86 { + height: 43rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-86 { + height: 43rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-86 { + height: 43rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-86 { + height: 43rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-86 { + height: 43rem; + } +} +.h-87 { + height: 43.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-87 { + height: 43.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-87 { + height: 43.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-87 { + height: 43.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-87 { + height: 43.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-87 { + height: 43.5rem; + } +} +.h-88 { + height: 44rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-88 { + height: 44rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-88 { + height: 44rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-88 { + height: 44rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-88 { + height: 44rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-88 { + height: 44rem; + } +} +.h-89 { + height: 44.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-89 { + height: 44.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-89 { + height: 44.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-89 { + height: 44.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-89 { + height: 44.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-89 { + height: 44.5rem; + } +} +.h-90 { + height: 45rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-90 { + height: 45rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-90 { + height: 45rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-90 { + height: 45rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-90 { + height: 45rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-90 { + height: 45rem; + } +} +.h-91 { + height: 45.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-91 { + height: 45.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-91 { + height: 45.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-91 { + height: 45.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-91 { + height: 45.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-91 { + height: 45.5rem; + } +} +.h-92 { + height: 46rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-92 { + height: 46rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-92 { + height: 46rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-92 { + height: 46rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-92 { + height: 46rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-92 { + height: 46rem; + } +} +.h-93 { + height: 46.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-93 { + height: 46.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-93 { + height: 46.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-93 { + height: 46.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-93 { + height: 46.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-93 { + height: 46.5rem; + } +} +.h-94 { + height: 47rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-94 { + height: 47rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-94 { + height: 47rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-94 { + height: 47rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-94 { + height: 47rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-94 { + height: 47rem; + } +} +.h-95 { + height: 47.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-95 { + height: 47.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-95 { + height: 47.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-95 { + height: 47.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-95 { + height: 47.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-95 { + height: 47.5rem; + } +} +.h-96 { + height: 48rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-96 { + height: 48rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-96 { + height: 48rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-96 { + height: 48rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-96 { + height: 48rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-96 { + height: 48rem; + } +} +.h-97 { + height: 48.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-97 { + height: 48.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-97 { + height: 48.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-97 { + height: 48.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-97 { + height: 48.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-97 { + height: 48.5rem; + } +} +.h-98 { + height: 49rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-98 { + height: 49rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-98 { + height: 49rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-98 { + height: 49rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-98 { + height: 49rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-98 { + height: 49rem; + } +} +.h-99 { + height: 49.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-99 { + height: 49.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-99 { + height: 49.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-99 { + height: 49.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-99 { + height: 49.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-99 { + height: 49.5rem; + } +} +/** + * Spacing + * + * creates margin and padding for each direction and for each breakpont + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * mixin: spacing for single padding or margin + * + * + */ +/** + * mixin: spacing for each breakpoint + * + * + */ +/** + * + * + * + */ +.marginless { + margin: 0; +} + +.paddingless { + padding: 0; +} + +.m-last-child-0 > *:last-child { + margin: 0; +} + +.m-top-last-child-0 > *:last-child { + margin-top: 0; +} + +.m-bottom-last-child-0 > *:last-child { + margin-bottom: 0; +} + +.m-0 { + margin: 0; +} + +.m-1 { + margin: 1px; +} + +.m-2 { + margin: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-2 { + margin: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-2 { + margin: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-2 { + margin: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-2 { + margin: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-2 { + margin: 0.125rem; + } +} +.m-3 { + margin: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-3 { + margin: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-3 { + margin: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-3 { + margin: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-3 { + margin: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-3 { + margin: 0.5rem; + } +} +.m-4 { + margin: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-4 { + margin: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-4 { + margin: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-4 { + margin: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-4 { + margin: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-4 { + margin: 1.125rem; + } +} +.m-5 { + margin: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-5 { + margin: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-5 { + margin: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-5 { + margin: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-5 { + margin: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-5 { + margin: 2rem; + } +} +.m-6 { + margin: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-6 { + margin: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-6 { + margin: 3.125rem; + } +} +.m-7 { + margin: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-7 { + margin: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-7 { + margin: 4.5rem; + } +} +.m-8 { + margin: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-8 { + margin: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-8 { + margin: 6.125rem; + } +} +.m-9 { + margin: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-9 { + margin: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-9 { + margin: 8rem; + } +} +.m-10 { + margin: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-xs-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-sm-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-md-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-lg-10 { + margin: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-xlg-10 { + margin: 10.125rem; + } +} +.m-top-0 { + margin-top: 0; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-0 { + margin-top: 0; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-0 { + margin-top: 0; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-0 { + margin-top: 0; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-0 { + margin-top: 0; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-0 { + margin-top: 0; + } +} +.m-top-1 { + margin-top: 1px; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-1 { + margin-top: 1px; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-1 { + margin-top: 1px; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-1 { + margin-top: 1px; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-1 { + margin-top: 1px; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-1 { + margin-top: 1px; + } +} +.m-top-2 { + margin-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-2 { + margin-top: 0.125rem; + } +} +.m-top-3 { + margin-top: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-3 { + margin-top: 0.5rem; + } +} +.m-top-4 { + margin-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-4 { + margin-top: 1.125rem; + } +} +.m-top-5 { + margin-top: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-5 { + margin-top: 2rem; + } +} +.m-top-6 { + margin-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-6 { + margin-top: 3.125rem; + } +} +.m-top-7 { + margin-top: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-7 { + margin-top: 4.5rem; + } +} +.m-top-8 { + margin-top: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-8 { + margin-top: 6.125rem; + } +} +.m-top-9 { + margin-top: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-9 { + margin-top: 8rem; + } +} +.m-top-10 { + margin-top: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-10 { + margin-top: 10.125rem; + } +} +.m-bottom-0 { + margin-bottom: 0; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-0 { + margin-bottom: 0; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-0 { + margin-bottom: 0; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-0 { + margin-bottom: 0; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-0 { + margin-bottom: 0; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-0 { + margin-bottom: 0; + } +} +.m-bottom-1 { + margin-bottom: 1px; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-1 { + margin-bottom: 1px; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-1 { + margin-bottom: 1px; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-1 { + margin-bottom: 1px; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-1 { + margin-bottom: 1px; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-1 { + margin-bottom: 1px; + } +} +.m-bottom-2 { + margin-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-2 { + margin-bottom: 0.125rem; + } +} +.m-bottom-3 { + margin-bottom: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-3 { + margin-bottom: 0.5rem; + } +} +.m-bottom-4 { + margin-bottom: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-4 { + margin-bottom: 1.125rem; + } +} +.m-bottom-5 { + margin-bottom: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-5 { + margin-bottom: 2rem; + } +} +.m-bottom-6 { + margin-bottom: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-6 { + margin-bottom: 3.125rem; + } +} +.m-bottom-7 { + margin-bottom: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-7 { + margin-bottom: 4.5rem; + } +} +.m-bottom-8 { + margin-bottom: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-8 { + margin-bottom: 6.125rem; + } +} +.m-bottom-9 { + margin-bottom: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-9 { + margin-bottom: 8rem; + } +} +.m-bottom-10 { + margin-bottom: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-10 { + margin-bottom: 10.125rem; + } +} +.m-left-0 { + margin-left: 0; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-0 { + margin-left: 0; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-0 { + margin-left: 0; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-0 { + margin-left: 0; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-0 { + margin-left: 0; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-0 { + margin-left: 0; + } +} +.m-left-1 { + margin-left: 1px; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-1 { + margin-left: 1px; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-1 { + margin-left: 1px; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-1 { + margin-left: 1px; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-1 { + margin-left: 1px; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-1 { + margin-left: 1px; + } +} +.m-left-2 { + margin-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-2 { + margin-left: 0.125rem; + } +} +.m-left-3 { + margin-left: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-3 { + margin-left: 0.5rem; + } +} +.m-left-4 { + margin-left: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-4 { + margin-left: 1.125rem; + } +} +.m-left-5 { + margin-left: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-5 { + margin-left: 2rem; + } +} +.m-left-6 { + margin-left: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-6 { + margin-left: 3.125rem; + } +} +.m-left-7 { + margin-left: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-7 { + margin-left: 4.5rem; + } +} +.m-left-8 { + margin-left: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-8 { + margin-left: 6.125rem; + } +} +.m-left-9 { + margin-left: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-9 { + margin-left: 8rem; + } +} +.m-left-10 { + margin-left: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-10 { + margin-left: 10.125rem; + } +} +.m-right-0 { + margin-right: 0; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-0 { + margin-right: 0; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-0 { + margin-right: 0; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-0 { + margin-right: 0; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-0 { + margin-right: 0; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-0 { + margin-right: 0; + } +} +.m-right-1 { + margin-right: 1px; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-1 { + margin-right: 1px; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-1 { + margin-right: 1px; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-1 { + margin-right: 1px; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-1 { + margin-right: 1px; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-1 { + margin-right: 1px; + } +} +.m-right-2 { + margin-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-2 { + margin-right: 0.125rem; + } +} +.m-right-3 { + margin-right: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-3 { + margin-right: 0.5rem; + } +} +.m-right-4 { + margin-right: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-4 { + margin-right: 1.125rem; + } +} +.m-right-5 { + margin-right: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-5 { + margin-right: 2rem; + } +} +.m-right-6 { + margin-right: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-6 { + margin-right: 3.125rem; + } +} +.m-right-7 { + margin-right: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-7 { + margin-right: 4.5rem; + } +} +.m-right-8 { + margin-right: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-8 { + margin-right: 6.125rem; + } +} +.m-right-9 { + margin-right: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-9 { + margin-right: 8rem; + } +} +.m-right-10 { + margin-right: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-10 { + margin-right: 10.125rem; + } +} +.p-0 { + padding: 0; +} + +.p-1 { + padding: 1px; +} + +.p-0 { + padding: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-0 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-0 { + padding: 0.125rem; + } +} +.p-1 { + padding: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-1 { + padding: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-1 { + padding: 0rem; + } +} +.p-2 { + padding: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-2 { + padding: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-2 { + padding: 0.125rem; + } +} +.p-3 { + padding: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-3 { + padding: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-3 { + padding: 0.5rem; + } +} +.p-4 { + padding: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-4 { + padding: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-4 { + padding: 1.125rem; + } +} +.p-5 { + padding: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-5 { + padding: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-5 { + padding: 2rem; + } +} +.p-6 { + padding: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-6 { + padding: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-6 { + padding: 3.125rem; + } +} +.p-7 { + padding: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-7 { + padding: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-7 { + padding: 4.5rem; + } +} +.p-8 { + padding: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-8 { + padding: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-8 { + padding: 6.125rem; + } +} +.p-9 { + padding: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-9 { + padding: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-9 { + padding: 8rem; + } +} +.p-10 { + padding: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-xs-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-sm-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-md-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-lg-10 { + padding: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-xlg-10 { + padding: 10.125rem; + } +} +.p-top-0 { + padding-top: 0; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-0 { + padding-top: 0; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-0 { + padding-top: 0; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-0 { + padding-top: 0; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-0 { + padding-top: 0; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-0 { + padding-top: 0; + } +} +.p-top-1 { + padding-top: 1px; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-1 { + padding-top: 1px; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-1 { + padding-top: 1px; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-1 { + padding-top: 1px; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-1 { + padding-top: 1px; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-1 { + padding-top: 1px; + } +} +.p-top-0 { + padding-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-0 { + padding-top: 0.125rem; + } +} +.p-top-1 { + padding-top: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-1 { + padding-top: 0rem; + } +} +.p-top-2 { + padding-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-2 { + padding-top: 0.125rem; + } +} +.p-top-3 { + padding-top: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-3 { + padding-top: 0.5rem; + } +} +.p-top-4 { + padding-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-4 { + padding-top: 1.125rem; + } +} +.p-top-5 { + padding-top: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-5 { + padding-top: 2rem; + } +} +.p-top-6 { + padding-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-6 { + padding-top: 3.125rem; + } +} +.p-top-7 { + padding-top: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-7 { + padding-top: 4.5rem; + } +} +.p-top-8 { + padding-top: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-8 { + padding-top: 6.125rem; + } +} +.p-top-9 { + padding-top: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-9 { + padding-top: 8rem; + } +} +.p-top-10 { + padding-top: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-10 { + padding-top: 10.125rem; + } +} +.p-bottom-0 { + padding-bottom: 0; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-0 { + padding-bottom: 0; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-0 { + padding-bottom: 0; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-0 { + padding-bottom: 0; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-0 { + padding-bottom: 0; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-0 { + padding-bottom: 0; + } +} +.p-bottom-1 { + padding-bottom: 1px; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-1 { + padding-bottom: 1px; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-1 { + padding-bottom: 1px; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-1 { + padding-bottom: 1px; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-1 { + padding-bottom: 1px; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-1 { + padding-bottom: 1px; + } +} +.p-bottom-0 { + padding-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-0 { + padding-bottom: 0.125rem; + } +} +.p-bottom-1 { + padding-bottom: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-1 { + padding-bottom: 0rem; + } +} +.p-bottom-2 { + padding-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-2 { + padding-bottom: 0.125rem; + } +} +.p-bottom-3 { + padding-bottom: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-3 { + padding-bottom: 0.5rem; + } +} +.p-bottom-4 { + padding-bottom: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-4 { + padding-bottom: 1.125rem; + } +} +.p-bottom-5 { + padding-bottom: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-5 { + padding-bottom: 2rem; + } +} +.p-bottom-6 { + padding-bottom: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-6 { + padding-bottom: 3.125rem; + } +} +.p-bottom-7 { + padding-bottom: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-7 { + padding-bottom: 4.5rem; + } +} +.p-bottom-8 { + padding-bottom: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-8 { + padding-bottom: 6.125rem; + } +} +.p-bottom-9 { + padding-bottom: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-9 { + padding-bottom: 8rem; + } +} +.p-bottom-10 { + padding-bottom: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-10 { + padding-bottom: 10.125rem; + } +} +.p-left-0 { + padding-left: 0; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-0 { + padding-left: 0; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-0 { + padding-left: 0; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-0 { + padding-left: 0; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-0 { + padding-left: 0; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-0 { + padding-left: 0; + } +} +.p-left-1 { + padding-left: 1px; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-1 { + padding-left: 1px; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-1 { + padding-left: 1px; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-1 { + padding-left: 1px; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-1 { + padding-left: 1px; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-1 { + padding-left: 1px; + } +} +.p-left-0 { + padding-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-0 { + padding-left: 0.125rem; + } +} +.p-left-1 { + padding-left: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-1 { + padding-left: 0rem; + } +} +.p-left-2 { + padding-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-2 { + padding-left: 0.125rem; + } +} +.p-left-3 { + padding-left: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-3 { + padding-left: 0.5rem; + } +} +.p-left-4 { + padding-left: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-4 { + padding-left: 1.125rem; + } +} +.p-left-5 { + padding-left: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-5 { + padding-left: 2rem; + } +} +.p-left-6 { + padding-left: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-6 { + padding-left: 3.125rem; + } +} +.p-left-7 { + padding-left: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-7 { + padding-left: 4.5rem; + } +} +.p-left-8 { + padding-left: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-8 { + padding-left: 6.125rem; + } +} +.p-left-9 { + padding-left: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-9 { + padding-left: 8rem; + } +} +.p-left-10 { + padding-left: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-10 { + padding-left: 10.125rem; + } +} +.p-right-0 { + padding-right: 0; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-0 { + padding-right: 0; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-0 { + padding-right: 0; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-0 { + padding-right: 0; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-0 { + padding-right: 0; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-0 { + padding-right: 0; + } +} +.p-right-1 { + padding-right: 1px; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-1 { + padding-right: 1px; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-1 { + padding-right: 1px; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-1 { + padding-right: 1px; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-1 { + padding-right: 1px; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-1 { + padding-right: 1px; + } +} +.p-right-0 { + padding-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-0 { + padding-right: 0.125rem; + } +} +.p-right-1 { + padding-right: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-1 { + padding-right: 0rem; + } +} +.p-right-2 { + padding-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-2 { + padding-right: 0.125rem; + } +} +.p-right-3 { + padding-right: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-3 { + padding-right: 0.5rem; + } +} +.p-right-4 { + padding-right: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-4 { + padding-right: 1.125rem; + } +} +.p-right-5 { + padding-right: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-5 { + padding-right: 2rem; + } +} +.p-right-6 { + padding-right: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-6 { + padding-right: 3.125rem; + } +} +.p-right-7 { + padding-right: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-7 { + padding-right: 4.5rem; + } +} +.p-right-8 { + padding-right: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-8 { + padding-right: 6.125rem; + } +} +.p-right-9 { + padding-right: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-9 { + padding-right: 8rem; + } +} +.p-right-10 { + padding-right: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-10 { + padding-right: 10.125rem; + } +} +/** + * colors + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.color-body { + color: var(--body); +} + +.color-text { + color: var(--text); +} + +.color-text-contrast { + color: var(--text-contrast); +} + +.color-primary { + color: var(--primary); +} + +.color-primary-contrast { + color: var(--primary-contrast); +} + +.color-active { + color: var(--active); +} + +.color-active-contrast { + color: var(--active-contrast); +} + +.color-link { + color: var(--link); +} + +.color-link-hover { + color: var(--link-hover); +} + +.color-danger { + color: var(--danger); +} + +.color-danger-contrast { + color: var(--danger-contrast); +} + +.color-info { + color: var(--info); +} + +.color-info-constrast { + color: var(--info-constrast); +} + +.color-success { + color: var(--success); +} + +.color-success-contrast { + color: var(--success-contrast); +} + +.color-warning { + color: var(--warning); +} + +.color-warning-contrast { + color: var(--warning-contrast); +} + +.color-background { + color: var(--background); +} + +.color-background-contrast { + color: var(--background-contrast); +} + +.color-background-alpha { + color: var(--background-alpha); +} + +.color-border { + color: var(--border); +} + +.color-border-contrast { + color: var(--border-contrast); +} + +.fill-body { + fill: var(--body); +} +.fill-body svg { + fill: var(--body); +} + +.fill-text { + fill: var(--text); +} +.fill-text svg { + fill: var(--text); +} + +.fill-text-contrast { + fill: var(--text-contrast); +} +.fill-text-contrast svg { + fill: var(--text-contrast); +} + +.fill-primary { + fill: var(--primary); +} +.fill-primary svg { + fill: var(--primary); +} + +.fill-primary-contrast { + fill: var(--primary-contrast); +} +.fill-primary-contrast svg { + fill: var(--primary-contrast); +} + +.fill-active { + fill: var(--active); +} +.fill-active svg { + fill: var(--active); +} + +.fill-active-contrast { + fill: var(--active-contrast); +} +.fill-active-contrast svg { + fill: var(--active-contrast); +} + +.fill-link { + fill: var(--link); +} +.fill-link svg { + fill: var(--link); +} + +.fill-link-hover { + fill: var(--link-hover); +} +.fill-link-hover svg { + fill: var(--link-hover); +} + +.fill-danger { + fill: var(--danger); +} +.fill-danger svg { + fill: var(--danger); +} + +.fill-danger-contrast { + fill: var(--danger-contrast); +} +.fill-danger-contrast svg { + fill: var(--danger-contrast); +} + +.fill-info { + fill: var(--info); +} +.fill-info svg { + fill: var(--info); +} + +.fill-info-constrast { + fill: var(--info-constrast); +} +.fill-info-constrast svg { + fill: var(--info-constrast); +} + +.fill-success { + fill: var(--success); +} +.fill-success svg { + fill: var(--success); +} + +.fill-success-contrast { + fill: var(--success-contrast); +} +.fill-success-contrast svg { + fill: var(--success-contrast); +} + +.fill-warning { + fill: var(--warning); +} +.fill-warning svg { + fill: var(--warning); +} + +.fill-warning-contrast { + fill: var(--warning-contrast); +} +.fill-warning-contrast svg { + fill: var(--warning-contrast); +} + +.fill-background { + fill: var(--background); +} +.fill-background svg { + fill: var(--background); +} + +.fill-background-contrast { + fill: var(--background-contrast); +} +.fill-background-contrast svg { + fill: var(--background-contrast); +} + +.fill-background-alpha { + fill: var(--background-alpha); +} +.fill-background-alpha svg { + fill: var(--background-alpha); +} + +.fill-border { + fill: var(--border); +} +.fill-border svg { + fill: var(--border); +} + +.fill-border-contrast { + fill: var(--border-contrast); +} +.fill-border-contrast svg { + fill: var(--border-contrast); +} + +.fill-body-hover:hover { + fill: var(--body); +} +.fill-body-hover:hover svg { + fill: var(--body); +} + +.fill-text-hover:hover { + fill: var(--text); +} +.fill-text-hover:hover svg { + fill: var(--text); +} + +.fill-text-contrast-hover:hover { + fill: var(--text-contrast); +} +.fill-text-contrast-hover:hover svg { + fill: var(--text-contrast); +} + +.fill-primary-hover:hover { + fill: var(--primary); +} +.fill-primary-hover:hover svg { + fill: var(--primary); +} + +.fill-primary-contrast-hover:hover { + fill: var(--primary-contrast); +} +.fill-primary-contrast-hover:hover svg { + fill: var(--primary-contrast); +} + +.fill-active-hover:hover { + fill: var(--active); +} +.fill-active-hover:hover svg { + fill: var(--active); +} + +.fill-active-contrast-hover:hover { + fill: var(--active-contrast); +} +.fill-active-contrast-hover:hover svg { + fill: var(--active-contrast); +} + +.fill-link-hover:hover { + fill: var(--link); +} +.fill-link-hover:hover svg { + fill: var(--link); +} + +.fill-link-hover-hover:hover { + fill: var(--link-hover); +} +.fill-link-hover-hover:hover svg { + fill: var(--link-hover); +} + +.fill-danger-hover:hover { + fill: var(--danger); +} +.fill-danger-hover:hover svg { + fill: var(--danger); +} + +.fill-danger-contrast-hover:hover { + fill: var(--danger-contrast); +} +.fill-danger-contrast-hover:hover svg { + fill: var(--danger-contrast); +} + +.fill-info-hover:hover { + fill: var(--info); +} +.fill-info-hover:hover svg { + fill: var(--info); +} + +.fill-info-constrast-hover:hover { + fill: var(--info-constrast); +} +.fill-info-constrast-hover:hover svg { + fill: var(--info-constrast); +} + +.fill-success-hover:hover { + fill: var(--success); +} +.fill-success-hover:hover svg { + fill: var(--success); +} + +.fill-success-contrast-hover:hover { + fill: var(--success-contrast); +} +.fill-success-contrast-hover:hover svg { + fill: var(--success-contrast); +} + +.fill-warning-hover:hover { + fill: var(--warning); +} +.fill-warning-hover:hover svg { + fill: var(--warning); +} + +.fill-warning-contrast-hover:hover { + fill: var(--warning-contrast); +} +.fill-warning-contrast-hover:hover svg { + fill: var(--warning-contrast); +} + +.fill-background-hover:hover { + fill: var(--background); +} +.fill-background-hover:hover svg { + fill: var(--background); +} + +.fill-background-contrast-hover:hover { + fill: var(--background-contrast); +} +.fill-background-contrast-hover:hover svg { + fill: var(--background-contrast); +} + +.fill-background-alpha-hover:hover { + fill: var(--background-alpha); +} +.fill-background-alpha-hover:hover svg { + fill: var(--background-alpha); +} + +.fill-border-hover:hover { + fill: var(--border); +} +.fill-border-hover:hover svg { + fill: var(--border); +} + +.fill-border-contrast-hover:hover { + fill: var(--border-contrast); +} +.fill-border-contrast-hover:hover svg { + fill: var(--border-contrast); +} + +.border-color-body { + border-color: var(--body); +} + +.border-color-text { + border-color: var(--text); +} + +.border-color-text-contrast { + border-color: var(--text-contrast); +} + +.border-color-primary { + border-color: var(--primary); +} + +.border-color-primary-contrast { + border-color: var(--primary-contrast); +} + +.border-color-active { + border-color: var(--active); +} + +.border-color-active-contrast { + border-color: var(--active-contrast); +} + +.border-color-link { + border-color: var(--link); +} + +.border-color-link-hover { + border-color: var(--link-hover); +} + +.border-color-danger { + border-color: var(--danger); +} + +.border-color-danger-contrast { + border-color: var(--danger-contrast); +} + +.border-color-info { + border-color: var(--info); +} + +.border-color-info-constrast { + border-color: var(--info-constrast); +} + +.border-color-success { + border-color: var(--success); +} + +.border-color-success-contrast { + border-color: var(--success-contrast); +} + +.border-color-warning { + border-color: var(--warning); +} + +.border-color-warning-contrast { + border-color: var(--warning-contrast); +} + +.border-color-background { + border-color: var(--background); +} + +.border-color-background-contrast { + border-color: var(--background-contrast); +} + +.border-color-background-alpha { + border-color: var(--background-alpha); +} + +.border-color-border { + border-color: var(--border); +} + +.border-color-border-contrast { + border-color: var(--border-contrast); +} + +.background-color-body { + background-color: var(--body); +} + +.background-color-text { + background-color: var(--text); +} + +.background-color-text-contrast { + background-color: var(--text-contrast); +} + +.background-color-primary { + background-color: var(--primary); +} + +.background-color-primary-contrast { + background-color: var(--primary-contrast); +} + +.background-color-active { + background-color: var(--active); +} + +.background-color-active-contrast { + background-color: var(--active-contrast); +} + +.background-color-link { + background-color: var(--link); +} + +.background-color-link-hover { + background-color: var(--link-hover); +} + +.background-color-danger { + background-color: var(--danger); +} + +.background-color-danger-contrast { + background-color: var(--danger-contrast); +} + +.background-color-info { + background-color: var(--info); +} + +.background-color-info-constrast { + background-color: var(--info-constrast); +} + +.background-color-success { + background-color: var(--success); +} + +.background-color-success-contrast { + background-color: var(--success-contrast); +} + +.background-color-warning { + background-color: var(--warning); +} + +.background-color-warning-contrast { + background-color: var(--warning-contrast); +} + +.background-color-background { + background-color: var(--background); +} + +.background-color-background-contrast { + background-color: var(--background-contrast); +} + +.background-color-background-alpha { + background-color: var(--background-alpha); +} + +.background-color-border { + background-color: var(--border); +} + +.background-color-border-contrast { + background-color: var(--border-contrast); +} + +/** + * typography + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +.left { + text-align: left; +} + +@media only screen and (min-width: 576px) { + .left-xs { + text-align: left; + } +} +@media only screen and (min-width: 768px) { + .left-sm { + text-align: left; + } +} +@media only screen and (min-width: 992px) { + .left-md { + text-align: left; + } +} +@media only screen and (min-width: 1200px) { + .left-lg { + text-align: left; + } +} +@media only screen and (min-width: 1600px) { + .left-xlg { + text-align: left; + } +} +.right { + text-align: right; +} + +@media only screen and (min-width: 576px) { + .right-xs { + text-align: right; + } +} +@media only screen and (min-width: 768px) { + .right-sm { + text-align: right; + } +} +@media only screen and (min-width: 992px) { + .right-md { + text-align: right; + } +} +@media only screen and (min-width: 1200px) { + .right-lg { + text-align: right; + } +} +@media only screen and (min-width: 1600px) { + .right-xlg { + text-align: right; + } +} +.center { + text-align: center; +} + +@media only screen and (min-width: 576px) { + .center-xs { + text-align: center; + } +} +@media only screen and (min-width: 768px) { + .center-sm { + text-align: center; + } +} +@media only screen and (min-width: 992px) { + .center-md { + text-align: center; + } +} +@media only screen and (min-width: 1200px) { + .center-lg { + text-align: center; + } +} +@media only screen and (min-width: 1600px) { + .center-xlg { + text-align: center; + } +} +.justify { + text-align: justify; +} + +@media only screen and (min-width: 576px) { + .justify-xs { + text-align: justify; + } +} +@media only screen and (min-width: 768px) { + .justify-sm { + text-align: justify; + } +} +@media only screen and (min-width: 992px) { + .justify-md { + text-align: justify; + } +} +@media only screen and (min-width: 1200px) { + .justify-lg { + text-align: justify; + } +} +@media only screen and (min-width: 1600px) { + .justify-xlg { + text-align: justify; + } +} +.uppercase { + text-transform: uppercase; +} + +@media only screen and (min-width: 576px) { + .uppercase-xs { + text-transform: uppercase; + } +} +@media only screen and (min-width: 768px) { + .uppercase-sm { + text-transform: uppercase; + } +} +@media only screen and (min-width: 992px) { + .uppercase-md { + text-transform: uppercase; + } +} +@media only screen and (min-width: 1200px) { + .uppercase-lg { + text-transform: uppercase; + } +} +@media only screen and (min-width: 1600px) { + .uppercase-xlg { + text-transform: uppercase; + } +} +.lowercase { + text-transform: lowercase; +} + +@media only screen and (min-width: 576px) { + .lowercase-xs { + text-transform: lowercase; + } +} +@media only screen and (min-width: 768px) { + .lowercase-sm { + text-transform: lowercase; + } +} +@media only screen and (min-width: 992px) { + .lowercase-md { + text-transform: lowercase; + } +} +@media only screen and (min-width: 1200px) { + .lowercase-lg { + text-transform: lowercase; + } +} +@media only screen and (min-width: 1600px) { + .lowercase-xlg { + text-transform: lowercase; + } +} +.crossed { + text-decoration: line-through; +} + +@media only screen and (min-width: 576px) { + .crossed-xs { + text-decoration: line-through; + } +} +@media only screen and (min-width: 768px) { + .crossed-sm { + text-decoration: line-through; + } +} +@media only screen and (min-width: 992px) { + .crossed-md { + text-decoration: line-through; + } +} +@media only screen and (min-width: 1200px) { + .crossed-lg { + text-decoration: line-through; + } +} +@media only screen and (min-width: 1600px) { + .crossed-xlg { + text-decoration: line-through; + } +} +.underline { + text-decoration: underline; +} + +@media only screen and (min-width: 576px) { + .underline-xs { + text-decoration: underline; + } +} +@media only screen and (min-width: 768px) { + .underline-sm { + text-decoration: underline; + } +} +@media only screen and (min-width: 992px) { + .underline-md { + text-decoration: underline; + } +} +@media only screen and (min-width: 1200px) { + .underline-lg { + text-decoration: underline; + } +} +@media only screen and (min-width: 1600px) { + .underline-xlg { + text-decoration: underline; + } +} +.capitalize { + text-transform: capitalize; +} + +@media only screen and (min-width: 576px) { + .capitalize-xs { + text-transform: capitalize; + } +} +@media only screen and (min-width: 768px) { + .capitalize-sm { + text-transform: capitalize; + } +} +@media only screen and (min-width: 992px) { + .capitalize-md { + text-transform: capitalize; + } +} +@media only screen and (min-width: 1200px) { + .capitalize-lg { + text-transform: capitalize; + } +} +@media only screen and (min-width: 1600px) { + .capitalize-xlg { + text-transform: capitalize; + } +} +.italic { + font-style: italic; +} + +@media only screen and (min-width: 576px) { + .italic-xs { + font-style: italic; + } +} +@media only screen and (min-width: 768px) { + .italic-sm { + font-style: italic; + } +} +@media only screen and (min-width: 992px) { + .italic-md { + font-style: italic; + } +} +@media only screen and (min-width: 1200px) { + .italic-lg { + font-style: italic; + } +} +@media only screen and (min-width: 1600px) { + .italic-xlg { + font-style: italic; + } +} +.light { + font-weight: lighter; +} + +@media only screen and (min-width: 576px) { + .light-xs { + font-weight: lighter; + } +} +@media only screen and (min-width: 768px) { + .light-sm { + font-weight: lighter; + } +} +@media only screen and (min-width: 992px) { + .light-md { + font-weight: lighter; + } +} +@media only screen and (min-width: 1200px) { + .light-lg { + font-weight: lighter; + } +} +@media only screen and (min-width: 1600px) { + .light-xlg { + font-weight: lighter; + } +} +.normal { + font-weight: normal; +} + +@media only screen and (min-width: 576px) { + .normal-xs { + font-weight: normal; + } +} +@media only screen and (min-width: 768px) { + .normal-sm { + font-weight: normal; + } +} +@media only screen and (min-width: 992px) { + .normal-md { + font-weight: normal; + } +} +@media only screen and (min-width: 1200px) { + .normal-lg { + font-weight: normal; + } +} +@media only screen and (min-width: 1600px) { + .normal-xlg { + font-weight: normal; + } +} +.medium { + font-weight: medium; +} + +@media only screen and (min-width: 576px) { + .medium-xs { + font-weight: medium; + } +} +@media only screen and (min-width: 768px) { + .medium-sm { + font-weight: medium; + } +} +@media only screen and (min-width: 992px) { + .medium-md { + font-weight: medium; + } +} +@media only screen and (min-width: 1200px) { + .medium-lg { + font-weight: medium; + } +} +@media only screen and (min-width: 1600px) { + .medium-xlg { + font-weight: medium; + } +} +.bold { + font-weight: bolder; +} + +@media only screen and (min-width: 576px) { + .bold-xs { + font-weight: bolder; + } +} +@media only screen and (min-width: 768px) { + .bold-sm { + font-weight: bolder; + } +} +@media only screen and (min-width: 992px) { + .bold-md { + font-weight: bolder; + } +} +@media only screen and (min-width: 1200px) { + .bold-lg { + font-weight: bolder; + } +} +@media only screen and (min-width: 1600px) { + .bold-xlg { + font-weight: bolder; + } +} +/** + * font-sizes + * + * + */ +.size-default { + font-size: 0.9rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-default { + font-size: 0.9rem; + } +} +.size-small { + font-size: 0.675rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-small { + font-size: 0.675rem; + } +} +.size-medium { + font-size: 1.35rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-medium { + font-size: 1.35rem; + } +} +.size-large { + font-size: 1.8rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-large { + font-size: 1.8rem; + } +} +.size-big { + font-size: 2.7rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-big { + font-size: 2.7rem; + } +} +/** + * white-space + * + * + */ +.white-space-normal { + white-space: normal; +} + +@media only screen and (min-width: 576px) { + .white-space-normal-xs { + white-space: normal; + } +} +@media only screen and (min-width: 768px) { + .white-space-normal-sm { + white-space: normal; + } +} +@media only screen and (min-width: 992px) { + .white-space-normal-md { + white-space: normal; + } +} +@media only screen and (min-width: 1200px) { + .white-space-normal-lg { + white-space: normal; + } +} +@media only screen and (min-width: 1600px) { + .white-space-normal-xlg { + white-space: normal; + } +} +.white-space-nowrap { + white-space: nowrap; +} + +@media only screen and (min-width: 576px) { + .white-space-nowrap-xs { + white-space: nowrap; + } +} +@media only screen and (min-width: 768px) { + .white-space-nowrap-sm { + white-space: nowrap; + } +} +@media only screen and (min-width: 992px) { + .white-space-nowrap-md { + white-space: nowrap; + } +} +@media only screen and (min-width: 1200px) { + .white-space-nowrap-lg { + white-space: nowrap; + } +} +@media only screen and (min-width: 1600px) { + .white-space-nowrap-xlg { + white-space: nowrap; + } +} +.white-space-pre { + white-space: pre; +} + +@media only screen and (min-width: 576px) { + .white-space-pre-xs { + white-space: pre; + } +} +@media only screen and (min-width: 768px) { + .white-space-pre-sm { + white-space: pre; + } +} +@media only screen and (min-width: 992px) { + .white-space-pre-md { + white-space: pre; + } +} +@media only screen and (min-width: 1200px) { + .white-space-pre-lg { + white-space: pre; + } +} +@media only screen and (min-width: 1600px) { + .white-space-pre-xlg { + white-space: pre; + } +} +.white-space-preline { + white-space: preline; +} + +@media only screen and (min-width: 576px) { + .white-space-preline-xs { + white-space: preline; + } +} +@media only screen and (min-width: 768px) { + .white-space-preline-sm { + white-space: preline; + } +} +@media only screen and (min-width: 992px) { + .white-space-preline-md { + white-space: preline; + } +} +@media only screen and (min-width: 1200px) { + .white-space-preline-lg { + white-space: preline; + } +} +@media only screen and (min-width: 1600px) { + .white-space-preline-xlg { + white-space: preline; + } +} +.white-space-preline { + white-space: pre-line; +} + +@media only screen and (min-width: 576px) { + .white-space-preline-xs { + white-space: pre-line; + } +} +@media only screen and (min-width: 768px) { + .white-space-preline-sm { + white-space: pre-line; + } +} +@media only screen and (min-width: 992px) { + .white-space-preline-md { + white-space: pre-line; + } +} +@media only screen and (min-width: 1200px) { + .white-space-preline-lg { + white-space: pre-line; + } +} +@media only screen and (min-width: 1600px) { + .white-space-preline-xlg { + white-space: pre-line; + } +} +.white-space-prewrap { + white-space: pre-wrap; +} + +@media only screen and (min-width: 576px) { + .white-space-prewrap-xs { + white-space: pre-wrap; + } +} +@media only screen and (min-width: 768px) { + .white-space-prewrap-sm { + white-space: pre-wrap; + } +} +@media only screen and (min-width: 992px) { + .white-space-prewrap-md { + white-space: pre-wrap; + } +} +@media only screen and (min-width: 1200px) { + .white-space-prewrap-lg { + white-space: pre-wrap; + } +} +@media only screen and (min-width: 1600px) { + .white-space-prewrap-xlg { + white-space: pre-wrap; + } +} +/** + * visibility + * + * + * @author Björn Hase, me@herr-hase.wtf + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.node001.net/tiny-components/plain-ui.git + * + */ +/** + * display + * + * + */ +.display-block { + display: block; +} + +@media only screen and (min-width: 576px) { + .display-block-xs { + display: block; + } +} +@media only screen and (min-width: 768px) { + .display-block-sm { + display: block; + } +} +@media only screen and (min-width: 992px) { + .display-block-md { + display: block; + } +} +@media only screen and (min-width: 1200px) { + .display-block-lg { + display: block; + } +} +@media only screen and (min-width: 1600px) { + .display-block-xlg { + display: block; + } +} +.display-inline { + display: inline; +} + +@media only screen and (min-width: 576px) { + .display-inline-xs { + display: inline; + } +} +@media only screen and (min-width: 768px) { + .display-inline-sm { + display: inline; + } +} +@media only screen and (min-width: 992px) { + .display-inline-md { + display: inline; + } +} +@media only screen and (min-width: 1200px) { + .display-inline-lg { + display: inline; + } +} +@media only screen and (min-width: 1600px) { + .display-inline-xlg { + display: inline; + } +} +.display-inline-block { + display: inline-block; +} + +@media only screen and (min-width: 576px) { + .display-inline-block-xs { + display: inline-block; + } +} +@media only screen and (min-width: 768px) { + .display-inline-block-sm { + display: inline-block; + } +} +@media only screen and (min-width: 992px) { + .display-inline-block-md { + display: inline-block; + } +} +@media only screen and (min-width: 1200px) { + .display-inline-block-lg { + display: inline-block; + } +} +@media only screen and (min-width: 1600px) { + .display-inline-block-xlg { + display: inline-block; + } +} +.display-flex { + display: flex; +} + +@media only screen and (min-width: 576px) { + .display-flex-xs { + display: flex; + } +} +@media only screen and (min-width: 768px) { + .display-flex-sm { + display: flex; + } +} +@media only screen and (min-width: 992px) { + .display-flex-md { + display: flex; + } +} +@media only screen and (min-width: 1200px) { + .display-flex-lg { + display: flex; + } +} +@media only screen and (min-width: 1600px) { + .display-flex-xlg { + display: flex; + } +} +.display-inline-flex { + display: inline-flex; +} + +@media only screen and (min-width: 576px) { + .display-inline-flex-xs { + display: inline-flex; + } +} +@media only screen and (min-width: 768px) { + .display-inline-flex-sm { + display: inline-flex; + } +} +@media only screen and (min-width: 992px) { + .display-inline-flex-md { + display: inline-flex; + } +} +@media only screen and (min-width: 1200px) { + .display-inline-flex-lg { + display: inline-flex; + } +} +@media only screen and (min-width: 1600px) { + .display-inline-flex-xlg { + display: inline-flex; + } +} +.display-table { + display: table; +} + +@media only screen and (min-width: 576px) { + .display-table-xs { + display: table; + } +} +@media only screen and (min-width: 768px) { + .display-table-sm { + display: table; + } +} +@media only screen and (min-width: 992px) { + .display-table-md { + display: table; + } +} +@media only screen and (min-width: 1200px) { + .display-table-lg { + display: table; + } +} +@media only screen and (min-width: 1600px) { + .display-table-xlg { + display: table; + } +} +/** + * for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers + * + * @TODO full integration of reflexgrid will change this part + * + */ +/** + * Visibility + * + */ +.visibility-hidden { + visibility: hidden; +} + +.visibility-visible { + visibility: visible; +} + +.visibility-collapse { + visibility: collapse; +} + +/** + * Opacity + * + * + */ +.opacity-1 { + opacity: 0.1; +} + +.opacity-2 { + opacity: 0.2; +} + +.opacity-3 { + opacity: 0.3; +} + +.opacity-4 { + opacity: 0.4; +} + +.opacity-5 { + opacity: 0.5; +} + +.opacity-6 { + opacity: 0.6; +} + +.opacity-7 { + opacity: 0.7; +} + +.opacity-8 { + opacity: 0.8; +} + +.opacity-9 { + opacity: 0.9; +} + +.opacity-10 { + opacity: 1; +} diff --git a/spritemap.js b/spritemap.js new file mode 100644 index 0000000..c3811ca --- /dev/null +++ b/spritemap.js @@ -0,0 +1,13 @@ +(self["webpackChunkfrontend"] = self["webpackChunkfrontend"] || []).push([["spritemap"],{ + +/***/ "?c20d": +/*!******************************!*\ + !*** spritemap-dummy-module ***! + \******************************/ +/***/ (() => { + + + +/***/ }) + +}]); \ No newline at end of file