diff --git a/demo/demo.css b/demo/demo.css deleted file mode 100644 index 87f5300..0000000 --- a/demo/demo.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[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}details{display:block}summary{display:list-item}[hidden],template{display:none} diff --git a/demo/demo.js b/demo/demo.js deleted file mode 100644 index 4cc7fef..0000000 --- a/demo/demo.js +++ /dev/null @@ -1,12 +0,0 @@ -(()=>{var t={2:(t,e,n)=>{"use strict";function r(t){return t.replace(/-(\w)/g,((t,e)=>e.toUpperCase()))}function i(t,e){t.firstChild&&(e.appendChild(t.firstChild),i(t,e))}function s(t){Array.from(t).forEach(o)}const o=t=>t&&t.parentNode&&t.parentNode.removeChild(t),a=(t,e)=>e&&e.parentNode&&e.parentNode.insertBefore(t,e),u=new Map,l=Symbol("riot-component"),c=new Set,f="is",d="mount",h="update",p="unmount",m="shouldUpdate",g="onBeforeMount",v="onMounted",b="onBeforeUpdate",y="onUpdated",E="onBeforeUnmount",x="onUnmounted",O="props",N="state",w="slots",T="root",j=Symbol.for("pure"),A=Symbol("parent"),S=Symbol("attributes"),M=Symbol("template");var _=Object.freeze({__proto__:null,COMPONENTS_IMPLEMENTATION_MAP:u,DOM_COMPONENT_INSTANCE_PROPERTY:l,PLUGINS_SET:c,IS_DIRECTIVE:f,VALUE_ATTRIBUTE:"value",MOUNT_METHOD_KEY:d,UPDATE_METHOD_KEY:h,UNMOUNT_METHOD_KEY:p,SHOULD_UPDATE_KEY:m,ON_BEFORE_MOUNT_KEY:g,ON_MOUNTED_KEY:v,ON_BEFORE_UPDATE_KEY:b,ON_UPDATED_KEY:y,ON_BEFORE_UNMOUNT_KEY:E,ON_UNMOUNTED_KEY:x,PROPS_KEY:O,STATE_KEY:N,SLOTS_KEY:w,ROOT_KEY:T,IS_PURE_SYMBOL:j,PARENT_KEY_SYMBOL:A,ATTRIBUTES_KEY_SYMBOL:S,TEMPLATE_KEY_SYMBOL:M});var D={EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4};var P={ATTRIBUTE:0,EVENT:1,TEXT:2,VALUE:3};function C(t,e){return typeof t===e}function L(t){const e=t.ownerSVGElement;return!!e||null===e}function U(t){return!R(t.content)}function k(t){return C(t,"function")}function I(t){return!R(t)&&C(t,"object")}function R(t){return null==t}const z=Symbol("unmount"),V={nodes:[],mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n,nodes:r,childrenMap:i}=this,s=t===z?null:this.evaluate(t),u=s?Array.from(s):[],{newChildrenMap:l,batches:c,futureNodes:f}=(n.parentNode,function(t,e,n,r){const{condition:i,template:s,childrenMap:o,itemName:a,getKey:u,indexName:l,root:c,isTemplateTag:f}=r,d=new Map,h=[],p=[];return t.forEach(((t,r)=>{const m=function(t,e){let{itemName:n,indexName:r,index:i,item:s}=e;t[n]=s,r&&(t[r]=i);return t}(Object.create(e),{itemName:a,indexName:l,index:r,item:t}),g=u?u(m):r,v=o.get(g);if(function(t,e){return!!t&&!1===Boolean(t(e))}(i,m))return;const b=v?v.template:s.clone(),y=v?b.el:c.cloneNode(),E=!v,x=f&&E?function(t){const e=t.dom.cloneNode(!0);return{avoidDOMInjection:!0,fragment:e,children:Array.from(e.childNodes)}}(b):{};if(E?h.push((()=>b.mount(y,m,n,x))):h.push((()=>b.update(m,n))),f){const t=x.children||b.children;p.push(...t)}else p.push(y);o.delete(g),d.set(g,{template:b,context:m,index:r})})),{newChildrenMap:d,batches:h,futureNodes:p}}(u,t,e,this));return((t,e,n,r,i)=>{const s=n.length;let u=e.length,l=s,c=0,f=0,d=null;for(;ct-f){const i=r(e[c],0);for(;f{if(r<0){const n=t.pop();if(n){const{template:t,context:r}=n;t.unmount(r,e,null)}}return n}}(Array.from(i.values()),e),n),c.forEach((t=>t())),this.childrenMap=l,this.nodes=f,this},unmount(t,e){return this.update(z,e),this}};const F={mount(t,e){return this.update(t,e)},update(t,e){const n=!!this.evaluate(t),r=!this.value&&n,i=this.value&&!n,s=()=>{const n=this.node.cloneNode();a(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case r:s();break;case i:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}};function K(t){throw new Error(t)}function B(t){return t.reduce(((t,e)=>{const{value:n,type:i}=e;switch(!0){case!e.name&&0===i:return Object.assign({},t,n);case 3===i:t.value=e.value;break;default:t[r(e.name)]=e.value}return t}),{})}const Y="removeAttribute",$="setAttribute",q="undefined"==typeof Element?{}:Element.prototype,H=function(t){const e=new Map,n=n=>(e.has(n)||e.set(n,t.call(this,n)))&&e.get(n);return n.cache=e,n}((t=>q.hasOwnProperty(t)));function G(t,e,n,r){let{name:i}=e;if(!i)return r&&function(t,e,n){const r=e?Object.keys(e):[];Object.keys(n).filter((t=>!r.includes(t))).forEach((e=>t.removeAttribute(e)))}(t,n,r),void(n&&function(t,e){Object.entries(e).forEach((e=>{let[n,r]=e;return G(t,{name:n},r)}))}(t,n));!H(i)&&(function(t){return C(t,"boolean")}(n)||I(n)||k(n))&&(t[i]=n),t[function(t){return R(t)||!1===t||""===t||I(t)||k(t)?Y:$}(n)](i,function(t,e){return!0===e?t:e}(i,n))}const X=/^on/,J={handleEvent(t){this[t.type](t)}},Z=new WeakMap;function W(t){return R(t)?"":t}const Q=(t,e)=>{const n=t.childNodes[e];if(n.nodeType===Node.COMMENT_NODE){const e=document.createTextNode("");return t.replaceChild(e,n),e}return n};var tt={0:G,1:function(t,e,n){let{name:r}=e;const i=r.replace(X,""),s=Z.get(t)||(t=>{const e=Object.create(J);return Z.set(t,e),e})(t),[o,a]=(t=>Array.isArray(t)?t:[t,!1])(n),u=s[i],l=o&&!u;u&&!o&&t.removeEventListener(i,s),l&&t.addEventListener(i,s,a),s[i]=o},2:function(t,e,n){t.data=W(n)},3:function(t,e,n){t.value=W(n)}};const et={mount(t){return this.value=this.evaluate(t),nt(this,this.value),this},update(t){const e=this.evaluate(t);return this.value!==e&&(nt(this,e),this.value=e),this},unmount(){return 1===this.type&&nt(this,null),this}};function nt(t,e){return tt[t.type](t.node,t,e,t.value)}function rt(t,e){return Object.assign({},et,e,{node:2===e.type?Q(t,e.childNodeIndex):t})}const it=(t,e)=>t[A]||e,st={attributes:[],getTemplateScope(t,e){return function(t,e,n){if(!t||!t.length)return n;const r=t.map((t=>Object.assign({},t,{value:t.evaluate(e)})));return Object.assign(Object.create(n||null),B(r))}(this.attributes,t,e)},mount(t,e){const n=!!t.slots&&t.slots.find((t=>{let{id:e}=t;return e===this.name})),{parentNode:r}=this.node,i=it(t,e);return this.template=n&&mt(n.html,n.bindings).createDOM(r),this.template&&(this.template.mount(this.node,this.getTemplateScope(t,i),i),this.template.children=Array.from(this.node.childNodes),ot(this.node)),o(this.node),this},update(t,e){if(this.template){const n=it(t,e);this.template.update(this.getTemplateScope(t,n),n)}return this},unmount(t,e,n){return this.template&&this.template.unmount(this.getTemplateScope(t,e),null,n),this}};function ot(t){const e=t&&t.firstChild;e&&(a(e,t),ot(t))}function at(t){return t.reduce(((t,e)=>{let{bindings:n}=e;return t.concat(n)}),[])}const ut={mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=function(t,e,n){return void 0===e&&(e=[]),void 0===n&&(n=[]),t?t({slots:e,attributes:n}):mt(function(t){return t.reduce(((t,e)=>t+e.html),"")}(e),[...at(e),{expressions:n.map((t=>Object.assign({type:0},t)))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,t)),this},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}};var lt={1:function(t,e){let{evaluate:n,template:r}=e;const i=document.createTextNode("");return a(i,t),o(t),Object.assign({},F,{node:t,evaluate:n,placeholder:i,template:r.createDOM(t)})},2:function(t,e){let{expressions:n}=e;return Object.assign({},(r=n.map((e=>rt(t,e))),["mount","update","unmount"].reduce(((t,e)=>Object.assign({},t,{[e]:t=>r.map((n=>n[e](t)))&&i})),{})));var r,i},0:function(t,e){let{evaluate:n,condition:r,itemName:i,indexName:s,getKey:u,template:l}=e;const c=document.createTextNode(""),f=t.cloneNode();return a(c,t),o(t),Object.assign({},V,{childrenMap:new Map,node:t,root:f,condition:r,evaluate:n,isTemplateTag:U(f),template:l.createDOM(t),getKey:u,indexName:s,itemName:i,placeholder:c})},3:function(t,e){let{evaluate:n,getComponent:r,slots:i,attributes:s}=e;return Object.assign({},ut,{node:t,evaluate:n,slots:i,attributes:s,getComponent:r})},4:function(t,e){let{name:n,attributes:r}=e;return Object.assign({},st,{attributes:r,node:t,name:n})}};function ct(t,e){return t.map((t=>2===t.type?Object.assign({},t,{childNodeIndex:t.childNodeIndex+e}):t))}function ft(t,e,n){const{selector:r,type:i,redundantAttribute:s,expressions:o}=e,a=r?t.querySelector(r):t;s&&a.removeAttribute(s);const u=o||[];return(lt[i]||lt[2])(a,Object.assign({},e,{expressions:n&&!r?ct(u,n):u}))}function dt(t,e){return L(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`${t}`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=U(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}function ht(t,e){switch(!0){case L(t):i(e,t);break;case U(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}const pt=Object.freeze({createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?dt(t,e):e)}(t,this.html),this},mount(t,e,n,r){if(void 0===r&&(r={}),!t)throw new Error("Please provide DOM node to mount properly your template");this.el&&this.unmount(e);const{fragment:i,children:s,avoidDOMInjection:o}=r,{parentNode:a}=s?s[0]:t,u=U(t),l=u?Math.max(Array.from(a.childNodes).indexOf(t),0):null;return this.isTemplateTag=u,this.createDOM(t),this.dom&&(this.fragment=i||this.dom.cloneNode(!0)),this.el=this.isTemplateTag?a:t,this.children=this.isTemplateTag?s||Array.from(this.fragment.childNodes):null,!o&&this.fragment&&ht(t,this.fragment),this.bindings=this.bindingsData.map((t=>ft(this.el,t,l))),this.bindings.forEach((t=>t.mount(e,n))),this},update(t,e){return this.bindings.forEach((n=>n.update(t,e))),this},unmount(t,e,n){if(this.el){switch(this.bindings.forEach((r=>r.unmount(t,e,n))),!0){case this.el[j]:break;case this.children&&null!==n:s(this.children);break;case!0===n:o(this.el);break;case null!==n:s(this.el.childNodes)}this.el=null}return this},clone(){return Object.assign({},this,{el:null})}});function mt(t,e){return void 0===e&&(e=[]),Object.assign({},pt,{html:t,bindingsData:e})}function gt(){return this}function vt(t){return k(t)?t.prototype&&t.prototype.constructor?new t:t():t}function bt(t,e,n,r){return void 0===r&&(r={}),Object.defineProperty(t,e,Object.assign({value:n,enumerable:!1,writable:!1,configurable:!0},r)),t}function yt(t,e,n){return Object.entries(e).forEach((e=>{let[r,i]=e;bt(t,r,i,n)})),t}function Et(t,e){return Object.entries(e).forEach((e=>{let[n,r]=e;t[n]||(t[n]=r)})),t}function xt(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}function Ot(t,e){return xt("string"==typeof t?(e||document).querySelectorAll(t):t)}const Nt=t=>1===t.length?t[0]:t;function wt(t,e,n){const r="object"==typeof e?e:{[e]:n},i=Object.keys(r);return xt(t).forEach((t=>{i.forEach((e=>t.setAttribute(e,r[e])))})),t}function Tt(t,e){return function(t,e,n){const r="string"==typeof e?[e]:e;return Nt(xt(t).map((t=>Nt(r.map((e=>t[n](e)))))))}(t,e,"getAttribute")}const jt=new Map,At=()=>St||(wt(St=Ot("style[riot]")[0]||document.createElement("style"),"type","text/css"),St.parentNode||document.head.appendChild(St),St);var St,Mt={CSS_BY_NAME:jt,add(t,e){return jt.has(t)||(jt.set(t,e),this.inject()),this},inject(){return At().innerHTML=[...jt.values()].join("\n"),this},remove(t){return jt.has(t)&&(jt.delete(t),this.inject()),this}};function _t(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),r=1;r(t[r(e.name)]=e.value,t)),{})}(t),vt(e))}const It=(t,e)=>t[l]=e;function Rt(t){return[d,h,p].reduce(((e,n)=>(e[n]=t(n),e)),{})}function zt(t){let{css:e,template:n,exports:r,name:i}=t;const s=n?function(t,e){return t(mt,P,D,(t=>e[t]||u.get(t)))}(n,r?function(t){void 0===t&&(t={});return Object.entries(vt(t)).reduce(((t,e)=>{let[n,r]=e; -/* Riot v5.1.2, @license MIT */ -var i;return t[(i=n,i.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=zt(r),t}),{})}(r.components):{}):Ut;return t=>{let{slots:o,attributes:a,props:u}=t;if(r&&r[j])return function(t,e){let{slots:n,attributes:r,props:i,css:s,template:o}=e;o&&K("Pure components can not have html"),s&&K("Pure components do not have css");const a=Et(t({slots:n,attributes:r,props:i}),Ct);return Rt((t=>function(){for(var e=arguments.length,n=new Array(e),r=0;rc.mount(t,n,e),update:(t,e)=>c.update(e,t),unmount:t=>c.unmount(t)}}}function Vt(t){let{css:e,template:n,componentAPI:r,name:i}=t;return e&&i&&Mt.add(i,e),_t(Kt)(yt(Et(r,Object.assign({},Lt,{[N]:{}})),Object.assign({[w]:null,[T]:null},Pt,{name:i,css:e,template:n})))}function Ft(t,e){return Object.assign({},t,vt(e))}function Kt(t,e){let{slots:n,attributes:r,props:i}=e;return s=function(t){return[...c].reduce(((t,e)=>e(t)||t),t)}(yt(Object.create(t),{mount(e,s,o){return void 0===s&&(s={}),this[S]=function(t,e){void 0===e&&(e=[]);const n=e.map((e=>rt(t,e))),r={};return Object.assign(r,Object.assign({expressions:n},Rt((t=>e=>(n.forEach((n=>n[t](e))),r)))))}(e,r).mount(o),bt(this,O,Object.freeze(Object.assign({},kt(e,i),B(this[S].expressions)))),this.state=Ft(this.state,s),this[M]=this.template.createDOM(e).clone(),It(e,this),t.name&&function(t,e){Dt(t)!==e&&wt(t,f,e)}(e,t.name),bt(this,T,e),bt(this,w,n),this.onBeforeMount(this.props,this.state),this[A]=o,this[M].mount(e,this,o),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&(this[A]=e,this[S].update(e));const n=B(this[S].expressions);if(!1!==this.shouldUpdate(n,this.props))return bt(this,O,Object.freeze(Object.assign({},this.props,n))),this.state=Ft(this.state,t),this.onBeforeUpdate(this.props,this.state),this[M].update(this,this[A]),this.onUpdated(this.props,this.state),this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[S].unmount(),this[M].unmount(this,this[A],null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter((e=>k(t[e]))).forEach((t=>{s[t]=s[t].bind(s)})),s;var s}const{DOM_COMPONENT_INSTANCE_PROPERTY:Bt,COMPONENTS_IMPLEMENTATION_MAP:Yt,PLUGINS_SET:$t}=_;var qt=n(765),Ht=n.n(qt),Gt=n(422),Xt=n.n(Gt);function Jt(t,e){for(var n=0;n{this.dispatchCustomEvent(e,i,t.name)})),this.root.addEventListener("form-validation",(t=>{this.onFormValidation(t,n)}))},onFormValidation(t,e){t.detail?(this.state.errors=t.detail,e.classList.add("field--error"),e.classList.remove("field--valid")):(this.state.errors=[],e.classList.remove("field--error"),e.classList.add("field--valid")),this.update()},dispatchCustomEvent(t,e,n){const r=new CustomEvent("field-update",{detail:{name:n,value:t.target.value}});e.dispatchEvent(r)}},template:function(t,e,n,r){return t('
',[{type:n.IF,evaluate:function(t){return t.state.errors.length>0},redundantAttribute:"expr0",selector:"[expr0]",template:t('
',[{type:n.EACH,getKey:null,condition:null,template:t(" ",[{expressions:[{type:e.TEXT,childNodeIndex:0,evaluate:function(t){return[t.error].join("")}}]}]),redundantAttribute:"expr1",selector:"[expr1]",itemName:"error",indexName:null,evaluate:function(t){return t.state.errors}}])}])},name:"field-error"}),Ot("field-error").map((t=>function(t,e,n){const r=n||Dt(t);return u.has(r)||K(`The component named "${r}" was never registered`),u.get(r)({props:e}).mount(t)}(t,Wt,Qt)));new Zt("form",{email:{presence:!0,email:!0},password:{presence:!0}})},422:t=>{var e=/^(?:submit|button|image|reset|file)$/i,n=/^(?:input|select|textarea|keygen)/i,r=/(\[[^\[\]]*\])/g;function i(t,e,n){if(0===e.length)return t=n;var r=e.shift(),s=r.match(/^\[(.+?)\]$/);if("[]"===r)return t=t||[],Array.isArray(t)?t.push(i(null,e,n)):(t._values=t._values||[],t._values.push(i(null,e,n))),t;if(s){var o=s[1],a=+o;isNaN(a)?(t=t||{})[o]=i(t[o],e,n):(t=t||[])[a]=i(t[a],e,n)}else t[r]=i(t[r],e,n);return t}function s(t,e,n){if(e.match(r)){i(t,function(t){var e=[],n=new RegExp(r),i=/^([^\[\]]*)/.exec(t);for(i[1]&&e.push(i[1]);null!==(i=n.exec(t));)e.push(i[1]);return e}(e),n)}else{var s=t[e];s?(Array.isArray(s)||(t[e]=[s]),t[e].push(n)):t[e]=n}return t}function o(t,e,n){return n=n.replace(/(\r)?\n/g,"\r\n"),n=(n=encodeURIComponent(n)).replace(/%20/g,"+"),t+(t?"&":"")+encodeURIComponent(e)+"="+n}t.exports=function(t,r){"object"!=typeof r?r={hash:!!r}:void 0===r.hash&&(r.hash=!0);for(var i=r.hash?{}:"",a=r.serializer||(r.hash?s:o),u=t&&t.elements?t.elements:[],l=Object.create(null),c=0;c{},765:function(t,e,n){t=n.nmd(t), -/*! - * validate.js 0.13.1 - * - * (c) 2013-2019 Nicklas Ansman, 2013 Wrapp - * Validate.js may be freely distributed under the MIT license. - * For all details and documentation: - * http://validatejs.org/ - */ -function(t,e,r){"use strict";var i=function(t,e,n){n=s.extend({},s.options,n);var r=s.runValidations(t,e,n);if(r.some((function(t){return s.isPromise(t.error)})))throw new Error("Use validate.async if you want support for promises");return i.processValidationResults(r,n)},s=i;s.extend=function(t){return[].slice.call(arguments,1).forEach((function(e){for(var n in e)t[n]=e[n]})),t},s.extend(i,{version:{major:0,minor:13,patch:1,metadata:null,toString:function(){var t=s.format("%{major}.%{minor}.%{patch}",s.version);return s.isEmpty(s.version.metadata)||(t+="+"+s.version.metadata),t}},Promise:"undefined"!=typeof Promise?Promise:null,EMPTY_STRING_REGEXP:/^\s*$/,runValidations:function(t,e,n){var r,i,o,a,u,l,c,f=[];for(r in(s.isDomElement(t)||s.isJqueryElement(t))&&(t=s.collectFormValues(t)),e)for(i in o=s.getDeepObjectValue(t,r),a=s.result(e[r],o,t,r,n,e)){if(!(u=s.validators[i]))throw c=s.format("Unknown validator %{name}",{name:i}),new Error(c);l=a[i],(l=s.result(l,o,t,r,n,e))&&f.push({attribute:r,value:o,validator:i,globalOptions:n,attributes:t,options:l,error:u.call(u,o,l,r,t,n)})}return f},processValidationResults:function(t,e){t=s.pruneEmptyErrors(t,e),t=s.expandMultipleErrors(t,e),t=s.convertErrorMessages(t,e);var n=e.format||"grouped";if("function"!=typeof s.formatters[n])throw new Error(s.format("Unknown format %{format}",e));return t=s.formatters[n](t),s.isEmpty(t)?void 0:t},async:function(t,e,n){var r=(n=s.extend({},s.async.options,n)).wrapErrors||function(t){return t};!1!==n.cleanAttributes&&(t=s.cleanAttributes(t,e));var i=s.runValidations(t,e,n);return new s.Promise((function(o,a){s.waitForResults(i).then((function(){var u=s.processValidationResults(i,n);u?a(new r(u,n,t,e)):o(t)}),(function(t){a(t)}))}))},single:function(t,e,n){return n=s.extend({},s.single.options,n,{format:"flat",fullMessages:!1}),s({single:t},{single:e},n)},waitForResults:function(t){return t.reduce((function(t,e){return s.isPromise(e.error)?t.then((function(){return e.error.then((function(t){e.error=t||null}))})):t}),new s.Promise((function(t){t()})))},result:function(t){var e=[].slice.call(arguments,1);return"function"==typeof t&&(t=t.apply(null,e)),t},isNumber:function(t){return"number"==typeof t&&!isNaN(t)},isFunction:function(t){return"function"==typeof t},isInteger:function(t){return s.isNumber(t)&&t%1==0},isBoolean:function(t){return"boolean"==typeof t},isObject:function(t){return t===Object(t)},isDate:function(t){return t instanceof Date},isDefined:function(t){return null!=t},isPromise:function(t){return!!t&&s.isFunction(t.then)},isJqueryElement:function(t){return t&&s.isString(t.jquery)},isDomElement:function(t){return!!t&&(!(!t.querySelectorAll||!t.querySelector)&&(!(!s.isObject(document)||t!==document)||("object"==typeof HTMLElement?t instanceof HTMLElement:t&&"object"==typeof t&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName)))},isEmpty:function(t){var e;if(!s.isDefined(t))return!0;if(s.isFunction(t))return!1;if(s.isString(t))return s.EMPTY_STRING_REGEXP.test(t);if(s.isArray(t))return 0===t.length;if(s.isDate(t))return!1;if(s.isObject(t)){for(e in t)return!1;return!0}return!1},format:s.extend((function(t,e){return s.isString(t)?t.replace(s.format.FORMAT_REGEXP,(function(t,n,r){return"%"===n?"%{"+r+"}":String(e[r])})):t}),{FORMAT_REGEXP:/(%?)%\{([^\}]+)\}/g}),prettify:function(t){return s.isNumber(t)?100*t%1==0?""+t:parseFloat(Math.round(100*t)/100).toFixed(2):s.isArray(t)?t.map((function(t){return s.prettify(t)})).join(", "):s.isObject(t)?s.isDefined(t.toString)?t.toString():JSON.stringify(t):(t=""+t).replace(/([^\s])\.([^\s])/g,"$1 $2").replace(/\\+/g,"").replace(/[_-]/g," ").replace(/([a-z])([A-Z])/g,(function(t,e,n){return e+" "+n.toLowerCase()})).toLowerCase()},stringifyValue:function(t,e){return(e&&e.prettify||s.prettify)(t)},isString:function(t){return"string"==typeof t},isArray:function(t){return"[object Array]"==={}.toString.call(t)},isHash:function(t){return s.isObject(t)&&!s.isArray(t)&&!s.isFunction(t)},contains:function(t,e){return!!s.isDefined(t)&&(s.isArray(t)?-1!==t.indexOf(e):e in t)},unique:function(t){return s.isArray(t)?t.filter((function(t,e,n){return n.indexOf(t)==e})):t},forEachKeyInKeypath:function(t,e,n){if(s.isString(e)){var r,i="",o=!1;for(r=0;ro&&(r=e.tooLong||this.tooLong||"is too long (maximum is %{count} characters)",u.push(s.format(r,{count:o}))),u.length>0?e.message||u:void 0):e.message||this.notValid||"has an incorrect length"}},numericality:function(t,e,n,r,i){if(s.isDefined(t)){var o,a,u=[],l={greaterThan:function(t,e){return t>e},greaterThanOrEqualTo:function(t,e){return t>=e},equalTo:function(t,e){return t===e},lessThan:function(t,e){return to&&(n=e.tooLate||e.message||this.tooLate||"must be no later than %{date}",n=s.format(n,{date:this.format(o,e),value:this.format(t,e)}),r.push(n)),r.length?s.unique(r):void 0)}}),{parse:null,format:null}),date:function(t,e){return e=s.extend({},e,{dateOnly:!0}),s.validators.datetime.call(s.validators.datetime,t,e)},format:function(t,e){(s.isString(e)||e instanceof RegExp)&&(e={pattern:e});var n,r=(e=s.extend({},this.options,e)).message||this.message||"is invalid",i=e.pattern;if(s.isDefined(t))return s.isString(t)?(s.isString(i)&&(i=new RegExp(e.pattern,e.flags)),(n=i.exec(t))&&n[0].length==t.length?void 0:r):r},inclusion:function(t,e){if(s.isDefined(t)&&(s.isArray(e)&&(e={within:e}),e=s.extend({},this.options,e),!s.contains(e.within,t))){var n=e.message||this.message||"^%{value} is not included in the list";return s.format(n,{value:t})}},exclusion:function(t,e){if(s.isDefined(t)&&(s.isArray(e)&&(e={within:e}),e=s.extend({},this.options,e),s.contains(e.within,t))){var n=e.message||this.message||"^%{value} is restricted";return s.isString(e.within[t])&&(t=e.within[t]),s.format(n,{value:t})}},email:s.extend((function(t,e){var n=(e=s.extend({},this.options,e)).message||this.message||"is not a valid email";if(s.isDefined(t))return s.isString(t)&&this.PATTERN.exec(t)?void 0:n}),{PATTERN:/^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i}),equality:function(t,e,n,r,i){if(s.isDefined(t)){s.isString(e)&&(e={attribute:e});var o=(e=s.extend({},this.options,e)).message||this.message||"is not equal to %{attribute}";if(s.isEmpty(e.attribute)||!s.isString(e.attribute))throw new Error("The attribute must be a non empty string");var a=s.getDeepObjectValue(r,e.attribute),u=e.comparator||function(t,e){return t===e},l=e.prettify||i&&i.prettify||s.prettify;return u(t,a,e,n,r)?void 0:s.format(o,{attribute:l(e.attribute)})}},url:function(t,e){if(s.isDefined(t)){var n=(e=s.extend({},this.options,e)).message||this.message||"is not a valid url",r=e.schemes||this.schemes||["http","https"],i=e.allowLocal||this.allowLocal||!1,o=e.allowDataUrl||this.allowDataUrl||!1;if(!s.isString(t))return n;var a="^(?:(?:"+r.join("|")+")://)(?:\\S+(?::\\S*)?@)?(?:",u="(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))";if(i?u+="?":a+="(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})",a+="(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*"+u+")(?::\\d{2,5})?(?:[/?#]\\S*)?$",o){a="(?:"+a+")|(?:^data:(?:\\w+\\/[-+.\\w]+(?:;[\\w=]+)*)?(?:;base64)?,[A-Za-z0-9-_.!~\\*'();\\/?:@&=+$,%]*$)"}return new RegExp(a,"i").exec(t)?void 0:n}},type:s.extend((function(t,e,n,r,i){if(s.isString(e)&&(e={type:e}),s.isDefined(t)){var o,a=s.extend({},this.options,e),u=a.type;if(!s.isDefined(u))throw new Error("No type was specified");if(o=s.isFunction(u)?u:this.types[u],!s.isFunction(o))throw new Error("validate.validators.type.types."+u+" must be a function.");if(!o(t,a,n,r,i)){var l=e.message||this.messages[u]||this.message||a.message||(s.isFunction(u)?"must be of the correct type":"must be of type %{type}");return s.isFunction(l)&&(l=l(t,e,n,r,i)),s.format(l,{attribute:s.prettify(n),type:u})}}}),{types:{object:function(t){return s.isObject(t)&&!s.isArray(t)},array:s.isArray,integer:s.isInteger,number:s.isNumber,string:s.isString,date:s.isDate,boolean:s.isBoolean},messages:{}})},i.formatters={detailed:function(t){return t},flat:s.flattenErrorsToArray,grouped:function(t){var e;for(e in t=s.groupErrorsByAttribute(t))t[e]=s.flattenErrorsToArray(t[e]);return t},constraint:function(t){var e;for(e in t=s.groupErrorsByAttribute(t))t[e]=t[e].map((function(t){return t.validator})).sort();return t}},i.exposeModule(i,this,t,e,n.amdD)}.call(this,e,t,n.amdD)}},e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={id:r,loaded:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}n.m=t,n.x=t=>{},n.amdD=function(){throw new Error("define cannot be used indirect")},n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.nmd=t=>(t.paths=[],t.children||(t.children=[]),t),(()=>{var t={669:0},e=[[2],[837]],r=t=>{},i=(i,s)=>{for(var o,a,[u,l,c,f]=s,d=0,h=[];d{}),r}s.forEach(i.bind(null,0)),s.push=i.bind(null,s.push.bind(s));var a=n.x;n.x=()=>(n.x=a||(t=>{}),(r=o)())})(),n.x()})(); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index cf78ff9..0000000 --- a/demo/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Demo | Tiny Validator - - - - -
-
- - -
-
- - -
- -
- - - diff --git a/dist/demo.css b/dist/demo.css new file mode 100644 index 0000000..1911ea8 --- /dev/null +++ b/dist/demo.css @@ -0,0 +1,15420 @@ +@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; +} +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; +} + +.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 { + box-sizing: border-box; + display: block; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + letter-spacing: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} +[class*=col-]::before, [class*=col-]::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} +[class*=col-] .grid { + flex: 1 1 auto; + margin: -15px; +} + +.col-12 { + width: 100%; + *width: 99.9%; +} + +.col-11 { + width: 91.6666666667%; + *width: 91.5666666667%; +} + +.col-10 { + width: 83.3333333333%; + *width: 83.2333333333%; +} + +.col-9 { + width: 75%; + *width: 74.9%; +} + +.col-8 { + width: 66.6666666667%; + *width: 66.5666666667%; +} + +.col-7 { + width: 58.3333333333%; + *width: 58.2333333333%; +} + +.col-6 { + width: 50%; + *width: 49.9%; +} + +.col-5 { + width: 41.6666666667%; + *width: 41.5666666667%; +} + +.col-4 { + width: 33.3333333333%; + *width: 33.2333333333%; +} + +.col-3 { + width: 25%; + *width: 24.9%; +} + +.col-2 { + width: 16.6666666667%; + *width: 16.5666666667%; +} + +.col-1 { + width: 8.3333333333%; + *width: 8.2333333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } + + .col-xs-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-xs-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-xs-9 { + width: 75%; + *width: 74.9%; + } + + .col-xs-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-xs-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-xs-6 { + width: 50%; + *width: 49.9%; + } + + .col-xs-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-xs-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-xs-3 { + width: 25%; + *width: 24.9%; + } + + .col-xs-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-xs-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } + + .col-sm-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-sm-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-sm-9 { + width: 75%; + *width: 74.9%; + } + + .col-sm-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-sm-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-sm-6 { + width: 50%; + *width: 49.9%; + } + + .col-sm-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-sm-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-sm-3 { + width: 25%; + *width: 24.9%; + } + + .col-sm-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-sm-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } + + .col-md-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-md-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-md-9 { + width: 75%; + *width: 74.9%; + } + + .col-md-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-md-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-md-6 { + width: 50%; + *width: 49.9%; + } + + .col-md-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-md-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-md-3 { + width: 25%; + *width: 24.9%; + } + + .col-md-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-md-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } + + .col-lg-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-lg-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-lg-9 { + width: 75%; + *width: 74.9%; + } + + .col-lg-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-lg-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-lg-6 { + width: 50%; + *width: 49.9%; + } + + .col-lg-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-lg-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-lg-3 { + width: 25%; + *width: 24.9%; + } + + .col-lg-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-lg-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } + + .col-xlg-11 { + width: 91.6666666667%; + *width: 91.5666666667%; + } + + .col-xlg-10 { + width: 83.3333333333%; + *width: 83.2333333333%; + } + + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } + + .col-xlg-8 { + width: 66.6666666667%; + *width: 66.5666666667%; + } + + .col-xlg-7 { + width: 58.3333333333%; + *width: 58.2333333333%; + } + + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } + + .col-xlg-5 { + width: 41.6666666667%; + *width: 41.5666666667%; + } + + .col-xlg-4 { + width: 33.3333333333%; + *width: 33.2333333333%; + } + + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } + + .col-xlg-2 { + width: 16.6666666667%; + *width: 16.5666666667%; + } + + .col-xlg-1 { + width: 8.3333333333%; + *width: 8.2333333333%; + } +} +.col-auto { + flex: 1 0 0px; + width: auto; +} + +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + width: auto; + } +} +.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-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; +} + +.offset-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; +} + +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; +} + +.offset-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; +} + +.offset-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; +} + +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; +} + +.offset-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; +} + +.offset-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; +} + +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; +} + +.offset-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; +} + +.offset-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-xs-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xs-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-xs-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xs-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-xs-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xs-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-xs-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-sm-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-sm-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-sm-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-sm-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-sm-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-sm-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-sm-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-md-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-md-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-md-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-md-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-md-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-md-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-md-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-lg-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-lg-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-lg-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-lg-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-lg-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-lg-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-lg-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.6666666667%; + *margin-left: 91.5666666667%; + } + + .offset-xlg-10 { + margin-left: 83.3333333333%; + *margin-left: 83.2333333333%; + } + + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xlg-8 { + margin-left: 66.6666666667%; + *margin-left: 66.5666666667%; + } + + .offset-xlg-7 { + margin-left: 58.3333333333%; + *margin-left: 58.2333333333%; + } + + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xlg-5 { + margin-left: 41.6666666667%; + *margin-left: 41.5666666667%; + } + + .offset-xlg-4 { + margin-left: 33.3333333333%; + *margin-left: 33.2333333333%; + } + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xlg-2 { + margin-left: 16.6666666667%; + *margin-left: 16.5666666667%; + } + + .offset-xlg-1 { + margin-left: 8.3333333333%; + *margin-left: 8.2333333333%; + } + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +.wrap { + flex-wrap: wrap; +} + +.no-wrap { + flex-wrap: nowrap; +} +.no-wrap [class*=col-] { + flex-shrink: 1; +} + +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +.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-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} +.align-end [class*=col-] { + vertical-align: bottom; +} + +.align-center { + align-items: center; +} +.align-center [class*=col-] { + vertical-align: middle; +} + +.align-baseline { + align-items: baseline; +} + +.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-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-start { + justify-content: flex-start; +} +.justify-start.grid { + text-align: left; +} + +.justify-end { + justify-content: flex-end; +} +.justify-end.grid { + text-align: right; + -moz-text-align-last: right; + text-align-last: right; +} +.justify-end.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-center { + justify-content: center; +} +.justify-center.grid { + text-align: center; + -moz-text-align-last: center; + text-align-last: center; +} +.justify-center.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-between { + justify-content: space-between; +} +.justify-space-between.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} +.justify-space-between.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-around { + justify-content: space-around; +} +.justify-space-around.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} +.justify-space-around.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.grid-bleed [class*=col-] { + padding: 0; +} + +.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; +} + +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; + *width: auto; +} + +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; +} +.flex-footer > :last-child { + margin-bottom: 0; +} + +@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; + } +} + +/** + * functions + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * 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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * 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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * breakpoints + * + */ +/** + * fonts + * + */ +/** + * colors + * + * + */ +/** + * margin + * + */ +/** + * padding + * + */ +/** + * border + * + */ +/** + * Container + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +.container--app { + max-width: 100%; + padding: 15px 30px; +} + +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +: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; +} + +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * 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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +/** + * + * + */ +/** + * + * + */ +.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 1.3rem; + min-height: 2.8rem; + width: 100%; +} +@media only screen and (min-width: 768px) { + .button { + width: auto; + } +} +.button--small { + 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; +} + +/** + * + * + * + * + */ +.field-group { + margin: 0 0 1rem; +} +.field-group--valid input.field-text, .field-group--valid textarea.field-text { + border-color: var(--success); +} +.field-group--valid .icon { + fill: var(--success); +} +.field-group--error input.field-text, .field-group--error textarea.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; +} + +input.field-text, textarea.field-text, select.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; +} +input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { + outline: 0; + border-color: var(--border); +} + +input.field-text, textarea.field-text { + padding: 0.8em 1.1em; +} + +textarea.field-text { + height: 180px; +} + +/** + * field-choice + * + * + */ +select.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; +} +select.field-choice:active, select.field-choice:focus { + background-image: linear-gradient(to right, #3e3e3e, #3e3e3e); +} + +/** + * radio & checkbox + * + *
+ * + *
+ * + */ +input[type=checkbox].field-choice, +input[type=radio].field-choice { + position: relative; + display: none; +} +input[type=checkbox].field-choice ~ .field-choice__checked, +input[type=radio].field-choice ~ .field-choice__checked { + display: none; +} +input[type=checkbox].field-choice:checked ~ .field-choice__checked, +input[type=radio].field-choice:checked ~ .field-choice__checked { + display: inline-block; +} +input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +input[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; +} + +input[type=checkbox].field-choice ~ .field-switch:after { + left: 0; +} +input[type=checkbox].field-choice:checked ~ .field-switch { + border-color: var(--success); +} +input[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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.hero { + position: relative; +} +.hero img { + width: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 50% 50%; + object-position: 50% 50%; +} + +/** + * + * + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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 { + width: 100%; + border: 1px solid var(--border); + background: var(--white); +} +.table--striped tr:nth-child(even) { + background-color: #fdfdfd; +} +.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--hover .table__tr:hover { + background-color: #585858; +} +.table--hover .table__tr:hover .table__td { + color: white; +} + +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui + * + */ +.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 + *
+ *
+ * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui + * + */ +.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, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui + * + */ +.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; +} +.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; +} + +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +.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 { + 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; +} + +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; +} + +.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 { + box-sizing: border-box; + display: block; + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0 auto; + position: relative; + letter-spacing: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} + +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} + +[class*=col-]::before, [class*=col-]::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] .grid { + flex: 1 1 auto; + margin: -15px; +} + +.col-12 { + width: 100%; + *width: 99.9%; +} + +.col-11 { + width: 91.66666667%; + *width: 91.56666667%; +} + +.col-10 { + width: 83.33333333%; + *width: 83.23333333%; +} + +.col-9 { + width: 75%; + *width: 74.9%; +} + +.col-8 { + width: 66.66666667%; + *width: 66.56666667%; +} + +.col-7 { + width: 58.33333333%; + *width: 58.23333333%; +} + +.col-6 { + width: 50%; + *width: 49.9%; +} + +.col-5 { + width: 41.66666667%; + *width: 41.56666667%; +} + +.col-4 { + width: 33.33333333%; + *width: 33.23333333%; +} + +.col-3 { + width: 25%; + *width: 24.9%; +} + +.col-2 { + width: 16.66666667%; + *width: 16.56666667%; +} + +.col-1 { + width: 8.33333333%; + *width: 8.23333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } + + .col-xs-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xs-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xs-9 { + width: 75%; + *width: 74.9%; + } + + .col-xs-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xs-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xs-6 { + width: 50%; + *width: 49.9%; + } + + .col-xs-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xs-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xs-3 { + width: 25%; + *width: 24.9%; + } + + .col-xs-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xs-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } + + .col-sm-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-sm-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-sm-9 { + width: 75%; + *width: 74.9%; + } + + .col-sm-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-sm-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-sm-6 { + width: 50%; + *width: 49.9%; + } + + .col-sm-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-sm-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-sm-3 { + width: 25%; + *width: 24.9%; + } + + .col-sm-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-sm-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } + + .col-md-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-md-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-md-9 { + width: 75%; + *width: 74.9%; + } + + .col-md-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-md-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-md-6 { + width: 50%; + *width: 49.9%; + } + + .col-md-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-md-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-md-3 { + width: 25%; + *width: 24.9%; + } + + .col-md-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-md-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } + + .col-lg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-lg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-lg-9 { + width: 75%; + *width: 74.9%; + } + + .col-lg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-lg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-lg-6 { + width: 50%; + *width: 49.9%; + } + + .col-lg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-lg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-lg-3 { + width: 25%; + *width: 24.9%; + } + + .col-lg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-lg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } + + .col-xlg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xlg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } + + .col-xlg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xlg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } + + .col-xlg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xlg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } + + .col-xlg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xlg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +.col-auto { + flex: 1 0 0px; + width: auto; +} + +@media (min-width: 576px) { + .col-xs-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 768px) { + .col-sm-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 992px) { + .col-md-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1200px) { + .col-lg-auto { + flex: 1 0 0px; + width: auto; + } +} +@media (min-width: 1600px) { + .col-xlg-auto { + flex: 1 0 0px; + width: auto; + } +} +.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-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; +} + +.offset-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; +} + +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; +} + +.offset-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; +} + +.offset-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; +} + +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; +} + +.offset-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; +} + +.offset-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; +} + +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; +} + +.offset-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; +} + +.offset-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-md-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xlg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xlg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xlg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xlg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xlg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xlg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xlg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +.wrap { + flex-wrap: wrap; +} + +.no-wrap { + flex-wrap: nowrap; +} + +.no-wrap [class*=col-] { + flex-shrink: 1; +} + +.wrap-reverse { + flex-wrap: wrap-reverse; +} + +.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-start { + align-items: flex-start; +} + +.align-end { + align-items: flex-end; +} + +.align-end [class*=col-] { + vertical-align: bottom; +} + +.align-center { + align-items: center; +} + +.align-center [class*=col-] { + vertical-align: middle; +} + +.align-baseline { + align-items: baseline; +} + +.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-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-start { + justify-content: flex-start; +} + +.justify-start.grid { + text-align: left; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-end.grid { + text-align: right; + -moz-text-align-last: right; + text-align-last: right; +} + +.justify-end.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-center { + justify-content: center; +} + +.justify-center.grid { + text-align: center; + -moz-text-align-last: center; + text-align-last: center; +} + +.justify-center.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-between { + justify-content: space-between; +} + +.justify-space-between.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} + +.justify-space-between.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.justify-space-around { + justify-content: space-around; +} + +.justify-space-around.grid { + text-align: justify; + -moz-text-align-last: justify; + text-align-last: justify; +} + +.justify-space-around.grid [class*=col-] { + text-align: left; + text-align: start; + -moz-text-align-last: left; + -moz-text-align-last: start; + text-align-last: left; + text-align-last: start; +} + +.grid-bleed [class*=col-] { + padding: 0; +} + +.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; +} + +.flex-img { + display: block; + flex: 0 0 auto; + max-width: 100%; + height: auto; + width: 100%; + *width: auto; +} + +.flex-footer { + width: 100%; + margin-top: auto; + margin-bottom: 0; +} + +.flex-footer > :last-child { + margin-bottom: 0; +} + +@media (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; + } +} +/** + * + * + * + * + */ +.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 + * + * + */ +/** + * 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 + * + * + */ +/** + * 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; +} + +.m-top-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; +} + +.m-bottom-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; +} + +.m-left-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; +} + +.m-right-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; +} + +.p-top-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; +} + +.p-bottom-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; +} + +.p-left-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; +} + +.p-right-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; + } +} +/** + * + * + * + * + * + */ +.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-text { + fill: var(--text); +} + +.fill-text-contrast { + fill: var(--text-contrast); +} + +.fill-primary { + fill: var(--primary); +} + +.fill-primary-contrast { + fill: var(--primary-contrast); +} + +.fill-active { + fill: var(--active); +} + +.fill-active-contrast { + fill: var(--active-contrast); +} + +.fill-link { + fill: var(--link); +} + +.fill-link-hover { + fill: var(--link-hover); +} + +.fill-danger { + fill: var(--danger); +} + +.fill-danger-contrast { + fill: var(--danger-contrast); +} + +.fill-info { + fill: var(--info); +} + +.fill-info-constrast { + fill: var(--info-constrast); +} + +.fill-success { + fill: var(--success); +} + +.fill-success-contrast { + fill: var(--success-contrast); +} + +.fill-warning { + fill: var(--warning); +} + +.fill-warning-contrast { + fill: var(--warning-contrast); +} + +.fill-background { + fill: var(--background); +} + +.fill-background-contrast { + fill: var(--background-contrast); +} + +.fill-background-alpha { + fill: var(--background-alpha); +} + +.fill-border { + fill: var(--border); +} + +.fill-border-contrast { + fill: var(--border-contrast); +} + +.hover-fill-body:hover svg { + fill: var(--body); +} + +.hover-fill-text:hover svg { + fill: var(--text); +} + +.hover-fill-text-contrast:hover svg { + fill: var(--text-contrast); +} + +.hover-fill-primary:hover svg { + fill: var(--primary); +} + +.hover-fill-primary-contrast:hover svg { + fill: var(--primary-contrast); +} + +.hover-fill-active:hover svg { + fill: var(--active); +} + +.hover-fill-active-contrast:hover svg { + fill: var(--active-contrast); +} + +.hover-fill-link:hover svg { + fill: var(--link); +} + +.hover-fill-link-hover:hover svg { + fill: var(--link-hover); +} + +.hover-fill-danger:hover svg { + fill: var(--danger); +} + +.hover-fill-danger-contrast:hover svg { + fill: var(--danger-contrast); +} + +.hover-fill-info:hover svg { + fill: var(--info); +} + +.hover-fill-info-constrast:hover svg { + fill: var(--info-constrast); +} + +.hover-fill-success:hover svg { + fill: var(--success); +} + +.hover-fill-success-contrast:hover svg { + fill: var(--success-contrast); +} + +.hover-fill-warning:hover svg { + fill: var(--warning); +} + +.hover-fill-warning-contrast:hover svg { + fill: var(--warning-contrast); +} + +.hover-fill-background:hover svg { + fill: var(--background); +} + +.hover-fill-background-contrast:hover svg { + fill: var(--background-contrast); +} + +.hover-fill-background-alpha:hover svg { + fill: var(--background-alpha); +} + +.hover-fill-border:hover svg { + fill: var(--border); +} + +.hover-fill-border-contrast: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 + * + * + */ +.left { + text-align: left; +} + +.right { + text-align: right; +} + +.center { + text-align: center; +} + +.justify { + text-align: justify; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.crossed { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.light { + font-weight: lighter; +} + +.normal { + font-weight: normal; +} + +.medium { + font-weight: medium; +} + +.bold { + 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; +} + +.white-space-nowrap { + white-space: nowrap; +} + +.white-space-pre { + white-space: pre; +} + +.white-space-preline { + white-space: preline; +} + +.white-space-preline { + white-space: pre-line; +} + +.white-space-prewrap { + white-space: pre-wrap; +} + +/** + * visibility + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * 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; +} + +.hidden { + display: none; +} diff --git a/dist/demo.js b/dist/demo.js new file mode 100644 index 0000000..c2f7e18 --- /dev/null +++ b/dist/demo.js @@ -0,0 +1,4641 @@ +/******/ (() => { // webpackBootstrap +/******/ var __webpack_modules__ = ({ + +/***/ "./src/field-error.riot": +/*!******************************!*\ + !*** ./src/field-error.riot ***! + \******************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ + css: null, + + exports: { + state: { + errors: [ + + ], + + // css class for + closest: '.field-group', + }, + + /** + * + * + * @param {Object} props + * @param {Object} state + * + */ + onBeforeMounted(props, state) + { + if (props.closest) { + state.closest = props.closest + } + }, + + /** + * + * + * @param {Object} props + * @param {Object} state + * + */ + onMounted(props, state) + { + // getting parent element for entire field + const parent = this.root.closest(state.closest) + + // getting current element by name + const element = parent.querySelector('[name="' + props.name + '"]') + + // getting form + const form = element.closest('form') + + // element, form are exists and nofieldupdate is not set + // each change of the element dispatch a event to form validation + if (element && form && !props.nofieldupdate) { + element.addEventListener('input', (event) => { + this.dispatchCustomEvent(event, form, props.name) + }) + } + + // add custom event to listen to form-validation + this.root.addEventListener('form-validation', (event) => { + this.onFormValidation(event, parent) + }) + }, + + /** + * process form validation triggered by form + * + * @param {Event} event + * @param {Element} parent + * + */ + onFormValidation(event, parent) + { + // if detail is a value, set to errors + if (event.detail) { + this.state.errors = event.detail + + parent.classList.add('field--error') + parent.classList.remove('field--valid') + } else { + this.state.errors = [] + + parent.classList.remove('field--error') + parent.classList.add('field--valid') + } + + this.update() + }, + + /** + * create event to send to form validation + * + * @param {Event} event + * @param {Element} form + * @param {string} name + * + */ + dispatchCustomEvent(event, form, name) + { + const fieldUpdateEvent = new CustomEvent('field-update', { + 'detail': { + 'name': name, + 'value': event.target.value + } + }) + + form.dispatchEvent(fieldUpdateEvent) + } + }, + + template: ( + template, + expressionTypes, + bindingTypes, + getComponent + ) => template( + '
', + [ + { + type: bindingTypes.IF, + evaluate: _scope => _scope.state.errors.length > 0, + redundantAttribute: 'expr0', + selector: '[expr0]', + + template: template( + '
', + [ + { + type: bindingTypes.EACH, + getKey: null, + condition: null, + + template: template( + ' ', + [ + { + expressions: [ + { + type: expressionTypes.TEXT, + childNodeIndex: 0, + + evaluate: _scope => [ + _scope.error + ].join( + '' + ) + } + ] + } + ] + ), + + redundantAttribute: 'expr1', + selector: '[expr1]', + itemName: 'error', + indexName: null, + evaluate: _scope => _scope.state.errors + } + ] + ) + } + ] + ), + + name: 'field-error' +}); + +/***/ }), + +/***/ "./src/FormValidator.js": +/*!******************************!*\ + !*** ./src/FormValidator.js ***! + \******************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! validate.js */ "./node_modules/validate.js/validate.js"); +/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(validate_js__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var form_serialize__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! form-serialize */ "./node_modules/form-serialize/index.js"); +/* harmony import */ var form_serialize__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(form_serialize__WEBPACK_IMPORTED_MODULE_1__); +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } + + + +/** + * Form Validator with RiotJS Components + * + * + * @author HerrHase + * @ + * + */ + +var FormValidator = /*#__PURE__*/function () { + /** + * + * @param {[type]} formSelector [description] + * @param {[type]} constraits [description] + */ + function FormValidator(formSelector, constraits, onSuccess) { + var _this = this; + + _classCallCheck(this, FormValidator); + + // getting selector to find form-element + this.formSelector = formSelector; // constraits for validate.js + + this.constraits = constraits; // adding onSuccess + + this._onSuccess = onSuccess; // if form not found + + if (!this._onSuccess) { + console.error('FormValidator: onSuccess not found!'); + } // get form and elements + + + this.form = document.querySelector(this.formSelector); // if form not found + + if (!this.form) { + console.error('FormValidator: form not found!'); + } + + this.elements = this.form.querySelectorAll('field-error'); // adding submit event + + this.form.addEventListener('submit', function (event) { + _this._onSubmit(event); + }); // adding event if a element is updated + + this.form.addEventListener('field-update', function (event) { + _this._onFieldUpdate(event); + }); + } + /** + * handle submit + * + * + * @param {Event} event + * + */ + + + _createClass(FormValidator, [{ + key: "_onSubmit", + value: function _onSubmit(event) { + var _this2 = this; + + // getting data from target of submit event + var data = form_serialize__WEBPACK_IMPORTED_MODULE_1___default()(event.target, { + hash: true + }); // options for validate.js + + var options = { + fullMessages: false + }; + validate_js__WEBPACK_IMPORTED_MODULE_0___default().async(data, this.constraits, options).then( // handling success + function () { + _this2._onSuccess(event, data); + }, // handling error + function (errors) { + event.preventDefault(); // send each element a event + + _this2.elements.forEach(function (element) { + var elementErrors = false; // check for errors by name + + if (errors[element.attributes.name.nodeValue]) { + elementErrors = errors[element.attributes.name.nodeValue]; + } + + _this2._dispatchCustomEvent(elementErrors, element); + }); + }); + } + /** + * send update to fields + * + * + * @param {Event} event + * + */ + + }, { + key: "_onFieldUpdate", + value: function _onFieldUpdate(event) { + var _this3 = this; + + // workaround, make sure that value for single is undefined if it is empty + if (event.detail.value == '') { + event.detail.value = undefined; + } + + var errors = validate_js__WEBPACK_IMPORTED_MODULE_0___default().single(event.detail.value, this.constraits[event.detail.name]); // search for element by name and dispatch event + + this.elements.forEach(function (element) { + if (element.attributes.name.nodeValue == event.detail.name) { + _this3._dispatchCustomEvent(errors, element); + } + }); + } + /** + * dispatch event to single element + * + * @param {Array} errors + * @param {Element} element + * + */ + + }, { + key: "_dispatchCustomEvent", + value: function _dispatchCustomEvent(errors, element) { + var detail = false; + + if (errors) { + detail = errors; + } + + var formValidationEvent = new CustomEvent('form-validation', { + 'detail': detail + }); + element.dispatchEvent(formValidationEvent); + } + }]); + + return FormValidator; +}(); + +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FormValidator); + +/***/ }), + +/***/ "./src/demo.js": +/*!*********************!*\ + !*** ./src/demo.js ***! + \*********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); +/* harmony import */ var _FormValidator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FormValidator */ "./src/FormValidator.js"); +/* harmony import */ var _field_error_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./field-error.riot */ "./src/field-error.riot"); + + + +riot__WEBPACK_IMPORTED_MODULE_2__.register('field-error', _field_error_riot__WEBPACK_IMPORTED_MODULE_1__["default"]); +riot__WEBPACK_IMPORTED_MODULE_2__.mount('field-error'); +var formValidation = new _FormValidator__WEBPACK_IMPORTED_MODULE_0__["default"]('form', { + 'email': { + 'presence': true, + 'email': true + }, + 'password': { + 'presence': true + } +}, function (event, data) { + event.preventDefault(); + document.querySelector('#result .content').innerHTML = '

' + JSON.stringify(data) + '

'; + document.querySelector('#result').classList.remove('hidden'); +}); + +/***/ }), + +/***/ "./node_modules/form-serialize/index.js": +/*!**********************************************!*\ + !*** ./node_modules/form-serialize/index.js ***! + \**********************************************/ +/***/ ((module) => { + +// get successful control from form and assemble into object +// http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 + +// types which indicate a submit action and are not successful controls +// these will be ignored +var k_r_submitter = /^(?:submit|button|image|reset|file)$/i; + +// node names which could be successful controls +var k_r_success_contrls = /^(?:input|select|textarea|keygen)/i; + +// Matches bracket notation. +var brackets = /(\[[^\[\]]*\])/g; + +// serializes form fields +// @param form MUST be an HTMLForm element +// @param options is an optional argument to configure the serialization. Default output +// with no options specified is a url encoded string +// - hash: [true | false] Configure the output type. If true, the output will +// be a js object. +// - serializer: [function] Optional serializer function to override the default one. +// The function takes 3 arguments (result, key, value) and should return new result +// hash and url encoded str serializers are provided with this module +// - disabled: [true | false]. If true serialize disabled fields. +// - empty: [true | false]. If true serialize empty fields +function serialize(form, options) { + if (typeof options != 'object') { + options = { hash: !!options }; + } + else if (options.hash === undefined) { + options.hash = true; + } + + var result = (options.hash) ? {} : ''; + var serializer = options.serializer || ((options.hash) ? hash_serializer : str_serialize); + + var elements = form && form.elements ? form.elements : []; + + //Object store each radio and set if it's empty or not + var radio_store = Object.create(null); + + for (var i=0 ; i myString + */ + +function dashToCamelCase(string) { + return string.replace(/-(\w)/g, (_, c) => c.toUpperCase()); +} + +/** + * Get all the element attributes as object + * @param {HTMLElement} element - DOM node we want to parse + * @returns {Object} all the attributes found as a key value pairs + */ + +function DOMattributesToObject(element) { + return Array.from(element.attributes).reduce((acc, attribute) => { + acc[dashToCamelCase(attribute.name)] = attribute.value; + return acc; + }, {}); +} +/** + * Move all the child nodes from a source tag to another + * @param {HTMLElement} source - source node + * @param {HTMLElement} target - target node + * @returns {undefined} it's a void method ¯\_(ツ)_/¯ + */ +// Ignore this helper because it's needed only for svg tags + +function moveChildren(source, target) { + if (source.firstChild) { + target.appendChild(source.firstChild); + moveChildren(source, target); + } +} +/** + * Remove the child nodes from any DOM node + * @param {HTMLElement} node - target node + * @returns {undefined} + */ + +function cleanNode(node) { + clearChildren(node.childNodes); +} +/** + * Clear multiple children in a node + * @param {HTMLElement[]} children - direct children nodes + * @returns {undefined} + */ + +function clearChildren(children) { + Array.from(children).forEach(removeChild); +} +/** + * Remove a node + * @param {HTMLElement}node - node to remove + * @returns {undefined} + */ + +const removeChild = node => node && node.parentNode && node.parentNode.removeChild(node); +/** + * Insert before a node + * @param {HTMLElement} newNode - node to insert + * @param {HTMLElement} refNode - ref child + * @returns {undefined} + */ + +const insertBefore = (newNode, refNode) => refNode && refNode.parentNode && refNode.parentNode.insertBefore(newNode, refNode); +/** + * Replace a node + * @param {HTMLElement} newNode - new node to add to the DOM + * @param {HTMLElement} replaced - node to replace + * @returns {undefined} + */ + +const replaceChild = (newNode, replaced) => replaced && replaced.parentNode && replaced.parentNode.replaceChild(newNode, replaced); + +// Riot.js constants that can be used accross more modules +const COMPONENTS_IMPLEMENTATION_MAP$1 = new Map(), + DOM_COMPONENT_INSTANCE_PROPERTY$1 = Symbol('riot-component'), + PLUGINS_SET$1 = new Set(), + IS_DIRECTIVE = 'is', + VALUE_ATTRIBUTE = 'value', + MOUNT_METHOD_KEY = 'mount', + UPDATE_METHOD_KEY = 'update', + UNMOUNT_METHOD_KEY = 'unmount', + SHOULD_UPDATE_KEY = 'shouldUpdate', + ON_BEFORE_MOUNT_KEY = 'onBeforeMount', + ON_MOUNTED_KEY = 'onMounted', + ON_BEFORE_UPDATE_KEY = 'onBeforeUpdate', + ON_UPDATED_KEY = 'onUpdated', + ON_BEFORE_UNMOUNT_KEY = 'onBeforeUnmount', + ON_UNMOUNTED_KEY = 'onUnmounted', + PROPS_KEY = 'props', + STATE_KEY = 'state', + SLOTS_KEY = 'slots', + ROOT_KEY = 'root', + IS_PURE_SYMBOL = Symbol('pure'), + IS_COMPONENT_UPDATING = Symbol('is_updating'), + PARENT_KEY_SYMBOL = Symbol('parent'), + ATTRIBUTES_KEY_SYMBOL = Symbol('attributes'), + TEMPLATE_KEY_SYMBOL = Symbol('template'); + +var globals = /*#__PURE__*/Object.freeze({ + __proto__: null, + COMPONENTS_IMPLEMENTATION_MAP: COMPONENTS_IMPLEMENTATION_MAP$1, + DOM_COMPONENT_INSTANCE_PROPERTY: DOM_COMPONENT_INSTANCE_PROPERTY$1, + PLUGINS_SET: PLUGINS_SET$1, + IS_DIRECTIVE: IS_DIRECTIVE, + VALUE_ATTRIBUTE: VALUE_ATTRIBUTE, + MOUNT_METHOD_KEY: MOUNT_METHOD_KEY, + UPDATE_METHOD_KEY: UPDATE_METHOD_KEY, + UNMOUNT_METHOD_KEY: UNMOUNT_METHOD_KEY, + SHOULD_UPDATE_KEY: SHOULD_UPDATE_KEY, + ON_BEFORE_MOUNT_KEY: ON_BEFORE_MOUNT_KEY, + ON_MOUNTED_KEY: ON_MOUNTED_KEY, + ON_BEFORE_UPDATE_KEY: ON_BEFORE_UPDATE_KEY, + ON_UPDATED_KEY: ON_UPDATED_KEY, + ON_BEFORE_UNMOUNT_KEY: ON_BEFORE_UNMOUNT_KEY, + ON_UNMOUNTED_KEY: ON_UNMOUNTED_KEY, + PROPS_KEY: PROPS_KEY, + STATE_KEY: STATE_KEY, + SLOTS_KEY: SLOTS_KEY, + ROOT_KEY: ROOT_KEY, + IS_PURE_SYMBOL: IS_PURE_SYMBOL, + IS_COMPONENT_UPDATING: IS_COMPONENT_UPDATING, + PARENT_KEY_SYMBOL: PARENT_KEY_SYMBOL, + ATTRIBUTES_KEY_SYMBOL: ATTRIBUTES_KEY_SYMBOL, + TEMPLATE_KEY_SYMBOL: TEMPLATE_KEY_SYMBOL +}); + +const EACH = 0; +const IF = 1; +const SIMPLE = 2; +const TAG = 3; +const SLOT = 4; +var bindingTypes = { + EACH, + IF, + SIMPLE, + TAG, + SLOT +}; + +const ATTRIBUTE = 0; +const EVENT = 1; +const TEXT = 2; +const VALUE = 3; +var expressionTypes = { + ATTRIBUTE, + EVENT, + TEXT, + VALUE +}; + +const HEAD_SYMBOL = Symbol('head'); +const TAIL_SYMBOL = Symbol('tail'); + +/** + * Create the