@koi-design/uxd-ui 12.1.36-beta.0

package/styles/components/form/index.less

@@ -0,0 +1,250 @@
+@import '../../var.less';
+@import '../../mixins/index.less';
+@import './mixin.less';
+@import './var.less';
+
+@form-prefix-cls: ~'@{css-prefix}-form';
+
+.@{form-prefix-cls} {
+  .reset-form;
+  .reset-component;
+
+  &-item {
+    .reset-component;
+
+    display: flex;
+    margin-bottom: var(--form-item-margin-bottom);
+    align-items: flex-start;
+
+    label {
+      position: relative;
+
+      >.@{iconfont-css-prefix} {
+        font-size: var(--icon-font-size);
+      }
+    }
+
+    &-label {
+      overflow: hidden;
+      line-height: var(--form-item-line-height);
+      white-space: nowrap;
+      text-align: right;
+      justify-content: flex-end;
+
+      &-wrap {
+        >label {
+          display: block;
+          white-space: break-spaces;
+          line-height: var(--form-item-label-wrap-line-height);
+        }
+      }
+
+      &-left {
+        text-align: left;
+        justify-content: flex-start;
+      }
+
+      >label {
+        color: var(--form-item-label-color);
+        position: relative;
+        margin-right: var(--form-item-label-margin-right);
+
+        &::after {
+          content: ' ';
+        }
+      }
+
+      &-colon {
+        &>label::after {
+          content: ':';
+        }
+      }
+
+      &-required {
+        &>label::before {
+          display: inline-block;
+          margin-right: var(--form-item-label-required-margin-right);
+          color: var(--required-color);
+          font-size: var(--form-item-label-font-size);
+          font-family: var(--required-font-family);
+          line-height: 1;
+          content: '*';
+        }
+      }
+    }
+
+    &-content {
+      position: relative;
+      line-height: var(--form-item-line-height);
+      min-height: var(--form-item-line-height);
+      display: block;
+      align-items: center;
+
+      &.has-error {
+        // 
+      }
+
+      &:has(&-inner) {
+        display: flex;
+      }
+
+      &-inner {
+        flex: 1;
+        // display: flex;
+        position: relative;
+      }
+
+      &-icon {
+        // position: absolute;
+        // top: calc(var(--form-item-line-height) / 2);
+        // right: -20px;
+        // z-index: 1;
+        // line-height: 20px;
+        // margin-top: -10px;
+        font-size: 16px;
+        width: var(--space-5);
+        text-align: center;
+        animation: zoomIn 0.3s ease-in-out;
+        pointer-events: none;
+        align-self: flex-start;
+      }
+
+      &.has-error &-icon {
+        color: var(--error-9);
+      }
+
+      &.has-success &-icon {
+        color: var(--success-9);
+      }
+
+      &.has-warning &-icon {
+        color: var(--warning-9);
+      }
+
+
+    }
+
+    &-error-message {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      min-height: var(--form-item-error-message-line-height);
+      margin-top: var(--form-item-error-message-margin-top);
+      color: var(--form-item-error-message-color);
+      font-size: var(--form-item-error-message-font-size);
+      line-height: var(--form-item-error-message-line-height);
+      transition: color 0.3s ease-in-out;
+    }
+
+    &-in-form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  &-inline {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .@{form-prefix-cls}-item {
+      margin-right: var(--form-item-inline-space);
+      justify-content: flex-start;
+
+      &,
+      &-label,
+      &-content {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+
+  &-label-top {
+    .@{form-prefix-cls}-item {
+
+      &,
+      &-label {
+        display: block;
+      }
+
+      // &-content {
+      //   display: flex;
+      // }
+      &-label {
+        text-align: left;
+
+        &:empty {
+          display: none;
+        }
+
+        >label {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  &-size-small {
+    --form-item-line-height: var(--control-height-small);
+    --form-item-margin-bottom: var(--space-4);
+    --form-item-error-message-font-size: var(--font-size-1);
+    --form-item-error-message-line-height: var(--form-item-margin-bottom);
+    --form-item-label-font-size: var(--font-size-1);
+    --icon-font-size: var(--font-size-2);
+
+  }
+
+  &-size-large {
+    --form-item-line-height: var(--control-height-large);
+    --form-item-label-font-size: var(--font-size-3);
+    --icon-font-size: var(--font-size-3);
+  }
+  
+  [dir='rtl'] &,
+  [data-direction='rtl'] &,
+  &-rtl {
+    direction: rtl;
+
+    .@{form-prefix-cls}-item {
+      &-label label {
+        margin-right: auto;
+        margin-left: var(--form-item-label-margin-right);
+      }
+    }
+  }
+}
+
+.show-error-motion(@className, @keyframeName, @duration: var(--animation-time)) {
+  .make-motion(@className, @keyframeName, @duration);
+
+  .@{className}-enter,
+  .@{className}-appear {
+    opacity: 0;
+    animation-timing-function: var(--ease-in-out);
+  }
+
+  .@{className}-leave {
+    animation-timing-function: var(--ease-in-out);
+  }
+}
+
+.show-error-motion(~'show-error', ~'uuiShowError');
+
+@keyframes uuiShowErrorIn {
+  0% {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes uuiShowErrorOut {
+  to {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}

package/styles/components/form/mixin.less

@@ -0,0 +1,64 @@
+// Reset form styles
+// -----------------------------
+// Based on Bootstrap framework
+.reset-form() {
+  legend {
+    display: block;
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 0;
+    color: var(--secondary-font-color);
+    font-size: var(--font-size-3);
+    line-height: inherit;
+    border: 0;
+    border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-base);
+  }
+
+  label {
+    font-size: var(--form-item-label-font-size);
+  }
+
+  input[type='search'] {
+    box-sizing: border-box;
+  }
+
+  // Position radios and checkboxes better
+  input[type='radio'],
+  input[type='checkbox'] {
+    line-height: normal;
+  }
+
+  // input[type='file'] {
+  //   display: block;
+  // }
+
+  // Make range inputs behave like textual form controls
+  input[type='range'] {
+    display: block;
+    width: 100%;
+  }
+
+  // Make multiple select elements height not fixed
+  select[multiple],
+  select[size] {
+    height: auto;
+  }
+
+  // Focus for file, radio, and checkbox
+  input[type='file']:focus,
+  input[type='radio']:focus,
+  input[type='checkbox']:focus {
+    outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  // Adjust output element
+  output {
+    display: block;
+    padding-top: 15px;
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+    line-height: var(--default-line-height);
+  }
+}

package/styles/components/form/var.less

@@ -0,0 +1,19 @@
+:root {
+  --form-item-label-font-size: var(--default-font-size);
+  --form-item-margin-bottom: var(--space-5);
+  --form-item-inline-space: var(--space-4);
+  --form-item-line-height: var(--control-height-base);
+  --form-item-label-color: var(--secondary-font-color);
+  --form-item-label-wrap-line-height: 1.1;
+  --form-item-label-margin-right: var(--space-2);
+  --form-item-label-required-margin-right: var(--space-1);
+  --form-item-error-message-color: var(--error-9);
+  --form-item-error-message-font-size: var(--default-font-size);
+  --form-item-error-message-line-height: var(--form-item-margin-bottom);
+  --form-item-error-message-margin-top: 0;
+}
+
+:root,
+[data-radius] {
+  --form-item-border-radius: var(--radius-3);
+}

package/styles/components/grid/index.css

@@ -0,0 +1 @@
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-row{position:relative;height:auto;margin-left:calc(var(--grid-gutter-width)/ -2);margin-right:calc(var(--grid-gutter-width)/ -2);display:flex;flex-flow:row wrap;box-sizing:border-box}.uui-row-flex-start{justify-content:flex-start}.uui-row-flex-center{justify-content:center}.uui-row-flex-end{justify-content:flex-end}.uui-row-flex-space-between{justify-content:space-between}.uui-row-flex-space-around{justify-content:space-around}.uui-row-flex-top{align-items:flex-start}.uui-row-flex-middle{align-items:center}.uui-row-flex-bottom{align-items:flex-end}.uui-col{position:relative;min-height:1px}.uui-col-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-24{left:100%}.uui-col-pull-24{right:100%}.uui-col-offset-24{margin-left:100%}.uui-col-order-24{order:24}.uui-col-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-23{left:95.83333333%}.uui-col-pull-23{right:95.83333333%}.uui-col-offset-23{margin-left:95.83333333%}.uui-col-order-23{order:23}.uui-col-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-22{left:91.66666667%}.uui-col-pull-22{right:91.66666667%}.uui-col-offset-22{margin-left:91.66666667%}.uui-col-order-22{order:22}.uui-col-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-21{left:87.5%}.uui-col-pull-21{right:87.5%}.uui-col-offset-21{margin-left:87.5%}.uui-col-order-21{order:21}.uui-col-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-20{left:83.33333333%}.uui-col-pull-20{right:83.33333333%}.uui-col-offset-20{margin-left:83.33333333%}.uui-col-order-20{order:20}.uui-col-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-19{left:79.16666667%}.uui-col-pull-19{right:79.16666667%}.uui-col-offset-19{margin-left:79.16666667%}.uui-col-order-19{order:19}.uui-col-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-18{left:75%}.uui-col-pull-18{right:75%}.uui-col-offset-18{margin-left:75%}.uui-col-order-18{order:18}.uui-col-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-17{left:70.83333333%}.uui-col-pull-17{right:70.83333333%}.uui-col-offset-17{margin-left:70.83333333%}.uui-col-order-17{order:17}.uui-col-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-16{left:66.66666667%}.uui-col-pull-16{right:66.66666667%}.uui-col-offset-16{margin-left:66.66666667%}.uui-col-order-16{order:16}.uui-col-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-15{left:62.5%}.uui-col-pull-15{right:62.5%}.uui-col-offset-15{margin-left:62.5%}.uui-col-order-15{order:15}.uui-col-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-14{left:58.33333333%}.uui-col-pull-14{right:58.33333333%}.uui-col-offset-14{margin-left:58.33333333%}.uui-col-order-14{order:14}.uui-col-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-13{left:54.16666667%}.uui-col-pull-13{right:54.16666667%}.uui-col-offset-13{margin-left:54.16666667%}.uui-col-order-13{order:13}.uui-col-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-12{left:50%}.uui-col-pull-12{right:50%}.uui-col-offset-12{margin-left:50%}.uui-col-order-12{order:12}.uui-col-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-11{left:45.83333333%}.uui-col-pull-11{right:45.83333333%}.uui-col-offset-11{margin-left:45.83333333%}.uui-col-order-11{order:11}.uui-col-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-10{left:41.66666667%}.uui-col-pull-10{right:41.66666667%}.uui-col-offset-10{margin-left:41.66666667%}.uui-col-order-10{order:10}.uui-col-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-9{left:37.5%}.uui-col-pull-9{right:37.5%}.uui-col-offset-9{margin-left:37.5%}.uui-col-order-9{order:9}.uui-col-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-8{left:33.33333333%}.uui-col-pull-8{right:33.33333333%}.uui-col-offset-8{margin-left:33.33333333%}.uui-col-order-8{order:8}.uui-col-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-7{left:29.16666667%}.uui-col-pull-7{right:29.16666667%}.uui-col-offset-7{margin-left:29.16666667%}.uui-col-order-7{order:7}.uui-col-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-6{left:25%}.uui-col-pull-6{right:25%}.uui-col-offset-6{margin-left:25%}.uui-col-order-6{order:6}.uui-col-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-5{left:20.83333333%}.uui-col-pull-5{right:20.83333333%}.uui-col-offset-5{margin-left:20.83333333%}.uui-col-order-5{order:5}.uui-col-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-4{left:16.66666667%}.uui-col-pull-4{right:16.66666667%}.uui-col-offset-4{margin-left:16.66666667%}.uui-col-order-4{order:4}.uui-col-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-3{left:12.5%}.uui-col-pull-3{right:12.5%}.uui-col-offset-3{margin-left:12.5%}.uui-col-order-3{order:3}.uui-col-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-2{left:8.33333333%}.uui-col-pull-2{right:8.33333333%}.uui-col-offset-2{margin-left:8.33333333%}.uui-col-order-2{order:2}.uui-col-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-push-1{left:4.16666667%}.uui-col-pull-1{right:4.16666667%}.uui-col-offset-1{margin-left:4.16666667%}.uui-col-order-1{order:1}.uui-col-0{display:none}.uui-col-push-0{left:auto}.uui-col-pull-0{right:auto}.uui-col-offset-0{margin-left:0}.uui-col-order-0{order:0}@media (min-width:480px){.uui-col-xs-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-24{left:100%}.uui-col-xs-pull-24{right:100%}.uui-col-xs-offset-24{margin-left:100%}.uui-col-xs-order-24{order:24}.uui-col-xs-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-23{left:95.83333333%}.uui-col-xs-pull-23{right:95.83333333%}.uui-col-xs-offset-23{margin-left:95.83333333%}.uui-col-xs-order-23{order:23}.uui-col-xs-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-22{left:91.66666667%}.uui-col-xs-pull-22{right:91.66666667%}.uui-col-xs-offset-22{margin-left:91.66666667%}.uui-col-xs-order-22{order:22}.uui-col-xs-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-21{left:87.5%}.uui-col-xs-pull-21{right:87.5%}.uui-col-xs-offset-21{margin-left:87.5%}.uui-col-xs-order-21{order:21}.uui-col-xs-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-20{left:83.33333333%}.uui-col-xs-pull-20{right:83.33333333%}.uui-col-xs-offset-20{margin-left:83.33333333%}.uui-col-xs-order-20{order:20}.uui-col-xs-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-19{left:79.16666667%}.uui-col-xs-pull-19{right:79.16666667%}.uui-col-xs-offset-19{margin-left:79.16666667%}.uui-col-xs-order-19{order:19}.uui-col-xs-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-18{left:75%}.uui-col-xs-pull-18{right:75%}.uui-col-xs-offset-18{margin-left:75%}.uui-col-xs-order-18{order:18}.uui-col-xs-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-17{left:70.83333333%}.uui-col-xs-pull-17{right:70.83333333%}.uui-col-xs-offset-17{margin-left:70.83333333%}.uui-col-xs-order-17{order:17}.uui-col-xs-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-16{left:66.66666667%}.uui-col-xs-pull-16{right:66.66666667%}.uui-col-xs-offset-16{margin-left:66.66666667%}.uui-col-xs-order-16{order:16}.uui-col-xs-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-15{left:62.5%}.uui-col-xs-pull-15{right:62.5%}.uui-col-xs-offset-15{margin-left:62.5%}.uui-col-xs-order-15{order:15}.uui-col-xs-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-14{left:58.33333333%}.uui-col-xs-pull-14{right:58.33333333%}.uui-col-xs-offset-14{margin-left:58.33333333%}.uui-col-xs-order-14{order:14}.uui-col-xs-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-13{left:54.16666667%}.uui-col-xs-pull-13{right:54.16666667%}.uui-col-xs-offset-13{margin-left:54.16666667%}.uui-col-xs-order-13{order:13}.uui-col-xs-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-12{left:50%}.uui-col-xs-pull-12{right:50%}.uui-col-xs-offset-12{margin-left:50%}.uui-col-xs-order-12{order:12}.uui-col-xs-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-11{left:45.83333333%}.uui-col-xs-pull-11{right:45.83333333%}.uui-col-xs-offset-11{margin-left:45.83333333%}.uui-col-xs-order-11{order:11}.uui-col-xs-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-10{left:41.66666667%}.uui-col-xs-pull-10{right:41.66666667%}.uui-col-xs-offset-10{margin-left:41.66666667%}.uui-col-xs-order-10{order:10}.uui-col-xs-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-9{left:37.5%}.uui-col-xs-pull-9{right:37.5%}.uui-col-xs-offset-9{margin-left:37.5%}.uui-col-xs-order-9{order:9}.uui-col-xs-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-8{left:33.33333333%}.uui-col-xs-pull-8{right:33.33333333%}.uui-col-xs-offset-8{margin-left:33.33333333%}.uui-col-xs-order-8{order:8}.uui-col-xs-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-7{left:29.16666667%}.uui-col-xs-pull-7{right:29.16666667%}.uui-col-xs-offset-7{margin-left:29.16666667%}.uui-col-xs-order-7{order:7}.uui-col-xs-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-6{left:25%}.uui-col-xs-pull-6{right:25%}.uui-col-xs-offset-6{margin-left:25%}.uui-col-xs-order-6{order:6}.uui-col-xs-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-5{left:20.83333333%}.uui-col-xs-pull-5{right:20.83333333%}.uui-col-xs-offset-5{margin-left:20.83333333%}.uui-col-xs-order-5{order:5}.uui-col-xs-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-4{left:16.66666667%}.uui-col-xs-pull-4{right:16.66666667%}.uui-col-xs-offset-4{margin-left:16.66666667%}.uui-col-xs-order-4{order:4}.uui-col-xs-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-3{left:12.5%}.uui-col-xs-pull-3{right:12.5%}.uui-col-xs-offset-3{margin-left:12.5%}.uui-col-xs-order-3{order:3}.uui-col-xs-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-2{left:8.33333333%}.uui-col-xs-pull-2{right:8.33333333%}.uui-col-xs-offset-2{margin-left:8.33333333%}.uui-col-xs-order-2{order:2}.uui-col-xs-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xs-push-1{left:4.16666667%}.uui-col-xs-pull-1{right:4.16666667%}.uui-col-xs-offset-1{margin-left:4.16666667%}.uui-col-xs-order-1{order:1}.uui-col-xs-0{display:none}.uui-col-xs-push-0{left:auto}.uui-col-xs-pull-0{right:auto}.uui-col-xs-offset-0{margin-left:0}.uui-col-xs-order-0{order:0}}@media (min-width:576px){.uui-col-sm-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-24{left:100%}.uui-col-sm-pull-24{right:100%}.uui-col-sm-offset-24{margin-left:100%}.uui-col-sm-order-24{order:24}.uui-col-sm-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-23{left:95.83333333%}.uui-col-sm-pull-23{right:95.83333333%}.uui-col-sm-offset-23{margin-left:95.83333333%}.uui-col-sm-order-23{order:23}.uui-col-sm-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-22{left:91.66666667%}.uui-col-sm-pull-22{right:91.66666667%}.uui-col-sm-offset-22{margin-left:91.66666667%}.uui-col-sm-order-22{order:22}.uui-col-sm-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-21{left:87.5%}.uui-col-sm-pull-21{right:87.5%}.uui-col-sm-offset-21{margin-left:87.5%}.uui-col-sm-order-21{order:21}.uui-col-sm-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-20{left:83.33333333%}.uui-col-sm-pull-20{right:83.33333333%}.uui-col-sm-offset-20{margin-left:83.33333333%}.uui-col-sm-order-20{order:20}.uui-col-sm-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-19{left:79.16666667%}.uui-col-sm-pull-19{right:79.16666667%}.uui-col-sm-offset-19{margin-left:79.16666667%}.uui-col-sm-order-19{order:19}.uui-col-sm-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-18{left:75%}.uui-col-sm-pull-18{right:75%}.uui-col-sm-offset-18{margin-left:75%}.uui-col-sm-order-18{order:18}.uui-col-sm-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-17{left:70.83333333%}.uui-col-sm-pull-17{right:70.83333333%}.uui-col-sm-offset-17{margin-left:70.83333333%}.uui-col-sm-order-17{order:17}.uui-col-sm-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-16{left:66.66666667%}.uui-col-sm-pull-16{right:66.66666667%}.uui-col-sm-offset-16{margin-left:66.66666667%}.uui-col-sm-order-16{order:16}.uui-col-sm-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-15{left:62.5%}.uui-col-sm-pull-15{right:62.5%}.uui-col-sm-offset-15{margin-left:62.5%}.uui-col-sm-order-15{order:15}.uui-col-sm-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-14{left:58.33333333%}.uui-col-sm-pull-14{right:58.33333333%}.uui-col-sm-offset-14{margin-left:58.33333333%}.uui-col-sm-order-14{order:14}.uui-col-sm-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-13{left:54.16666667%}.uui-col-sm-pull-13{right:54.16666667%}.uui-col-sm-offset-13{margin-left:54.16666667%}.uui-col-sm-order-13{order:13}.uui-col-sm-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-12{left:50%}.uui-col-sm-pull-12{right:50%}.uui-col-sm-offset-12{margin-left:50%}.uui-col-sm-order-12{order:12}.uui-col-sm-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-11{left:45.83333333%}.uui-col-sm-pull-11{right:45.83333333%}.uui-col-sm-offset-11{margin-left:45.83333333%}.uui-col-sm-order-11{order:11}.uui-col-sm-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-10{left:41.66666667%}.uui-col-sm-pull-10{right:41.66666667%}.uui-col-sm-offset-10{margin-left:41.66666667%}.uui-col-sm-order-10{order:10}.uui-col-sm-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-9{left:37.5%}.uui-col-sm-pull-9{right:37.5%}.uui-col-sm-offset-9{margin-left:37.5%}.uui-col-sm-order-9{order:9}.uui-col-sm-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-8{left:33.33333333%}.uui-col-sm-pull-8{right:33.33333333%}.uui-col-sm-offset-8{margin-left:33.33333333%}.uui-col-sm-order-8{order:8}.uui-col-sm-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-7{left:29.16666667%}.uui-col-sm-pull-7{right:29.16666667%}.uui-col-sm-offset-7{margin-left:29.16666667%}.uui-col-sm-order-7{order:7}.uui-col-sm-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-6{left:25%}.uui-col-sm-pull-6{right:25%}.uui-col-sm-offset-6{margin-left:25%}.uui-col-sm-order-6{order:6}.uui-col-sm-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-5{left:20.83333333%}.uui-col-sm-pull-5{right:20.83333333%}.uui-col-sm-offset-5{margin-left:20.83333333%}.uui-col-sm-order-5{order:5}.uui-col-sm-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-4{left:16.66666667%}.uui-col-sm-pull-4{right:16.66666667%}.uui-col-sm-offset-4{margin-left:16.66666667%}.uui-col-sm-order-4{order:4}.uui-col-sm-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-3{left:12.5%}.uui-col-sm-pull-3{right:12.5%}.uui-col-sm-offset-3{margin-left:12.5%}.uui-col-sm-order-3{order:3}.uui-col-sm-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-2{left:8.33333333%}.uui-col-sm-pull-2{right:8.33333333%}.uui-col-sm-offset-2{margin-left:8.33333333%}.uui-col-sm-order-2{order:2}.uui-col-sm-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-sm-push-1{left:4.16666667%}.uui-col-sm-pull-1{right:4.16666667%}.uui-col-sm-offset-1{margin-left:4.16666667%}.uui-col-sm-order-1{order:1}.uui-col-sm-0{display:none}.uui-col-sm-push-0{left:auto}.uui-col-sm-pull-0{right:auto}.uui-col-sm-offset-0{margin-left:0}.uui-col-sm-order-0{order:0}}@media (min-width:768px){.uui-col-md-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-24{left:100%}.uui-col-md-pull-24{right:100%}.uui-col-md-offset-24{margin-left:100%}.uui-col-md-order-24{order:24}.uui-col-md-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-23{left:95.83333333%}.uui-col-md-pull-23{right:95.83333333%}.uui-col-md-offset-23{margin-left:95.83333333%}.uui-col-md-order-23{order:23}.uui-col-md-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-22{left:91.66666667%}.uui-col-md-pull-22{right:91.66666667%}.uui-col-md-offset-22{margin-left:91.66666667%}.uui-col-md-order-22{order:22}.uui-col-md-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-21{left:87.5%}.uui-col-md-pull-21{right:87.5%}.uui-col-md-offset-21{margin-left:87.5%}.uui-col-md-order-21{order:21}.uui-col-md-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-20{left:83.33333333%}.uui-col-md-pull-20{right:83.33333333%}.uui-col-md-offset-20{margin-left:83.33333333%}.uui-col-md-order-20{order:20}.uui-col-md-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-19{left:79.16666667%}.uui-col-md-pull-19{right:79.16666667%}.uui-col-md-offset-19{margin-left:79.16666667%}.uui-col-md-order-19{order:19}.uui-col-md-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-18{left:75%}.uui-col-md-pull-18{right:75%}.uui-col-md-offset-18{margin-left:75%}.uui-col-md-order-18{order:18}.uui-col-md-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-17{left:70.83333333%}.uui-col-md-pull-17{right:70.83333333%}.uui-col-md-offset-17{margin-left:70.83333333%}.uui-col-md-order-17{order:17}.uui-col-md-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-16{left:66.66666667%}.uui-col-md-pull-16{right:66.66666667%}.uui-col-md-offset-16{margin-left:66.66666667%}.uui-col-md-order-16{order:16}.uui-col-md-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-15{left:62.5%}.uui-col-md-pull-15{right:62.5%}.uui-col-md-offset-15{margin-left:62.5%}.uui-col-md-order-15{order:15}.uui-col-md-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-14{left:58.33333333%}.uui-col-md-pull-14{right:58.33333333%}.uui-col-md-offset-14{margin-left:58.33333333%}.uui-col-md-order-14{order:14}.uui-col-md-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-13{left:54.16666667%}.uui-col-md-pull-13{right:54.16666667%}.uui-col-md-offset-13{margin-left:54.16666667%}.uui-col-md-order-13{order:13}.uui-col-md-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-12{left:50%}.uui-col-md-pull-12{right:50%}.uui-col-md-offset-12{margin-left:50%}.uui-col-md-order-12{order:12}.uui-col-md-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-11{left:45.83333333%}.uui-col-md-pull-11{right:45.83333333%}.uui-col-md-offset-11{margin-left:45.83333333%}.uui-col-md-order-11{order:11}.uui-col-md-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-10{left:41.66666667%}.uui-col-md-pull-10{right:41.66666667%}.uui-col-md-offset-10{margin-left:41.66666667%}.uui-col-md-order-10{order:10}.uui-col-md-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-9{left:37.5%}.uui-col-md-pull-9{right:37.5%}.uui-col-md-offset-9{margin-left:37.5%}.uui-col-md-order-9{order:9}.uui-col-md-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-8{left:33.33333333%}.uui-col-md-pull-8{right:33.33333333%}.uui-col-md-offset-8{margin-left:33.33333333%}.uui-col-md-order-8{order:8}.uui-col-md-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-7{left:29.16666667%}.uui-col-md-pull-7{right:29.16666667%}.uui-col-md-offset-7{margin-left:29.16666667%}.uui-col-md-order-7{order:7}.uui-col-md-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-6{left:25%}.uui-col-md-pull-6{right:25%}.uui-col-md-offset-6{margin-left:25%}.uui-col-md-order-6{order:6}.uui-col-md-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-5{left:20.83333333%}.uui-col-md-pull-5{right:20.83333333%}.uui-col-md-offset-5{margin-left:20.83333333%}.uui-col-md-order-5{order:5}.uui-col-md-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-4{left:16.66666667%}.uui-col-md-pull-4{right:16.66666667%}.uui-col-md-offset-4{margin-left:16.66666667%}.uui-col-md-order-4{order:4}.uui-col-md-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-3{left:12.5%}.uui-col-md-pull-3{right:12.5%}.uui-col-md-offset-3{margin-left:12.5%}.uui-col-md-order-3{order:3}.uui-col-md-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-2{left:8.33333333%}.uui-col-md-pull-2{right:8.33333333%}.uui-col-md-offset-2{margin-left:8.33333333%}.uui-col-md-order-2{order:2}.uui-col-md-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-md-push-1{left:4.16666667%}.uui-col-md-pull-1{right:4.16666667%}.uui-col-md-offset-1{margin-left:4.16666667%}.uui-col-md-order-1{order:1}.uui-col-md-0{display:none}.uui-col-md-push-0{left:auto}.uui-col-md-pull-0{right:auto}.uui-col-md-offset-0{margin-left:0}.uui-col-md-order-0{order:0}}@media (min-width:992px){.uui-col-lg-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-24{left:100%}.uui-col-lg-pull-24{right:100%}.uui-col-lg-offset-24{margin-left:100%}.uui-col-lg-order-24{order:24}.uui-col-lg-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-23{left:95.83333333%}.uui-col-lg-pull-23{right:95.83333333%}.uui-col-lg-offset-23{margin-left:95.83333333%}.uui-col-lg-order-23{order:23}.uui-col-lg-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-22{left:91.66666667%}.uui-col-lg-pull-22{right:91.66666667%}.uui-col-lg-offset-22{margin-left:91.66666667%}.uui-col-lg-order-22{order:22}.uui-col-lg-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-21{left:87.5%}.uui-col-lg-pull-21{right:87.5%}.uui-col-lg-offset-21{margin-left:87.5%}.uui-col-lg-order-21{order:21}.uui-col-lg-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-20{left:83.33333333%}.uui-col-lg-pull-20{right:83.33333333%}.uui-col-lg-offset-20{margin-left:83.33333333%}.uui-col-lg-order-20{order:20}.uui-col-lg-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-19{left:79.16666667%}.uui-col-lg-pull-19{right:79.16666667%}.uui-col-lg-offset-19{margin-left:79.16666667%}.uui-col-lg-order-19{order:19}.uui-col-lg-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-18{left:75%}.uui-col-lg-pull-18{right:75%}.uui-col-lg-offset-18{margin-left:75%}.uui-col-lg-order-18{order:18}.uui-col-lg-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-17{left:70.83333333%}.uui-col-lg-pull-17{right:70.83333333%}.uui-col-lg-offset-17{margin-left:70.83333333%}.uui-col-lg-order-17{order:17}.uui-col-lg-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-16{left:66.66666667%}.uui-col-lg-pull-16{right:66.66666667%}.uui-col-lg-offset-16{margin-left:66.66666667%}.uui-col-lg-order-16{order:16}.uui-col-lg-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-15{left:62.5%}.uui-col-lg-pull-15{right:62.5%}.uui-col-lg-offset-15{margin-left:62.5%}.uui-col-lg-order-15{order:15}.uui-col-lg-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-14{left:58.33333333%}.uui-col-lg-pull-14{right:58.33333333%}.uui-col-lg-offset-14{margin-left:58.33333333%}.uui-col-lg-order-14{order:14}.uui-col-lg-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-13{left:54.16666667%}.uui-col-lg-pull-13{right:54.16666667%}.uui-col-lg-offset-13{margin-left:54.16666667%}.uui-col-lg-order-13{order:13}.uui-col-lg-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-12{left:50%}.uui-col-lg-pull-12{right:50%}.uui-col-lg-offset-12{margin-left:50%}.uui-col-lg-order-12{order:12}.uui-col-lg-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-11{left:45.83333333%}.uui-col-lg-pull-11{right:45.83333333%}.uui-col-lg-offset-11{margin-left:45.83333333%}.uui-col-lg-order-11{order:11}.uui-col-lg-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-10{left:41.66666667%}.uui-col-lg-pull-10{right:41.66666667%}.uui-col-lg-offset-10{margin-left:41.66666667%}.uui-col-lg-order-10{order:10}.uui-col-lg-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-9{left:37.5%}.uui-col-lg-pull-9{right:37.5%}.uui-col-lg-offset-9{margin-left:37.5%}.uui-col-lg-order-9{order:9}.uui-col-lg-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-8{left:33.33333333%}.uui-col-lg-pull-8{right:33.33333333%}.uui-col-lg-offset-8{margin-left:33.33333333%}.uui-col-lg-order-8{order:8}.uui-col-lg-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-7{left:29.16666667%}.uui-col-lg-pull-7{right:29.16666667%}.uui-col-lg-offset-7{margin-left:29.16666667%}.uui-col-lg-order-7{order:7}.uui-col-lg-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-6{left:25%}.uui-col-lg-pull-6{right:25%}.uui-col-lg-offset-6{margin-left:25%}.uui-col-lg-order-6{order:6}.uui-col-lg-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-5{left:20.83333333%}.uui-col-lg-pull-5{right:20.83333333%}.uui-col-lg-offset-5{margin-left:20.83333333%}.uui-col-lg-order-5{order:5}.uui-col-lg-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-4{left:16.66666667%}.uui-col-lg-pull-4{right:16.66666667%}.uui-col-lg-offset-4{margin-left:16.66666667%}.uui-col-lg-order-4{order:4}.uui-col-lg-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-3{left:12.5%}.uui-col-lg-pull-3{right:12.5%}.uui-col-lg-offset-3{margin-left:12.5%}.uui-col-lg-order-3{order:3}.uui-col-lg-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-2{left:8.33333333%}.uui-col-lg-pull-2{right:8.33333333%}.uui-col-lg-offset-2{margin-left:8.33333333%}.uui-col-lg-order-2{order:2}.uui-col-lg-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-lg-push-1{left:4.16666667%}.uui-col-lg-pull-1{right:4.16666667%}.uui-col-lg-offset-1{margin-left:4.16666667%}.uui-col-lg-order-1{order:1}.uui-col-lg-0{display:none}.uui-col-lg-push-0{left:auto}.uui-col-lg-pull-0{right:auto}.uui-col-lg-offset-0{margin-left:0}.uui-col-lg-order-0{order:0}}@media (min-width:1200px){.uui-col-xl-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-24{left:100%}.uui-col-xl-pull-24{right:100%}.uui-col-xl-offset-24{margin-left:100%}.uui-col-xl-order-24{order:24}.uui-col-xl-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-23{left:95.83333333%}.uui-col-xl-pull-23{right:95.83333333%}.uui-col-xl-offset-23{margin-left:95.83333333%}.uui-col-xl-order-23{order:23}.uui-col-xl-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-22{left:91.66666667%}.uui-col-xl-pull-22{right:91.66666667%}.uui-col-xl-offset-22{margin-left:91.66666667%}.uui-col-xl-order-22{order:22}.uui-col-xl-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-21{left:87.5%}.uui-col-xl-pull-21{right:87.5%}.uui-col-xl-offset-21{margin-left:87.5%}.uui-col-xl-order-21{order:21}.uui-col-xl-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-20{left:83.33333333%}.uui-col-xl-pull-20{right:83.33333333%}.uui-col-xl-offset-20{margin-left:83.33333333%}.uui-col-xl-order-20{order:20}.uui-col-xl-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-19{left:79.16666667%}.uui-col-xl-pull-19{right:79.16666667%}.uui-col-xl-offset-19{margin-left:79.16666667%}.uui-col-xl-order-19{order:19}.uui-col-xl-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-18{left:75%}.uui-col-xl-pull-18{right:75%}.uui-col-xl-offset-18{margin-left:75%}.uui-col-xl-order-18{order:18}.uui-col-xl-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-17{left:70.83333333%}.uui-col-xl-pull-17{right:70.83333333%}.uui-col-xl-offset-17{margin-left:70.83333333%}.uui-col-xl-order-17{order:17}.uui-col-xl-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-16{left:66.66666667%}.uui-col-xl-pull-16{right:66.66666667%}.uui-col-xl-offset-16{margin-left:66.66666667%}.uui-col-xl-order-16{order:16}.uui-col-xl-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-15{left:62.5%}.uui-col-xl-pull-15{right:62.5%}.uui-col-xl-offset-15{margin-left:62.5%}.uui-col-xl-order-15{order:15}.uui-col-xl-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-14{left:58.33333333%}.uui-col-xl-pull-14{right:58.33333333%}.uui-col-xl-offset-14{margin-left:58.33333333%}.uui-col-xl-order-14{order:14}.uui-col-xl-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-13{left:54.16666667%}.uui-col-xl-pull-13{right:54.16666667%}.uui-col-xl-offset-13{margin-left:54.16666667%}.uui-col-xl-order-13{order:13}.uui-col-xl-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-12{left:50%}.uui-col-xl-pull-12{right:50%}.uui-col-xl-offset-12{margin-left:50%}.uui-col-xl-order-12{order:12}.uui-col-xl-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-11{left:45.83333333%}.uui-col-xl-pull-11{right:45.83333333%}.uui-col-xl-offset-11{margin-left:45.83333333%}.uui-col-xl-order-11{order:11}.uui-col-xl-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-10{left:41.66666667%}.uui-col-xl-pull-10{right:41.66666667%}.uui-col-xl-offset-10{margin-left:41.66666667%}.uui-col-xl-order-10{order:10}.uui-col-xl-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-9{left:37.5%}.uui-col-xl-pull-9{right:37.5%}.uui-col-xl-offset-9{margin-left:37.5%}.uui-col-xl-order-9{order:9}.uui-col-xl-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-8{left:33.33333333%}.uui-col-xl-pull-8{right:33.33333333%}.uui-col-xl-offset-8{margin-left:33.33333333%}.uui-col-xl-order-8{order:8}.uui-col-xl-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-7{left:29.16666667%}.uui-col-xl-pull-7{right:29.16666667%}.uui-col-xl-offset-7{margin-left:29.16666667%}.uui-col-xl-order-7{order:7}.uui-col-xl-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-6{left:25%}.uui-col-xl-pull-6{right:25%}.uui-col-xl-offset-6{margin-left:25%}.uui-col-xl-order-6{order:6}.uui-col-xl-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-5{left:20.83333333%}.uui-col-xl-pull-5{right:20.83333333%}.uui-col-xl-offset-5{margin-left:20.83333333%}.uui-col-xl-order-5{order:5}.uui-col-xl-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-4{left:16.66666667%}.uui-col-xl-pull-4{right:16.66666667%}.uui-col-xl-offset-4{margin-left:16.66666667%}.uui-col-xl-order-4{order:4}.uui-col-xl-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-3{left:12.5%}.uui-col-xl-pull-3{right:12.5%}.uui-col-xl-offset-3{margin-left:12.5%}.uui-col-xl-order-3{order:3}.uui-col-xl-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-2{left:8.33333333%}.uui-col-xl-pull-2{right:8.33333333%}.uui-col-xl-offset-2{margin-left:8.33333333%}.uui-col-xl-order-2{order:2}.uui-col-xl-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xl-push-1{left:4.16666667%}.uui-col-xl-pull-1{right:4.16666667%}.uui-col-xl-offset-1{margin-left:4.16666667%}.uui-col-xl-order-1{order:1}.uui-col-xl-0{display:none}.uui-col-xl-push-0{left:auto}.uui-col-xl-pull-0{right:auto}.uui-col-xl-offset-0{margin-left:0}.uui-col-xl-order-0{order:0}}@media (min-width:1600px){.uui-col-xxl-24{display:block;box-sizing:border-box;width:100%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-24{left:100%}.uui-col-xxl-pull-24{right:100%}.uui-col-xxl-offset-24{margin-left:100%}.uui-col-xxl-order-24{order:24}.uui-col-xxl-23{display:block;box-sizing:border-box;width:95.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-23{left:95.83333333%}.uui-col-xxl-pull-23{right:95.83333333%}.uui-col-xxl-offset-23{margin-left:95.83333333%}.uui-col-xxl-order-23{order:23}.uui-col-xxl-22{display:block;box-sizing:border-box;width:91.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-22{left:91.66666667%}.uui-col-xxl-pull-22{right:91.66666667%}.uui-col-xxl-offset-22{margin-left:91.66666667%}.uui-col-xxl-order-22{order:22}.uui-col-xxl-21{display:block;box-sizing:border-box;width:87.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-21{left:87.5%}.uui-col-xxl-pull-21{right:87.5%}.uui-col-xxl-offset-21{margin-left:87.5%}.uui-col-xxl-order-21{order:21}.uui-col-xxl-20{display:block;box-sizing:border-box;width:83.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-20{left:83.33333333%}.uui-col-xxl-pull-20{right:83.33333333%}.uui-col-xxl-offset-20{margin-left:83.33333333%}.uui-col-xxl-order-20{order:20}.uui-col-xxl-19{display:block;box-sizing:border-box;width:79.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-19{left:79.16666667%}.uui-col-xxl-pull-19{right:79.16666667%}.uui-col-xxl-offset-19{margin-left:79.16666667%}.uui-col-xxl-order-19{order:19}.uui-col-xxl-18{display:block;box-sizing:border-box;width:75%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-18{left:75%}.uui-col-xxl-pull-18{right:75%}.uui-col-xxl-offset-18{margin-left:75%}.uui-col-xxl-order-18{order:18}.uui-col-xxl-17{display:block;box-sizing:border-box;width:70.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-17{left:70.83333333%}.uui-col-xxl-pull-17{right:70.83333333%}.uui-col-xxl-offset-17{margin-left:70.83333333%}.uui-col-xxl-order-17{order:17}.uui-col-xxl-16{display:block;box-sizing:border-box;width:66.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-16{left:66.66666667%}.uui-col-xxl-pull-16{right:66.66666667%}.uui-col-xxl-offset-16{margin-left:66.66666667%}.uui-col-xxl-order-16{order:16}.uui-col-xxl-15{display:block;box-sizing:border-box;width:62.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-15{left:62.5%}.uui-col-xxl-pull-15{right:62.5%}.uui-col-xxl-offset-15{margin-left:62.5%}.uui-col-xxl-order-15{order:15}.uui-col-xxl-14{display:block;box-sizing:border-box;width:58.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-14{left:58.33333333%}.uui-col-xxl-pull-14{right:58.33333333%}.uui-col-xxl-offset-14{margin-left:58.33333333%}.uui-col-xxl-order-14{order:14}.uui-col-xxl-13{display:block;box-sizing:border-box;width:54.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-13{left:54.16666667%}.uui-col-xxl-pull-13{right:54.16666667%}.uui-col-xxl-offset-13{margin-left:54.16666667%}.uui-col-xxl-order-13{order:13}.uui-col-xxl-12{display:block;box-sizing:border-box;width:50%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-12{left:50%}.uui-col-xxl-pull-12{right:50%}.uui-col-xxl-offset-12{margin-left:50%}.uui-col-xxl-order-12{order:12}.uui-col-xxl-11{display:block;box-sizing:border-box;width:45.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-11{left:45.83333333%}.uui-col-xxl-pull-11{right:45.83333333%}.uui-col-xxl-offset-11{margin-left:45.83333333%}.uui-col-xxl-order-11{order:11}.uui-col-xxl-10{display:block;box-sizing:border-box;width:41.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-10{left:41.66666667%}.uui-col-xxl-pull-10{right:41.66666667%}.uui-col-xxl-offset-10{margin-left:41.66666667%}.uui-col-xxl-order-10{order:10}.uui-col-xxl-9{display:block;box-sizing:border-box;width:37.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-9{left:37.5%}.uui-col-xxl-pull-9{right:37.5%}.uui-col-xxl-offset-9{margin-left:37.5%}.uui-col-xxl-order-9{order:9}.uui-col-xxl-8{display:block;box-sizing:border-box;width:33.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-8{left:33.33333333%}.uui-col-xxl-pull-8{right:33.33333333%}.uui-col-xxl-offset-8{margin-left:33.33333333%}.uui-col-xxl-order-8{order:8}.uui-col-xxl-7{display:block;box-sizing:border-box;width:29.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-7{left:29.16666667%}.uui-col-xxl-pull-7{right:29.16666667%}.uui-col-xxl-offset-7{margin-left:29.16666667%}.uui-col-xxl-order-7{order:7}.uui-col-xxl-6{display:block;box-sizing:border-box;width:25%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-6{left:25%}.uui-col-xxl-pull-6{right:25%}.uui-col-xxl-offset-6{margin-left:25%}.uui-col-xxl-order-6{order:6}.uui-col-xxl-5{display:block;box-sizing:border-box;width:20.83333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-5{left:20.83333333%}.uui-col-xxl-pull-5{right:20.83333333%}.uui-col-xxl-offset-5{margin-left:20.83333333%}.uui-col-xxl-order-5{order:5}.uui-col-xxl-4{display:block;box-sizing:border-box;width:16.66666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-4{left:16.66666667%}.uui-col-xxl-pull-4{right:16.66666667%}.uui-col-xxl-offset-4{margin-left:16.66666667%}.uui-col-xxl-order-4{order:4}.uui-col-xxl-3{display:block;box-sizing:border-box;width:12.5%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-3{left:12.5%}.uui-col-xxl-pull-3{right:12.5%}.uui-col-xxl-offset-3{margin-left:12.5%}.uui-col-xxl-order-3{order:3}.uui-col-xxl-2{display:block;box-sizing:border-box;width:8.33333333%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-2{left:8.33333333%}.uui-col-xxl-pull-2{right:8.33333333%}.uui-col-xxl-offset-2{margin-left:8.33333333%}.uui-col-xxl-order-2{order:2}.uui-col-xxl-1{display:block;box-sizing:border-box;width:4.16666667%;padding-left:calc(var(--grid-gutter-width)/ 2);padding-right:calc(var(--grid-gutter-width)/ 2)}.uui-col-xxl-push-1{left:4.16666667%}.uui-col-xxl-pull-1{right:4.16666667%}.uui-col-xxl-offset-1{margin-left:4.16666667%}.uui-col-xxl-order-1{order:1}.uui-col-xxl-0{display:none}.uui-col-xxl-push-0{left:auto}.uui-col-xxl-pull-0{right:auto}.uui-col-xxl-offset-0{margin-left:0}.uui-col-xxl-order-0{order:0}}

package/styles/components/grid/index.less

@@ -0,0 +1,136 @@
+@import '../../mixins/index.less';
+@import '../../var.less';
+
+.make-row() {
+  position: relative;
+  height: auto;
+  margin-left: calc(var(--grid-gutter-width) / -2);
+  margin-right: calc(var(--grid-gutter-width) / -2);
+}
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{css-prefix}-col@{class}-@{index} {
+    display: block;
+    box-sizing: border-box;
+    width: percentage((@index / @grid-columns));
+    padding-left: calc(var(--grid-gutter-width) / 2);
+    padding-right: calc(var(--grid-gutter-width) / 2);
+  }
+
+  .@{css-prefix}-col@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+
+  .@{css-prefix}-col@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+
+  .@{css-prefix}-col@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+
+  .@{css-prefix}-col@{class}-order-@{index} {
+    order: @index;
+  }
+
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index =0) {
+  .@{css-prefix}-col@{class}-@{index} {
+    display: none;
+  }
+
+  .@{css-prefix}-col@{class}-push-@{index} {
+    left: auto;
+  }
+
+  .@{css-prefix}-col@{class}-pull-@{index} {
+    right: auto;
+  }
+
+  .@{css-prefix}-col@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+
+  .@{css-prefix}-col@{class}-order-@{index} {
+    order: 0;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .loop-grid-columns(@grid-columns, @class);
+}
+
+.@{css-prefix}-row {
+  .make-row();
+
+  display: flex;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+
+  &-flex {
+    &-start {
+      justify-content: flex-start;
+    }
+
+    &-center {
+      justify-content: center;
+    }
+
+    &-end {
+      justify-content: flex-end;
+    }
+
+    &-space-between {
+      justify-content: space-between;
+    }
+
+    &-space-around {
+      justify-content: space-around;
+    }
+
+    &-top {
+      align-items: flex-start;
+    }
+
+    &-middle {
+      align-items: center;
+    }
+
+    &-bottom {
+      align-items: flex-end;
+    }
+  }
+}
+
+.@{css-prefix}-col {
+  position: relative;
+  min-height: 1px;
+}
+
+.make-grid();
+
+@media (min-width: @screen-xs-min) {
+  .make-grid(-xs);
+}
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}

package/styles/components/grid/var.less

@@ -0,0 +1,4 @@
+:root {
+  --grid-gutter-width: 0;
+  --grid-columns: 24;
+}

package/styles/components/icon/index.css

@@ -0,0 +1 @@
+.dark,.dark-theme,.light,.light-theme,:root{--animation-time:0.3s;--animation-time-fast:0.15s;--animation-time-short:0.2s;--animation-time-long:0.5s;--default-font-color:var(--gray-12);--secondary-font-color:var(--gray-11);--heading-color:var(--gray-12);--placeholder-color:var(--gray-10);--placeholder-disabled-color:var(--gray-7);--border-width-base:1px;--border-style-base:solid;--border-color-base:var(--color-border-base);--border-split-color:var(--color-border-split);--disabled-font-color:var(--color-disabled-font);--control-disabled-background-color:var(--gray-2);--control-disabled-border-color:var(--color-border-disabled);--control-surface-border-color:var(--color-border-base);--control-surface-hover-border-color:var(--color-border-hover);--control-surface-background-color:var(--color-background);--control-soft-background-color:var(--color-soft-control-background);--control-soft-hover-background-color:var(--color-soft-control-hover-background);--control-height-small:var(--space-5);--control-height-base:var(--space-6);--control-height-large:var(--space-7);--control-font-size-small:var(--font-size-1);--control-font-size-base:var(--default-font-size);--control-font-size-large:var(--font-size-3);--link-decoration:none;--link-hover-decoration:underline;--zindex-badge:auto;--zindex-table-fixed:10;--zindex-affix:10;--zindex-back-top:10;--zindex-picker-panel:10;--zindex-popup-close:10;--zindex-spin:10;--zindex-modal:1000;--zindex-modal-mask:1000;--zindex-message:1010;--zindex-notice:1010;--zindex-popover:1030;--zindex-dropdown:1050;--zindex-tooltip:1060;--zindex-loading-bar:2000;--dropdown-shadow:var(--shadow-5);--popover-shadow:var(--shadow-5);--modal-shadow:var(--shadow-6);--message-shadow:var(--shadow-5);--notice-shadow:var(--shadow-5);--card-shadow:var(--shadow-2);--icon-width-base:var(--space-4);--icon-font-size:var(--font-size-3);--icon-button-color:var(--gray-a11);--icon-button-padding:var(--space-1);--icon-button-hover-color:var(--gray-a11);--icon-button-hover-background-color:var(--gray-a3);--required-color:var(--error-9);--required-font-size:var(--font-size-2);--required-font-family:'SimSun',sans-serif;--mask-background-color:var(--color-overlay);--ease-base-out:cubic-bezier(0.7, 0.3, 0.1, 1);--ease-base-in:cubic-bezier(0.9, 0, 0.3, 0.7);--ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--ease-in-out-back:cubic-bezier(0.71, -0.46, 0.29, 1.46);--ease-out-circ:cubic-bezier(0.08, 0.82, 0.17, 1);--ease-in-circ:cubic-bezier(0.6, 0.04, 0.98, 0.34);--ease-in-out-circ:cubic-bezier(0.78, 0.14, 0.15, 0.86);--ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--ease-in-out-quint:cubic-bezier(0.86, 0, 0.07, 1)}.dark,.dark-theme,.light,.light-theme,:root,[data-color],[data-theme-color]{--link-color:var(--primary-9);--link-hover-color:var(--primary-10);--link-active-color:var(--primary-11);--dropdown-item-selected-color:var(--default-font-color);--dropdown-item-hover-background-color:var(--primary-a3);--dropdown-item-hover-font-color:var(--default-font-color);--highlight-color:var(--primary-10)}[data-color]{--primary-shadow-3:0 0 0 1px var(--primary-a3),0 2px 3px -2px var(--primary-a3),0 3px 12px -4px var(--primary-a3),0 4px 16px -8px var(--primary-a3);--primary-shadow-5:0 0 0 1px var(--primary-a3),0 12px 24px var(--primary-2),0 12px 24px -16px var(--primary-a5)}:root,[data-radius]{--dropdown-border-radius:var(--radius-4);--icon-button-radius:var(--radius-2);--modal-border-radius:var(--radius-4);--control-radius:var(--radius-4);--control-radius-small:var(--radius-2);--control-radius-large:var(--radius-4)}@keyframes loadingCircle{100%{transform:rotate(360deg)}}.collapse-transition{transition:var(--animation-time-short) height ease-in-out,var(--animation-time-short) padding-top ease-in-out,var(--animation-time-short) padding-bottom ease-in-out!important}.move-up-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveUp}.move-up-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveUp;animation-direction:reverse}.move-up-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.move-up-leave-to{animation-timing-function:var(--ease-in-out)}.move-down-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveDownIn}.move-down-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveDownIn;animation-direction:reverse}.move-down-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.move-down-leave-to{animation-timing-function:var(--ease-in-out)}.move-left-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveLeft}.move-left-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveLeft;animation-direction:reverse}.move-left-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.move-left-leave-to{animation-timing-function:var(--ease-in-out)}.move-right-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveRight}.move-right-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiMoveRight;animation-direction:reverse}.move-right-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.move-right-leave-to{animation-timing-function:var(--ease-in-out)}@keyframes uuiMoveDown{0%{transform:translateY(100%);transform-origin:0 0;opacity:0}100%{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes uuiMoveLeft{0%{transform:translateX(-100%);transform-origin:0 0;opacity:0}100%{transform:translateX(0);transform-origin:0 0;opacity:1}}@keyframes uuiMoveRight{0%{transform:translateX(100%);transform-origin:0 0;opacity:0}100%{transform:translateX(0);transform-origin:0 0;opacity:1}}@keyframes uuiMoveUp{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}100%{transform:translateY(0);transform-origin:0 0;opacity:1}}.fade-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiFade}.fade-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiFade;animation-direction:reverse}.fade-enter-from{opacity:0;animation-timing-function:linear}.fade-leave-to{animation-timing-function:linear}@keyframes uuiFade{0%{opacity:0}100%{opacity:1}}.slide-up-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideUp}.slide-up-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideUp;animation-direction:reverse}.slide-up-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.slide-up-leave-to{animation-timing-function:var(--ease-in-out)}.slide-down-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideDown}.slide-down-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideDown;animation-direction:reverse}.slide-down-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.slide-down-leave-to{animation-timing-function:var(--ease-in-out)}.slide-left-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideLeft}.slide-left-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideLeft;animation-direction:reverse}.slide-left-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.slide-left-leave-to{animation-timing-function:var(--ease-in-out)}.slide-right-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideRight}.slide-right-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiSlideRight;animation-direction:reverse}.slide-right-enter-from{opacity:0;animation-timing-function:var(--ease-in-out)}.slide-right-leave-to{animation-timing-function:var(--ease-in-out)}@keyframes uuiSlideUp{0%{transform:scaleY(.8);transform-origin:0 0;opacity:0}100%{transform:scaleY(1);transform-origin:0 0;opacity:1}}@keyframes uuiSlideDown{0%{transform:scaleY(.8);transform-origin:100% 100%;opacity:0}100%{transform:scaleY(1);transform-origin:100% 100%;opacity:1}}@keyframes uuiSlideLeft{0%{transform:scaleX(.8);transform-origin:0 0;opacity:0}100%{transform:scaleX(1);transform-origin:0 0;opacity:1}}@keyframes uuiSlideRight{0%{transform:scaleX(.8);transform-origin:100% 0;opacity:0}100%{transform:scaleX(1);transform-origin:100% 0;opacity:1}}.zoom-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoom}.zoom-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoom;animation-direction:reverse}.zoom-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-big-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomBig}.zoom-big-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomBig;animation-direction:reverse}.zoom-big-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-big-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-big-fast-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomBig}.zoom-big-fast-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomBig;animation-direction:reverse}.zoom-big-fast-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-big-fast-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-up-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomUp}.zoom-up-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomUp;animation-direction:reverse}.zoom-up-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-up-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-down-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomDown}.zoom-down-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomDown;animation-direction:reverse}.zoom-down-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-down-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-left-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomLeft}.zoom-left-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomLeft;animation-direction:reverse}.zoom-left-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-left-leave-to{animation-timing-function:var(--ease-in-out-circ)}.zoom-right-enter-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomRight}.zoom-right-leave-active{animation-duration:var(--animation-time,.3);animation-fill-mode:both;animation-name:uuiZoomRight;animation-direction:reverse}.zoom-right-enter-from{transform:scale(0);opacity:0;animation-timing-function:var(--ease-out-circ)}.zoom-right-leave-to{animation-timing-function:var(--ease-in-out-circ)}@keyframes uuiZoom{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes uuiZoomBig{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes uuiZoomUp{0%{transform:scale(.8);transform-origin:50% 0;opacity:0}100%{transform:scale(1);transform-origin:50% 0}}@keyframes uuiZoomDown{0%{transform:scale(.8);transform-origin:50% 100%;opacity:0}100%{transform:scale(1);transform-origin:50% 100%}}@keyframes uuiZoomLeft{0%{transform:scale(.8);transform-origin:0 50%;opacity:0}100%{transform:scale(1);transform-origin:0 50%}}@keyframes uuiZoomRight{0%{transform:scale(.8);transform-origin:100% 50%;opacity:0}100%{transform:scale(1);transform-origin:100% 50%}}:root,[data-theme-color]{--primary-color:var(--primary-9)}[uui-click-animating-without-extra-node=true],[uui-click-animating=true]{position:relative}html{--uui-wave-shadow-color:var(--primary-9)}.uui-click-animating-node,[uui-click-animating-without-extra-node=true]::after{position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:inherit;box-shadow:0 0 0 0 var(--primary-9);box-shadow:0 0 0 0 var(--uui-wave-shadow-color);opacity:.2;animation:fadeEffect 2s var(--ease-out-circ),waveEffect .4s var(--ease-out-circ);animation-fill-mode:forwards;content:'';pointer-events:none}@keyframes waveEffect{100%{box-shadow:0 0 0 var(--primary-9);box-shadow:0 0 0 6px var(--uui-wave-shadow-color)}}@keyframes fadeEffect{100%{opacity:0}}.uui-icon{display:inline-flex;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:inherit;line-height:inherit;vertical-align:-.125em;align-items:center;justify-content:center;font-size:inherit}.uui-icon-animation-spin{display:inline-flex;animation:loadingCircle 1s infinite linear}.uui-icon svg{width:1em;height:1em;fill:currentcolor}

package/styles/components/icon/index.less

@@ -0,0 +1,29 @@
+@import '../../animation/index.less';
+
+.@{css-prefix}-icon {
+  display: inline-flex;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: inherit;
+  line-height: inherit;
+  vertical-align: -0.125em;
+  align-items: center;
+  justify-content: center;
+  font-size: inherit;
+
+  &-animation-spin {
+    display: inline-flex;
+    animation: loadingCircle 1s infinite linear;
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+  }
+}

package/styles/components/image/index.css

@@ -0,0 +1 @@
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.dark,.dark-theme,:root{--image-lazy-height:200px;--image-lazy-margin-bottom:var(--space-3);--image-error-background-color:var(--gray-3);--image-error-font-color:var(--gray-9);--image-error-font-size:var(--default-font-size);--image-preview-operate-background-color:#666;--image-preview-operate-button-color:white;--image-preview-operate-button-size:48px;--image-preview-operate-button-font-size:24px;--image-preview-operate-button-position-horizontal:40px;--image-preview-operate-button-position-vertical:40px;--image-preview-actions-width:280px;--image-preview-actions-padding-horizontal:0}.uui-image{display:inline-flex;position:relative}.uui-image-img{height:100%;width:100%}.uui-image-lazy{display:flex;justify-content:center;align-items:center;margin-bottom:var(--image-lazy-margin-bottom);min-height:var(--image-lazy-height)}.uui-image-placeholder{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.uui-image-error{align-items:center;background:var(--image-error-background-color);color:var(--image-error-font-color);display:flex;font-size:var(--image-error-font-size);height:100%;justify-content:center;vertical-align:middle;width:100%}.uui-image-viewer-wrap{inset:0;position:fixed}.uui-image-viewer-btn{align-items:center;border-radius:50%;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;opacity:.8;position:absolute;-webkit-user-select:none;user-select:none;z-index:1}.uui-image-viewer-close{right:var(--image-preview-operate-button-position-horizontal);top:var(--image-preview-operate-button-position-vertical);background-color:var(--image-preview-operate-background-color);border-color:var(--image-preview-operate-button-color);color:var(--image-preview-operate-button-color);font-size:var(--image-preview-operate-button-font-size);height:var(--image-preview-operate-button-size);width:var(--image-preview-operate-button-size)}.uui-image-viewer-prev{left:var(--image-preview-operate-button-position-horizontal);top:50%;transform:translateY(-50%);background-color:var(--image-preview-operate-background-color);border-color:var(--image-preview-operate-button-color);color:var(--image-preview-operate-button-color);font-size:var(--image-preview-operate-button-font-size);height:var(--image-preview-operate-button-size);width:var(--image-preview-operate-button-size)}.uui-image-viewer-next{right:var(--image-preview-operate-button-position-horizontal);text-indent:2px;top:50%;transform:translateY(-50%);background-color:var(--image-preview-operate-background-color);border-color:var(--image-preview-operate-button-color);color:var(--image-preview-operate-button-color);font-size:var(--image-preview-operate-button-font-size);height:var(--image-preview-operate-button-size);width:var(--image-preview-operate-button-size)}.uui-image-viewer-canvas{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.uui-image-viewer-actions{background-color:var(--image-preview-operate-background-color);border-color:#fff;border-radius:9999px;bottom:var(--image-preview-operate-button-position-vertical);height:var(--image-preview-operate-button-size);left:50%;padding:0 var(--image-preview-actions-padding-horizontal);transform:translateX(-50%);width:var(--image-preview-actions-width)}.uui-image-viewer-actions-inner{align-items:center;color:#fff;cursor:pointer;display:flex;font-size:var(--image-preview-operate-button-font-size);height:100%;justify-content:space-around;text-align:justify;width:100%}.uui-image-viewer-mask{background:#000;height:100%;left:0;opacity:.5;position:absolute;top:0;width:100%}