vue-devui 1.0.0-beta.18 → 1.0.0-beta.220801

package/grid/index.umd.js

@@ -1 +1 @@
-var X=Object.defineProperty;var L=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var M=(u,t,i)=>t in u?X(u,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):u[t]=i,l=(u,t)=>{for(var i in t||(t={}))q.call(t,i)&&M(u,i,t[i]);if(L)for(var i of L(t))H.call(t,i)&&M(u,i,t[i]);return u};(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},m=[Number,Object],E={xs:m,sm:m,md:m,lg:m,xl:m,xxl:m},g=Number,T={flex:[String,Number],order:g},N={offset:g,pull:g,push:g,span:g},A=l(l(l({},T),N),E),d="devui-col";function p(e,n){return n!==void 0?` ${e}-${n}`:""}function _(e){return t.computed(()=>{const n=p(`${d}-span`,e.span),o=p(`${d}-offset`,e.offset),c=p(`${d}-pull`,e.pull),a=p(`${d}-push`,e.push);return`${n}${o}${c}${a}`})}function w(e){return` ${e.trim()}${e&&" "}`}function z(e){const n=Object.keys(e).filter(o=>o in E);return t.computed(()=>n.reduce((o,c)=>{const a=typeof e[c];if(a==="number")o=`${w(o)}${d}-${c}-span-${e[c]}`;else if(a==="object"){const s=Object.keys(e[c]).filter(r=>r in N).reduce((r,f)=>typeof e[c][f]!="number"?"":(r=`${w(r)}${d}-${c}-${f}-${e[c][f]}`,r),"");o=`${w(o)}${s}`}return o},""))}const B=["xxl","xl","lg","md","sm","xs"],j={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},$=new Map;let v=-1;const C={},P={};function F(e){return $.size||V(),v+=1,$.set(v,e),e(l({},C)),v}function U(e){$.delete(e),$.size===0&&D()}function V(){Object.keys(j).forEach(e=>{const n=window.matchMedia(j[e]);n.matches&&(C[e]=!0,R());const o=c=>{C[e]=c.matches,R()};n.addEventListener("change",o),P[e]={res:n,listener:o}})}function D(){Object.keys(j).forEach(e=>{const n=P[e];n.res.removeEventListener("change",n.listener)}),$.clear()}function R(){$.forEach(e=>{e(l({},C))})}var J="";const h="devui-row";var y=t.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:n}){const o=t.ref({}),c=t.computed(()=>{const s=p(`${h}-align`,e.align),r=p(`${h}-justify`,e.justify),f=e.wrap?` ${h}-wrap`:"";return`${s}${r}${f}`});let a;t.onMounted(()=>{a=F(s=>{o.value=s})}),t.onUnmounted(()=>{U(a)});const x=t.computed(()=>{if(!e.gutter)return{};let s=[0,0];Array.isArray(e.gutter)?s=e.gutter:typeof e.gutter=="number"?s=[e.gutter,0]:B.some(O=>{const S=e.gutter[O];return o.value[O]&&S?(typeof S=="number"?s=[S,0]:s=S,!0):!1});const r=`${(s[0]||0)/2}px`,f=`${(s[0]||0)/2}px`,I=`${(s[1]||0)/2}px`,K=`${(s[1]||0)/2}px`;return{paddingLeft:r,paddingRight:f,paddingTop:I,paddingBottom:K}});return t.provide("gutterStyle",x),()=>{var s;return t.createVNode("div",{class:`${h}${c.value}`},[(s=n.default)==null?void 0:s.call(n)])}}}),Q="",b=t.defineComponent({name:"DCol",props:A,setup(e,{slots:n}){const o=r=>typeof r=="number"?`${r} ${r} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?`0 0 ${r}`:r,c=_(e),a=z(e),x=t.computed(()=>({flex:o(e.flex),order:e.order})),s=t.inject("gutterStyle");return()=>{var r;return t.createVNode("div",{class:`${d}${c.value}${a.value}`,style:l(l({},x.value),s.value)},[(r=n.default)==null?void 0:r.call(n)])}}});y.install=function(e){e.component(y.name,y)},b.install=function(e){e.component(b.name,b)};var G={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.use(b),e.use(y)}};u.Col=b,u.Row=y,u.default=G,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+var I=Object.defineProperty;var _=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var L=(s,n,i)=>n in s?I(s,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[n]=i,a=(s,n)=>{for(var i in n||(n={}))J.call(n,i)&&L(s,i,n[i]);if(_)for(var i of _(n))Q.call(n,i)&&L(s,i,n[i]);return s};(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s.index={},s.Vue))})(this,function(s,n){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},b=Number,B={flex:[String,Number],order:b},w={offset:b,pull:b,push:b,span:b},d=[Number,Object],x={xs:d,sm:d,md:d,lg:d,xl:d,xxl:d},O=a(a(a({},B),w),x),A=["xxl","xl","lg","md","sm","xs"],C={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},f=new Map;let j=-1;const y={},R={};function z(){f.forEach(e=>{e(a({},y))})}function U(){Object.keys(C).forEach(e=>{const c=window.matchMedia(C[e]);c.matches&&(y[e]=!0,z());const r=u=>{y[e]=u.matches,z()};c.addEventListener("change",r),R[e]={res:c,listener:r}})}function V(e){return f.size||U(),j+=1,f.set(j,e),e(a({},y)),j}function D(){Object.keys(C).forEach(e=>{const c=R[e];c.res.removeEventListener("change",c.listener)}),f.clear()}function G(e){f.delete(e),f.size===0&&D()}function h(e,c,r){let u=e;return c&&(u+=`__${c}`),r&&(u+=`--${r}`),u}function N(e,c=!1){const r=c?`.devui-${e}`:`devui-${e}`;return{b:()=>h(r),e:t=>t?h(r,t):"",m:t=>t?h(r,"",t):"",em:(t,o)=>t&&o?h(r,t,o):""}}var W="",v=n.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:c}){const r=n.ref({}),u=N("row"),l=n.computed(()=>({[u.em("align",e.align)]:!0,[u.em("justify",e.justify)]:!0,[u.e("wrap")]:e.wrap}));let p;n.onMounted(()=>{p=V(t=>{r.value=t})}),n.onUnmounted(()=>{G(p)});const g=n.computed(()=>{if(!e.gutter)return{};let t=[0,0];Array.isArray(e.gutter)?t=e.gutter:typeof e.gutter=="number"?t=[e.gutter,0]:A.some(T=>{const $=e.gutter[T];return r.value[T]&&$?(typeof $=="number"?t=[$,0]:t=$,!0):!1});const o=`${(t[0]||0)/2}px`,M=`${(t[0]||0)/2}px`,S=`${(t[1]||0)/2}px`,H=`${(t[1]||0)/2}px`;return{paddingLeft:o,paddingRight:M,paddingTop:S,paddingBottom:H}});return n.provide("gutterStyle",g),()=>{var t;return n.createVNode("div",{class:[u.b(),l.value]},[(t=c.default)==null?void 0:t.call(c)])}}});const m=N("col");function K(e){return n.computed(()=>({[m.em("span",e.span?String(e.span):"")]:!0,[m.em("offset",e.offset?String(e.offset):"")]:!0,[m.em("pull",e.pull?String(e.pull):"")]:!0,[m.em("push",e.push?String(e.push):"")]:!0}))}function P(e){return` ${e.trim()}${e&&" "}`}function q(e){const c=Object.keys(e).filter(r=>r in x);return n.computed(()=>c.reduce((r,u)=>{const l=typeof e[u];if(l==="number")r=`${P(r)}${m.em(u,`span-${e[u]}`)}`;else if(l==="object"){const g=Object.keys(e[u]).filter(t=>t in w).reduce((t,o)=>{const S=e[u][o];return typeof S!="number"?"":(t=`${P(t)}${m.em(u,`${o}-${S}`)}`,t)},"");r=`${P(r)}${g}`}return r},""))}var X="",E=n.defineComponent({name:"DCol",props:O,setup(e,{slots:c}){const r=N("col"),u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,l=K(e),p=q(e),g=n.computed(()=>({flex:u(e.flex),order:e.order})),t=n.inject("gutterStyle");return()=>{var o;return n.createVNode("div",{class:[r.b(),l.value,p.value],style:a(a({},g.value),t==null?void 0:t.value)},[(o=c.default)==null?void 0:o.call(c)])}}}),F={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(v.name,v),e.component(E.name,E)}};s.Col=E,s.Row=v,s.colProps=O,s.colPropsBaseClass=w,s.colPropsBaseStyle=B,s.default=F,s.rowProps=i,s.screenSizes=x,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/grid/style.css

@@ -1 +1 @@
-.devui-row{display:flex}.devui-row-wrap{flex-wrap:wrap}.devui-row-align-top{align-items:flex-start}.devui-row-align-middle{align-items:center}.devui-row-align-bottom{align-items:flex-end}.devui-row-justify-start{justify-content:flex-start}.devui-row-justify-center{justify-content:center}.devui-row-justify-end{justify-content:flex-end}.devui-row-justify-around{justify-content:space-around}.devui-row-justify-between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col-span-0,.devui-col-xs-span-0{display:none}.devui-col-offset-1{margin-left:4.1666666667%}.devui-col-pull-1{right:4.1666666667%}.devui-col-push-1{left:4.1666666667%}.devui-col-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xs-offset-1{margin-left:4.1666666667%}.devui-col-xs-pull-1{right:4.1666666667%}.devui-col-xs-push-1{left:4.1666666667%}.devui-col-xs-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-offset-2{margin-left:8.3333333333%}.devui-col-pull-2{right:8.3333333333%}.devui-col-push-2{left:8.3333333333%}.devui-col-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xs-offset-2{margin-left:8.3333333333%}.devui-col-xs-pull-2{right:8.3333333333%}.devui-col-xs-push-2{left:8.3333333333%}.devui-col-xs-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-offset-3{margin-left:12.5%}.devui-col-pull-3{right:12.5%}.devui-col-push-3{left:12.5%}.devui-col-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xs-offset-3{margin-left:12.5%}.devui-col-xs-pull-3{right:12.5%}.devui-col-xs-push-3{left:12.5%}.devui-col-xs-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-offset-4{margin-left:16.6666666667%}.devui-col-pull-4{right:16.6666666667%}.devui-col-push-4{left:16.6666666667%}.devui-col-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xs-offset-4{margin-left:16.6666666667%}.devui-col-xs-pull-4{right:16.6666666667%}.devui-col-xs-push-4{left:16.6666666667%}.devui-col-xs-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-offset-5{margin-left:20.8333333333%}.devui-col-pull-5{right:20.8333333333%}.devui-col-push-5{left:20.8333333333%}.devui-col-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xs-offset-5{margin-left:20.8333333333%}.devui-col-xs-pull-5{right:20.8333333333%}.devui-col-xs-push-5{left:20.8333333333%}.devui-col-xs-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-offset-6{margin-left:25%}.devui-col-pull-6{right:25%}.devui-col-push-6{left:25%}.devui-col-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xs-offset-6{margin-left:25%}.devui-col-xs-pull-6{right:25%}.devui-col-xs-push-6{left:25%}.devui-col-xs-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-offset-7{margin-left:29.1666666667%}.devui-col-pull-7{right:29.1666666667%}.devui-col-push-7{left:29.1666666667%}.devui-col-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xs-offset-7{margin-left:29.1666666667%}.devui-col-xs-pull-7{right:29.1666666667%}.devui-col-xs-push-7{left:29.1666666667%}.devui-col-xs-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-offset-8{margin-left:33.3333333333%}.devui-col-pull-8{right:33.3333333333%}.devui-col-push-8{left:33.3333333333%}.devui-col-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xs-offset-8{margin-left:33.3333333333%}.devui-col-xs-pull-8{right:33.3333333333%}.devui-col-xs-push-8{left:33.3333333333%}.devui-col-xs-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-offset-9{margin-left:37.5%}.devui-col-pull-9{right:37.5%}.devui-col-push-9{left:37.5%}.devui-col-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xs-offset-9{margin-left:37.5%}.devui-col-xs-pull-9{right:37.5%}.devui-col-xs-push-9{left:37.5%}.devui-col-xs-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-offset-10{margin-left:41.6666666667%}.devui-col-pull-10{right:41.6666666667%}.devui-col-push-10{left:41.6666666667%}.devui-col-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xs-offset-10{margin-left:41.6666666667%}.devui-col-xs-pull-10{right:41.6666666667%}.devui-col-xs-push-10{left:41.6666666667%}.devui-col-xs-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-offset-11{margin-left:45.8333333333%}.devui-col-pull-11{right:45.8333333333%}.devui-col-push-11{left:45.8333333333%}.devui-col-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xs-offset-11{margin-left:45.8333333333%}.devui-col-xs-pull-11{right:45.8333333333%}.devui-col-xs-push-11{left:45.8333333333%}.devui-col-xs-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-offset-12{margin-left:50%}.devui-col-pull-12{right:50%}.devui-col-push-12{left:50%}.devui-col-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xs-offset-12{margin-left:50%}.devui-col-xs-pull-12{right:50%}.devui-col-xs-push-12{left:50%}.devui-col-xs-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-offset-13{margin-left:54.1666666667%}.devui-col-pull-13{right:54.1666666667%}.devui-col-push-13{left:54.1666666667%}.devui-col-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xs-offset-13{margin-left:54.1666666667%}.devui-col-xs-pull-13{right:54.1666666667%}.devui-col-xs-push-13{left:54.1666666667%}.devui-col-xs-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-offset-14{margin-left:58.3333333333%}.devui-col-pull-14{right:58.3333333333%}.devui-col-push-14{left:58.3333333333%}.devui-col-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xs-offset-14{margin-left:58.3333333333%}.devui-col-xs-pull-14{right:58.3333333333%}.devui-col-xs-push-14{left:58.3333333333%}.devui-col-xs-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-offset-15{margin-left:62.5%}.devui-col-pull-15{right:62.5%}.devui-col-push-15{left:62.5%}.devui-col-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xs-offset-15{margin-left:62.5%}.devui-col-xs-pull-15{right:62.5%}.devui-col-xs-push-15{left:62.5%}.devui-col-xs-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-offset-16{margin-left:66.6666666667%}.devui-col-pull-16{right:66.6666666667%}.devui-col-push-16{left:66.6666666667%}.devui-col-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xs-offset-16{margin-left:66.6666666667%}.devui-col-xs-pull-16{right:66.6666666667%}.devui-col-xs-push-16{left:66.6666666667%}.devui-col-xs-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-offset-17{margin-left:70.8333333333%}.devui-col-pull-17{right:70.8333333333%}.devui-col-push-17{left:70.8333333333%}.devui-col-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xs-offset-17{margin-left:70.8333333333%}.devui-col-xs-pull-17{right:70.8333333333%}.devui-col-xs-push-17{left:70.8333333333%}.devui-col-xs-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-offset-18{margin-left:75%}.devui-col-pull-18{right:75%}.devui-col-push-18{left:75%}.devui-col-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xs-offset-18{margin-left:75%}.devui-col-xs-pull-18{right:75%}.devui-col-xs-push-18{left:75%}.devui-col-xs-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-offset-19{margin-left:79.1666666667%}.devui-col-pull-19{right:79.1666666667%}.devui-col-push-19{left:79.1666666667%}.devui-col-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xs-offset-19{margin-left:79.1666666667%}.devui-col-xs-pull-19{right:79.1666666667%}.devui-col-xs-push-19{left:79.1666666667%}.devui-col-xs-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-offset-20{margin-left:83.3333333333%}.devui-col-pull-20{right:83.3333333333%}.devui-col-push-20{left:83.3333333333%}.devui-col-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xs-offset-20{margin-left:83.3333333333%}.devui-col-xs-pull-20{right:83.3333333333%}.devui-col-xs-push-20{left:83.3333333333%}.devui-col-xs-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-offset-21{margin-left:87.5%}.devui-col-pull-21{right:87.5%}.devui-col-push-21{left:87.5%}.devui-col-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xs-offset-21{margin-left:87.5%}.devui-col-xs-pull-21{right:87.5%}.devui-col-xs-push-21{left:87.5%}.devui-col-xs-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-offset-22{margin-left:91.6666666667%}.devui-col-pull-22{right:91.6666666667%}.devui-col-push-22{left:91.6666666667%}.devui-col-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xs-offset-22{margin-left:91.6666666667%}.devui-col-xs-pull-22{right:91.6666666667%}.devui-col-xs-push-22{left:91.6666666667%}.devui-col-xs-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-offset-23{margin-left:95.8333333333%}.devui-col-pull-23{right:95.8333333333%}.devui-col-push-23{left:95.8333333333%}.devui-col-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xs-offset-23{margin-left:95.8333333333%}.devui-col-xs-pull-23{right:95.8333333333%}.devui-col-xs-push-23{left:95.8333333333%}.devui-col-xs-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-offset-24{margin-left:100%}.devui-col-pull-24{right:100%}.devui-col-push-24{left:100%}.devui-col-span-24{display:block;flex:0 0 100%;width:100%}.devui-col-xs-offset-24{margin-left:100%}.devui-col-xs-pull-24{right:100%}.devui-col-xs-push-24{left:100%}.devui-col-xs-span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col-sm-span-0{display:none}.devui-col-sm-offset-1{margin-left:4.1666666667%}.devui-col-sm-pull-1{right:4.1666666667%}.devui-col-sm-push-1{left:4.1666666667%}.devui-col-sm-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-sm-offset-2{margin-left:8.3333333333%}.devui-col-sm-pull-2{right:8.3333333333%}.devui-col-sm-push-2{left:8.3333333333%}.devui-col-sm-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-sm-offset-3{margin-left:12.5%}.devui-col-sm-pull-3{right:12.5%}.devui-col-sm-push-3{left:12.5%}.devui-col-sm-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-sm-offset-4{margin-left:16.6666666667%}.devui-col-sm-pull-4{right:16.6666666667%}.devui-col-sm-push-4{left:16.6666666667%}.devui-col-sm-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-sm-offset-5{margin-left:20.8333333333%}.devui-col-sm-pull-5{right:20.8333333333%}.devui-col-sm-push-5{left:20.8333333333%}.devui-col-sm-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-sm-offset-6{margin-left:25%}.devui-col-sm-pull-6{right:25%}.devui-col-sm-push-6{left:25%}.devui-col-sm-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-sm-offset-7{margin-left:29.1666666667%}.devui-col-sm-pull-7{right:29.1666666667%}.devui-col-sm-push-7{left:29.1666666667%}.devui-col-sm-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-sm-offset-8{margin-left:33.3333333333%}.devui-col-sm-pull-8{right:33.3333333333%}.devui-col-sm-push-8{left:33.3333333333%}.devui-col-sm-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-sm-offset-9{margin-left:37.5%}.devui-col-sm-pull-9{right:37.5%}.devui-col-sm-push-9{left:37.5%}.devui-col-sm-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-sm-offset-10{margin-left:41.6666666667%}.devui-col-sm-pull-10{right:41.6666666667%}.devui-col-sm-push-10{left:41.6666666667%}.devui-col-sm-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-sm-offset-11{margin-left:45.8333333333%}.devui-col-sm-pull-11{right:45.8333333333%}.devui-col-sm-push-11{left:45.8333333333%}.devui-col-sm-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-sm-offset-12{margin-left:50%}.devui-col-sm-pull-12{right:50%}.devui-col-sm-push-12{left:50%}.devui-col-sm-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-sm-offset-13{margin-left:54.1666666667%}.devui-col-sm-pull-13{right:54.1666666667%}.devui-col-sm-push-13{left:54.1666666667%}.devui-col-sm-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-sm-offset-14{margin-left:58.3333333333%}.devui-col-sm-pull-14{right:58.3333333333%}.devui-col-sm-push-14{left:58.3333333333%}.devui-col-sm-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-sm-offset-15{margin-left:62.5%}.devui-col-sm-pull-15{right:62.5%}.devui-col-sm-push-15{left:62.5%}.devui-col-sm-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-sm-offset-16{margin-left:66.6666666667%}.devui-col-sm-pull-16{right:66.6666666667%}.devui-col-sm-push-16{left:66.6666666667%}.devui-col-sm-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-sm-offset-17{margin-left:70.8333333333%}.devui-col-sm-pull-17{right:70.8333333333%}.devui-col-sm-push-17{left:70.8333333333%}.devui-col-sm-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-sm-offset-18{margin-left:75%}.devui-col-sm-pull-18{right:75%}.devui-col-sm-push-18{left:75%}.devui-col-sm-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-sm-offset-19{margin-left:79.1666666667%}.devui-col-sm-pull-19{right:79.1666666667%}.devui-col-sm-push-19{left:79.1666666667%}.devui-col-sm-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-sm-offset-20{margin-left:83.3333333333%}.devui-col-sm-pull-20{right:83.3333333333%}.devui-col-sm-push-20{left:83.3333333333%}.devui-col-sm-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-sm-offset-21{margin-left:87.5%}.devui-col-sm-pull-21{right:87.5%}.devui-col-sm-push-21{left:87.5%}.devui-col-sm-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-sm-offset-22{margin-left:91.6666666667%}.devui-col-sm-pull-22{right:91.6666666667%}.devui-col-sm-push-22{left:91.6666666667%}.devui-col-sm-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-sm-offset-23{margin-left:95.8333333333%}.devui-col-sm-pull-23{right:95.8333333333%}.devui-col-sm-push-23{left:95.8333333333%}.devui-col-sm-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-sm-offset-24{margin-left:100%}.devui-col-sm-pull-24{right:100%}.devui-col-sm-push-24{left:100%}.devui-col-sm-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col-md-span-0{display:none}.devui-col-md-offset-1{margin-left:4.1666666667%}.devui-col-md-pull-1{right:4.1666666667%}.devui-col-md-push-1{left:4.1666666667%}.devui-col-md-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-md-offset-2{margin-left:8.3333333333%}.devui-col-md-pull-2{right:8.3333333333%}.devui-col-md-push-2{left:8.3333333333%}.devui-col-md-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-md-offset-3{margin-left:12.5%}.devui-col-md-pull-3{right:12.5%}.devui-col-md-push-3{left:12.5%}.devui-col-md-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-md-offset-4{margin-left:16.6666666667%}.devui-col-md-pull-4{right:16.6666666667%}.devui-col-md-push-4{left:16.6666666667%}.devui-col-md-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-md-offset-5{margin-left:20.8333333333%}.devui-col-md-pull-5{right:20.8333333333%}.devui-col-md-push-5{left:20.8333333333%}.devui-col-md-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-md-offset-6{margin-left:25%}.devui-col-md-pull-6{right:25%}.devui-col-md-push-6{left:25%}.devui-col-md-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-md-offset-7{margin-left:29.1666666667%}.devui-col-md-pull-7{right:29.1666666667%}.devui-col-md-push-7{left:29.1666666667%}.devui-col-md-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-md-offset-8{margin-left:33.3333333333%}.devui-col-md-pull-8{right:33.3333333333%}.devui-col-md-push-8{left:33.3333333333%}.devui-col-md-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-md-offset-9{margin-left:37.5%}.devui-col-md-pull-9{right:37.5%}.devui-col-md-push-9{left:37.5%}.devui-col-md-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-md-offset-10{margin-left:41.6666666667%}.devui-col-md-pull-10{right:41.6666666667%}.devui-col-md-push-10{left:41.6666666667%}.devui-col-md-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-md-offset-11{margin-left:45.8333333333%}.devui-col-md-pull-11{right:45.8333333333%}.devui-col-md-push-11{left:45.8333333333%}.devui-col-md-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-md-offset-12{margin-left:50%}.devui-col-md-pull-12{right:50%}.devui-col-md-push-12{left:50%}.devui-col-md-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-md-offset-13{margin-left:54.1666666667%}.devui-col-md-pull-13{right:54.1666666667%}.devui-col-md-push-13{left:54.1666666667%}.devui-col-md-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-md-offset-14{margin-left:58.3333333333%}.devui-col-md-pull-14{right:58.3333333333%}.devui-col-md-push-14{left:58.3333333333%}.devui-col-md-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-md-offset-15{margin-left:62.5%}.devui-col-md-pull-15{right:62.5%}.devui-col-md-push-15{left:62.5%}.devui-col-md-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-md-offset-16{margin-left:66.6666666667%}.devui-col-md-pull-16{right:66.6666666667%}.devui-col-md-push-16{left:66.6666666667%}.devui-col-md-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-md-offset-17{margin-left:70.8333333333%}.devui-col-md-pull-17{right:70.8333333333%}.devui-col-md-push-17{left:70.8333333333%}.devui-col-md-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-md-offset-18{margin-left:75%}.devui-col-md-pull-18{right:75%}.devui-col-md-push-18{left:75%}.devui-col-md-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-md-offset-19{margin-left:79.1666666667%}.devui-col-md-pull-19{right:79.1666666667%}.devui-col-md-push-19{left:79.1666666667%}.devui-col-md-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-md-offset-20{margin-left:83.3333333333%}.devui-col-md-pull-20{right:83.3333333333%}.devui-col-md-push-20{left:83.3333333333%}.devui-col-md-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-md-offset-21{margin-left:87.5%}.devui-col-md-pull-21{right:87.5%}.devui-col-md-push-21{left:87.5%}.devui-col-md-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-md-offset-22{margin-left:91.6666666667%}.devui-col-md-pull-22{right:91.6666666667%}.devui-col-md-push-22{left:91.6666666667%}.devui-col-md-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-md-offset-23{margin-left:95.8333333333%}.devui-col-md-pull-23{right:95.8333333333%}.devui-col-md-push-23{left:95.8333333333%}.devui-col-md-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-md-offset-24{margin-left:100%}.devui-col-md-pull-24{right:100%}.devui-col-md-push-24{left:100%}.devui-col-md-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col-lg-span-0{display:none}.devui-col-lg-offset-1{margin-left:4.1666666667%}.devui-col-lg-pull-1{right:4.1666666667%}.devui-col-lg-push-1{left:4.1666666667%}.devui-col-lg-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-lg-offset-2{margin-left:8.3333333333%}.devui-col-lg-pull-2{right:8.3333333333%}.devui-col-lg-push-2{left:8.3333333333%}.devui-col-lg-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-lg-offset-3{margin-left:12.5%}.devui-col-lg-pull-3{right:12.5%}.devui-col-lg-push-3{left:12.5%}.devui-col-lg-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-lg-offset-4{margin-left:16.6666666667%}.devui-col-lg-pull-4{right:16.6666666667%}.devui-col-lg-push-4{left:16.6666666667%}.devui-col-lg-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-lg-offset-5{margin-left:20.8333333333%}.devui-col-lg-pull-5{right:20.8333333333%}.devui-col-lg-push-5{left:20.8333333333%}.devui-col-lg-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-lg-offset-6{margin-left:25%}.devui-col-lg-pull-6{right:25%}.devui-col-lg-push-6{left:25%}.devui-col-lg-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-lg-offset-7{margin-left:29.1666666667%}.devui-col-lg-pull-7{right:29.1666666667%}.devui-col-lg-push-7{left:29.1666666667%}.devui-col-lg-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-lg-offset-8{margin-left:33.3333333333%}.devui-col-lg-pull-8{right:33.3333333333%}.devui-col-lg-push-8{left:33.3333333333%}.devui-col-lg-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-lg-offset-9{margin-left:37.5%}.devui-col-lg-pull-9{right:37.5%}.devui-col-lg-push-9{left:37.5%}.devui-col-lg-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-lg-offset-10{margin-left:41.6666666667%}.devui-col-lg-pull-10{right:41.6666666667%}.devui-col-lg-push-10{left:41.6666666667%}.devui-col-lg-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-lg-offset-11{margin-left:45.8333333333%}.devui-col-lg-pull-11{right:45.8333333333%}.devui-col-lg-push-11{left:45.8333333333%}.devui-col-lg-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-lg-offset-12{margin-left:50%}.devui-col-lg-pull-12{right:50%}.devui-col-lg-push-12{left:50%}.devui-col-lg-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-lg-offset-13{margin-left:54.1666666667%}.devui-col-lg-pull-13{right:54.1666666667%}.devui-col-lg-push-13{left:54.1666666667%}.devui-col-lg-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-lg-offset-14{margin-left:58.3333333333%}.devui-col-lg-pull-14{right:58.3333333333%}.devui-col-lg-push-14{left:58.3333333333%}.devui-col-lg-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-lg-offset-15{margin-left:62.5%}.devui-col-lg-pull-15{right:62.5%}.devui-col-lg-push-15{left:62.5%}.devui-col-lg-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-lg-offset-16{margin-left:66.6666666667%}.devui-col-lg-pull-16{right:66.6666666667%}.devui-col-lg-push-16{left:66.6666666667%}.devui-col-lg-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-lg-offset-17{margin-left:70.8333333333%}.devui-col-lg-pull-17{right:70.8333333333%}.devui-col-lg-push-17{left:70.8333333333%}.devui-col-lg-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-lg-offset-18{margin-left:75%}.devui-col-lg-pull-18{right:75%}.devui-col-lg-push-18{left:75%}.devui-col-lg-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-lg-offset-19{margin-left:79.1666666667%}.devui-col-lg-pull-19{right:79.1666666667%}.devui-col-lg-push-19{left:79.1666666667%}.devui-col-lg-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-lg-offset-20{margin-left:83.3333333333%}.devui-col-lg-pull-20{right:83.3333333333%}.devui-col-lg-push-20{left:83.3333333333%}.devui-col-lg-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-lg-offset-21{margin-left:87.5%}.devui-col-lg-pull-21{right:87.5%}.devui-col-lg-push-21{left:87.5%}.devui-col-lg-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-lg-offset-22{margin-left:91.6666666667%}.devui-col-lg-pull-22{right:91.6666666667%}.devui-col-lg-push-22{left:91.6666666667%}.devui-col-lg-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-lg-offset-23{margin-left:95.8333333333%}.devui-col-lg-pull-23{right:95.8333333333%}.devui-col-lg-push-23{left:95.8333333333%}.devui-col-lg-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-lg-offset-24{margin-left:100%}.devui-col-lg-pull-24{right:100%}.devui-col-lg-push-24{left:100%}.devui-col-lg-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col-xl-span-0{display:none}.devui-col-xl-offset-1{margin-left:4.1666666667%}.devui-col-xl-pull-1{right:4.1666666667%}.devui-col-xl-push-1{left:4.1666666667%}.devui-col-xl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xl-offset-2{margin-left:8.3333333333%}.devui-col-xl-pull-2{right:8.3333333333%}.devui-col-xl-push-2{left:8.3333333333%}.devui-col-xl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xl-offset-3{margin-left:12.5%}.devui-col-xl-pull-3{right:12.5%}.devui-col-xl-push-3{left:12.5%}.devui-col-xl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xl-offset-4{margin-left:16.6666666667%}.devui-col-xl-pull-4{right:16.6666666667%}.devui-col-xl-push-4{left:16.6666666667%}.devui-col-xl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xl-offset-5{margin-left:20.8333333333%}.devui-col-xl-pull-5{right:20.8333333333%}.devui-col-xl-push-5{left:20.8333333333%}.devui-col-xl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xl-offset-6{margin-left:25%}.devui-col-xl-pull-6{right:25%}.devui-col-xl-push-6{left:25%}.devui-col-xl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xl-offset-7{margin-left:29.1666666667%}.devui-col-xl-pull-7{right:29.1666666667%}.devui-col-xl-push-7{left:29.1666666667%}.devui-col-xl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xl-offset-8{margin-left:33.3333333333%}.devui-col-xl-pull-8{right:33.3333333333%}.devui-col-xl-push-8{left:33.3333333333%}.devui-col-xl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xl-offset-9{margin-left:37.5%}.devui-col-xl-pull-9{right:37.5%}.devui-col-xl-push-9{left:37.5%}.devui-col-xl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xl-offset-10{margin-left:41.6666666667%}.devui-col-xl-pull-10{right:41.6666666667%}.devui-col-xl-push-10{left:41.6666666667%}.devui-col-xl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xl-offset-11{margin-left:45.8333333333%}.devui-col-xl-pull-11{right:45.8333333333%}.devui-col-xl-push-11{left:45.8333333333%}.devui-col-xl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xl-offset-12{margin-left:50%}.devui-col-xl-pull-12{right:50%}.devui-col-xl-push-12{left:50%}.devui-col-xl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xl-offset-13{margin-left:54.1666666667%}.devui-col-xl-pull-13{right:54.1666666667%}.devui-col-xl-push-13{left:54.1666666667%}.devui-col-xl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xl-offset-14{margin-left:58.3333333333%}.devui-col-xl-pull-14{right:58.3333333333%}.devui-col-xl-push-14{left:58.3333333333%}.devui-col-xl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xl-offset-15{margin-left:62.5%}.devui-col-xl-pull-15{right:62.5%}.devui-col-xl-push-15{left:62.5%}.devui-col-xl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xl-offset-16{margin-left:66.6666666667%}.devui-col-xl-pull-16{right:66.6666666667%}.devui-col-xl-push-16{left:66.6666666667%}.devui-col-xl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xl-offset-17{margin-left:70.8333333333%}.devui-col-xl-pull-17{right:70.8333333333%}.devui-col-xl-push-17{left:70.8333333333%}.devui-col-xl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xl-offset-18{margin-left:75%}.devui-col-xl-pull-18{right:75%}.devui-col-xl-push-18{left:75%}.devui-col-xl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xl-offset-19{margin-left:79.1666666667%}.devui-col-xl-pull-19{right:79.1666666667%}.devui-col-xl-push-19{left:79.1666666667%}.devui-col-xl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xl-offset-20{margin-left:83.3333333333%}.devui-col-xl-pull-20{right:83.3333333333%}.devui-col-xl-push-20{left:83.3333333333%}.devui-col-xl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xl-offset-21{margin-left:87.5%}.devui-col-xl-pull-21{right:87.5%}.devui-col-xl-push-21{left:87.5%}.devui-col-xl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xl-offset-22{margin-left:91.6666666667%}.devui-col-xl-pull-22{right:91.6666666667%}.devui-col-xl-push-22{left:91.6666666667%}.devui-col-xl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xl-offset-23{margin-left:95.8333333333%}.devui-col-xl-pull-23{right:95.8333333333%}.devui-col-xl-push-23{left:95.8333333333%}.devui-col-xl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xl-offset-24{margin-left:100%}.devui-col-xl-pull-24{right:100%}.devui-col-xl-push-24{left:100%}.devui-col-xl-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col-xxl-span-0{display:none}.devui-col-xxl-offset-1{margin-left:4.1666666667%}.devui-col-xxl-pull-1{right:4.1666666667%}.devui-col-xxl-push-1{left:4.1666666667%}.devui-col-xxl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xxl-offset-2{margin-left:8.3333333333%}.devui-col-xxl-pull-2{right:8.3333333333%}.devui-col-xxl-push-2{left:8.3333333333%}.devui-col-xxl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xxl-offset-3{margin-left:12.5%}.devui-col-xxl-pull-3{right:12.5%}.devui-col-xxl-push-3{left:12.5%}.devui-col-xxl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xxl-offset-4{margin-left:16.6666666667%}.devui-col-xxl-pull-4{right:16.6666666667%}.devui-col-xxl-push-4{left:16.6666666667%}.devui-col-xxl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xxl-offset-5{margin-left:20.8333333333%}.devui-col-xxl-pull-5{right:20.8333333333%}.devui-col-xxl-push-5{left:20.8333333333%}.devui-col-xxl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xxl-offset-6{margin-left:25%}.devui-col-xxl-pull-6{right:25%}.devui-col-xxl-push-6{left:25%}.devui-col-xxl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xxl-offset-7{margin-left:29.1666666667%}.devui-col-xxl-pull-7{right:29.1666666667%}.devui-col-xxl-push-7{left:29.1666666667%}.devui-col-xxl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xxl-offset-8{margin-left:33.3333333333%}.devui-col-xxl-pull-8{right:33.3333333333%}.devui-col-xxl-push-8{left:33.3333333333%}.devui-col-xxl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xxl-offset-9{margin-left:37.5%}.devui-col-xxl-pull-9{right:37.5%}.devui-col-xxl-push-9{left:37.5%}.devui-col-xxl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xxl-offset-10{margin-left:41.6666666667%}.devui-col-xxl-pull-10{right:41.6666666667%}.devui-col-xxl-push-10{left:41.6666666667%}.devui-col-xxl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xxl-offset-11{margin-left:45.8333333333%}.devui-col-xxl-pull-11{right:45.8333333333%}.devui-col-xxl-push-11{left:45.8333333333%}.devui-col-xxl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xxl-offset-12{margin-left:50%}.devui-col-xxl-pull-12{right:50%}.devui-col-xxl-push-12{left:50%}.devui-col-xxl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xxl-offset-13{margin-left:54.1666666667%}.devui-col-xxl-pull-13{right:54.1666666667%}.devui-col-xxl-push-13{left:54.1666666667%}.devui-col-xxl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xxl-offset-14{margin-left:58.3333333333%}.devui-col-xxl-pull-14{right:58.3333333333%}.devui-col-xxl-push-14{left:58.3333333333%}.devui-col-xxl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xxl-offset-15{margin-left:62.5%}.devui-col-xxl-pull-15{right:62.5%}.devui-col-xxl-push-15{left:62.5%}.devui-col-xxl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xxl-offset-16{margin-left:66.6666666667%}.devui-col-xxl-pull-16{right:66.6666666667%}.devui-col-xxl-push-16{left:66.6666666667%}.devui-col-xxl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xxl-offset-17{margin-left:70.8333333333%}.devui-col-xxl-pull-17{right:70.8333333333%}.devui-col-xxl-push-17{left:70.8333333333%}.devui-col-xxl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xxl-offset-18{margin-left:75%}.devui-col-xxl-pull-18{right:75%}.devui-col-xxl-push-18{left:75%}.devui-col-xxl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xxl-offset-19{margin-left:79.1666666667%}.devui-col-xxl-pull-19{right:79.1666666667%}.devui-col-xxl-push-19{left:79.1666666667%}.devui-col-xxl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xxl-offset-20{margin-left:83.3333333333%}.devui-col-xxl-pull-20{right:83.3333333333%}.devui-col-xxl-push-20{left:83.3333333333%}.devui-col-xxl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xxl-offset-21{margin-left:87.5%}.devui-col-xxl-pull-21{right:87.5%}.devui-col-xxl-push-21{left:87.5%}.devui-col-xxl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xxl-offset-22{margin-left:91.6666666667%}.devui-col-xxl-pull-22{right:91.6666666667%}.devui-col-xxl-push-22{left:91.6666666667%}.devui-col-xxl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xxl-offset-23{margin-left:95.8333333333%}.devui-col-xxl-pull-23{right:95.8333333333%}.devui-col-xxl-push-23{left:95.8333333333%}.devui-col-xxl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xxl-offset-24{margin-left:100%}.devui-col-xxl-pull-24{right:100%}.devui-col-xxl-push-24{left:100%}.devui-col-xxl-span-24{display:block;flex:0 0 100%;width:100%}}
+.devui-row{display:flex}.devui-row__wrap{flex-wrap:wrap}.devui-row__align--top{align-items:flex-start}.devui-row__align--middle{align-items:center}.devui-row__align--bottom{align-items:flex-end}.devui-row__justify--start{justify-content:flex-start}.devui-row__justify--center{justify-content:center}.devui-row__justify--end{justify-content:flex-end}.devui-row__justify--around{justify-content:space-around}.devui-row__justify--between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col__span--0,.devui-col__xs--span-0{display:none}.devui-col__offset--1{margin-left:4.1666666667%}.devui-col__pull--1{right:4.1666666667%}.devui-col__push--1{left:4.1666666667%}.devui-col__span--1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xs--offset-1{margin-left:4.1666666667%}.devui-col__xs--pull-1{right:4.1666666667%}.devui-col__xs--push-1{left:4.1666666667%}.devui-col__xs--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__offset--2{margin-left:8.3333333333%}.devui-col__pull--2{right:8.3333333333%}.devui-col__push--2{left:8.3333333333%}.devui-col__span--2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xs--offset-2{margin-left:8.3333333333%}.devui-col__xs--pull-2{right:8.3333333333%}.devui-col__xs--push-2{left:8.3333333333%}.devui-col__xs--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__offset--3{margin-left:12.5%}.devui-col__pull--3{right:12.5%}.devui-col__push--3{left:12.5%}.devui-col__span--3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xs--offset-3{margin-left:12.5%}.devui-col__xs--pull-3{right:12.5%}.devui-col__xs--push-3{left:12.5%}.devui-col__xs--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__offset--4{margin-left:16.6666666667%}.devui-col__pull--4{right:16.6666666667%}.devui-col__push--4{left:16.6666666667%}.devui-col__span--4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xs--offset-4{margin-left:16.6666666667%}.devui-col__xs--pull-4{right:16.6666666667%}.devui-col__xs--push-4{left:16.6666666667%}.devui-col__xs--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__offset--5{margin-left:20.8333333333%}.devui-col__pull--5{right:20.8333333333%}.devui-col__push--5{left:20.8333333333%}.devui-col__span--5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xs--offset-5{margin-left:20.8333333333%}.devui-col__xs--pull-5{right:20.8333333333%}.devui-col__xs--push-5{left:20.8333333333%}.devui-col__xs--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__offset--6{margin-left:25%}.devui-col__pull--6{right:25%}.devui-col__push--6{left:25%}.devui-col__span--6{display:block;flex:0 0 25%;width:25%}.devui-col__xs--offset-6{margin-left:25%}.devui-col__xs--pull-6{right:25%}.devui-col__xs--push-6{left:25%}.devui-col__xs--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__offset--7{margin-left:29.1666666667%}.devui-col__pull--7{right:29.1666666667%}.devui-col__push--7{left:29.1666666667%}.devui-col__span--7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xs--offset-7{margin-left:29.1666666667%}.devui-col__xs--pull-7{right:29.1666666667%}.devui-col__xs--push-7{left:29.1666666667%}.devui-col__xs--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__offset--8{margin-left:33.3333333333%}.devui-col__pull--8{right:33.3333333333%}.devui-col__push--8{left:33.3333333333%}.devui-col__span--8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xs--offset-8{margin-left:33.3333333333%}.devui-col__xs--pull-8{right:33.3333333333%}.devui-col__xs--push-8{left:33.3333333333%}.devui-col__xs--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__offset--9{margin-left:37.5%}.devui-col__pull--9{right:37.5%}.devui-col__push--9{left:37.5%}.devui-col__span--9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xs--offset-9{margin-left:37.5%}.devui-col__xs--pull-9{right:37.5%}.devui-col__xs--push-9{left:37.5%}.devui-col__xs--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__offset--10{margin-left:41.6666666667%}.devui-col__pull--10{right:41.6666666667%}.devui-col__push--10{left:41.6666666667%}.devui-col__span--10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xs--offset-10{margin-left:41.6666666667%}.devui-col__xs--pull-10{right:41.6666666667%}.devui-col__xs--push-10{left:41.6666666667%}.devui-col__xs--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__offset--11{margin-left:45.8333333333%}.devui-col__pull--11{right:45.8333333333%}.devui-col__push--11{left:45.8333333333%}.devui-col__span--11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xs--offset-11{margin-left:45.8333333333%}.devui-col__xs--pull-11{right:45.8333333333%}.devui-col__xs--push-11{left:45.8333333333%}.devui-col__xs--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__offset--12{margin-left:50%}.devui-col__pull--12{right:50%}.devui-col__push--12{left:50%}.devui-col__span--12{display:block;flex:0 0 50%;width:50%}.devui-col__xs--offset-12{margin-left:50%}.devui-col__xs--pull-12{right:50%}.devui-col__xs--push-12{left:50%}.devui-col__xs--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__offset--13{margin-left:54.1666666667%}.devui-col__pull--13{right:54.1666666667%}.devui-col__push--13{left:54.1666666667%}.devui-col__span--13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xs--offset-13{margin-left:54.1666666667%}.devui-col__xs--pull-13{right:54.1666666667%}.devui-col__xs--push-13{left:54.1666666667%}.devui-col__xs--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__offset--14{margin-left:58.3333333333%}.devui-col__pull--14{right:58.3333333333%}.devui-col__push--14{left:58.3333333333%}.devui-col__span--14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xs--offset-14{margin-left:58.3333333333%}.devui-col__xs--pull-14{right:58.3333333333%}.devui-col__xs--push-14{left:58.3333333333%}.devui-col__xs--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__offset--15{margin-left:62.5%}.devui-col__pull--15{right:62.5%}.devui-col__push--15{left:62.5%}.devui-col__span--15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xs--offset-15{margin-left:62.5%}.devui-col__xs--pull-15{right:62.5%}.devui-col__xs--push-15{left:62.5%}.devui-col__xs--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__offset--16{margin-left:66.6666666667%}.devui-col__pull--16{right:66.6666666667%}.devui-col__push--16{left:66.6666666667%}.devui-col__span--16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xs--offset-16{margin-left:66.6666666667%}.devui-col__xs--pull-16{right:66.6666666667%}.devui-col__xs--push-16{left:66.6666666667%}.devui-col__xs--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__offset--17{margin-left:70.8333333333%}.devui-col__pull--17{right:70.8333333333%}.devui-col__push--17{left:70.8333333333%}.devui-col__span--17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xs--offset-17{margin-left:70.8333333333%}.devui-col__xs--pull-17{right:70.8333333333%}.devui-col__xs--push-17{left:70.8333333333%}.devui-col__xs--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__offset--18{margin-left:75%}.devui-col__pull--18{right:75%}.devui-col__push--18{left:75%}.devui-col__span--18{display:block;flex:0 0 75%;width:75%}.devui-col__xs--offset-18{margin-left:75%}.devui-col__xs--pull-18{right:75%}.devui-col__xs--push-18{left:75%}.devui-col__xs--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__offset--19{margin-left:79.1666666667%}.devui-col__pull--19{right:79.1666666667%}.devui-col__push--19{left:79.1666666667%}.devui-col__span--19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xs--offset-19{margin-left:79.1666666667%}.devui-col__xs--pull-19{right:79.1666666667%}.devui-col__xs--push-19{left:79.1666666667%}.devui-col__xs--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__offset--20{margin-left:83.3333333333%}.devui-col__pull--20{right:83.3333333333%}.devui-col__push--20{left:83.3333333333%}.devui-col__span--20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xs--offset-20{margin-left:83.3333333333%}.devui-col__xs--pull-20{right:83.3333333333%}.devui-col__xs--push-20{left:83.3333333333%}.devui-col__xs--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__offset--21{margin-left:87.5%}.devui-col__pull--21{right:87.5%}.devui-col__push--21{left:87.5%}.devui-col__span--21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xs--offset-21{margin-left:87.5%}.devui-col__xs--pull-21{right:87.5%}.devui-col__xs--push-21{left:87.5%}.devui-col__xs--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__offset--22{margin-left:91.6666666667%}.devui-col__pull--22{right:91.6666666667%}.devui-col__push--22{left:91.6666666667%}.devui-col__span--22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xs--offset-22{margin-left:91.6666666667%}.devui-col__xs--pull-22{right:91.6666666667%}.devui-col__xs--push-22{left:91.6666666667%}.devui-col__xs--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__offset--23{margin-left:95.8333333333%}.devui-col__pull--23{right:95.8333333333%}.devui-col__push--23{left:95.8333333333%}.devui-col__span--23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xs--offset-23{margin-left:95.8333333333%}.devui-col__xs--pull-23{right:95.8333333333%}.devui-col__xs--push-23{left:95.8333333333%}.devui-col__xs--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__offset--24{margin-left:100%}.devui-col__pull--24{right:100%}.devui-col__push--24{left:100%}.devui-col__span--24{display:block;flex:0 0 100%;width:100%}.devui-col__xs--offset-24{margin-left:100%}.devui-col__xs--pull-24{right:100%}.devui-col__xs--push-24{left:100%}.devui-col__xs--span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col__sm--span-0{display:none}.devui-col__sm--offset-1{margin-left:4.1666666667%}.devui-col__sm--pull-1{right:4.1666666667%}.devui-col__sm--push-1{left:4.1666666667%}.devui-col__sm--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__sm--offset-2{margin-left:8.3333333333%}.devui-col__sm--pull-2{right:8.3333333333%}.devui-col__sm--push-2{left:8.3333333333%}.devui-col__sm--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__sm--offset-3{margin-left:12.5%}.devui-col__sm--pull-3{right:12.5%}.devui-col__sm--push-3{left:12.5%}.devui-col__sm--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__sm--offset-4{margin-left:16.6666666667%}.devui-col__sm--pull-4{right:16.6666666667%}.devui-col__sm--push-4{left:16.6666666667%}.devui-col__sm--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__sm--offset-5{margin-left:20.8333333333%}.devui-col__sm--pull-5{right:20.8333333333%}.devui-col__sm--push-5{left:20.8333333333%}.devui-col__sm--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__sm--offset-6{margin-left:25%}.devui-col__sm--pull-6{right:25%}.devui-col__sm--push-6{left:25%}.devui-col__sm--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__sm--offset-7{margin-left:29.1666666667%}.devui-col__sm--pull-7{right:29.1666666667%}.devui-col__sm--push-7{left:29.1666666667%}.devui-col__sm--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__sm--offset-8{margin-left:33.3333333333%}.devui-col__sm--pull-8{right:33.3333333333%}.devui-col__sm--push-8{left:33.3333333333%}.devui-col__sm--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__sm--offset-9{margin-left:37.5%}.devui-col__sm--pull-9{right:37.5%}.devui-col__sm--push-9{left:37.5%}.devui-col__sm--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__sm--offset-10{margin-left:41.6666666667%}.devui-col__sm--pull-10{right:41.6666666667%}.devui-col__sm--push-10{left:41.6666666667%}.devui-col__sm--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__sm--offset-11{margin-left:45.8333333333%}.devui-col__sm--pull-11{right:45.8333333333%}.devui-col__sm--push-11{left:45.8333333333%}.devui-col__sm--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__sm--offset-12{margin-left:50%}.devui-col__sm--pull-12{right:50%}.devui-col__sm--push-12{left:50%}.devui-col__sm--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__sm--offset-13{margin-left:54.1666666667%}.devui-col__sm--pull-13{right:54.1666666667%}.devui-col__sm--push-13{left:54.1666666667%}.devui-col__sm--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__sm--offset-14{margin-left:58.3333333333%}.devui-col__sm--pull-14{right:58.3333333333%}.devui-col__sm--push-14{left:58.3333333333%}.devui-col__sm--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__sm--offset-15{margin-left:62.5%}.devui-col__sm--pull-15{right:62.5%}.devui-col__sm--push-15{left:62.5%}.devui-col__sm--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__sm--offset-16{margin-left:66.6666666667%}.devui-col__sm--pull-16{right:66.6666666667%}.devui-col__sm--push-16{left:66.6666666667%}.devui-col__sm--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__sm--offset-17{margin-left:70.8333333333%}.devui-col__sm--pull-17{right:70.8333333333%}.devui-col__sm--push-17{left:70.8333333333%}.devui-col__sm--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__sm--offset-18{margin-left:75%}.devui-col__sm--pull-18{right:75%}.devui-col__sm--push-18{left:75%}.devui-col__sm--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__sm--offset-19{margin-left:79.1666666667%}.devui-col__sm--pull-19{right:79.1666666667%}.devui-col__sm--push-19{left:79.1666666667%}.devui-col__sm--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__sm--offset-20{margin-left:83.3333333333%}.devui-col__sm--pull-20{right:83.3333333333%}.devui-col__sm--push-20{left:83.3333333333%}.devui-col__sm--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__sm--offset-21{margin-left:87.5%}.devui-col__sm--pull-21{right:87.5%}.devui-col__sm--push-21{left:87.5%}.devui-col__sm--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__sm--offset-22{margin-left:91.6666666667%}.devui-col__sm--pull-22{right:91.6666666667%}.devui-col__sm--push-22{left:91.6666666667%}.devui-col__sm--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__sm--offset-23{margin-left:95.8333333333%}.devui-col__sm--pull-23{right:95.8333333333%}.devui-col__sm--push-23{left:95.8333333333%}.devui-col__sm--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__sm--offset-24{margin-left:100%}.devui-col__sm--pull-24{right:100%}.devui-col__sm--push-24{left:100%}.devui-col__sm--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col__md--span-0{display:none}.devui-col__md--offset-1{margin-left:4.1666666667%}.devui-col__md--pull-1{right:4.1666666667%}.devui-col__md--push-1{left:4.1666666667%}.devui-col__md--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__md--offset-2{margin-left:8.3333333333%}.devui-col__md--pull-2{right:8.3333333333%}.devui-col__md--push-2{left:8.3333333333%}.devui-col__md--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__md--offset-3{margin-left:12.5%}.devui-col__md--pull-3{right:12.5%}.devui-col__md--push-3{left:12.5%}.devui-col__md--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__md--offset-4{margin-left:16.6666666667%}.devui-col__md--pull-4{right:16.6666666667%}.devui-col__md--push-4{left:16.6666666667%}.devui-col__md--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__md--offset-5{margin-left:20.8333333333%}.devui-col__md--pull-5{right:20.8333333333%}.devui-col__md--push-5{left:20.8333333333%}.devui-col__md--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__md--offset-6{margin-left:25%}.devui-col__md--pull-6{right:25%}.devui-col__md--push-6{left:25%}.devui-col__md--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__md--offset-7{margin-left:29.1666666667%}.devui-col__md--pull-7{right:29.1666666667%}.devui-col__md--push-7{left:29.1666666667%}.devui-col__md--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__md--offset-8{margin-left:33.3333333333%}.devui-col__md--pull-8{right:33.3333333333%}.devui-col__md--push-8{left:33.3333333333%}.devui-col__md--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__md--offset-9{margin-left:37.5%}.devui-col__md--pull-9{right:37.5%}.devui-col__md--push-9{left:37.5%}.devui-col__md--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__md--offset-10{margin-left:41.6666666667%}.devui-col__md--pull-10{right:41.6666666667%}.devui-col__md--push-10{left:41.6666666667%}.devui-col__md--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__md--offset-11{margin-left:45.8333333333%}.devui-col__md--pull-11{right:45.8333333333%}.devui-col__md--push-11{left:45.8333333333%}.devui-col__md--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__md--offset-12{margin-left:50%}.devui-col__md--pull-12{right:50%}.devui-col__md--push-12{left:50%}.devui-col__md--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__md--offset-13{margin-left:54.1666666667%}.devui-col__md--pull-13{right:54.1666666667%}.devui-col__md--push-13{left:54.1666666667%}.devui-col__md--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__md--offset-14{margin-left:58.3333333333%}.devui-col__md--pull-14{right:58.3333333333%}.devui-col__md--push-14{left:58.3333333333%}.devui-col__md--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__md--offset-15{margin-left:62.5%}.devui-col__md--pull-15{right:62.5%}.devui-col__md--push-15{left:62.5%}.devui-col__md--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__md--offset-16{margin-left:66.6666666667%}.devui-col__md--pull-16{right:66.6666666667%}.devui-col__md--push-16{left:66.6666666667%}.devui-col__md--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__md--offset-17{margin-left:70.8333333333%}.devui-col__md--pull-17{right:70.8333333333%}.devui-col__md--push-17{left:70.8333333333%}.devui-col__md--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__md--offset-18{margin-left:75%}.devui-col__md--pull-18{right:75%}.devui-col__md--push-18{left:75%}.devui-col__md--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__md--offset-19{margin-left:79.1666666667%}.devui-col__md--pull-19{right:79.1666666667%}.devui-col__md--push-19{left:79.1666666667%}.devui-col__md--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__md--offset-20{margin-left:83.3333333333%}.devui-col__md--pull-20{right:83.3333333333%}.devui-col__md--push-20{left:83.3333333333%}.devui-col__md--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__md--offset-21{margin-left:87.5%}.devui-col__md--pull-21{right:87.5%}.devui-col__md--push-21{left:87.5%}.devui-col__md--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__md--offset-22{margin-left:91.6666666667%}.devui-col__md--pull-22{right:91.6666666667%}.devui-col__md--push-22{left:91.6666666667%}.devui-col__md--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__md--offset-23{margin-left:95.8333333333%}.devui-col__md--pull-23{right:95.8333333333%}.devui-col__md--push-23{left:95.8333333333%}.devui-col__md--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__md--offset-24{margin-left:100%}.devui-col__md--pull-24{right:100%}.devui-col__md--push-24{left:100%}.devui-col__md--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col__lg--span-0{display:none}.devui-col__lg--offset-1{margin-left:4.1666666667%}.devui-col__lg--pull-1{right:4.1666666667%}.devui-col__lg--push-1{left:4.1666666667%}.devui-col__lg--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__lg--offset-2{margin-left:8.3333333333%}.devui-col__lg--pull-2{right:8.3333333333%}.devui-col__lg--push-2{left:8.3333333333%}.devui-col__lg--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__lg--offset-3{margin-left:12.5%}.devui-col__lg--pull-3{right:12.5%}.devui-col__lg--push-3{left:12.5%}.devui-col__lg--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__lg--offset-4{margin-left:16.6666666667%}.devui-col__lg--pull-4{right:16.6666666667%}.devui-col__lg--push-4{left:16.6666666667%}.devui-col__lg--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__lg--offset-5{margin-left:20.8333333333%}.devui-col__lg--pull-5{right:20.8333333333%}.devui-col__lg--push-5{left:20.8333333333%}.devui-col__lg--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__lg--offset-6{margin-left:25%}.devui-col__lg--pull-6{right:25%}.devui-col__lg--push-6{left:25%}.devui-col__lg--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__lg--offset-7{margin-left:29.1666666667%}.devui-col__lg--pull-7{right:29.1666666667%}.devui-col__lg--push-7{left:29.1666666667%}.devui-col__lg--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__lg--offset-8{margin-left:33.3333333333%}.devui-col__lg--pull-8{right:33.3333333333%}.devui-col__lg--push-8{left:33.3333333333%}.devui-col__lg--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__lg--offset-9{margin-left:37.5%}.devui-col__lg--pull-9{right:37.5%}.devui-col__lg--push-9{left:37.5%}.devui-col__lg--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__lg--offset-10{margin-left:41.6666666667%}.devui-col__lg--pull-10{right:41.6666666667%}.devui-col__lg--push-10{left:41.6666666667%}.devui-col__lg--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__lg--offset-11{margin-left:45.8333333333%}.devui-col__lg--pull-11{right:45.8333333333%}.devui-col__lg--push-11{left:45.8333333333%}.devui-col__lg--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__lg--offset-12{margin-left:50%}.devui-col__lg--pull-12{right:50%}.devui-col__lg--push-12{left:50%}.devui-col__lg--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__lg--offset-13{margin-left:54.1666666667%}.devui-col__lg--pull-13{right:54.1666666667%}.devui-col__lg--push-13{left:54.1666666667%}.devui-col__lg--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__lg--offset-14{margin-left:58.3333333333%}.devui-col__lg--pull-14{right:58.3333333333%}.devui-col__lg--push-14{left:58.3333333333%}.devui-col__lg--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__lg--offset-15{margin-left:62.5%}.devui-col__lg--pull-15{right:62.5%}.devui-col__lg--push-15{left:62.5%}.devui-col__lg--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__lg--offset-16{margin-left:66.6666666667%}.devui-col__lg--pull-16{right:66.6666666667%}.devui-col__lg--push-16{left:66.6666666667%}.devui-col__lg--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__lg--offset-17{margin-left:70.8333333333%}.devui-col__lg--pull-17{right:70.8333333333%}.devui-col__lg--push-17{left:70.8333333333%}.devui-col__lg--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__lg--offset-18{margin-left:75%}.devui-col__lg--pull-18{right:75%}.devui-col__lg--push-18{left:75%}.devui-col__lg--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__lg--offset-19{margin-left:79.1666666667%}.devui-col__lg--pull-19{right:79.1666666667%}.devui-col__lg--push-19{left:79.1666666667%}.devui-col__lg--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__lg--offset-20{margin-left:83.3333333333%}.devui-col__lg--pull-20{right:83.3333333333%}.devui-col__lg--push-20{left:83.3333333333%}.devui-col__lg--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__lg--offset-21{margin-left:87.5%}.devui-col__lg--pull-21{right:87.5%}.devui-col__lg--push-21{left:87.5%}.devui-col__lg--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__lg--offset-22{margin-left:91.6666666667%}.devui-col__lg--pull-22{right:91.6666666667%}.devui-col__lg--push-22{left:91.6666666667%}.devui-col__lg--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__lg--offset-23{margin-left:95.8333333333%}.devui-col__lg--pull-23{right:95.8333333333%}.devui-col__lg--push-23{left:95.8333333333%}.devui-col__lg--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__lg--offset-24{margin-left:100%}.devui-col__lg--pull-24{right:100%}.devui-col__lg--push-24{left:100%}.devui-col__lg--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col__xl--span-0{display:none}.devui-col__xl--offset-1{margin-left:4.1666666667%}.devui-col__xl--pull-1{right:4.1666666667%}.devui-col__xl--push-1{left:4.1666666667%}.devui-col__xl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xl--offset-2{margin-left:8.3333333333%}.devui-col__xl--pull-2{right:8.3333333333%}.devui-col__xl--push-2{left:8.3333333333%}.devui-col__xl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xl--offset-3{margin-left:12.5%}.devui-col__xl--pull-3{right:12.5%}.devui-col__xl--push-3{left:12.5%}.devui-col__xl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xl--offset-4{margin-left:16.6666666667%}.devui-col__xl--pull-4{right:16.6666666667%}.devui-col__xl--push-4{left:16.6666666667%}.devui-col__xl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xl--offset-5{margin-left:20.8333333333%}.devui-col__xl--pull-5{right:20.8333333333%}.devui-col__xl--push-5{left:20.8333333333%}.devui-col__xl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xl--offset-6{margin-left:25%}.devui-col__xl--pull-6{right:25%}.devui-col__xl--push-6{left:25%}.devui-col__xl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xl--offset-7{margin-left:29.1666666667%}.devui-col__xl--pull-7{right:29.1666666667%}.devui-col__xl--push-7{left:29.1666666667%}.devui-col__xl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xl--offset-8{margin-left:33.3333333333%}.devui-col__xl--pull-8{right:33.3333333333%}.devui-col__xl--push-8{left:33.3333333333%}.devui-col__xl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xl--offset-9{margin-left:37.5%}.devui-col__xl--pull-9{right:37.5%}.devui-col__xl--push-9{left:37.5%}.devui-col__xl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xl--offset-10{margin-left:41.6666666667%}.devui-col__xl--pull-10{right:41.6666666667%}.devui-col__xl--push-10{left:41.6666666667%}.devui-col__xl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xl--offset-11{margin-left:45.8333333333%}.devui-col__xl--pull-11{right:45.8333333333%}.devui-col__xl--push-11{left:45.8333333333%}.devui-col__xl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xl--offset-12{margin-left:50%}.devui-col__xl--pull-12{right:50%}.devui-col__xl--push-12{left:50%}.devui-col__xl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xl--offset-13{margin-left:54.1666666667%}.devui-col__xl--pull-13{right:54.1666666667%}.devui-col__xl--push-13{left:54.1666666667%}.devui-col__xl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xl--offset-14{margin-left:58.3333333333%}.devui-col__xl--pull-14{right:58.3333333333%}.devui-col__xl--push-14{left:58.3333333333%}.devui-col__xl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xl--offset-15{margin-left:62.5%}.devui-col__xl--pull-15{right:62.5%}.devui-col__xl--push-15{left:62.5%}.devui-col__xl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xl--offset-16{margin-left:66.6666666667%}.devui-col__xl--pull-16{right:66.6666666667%}.devui-col__xl--push-16{left:66.6666666667%}.devui-col__xl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xl--offset-17{margin-left:70.8333333333%}.devui-col__xl--pull-17{right:70.8333333333%}.devui-col__xl--push-17{left:70.8333333333%}.devui-col__xl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xl--offset-18{margin-left:75%}.devui-col__xl--pull-18{right:75%}.devui-col__xl--push-18{left:75%}.devui-col__xl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xl--offset-19{margin-left:79.1666666667%}.devui-col__xl--pull-19{right:79.1666666667%}.devui-col__xl--push-19{left:79.1666666667%}.devui-col__xl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xl--offset-20{margin-left:83.3333333333%}.devui-col__xl--pull-20{right:83.3333333333%}.devui-col__xl--push-20{left:83.3333333333%}.devui-col__xl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xl--offset-21{margin-left:87.5%}.devui-col__xl--pull-21{right:87.5%}.devui-col__xl--push-21{left:87.5%}.devui-col__xl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xl--offset-22{margin-left:91.6666666667%}.devui-col__xl--pull-22{right:91.6666666667%}.devui-col__xl--push-22{left:91.6666666667%}.devui-col__xl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xl--offset-23{margin-left:95.8333333333%}.devui-col__xl--pull-23{right:95.8333333333%}.devui-col__xl--push-23{left:95.8333333333%}.devui-col__xl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xl--offset-24{margin-left:100%}.devui-col__xl--pull-24{right:100%}.devui-col__xl--push-24{left:100%}.devui-col__xl--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col__xxl--span-0{display:none}.devui-col__xxl--offset-1{margin-left:4.1666666667%}.devui-col__xxl--pull-1{right:4.1666666667%}.devui-col__xxl--push-1{left:4.1666666667%}.devui-col__xxl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xxl--offset-2{margin-left:8.3333333333%}.devui-col__xxl--pull-2{right:8.3333333333%}.devui-col__xxl--push-2{left:8.3333333333%}.devui-col__xxl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xxl--offset-3{margin-left:12.5%}.devui-col__xxl--pull-3{right:12.5%}.devui-col__xxl--push-3{left:12.5%}.devui-col__xxl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xxl--offset-4{margin-left:16.6666666667%}.devui-col__xxl--pull-4{right:16.6666666667%}.devui-col__xxl--push-4{left:16.6666666667%}.devui-col__xxl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xxl--offset-5{margin-left:20.8333333333%}.devui-col__xxl--pull-5{right:20.8333333333%}.devui-col__xxl--push-5{left:20.8333333333%}.devui-col__xxl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xxl--offset-6{margin-left:25%}.devui-col__xxl--pull-6{right:25%}.devui-col__xxl--push-6{left:25%}.devui-col__xxl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xxl--offset-7{margin-left:29.1666666667%}.devui-col__xxl--pull-7{right:29.1666666667%}.devui-col__xxl--push-7{left:29.1666666667%}.devui-col__xxl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xxl--offset-8{margin-left:33.3333333333%}.devui-col__xxl--pull-8{right:33.3333333333%}.devui-col__xxl--push-8{left:33.3333333333%}.devui-col__xxl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xxl--offset-9{margin-left:37.5%}.devui-col__xxl--pull-9{right:37.5%}.devui-col__xxl--push-9{left:37.5%}.devui-col__xxl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xxl--offset-10{margin-left:41.6666666667%}.devui-col__xxl--pull-10{right:41.6666666667%}.devui-col__xxl--push-10{left:41.6666666667%}.devui-col__xxl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xxl--offset-11{margin-left:45.8333333333%}.devui-col__xxl--pull-11{right:45.8333333333%}.devui-col__xxl--push-11{left:45.8333333333%}.devui-col__xxl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xxl--offset-12{margin-left:50%}.devui-col__xxl--pull-12{right:50%}.devui-col__xxl--push-12{left:50%}.devui-col__xxl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xxl--offset-13{margin-left:54.1666666667%}.devui-col__xxl--pull-13{right:54.1666666667%}.devui-col__xxl--push-13{left:54.1666666667%}.devui-col__xxl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xxl--offset-14{margin-left:58.3333333333%}.devui-col__xxl--pull-14{right:58.3333333333%}.devui-col__xxl--push-14{left:58.3333333333%}.devui-col__xxl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xxl--offset-15{margin-left:62.5%}.devui-col__xxl--pull-15{right:62.5%}.devui-col__xxl--push-15{left:62.5%}.devui-col__xxl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xxl--offset-16{margin-left:66.6666666667%}.devui-col__xxl--pull-16{right:66.6666666667%}.devui-col__xxl--push-16{left:66.6666666667%}.devui-col__xxl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xxl--offset-17{margin-left:70.8333333333%}.devui-col__xxl--pull-17{right:70.8333333333%}.devui-col__xxl--push-17{left:70.8333333333%}.devui-col__xxl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xxl--offset-18{margin-left:75%}.devui-col__xxl--pull-18{right:75%}.devui-col__xxl--push-18{left:75%}.devui-col__xxl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xxl--offset-19{margin-left:79.1666666667%}.devui-col__xxl--pull-19{right:79.1666666667%}.devui-col__xxl--push-19{left:79.1666666667%}.devui-col__xxl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xxl--offset-20{margin-left:83.3333333333%}.devui-col__xxl--pull-20{right:83.3333333333%}.devui-col__xxl--push-20{left:83.3333333333%}.devui-col__xxl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xxl--offset-21{margin-left:87.5%}.devui-col__xxl--pull-21{right:87.5%}.devui-col__xxl--push-21{left:87.5%}.devui-col__xxl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xxl--offset-22{margin-left:91.6666666667%}.devui-col__xxl--pull-22{right:91.6666666667%}.devui-col__xxl--push-22{left:91.6666666667%}.devui-col__xxl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xxl--offset-23{margin-left:95.8333333333%}.devui-col__xxl--pull-23{right:95.8333333333%}.devui-col__xxl--push-23{left:95.8333333333%}.devui-col__xxl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xxl--offset-24{margin-left:100%}.devui-col__xxl--pull-24{right:100%}.devui-col__xxl--push-24{left:100%}.devui-col__xxl--span-24{display:block;flex:0 0 100%;width:100%}}

package/icon/index.es.js

@@ -1,75 +1,218 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps } from "vue";
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
 };
-import { defineComponent, createVNode } from "vue";
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  setup(props) {
-    return __spreadValues({}, props);
+  color: {
+    type: String,
+    default: "inherit"
   },
-  render() {
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
     const {
       name,
-      size,
       color,
-      classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        width: size,
-        verticalAlign: "text-bottom"
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
       }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        fontSize: size,
-        color
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
       }
-    }, null);
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var iconGroup = "";
+var IconGroup = defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var index = {
   title: "Icon \u56FE\u6807",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Icon);
+    app.component(Icon.name, Icon);
+    app.component(IconGroup.name, IconGroup);
   }
 };
-export { Icon, index as default };
+export { Icon, IconGroup, index as default, iconProps, svgIconProps };

package/icon/index.umd.js

@@ -1 +1 @@
-var a=Object.defineProperty;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var u=(t,e,n)=>e in t?a(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,l=(t,e)=>{for(var n in e||(e={}))f.call(e,n)&&u(t,n,e[n]);if(s)for(var n of s(e))p.call(e,n)&&u(t,n,e[n]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";var n=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(i){return l({},i)},render(){const{name:i,size:o,color:c,classPrefix:r}=this;return/^((https?):)?\/\//.test(i)?e.createVNode("img",{src:i,alt:i.split("/")[i.split("/").length-1],style:{width:o,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${r} ${r}-${i}`,style:{fontSize:o,color:c}},null)}});n.install=function(i){i.component(n.name,n)};var d={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(i){i.use(n)}};t.Icon=n,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(i,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis!="undefined"?globalThis:i||self,n(i.index={},i.Vue))})(this,function(i,n){"use strict";const I={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},b={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function m(s,l,o){let t=s;return l&&(t+=`__${l}`),o&&(t+=`--${o}`),t}function d(s,l=!1){const o=l?`.devui-${s}`:`devui-${s}`;return{b:()=>m(o),e:e=>e?m(o,e):"",m:e=>e?m(o,"",e):"",em:(e,a)=>e&&a?m(o,e,a):""}}var V="",h=n.defineComponent({name:"DSvgIcon",props:b,setup(s){const{name:l,color:o,size:t}=n.toRefs(s),c=d("svg-icon"),r=n.computed(()=>`#icon-${l.value}`),u=n.computed(()=>typeof t.value=="number"?`${t.value}px`:t.value),e={width:u.value,height:u.value};return()=>n.createVNode("svg",{class:c.b(),style:e},[n.createVNode("use",{"xlink:href":r.value,fill:o.value},null)])}});function D(s){return/^((http|https):)?\/\//.test(s)}function S(s,l){const{component:o,name:t,size:c,color:r,classPrefix:u,rotate:e}=n.toRefs(s),a=d("icon"),p=n.computed(()=>typeof c.value=="number"?`${c.value}px`:c.value),f=o.value?n.resolveDynamicComponent(o.value):n.resolveDynamicComponent(h),v=()=>n.createVNode("img",n.mergeProps({src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{width:p.value||"",transform:`rotate(${e==null?void 0:e.value}deg)`,verticalAlign:"middle"}},l.attrs),null),P=()=>n.createVNode(f,n.mergeProps({name:t.value,color:r.value,size:p.value,class:[(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null),$=()=>{const C=/^icon-/.test(t.value)?t.value:`${u.value}-${t.value}`;return n.createVNode("i",n.mergeProps({class:[u.value,C,(e==null?void 0:e.value)==="infinite"&&a.m("spin")],style:{fontSize:p.value,color:r.value,transform:`rotate(${e==null?void 0:e.value}deg)`}},l.attrs),null)};return{iconDom:()=>o.value?P():D(t.value)?v():$()}}var g=n.defineComponent({name:"DIcon",props:I,emits:["click"],setup(s,l){const{disabled:o,operable:t}=n.toRefs(s),{iconDom:c}=S(s,l),r=d("icon"),u=n.computed(()=>({[r.e("container")]:!0,[r.m("disabled")]:o.value,[r.m("operable")]:t.value})),e=a=>{o.value||l.emit("click",a)};return()=>{var a,p,f,v;return n.createVNode("div",{class:u.value,onClick:e},[(p=(a=l.slots).prefix)==null?void 0:p.call(a),c(),(v=(f=l.slots).suffix)==null?void 0:v.call(f)])}}}),_="",y=n.defineComponent({name:"DIconGroup",setup(s,l){const o=d("icon-group");return()=>{var t,c;return n.createVNode("div",{class:o.b()},[(c=(t=l.slots).default)==null?void 0:c.call(t)])}}}),N={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(s){s.component(g.name,g),s.component(y.name,y)}};i.Icon=g,i.IconGroup=y,i.default=N,i.iconProps=I,i.svgIconProps=b,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/icon/style.css

@@ -0,0 +1 @@
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}