.devui-accordion__menu ol,
.devui-accordion__menu ul {
  font-size: 12px;
  line-height: 0 !important;
  margin: 0 !important
}

.devui-accordion__list,
.devui-accordion__menu-item,
d-accordion-item,
d-accordion-item-hreflink,
d-accordion-item-routerlink {
  display: block
}

.devui-accordion__menu {
  background: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  display: block;
  height: 100%;
  overflow-y: auto;
  width: 100%
}

.devui-accordion__menu.devui-accordion--menu-normal {
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-accordion__menu>.devui-accordion__list {
  padding: 10px 0
}

.devui-accordion__menu .devui-accordion--overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-accordion__submenu {
  background: var(--devui-base-bg, #fff);
  width: 100%
}

.devui-accordion__item-title {
  background: transparent;
  color: var(--devui-text-weak, #575d6c);
  cursor: pointer;
  display: block;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 20px;
  width: 100%
}

.devui-accordion__item-title.devui-accordion--disabled {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-accordion__item-title.devui-accordion--disabled>a {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__item-title:not(.devui-accordion--disabled):hover {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--active:not(.devui-accordion--open),
.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--router-active {
  color: var(--devui-brand-active, #526ecc);
  font-weight: 700
}

.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--active:not(.devui-accordion--open)>a,
.devui-accordion__item-title:not(.devui-accordion--disabled).devui-accordion--router-active>a {
  color: var(--devui-brand-active, #526ecc)
}

.devui-accordion__item-title>a {
  color: var(--devui-text-weak, #575d6c);
  display: block;
  text-decoration: none;
  width: 100%
}

.devui-accordion__item-title>a:hover {
  color: inherit;
  text-decoration: none
}

d-accordion-item-hreflink.devui-accordion__item-title,
d-accordion-item-routerlink.devui-accordion__item-title {
  padding: 0
}

d-accordion-item-hreflink.devui-accordion__item-title>a,
d-accordion-item-routerlink.devui-accordion__item-title>a {
  padding: 0 10px 0 20px
}

.devui-accordion__menu-item>.devui-accordion__item-title {
  position: relative
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  text-indent: 0;
  top: 12px;
  transition: transform .3s ease-out;
  width: 16px
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon>svg {
  height: 16px;
  width: 16px
}

.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__open-icon>svg path {
  fill: var(--devui-text-weak, #575d6c)
}

.devui-accordion__menu-item>.devui-accordion__item-title:not(.devui-accordion--open).devui-accordion--active svg path {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--open>.devui-accordion__open-icon {
  transform: rotate(180deg);
  transform-origin: center
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--disabled>.devui-accordion__open-icon {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--disabled>.devui-accordion__open-icon svg path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-accordion__menu-item>.devui-accordion__item-title {
  padding-right: 30px
}

.devui-accordion__menu-item>.devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) {
  background: transparent;
  color: var(--devui-brand-active, #526ecc)
}

.devui-accordion__list .devui-accordion--menu-hidden {
  height: 0;
  opacity: 0;
  overflow: hidden
}

.devui-accordion__item-title {
  position: relative
}

.devui-accordion__item-title .devui-accordion__splitter {
  background: var(--devui-dividing-line, #f2f2f3);
  display: inline-block;
  height: 40px;
  left: 10px;
  position: absolute;
  vertical-align: middle;
  width: 2px
}

.devui-accordion__item-title .devui-accordion__splitter.devui__parent-list {
  background-color: transparent
}

.devui-accordion__item-title .devui-accordion__splitter:before {
  background: var(--devui-form-control-line-active, #5e7ce0);
  content: "";
  display: block;
  height: 18px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 11px;
  width: 2px
}

.devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) .devui-accordion__splitter:before,
.devui-accordion__item-title.devui-accordion--router-active:not(.devui-accordion--open) .devui-accordion__splitter:before {
  opacity: 1
}

.devui-accordion--show-animate .devui-accordion__item-title {
  transition: font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-accordion--show-animate .devui-accordion__item-title .devui-accordion__splitter:before {
  transform: scaleY(0);
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-accordion--show-animate .devui-accordion__item-title.devui-accordion--active:not(.devui-accordion--open) .devui-accordion__splitter:before,
.devui-accordion--show-animate .devui-accordion__item-title.devui-accordion--router-active:not(.devui-accordion--open) .devui-accordion__splitter:before {
  transform: scaleY(1)
}

.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter {
  height: 28px;
  top: 12px
}

.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter:before {
  top: 0
}

.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>a>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter {
  height: 28px;
  top: 0
}

.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__item-title>a>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter:before,
.devui-accordion__list>.devui-accordion__item:last-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter:before {
  bottom: 0;
  top: auto
}

.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__item-title>a>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>.devui-accordion__splitter,
.devui-accordion__list>.devui-accordion__item:last-child:first-child>.devui-accordion__menu-item>.devui-accordion__item-title>a>.devui-accordion__splitter {
  height: 18px;
  top: 11px
}

.devui-accordion__item {
  list-style: none
}

.devui-accordion__item>a {
  color: var(--devui-text-weak, #575d6c);
  display: block;
  padding: 0 10px 0 20px;
  text-decoration: none;
  width: 100%
}

.devui-accordion__item-title .tag-done {
  background: var(--devui-base-bg, #fff);
  border: 1px solid #fa9841;
  border-radius: var(--devui-border-radius, 2px);
  color: #fa9841;
  cursor: default;
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  height: 18px;
  line-height: 18px;
  margin-left: 8px;
  min-height: 20px;
  padding: 0 10px;
  text-indent: 0
}

.dp-action-timeline {
  background-color: var(--devui-base-bg, #fff);
  padding: 0 20px;
  position: relative
}

.dp-action-timeline .dp-action-timeline-title {
  font-size: var(--devui-font-size-sm, 12px);
  padding-top: 12px
}

.dp-action-timeline .dp-action-timeline-title>p {
  background-color: var(--devui-base-bg, #fff);
  padding: 8px 0;
  position: relative;
  z-index: 2
}

.dp-action-timeline .dp-action-timeline-item {
  display: flex;
  padding: 12px 0;
  position: relative
}

.dp-action-timeline .dp-action-timeline-item.list-last-item:before {
  border-left: 4px solid var(--devui-base-bg, #fff);
  content: "";
  height: calc(100% - 24px);
  left: 10px;
  position: absolute;
  top: 24px;
  z-index: 2
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: 50%;
  height: 24px;
  margin-right: 8px;
  position: relative;
  width: 24px;
  z-index: 3
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after,
.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before {
  background-color: var(--devui-base-bg, #fff);
  content: "";
  height: 2px;
  left: 11px;
  position: absolute;
  width: 2px;
  z-index: 3
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before {
  top: -2px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after {
  bottom: -2px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon {
  background: none
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before {
  bottom: 7px;
  top: 7px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon .list-empty-icon-dot {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: 50%;
  height: 6px;
  left: 9px;
  position: absolute;
  top: 9px;
  width: 6px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon .icon {
  color: var(--devui-icon-text, #71757f);
  font-size: var(--devui-font-size-icon, 16px);
  line-height: 24px;
  text-align: center;
  width: 24px
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-info .icon {
  color: var(--devui-info, #5e7ce0)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-danger .icon {
  color: var(--devui-danger, #f66f6a)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-success .icon {
  color: var(--devui-success, #50d4ab)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-warning .icon {
  color: var(--devui-warning, #fac20a)
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-data {
  flex: 1;
  word-break: break-all
}

.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-item-date {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size-sm, 12px)
}

.dp-action-timeline .dp-action-timeline-item .border-bottom {
  background-color: var(--devui-dividing-line, #f2f2f3);
  bottom: 0;
  height: 1px;
  margin-left: 12px;
  position: absolute;
  width: calc(100% - 12px)
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item {
  display: flex;
  flex-direction: column
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top .vertical-list-item-top-left {
  align-items: center;
  display: flex
}

.dp-action-timeline .border-left {
  background-color: var(--devui-dividing-line, #f2f2f3);
  bottom: 0;
  height: 100%;
  left: 31px;
  position: absolute;
  width: 2px;
  z-index: 1
}

.dp-action-timeline:first-child .border-left {
  height: calc(100% - 26px)
}

.dp-action-timeline-operation-container .dp-action-timeline-operation {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--devui-font-size-lg, 14px);
  height: 32px;
  margin: 0 18px;
  padding: 4px 0;
  text-align: center;
  transition: color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.dp-action-timeline-operation-container .dp-action-timeline-operation:hover {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  color: var(--devui-brand-active, #526ecc)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-info {
  background-color: var(--devui-info-bg, #e9edfa)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-danger {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-success {
  background-color: var(--devui-success-bg, #cffcee)
}

.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-warning {
  background-color: var(--devui-warning-bg, #ffe1c7)
}

.dp-action-timeline-status-line .border-left {
  display: none
}

.dp-action-timeline-status-line .dp-action-timeline-item:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-line, #d7d8da);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-info:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-info-line, #5e7ce0);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-danger:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-danger-line, #f66f6a);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-success:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-success-line, #50d4ab);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-warning:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-warning-line, #fa9841);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.dp-action-timeline-status-line .dp-action-timeline-item.list-last-item:before {
  border-left: 2px solid transparent;
  border-color: var(--devui-base-bg, #fff);
  content: "";
  height: calc(100% - 40px);
  left: 11px;
  position: absolute;
  top: 40px;
  z-index: 2
}

.devui-alert {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  display: flex;
  font-size: var(--devui-font-size, 12px);
  line-height: 24px;
  overflow: hidden;
  padding: 8px 16px;
  position: relative;
  width: 100%
}

.devui-alert.devui-alert--center {
  justify-content: center
}

.devui-alert .devui-alert__content {
  padding: 0 16px 0 4px;
  word-break: normal;
  word-wrap: break-word
}

.devui-alert .devui-alert__close-icon {
  color: var(--devui-text, #252b3a);
  height: 24px;
  line-height: 26px;
  opacity: 1;
  position: absolute;
  right: 16px;
  top: 8px
}

.devui-alert .devui-alert__close-icon>svg path {
  fill: var(--devui-light-text, #fff)
}

.devui-alert .devui-alert__close-icon span {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px);
  font-weight: 700
}

.devui-alert.devui-alert--success {
  background-color: var(--devui-success-bg, #cffcee);
  color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--success .devui-alert__close-icon>svg path {
  fill: var(--devui-success-line, #50d4ab)
}

.devui-alert.devui-alert--info {
  background-color: var(--devui-info-bg, #e9edfa);
  color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--info .devui-alert__close-icon>svg path {
  fill: var(--devui-info-line, #5e7ce0)
}

.devui-alert.devui-alert--warning {
  background-color: var(--devui-warning-bg, #ffe1c7);
  color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--warning .devui-alert__close-icon>svg path {
  fill: var(--devui-warning-line, #fa9841)
}

.devui-alert.devui-alert--danger {
  background-color: var(--devui-danger-bg, #ffd5d4);
  color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--danger .devui-alert__close-icon>svg path {
  fill: var(--devui-danger-line, #f66f6a)
}

.devui-alert.devui-alert--simple {
  color: var(--devui-text, #252b3a)
}

.devui-alert.devui-alert--simple .devui-alert__close-icon>svg path {
  fill: var(--devui-text-weak, #575d6c)
}

.devui-alert svg.devui-alert__icon {
  height: 16px;
  transform: translateY(-1px);
  vertical-align: middle;
  width: 16px
}

.devui-alert .devui-alert__icon.devui-alert__icon--success>g path {
  fill: var(--devui-success-line, #50d4ab)
}

.devui-alert .devui-alert__icon.devui-alert__icon--success>g polygon {
  fill: var(--devui-light-text, #fff);
  stroke: var(--devui-light-text, #fff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-outer {
  fill: var(--devui-warning-line, #fa9841)
}

.devui-alert .devui-alert__icon.devui-alert__icon--warning>g path.warning-inner {
  fill: var(--devui-light-text, #fff);
  stroke: var(--devui-light-text, #fff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-outer {
  fill: var(--devui-info-line, #5e7ce0)
}

.devui-alert .devui-alert__icon.devui-alert__icon--info>g path.info-inner {
  fill: var(--devui-light-text, #fff);
  stroke: var(--devui-light-text, #fff)
}

.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-outer {
  fill: var(--devui-danger-line, #f66f6a)
}

.devui-alert .devui-alert__icon.devui-alert__icon--error>g path.error-inner {
  fill: var(--devui-light-text, #fff);
  stroke: var(--devui-light-text, #fff)
}

.devui-alert__icon-wrap {
  margin-right: 4px
}

.devui-alert--close {
  margin: 0;
  padding-bottom: 0;
  padding-top: 0;
  transform-origin: 50% 0;
  transition: all .3s ease-in-out
}

.devui-alert-leave-active {
  animation: alertUpOut .3s ease-in-out;
  animation-fill-mode: both
}

@keyframes alertUpOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0 0
  }

  to {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0
  }
}

.mysidebar {
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 240px
}

.scrollTarget {
  height: 450px !important;
  overflow-y: auto
}

.mycontainer {
  height: auto
}

.devui-scrollbar::-webkit-scrollbar-thumb {
  background-color: #adb0b8
}

.devui-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #8a8e99;
  background-color: var(--devui-placeholder, #8a8e99)
}

body>* ::-webkit-scrollbar-thumb {
  background-color: #adb0b8;
  background-color: var(--devui-line, #adb0b8)
}

body>* ::-webkit-scrollbar-thumb:hover {
  background-color: #8a8e99;
  background-color: var(--devui-placeholder, #8a8e99)
}

.step-nav {
  padding-top: 8px;
  width: 240px
}

.step-nav>li {
  align-items: center;
  color: #575d6c;
  color: var(--devui-text-weak, #575d6c);
  counter-increment: stepli;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-size: var(--devui-font-size, 12px);
  height: 30px;
  line-height: 1.5;
  list-style: none;
  padding: 0;
  position: relative
}

.step-nav>li.active,
.step-nav>li:hover {
  color: #526ecc;
  color: var(--devui-brand-active, #526ecc)
}

.step-nav>li.active:before {
  border-color: #526ecc;
  border-color: var(--devui-brand-active, #526ecc)
}

.step-nav>li:before {
  background-color: #fff;
  background-color: var(--devui-base-bg, #fff);
  border: 2px solid #dfe1e6;
  border: 2px solid var(--devui-dividing-line, #dfe1e6);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 12px;
  line-height: 26px;
  margin-right: 20px;
  text-align: center;
  width: 12px
}

.step-nav>li:not(:first-of-type) {
  margin-top: 32px
}

.step-nav>li:not(:first-of-type):after {
  border-left: 2px solid #dfe1e6;
  border-left: 2px solid var(--devui-dividing-line, #dfe1e6);
  content: "";
  display: block;
  height: 32px;
  left: 5px;
  position: absolute;
  top: -32px;
  width: 1px
}

.mymain {
  position: relative
}

.mycontent {
  border-left: 1px solid #adb0b8;
  border-left: 1px solid var(--devui-line, #adb0b8);
  margin-left: 240px;
  padding: 8px
}

.section-block {
  border-bottom: 1px dashed #adb0b8;
  border-bottom: 1px dashed var(--devui-line, #adb0b8);
  min-height: 200px
}

.section-block.active.anchor-active-by-anchor-link {
  animation: hightlight-and-disapear 3s linear 1
}

@keyframes hightlight-and-disapear {
  0% {
    outline: medium none invert
  }

  2% {
    outline: 0 none hsla(0, 0%, 100%, 0)
  }

  10% {
    outline: 1px solid #5e7ce0;
    outline: 1px solid var(--devui-brand, #5e7ce0)
  }

  50% {
    outline: 1px solid #5e7ce0;
    outline: 1px solid var(--devui-brand, #5e7ce0)
  }

  90% {
    outline: 1px solid hsla(0, 0%, 100%, 0)
  }

  99% {
    outline: 0 none hsla(0, 0%, 100%, 0)
  }

  to {
    outline: medium none invert
  }
}

.devui-fixed-overlay {
  background-color: var(--devui-shadow, rgba(37, 43, 58, .24));
  inset: 0;
  opacity: 1;
  position: fixed;
  z-index: 1050
}

.devui-fixed-overlay--fade-enter-active,
.devui-fixed-overlay--fade-leave-active {
  transition: opacity .1s linear
}

.devui-fixed-overlay--fade-enter-from,
.devui-fixed-overlay--fade-leave-to {
  opacity: 0
}

.devui-flexible-overlay {
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  position: fixed;
  z-index: 1000
}

.devui-flexible-overlay__arrow {
  background-color: inherit;
  height: 8px;
  position: absolute;
  transform: rotate(45deg);
  width: 8px
}

.devui-popover__icon-wrap {
  height: 16px;
  margin-right: 8px;
  width: 16px
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path {
  fill: var(--devui-success, #50d4ab)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,
.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon {
  fill: var(--devui-light-text, #fff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path {
  fill: var(--devui-warning, #fac20a)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon {
  fill: var(--devui-light-text, #fff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g {
  fill: var(--devui-info, #5e7ce0)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle {
  fill: var(--devui-light-text, #fff)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path {
  fill: var(--devui-danger, #f66f6a)
}

.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle {
  fill: var(--devui-light-text, #fff)
}

.devui-popover__content.devui-flexible-overlay {
  align-items: center;
  background-color: var(--devui-feedback-overlay-bg, #464d6e);
  border-radius: var(--devui-border-radius-feedback, 4px);
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--devui-font-size-sm, 12px);
  line-height: 1.5;
  padding: 4px 12px;
  white-space: nowrap
}

.devui-popover__content.devui-flexible-overlay.is-icon {
  flex-wrap: nowrap
}

.devui-popover--fade-bottom-enter-from,
.devui-popover--fade-bottom-leave-to,
.devui-popover--fade-top-enter-from,
.devui-popover--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8)
}

.devui-popover--fade-bottom-enter-to,
.devui-popover--fade-bottom-leave-from,
.devui-popover--fade-top-enter-to,
.devui-popover--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(1)
}

.devui-popover--fade-bottom-enter-active,
.devui-popover--fade-top-enter-active {
  transition: transform .1s cubic-bezier(.16, .75, .5, 1), opacity .1s cubic-bezier(.16, .75, .5, 1)
}

.devui-popover--fade-bottom-leave-active,
.devui-popover--fade-top-leave-active {
  transition: transform .1s cubic-bezier(.5, 0, .84, .25), opacity .1s cubic-bezier(.5, 0, .84, .25)
}

.devui-popover--fade-left-enter-from,
.devui-popover--fade-left-leave-to,
.devui-popover--fade-right-enter-from,
.devui-popover--fade-right-leave-to {
  opacity: .8;
  transform: scaleX(.8)
}

.devui-popover--fade-left-enter-to,
.devui-popover--fade-left-leave-from,
.devui-popover--fade-right-enter-to,
.devui-popover--fade-right-leave-from {
  opacity: 1;
  transform: scaleX(1)
}

.devui-popover--fade-left-enter-active,
.devui-popover--fade-right-enter-active {
  transition: transform .1s cubic-bezier(.16, .75, .5, 1), opacity .1s cubic-bezier(.16, .75, .5, 1)
}

.devui-popover--fade-left-leave-active,
.devui-popover--fade-right-leave-active {
  transition: transform .1s cubic-bezier(.5, 0, .84, .25), opacity .1s cubic-bezier(.5, 0, .84, .25)
}

.devui-form__label {
  align-self: flex-start
}

.devui-form__label--vertical {
  padding-bottom: 8px
}

.devui-form__label--sm {
  flex: 0 0 80px
}

.devui-form__label--md {
  flex: 0 0 100px
}

.devui-form__label--lg {
  flex: 0 0 150px
}

.devui-form__label--start {
  text-align: left
}

.devui-form__label--center {
  text-align: center
}

.devui-form__label--end {
  text-align: end
}

.devui-form__label-span {
  color: var(--devui-aide-text, #71757f);
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  vertical-align: middle
}

.devui-form__label--required:before {
  color: red;
  content: "*";
  display: inline-block;
  margin-left: -12px;
  margin-right: 8px
}

.devui-form__label--required-right:after {
  color: red;
  content: "*";
  display: inline-block;
  margin-left: 8px
}

.devui-form__label--required-hide:after,
.devui-form__label--required-hide:before {
  display: none
}

.devui-form__label-help {
  cursor: pointer;
  display: inline-block;
  margin-left: 4px;
  position: relative;
  top: -.1em;
  vertical-align: middle
}

.devui-form__label-tips-popover .dv-popover__icon-wrap+span {
  flex: 1
}

.devui-form__control {
  flex: 1 1 auto;
  position: relative;
  width: 100%
}

.devui-form__control--horizontal {
  margin-left: 16px
}

.devui-form__control .devui-star {
  color: red
}

.devui-form__control .devui-form__control-container {
  position: relative
}

.devui-form__control .devui-form__control-container--horizontal {
  display: flex;
  width: 100%
}

.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip {
  margin: 0
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon {
  align-items: center;
  display: flex;
  height: 16px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: visible;
  width: 32px;
  z-index: 1
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle {
  fill: var(--devui-danger, #f66f6a)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon {
  fill: var(--devui-base-bg, #fff)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle {
  fill: var(--devui-success, #50d4ab)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon {
  fill: var(--devui-base-bg, #fff)
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg {
  animation: loading-keyframes 1s linear infinite
}

.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path {
  fill: var(--devui-brand, #5e7ce0)
}

.devui-form__control .devui-form__control-container--has-feedback {
  align-items: center;
  display: flex
}

.devui-form__control .devui-form__control-container--has-feedback input {
  padding-right: 28px
}

.devui-form__control .devui-form__control-container--feedback-error {
  border: 1px solid #f66f6a;
  border-radius: 2px
}

.devui-form__control .devui-form__control-container--feedback-error input {
  background-color: #ffeeed;
  border-color: transparent
}

.devui-form__control .devui-form__control-container--feedback-error input:focus,
.devui-form__control .devui-form__control-container--feedback-error input:hover {
  border-color: transparent !important
}

.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow {
  right: 24px !important
}

.devui-form__control .devui-form__control-info {
  line-height: 1
}

.devui-form__control .devui-form__control-info .error-message {
  color: var(--devui-danger, #f66f6a);
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  line-height: 1.5;
  min-height: 20px
}

.devui-form__control .devui-form__control-info .devui-form__control-extra {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size, 12px);
  line-height: 1.5;
  min-height: 20px;
  text-align: justify
}

@keyframes loading-keyframes {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.devui-form__item--horizontal {
  align-items: center;
  display: flex;
  margin-bottom: 20px
}

.devui-form__item--vertical {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px
}

.devui-form__item--error {
  margin-bottom: 0
}

.devui-form-operation .star {
  color: red
}

@keyframes devui-busy-spinner-anim {
  0% {
    transform: rotate(0) scale(1)
  }

  50% {
    transform: rotate(180deg) scale(1.5)
  }

  to {
    transform: rotate(1turn) scale(1)
  }
}

.devui-loading__mask {
  background-color: var(--devui-line, #d7d8da);
  inset: 0;
  opacity: .3;
  position: absolute;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-loading__wrapper {
  text-align: center
}

.devui-loading--full {
  inset: 0;
  position: fixed;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-loading--hidden {
  overflow: hidden
}

.devui-loading__text {
  margin-left: 10px
}

.devui-loading__area {
  background: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius-card, 6px);
  padding: 12px 14px;
  position: absolute;
  transform: translate(-50%, -50%)
}

.devui-loading__busy-default-spinner {
  animation: devui-busy-spinner-anim 1s linear infinite;
  display: inline-block;
  height: 15px;
  position: relative;
  width: 15px
}

.devui-loading__busy-default-spinner div {
  border-radius: 50%;
  height: 6px;
  left: 44.5%;
  position: absolute;
  top: 37%;
  width: 6px
}

.devui-loading__busy-default-spinner .devui-loading__bar1 {
  background: #5e7ce0;
  background: var(--devui-brand, #5e7ce0);
  left: 0;
  top: 0
}

.devui-loading__busy-default-spinner .devui-loading__bar2 {
  background: #859bff;
  background: var(--devui-brand-foil, #859bff);
  left: 9px;
  top: 0
}

.devui-loading__busy-default-spinner .devui-loading__bar3 {
  background: #859bff;
  background: var(--devui-brand-foil, #859bff);
  left: 0;
  top: 9px
}

.devui-loading__busy-default-spinner .devui-loading__bar4 {
  background: #5e7ce0;
  background: var(--devui-brand, #5e7ce0);
  left: 9px;
  top: 9px
}

.devui-auto-complete .devui-dropdown-menu,
.devui-auto-complete__menu .devui-dropdown-menu {
  box-shadow: none;
  left: 0 !important;
  margin: 0 !important;
  top: 0 !important
}

.devui-auto-complete .devui-dropdown-menu ul,
.devui-auto-complete__menu .devui-dropdown-menu ul {
  padding: 0;
  width: 100%
}

.devui-auto-complete .devui-form-control {
  background-color: transparent;
  padding: 4px 0;
  width: 100%
}

.devui-auto-complete .active,
.devui-auto-complete__menu .active {
  background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-auto-complete .devui-dropdown-menu,
.devui-auto-complete__menu .devui-dropdown-menu {
  display: block;
  width: 100%
}

.devui-auto-complete .devui-auto-complete__dropdown-menu-cdk,
.devui-auto-complete__menu .devui-auto-complete__dropdown-menu-cdk {
  position: static
}

.devui-auto-complete .devui-dropdown-item,
.devui-auto-complete__menu .devui-dropdown-item {
  border: 0;
  clear: both;
  cursor: pointer;
  display: block;
  line-height: 20px;
  overflow: hidden;
  padding: 8px 12px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-auto-complete .devui-dropdown-item:not(:first-child),
.devui-auto-complete__menu .devui-dropdown-item:not(:first-child) {
  margin-top: 4px
}

.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,
.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected,
.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,
.devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,
.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected,
.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover,
.devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled).selected .devui-auto-complete__menu .devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover {
  background-color: var(--devui-list-item-active-bg, #f2f5fc) !important;
  color: var(--devui-list-item-active-text, #252b3a) !important
}

.devui-auto-complete .devui-auto-complete__no-result-template,
.devui-auto-complete .devui-auto-complete__searching-template,
.devui-auto-complete__menu .devui-auto-complete__no-result-template,
.devui-auto-complete__menu .devui-auto-complete__searching-template {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border: 0;
  clear: both;
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed;
  display: block;
  line-height: 14px;
  overflow: hidden;
  padding: 8px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.devui-auto-complete .devui-auto-complete__no-result-template:active,
.devui-auto-complete .devui-auto-complete__no-result-template:hover,
.devui-auto-complete .devui-auto-complete__no-result-template:hover:active,
.devui-auto-complete .devui-auto-complete__searching-template:active,
.devui-auto-complete .devui-auto-complete__searching-template:hover,
.devui-auto-complete .devui-auto-complete__searching-template:hover:active,
.devui-auto-complete__menu .devui-auto-complete__no-result-template:active,
.devui-auto-complete__menu .devui-auto-complete__no-result-template:hover,
.devui-auto-complete__menu .devui-auto-complete__no-result-template:hover:active,
.devui-auto-complete__menu .devui-auto-complete__searching-template:active,
.devui-auto-complete__menu .devui-auto-complete__searching-template:hover,
.devui-auto-complete__menu .devui-auto-complete__searching-template:hover:active {
  background-color: var(--devui-unavailable, #f5f5f5)
}

.devui-auto-complete .devui-dropdown-item.disabled,
.devui-auto-complete .devui-dropdown-item.disabled:hover,
.devui-auto-complete__menu .devui-dropdown-item.disabled,
.devui-auto-complete__menu .devui-dropdown-item.disabled:hover {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-auto-complete ul.devui-auto-complete__list-unstyled,
.devui-auto-complete__menu ul.devui-auto-complete__list-unstyled {
  margin: 0;
  overflow-y: auto
}

.devui-auto-complete .devui-auto-complete__dropdown-bg,
.devui-auto-complete__menu .devui-auto-complete__dropdown-bg {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-auto-complete .devui-auto-complete__popup-tips,
.devui-auto-complete__menu .devui-auto-complete__popup-tips {
  color: var(--devui-text-weak, #575d6c);
  padding: 4px 12px
}

.devui-auto-complete .devui-auto-complete__dropdown-latestSource ul,
.devui-auto-complete__menu .devui-auto-complete__dropdown-latestSource ul {
  line-height: normal !important
}

.devui-auto-complete--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px
}

.devui-auto-complete--md {
  font-size: var(--devui-font-size-md, 12px);
  height: 32px
}

.devui-auto-complete--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px
}

.devui-auto-complete__clear--icon {
  cursor: pointer
}

.devui-auto-complete-input {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  width: 100%
}

.devui-auto-complete-input:not(.devui-auto-complete--focus) .devui-auto-complete--glow-style:hover {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-auto-complete-input__wrapper {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  display: inline-flex;
  height: 100%;
  justify-content: center;
  padding: 0 8px;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  width: 100%
}

.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-auto-complete-input__wrapper>input {
  border: none !important
}

.devui-auto-complete-input__wrapper--error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-auto-complete-input__wrapper--feedback {
  padding-right: 28px
}

.devui-auto-complete-input__append,
.devui-auto-complete-input__prepend {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text);
  display: inline-flex;
  justify-content: center;
  min-height: 100%;
  padding: 0 20px;
  position: relative;
  white-space: nowrap
}

.devui-auto-complete-input__append .devui-button,
.devui-auto-complete-input__append .devui-select .devui-select__selection,
.devui-auto-complete-input__prepend .devui-button,
.devui-auto-complete-input__prepend .devui-select .devui-select__selection {
  background-color: transparent;
  border: none;
  color: inherit
}

.devui-auto-complete-input__append .devui-button,
.devui-auto-complete-input__append .devui-select__selection,
.devui-auto-complete-input__prepend .devui-button,
.devui-auto-complete-input__prepend .devui-select__selection {
  display: inline-block;
  margin: 0 -20px
}

.devui-auto-complete--glow-style:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-auto-complete--focus .devui-auto-complete-input__wrapper:not(.devui-auto-complete-input__wrapper--error),
.devui-auto-complete--focus .devui-auto-complete-input__wrapper:not(.devui-auto-complete-input__wrapper--error):hover {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-auto-complete--focus .devui-auto-complete--glow-style:not(.devui-auto-complete-input__wrapper--error) {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-auto-complete--disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-auto-complete--disabled .devui-dropdown-origin {
  background-color: transparent !important;
  cursor: not-allowed
}

.devui-auto-complete--prepend .devui-auto-complete-input__wrapper {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.devui-auto-complete--append .devui-auto-complete-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.devui-auto-complete-slot {
  align-items: stretch;
  display: inline-flex;
  width: 100%
}

.devui-auto-complete-slot .devui-auto-complete-input__prepend {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0
}

.devui-auto-complete-slot .devui-auto-complete-input__append {
  border-bottom-left-radius: 0;
  border-left: 0;
  border-top-left-radius: 0
}

.devui-auto-complete-slot .devui-auto-complete-input__prefix,
.devui-auto-complete-slot .devui-auto-complete-input__suffix {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap
}

.devui-auto-complete-slot .devui-auto-complete-input__prefix>* {
  margin-right: 8px
}

.devui-auto-complete-slot .devui-auto-complete-input__suffix>* {
  margin-left: 8px
}

.devui-auto-complete--fade-bottom-enter-from,
.devui-auto-complete--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-auto-complete--fade-bottom-enter-to,
.devui-auto-complete--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-auto-complete--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-auto-complete--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-auto-complete--fade-top-enter-from,
.devui-auto-complete--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-auto-complete--fade-top-enter-to,
.devui-auto-complete--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-auto-complete--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-auto-complete--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-icon__container {
  color: var(--devui-icon-fill, #71757f);
  display: inline-block
}

.devui-icon__container>:not(:last-child) {
  margin-right: 8px;
  vertical-align: middle
}

.devui-icon__container i {
  transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  vertical-align: middle
}

.devui-icon--no-slots i,
.devui-icon--no-slots img {
  display: block
}

.devui-icon--disabled {
  cursor: not-allowed
}

.devui-icon--disabled,
.devui-icon--disabled i {
  color: var(--devui-disabled-text, #cfd0d3)
}

.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 {
  border-radius: var(--devui-border-radius, 2px);
  height: 32px;
  line-height: 32px;
  margin-left: -8px;
  padding: 0 8px;
  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(1turn)
  }
}

.devui-icon-group {
  align-items: center;
  display: inline-flex
}

.devui-icon-group>.devui-icon__container:not(.devui-icon--operable) {
  margin-left: 0;
  padding: 8px
}

.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child {
  margin-left: -8px
}

.devui-icon-group>:not(:first-child) {
  margin-left: 0
}

.devui-avatar {
  display: inline-block
}

.devui-avatar--style {
  color: var(--devui-light-text, #fff);
  display: inline-block;
  text-align: center
}

.devui-avatar--background-0 {
  background-color: #ff8b87
}

.devui-avatar--background-1 {
  background-color: #7693f5
}

.devui-back-top {
  cursor: pointer;
  height: 40px;
  position: fixed;
  width: 40px;
  z-index: 9
}

.devui-back-top .devui-back-top__base {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px
}

.devui-back-top .devui-back-top__base:hover {
  opacity: 1
}

.devui-back-top .devui-back-top__content {
  background-color: var(--devui-text-weak, #575d6c);
  box-shadow: 0 0 8px #0003;
  opacity: .4
}

.devui-back-top .devui-back-top__custom {
  background-color: #fff
}

.devui-badge {
  display: inline-block;
  position: relative
}

.devui-badge__content {
  color: var(--devui-light-text, #fff);
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-badge--count {
  background: var(--devui-brand, #5e7ce0);
  border-radius: var(--devui-border-radius-full, 100px);
  height: 16px;
  line-height: 16px;
  min-width: 16px;
  padding: 0 4px;
  text-align: center
}

.devui-badge--danger {
  background: var(--devui-danger, #f66f6a)
}

.devui-badge--warning {
  background: var(--devui-warning, #fac20a)
}

.devui-badge--waiting {
  background: var(--devui-waiting, #beccfa)
}

.devui-badge--success {
  background: var(--devui-success, #50d4ab)
}

.devui-badge--info {
  background: var(--devui-brand, #5e7ce0)
}

.devui-badge--common {
  background: var(--devui-unavailable, #f5f5f5);
  color: var(--devui-aide-text, #71757f)
}

.devui-badge--top-left {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%)
}

.devui-badge--top-right {
  right: 0;
  top: 0;
  transform: translate(50%, -50%)
}

.devui-badge--bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%)
}

.devui-badge--bottom-right {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%)
}

.devui-badge--fixed {
  position: absolute
}

.devui-badge--dot {
  border-radius: 50%;
  height: 6px;
  width: 6px
}

.devui-badge--show {
  opacity: 1;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-out, cubic-bezier(.16, .75, .5, 1));
  visibility: visible
}

.devui-badge--hidden {
  opacity: 0;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  visibility: hidden
}

.devui-breadcrumb-font-style,
.devui-breadcrumb__item,
.devui-breadcrumb__item a,
.devui-breadcrumb__separator {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size, 12px);
  line-height: 18px
}

.devui-breadcrumb__item {
  cursor: auto
}

.devui-breadcrumb__item a {
  cursor: pointer
}

.devui-breadcrumb__item a:hover {
  color: var(--devui-text, #252b3a);
  text-decoration: none
}

.devui-breadcrumb__item a,
.devui-breadcrumb__item span {
  transition: color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-breadcrumb__item .is-link {
  cursor: pointer
}

.devui-breadcrumb__item .is-link:hover {
  color: var(--devui-text, #252b3a);
  text-decoration: none
}

.devui-breadcrumb__item-dropdown {
  margin: 0;
  padding: 0;
  width: 100px
}

.devui-breadcrumb__item-dropdown a:hover {
  text-decoration: none
}

.devui-breadcrumb__item-dropdown-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  width: 100px
}

.devui-breadcrumb__item-dropdown-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-breadcrumb__separator {
  margin: 0 4px
}

.devui-dropdown span.icon-chevron-down,
.devui-dropdown span.icon-select-arrow {
  display: inline-block;
  vertical-align: text-top
}

.devui-dropdown__menu-wrap .devui-dropdown-menu {
  width: 100%
}

.devui-dropdown-animation span.icon-chevron-down,
.devui-dropdown-animation span.icon-select-arrow {
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-dropdown.open span.icon-chevron-down,
.devui-dropdown.open span.icon-select-arrow {
  transform: rotate(180deg)
}

.fade-in-top {
  animation: fadeInTop .2s cubic-bezier(.16, .75, .5, 1)
}

.fade-in-bottom {
  animation: fadeInBottom .2s cubic-bezier(.16, .75, .5, 1)
}

@keyframes fadeInTop {
  0% {
    opacity: .8;
    transform: scaleY(.8) translateY(4px)
  }

  to {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
  }
}

@keyframes fadeInBottom {
  0% {
    opacity: .8;
    transform: scaleY(.8) translateY(-4px)
  }

  to {
    opacity: 1;
    transform: scaleY(.9999) translateY(0)
  }
}

.devui-dropdown--fade-bottom-enter-from,
.devui-dropdown--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-dropdown--fade-bottom-enter-to,
.devui-dropdown--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-dropdown--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-dropdown--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-dropdown--fade-top-enter-from,
.devui-dropdown--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-dropdown--fade-top-enter-to,
.devui-dropdown--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-dropdown--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-dropdown--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-breadcrumb {
  align-items: center;
  display: flex
}

.devui-breadcrumb .devui-breadcrumb__item:last-child .devui-breadcrumb__separator {
  display: none
}

.devui-button {
  background-color: transparent;
  border-color: transparent;
  border-radius: var(--devui-border-radius, 2px);
  border-width: 1px;
  font-size: var(--devui-font-size-md, 12px);
  height: 32px;
  line-height: var(--devui-line-height-base, 1.5);
  overflow: hidden;
  padding: var(--devui-btn-padding, 0 20px);
  position: relative
}

.devui-button.mousedown:not(:disabled) {
  transform: scale(.95)
}

.devui-button .water-wave {
  animation: waterWave var(--devui-animation-duration-slow, .3s) var(--devui-animation-linear, linear);
  background-color: var(--devui-base-bg, #fff);
  border-radius: 50%;
  height: 20px;
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px
}

.devui-button:hover {
  cursor: pointer
}

.devui-button:disabled {
  cursor: not-allowed
}

.devui-button--is-loading {
  pointer-events: none
}

.devui-button--solid {
  min-width: 64px
}

.devui-button--solid,
.devui-button--solid i {
  color: var(--devui-light-text, #fff)
}

.devui-button--solid--secondary {
  background-color: var(--devui-btn-common-bg, var(--devui-base-bg, #fff));
  border-color: var(--devui-btn-common-border-color, var(--devui-line, #d7d8da));
  color: var(--devui-text, #252b3a)
}

.devui-button--solid--secondary:hover {
  background-color: var(--devui-btn-common-bg-hover, var(--devui-base-bg, #fff));
  border-color: var(--devui-btn-common-border-color-hover, var(--devui-form-control-line-active, #5e7ce0));
  color: var(--devui-btn-common-color-hover, var(--devui-brand-active, #526ecc))
}

.devui-button--solid--secondary:active,
.devui-button--solid--secondary:focus {
  background-color: var(--devui-btn-common-bg-hover, var(--devui-base-bg, #fff));
  border-color: var(--devui-btn-common-border-color-active, var(--devui-form-control-line-active, #5e7ce0));
  color: var(--devui-btn-common-color-active, var(--devui-brand-active, #526ecc))
}

.devui-button--solid--secondary:disabled {
  opacity: .8
}

.devui-button--solid--primary {
  background-color: var(--devui-primary, #5e7ce0)
}

.devui-button--solid--primary:focus,
.devui-button--solid--primary:hover {
  background-color: var(--devui-primary-hover, #7693f5)
}

.devui-button--solid--primary:active {
  background-color: var(--devui-primary-active, #344899)
}

.devui-button--solid--primary:disabled {
  background: var(--devui-primary-disabled, #beccfa);
  border: none;
  color: var(--devui-light-text, #fff)
}

.devui-button--solid--danger {
  background-color: var(--devui-contrast, #c7000b)
}

.devui-button--solid--danger:focus,
.devui-button--solid--danger:hover {
  background-color: var(--devui-contrast-hover, #d64a52)
}

.devui-button--solid--danger:active {
  background-color: var(--devui-contrast-active, #b12220)
}

.devui-button--solid--danger:disabled {
  background-color: var(--devui-contrast-disabled, #ffbcba)
}

.devui-button--outline {
  background-color: var(--devui-block, #fff);
  border-style: solid
}

.devui-button--outline i {
  color: var(--devui-text, #252b3a)
}

.devui-button--outline--secondary {
  border-color: var(--devui-line, #d7d8da);
  color: var(--devui-text, #252b3a)
}

.devui-button--outline--secondary:active,
.devui-button--outline--secondary:active i,
.devui-button--outline--secondary:focus,
.devui-button--outline--secondary:focus i,
.devui-button--outline--secondary:hover,
.devui-button--outline--secondary:hover i {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  color: var(--devui-brand-active, #526ecc)
}

.devui-button--outline--secondary:disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-button--outline--secondary:disabled i {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-button--outline--primary {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  color: var(--devui-brand-active, #526ecc)
}

.devui-button--outline--primary:active,
.devui-button--outline--primary:active i,
.devui-button--outline--primary:focus,
.devui-button--outline--primary:focus i,
.devui-button--outline--primary:hover,
.devui-button--outline--primary:hover i {
  border-color: var(--devui-form-control-line-active-hover, #344899);
  color: var(--devui-brand-active-focus, #344899)
}

.devui-button--outline--primary:disabled {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  color: var(--devui-brand-active, #526ecc);
  opacity: .8
}

.devui-button--outline--primary:disabled i {
  color: var(--devui-brand-active, #526ecc)
}

.devui-button--outline--danger {
  border-color: var(--devui-contrast, #c7000b)
}

.devui-button--outline--danger,
.devui-button--outline--danger i {
  color: var(--devui-contrast, #c7000b)
}

.devui-button--outline--danger:active,
.devui-button--outline--danger:disabled,
.devui-button--outline--danger:focus,
.devui-button--outline--danger:hover {
  opacity: .8
}

.devui-button--text {
  padding: 0
}

.devui-button--text--secondary {
  color: var(--devui-text, #252b3a)
}

.devui-button--text--secondary:active,
.devui-button--text--secondary:focus,
.devui-button--text--secondary:hover {
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button--text--secondary:disabled {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-button--text--primary {
  color: var(--devui-brand-active, #526ecc)
}

.devui-button--text--primary:hover {
  color: var(--devui-link-active, #526ecc)
}

.devui-button--text--primary:active,
.devui-button--text--primary:focus {
  color: var(--devui-brand-active-focus, #344899)
}

.devui-button--text--primary:disabled {
  opacity: .8
}

.devui-button--text--danger {
  color: var(--devui-contrast, #c7000b)
}

.devui-button--text--danger:active,
.devui-button--text--danger:disabled,
.devui-button--text--danger:focus,
.devui-button--text--danger:hover {
  opacity: .8
}

.devui-button--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px;
  min-width: 56px;
  padding: var(--devui-btn-sm-padding, 0 16px)
}

.devui-button--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px;
  min-width: 72px;
  padding: var(--devui-btn-lg-padding, 0 24px)
}

.devui-button.devui-button__icon:not(.devui-button--solid):focus,
.devui-button.devui-button__icon:not(.devui-button--solid):hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  border: 1px solid var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-button.devui-button__icon:not(.devui-button--solid):disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap {
  color: var(--devui-text, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix {
  color: var(--devui-text-weak, #575d6c)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover {
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix {
  color: var(--devui-icon-fill-active, #252b3a)
}

.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .button-content {
  color: var(--devui-brand, #5e7ce0)
}

.devui-button--circle {
  border-radius: 100%
}

.devui-button--round {
  border-radius: 20px
}

.devui-loading .devui-loading-default-spinner div {
  background-color: var(--devui-text, #252b3a)
}

.devui-button {
  align-items: center;
  border-style: solid;
  display: inline-flex;
  justify-content: center;
  transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap
}

.devui-button.devui-button__icon {
  line-height: 1em;
  min-width: unset;
  padding: 8px
}

.devui-button.devui-button__icon:not(.devui-button--circle) {
  border: 1px solid transparent
}

.devui-button.devui-button__icon.devui-button--sm {
  min-width: 24px;
  padding: 4px
}

.devui-button.devui-button__icon.devui-button--lg {
  min-width: 32px
}

.devui-button.devui-button__icon.devui-button--lg .icon {
  font-size: var(--devui-font-size-icon, 16px)
}

.devui-button.devui-button__icon.devui-button--circle {
  width: 32px
}

.devui-button.devui-button__icon.devui-button--circle.devui-button--sm {
  width: 24px
}

.devui-button.devui-button__icon.devui-button--circle.devui-button--lg {
  width: 40px
}

.devui-button:not(.devui-button__icon) .icon-fix {
  font-size: var(--devui-font-size-icon, 16px)
}

.devui-button__icon-fix {
  font-size: var(--devui-font-size, 12px);
  position: relative
}

.button-content {
  display: inline-block;
  position: relative
}

.clear-right-5 {
  margin-right: 5px
}

.loading-icon__container {
  align-items: center;
  display: inline-flex;
  margin-right: 5px
}

.loading-icon__container .button-icon-loading {
  animation: rotating 1.5s linear infinite
}

@keyframes rotating {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(180deg)
  }
}

@keyframes waterWave {
  0% {
    height: 30px;
    opacity: .2;
    width: 30px
  }

  to {
    height: 200px;
    opacity: 0;
    width: 200px
  }
}

.devui-button-group {
  display: flex
}

.devui-button-group>* {
  position: relative
}

.devui-button-group>:not(:first-child),
.devui-button-group>:not(:first-child) .devui-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: -1px
}

.devui-button-group>:not(:first-child) .devui-button.devui-button--solid--primary,
.devui-button-group>:not(:first-child).devui-button--solid--primary {
  border-left: 1px solid var(--devui-brand-hover, #7693f5);
  margin-left: 0
}

.devui-button-group>:not(:last-child),
.devui-button-group>:not(:last-child) .devui-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.devui-button-group>:active,
.devui-button-group>:hover {
  z-index: 1
}

.devui-button-group>:focus-within {
  z-index: 1
}

.devui-card {
  border-radius: var(--devui-border-radius-card, 8px);
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  display: block;
  padding: 16px 20px;
  position: relative;
  transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-card__title {
  color: var(--devui-text, #252b3a);
  display: block;
  font-size: var(--devui-font-size-card-title, 14px);
  font-weight: 600
}

.devui-card__subtitle {
  color: var(--devui-aide-text-stress, #575d6c);
  display: block;
  font-size: var(--devui-font-size, 12px)
}

.devui-card__header {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: var(--card-block-space, 16px)
}

.devui-card__avatar {
  margin-right: var(--card-block-space, 16px)
}

.devui-card__content {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size, 12px)
}

.devui-card__actions {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin-top: var(--card-block-space, 16px)
}

.devui-card__title+.devui-card__subtitle {
  margin-top: var(--card-ele-space, 8px)
}

.devui-card__actions--align-end {
  justify-content: flex-end
}

.devui-card__actions--align-spaceBetween {
  justify-content: space-between
}

.devui-card__meta {
  height: auto;
  margin: 0 -20px var(--card-block-space, 16px) -20px;
  width: calc(100% + 40px)
}

.devui-card__meta:first-child {
  margin-top: -var(--card-block-space, 16px)
}

.devui-card__shadow--always,
.devui-card__shadow--hover:hover {
  box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  transform: translateY(-5px)
}

.devui-carousel {
  display: block;
  position: relative
}

.devui-carousel .devui-carousel__arrow {
  position: absolute;
  top: 50%;
  width: 100%
}

.devui-carousel .devui-carousel__arrow .arrow-left {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  border: 0;
  border-radius: 18px;
  box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  left: 10px;
  position: absolute;
  top: -18px;
  width: 36px;
  z-index: 2
}

.devui-carousel .devui-carousel__arrow .arrow-left:hover {
  background: var(--devui-area, #f5f5f5)
}

.devui-carousel .devui-carousel__arrow .arrow-left svg polygon {
  fill: var(--devui-text, #252b3a)
}

.devui-carousel .devui-carousel__arrow .arrow-right {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  border: 0;
  border-radius: 18px;
  box-shadow: var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: -18px;
  width: 36px;
  z-index: 2
}

.devui-carousel .devui-carousel__arrow .arrow-right:hover {
  background: var(--devui-area, #f5f5f5)
}

.devui-carousel .devui-carousel__arrow .arrow-right svg polygon {
  fill: var(--devui-text, #252b3a)
}

.devui-carousel .devui-carousel__item-wrapper {
  height: 100%;
  overflow: hidden;
  position: relative
}

.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container {
  display: flex;
  height: 100%;
  position: relative
}

.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item {
  flex: 1;
  height: 100%;
  position: relative
}

.devui-carousel .devui-carousel__dots {
  display: flex;
  justify-content: center;
  list-style: none;
  position: absolute;
  width: 100%
}

.devui-carousel .devui-carousel__dots.bottom {
  bottom: 8px
}

.devui-carousel .devui-carousel__dots.top {
  top: 8px
}

.devui-carousel .devui-carousel__dots .dot-item {
  background: var(--devui-icon-fill, #71757f);
  border-radius: 3px;
  height: 6px;
  margin-right: 8px;
  width: 6px
}

.devui-carousel .devui-carousel__dots .dot-item:hover {
  background: var(--devui-icon-fill-hover, #252b3a);
  cursor: pointer
}

.devui-carousel .devui-carousel__dots .dot-item.active {
  background: var(--devui-icon-fill-active, #252b3a);
  transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 24px
}

.devui-carousel .devui-carousel__arrow .arrow-left,
.devui-carousel .devui-carousel__arrow .arrow-right {
  transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-cascader__li.dropdown-item {
  align-items: center;
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: flex-start;
  margin-top: 4px;
  padding: 8px 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-cascader__li .cascader-li__wraper {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-start
}

.devui-cascader__li .dropdown-item-label {
  display: inline-block;
  flex: 1;
  font-size: var(--devui-font-size, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  width: 0
}

.devui-cascader__li.leaf-active {
  background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-cascader__li.leaf-active span {
  color: var(--devui-brand-active, #526ecc)
}

.devui-cascader__li.disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  cursor: not-allowed
}

.devui-cascader__li.disabled .dropdown-item-label {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-cascader__li .cascader-li__checkbox {
  margin-right: 4px
}

.devui-cascader__li .cascader-li__icon {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size-icon, 16px);
  height: 16px;
  line-height: 16px;
  margin-right: 4px
}

.devui-cascader__li .cascader-li__icon.disabled {
  color: var(--devui-disabled-text, #cfd0d3) !important
}

.devui-checkbox {
  align-items: center;
  display: flex;
  display: -ms-flexbox;
  position: relative;
  -ms-flex-align: center;
  height: 100%;
  margin: 0
}

.devui-checkbox .devui-checkbox__tick-wrap {
  height: 14px;
  position: absolute;
  width: 14px
}

.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick {
  opacity: 0;
  stroke: var(--devui-light-text, #fff);
  stroke-dasharray: 13 13;
  stroke-dashoffset: 13;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick {
  opacity: 1;
  stroke-dashoffset: 0;
  transform: scale(1);
  transition: stroke-dashoffset var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25)), opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.active .devui-checkbox--bordered,
.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),
.devui-checkbox.half-checked .devui-checkbox--bordered,
.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color) {
  border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.active:not(.disabled) .devui-checkbox__material {
  background-size: 100% 100%;
  transition: background-size .2s ease-in-out, border-color .2s ease-in-out
}

.devui-checkbox.unchecked:not(.disabled):hover .devui-checkbox__material:not(.custom-color) {
  border-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color) {
  background-size: 0 0;
  transition: background-size var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), border-color var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color {
  background-size: 0 0;
  transition: background-size .2s ease-in-out, border-color .2s ease-in-out
}

.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color) {
  background-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg,
.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg {
  background-color: var(--devui-light-text, #fff);
  opacity: 1;
  transform: scale(.4288);
  transition: transform .2s cubic-bezier(.755, .05, .855, .06)
}

.devui-checkbox .devui-checkbox__material {
  background: linear-gradient(var(--devui-brand, #5e7ce0), var(--devui-brand, #5e7ce0)) no-repeat 50%/0;
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  height: 14px;
  margin-right: 8px;
  position: relative;
  text-align: initial;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: text-bottom;
  width: 14px
}

.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background {
  background-color: var(--devui-base-bg, #fff)
}

.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label {
  margin-right: 0
}

.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg {
  background-color: var(--devui-light-text, #fff);
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(1);
  width: 100%
}

.devui-checkbox .devui-checkbox__material>svg {
  height: 14px;
  width: 14px
}

.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,
.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,
.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover {
  background-color: var(--devui-brand, #5e7ce0)
}

.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,
.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,
.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,
.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus {
  background-color: var(--devui-brand-active-focus, #344899)
}

.devui-checkbox--glow-style .devui-checkbox__glow-box {
  height: 16px;
  position: absolute;
  width: 16px
}

.devui-checkbox--glow-style .devui-checkbox__glow-box .glow-bg {
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: none;
  display: block;
  height: 16px;
  transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 16px
}

.devui-checkbox--glow-style:not(.disabled):hover .glow-bg {
  box-shadow: 0 0 0 6px var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-checkbox--checkbox-bordered .devui-checkbox__material {
  vertical-align: text-bottom !important
}

.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-sm .devui-checkbox__glow-box,
.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-xs .devui-checkbox__glow-box {
  left: 11px
}

.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-lg .devui-checkbox__glow-box,
.devui-checkbox--checkbox-bordered.devui-checkbox--checkbox-md .devui-checkbox__glow-box {
  left: 12px
}

.devui-checkbox__input {
  height: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: -1
}

.devui-checkbox label {
  align-items: center;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  font-weight: 400;
  height: 16px;
  line-height: 16px;
  margin: 0;
  position: relative
}

.devui-checkbox label.devui-checkbox--lg {
  align-items: center;
  display: flex;
  font-size: var(--devui-font-size-lg, 14px)
}

.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material,
.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg {
  height: 18px;
  width: 18px
}

.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered {
  height: 40px;
  padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--md {
  align-items: center;
  display: flex;
  font-size: var(--devui-font-size-md, 12px)
}

.devui-checkbox label.devui-checkbox--md .devui-checkbox__material,
.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg {
  height: 16px;
  width: 16px
}

.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered {
  height: 32px;
  padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--sm {
  align-items: center;
  display: flex;
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material,
.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg {
  height: 14px;
  width: 14px
}

.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered {
  height: 24px;
  padding: 0 15px 0 10px
}

.devui-checkbox label.devui-checkbox--bordered {
  border: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-radius: var(--devui-border-radius, 2px)
}

.devui-checkbox label>span {
  box-sizing: content-box;
  display: inline-block;
  vertical-align: top !important
}

.devui-checkbox label>span.devui-checkbox__material {
  flex-shrink: 0
}

.devui-checkbox label>span.devui-checkbox__label-text {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-checkbox.disabled label {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-checkbox.disabled .devui-checkbox__material {
  background-color: var(--devui-icon-fill-active-disabled, #beccfa);
  border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-checkbox.disabled.unchecked .devui-checkbox__material {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-checkbox.disabled.half-checked .devui-checkbox__material {
  background-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg {
  background-color: var(--devui-light-text, #fff);
  opacity: 1;
  transform: scale(.4288)
}

.devui-checkbox.disabled.active svg polygon {
  fill: var(--devui-light-text, #fff)
}

.devui-checkbox--no-animation {
  transition: none !important
}

.devui-checkbox__column-margin {
  height: 28px;
  line-height: 28px
}

.devui-checkbox__wrap .devui-checkbox label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-checkbox__group {
  align-items: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

.devui-checkbox__group>* {
  margin-top: 8px
}

.devui-checkbox__group.is-row {
  flex-direction: row
}

.devui-checkbox__group.is-row div:not(:last-child) {
  margin-right: 20px
}

.devui-checkbox__group.is-column {
  flex-direction: column
}

.devui-checkbox-button {
  align-items: center;
  display: flex;
  position: relative
}

.devui-checkbox-button__input {
  height: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: -1
}

.devui-checkbox-button__content {
  border: 1px solid var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  padding: 10px 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-checkbox-button__content.devui-checkbox-button--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px;
  line-height: 40px;
  padding: var(--devui-btn-lg-padding, 0 24px)
}

.devui-checkbox-button__content.devui-checkbox-button--md {
  font-size: var(--devui-font-size-md, 12px);
  height: 32px;
  line-height: 32px;
  padding: var(--devui-btn-padding, 0 20px)
}

.devui-checkbox-button__content.devui-checkbox-button--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px;
  line-height: 24px;
  padding: var(--devui-btn-sm-padding, 0 16px)
}

.devui-checkbox-button.active .devui-checkbox-button__content {
  background-color: var(--devui-brand, #5e7ce0);
  border-color: var(--devui-brand, #5e7ce0);
  color: #fff
}

.devui-checkbox-button.active.disabled .devui-checkbox-button__content {
  background-color: var(--devui-icon-fill-active-disabled, #beccfa);
  border-color: var(--devui-icon-fill-active-disabled, #beccfa);
  color: #fff
}

.devui-checkbox-button.disabled .devui-checkbox-button__content {
  background-color: #fff;
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-checkbox__group.is-row .devui-checkbox-button__content {
  border-left: none;
  box-shadow: -1px 0 0 0 var(--devui-disabled-line, #dfe1e6)
}

.devui-checkbox__group.is-row .devui-checkbox-button:first-child .devui-checkbox-button__content {
  border-bottom-left-radius: var(--devui-border-radius, 2px);
  border-left: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-top-left-radius: var(--devui-border-radius, 2px);
  box-shadow: none
}

.devui-checkbox__group.is-row .devui-checkbox-button:last-child .devui-checkbox-button__content {
  border-bottom-right-radius: var(--devui-border-radius, 2px);
  border-top-right-radius: var(--devui-border-radius, 2px)
}

.devui-checkbox__group.is-column .devui-checkbox-button {
  margin-top: 0;
  width: 100%
}

.devui-checkbox__group.is-column .devui-checkbox-button__content {
  border-top: none;
  box-shadow: 0 -1px 0 0 var(--devui-disabled-line, #dfe1e6);
  width: 100%
}

.devui-checkbox__group.is-column .devui-checkbox-button:first-child .devui-checkbox-button__content {
  border-top: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-top-left-radius: var(--devui-border-radius, 2px);
  border-top-right-radius: var(--devui-border-radius, 2px);
  box-shadow: none
}

.devui-checkbox__group.is-column .devui-checkbox-button:last-child .devui-checkbox-button__content {
  border-bottom-left-radius: var(--devui-border-radius, 2px);
  border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-cascader__ul {
  background: var(--devui-connected-overlay-bg, #fff);
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: block;
  height: 180px;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 12px
}

.devui-cascader__drop-no-data {
  align-items: flex-start;
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  display: block;
  display: flex;
  flex-direction: column;
  font-size: var(--devui-font-size, 12px);
  height: 36px;
  justify-content: center;
  line-height: 36px;
  overflow-y: hidden;
  padding: 8px
}

.devui-cascader-tag {
  align-items: center;
  background-color: var(--devui-label-bg, #e9edfa);
  border: 0 solid;
  border-color: inherit;
  border-radius: var(--devui-border-radius, 2px);
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  position: relative
}

.devui-cascader-tag span {
  color: var(--devui-text, #252b3a);
  cursor: default;
  font-size: var(--devui-font-size, 12px);
  line-height: 20px;
  min-height: 20px;
  position: relative
}

.devui-cascader-tag__close {
  background-color: var(--devui-line, #d7d8da);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  height: 14px;
  line-height: 14px;
  margin-left: 12px;
  text-align: center;
  width: 14px
}

.devui-cascader-tag__close:hover {
  background-color: var(--devui-brand, #5e7ce0)
}

.devui-tags-input {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  flex: 1;
  outline: none;
  padding: 1px 20px 1px 4px;
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1)
}

.devui-tags-box {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  max-height: 56px;
  min-height: 28px;
  overflow: auto;
  width: 100%
}

.devui-tags-placeholder {
  color: var(--devui-placeholder, #babbc0);
  line-height: 22px;
  margin-left: 6px
}

.devui-input,
.devui-tags-placeholder {
  font-size: var(--devui-font-size, 12px)
}

.devui-input {
  height: 32px;
  width: 100%
}

.devui-input__wrapper {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  padding: 0 8px;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  width: 100%
}

.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input__wrapper.devui-input--glow-style:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input--focus:not(.devui-input--error) {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input--focus.devui-input--glow-style:not(.devui-input--error) {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input--disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-input--disabled,
.devui-input--disabled:hover {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-input--disabled .devui-input__inner {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-input--error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-input--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 26px
}

.devui-input--sm .devui-input__clear--icon {
  height: 14px;
  width: 14px
}

.devui-input--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 46px
}

.devui-input--lg .devui-input__clear--icon {
  height: 18px;
  width: 18px
}

.devui-input--feedback {
  padding-right: 28px
}

.devui-input__inner {
  background: none;
  border: none;
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  font-size: inherit;
  height: 100%;
  outline: none;
  padding: 4px 0;
  width: 100%
}

.devui-input__inner::-moz-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.devui-input__inner::placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.devui-input--prepend .devui-input__wrapper {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.devui-input--append .devui-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.devui-input-slot {
  align-items: stretch;
  display: inline-flex;
  width: 100%
}

.devui-input-slot__append,
.devui-input-slot__prepend {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text);
  display: inline-flex;
  justify-content: center;
  min-height: 100%;
  padding: 0 20px;
  position: relative;
  white-space: nowrap
}

.devui-input-slot__append .devui-button,
.devui-input-slot__append .devui-select .devui-select__selection,
.devui-input-slot__prepend .devui-button,
.devui-input-slot__prepend .devui-select .devui-select__selection {
  background-color: transparent !important;
  border: none !important;
  color: inherit
}

.devui-input-slot__append .devui-button,
.devui-input-slot__append .devui-select__selection,
.devui-input-slot__prepend .devui-button,
.devui-input-slot__prepend .devui-select__selection {
  margin: 0 -20px
}

.devui-input-slot__prepend {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0
}

.devui-input-slot__append {
  border-bottom-left-radius: 0;
  border-left: 0;
  border-top-left-radius: 0
}

.devui-input-slot__prefix,
.devui-input-slot__suffix {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap
}

.devui-input-slot__prefix>* {
  margin-right: 8px
}

.devui-input-slot__suffix>* {
  margin-left: 8px
}

.devui-input__clear--icon,
.devui-input__password--icon {
  cursor: pointer
}

.devui-input__clear--icon path {
  fill: var(--devui-shape-icon-fill, #d7d8da);
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-input__clear--icon:hover path {
  fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-input--gray-style:not(.devui-input--disabled) .devui-input__wrapper:not(.devui-input--error) {
  background: #f5f5f5;
  border-color: #f5f5f5
}

.devui-input--gray-style:not(.devui-input--disabled) .devui-input__wrapper:not(.devui-input--error):hover {
  background: #ebebeb;
  border-color: #ebebeb
}

body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill,
body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:active,
body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:focus,
body[ui-theme=galaxy-theme] .devui-input__inner:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px transparent !important;
  caret-color: #fff
}

body[ui-theme=galaxy-theme] .devui-input__inner:-internal-autofill-previewed,
body[ui-theme=galaxy-theme] .devui-input__inner:-internal-autofill-selected {
  -webkit-text-fill-color: var(--devui-text, #252b3a);
  transition: background-color 99999s ease-out .5s
}

.devui-cascader {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  position: relative
}

.devui-cascader>div:first-child {
  width: 100%
}

.devui-cascader__icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 5px;
  top: 0
}

.devui-cascader__icon .icon {
  margin: 0
}

.devui-cascader__close .close-icon-container {
  cursor: pointer;
  height: 14px;
  line-height: 14px;
  width: 14px
}

.devui-cascader__close .close-icon-container svg {
  height: 14px;
  width: 14px
}

.devui-cascader__close .close-icon-container svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da);
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-cascader__close .close-icon-container svg:hover path {
  fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-cascader__disbaled .icon {
  color: var(--devui-disabled-text, #cfd0d3) !important
}

.devui-cascader input {
  padding-right: 16px;
  width: 100%
}

.devui-cascader__drop-menu-wrapper {
  display: block;
  font-size: 0;
  padding: 0;
  white-space: nowrap
}

.devui-cascader--drop-icon-animation {
  transition: transform .2s linear
}

.devui-cascader--drop-icon-animation svg path {
  fill: var(--devui-text, #252b3a)
}

.devui-cascader__drop-menu-animation {
  transition: opacity .2s ease-in-out, transform .2s ease-in-out
}

.devui-cascader__dropdown-menu {
  align-items: center;
  display: flex;
  justify-content: "flex-start";
  padding-bottom: 0;
  width: auto
}

.devui-cascader__panel {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px
}

.devui-cascader__suggest-list {
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  cursor: pointer;
  font-size: var(--devui-font-size, 12px);
  font-weight: 400;
  height: 32px;
  padding: 8px 12px;
  text-align: left
}

.devui-cascader__suggest-list:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-brand-active, #526ecc)
}

.devui-cascader__dropdown--open .devui-cascader__icon {
  transform: rotate(180deg)
}

.devui-cascader--fade-bottom-enter-from,
.devui-cascader--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-cascader--fade-bottom-enter-to,
.devui-cascader--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-cascader--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-cascader--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-cascader--fade-top-enter-from,
.devui-cascader--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-cascader--fade-top-enter-to,
.devui-cascader--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-cascader--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-cascader--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-tag {
  display: inline-block
}

.devui-tag .devui-tag__item {
  border: 1px solid;
  border-radius: var(--devui-border-radius, 2px);
  cursor: default;
  display: block;
  font-size: var(--devui-font-size, 12px);
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  position: relative
}

.devui-tag .devui-tag__item.devui-tag--default {
  background-color: var(--devui-default-bg, #f7f8fa);
  border: 0;
  color: var(--devui-text, #252b3a)
}

.devui-tag .devui-tag__item.devui-tag--primary {
  background-color: var(--devui-primary-bg, #f2f5fc);
  color: var(--devui-primary, #5e7ce0)
}

.devui-tag .devui-tag__item.devui-tag--success {
  background-color: var(--devui-success-bg, #cffcee);
  color: var(--devui-success, #50d4ab)
}

.devui-tag .devui-tag__item.devui-tag--warning {
  background-color: var(--devui-warning-bg, #ffe1c7);
  color: var(--devui-warning, #fac20a)
}

.devui-tag .devui-tag__item.devui-tag--danger {
  background-color: var(--devui-danger-bg, #ffd5d4);
  color: var(--devui-danger, #f66f6a)
}

.devui-tag .devui-tag__item.devui-tag--colorful {
  background-color: #fff
}

.devui-tag .devui-tag__item.devui-tag--deletable {
  padding-right: 32px
}

.devui-tag .devui-tag__item.devui-tag--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 32px;
  line-height: 30px
}

.devui-tag .devui-tag__item.devui-tag--md {
  font-size: var(--devui-font-size-lg, 14px);
  height: 28px;
  line-height: 26px
}

.devui-tag .devui-tag__item.devui-tag--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px;
  line-height: 22px
}

.devui-tag .remove-button {
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-size: var(--devui-font-size-icon, 16px);
  height: 12px;
  line-height: 12px;
  margin-left: 12px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 12px
}

.devui-tag .remove-button i {
  vertical-align: 0
}

.devui-input-number {
  display: inline-block;
  position: relative;
  width: 80px
}

.devui-input-number:hover .devui-input-number__input-box:not(.disabled) {
  border: 1px solid var(--devui-form-control-line-hover, #9b9fa8);
  padding-right: 24px
}

.devui-input-number:hover .devui-input-number__control-buttons:not(.disabled) {
  border-color: var(--devui-form-control-line-hover, #9b9fa8);
  display: flex
}

.devui-input-number:focus-within .devui-input-number__input-box:not(.disabled) {
  border: 1px solid var(--devui-form-control-line-active, #5e7ce0);
  padding-right: 24px
}

.devui-input-number:focus-within .devui-input-number__control-buttons:not(.disabled) {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  display: flex
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__input-box:not(.disabled) {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons:not(.disabled) {
  border-color: var(--devui-form-control-line, #d7d8da)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__input-box--error:not(.disabled) {
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons--error:not(.disabled) {
  border-color: var(--devui-danger-line, #f66f6a);
  border-left-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input-number.devui-input-number--glow-style:hover .devui-input-number__control-buttons--error:not(.disabled) span {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__input-box:not(.disabled) {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons:not(.disabled) {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__input-box--error:not(.disabled) {
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons--error:not(.disabled) {
  border-color: var(--devui-danger-line, #f66f6a);
  border-left-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-input-number.devui-input-number--glow-style:focus-within .devui-input-number__control-buttons--error:not(.disabled) span {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-input-number .devui-input-number__input-box {
  -moz-appearance: textfield;
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  cursor: text;
  display: block;
  font-size: var(--devui-font-size, 12px);
  height: 32px;
  line-height: var(--devui-line-height-base, 1.5);
  outline: none;
  padding: 4px 8px;
  transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  width: 100%
}

.devui-input-number .devui-input-number__input-box:not(.disabled) {
  background-color: var(--devui-base-bg, #fff);
  border-color: var(--devui-line, #d7d8da);
  color: var(--devui-text, #252b3a)
}

.devui-input-number .devui-input-number__input-box::-webkit-inner-spin-button,
.devui-input-number .devui-input-number__input-box::-webkit-outer-spin-button {
  -webkit-appearance: none
}

.devui-input-number .devui-input-number__control-buttons {
  align-items: center;
  border: 1px solid transparent;
  border-left: 1px solid var(--devui-line, #d7d8da);
  border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 100%;
  position: absolute;
  right: 0;
  width: 22px
}

.devui-input-number .devui-input-number__control-buttons.disabled {
  border-left-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-input-number .devui-input-number__control-buttons .control-button {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  border-width: 0 1px;
  box-sizing: border-box;
  display: flex;
  height: 50%;
  justify-content: center;
  line-height: 50%;
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-input-number .devui-input-number__control-buttons .control-button.control-inc svg {
  position: relative;
  top: 2px;
  transform: rotate(180deg)
}

.devui-input-number .devui-input-number__control-buttons .control-button.control-dec svg {
  bottom: 2px;
  position: relative
}

.devui-input-number .devui-input-number__control-buttons .control-button svg path {
  fill: var(--devui-text-weak, #575d6c)
}

.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled) {
  cursor: pointer
}

.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled):hover>svg path {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-input-number .devui-input-number__control-buttons .control-button.disabled>svg path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-input-number .devui-input-number__input-wrap {
  height: 100%
}

.devui-input-number .disabled {
  cursor: not-allowed
}

.devui-input-number--lg {
  height: 40px
}

.devui-input-number--lg .devui-input-number__input-box {
  font-size: var(--devui-font-size-lg, 14px);
  height: 100%
}

.devui-input-number--lg .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
  height: 20px;
  width: 20px
}

.devui-input-number--md {
  height: 32px
}

.devui-input-number--md .devui-input-number__input-box {
  font-size: var(--devui-font-size, 12px);
  height: 100%
}

.devui-input-number--md .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
  height: 18px;
  width: 18px
}

.devui-input-number--sm {
  height: 24px
}

.devui-input-number--sm .devui-input-number__input-box {
  font-size: var(--devui-font-size-sm, 12px);
  height: 100%
}

.devui-input-number--sm .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow {
  height: 16px;
  width: 16px
}

.dp-category-search-container {
  align-items: center;
  background: transparent;
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  display: flex;
  height: 32px;
  padding: 0 8px;
  position: relative;
  transition: border var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.dp-category-search-container li,
.dp-category-search-container ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.dp-category-search-container.container-hover>.dp-category-search-icon svg p path {
  fill: var(--devui-icon-fill-hover, #252b3a)
}

.dp-category-search-container.dp-gray-style {
  background-color: var(--devui-gray-form-control-bg, #f5f5f5);
  border-color: transparent;
  transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.dp-category-search-container.dp-gray-style:hover {
  background-color: var(--devui-gray-form-control-hover-bg, #ebebeb)
}

.dp-category-search-container.dp-gray-style:focus-within {
  background-color: var(--devui-base-bg, #fff);
  border-color: var(--devui-brand, #5e7ce0)
}

.dp-category-search-container.dp-gray-style .dp-category-search-input input.dp-category-search-toggle {
  background-color: transparent !important
}

.dp-category-search-container .dp-category-search-toggle {
  color: var(--devui-text, #252b3a)
}

.dp-category-search-container .dp-category-search-line-container {
  height: 32px;
  overflow: hidden;
  width: 100%
}

.dp-category-search-container .dp-category-search-line-container:hover {
  overflow-x: auto;
  overflow-y: overlay
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line {
  align-items: flex-start;
  display: flex;
  flex-flow: row nowrap;
  height: 30px;
  justify-content: flex-start;
  position: relative;
  width: 100%
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line>li {
  align-items: center;
  display: flex;
  flex-grow: 0;
  height: 100%;
  white-space: nowrap
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  min-width: 160px;
  padding-right: 20px
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input input {
  font-size: var(--devui-font-size-sm, 12px);
  height: 32px;
  min-width: 240px;
  width: 100%
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input .dp-category-search-toggle {
  padding-left: 0
}

.dp-category-search-container .dp-category-search-line-container .dp-category-search-line .dp-category-search-input .dp-category-search-keyword-in-category {
  overflow: visible
}

.dp-category-search-container input {
  background: transparent;
  border: none;
  outline: none
}

.dp-category-search-container input::-moz-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.dp-category-search-container input::placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.dp-category-search-container input:focus {
  outline: none
}

.dp-category-search-container .dp-input-container {
  display: flex;
  flex: 1
}

.dp-category-search-container .dp-category-search-extended-container {
  border-left: 1px solid var(--devui-line, #d7d8da);
  display: flex;
  flex-wrap: nowrap;
  height: 16px;
  margin: 8px 0;
  padding-left: 8px;
  width: -moz-fit-content;
  width: fit-content
}

.dp-category-search-icon {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 16px;
  padding-right: 8px
}

.dp-category-search-icon svg g path {
  fill: var(--devui-icon-fill, #71757f);
  outline: none;
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.dp-category-search-icon.disabled {
  cursor: not-allowed
}

.dp-category-search-icon.disabled svg g path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.dp-category-search-icon:not(.disabled):hover svg g path {
  fill: var(--devui-icon-fill-hover, #252b3a)
}

li.dp-tag-item {
  display: inline-block;
  margin-right: 4px
}

li.dp-tag-item .devui-tag>.devui-tag__item {
  display: block !important
}

li.dp-tag-item .devui-tag>.devui-tag__item .dp-category-search-multi-tag>span,
li.dp-tag-item .devui-tag>.devui-tag__item>span {
  display: inline-block;
  margin: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
}

li.dp-tag-item:first-child {
  margin-left: 4px
}

li.dp-tag-item:focus {
  outline: none
}

li.dp-tag-item .dp-color-block-split-line {
  color: var(--devui-aide-text, #71757f)
}

li.dp-tag-item .dp-color-block-sm {
  border-radius: var(--devui-border-radius, 2px);
  display: inline-block;
  height: 8px;
  margin-right: 4px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 8px
}

.dp-category-search-dropdown {
  min-width: 200px;
  overflow-x: auto;
  white-space: nowrap
}

.dp-category-search-dropdown li,
.dp-category-search-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.dp-dropdown-menu-template {
  max-height: 352px;
  max-width: 300px;
  overflow: auto;
  padding: 12px !important
}

.dp-dropdown-menu-template.dp-category-search-keyword-in-category {
  padding: 0 !important
}

.dp-dropdown-menu-template .dp-dropdown-item {
  border: 0;
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  line-height: 20px;
  max-height: 36px;
  overflow: hidden;
  padding: 8px 12px !important;
  text-overflow: ellipsis;
  transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap;
  width: 100%
}

.dp-dropdown-menu-template .dp-dropdown-item:not(:first-child) {
  margin-top: 4px
}

.dp-dropdown-menu-template .dp-dropdown-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.dp-dropdown-menu-template .dp-dropdown-item.active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.dp-dropdown-menu-template .dp-dropdown-item .icon-search {
  margin-right: 4px
}

.dp-dropdown-menu-template .dp-dividing-line {
  background-color: var(--devui-dividing-line, #f2f2f3);
  height: 1px;
  margin-top: 4px;
  width: 100%
}

.dp-dropdown-menu-template .dp-dropdown-menu-tip {
  color: var(--devui-aide-text, #71757f);
  cursor: text;
  padding: 12px 12px 0;
  pointer-events: none
}

.dp-dropdown-menu-template .dp-color-block {
  border-radius: var(--devui-border-radius, 2px);
  display: inline-block;
  height: 12px;
  margin-right: 8px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 12px
}

.dp-dropdown-menu-template .devui-checkbox,
.dp-dropdown-menu-template .devui-checkbox label,
.dp-dropdown-menu-template .devui-checkbox__column-margin,
.dp-dropdown-menu-template .devui-checkbox__group,
.dp-dropdown-menu-template .devui-checkbox__label-text {
  max-width: 100%
}

.dp-save-panel {
  height: auto;
  width: 400px
}

.dp-save-panel .dp-save-panel-title {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  color: var(--devui-font-size-page-title, 16px);
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding: 0 20px
}

.dp-save-panel .dp-save-filter-name {
  padding: 16px 20px
}

.dp-save-panel .dp-save-filter-name .devui-form__item--vertical {
  margin-bottom: 0
}

.dp-save-panel .dp-save-panel-operation-area {
  display: flex;
  justify-content: center;
  padding-bottom: 12px
}

.dp-save-panel .dp-save-panel-operation-area .devui-button:not(:first-child) {
  margin-left: 16px
}

.dp-dropdown-menu-fix {
  margin-left: 0;
  min-width: 200px;
  overflow-y: auto;
  white-space: nowrap
}

.dp-dropdown-menu-fix.max-height {
  max-height: 405px
}

.dp-dropdown-menu-fix .devui-form .devui-form__item--horizontal {
  margin: 16px 8px
}

.dp-dropdown-menu-fix .devui-form .devui-form__label {
  display: none
}

.dp-dropdown-menu-fix .devui-form .devui-form__control--horizontal {
  margin-left: 0
}

.dp-dropdown-menu-fix .devui-input-number {
  width: 70px
}

.dp-selected-tags-list ul {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-height: 390px;
  overflow: auto
}

.dp-selected-tags-list ul li.dp-tag-item {
  display: flex;
  flex-flow: row wrap;
  flex-grow: 0;
  margin: 2px 4px 2px 0
}

.dp-selected-tags-list ul li.dp-tag-item:last-child {
  margin-right: 0
}

.dp-dropdown-operation-area {
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: flex;
  justify-content: center;
  margin: 8px 0;
  padding-top: 8px
}

.dp-dropdown-operation-area>.devui-button:first-child {
  margin-right: 8px
}

.dp-input-number-operation-area {
  display: flex;
  justify-content: space-evenly;
  padding: 16px 16px 8px
}

.dp-no-data-text {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px);
  padding: 8px 0;
  text-align: center
}

.dp-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px
}

.dp-scrollbar::-webkit-scrollbar-track {
  background-color: transparent
}

.dp-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--devui-line, #d7d8da);
  border-radius: 8px
}

.dp-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--devui-placeholder, #babbc0)
}

.dp-code-editor {
  display: block;
  height: 100%;
  position: relative;
  width: 100%
}

.dp-code-editor div.icon-pointer {
  cursor: pointer
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}

code.hljs {
  padding: 3px 5px
}

/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/
.hljs {
  background: #fff;
  color: #24292e
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #d73a49
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #6f42c1
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: #005cc5
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #032f62
}

.hljs-built_in,
.hljs-symbol {
  color: #e36209
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  color: #6a737d
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: #22863a
}

.hljs-subst {
  color: #24292e
}

.hljs-section {
  color: #005cc5;
  font-weight: 700
}

.hljs-bullet {
  color: #735c0f
}

.hljs-emphasis {
  color: #24292e;
  font-style: italic
}

.hljs-strong {
  color: #24292e;
  font-weight: 700
}

.hljs-addition {
  background-color: #f0fff4;
  color: #22863a
}

.hljs-deletion {
  background-color: #ffeef0;
  color: #b31d28
}

:host,
:root {
  --d2h-bg-color: #fff;
  --d2h-border-color: #ddd;
  --d2h-dim-color: rgba(0, 0, 0, .3);
  --d2h-line-border-color: #eee;
  --d2h-file-header-bg-color: #f7f7f7;
  --d2h-file-header-border-color: #d8d8d8;
  --d2h-empty-placeholder-bg-color: #f1f1f1;
  --d2h-empty-placeholder-border-color: #e1e1e1;
  --d2h-selected-color: #c8e1ff;
  --d2h-ins-bg-color: #dfd;
  --d2h-ins-border-color: #b4e2b4;
  --d2h-ins-highlight-bg-color: #97f295;
  --d2h-ins-label-color: #399839;
  --d2h-del-bg-color: #fee8e9;
  --d2h-del-border-color: #e9aeae;
  --d2h-del-highlight-bg-color: #ffb6ba;
  --d2h-del-label-color: #c33;
  --d2h-change-del-color: #fdf2d0;
  --d2h-change-ins-color: #ded;
  --d2h-info-bg-color: #f8fafd;
  --d2h-info-border-color: #d5e4f2;
  --d2h-change-label-color: #d0b44c;
  --d2h-moved-label-color: #3572b0;
  --d2h-dark-color: #e6edf3;
  --d2h-dark-bg-color: #0d1117;
  --d2h-dark-border-color: #30363d;
  --d2h-dark-dim-color: #6e7681;
  --d2h-dark-line-border-color: #21262d;
  --d2h-dark-file-header-bg-color: #161b22;
  --d2h-dark-file-header-border-color: #30363d;
  --d2h-dark-empty-placeholder-bg-color: hsla(215, 8%, 47%, .1);
  --d2h-dark-empty-placeholder-border-color: #30363d;
  --d2h-dark-selected-color: rgba(56, 139, 253, .1);
  --d2h-dark-ins-bg-color: rgba(46, 160, 67, .15);
  --d2h-dark-ins-border-color: rgba(46, 160, 67, .4);
  --d2h-dark-ins-highlight-bg-color: rgba(46, 160, 67, .4);
  --d2h-dark-ins-label-color: #3fb950;
  --d2h-dark-del-bg-color: rgba(248, 81, 73, .1);
  --d2h-dark-del-border-color: rgba(248, 81, 73, .4);
  --d2h-dark-del-highlight-bg-color: rgba(248, 81, 73, .4);
  --d2h-dark-del-label-color: #f85149;
  --d2h-dark-change-del-color: rgba(210, 153, 34, .2);
  --d2h-dark-change-ins-color: rgba(46, 160, 67, .25);
  --d2h-dark-info-bg-color: rgba(56, 139, 253, .1);
  --d2h-dark-info-border-color: rgba(56, 139, 253, .4);
  --d2h-dark-change-label-color: #d29922;
  --d2h-dark-moved-label-color: #3572b0
}

.d2h-wrapper {
  text-align: left
}

.d2h-file-header {
  background-color: #f7f7f7;
  background-color: var(--d2h-file-header-bg-color);
  border-bottom: 1px solid #d8d8d8;
  border-bottom: 1px solid var(--d2h-file-header-border-color);
  display: flex;
  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
  height: 35px;
  padding: 5px 10px
}

.d2h-file-header.d2h-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1
}

.d2h-file-stats {
  display: flex;
  font-size: 14px;
  margin-left: auto
}

.d2h-lines-added {
  border: 1px solid #b4e2b4;
  border: 1px solid var(--d2h-ins-border-color);
  border-radius: 5px 0 0 5px;
  color: #399839;
  color: var(--d2h-ins-label-color);
  padding: 2px;
  text-align: right;
  vertical-align: middle
}

.d2h-lines-deleted {
  border: 1px solid #e9aeae;
  border: 1px solid var(--d2h-del-border-color);
  border-radius: 0 5px 5px 0;
  color: #c33;
  color: var(--d2h-del-label-color);
  margin-left: 1px;
  padding: 2px;
  text-align: left;
  vertical-align: middle
}

.d2h-file-name-wrapper {
  align-items: center;
  display: flex;
  font-size: 15px;
  width: 100%
}

.d2h-file-name {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.d2h-file-wrapper {
  margin-bottom: 1em
}

.d2h-file-collapse,
.d2h-file-wrapper {
  border: 1px solid #ddd;
  border: 1px solid var(--d2h-border-color);
  border-radius: 3px
}

.d2h-file-collapse {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  align-items: center;
  cursor: pointer;
  display: none;
  font-size: 12px;
  justify-content: flex-end;
  padding: 4px 8px
}

.d2h-file-collapse.d2h-selected {
  background-color: #c8e1ff;
  background-color: var(--d2h-selected-color)
}

.d2h-file-collapse-input {
  margin: 0 4px 0 0
}

.d2h-diff-table {
  border-collapse: collapse;
  font-family: Menlo, Consolas, monospace;
  font-size: 13px;
  width: 100%
}

.d2h-files-diff {
  display: flex;
  width: 100%
}

.d2h-file-diff {
  overflow-y: hidden
}

.d2h-file-diff.d2h-d-none,
.d2h-files-diff.d2h-d-none {
  display: none
}

.d2h-file-side-diff {
  display: inline-block;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 50%
}

.d2h-code-line {
  padding: 0 8em;
  width: calc(100% - 16em)
}

.d2h-code-line,
.d2h-code-side-line {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap
}

.d2h-code-side-line {
  padding: 0 4.5em;
  width: calc(100% - 9em)
}

.d2h-code-line-ctn {
  background: none;
  display: inline-block;
  padding: 0;
  word-wrap: normal;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  vertical-align: middle;
  white-space: pre;
  width: 100%
}

.d2h-code-line del,
.d2h-code-side-line del {
  background-color: #ffb6ba;
  background-color: var(--d2h-del-highlight-bg-color)
}

.d2h-code-line del,
.d2h-code-line ins,
.d2h-code-side-line del,
.d2h-code-side-line ins {
  border-radius: .2em;
  display: inline-block;
  margin-top: -1px;
  -webkit-text-decoration: none;
  text-decoration: none
}

.d2h-code-line ins,
.d2h-code-side-line ins {
  background-color: #97f295;
  background-color: var(--d2h-ins-highlight-bg-color);
  text-align: left
}

.d2h-code-line-prefix {
  background: none;
  display: inline;
  padding: 0;
  word-wrap: normal;
  white-space: pre
}

.line-num1 {
  float: left
}

.line-num1,
.line-num2 {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 .5em;
  text-overflow: ellipsis;
  width: 3.5em
}

.line-num2 {
  float: right
}

.d2h-code-linenumber {
  background-color: #fff;
  background-color: var(--d2h-bg-color);
  border: solid #eee;
  border: solid var(--d2h-line-border-color);
  border-width: 0 1px;
  box-sizing: border-box;
  color: #0000004d;
  color: var(--d2h-dim-color);
  cursor: pointer;
  display: inline-block;
  position: absolute;
  text-align: right;
  width: 7.5em
}

.d2h-code-linenumber:after {
  content: "​"
}

.d2h-code-side-linenumber {
  background-color: #fff;
  background-color: var(--d2h-bg-color);
  border: solid #eee;
  border: solid var(--d2h-line-border-color);
  border-width: 0 1px;
  box-sizing: border-box;
  color: #0000004d;
  color: var(--d2h-dim-color);
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0 .5em;
  position: absolute;
  text-align: right;
  text-overflow: ellipsis;
  width: 4em
}

.d2h-code-side-linenumber:after {
  content: "​"
}

.d2h-code-side-emptyplaceholder,
.d2h-emptyplaceholder {
  background-color: #f1f1f1;
  background-color: var(--d2h-empty-placeholder-bg-color);
  border-color: #e1e1e1;
  border-color: var(--d2h-empty-placeholder-border-color)
}

.d2h-code-line-prefix,
.d2h-code-linenumber,
.d2h-code-side-linenumber,
.d2h-emptyplaceholder {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.d2h-code-linenumber,
.d2h-code-side-linenumber {
  direction: rtl
}

.d2h-del {
  background-color: #fee8e9;
  background-color: var(--d2h-del-bg-color);
  border-color: #e9aeae;
  border-color: var(--d2h-del-border-color)
}

.d2h-ins {
  background-color: #dfd;
  background-color: var(--d2h-ins-bg-color);
  border-color: #b4e2b4;
  border-color: var(--d2h-ins-border-color)
}

.d2h-info {
  background-color: #f8fafd;
  background-color: var(--d2h-info-bg-color);
  border-color: #d5e4f2;
  border-color: var(--d2h-info-border-color);
  color: #0000004d;
  color: var(--d2h-dim-color)
}

.d2h-file-diff .d2h-del.d2h-change {
  background-color: #fdf2d0;
  background-color: var(--d2h-change-del-color)
}

.d2h-file-diff .d2h-ins.d2h-change {
  background-color: #ded;
  background-color: var(--d2h-change-ins-color)
}

.d2h-file-list-wrapper {
  margin-bottom: 10px
}

.d2h-file-list-wrapper a {
  -webkit-text-decoration: none;
  text-decoration: none
}

.d2h-file-list-wrapper a,
.d2h-file-list-wrapper a:visited {
  color: #3572b0;
  color: var(--d2h-moved-label-color)
}

.d2h-file-list-header {
  text-align: left
}

.d2h-file-list-title {
  font-weight: 700
}

.d2h-file-list-line {
  display: flex;
  text-align: left
}

.d2h-file-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0
}

.d2h-file-list>li {
  border-bottom: 1px solid #ddd;
  border-bottom: 1px solid var(--d2h-border-color);
  margin: 0;
  padding: 5px 10px
}

.d2h-file-list>li:last-child {
  border-bottom: none
}

.d2h-file-switch {
  cursor: pointer;
  display: none;
  font-size: 10px
}

.d2h-icon {
  fill: currentColor;
  margin-right: 10px;
  vertical-align: middle
}

.d2h-deleted {
  color: #c33;
  color: var(--d2h-del-label-color)
}

.d2h-added {
  color: #399839;
  color: var(--d2h-ins-label-color)
}

.d2h-changed {
  color: #d0b44c;
  color: var(--d2h-change-label-color)
}

.d2h-moved {
  color: #3572b0;
  color: var(--d2h-moved-label-color)
}

.d2h-tag {
  background-color: #fff;
  background-color: var(--d2h-bg-color);
  display: flex;
  font-size: 10px;
  margin-left: 5px;
  padding: 0 2px
}

.d2h-deleted-tag {
  border: 1px solid #c33;
  border: 1px solid var(--d2h-del-label-color)
}

.d2h-added-tag {
  border: 1px solid #399839;
  border: 1px solid var(--d2h-ins-label-color)
}

.d2h-changed-tag {
  border: 1px solid #d0b44c;
  border: 1px solid var(--d2h-change-label-color)
}

.d2h-moved-tag {
  border: 1px solid #3572b0;
  border: 1px solid var(--d2h-moved-label-color)
}

.d2h-dark-color-scheme {
  background-color: #0d1117;
  background-color: var(--d2h-dark-bg-color);
  color: #e6edf3;
  color: var(--d2h-dark-color)
}

.d2h-dark-color-scheme .d2h-file-header {
  background-color: #161b22;
  background-color: var(--d2h-dark-file-header-bg-color);
  border-bottom: #30363d;
  border-bottom: var(--d2h-dark-file-header-border-color)
}

.d2h-dark-color-scheme .d2h-lines-added {
  border: 1px solid rgba(46, 160, 67, .4);
  border: 1px solid var(--d2h-dark-ins-border-color);
  color: #3fb950;
  color: var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-lines-deleted {
  border: 1px solid rgba(248, 81, 73, .4);
  border: 1px solid var(--d2h-dark-del-border-color);
  color: #f85149;
  color: var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-code-line del,
.d2h-dark-color-scheme .d2h-code-side-line del {
  background-color: #f8514966;
  background-color: var(--d2h-dark-del-highlight-bg-color)
}

.d2h-dark-color-scheme .d2h-code-line ins,
.d2h-dark-color-scheme .d2h-code-side-line ins {
  background-color: #2ea04366;
  background-color: var(--d2h-dark-ins-highlight-bg-color)
}

.d2h-dark-color-scheme .d2h-diff-tbody {
  border-color: #30363d;
  border-color: var(--d2h-dark-border-color)
}

.d2h-dark-color-scheme .d2h-code-side-linenumber {
  background-color: #0d1117;
  background-color: var(--d2h-dark-bg-color);
  border-color: #21262d;
  border-color: var(--d2h-dark-line-border-color);
  color: #6e7681;
  color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
  background-color: #6e76811a;
  background-color: var(--d2h-dark-empty-placeholder-bg-color);
  border-color: #30363d;
  border-color: var(--d2h-dark-empty-placeholder-border-color)
}

.d2h-dark-color-scheme .d2h-code-linenumber {
  background-color: #0d1117;
  background-color: var(--d2h-dark-bg-color);
  border-color: #21262d;
  border-color: var(--d2h-dark-line-border-color);
  color: #6e7681;
  color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-del {
  background-color: #f851491a;
  background-color: var(--d2h-dark-del-bg-color);
  border-color: #f8514966;
  border-color: var(--d2h-dark-del-border-color)
}

.d2h-dark-color-scheme .d2h-ins {
  background-color: #2ea04326;
  background-color: var(--d2h-dark-ins-bg-color);
  border-color: #2ea04366;
  border-color: var(--d2h-dark-ins-border-color)
}

.d2h-dark-color-scheme .d2h-info {
  background-color: #388bfd1a;
  background-color: var(--d2h-dark-info-bg-color);
  border-color: #388bfd66;
  border-color: var(--d2h-dark-info-border-color);
  color: #6e7681;
  color: var(--d2h-dark-dim-color)
}

.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
  background-color: #d2992233;
  background-color: var(--d2h-dark-change-del-color)
}

.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
  background-color: #2ea04340;
  background-color: var(--d2h-dark-change-ins-color)
}

.d2h-dark-color-scheme .d2h-file-wrapper {
  border: 1px solid #30363d;
  border: 1px solid var(--d2h-dark-border-color)
}

.d2h-dark-color-scheme .d2h-file-collapse {
  border: 1px solid #0d1117;
  border: 1px solid var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
  background-color: #388bfd1a;
  background-color: var(--d2h-dark-selected-color)
}

.d2h-dark-color-scheme .d2h-file-list-wrapper a,
.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
  color: #3572b0;
  color: var(--d2h-dark-moved-label-color)
}

.d2h-dark-color-scheme .d2h-file-list>li {
  border-bottom: 1px solid #0d1117;
  border-bottom: 1px solid var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-deleted {
  color: #f85149;
  color: var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-added {
  color: #3fb950;
  color: var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-changed {
  color: #d29922;
  color: var(--d2h-dark-change-label-color)
}

.d2h-dark-color-scheme .d2h-moved {
  color: #3572b0;
  color: var(--d2h-dark-moved-label-color)
}

.d2h-dark-color-scheme .d2h-tag {
  background-color: #0d1117;
  background-color: var(--d2h-dark-bg-color)
}

.d2h-dark-color-scheme .d2h-deleted-tag {
  border: 1px solid #f85149;
  border: 1px solid var(--d2h-dark-del-label-color)
}

.d2h-dark-color-scheme .d2h-added-tag {
  border: 1px solid #3fb950;
  border: 1px solid var(--d2h-dark-ins-label-color)
}

.d2h-dark-color-scheme .d2h-changed-tag {
  border: 1px solid #d29922;
  border: 1px solid var(--d2h-dark-change-label-color)
}

.d2h-dark-color-scheme .d2h-moved-tag {
  border: 1px solid #3572b0;
  border: 1px solid var(--d2h-dark-moved-label-color)
}

@media (prefers-color-scheme:dark) {
  .d2h-auto-color-scheme {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    color: #e6edf3;
    color: var(--d2h-dark-color)
  }

  .d2h-auto-color-scheme .d2h-file-header {
    background-color: #161b22;
    background-color: var(--d2h-dark-file-header-bg-color);
    border-bottom: #30363d;
    border-bottom: var(--d2h-dark-file-header-border-color)
  }

  .d2h-auto-color-scheme .d2h-lines-added {
    border: 1px solid rgba(46, 160, 67, .4);
    border: 1px solid var(--d2h-dark-ins-border-color);
    color: #3fb950;
    color: var(--d2h-dark-ins-label-color)
  }

  .d2h-auto-color-scheme .d2h-lines-deleted {
    border: 1px solid rgba(248, 81, 73, .4);
    border: 1px solid var(--d2h-dark-del-border-color);
    color: #f85149;
    color: var(--d2h-dark-del-label-color)
  }

  .d2h-auto-color-scheme .d2h-code-line del,
  .d2h-auto-color-scheme .d2h-code-side-line del {
    background-color: #f8514966;
    background-color: var(--d2h-dark-del-highlight-bg-color)
  }

  .d2h-auto-color-scheme .d2h-code-line ins,
  .d2h-auto-color-scheme .d2h-code-side-line ins {
    background-color: #2ea04366;
    background-color: var(--d2h-dark-ins-highlight-bg-color)
  }

  .d2h-auto-color-scheme .d2h-diff-tbody {
    border-color: #30363d;
    border-color: var(--d2h-dark-border-color)
  }

  .d2h-auto-color-scheme .d2h-code-side-linenumber {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    border-color: #21262d;
    border-color: var(--d2h-dark-line-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
  }

  .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
  .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
    background-color: #6e76811a;
    background-color: var(--d2h-dark-empty-placeholder-bg-color);
    border-color: #30363d;
    border-color: var(--d2h-dark-empty-placeholder-border-color)
  }

  .d2h-auto-color-scheme .d2h-code-linenumber {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color);
    border-color: #21262d;
    border-color: var(--d2h-dark-line-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
  }

  .d2h-auto-color-scheme .d2h-del {
    background-color: #f851491a;
    background-color: var(--d2h-dark-del-bg-color);
    border-color: #f8514966;
    border-color: var(--d2h-dark-del-border-color)
  }

  .d2h-auto-color-scheme .d2h-ins {
    background-color: #2ea04326;
    background-color: var(--d2h-dark-ins-bg-color);
    border-color: #2ea04366;
    border-color: var(--d2h-dark-ins-border-color)
  }

  .d2h-auto-color-scheme .d2h-info {
    background-color: #388bfd1a;
    background-color: var(--d2h-dark-info-bg-color);
    border-color: #388bfd66;
    border-color: var(--d2h-dark-info-border-color);
    color: #6e7681;
    color: var(--d2h-dark-dim-color)
  }

  .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
    background-color: #d2992233;
    background-color: var(--d2h-dark-change-del-color)
  }

  .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
    background-color: #2ea04340;
    background-color: var(--d2h-dark-change-ins-color)
  }

  .d2h-auto-color-scheme .d2h-file-wrapper {
    border: 1px solid #30363d;
    border: 1px solid var(--d2h-dark-border-color)
  }

  .d2h-auto-color-scheme .d2h-file-collapse {
    border: 1px solid #0d1117;
    border: 1px solid var(--d2h-dark-bg-color)
  }

  .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
    background-color: #388bfd1a;
    background-color: var(--d2h-dark-selected-color)
  }

  .d2h-auto-color-scheme .d2h-file-list-wrapper a,
  .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
    color: #3572b0;
    color: var(--d2h-dark-moved-label-color)
  }

  .d2h-auto-color-scheme .d2h-file-list>li {
    border-bottom: 1px solid #0d1117;
    border-bottom: 1px solid var(--d2h-dark-bg-color)
  }

  .d2h-dark-color-scheme .d2h-deleted {
    color: #f85149;
    color: var(--d2h-dark-del-label-color)
  }

  .d2h-auto-color-scheme .d2h-added {
    color: #3fb950;
    color: var(--d2h-dark-ins-label-color)
  }

  .d2h-auto-color-scheme .d2h-changed {
    color: #d29922;
    color: var(--d2h-dark-change-label-color)
  }

  .d2h-auto-color-scheme .d2h-moved {
    color: #3572b0;
    color: var(--d2h-dark-moved-label-color)
  }

  .d2h-auto-color-scheme .d2h-tag {
    background-color: #0d1117;
    background-color: var(--d2h-dark-bg-color)
  }

  .d2h-auto-color-scheme .d2h-deleted-tag {
    border: 1px solid #f85149;
    border: 1px solid var(--d2h-dark-del-label-color)
  }

  .d2h-auto-color-scheme .d2h-added-tag {
    border: 1px solid #3fb950;
    border: 1px solid var(--d2h-dark-ins-label-color)
  }

  .d2h-auto-color-scheme .d2h-changed-tag {
    border: 1px solid #d29922;
    border: 1px solid var(--d2h-dark-change-label-color)
  }

  .d2h-auto-color-scheme .d2h-moved-tag {
    border: 1px solid #3572b0;
    border: 1px solid var(--d2h-dark-moved-label-color)
  }
}

.devui-code-review {
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  box-sizing: border-box
}

.devui-code-review,
.devui-code-review__header {
  border-radius: var(--devui-border-radius-card, 8px)
}

.devui-code-review__header {
  align-items: center;
  background-color: var(--devui-global-bg-normal, #fff);
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding-right: 20px;
  position: relative;
  width: 100%
}

.devui-code-review__header--unfold {
  border-bottom: 1px solid #d8d8d8;
  border-radius: var(--devui-border-radius-card, 8px) var(--devui-border-radius-card, 8px) 0 0;
  box-shadow: inset 0 -1px 0 0 var(--devui-brand-foil, #f2f2f3)
}

.devui-code-review__header .diff-type {
  border-radius: 8px 0;
  font-size: var(--devui-font-size-sm, 12px);
  height: 16px;
  left: 0;
  letter-spacing: 0;
  line-height: 16px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 16px
}

.devui-code-review__header .diff-type.modify {
  background-color: #fa984133;
  color: #fa9841
}

.devui-code-review__header .diff-type.add {
  background-color: #3ac29533;
  color: #3ac295
}

.devui-code-review__header .diff-type.delete {
  background-color: #f66f6a33;
  color: #f66f6a
}

.devui-code-review__header .diff-type.rename {
  background-color: #71757f33;
  color: #71757f
}

.devui-code-review__header .file-info {
  align-items: center;
  display: flex;
  padding-left: 18px
}

.devui-code-review__header .file-info>span {
  display: inline-block;
  height: 20px;
  line-height: 20px
}

.devui-code-review__header .file-info>svg {
  margin-right: 8px
}

.devui-code-review__header .file-info .invert {
  transform: scale(-1)
}

.devui-code-review__header .file-info .file-name {
  color: var(--devui-text, #252b3a);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-code-review__header .file-info .diff-lines,
.devui-code-review__header .file-info .file-name {
  font-size: var(--devui-font-size-sm, 12px);
  font-weight: 700
}

.devui-code-review__header .file-info .diff-lines.add-lines {
  color: var(--devui-success, #50d4ab);
  padding-left: 8px
}

.devui-code-review__header .file-info .diff-lines.delete-lines {
  color: var(--devui-danger, #f66f6a);
  margin-right: 8px;
  padding-left: 4px
}

.devui-code-review__content {
  line-height: 20px
}

.devui-code-review__content table.d2h-diff-table {
  font-size: 12px;
  margin: 0;
  table-layout: fixed
}

.devui-code-review__content tr {
  border: none
}

.devui-code-review__content tr:hover .d2h-info {
  background-color: #bfcbf3
}

.devui-code-review__content td,
.devui-code-review__content th {
  border: none;
  padding: 0
}

.devui-code-review__content td:first-child {
  display: table-cell;
  position: static
}

.devui-code-review__content td.expand-icon-wrapper {
  text-align: center
}

.devui-code-review__content td.comment-icon-hover {
  background-color: #bfcbf3 !important
}

.devui-code-review__content td .expand-icon {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 100%
}

.devui-code-review__content td .expand-icon:hover {
  background-color: var(--devui-primary, #5e7ce0)
}

.devui-code-review__content td .expand-icon:hover svg g g g g,
.devui-code-review__content td .expand-icon:hover svg g g path,
.devui-code-review__content td .expand-icon:hover svg g g polygon {
  fill: var(--devui-light-text, #fff)
}

.devui-code-review__content .expand-line {
  height: 24px;
  line-height: 24px
}

.devui-code-review__content .d2h-file-wrapper {
  border: none
}

.devui-code-review__content .d2h-code-linenumber:after,
.devui-code-review__content .d2h-code-side-linenumber:after {
  content: ""
}

.devui-code-review__content .d2h-code-linenumber {
  border-right: 2px solid transparent
}

.devui-code-review__content .d2h-code-line-ctn {
  word-break: break-all;
  word-wrap: break-word !important;
  display: inline-block !important;
  line-break: anywhere;
  white-space: break-spaces !important
}

.devui-code-review__content .d2h-code-line,
.devui-code-review__content .d2h-code-side-line {
  padding-left: 0;
  padding-right: 16px;
  width: 100%
}

.devui-code-review__content.side-by-side tr td:nth-of-type(3),
.devui-code-review__content.side-by-side tr.comment-block td:last-child {
  border-left: 1px solid #eee
}

.devui-code-review__content.side-by-side tr.comment-block .comment-cell {
  vertical-align: top
}

.devui-code-review__content.side-by-side .d2h-file-side-diff {
  overflow: hidden;
  width: 100%
}

.devui-code-review__content.side-by-side .d2h-code-side-linenumber {
  display: table-cell;
  position: static
}

.devui-code-review__content.side-by-side .d-code-left:nth-of-type(2)>.d2h-code-side-line,
.devui-code-review__content.side-by-side .d-code-right:nth-of-type(4)>.d2h-code-side-line {
  border-left: 2px solid transparent
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-cntx {
  background-color: #fff8c5
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-del {
  background-color: #ffe5b4
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-del.d2h-code-linenumber {
  background-color: #ffc89d
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-ins {
  background-color: #d1f1a8
}

.devui-code-review__content .d2h-file-diff .comment-checked.d2h-ins.d2h-code-linenumber {
  background-color: #daf4ae
}

.devui-code-review__content .comment-checked.d2h-cntx {
  background-color: #fff8c5
}

.devui-code-review__content .comment-checked.d2h-del {
  background-color: #ffe5b4
}

.devui-code-review__content .comment-checked.d2h-del.d2h-code-side-linenumber {
  background-color: #ffc89d
}

.devui-code-review__content .comment-checked.d2h-ins {
  background-color: #d1f1a8
}

.devui-code-review__content .comment-checked.d2h-ins.d2h-code-side-linenumber {
  background-color: #daf4ae
}

.devui-code-review__content .comment-checked.d2h-code-linenumber {
  border-right: 2px solid #fe7300
}

.devui-code-review__content .comment-checked.d-code-left:nth-of-type(2)>.d2h-code-side-line,
.devui-code-review__content .comment-checked.d-code-right:nth-of-type(4)>.d2h-code-side-line {
  border-left: 2px solid #fe7300
}

.devui-code-review .comment-icon {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #252b3a29;
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  position: fixed;
  transform: translate(-50%);
  width: 22px;
  z-index: 10
}

.devui-code-review--left-selected .d-code-right span,
.devui-code-review--right-selected .d-code-left span {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-collapse {
  background: var(--devui-base-bg, #fff);
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  font-size: var(--devui-font-size, 12px);
  overflow-y: auto;
  width: 100%
}

.devui-collapse__item .devui-collapse--overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-collapse__item-title {
  background-color: var(--devui-base-bg, #fff);
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: block;
  font-weight: 400;
  height: 45px;
  line-height: 45px;
  padding: 0 28px 0 20px;
  width: 100%
}

.devui-collapse__item-title.devui-collapse__item--disabled {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-collapse__item-title.devui-collapse__item--disabled>.devui-collapse__open-icon svg path {
  fill: currentColor !important
}

.devui-collapse__item-title:not(.devui-collapse__item--disabled):hover {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-collapse__item>.devui-collapse__item-title {
  position: relative
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  text-indent: 0;
  top: 14px;
  transition: transform .4s ease-out;
  width: 16px
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon svg {
  height: 16px;
  width: 16px
}

.devui-collapse__item>.devui-collapse__item-title>.devui-collapse__open-icon svg path {
  fill: var(--devui-text-weak, #575d6c)
}

.devui-collapse__item>.devui-collapse__item-title.devui-collapse--open>.devui-collapse__open-icon {
  transform: rotate(180deg);
  transform-origin: center
}

.devui-collapse__item-content {
  color: var(--devui-text-weak, #575d6c);
  line-height: 1.5;
  padding: 0 12px 0 20px
}

.devui-collapse-transition-leave-active {
  animation: panelUpOut .4s ease-in-out;
  animation-fill-mode: both;
  transition: all .4s ease-in-out
}

.devui-collapse-transition-enter-active {
  animation: panelUpIn .4s ease-in-out;
  animation-fill-mode: both;
  transition: all .4s ease-in-out
}

.devui-tabs__nav--pills,
.devui-tabs__nav--tabs {
  background: transparent;
  font-size: var(--devui-font-size, 12px);
  list-style: none
}

.devui-tabs__nav--pills li,
.devui-tabs__nav--tabs li {
  border: 2px solid transparent;
  cursor: pointer
}

.devui-tabs__nav--pills li a,
.devui-tabs__nav--tabs li a {
  background-color: transparent;
  border: none;
  color: var(--devui-aide-text, #71757f);
  cursor: pointer;
  line-height: 30px;
  padding: 0;
  text-decoration: none
}

.devui-tabs__nav--pills li a:active,
.devui-tabs__nav--pills li a:focus,
.devui-tabs__nav--pills li a:hover,
.devui-tabs__nav--tabs li a:active,
.devui-tabs__nav--tabs li a:focus,
.devui-tabs__nav--tabs li a:hover {
  outline: none
}

.devui-tabs__nav--pills li.disabled a,
.devui-tabs__nav--tabs li.disabled a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tabs__nav--pills li.active a,
.devui-tabs__nav--pills li:hover:not(.disabled) a,
.devui-tabs__nav--tabs li.active a,
.devui-tabs__nav--tabs li:hover:not(.disabled) a {
  color: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--pills li:after,
.devui-tabs__nav--tabs li:after {
  background: transparent;
  content: "";
  display: block;
  height: 2px;
  margin: auto;
  transition: width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));
  width: 0
}

.devui-tabs__nav--pills li.active:after,
.devui-tabs__nav--tabs li.active:after {
  background: var(--devui-brand, #5e7ce0);
  width: 100%
}

.devui-tabs__nav--pills .devui-tabs__new-tab,
.devui-tabs__nav--tabs .devui-tabs__new-tab {
  padding: 2px 0 0
}

.devui-tabs__nav--options {
  background: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-radius: var(--devui-border-radius, 2px);
  padding: 2px;
  width: -moz-fit-content;
  width: fit-content
}

.devui-tabs__nav--options>li {
  background-color: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  cursor: pointer;
  transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--options>li span>a {
  border: none;
  color: var(--devui-aide-text, #71757f);
  line-height: 26px;
  padding: 0 16px
}

.devui-tabs__nav--options>li span>a:active,
.devui-tabs__nav--options>li span>a:focus,
.devui-tabs__nav--options>li span>a:hover {
  outline: none
}

.devui-tabs__nav--options>li.active {
  background: var(--devui-global-bg, #f6f6f8)
}

.devui-tabs__nav--options>li.active span>a {
  color: var(--devui-brand, #5e7ce0);
  padding: 0 16px
}

.devui-tabs__nav--options>li.disabled {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--options>li.disabled a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tabs__nav--options>li.active span>a:hover,
.devui-tabs__nav--options>li:hover:not(.disabled) span>a:hover {
  background: transparent;
  color: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--options .devui-tabs__close-btn {
  margin-right: 12px
}

.devui-tabs__nav--options .devui-tabs__new-tab {
  padding: 2px 16px 0
}

.devui-tabs__nav--slider {
  align-items: center;
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  border: none;
  border-radius: var(--devui-border-radius, 2px);
  display: flex;
  font-size: var(--devui-font-size, 12px);
  position: relative;
  width: -moz-fit-content;
  width: fit-content
}

.devui-tabs__nav--slider>li {
  cursor: pointer;
  margin: 2px;
  position: relative;
  z-index: 1
}

.devui-tabs__nav--slider>li:first-child {
  border-left-width: 1px;
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-tabs__nav--slider>li:last-child {
  border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0
}

.devui-tabs__nav--slider>li a {
  border: none;
  color: var(--devui-aide-text, #71757f);
  cursor: pointer;
  line-height: 28px;
  padding: 0 16px
}

.devui-tabs__nav--slider>li a:active,
.devui-tabs__nav--slider>li a:focus,
.devui-tabs__nav--slider>li a:hover {
  outline: none
}

.devui-tabs__nav--slider>li.disabled {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--slider>li.disabled a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tabs__nav--slider>li.active a,
.devui-tabs__nav--slider>li:hover:not(.disabled) a {
  color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--slider>li.active a:hover,
.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover {
  background: transparent;
  color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--slider>li.active {
  text-shadow: 0 0 .7px var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled) {
  color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--slider .devui-tabs__close-btn {
  margin-right: 12px
}

.devui-tabs__nav--slider .devui-tabs__new-tab {
  padding: 2px 16px 0
}

.devui-tabs__nav--wrapped {
  background: transparent;
  background-color: var(--devui-base-bg, #fff);
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  font-size: var(--devui-font-size, 12px)
}

.devui-tabs__nav--wrapped>li {
  cursor: pointer;
  padding: 8px 16px;
  position: relative
}

.devui-tabs__nav--wrapped>li a {
  border: none;
  border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;
  color: var(--devui-aide-text, #71757f);
  cursor: pointer
}

.devui-tabs__nav--wrapped>li a:active,
.devui-tabs__nav--wrapped>li a:focus,
.devui-tabs__nav--wrapped>li a:hover {
  outline: none
}

.devui-tabs__nav--wrapped>li.disabled {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tabs__nav--wrapped>li.disabled a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tabs__nav--wrapped>li.active {
  background: var(--devui-global-bg, #f6f6f8);
  border: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-bottom: 1px solid transparent;
  border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;
  margin: -1px
}

.devui-tabs__nav--wrapped>li.active a {
  color: var(--devui-brand-active, #526ecc)
}

.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a {
  color: var(--devui-brand, #5e7ce0)
}

.devui-tabs__nav--tabs {
  border-bottom: 1px solid var(--devui-line, #d7d8da)
}

.devui-tabs__nav--tabs li {
  margin-bottom: -3px;
  margin-left: 32px
}

.devui-tabs__nav--tabs li:first-child {
  margin-left: 0
}

.devui-tabs__nav--pills>li {
  margin-left: 32px
}

.devui-tabs__nav--pills>li:first-child {
  margin-left: 0
}

.devui-tabs__nav {
  align-items: center;
  display: flex;
  list-style: none;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-left: 0;
  scrollbar-width: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-overflow-style: none
}

.devui-tabs__nav::-webkit-scrollbar {
  display: none
}

.devui-tabs__nav li a {
  text-decoration: none
}

.devui-tabs__nav li a.custom-width {
  display: inline-block;
  padding: 0;
  text-align: center
}

.devui-tabs__nav--left,
.devui-tabs__nav--right {
  margin: 0
}

.devui-tabs__nav--left .devui-tabs__nav-slider-animation,
.devui-tabs__nav--right .devui-tabs__nav-slider-animation {
  transition: top var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.devui-tabs__nav--left .devui-tabs__new-tab,
.devui-tabs__nav--right .devui-tabs__new-tab {
  text-align: center
}

.devui-tabs__nav--right {
  border-bottom: none;
  display: block;
  float: right;
  margin-left: 10px
}

.devui-tabs__nav--right>li {
  margin-left: 0;
  padding: 0 16px;
  position: relative
}

.devui-tabs__nav--right>li:after {
  display: none
}

.devui-tabs__nav--right>li:before {
  background: transparent;
  content: " ";
  height: 0;
  left: -5px;
  margin: auto;
  position: absolute;
  top: 0;
  transition: height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));
  width: 2px
}

.devui-tabs__nav--right>li.active:before {
  background: var(--devui-brand, #5e7ce0);
  height: 100%
}

.devui-tabs__nav--left {
  border-bottom: none;
  display: block;
  float: left;
  margin-right: 10px
}

.devui-tabs__nav--left>li {
  margin-left: 0;
  padding: 0 16px;
  position: relative
}

.devui-tabs__nav--left>li:after {
  background: transparent;
  content: " ";
  height: 0;
  margin: auto;
  position: absolute;
  right: -5px;
  top: 0;
  transition: height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));
  width: 2px
}

.devui-tabs__nav--left>li.active:after {
  background: var(--devui-brand, #5e7ce0);
  height: 100%;
  width: 2px
}

.devui-tabs__nav-content {
  align-items: center;
  display: flex
}

.devui-tabs__nav--options {
  padding-left: 2px
}

.devui-tabs__nav-slider-animation {
  background-color: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: 0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12));
  height: 30px;
  position: absolute;
  top: 1px;
  transition: left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)), width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));
  z-index: 0
}

.devui-tabs__close-btn .devui-icon__container:hover,
.devui-tabs__new-tab .devui-icon__container:hover {
  color: var(--devui-text, #252b3a)
}

.devui-tabs__close-btn .devui-icon__container>i,
.devui-tabs__new-tab .devui-icon__container>i {
  transition: none
}

.devui-tabs__new-tab .devui-icon__container {
  color: var(--devui-aide-text, #71757f)
}

.devui-tabs__close-btn {
  margin-left: 12px
}

.devui-tabs__close-btn .devui-icon__container {
  color: var(--devui-form-control-line, #d7d8da)
}

.devui-tabs--left .devui-tabs__nav--options,
.devui-tabs--left .devui-tabs__nav--wrapped,
.devui-tabs--right .devui-tabs__nav--options,
.devui-tabs--right .devui-tabs__nav--wrapped {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--left .devui-tabs__nav--options>li:after,
.devui-tabs--left .devui-tabs__nav--options>li:before,
.devui-tabs--left .devui-tabs__nav--wrapped>li:after,
.devui-tabs--left .devui-tabs__nav--wrapped>li:before,
.devui-tabs--right .devui-tabs__nav--options>li:after,
.devui-tabs--right .devui-tabs__nav--options>li:before,
.devui-tabs--right .devui-tabs__nav--wrapped>li:after,
.devui-tabs--right .devui-tabs__nav--wrapped>li:before {
  display: none
}

.devui-tabs--left .devui-tabs__nav--wrapped,
.devui-tabs--right .devui-tabs__nav--wrapped {
  border-bottom: none
}

.devui-tabs--left .devui-tabs__nav--wrapped>li,
.devui-tabs--right .devui-tabs__nav--wrapped>li {
  padding: 8px 16px
}

.devui-tabs--left .devui-tabs__nav--slider>li:after,
.devui-tabs--left .devui-tabs__nav--slider>li:before,
.devui-tabs--right .devui-tabs__nav--slider>li:after,
.devui-tabs--right .devui-tabs__nav--slider>li:before {
  display: none
}

.devui-tabs--left .devui-tabs__nav--slider .devui-tabs__nav-slider-animation,
.devui-tabs--right .devui-tabs__nav--slider .devui-tabs__nav-slider-animation {
  left: 1px
}

.devui-tabs--right .devui-tabs__nav--wrapped {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--right .devui-tabs__nav--wrapped>li a,
.devui-tabs--right .devui-tabs__nav--wrapped>li.active {
  border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0
}

.devui-tabs--right .devui-tabs__nav--wrapped>li.active {
  border-bottom-color: var(--devui-dividing-line, #f2f2f3);
  border-left-color: transparent
}

.devui-tabs--right .devui-tabs__nav--tabs {
  border-left: 1px solid var(--devui-line, #d7d8da)
}

.devui-tabs--left .devui-tabs__nav--wrapped {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-tabs--left .devui-tabs__nav--wrapped>li a,
.devui-tabs--left .devui-tabs__nav--wrapped>li.active {
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-tabs--left .devui-tabs__nav--wrapped>li.active {
  border-bottom-color: var(--devui-dividing-line, #f2f2f3);
  border-right-color: transparent
}

.devui-tabs--left .devui-tabs__nav--tabs {
  border-right: 1px solid var(--devui-line, #d7d8da)
}

.devui-tab__content {
  margin-top: 10px;
  overflow: hidden;
  padding: 10px 0
}

.devui-color-picker-palette {
  position: relative;
  width: 100%
}

.devui-color-picker-palette__black,
.devui-color-picker-palette__white {
  inset: 0;
  position: absolute
}

.devui-color-picker-palette__black {
  background: linear-gradient(0deg, #000, transparent)
}

.devui-color-picker-palette__white {
  background: linear-gradient(90deg, #fff, #fff0)
}

.devui-color-picker-palette-handler {
  position: absolute
}

.devui-color-picker-palette-handler div {
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px #0000005e;
  cursor: pointer;
  height: 10px;
  width: 10px
}

.devui-color-picker-hue-slider {
  border-radius: 15px;
  box-shadow: 2px 0 8px #00000014;
  height: 14px;
  margin: 13px 0;
  position: relative;
  width: 100%
}

.devui-color-picker-hue-slider.transparent {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  background-repeat: repeat
}

.devui-color-picker-hue-slider__bar {
  background: -ms-linear-gradient(left, red 0, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red 100%);
  border-radius: 15px;
  height: 100%;
  position: relative;
  width: 100%
}

.devui-color-picker-hue-slider__bar-pointer {
  height: 14px;
  position: absolute;
  width: 14px
}

.devui-color-picker-hue-slider__bar-handle {
  background-color: #f8f8f8;
  border-radius: 6px;
  box-shadow: 0 1px 4px #0000005e;
  cursor: pointer;
  height: 14px;
  margin-top: 2px;
  transform: translate(-7px, -2px);
  width: 14px
}

.devui-color-picker-hue-slider__bar-handle.vertical {
  margin-top: 0;
  transform: translateY(-7px)
}

.devui-color-picker-alpha-slider {
  border-radius: 15px;
  box-shadow: 2px 0 8px #00000014;
  height: 14px;
  margin-bottom: 15px;
  position: relative;
  width: 100%
}

.devui-color-picker-alpha-slider.transparent {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  background-repeat: repeat
}

.devui-color-picker-alpha-slider__bar {
  border-radius: 15px;
  height: 100%;
  position: relative;
  width: 100%
}

.devui-color-picker-alpha-slider__bar-pointer {
  height: 14px;
  position: absolute;
  width: 14px
}

.devui-color-picker-alpha-slider__bar-handle {
  background-color: #f8f8f8;
  border-radius: 6px;
  box-shadow: 0 1px 4px #0000005e;
  cursor: pointer;
  height: 14px;
  margin-top: 2px;
  transform: translate(-7px, -2px);
  width: 14px
}

.devui-color-picker-alpha-slider__bar-handle.vertical {
  margin-top: 0;
  transform: translateY(-7px)
}

.devui-color-picker-edit {
  align-items: center;
  justify-content: space-between
}

.devui-color-picker-edit-text {
  display: inline-block;
  padding: 0 10px
}

.devui-color-picker-edit-name,
.devui-color-picker-edit-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 50px
}

.devui-color-picker-edit-name {
  cursor: pointer;
  justify-content: space-around
}

.devui-color-picker-edit-flex,
.devui-color-picker-edit-name {
  align-items: center;
  display: flex
}

.devui-color-picker-edit-input {
  flex: 1;
  padding: 0 5px
}

.devui-color-picker-edit-input input {
  border: none;
  outline: none;
  text-align: center;
  width: 100%
}

.devui-color-picker-edit-input-wrapper {
  border: 1px solid rgba(0, 0, 0, .2);
  padding: 2px;
  width: 100%
}

.devui-color-picker-edit-input-wrapper:focus-within {
  border: 1px solid var(--devui-primary)
}

.devui-color-picker-edit-input.string-input .devui-color-picker-edit-input-wrapper {
  border-radius: 5px
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper {
  border-radius: 0
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px
}

.devui-color-picker-edit-input.number-input .devui-color-picker-edit-input-wrapper:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px
}

.devui-color-picker-basic {
  align-items: center;
  flex-wrap: wrap
}

.devui-color-picker-basic-div {
  border: 1px solid #e7e7e7;
  border-radius: 1px;
  box-sizing: content-box;
  cursor: pointer;
  height: 20px;
  margin: 4px;
  width: 20px
}

.devui-color-picker-panel {
  border-radius: 4px;
  box-shadow: 0 3px 5px -1px #0000001a, 0 5px 8px #0000001a, 0 1px 14px #0000001a;
  padding: 12px;
  width: 270px
}

.devui-color-picker-history {
  margin-top: 10px
}

.devui-color-picker-history_color-box {
  border: 1px solid #e7e7e7;
  cursor: pointer;
  height: 20px;
  margin: 5px;
  width: 20px
}

.devui-color-picker-history_color-box.transparent {
  background: linear-gradient(to bottom right, transparent, transparent calc(50% - 1.5px), #f18887 50%, transparent calc(50% + 1.5px), transparent)
}

.devui-color-picker {
  position: relative
}

.devui-color-picker-position {
  background-color: var(--devui-connected-overlay-bg, #fff);
  position: absolute;
  z-index: var(--devui-z-index-function-widget, 999)
}

.devui-color-picker-color-value {
  color: #cc0f0f;
  display: flex;
  font-weight: 700;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4
}

.devui-color-picker-container {
  border: 1px solid #e0e0e6;
  border-radius: 3px;
  padding: 3px
}

.devui-color-picker-container-wrap {
  box-shadow: 3px 0 5px #00000014;
  box-sizing: content-box;
  cursor: pointer;
  display: inline-block;
  height: 26px;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 100%
}

.devui-color-picker-container-wrap-current-color {
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 3
}

.devui-color-picker-container-wrap-current-color-transparent {
  height: 100%;
  left: 0;
  overflow: hidden;
  padding: 3px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 2
}

.devui-color-picker-container-wrap-transparent {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
  background-repeat: repeat
}

.color-picker-transition-enter-from,
.color-picker-transition-leave-to {
  opacity: 0
}

.color-picker-transition-enter-to,
.color-picker-transition-leave-from {
  opacity: 1
}

.color-picker-transition-enter-active,
.color-picker-transition-leave-active {
  transition: opacity .2s ease-in-out
}

.devui-comment {
  align-items: flex-start;
  display: flex
}

.devui-comment__avatar {
  margin: 0 16px 0 0
}

.devui-comment__main {
  width: 100%
}

.devui-comment__head {
  align-items: center;
  display: flex
}

.devui-comment__author {
  color: var(--devui-text-weak, #575d6c);
  font-size: var(--devui-font-size, 12px);
  font-weight: 800;
  padding: 0 8px 0 0
}

.devui-comment__datetime {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size, 12px)
}

.devui-comment__content {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px);
  line-height: 20px;
  margin-top: 8px
}

.devui-comment__actions {
  list-style-type: none;
  margin: 12px 0 0;
  padding: 0
}

.devui-countdown .countdown-content {
  color: var(--devui-text, #252b3a);
  font-size: 24px
}

.devui-countdown .countdown-content span {
  display: inline-block
}

.devui-countdown .countdown-content .countdown-prefix {
  margin-right: 4px
}

.devui-countdown .countdown-content .countdown-suffix {
  margin-left: 4px
}

.devui-data-grid,
.devui-data-grid * {
  box-sizing: border-box
}

.devui-data-grid ::-webkit-scrollbar,
.devui-data-grid::-webkit-scrollbar {
  height: 8px;
  width: 8px
}

.devui-data-grid ::-webkit-scrollbar-track,
.devui-data-grid::-webkit-scrollbar-track {
  background-color: transparent
}

.devui-data-grid ::-webkit-scrollbar-thumb,
.devui-data-grid::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px
}

.devui-data-grid ::-webkit-scrollbar-thumb:hover,
.devui-data-grid::-webkit-scrollbar-thumb:hover {
  background-color: var(--devui-placeholder, #babbc0)
}

.devui-data-grid ::-webkit-scrollbar-corner,
.devui-data-grid::-webkit-scrollbar-corner {
  background-color: transparent
}

.devui-data-grid {
  height: 100%;
  max-height: inherit;
  position: relative;
  width: 100%
}

.devui-data-grid__x-space,
.devui-data-grid__y-space {
  inset: 0;
  position: absolute;
  z-index: -1
}

.devui-data-grid__empty {
  position: absolute;
  top: 47px;
  width: 100%;
  z-index: 5
}

.devui-data-grid__head-wrapper {
  flex: none;
  overflow-x: hidden;
  position: relative
}

.devui-data-grid__head-wrapper::-webkit-scrollbar-thumb {
  background-color: transparent
}

.devui-data-grid__head {
  background-color: var(--devui-base-bg, #fff);
  display: flex;
  width: -moz-fit-content;
  width: fit-content
}

.devui-data-grid__th {
  align-items: center;
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  color: var(--devui-text, #252b3a);
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: var(--devui-font-size-sm, 12px);
  font-weight: 700;
  padding: 0 16px;
  position: relative
}

.devui-data-grid__th .th-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-data-grid__th svg.th-sort-icon {
  cursor: pointer;
  margin-left: 8px;
  visibility: hidden
}

.devui-data-grid__th svg.th-sort-icon g use {
  fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-data-grid__th svg.th-sort-icon g polygon {
  fill: var(--devui-icon-bg, #fff)
}

.devui-data-grid__th svg.th-sort-icon:hover g use {
  fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-data-grid__th svg.th-sort-icon.asc {
  visibility: visible
}

.devui-data-grid__th svg.th-sort-icon.asc g use {
  fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__th svg.th-sort-icon.asc g polygon:last-of-type {
  opacity: .3
}

.devui-data-grid__th svg.th-sort-icon.desc {
  visibility: visible
}

.devui-data-grid__th svg.th-sort-icon.desc g use {
  fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__th svg.th-sort-icon.desc g polygon:last-of-type {
  opacity: .3
}

.devui-data-grid__th svg.th-sort-icon.th-sort-default-visible {
  visibility: visible
}

.devui-data-grid__th svg.th-filter-icon {
  cursor: pointer;
  display: block;
  height: 16px;
  margin-left: 8px;
  text-align: right;
  visibility: hidden
}

.devui-data-grid__th svg.th-filter-icon g {
  fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-data-grid__th svg.th-filter-icon:hover g {
  fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-data-grid__th svg.th-filter-icon.th-filter-default-visible {
  visibility: visible
}

.devui-data-grid__th:hover {
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-data-grid__th:hover .resize-handle {
  border-right: 2px solid var(--devui-line, #d7d8da)
}

.devui-data-grid__th:hover .resize-handle:before {
  border: 5px solid transparent;
  border-right: 5px solid var(--devui-line, #d7d8da);
  left: -8px
}

.devui-data-grid__th:hover .resize-handle:after,
.devui-data-grid__th:hover .resize-handle:before {
  content: "";
  display: block;
  height: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0
}

.devui-data-grid__th:hover .resize-handle:after {
  border: 5px solid transparent;
  border-left: 5px solid var(--devui-line, #d7d8da);
  left: 6px
}

.devui-data-grid__th:hover .th-filter-icon,
.devui-data-grid__th:hover .th-sort-icon {
  visibility: visible
}

.devui-data-grid__th:last-child:hover .resize-handle:after {
  display: none
}

.devui-data-grid__th .resize-handle {
  bottom: 0;
  cursor: col-resize;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 5px
}

.devui-data-grid__th .resize-handle:hover {
  border-right: 2px solid var(--devui-form-control-line-active, #5e7ce0)
}

.devui-data-grid__th .resize-handle:hover:after,
.devui-data-grid__th .resize-handle:hover:before {
  display: none
}

.devui-data-grid__th--mini {
  height: 24px;
  line-height: 24px
}

.devui-data-grid__th--xs {
  height: 32px;
  line-height: 32px
}

.devui-data-grid__th--lg,
.devui-data-grid__th--md,
.devui-data-grid__th--sm {
  height: 42px;
  line-height: 42px
}

.devui-data-grid__th--operable:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-data-grid__th--filter-active,
.devui-data-grid__th--sort-active {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-data-grid__th--filter-active svg.th-filter-icon {
  visibility: visible
}

.devui-data-grid__th--filter-active svg.th-filter-icon g,
.devui-data-grid__th--filter-active svg.th-filter-icon:hover g {
  fill: var(--devui-brand, #5e7ce0)
}

.devui-data-grid__body-wrapper {
  flex: 1;
  position: relative;
  width: 100%
}

.devui-data-grid__body-wrapper .devui-data-grid__empty {
  top: 0
}

.devui-data-grid__body,
.devui-data-grid__tr {
  width: -moz-fit-content;
  width: fit-content
}

.devui-data-grid__tr {
  background-color: var(--devui-base-bg, #fff);
  display: flex
}

.devui-data-grid__td {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  flex-grow: 0;
  flex-shrink: 0;
  font-size: var(--devui-font-size, 12px);
  overflow: hidden;
  padding: 0 16px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-data-grid__td .tree-indent-placeholder {
  display: inline-block
}

.devui-data-grid__td svg.toggle-tree-icon {
  box-sizing: content-box;
  cursor: pointer;
  margin-top: -2px;
  padding-right: 8px;
  vertical-align: middle
}

.devui-data-grid__td svg.expand-icon rect {
  stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.expand-icon rect:last-child {
  fill: var(--devui-disabled-text, #cfd0d3);
  stroke: none
}

.devui-data-grid__td svg.expand-icon:hover rect {
  stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td svg.expand-icon:hover rect:last-child {
  fill: var(--devui-icon-fill-active, #252b3a);
  stroke: none
}

.devui-data-grid__td svg.fold-icon rect {
  stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.fold-icon path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-data-grid__td svg.fold-icon:hover rect {
  stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td svg.fold-icon:hover path {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-data-grid__td--checkable {
  align-items: center;
  display: flex
}

.devui-data-grid__td--mini {
  height: 24px;
  line-height: 24px
}

.devui-data-grid__td--xs {
  height: 30px;
  line-height: 30px
}

.devui-data-grid__td--sm {
  height: 42px;
  line-height: 42px
}

.devui-data-grid__td--md {
  height: 46px;
  line-height: 46px
}

.devui-data-grid__td--lg {
  height: 54px;
  line-height: 54px
}

.devui-data-grid__last-sticky-left-cell {
  border-right-color: transparent !important
}

.devui-data-grid__first-sticky-right-cell {
  border-left-color: transparent !important
}

.devui-data-grid__sticky-left-body,
.devui-data-grid__sticky-left-head,
.devui-data-grid__sticky-right-body,
.devui-data-grid__sticky-right-head {
  position: absolute;
  z-index: 10
}

.devui-data-grid--scroll-middle .devui-data-grid__last-sticky-left-cell,
.devui-data-grid--scroll-right .devui-data-grid__last-sticky-left-cell {
  background-color: linear-gradient(to left, transparent, var(--devui-base-bg, #fff) 10px);
  border-right-color: transparent !important;
  position: relative
}

.devui-data-grid--scroll-middle .devui-data-grid__last-sticky-left-cell:after,
.devui-data-grid--scroll-right .devui-data-grid__last-sticky-left-cell:after {
  bottom: 0;
  box-shadow: inset var(--devui-table-inset-shadow-left, 8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 10px
}

.devui-data-grid--scroll-left .devui-data-grid__first-sticky-right-cell,
.devui-data-grid--scroll-middle .devui-data-grid__first-sticky-right-cell {
  background-color: linear-gradient(to right, transparent, var(--devui-base-bg, #fff) 10px);
  border-left-color: transparent !important;
  position: relative
}

.devui-data-grid--scroll-left .devui-data-grid__first-sticky-right-cell:after,
.devui-data-grid--scroll-middle .devui-data-grid__first-sticky-right-cell:after {
  bottom: 0;
  box-shadow: inset var(--devui-table-inset-shadow-right, -8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 10px
}

.devui-data-grid__tooltip.devui-flexible-overlay {
  background: var(--devui-feedback-overlay-bg, #464d6e);
  box-shadow: none;
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  font-size: var(--devui-font-size, 12px);
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 200px;
  min-height: 26px;
  overflow-wrap: break-word;
  padding: 0 16px;
  word-break: break-word;
  word-wrap: break-word;
  border-radius: var(--devui-border-radius-feedback, 4px);
  line-break: auto;
  opacity: 1;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-spacing: normal;
  z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-data-grid__tooltip.devui-flexible-overlay span {
  display: block;
  max-height: inherit;
  max-width: 100%;
  overflow: auto;
  padding: 4px 0
}

.devui-data-grid__filter-wrapper {
  font-size: var(--devui-font-size, 12px)
}

.devui-data-grid__filter-wrapper * {
  box-sizing: border-box
}

.devui-data-grid__filter-wrapper .filter-all-check {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 0 8px 4px;
  width: 200px
}

.devui-data-grid__filter-wrapper .filter-multiple-menu {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 4px 8px;
  width: 200px
}

.devui-data-grid__filter-wrapper .filter-single-menu {
  width: 200px
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item {
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  padding: 0 8px;
  transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-data-grid__filter-wrapper .filter-single-menu .filter-item-active {
  background-color: var(--devui-list-item-active-text, #252b3a);
  color: var(--devui-list-item-active-bg, #f2f5fc)
}

.devui-data-grid__filter-wrapper .filter-operation {
  align-items: center;
  display: flex;
  height: 26px;
  justify-content: center;
  padding: 0 8px
}

.devui-data-grid__filter-wrapper .filter-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-data-grid--fix-header {
  display: flex;
  flex-flow: column nowrap;
  overflow: unset
}

.devui-data-grid--striped .devui-data-grid__tr:nth-of-type(2n) {
  background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr .devui-data-grid__last-sticky-left-cell {
  background-color: linear-gradient(to left, transparent, var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-data-grid--row-hover-highlight .devui-data-grid__tr.hover-tr .devui-data-grid__first-sticky-right-cell {
  background-color: linear-gradient(to right, transparent, var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-data-grid--header-bg .devui-data-grid__head {
  background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-data-grid--bordered .devui-data-grid__th {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__th:first-child {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__td {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--bordered .devui-data-grid__td:first-child {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-data-grid--borderless .devui-data-grid__td,
.devui-data-grid--borderless .devui-data-grid__th {
  border: none
}

.devui-data-grid--shadowed {
  border-radius: var(--devui-border-radius-card, 8px);
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12))
}

.devui-data-grid--left {
  text-align: left
}

.devui-data-grid--left.devui-data-grid__td,
.devui-data-grid--left.devui-data-grid__th {
  justify-content: flex-start
}

.devui-data-grid--center {
  text-align: center
}

.devui-data-grid--center.devui-data-grid__td,
.devui-data-grid--center.devui-data-grid__th {
  justify-content: center
}

.devui-data-grid--right {
  text-align: right
}

.devui-data-grid--right.devui-data-grid__td,
.devui-data-grid--right.devui-data-grid__th {
  justify-content: flex-end
}

.devui-data-grid--is-virtual {
  max-height: unset
}

.devui-data-grid .resize-bar {
  background: var(--devui-form-control-line-active, #5e7ce0);
  bottom: 0;
  cursor: col-resize;
  display: none;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 9999
}

.data-grid-selector {
  cursor: col-resize
}

.data-grid-selector,
.devui-calendar-toolbar {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-calendar-toolbar {
  align-items: center;
  display: flex;
  font-weight: var(--devui-font-title-weight, bold);
  height: 32px;
  justify-content: space-between
}

.devui-calendar-toolbar a {
  cursor: pointer;
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  height: 28px;
  line-height: 28px;
  text-align: center;
  width: 28px
}

.devui-calendar-toolbar a,
.devui-calendar-toolbar a:hover {
  color: var(--devui-text, #252b3a);
  text-decoration: none
}

.devui-calendar-toolbar a.disabled {
  cursor: not-allowed
}

.devui-calendar-toolbar a.disabled,
.devui-calendar-toolbar a.disabled:hover {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-calendar-toolbar a.title {
  flex-grow: 1;
  flex-shrink: 1
}

.devui-vertical-slider {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 24px;
  overflow: hidden;
  position: relative;
  text-align: center
}

.devui-vertical-slider .movable-bar {
  overflow: visible;
  position: relative
}

.devui-vertical-slider .movable-bar .slider-item {
  box-sizing: border-box;
  display: block;
  flex-grow: 0;
  flex-shrink: 0
}

.devui-vertical-slider .forcus {
  box-sizing: border-box;
  height: 50%;
  position: absolute;
  top: 25%;
  width: 100%
}

.devui-vertical-slider .slider-mask {
  background-color: #0000;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent, rgba(0, 0, 0, .3));
  inset: 0;
  position: absolute;
  z-index: 99
}

.devui-calendar-panel {
  box-sizing: border-box;
  overflow: hidden;
  padding: 5px;
  width: 230px
}

.devui-calendar-panel .row {
  display: flex;
  flex-direction: row;
  height: 24px;
  justify-content: space-between
}

.devui-calendar-panel .row .cell {
  align-items: center;
  background-color: #fff;
  border-radius: var(--devui-border-radius, 2px);
  color: #000;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  text-align: center;
  width: 100%
}

.devui-calendar-panel .row .cell:hover {
  background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-calendar-panel .row .cell.selected {
  background-color: #06c;
  color: #f1f1f1
}

.devui-calendar-panel .row .cell.selected:hover {
  background-color: #08d;
  color: #fff
}

.devui-calendar-panel .row .cell.innerday {
  background-color: var(--devui-disabled-bg, #f5f5f5)
}

.devui-calendar-panel .row .cell.disabled,
.devui-calendar-panel .row .cell.not-current {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-calendar-panel .row .cell.disabled {
  cursor: not-allowed
}

.devui-calendar-panel .head {
  cursor: default;
  margin: 0;
  padding: 0
}

.devui-calendar-panel .body {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0
}

.devui-calendar-panel .today-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 8px
}

.devui-calendar-panel .today-container.disabled .today-button {
  border: 1px solid #ccc;
  cursor: not-allowed
}

.devui-calendar-panel .today-container .today-button {
  border: 1px solid #06c;
  border-radius: 3px;
  font-size: 12px;
  padding: 2px 20px
}

.devui-calendar-timepicker {
  height: 210px;
  overflow: hidden;
  position: relative;
  width: 100px
}

.devui-calendar-timepicker .head {
  background-color: #f1f1f1;
  display: flex;
  height: 32px;
  justify-content: center;
  line-height: 32px;
  text-align: center
}

.devui-calendar-timepicker .select {
  display: flex;
  flex-direction: row;
  height: 178px;
  justify-content: space-around
}

.devui-calendar-timepicker .select .column {
  cursor: default;
  flex-grow: 1;
  overflow: auto
}

.devui-calendar-timepicker .select .column span {
  background-color: #f6f6f6;
  border-radius: 100%;
  display: block;
  font-size: 11px;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  text-align: center;
  width: 24px
}

.devui-calendar-timepicker .select .column span.selected {
  background-color: #0af;
  color: #fff
}

.devui-calendar-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-datepicker-container .input-container {
  align-items: center;
  border: 1px solid #06c;
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: 200px
}

.devui-datepicker-container .datepicker-input {
  position: relative;
  width: 100%
}

.devui-datepicker-container .datepicker-input input {
  border: 0 solid #000;
  margin-right: 20px;
  outline: none
}

.devui-datepicker-container .datepicker-input-icon {
  position: absolute;
  right: 6px;
  z-index: 9
}

.devui-datepicker-container .devui-datepicker-panel {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid #ddd;
  border-radius: var(--devui-border-radius-card, 8px);
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  display: inline-block;
  font-size: 13px;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 99
}

.devui-stick-slider {
  align-items: center;
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  justify-content: center
}

.devui-stick-slider,
.devui-stick-slider .main-button {
  border-radius: 100%;
  height: 36px;
  position: relative;
  width: 36px
}

.devui-stick-slider .main-button {
  background-color: red;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 10
}

.devui-stick-slider .sub-buttons {
  border: 1px solid #00f;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 240px;
  position: absolute;
  width: 240px
}

.devui-stick-slider .sub-buttons .button {
  background-color: #fa0;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  margin: 5px;
  position: relative;
  text-align: center;
  width: 48px
}

.devui-stick-slider .sub-buttons .button.selected {
  background-color: #f30
}

.devui-scroll-box {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%
}

.devui-scroll-box * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-scroll-box .box-content {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: static;
  scroll-behavior: smooth
}

.devui-scroll-box .box-content-behavior-auto {
  scroll-behavior: auto
}

.devui-scroll-box .box-sroll {
  background-color: #d46b6b00;
  height: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px
}

.devui-scroll-box .box-sroll .scroll-child {
  background: var(--devui-line, #d7d8da);
  border-radius: 8px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.devui-popup-line {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: flex;
  height: 256px;
  width: 100%
}

.devui-popup-line .time-item {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: inline-block;
  height: 100%;
  overflow-y: auto
}

.devui-popup-line .time-item:last-child {
  border-right: none
}

.devui-popup-line .time-item .time-ul {
  cursor: pointer;
  height: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%
}

.devui-popup-line .time-item .time-ul .time-li {
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  display: block;
  font-size: 0;
  height: 26px;
  line-height: 26px;
  list-style: none;
  margin: 0 0 6px;
  overflow: hidden;
  text-align: center
}

.devui-popup-line .time-item .time-ul .time-li:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-popup-line .time-item .time-ul .time-li span {
  display: block;
  font-size: var(--devui-font-size-md, 12px)
}

.devui-popup-line .time-item .time-ul:last-child:after {
  content: "";
  display: block;
  height: 224px
}

.devui-popup-line .time-item .time-ul .active-li,
.devui-popup-line .time-item .time-ul .active-li:hover {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-popup-line .time-item .time-ul .disabled-li {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-date-picker-pro {
  background-color: var(--devui-base-bg, #fff);
  display: inline-block
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker {
  position: relative
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker-icon {
  align-items: center;
  display: inline-flex
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-input-slot__suffix {
  cursor: pointer
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon {
  align-items: center;
  display: inline-flex;
  height: 16px;
  line-height: 12px;
  width: 16px
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .close-icon:hover svg path {
  fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-date-picker-pro--icon-visible {
  visibility: visible
}

.devui-date-picker-pro .devui-date-picker-pro__single-picker .devui-date-picker-pro--icon-hidden {
  visibility: hidden
}

.devui-date-picker-pro__panel {
  width: -moz-max-content;
  width: max-content
}

.devui-date-picker-pro__panel-content {
  display: flex
}

.devui-date-picker-pro__panel-footer {
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 8px
}

.devui-date-picker-pro__panel-footer-center {
  text-align: center
}

.devui-date-picker-pro__panel-right-area {
  display: inline-block;
  font-size: var(--devui-font-size-sm, 12px);
  height: 305px;
  overflow: auto;
  padding: 8px 16px;
  -ms-overflow-style: none;
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
  scrollbar-width: none
}

.devui-date-picker-pro__panel-right-area::-webkit-scrollbar {
  width: 0 !important
}

.devui-date-picker-pro__calendar-panel {
  display: flex;
  text-align: center
}

.devui-date-picker-pro__calendar-panel--year-list {
  display: inline-block;
  height: 305px;
  overflow: auto;
  width: 80px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.devui-date-picker-pro__calendar-panel--year-list::-webkit-scrollbar {
  width: 0 !important
}

.devui-date-picker-pro__calendar-panel--year-list-item {
  background-color: var(--devui-global-bg, #f6f6f8)
}

.devui-date-picker-pro__calendar-panel--year-list-item .devui-date-picker-pro__year-title {
  cursor: pointer;
  font-size: var(--devui-font-size-md, 12px);
  font-weight: 700;
  line-height: 30px
}

.devui-date-picker-pro__calendar-panel--year-list-item .devui-date-picker-pro__month-title {
  cursor: pointer;
  font-size: var(--devui-font-size-sm, 12px);
  line-height: 30px
}

.devui-date-picker-pro__calendar-panel--year-list-item.devui-date-picker-pro__year-title-active {
  background-color: var(--devui-base-bg, #fff)
}

.devui-date-picker-pro__calendar-panel--year-list-item:hover:not(.devui-date-picker-pro__year-title-active) {
  background-color: var(--devui-list-item-selected-bg, #f2f5fc)
}

.devui-date-picker-pro__calendar-panel--main {
  display: inline-block;
  font-size: var(--devui-font-size-sm, 12px);
  height: 305px;
  overflow: auto;
  padding: 4px;
  width: 253px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.devui-date-picker-pro__calendar-panel--main::-webkit-scrollbar {
  width: 0 !important
}

.devui-date-picker-pro__calendar-panel--main .devui-date-picker-pro__calendar-table td,
.devui-date-picker-pro__calendar-panel--main .devui-date-picker-pro__calendar-table tr {
  border: none;
  font-size: var(--devui-font-size-sm, 12px);
  padding: 0;
  text-align: center
}

.devui-date-picker-pro__tbody-wrapper {
  height: 270px;
  overflow-x: hidden;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.devui-date-picker-pro__tbody-wrapper::-webkit-scrollbar {
  width: 0 !important
}

.devui-date-picker-pro__calendar-table {
  border-spacing: 0;
  margin: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-week-header td {
  height: 22px;
  padding: 0;
  width: 35px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-title {
  color: var(--devui-aide-text, #71757f);
  line-height: 26px;
  padding-left: 8px;
  text-align: start
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content {
  border-collapse: separate;
  border-spacing: 0 4px;
  color: var(--devui-text, #252b3a);
  margin: 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date {
  padding: 0 4px;
  width: 30px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date span {
  border-radius: var(--devui-border-radius-feedback, 4px);
  cursor: pointer;
  display: block;
  height: 22px;
  line-height: 22px;
  width: 22px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date:not(.devui-date-picker-pro__table-date-selected):not(.devui-date-picker-pro__table-date-disabled):hover span {
  background-color: var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-today span {
  color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end span,
.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-selected span,
.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start span {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-in-range {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-in-range span:hover {
  background-color: var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end) {
  position: relative
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end):after {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  content: "";
  display: block;
  height: 22px;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end):hover:after {
  display: none
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-start:not(.devui-date-picker-pro__table-date-end) span:not(:hover) {
  border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start) {
  position: relative
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start):after {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  content: "";
  display: block;
  height: 22px;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start):hover:after {
  display: none
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-end:not(.devui-date-picker-pro__table-date-start) span:not(:hover) {
  border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__calendar-table .devui-date-picker-pro__table-month-content .devui-date-picker-pro__table-date.devui-date-picker-pro__table-date-disabled span {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-date-picker-pro__panel-time {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: inline-block;
  height: 305px;
  text-align: center;
  width: 115px
}

.devui-date-picker-pro__panel-time--title {
  display: flex;
  height: 30px
}

.devui-date-picker-pro__panel-time--title-item {
  flex: 1 1 0%;
  line-height: 30px
}

.devui-date-picker-pro__panel-time .devui-time-list,
.devui-date-picker-pro__panel-time .devui-time-list .time-item {
  border: none
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li {
  height: 22px;
  line-height: 22px;
  margin-bottom: 8px;
  padding: 0 7px
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li:hover {
  background-color: transparent
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li span {
  border-radius: var(--devui-border-radius-feedback, 4px);
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .time-li span:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li {
  background-color: transparent
}

.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li span,
.devui-date-picker-pro__panel-time .devui-time-list .time-item .time-ul .active-li span:hover {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-range-date-picker-pro {
  background-color: var(--devui-base-bg, #fff);
  display: inline-block
}

.devui-range-date-picker-pro.devui-range-date-picker-pro__range-width {
  width: 300px
}

.devui-range-date-picker-pro.devui-range-date-picker-pro__range-time-width {
  width: 400px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 24px;
  position: relative;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  width: 100%
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error, .devui-range-date-picker-pro--disabled, .devui-range-date-picker-pro--glow-style):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__input {
  flex: 1 1
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input {
  display: inline-block;
  height: 26px;
  width: 100%
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input__wrapper {
  border: none
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input.devui-input--sm {
  height: 24px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input.devui-input--lg {
  height: 44px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__start .devui-input--feedback {
  padding-right: 0
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__active-input .devui-input__inner {
  color: var(--devui-brand, #5e7ce0)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__normal-input .devui-input__inner {
  color: var(--devui-text, #252b3a)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro__separator {
  display: inline-block;
  padding: 0 4px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-input-slot__suffix {
  cursor: pointer
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker-icon {
  align-items: center;
  display: inline-flex
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon {
  align-items: center;
  display: inline-flex;
  height: 16px;
  line-height: 12px;
  width: 16px
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .close-icon:hover svg path {
  fill: var(--devui-shape-icon-fill-active, #babbc0)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro--icon-visible {
  visibility: visible
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker .devui-range-date-picker-pro--icon-hidden {
  visibility: hidden
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled:hover {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--disabled .devui-input__inner {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker.devui-range-date-picker-pro--glow-style:hover {
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-range-date-picker-pro--open .devui-range-date-picker-pro__range-picker,
.devui-range-date-picker-pro--open .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(.devui-range-date-picker-pro--disabled):hover {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-range-date-picker-pro--open .devui-range-date-picker-pro--glow-style {
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-date-picker-pro__year-calendar-panel {
  font-size: var(--devui-font-size-sm, 12px);
  height: 200px;
  padding: 8px 12px;
  width: 204px
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list {
  height: 186px;
  overflow: auto;
  scrollbar-width: none;
  width: 184px;
  -ms-overflow-style: none
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list::-webkit-scrollbar {
  width: 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-list-item {
  display: flex;
  height: 48px;
  padding: 4px 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title {
  border-radius: var(--devui-border-radius-feedback, 4px);
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 60px
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title:hover:not(.devui-date-picker-pro__year-active):not(.devui-date-picker-pro__year-disabled) {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__this-year {
  color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-in-range:not(.devui-date-picker-pro__year-active) {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-in-range:not(.devui-date-picker-pro__year-active):hover {
  background-color: var(--devui-range-item-hover-bg, #e9edfa);
  border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-start:not(.devui-date-picker-pro__year-end):not(:hover) {
  border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-end:not(.devui-date-picker-pro__year-start):not(:hover) {
  border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__year-calendar-panel .devui-date-picker-pro__year-list .devui-date-picker-pro__year-item-title.devui-date-picker-pro__year-disabled {
  border-radius: 0;
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-date-picker-pro__month-calendar-panel {
  display: flex;
  font-size: var(--devui-font-size-sm, 12px);
  height: 300px;
  text-align: center
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list {
  display: inline-block;
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  width: 80px;
  -ms-overflow-style: none
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list::-webkit-scrollbar {
  width: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item {
  background-color: var(--devui-global-bg, #f6f6f8);
  cursor: pointer;
  font-size: var(--devui-font-size-md, 12px);
  height: 30px;
  line-height: 30px
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item.devui-date-picker-pro__year-item-active {
  background-color: var(--devui-base-bg, #fff)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__year-list-item:hover:not(.devui-date-picker-pro__year-item-active) {
  background-color: var(--devui-list-item-selected-bg, #f2f5fc)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper {
  display: inline-block;
  height: 300px;
  padding: 4px;
  width: 208px
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list {
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  width: 100%
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list::-webkit-scrollbar {
  width: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list td,
.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__month-list tr {
  border: none;
  font-size: var(--devui-font-size-sm, 12px);
  padding: 0;
  text-align: center
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-title {
  color: var(--devui-aide-text, #71757f);
  line-height: 26px;
  padding-left: 8px;
  text-align: start
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content {
  color: var(--devui-text, #252b3a);
  margin: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item {
  box-sizing: border-box;
  cursor: pointer;
  height: 40px;
  padding: 4px 0;
  text-align: center;
  width: 60px
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item span {
  border-radius: var(--devui-border-radius-feedback, 4px);
  cursor: pointer;
  display: block;
  height: 32px;
  line-height: 32px
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item:hover:not(.devui-date-picker-pro__month-active):not(.devui-date-picker-pro__month-disabled) span {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__this-month span {
  color: var(--devui-brand, #5e7ce0)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-active span {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-in-range:not(.devui-date-picker-pro__month-active) span {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-in-range:not(.devui-date-picker-pro__month-active):hover span {
  background-color: var(--devui-range-item-hover-bg, #e9edfa);
  border-radius: var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-start:not(.devui-date-picker-pro__month-end):not(:hover) span {
  border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px)
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-end:not(.devui-date-picker-pro__month-start):not(:hover) span {
  border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-disabled {
  cursor: not-allowed
}

.devui-date-picker-pro__month-calendar-panel .devui-date-picker-pro__month-wrapper .devui-date-picker-pro__table-month-content .devui-date-picker-pro__month-item.devui-date-picker-pro__month-disabled span {
  border-radius: 0;
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-date-picker-pro--fade-bottom-enter-from,
.devui-date-picker-pro--fade-bottom-leave-to,
.devui-range-date-picker-pro--fade-bottom-enter-from,
.devui-range-date-picker-pro--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-date-picker-pro--fade-bottom-enter-to,
.devui-date-picker-pro--fade-bottom-leave-from,
.devui-range-date-picker-pro--fade-bottom-enter-to,
.devui-range-date-picker-pro--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-date-picker-pro--fade-bottom-enter-active,
.devui-range-date-picker-pro--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-date-picker-pro--fade-bottom-leave-active,
.devui-range-date-picker-pro--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-date-picker-pro--fade-top-enter-from,
.devui-date-picker-pro--fade-top-leave-to,
.devui-range-date-picker-pro--fade-top-enter-from,
.devui-range-date-picker-pro--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-date-picker-pro--fade-top-enter-to,
.devui-date-picker-pro--fade-top-leave-from,
.devui-range-date-picker-pro--fade-top-enter-to,
.devui-range-date-picker-pro--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-date-picker-pro--fade-top-enter-active,
.devui-range-date-picker-pro--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-date-picker-pro--fade-top-leave-active,
.devui-range-date-picker-pro--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-drawer__overlay {
  background-color: var(--devui-shadow, rgba(37, 43, 58, .24));
  inset: 0;
  position: fixed
}

.drawer-overlay-fade-enter-active,
.drawer-overlay-fade-leave-active {
  transition: opacity .1s linear
}

.drawer-overlay-fade-enter-from,
.drawer-overlay-fade-leave-to {
  opacity: 0
}

.devui-drawer {
  background-color: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  bottom: 0;
  box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  opacity: 1;
  overflow: auto;
  position: fixed;
  top: 0;
  transform: translate(0);
  width: 300px
}

.devui-drawer--left {
  left: 0
}

.devui-drawer--right {
  right: 0
}

.drawer-fly-right-enter-active {
  transition: all .3s cubic-bezier(.16, .75, .5, 1)
}

.drawer-fly-right-leave-active {
  transition: all .3s cubic-bezier(.5, 0, .84, .25)
}

.drawer-fly-right-enter-from,
.drawer-fly-right-leave-to {
  opacity: 0;
  transform: translate(100%)
}

.drawer-fly-left-enter-active {
  transition: all .3s cubic-bezier(.16, .75, .5, 1)
}

.drawer-fly-left-leave-active {
  transition: all .3s cubic-bezier(.5, 0, .84, .25)
}

.drawer-fly-left-enter-from,
.drawer-fly-left-leave-to {
  opacity: 0;
  transform: translate(-100%)
}

.devui-editable-select-input {
  font-size: var(--devui-font-size, 12px);
  height: 32px
}

.devui-editable-select-input--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px
}

.devui-editable-select-input--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px
}

.devui-editable-select-input--open .devui-editable-select__arrow-icon {
  transform: rotate(180deg)
}

.devui-editable-select-input__wrapper {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 8px;
  position: relative;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-editable-select-input__wrapper--focus {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-editable-select-input__wrapper--focus.devui-editable-select-input__wrapper--glow-style {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-editable-select-input__wrapper--disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-editable-select-input__wrapper--disabled:hover {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-editable-select-input__wrapper--disabled .devui-editable-select-input__inner {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-editable-select-input__wrapper--glow-style:not(.devui-editable-select-input__wrapper--disabled, .devui-editable-select-input__wrapper--focus):hover {
  border-color: var(--devui-form-control-line, #d7d8da) !important;
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-editable-select-input__inner {
  background: none;
  border: none;
  height: 100%;
  outline: none;
  padding: 4px 0;
  width: 100%
}

.devui-editable-select-input__placeholder {
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  width: calc(100% - 16px)
}

.devui-editable-select-input__suffix {
  align-items: center;
  display: inline-flex;
  font-size: var(--devui-font-size, 12px);
  height: 100%;
  justify-content: center
}

.devui-editable-select-input__suffix>span {
  align-items: center
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon {
  cursor: pointer;
  display: flex;
  pointer-events: auto
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da);
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-editable-select-input__suffix .devui-editable-select__clear-icon svg:hover path {
  fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-editable-select-input__suffix .devui-editable-select__arrow-icon {
  display: flex;
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-editable-select-input__suffix .devui-editable-select__arrow-icon svg path {
  fill: var(--devui-icon-text, #71757f)
}

.devui-editable-select__inner {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 12px
}

.devui-editable-select__item {
  border: 0;
  cursor: pointer;
  line-height: 20px;
  overflow: hidden;
  padding: 8px 12px;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap
}

.devui-editable-select__item:not(:first-child) {
  margin-top: 4px
}

.devui-editable-select__item--disabled {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-editable-select__item--selected:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--no-data-tip) {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-editable-select__item--last-selected {
  background: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-editable-select__item--hover:not(.devui-editable-select__item--selected),
.devui-editable-select__item:not(.devui-editable-select__item--disabled):not(.devui-editable-select__item--selected):not(.devui-editable-select__item--no-data-tip):hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-editable-select__item--no-data-tip {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed;
  font-size: var(--devui-font-size, 12px);
  line-height: 22px;
  padding: 0;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-editable-select--fade-bottom-enter-from,
.devui-editable-select--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-editable-select--fade-bottom-enter-to,
.devui-editable-select--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-editable-select--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-editable-select--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-editable-select--fade-top-enter-from,
.devui-editable-select--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-editable-select--fade-top-enter-to,
.devui-editable-select--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-editable-select--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-editable-select--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-fullscreen {
  background-color: var(--devui-base-bg, #fff);
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10
}

.devui-fullscreen__html {
  overflow: hidden
}

:not(:root):fullscreen::backdrop {
  background: var(--devui-base-bg, #fff)
}

.devui-tooltip {
  background: var(--devui-feedback-overlay-bg, #464d6e);
  box-shadow: none;
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  font-size: var(--devui-font-size, 12px);
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 200px;
  min-height: 26px;
  overflow-wrap: break-word;
  padding: 4px 16px;
  word-break: break-word;
  word-wrap: break-word;
  border-radius: var(--devui-border-radius-feedback, 4px);
  font-style: normal;
  font-weight: 400;
  line-break: auto;
  opacity: 1;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-spacing: normal;
  z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-tooltip--fade-bottom-enter-from,
.devui-tooltip--fade-bottom-leave-to,
.devui-tooltip--fade-top-enter-from,
.devui-tooltip--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8)
}

.devui-tooltip--fade-bottom-enter-to,
.devui-tooltip--fade-bottom-leave-from,
.devui-tooltip--fade-top-enter-to,
.devui-tooltip--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(1)
}

.devui-tooltip--fade-bottom-enter-active,
.devui-tooltip--fade-top-enter-active {
  transition: transform .1s cubic-bezier(.16, .75, .5, 1), opacity .1s cubic-bezier(.16, .75, .5, 1)
}

.devui-tooltip--fade-bottom-leave-active,
.devui-tooltip--fade-top-leave-active {
  transition: transform .1s cubic-bezier(.5, 0, .84, .25), opacity .1s cubic-bezier(.5, 0, .84, .25)
}

.devui-tooltip--fade-left-enter-from,
.devui-tooltip--fade-left-leave-to,
.devui-tooltip--fade-right-enter-from,
.devui-tooltip--fade-right-leave-to {
  opacity: .8;
  transform: scaleX(.8)
}

.devui-tooltip--fade-left-enter-to,
.devui-tooltip--fade-left-leave-from,
.devui-tooltip--fade-right-enter-to,
.devui-tooltip--fade-right-leave-from {
  opacity: 1;
  transform: scaleX(1)
}

.devui-tooltip--fade-left-enter-active,
.devui-tooltip--fade-right-enter-active {
  transition: transform .1s cubic-bezier(.16, .75, .5, 1), opacity .1s cubic-bezier(.16, .75, .5, 1)
}

.devui-tooltip--fade-left-leave-active,
.devui-tooltip--fade-right-leave-active {
  transition: transform .1s cubic-bezier(.5, 0, .84, .25), opacity .1s cubic-bezier(.5, 0, .84, .25)
}

.devui-tooltip--with-content {
  max-width: unset;
  padding: 0
}

.md-toolbar-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px
}

.md-toolbar-container .md-toolbar-span {
  background: var(--devui-dividing-line, #f2f2f3);
  height: 22px;
  margin-right: 12px;
  width: 1px
}

.md-toolbar-item {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  margin-right: 12px;
  width: 24px
}

.md-toolbar-item path,
.md-toolbar-item polygon,
.md-toolbar-item svg {
  fill: var(--devui-icon-text, #71757f)
}

.md-toolbar-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.md-toolbar-item:hover path,
.md-toolbar-item:hover polygon,
.md-toolbar-item:hover svg {
  fill: var(--devui-brand, #5e7ce0)
}

.md-toolbar-tip-content {
  display: inline-block;
  padding: 4px 16px
}

.dropdown-font-size {
  margin: 0;
  padding: 0
}

.dropdown-font-size li {
  cursor: pointer;
  list-style: none;
  padding: 4px 8px;
  width: 80px
}

.dropdown-font-size li:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.dropdown-font-color {
  display: inline-flex;
  width: 352px
}

.dropdown-font-color .color-wrap {
  padding-left: 4px;
  width: 50%
}

.dropdown-font-color .color-wrap p {
  line-height: 38px;
  margin: 0;
  padding: 0
}

.dropdown-font-color .color-picker {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 172px
}

.dropdown-font-color .color-picker li {
  cursor: pointer;
  display: block;
  height: 20px;
  list-style: none;
  margin: 0 2px 2px;
  padding: 0;
  width: 20px
}

.dropdown-font-color .color-picker li:hover {
  border: 2px solid var(--devui-link-light-active, #beccfa)
}

.CodeMirror {
  color: #000;
  direction: ltr;
  font-family: monospace;
  height: 300px
}

.CodeMirror-lines {
  padding: 4px 0
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px
}

.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
  background-color: #fff
}

.CodeMirror-gutters {
  background-color: #f7f7f7;
  border-right: 1px solid #ddd;
  white-space: nowrap
}

.CodeMirror-linenumber {
  color: #999;
  min-width: 20px;
  padding: 0 3px 0 5px;
  text-align: right;
  white-space: nowrap
}

.CodeMirror-guttermarker {
  color: #000
}

.CodeMirror-guttermarker-subtle {
  color: #999
}

.CodeMirror-cursor {
  border-left: 1px solid #000;
  border-right: none;
  width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
  background: #7e7;
  border: 0 !important;
  width: auto
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1
}

.cm-fat-cursor-mark {
  animation: blink 1.06s steps(1) infinite;
  background-color: #14ff1480
}

.cm-animate-fat-cursor {
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
  width: auto
}

@keyframes blink {
  50% {
    background-color: transparent
  }
}

.cm-tab {
  display: inline-block;
  text-decoration: inherit
}

.CodeMirror-rulers {
  inset: -50px 0 0;
  overflow: hidden;
  position: absolute
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  bottom: 0;
  position: absolute;
  top: 0
}

.cm-s-default .cm-header {
  color: #00f
}

.cm-s-default .cm-quote {
  color: #090
}

.cm-negative {
  color: #d44
}

.cm-positive {
  color: #292
}

.cm-header,
.cm-strong {
  font-weight: 700
}

.cm-em {
  font-style: italic
}

.cm-link {
  text-decoration: underline
}

.cm-strikethrough {
  text-decoration: line-through
}

.cm-s-default .cm-keyword {
  color: #708
}

.cm-s-default .cm-atom {
  color: #219
}

.cm-s-default .cm-number {
  color: #164
}

.cm-s-default .cm-def {
  color: #00f
}

.cm-s-default .cm-variable-2 {
  color: #05a
}

.cm-s-default .cm-type,
.cm-s-default .cm-variable-3 {
  color: #085
}

.cm-s-default .cm-comment {
  color: #a50
}

.cm-s-default .cm-string {
  color: #a11
}

.cm-s-default .cm-string-2 {
  color: #f50
}

.cm-s-default .cm-meta,
.cm-s-default .cm-qualifier {
  color: #555
}

.cm-s-default .cm-builtin {
  color: #30a
}

.cm-s-default .cm-bracket {
  color: #997
}

.cm-s-default .cm-tag {
  color: #170
}

.cm-s-default .cm-attribute {
  color: #00c
}

.cm-s-default .cm-hr {
  color: #999
}

.cm-s-default .cm-link {
  color: #00c
}

.cm-invalidchar,
.cm-s-default .cm-error {
  color: red
}

.CodeMirror-composing {
  border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22
}

.CodeMirror-matchingtag {
  background: #ff96004d
}

.CodeMirror-activeline-background {
  background: #e8f2ff
}

.CodeMirror {
  background: #fff;
  overflow: hidden;
  position: relative
}

.CodeMirror-scroll {
  height: 100%;
  margin-bottom: -50px;
  margin-right: -50px;
  outline: none;
  overflow: scroll !important;
  padding-bottom: 50px;
  position: relative
}

.CodeMirror-sizer {
  border-right: 50px solid transparent;
  position: relative
}

.CodeMirror-gutter-filler,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-vscrollbar {
  display: none;
  outline: none;
  position: absolute;
  z-index: 6
}

.CodeMirror-vscrollbar {
  overflow-x: hidden;
  overflow-y: scroll;
  right: 0;
  top: 0
}

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-x: scroll;
  overflow-y: hidden
}

.CodeMirror-scrollbar-filler {
  bottom: 0;
  right: 0
}

.CodeMirror-gutter-filler {
  bottom: 0;
  left: 0
}

.CodeMirror-gutters {
  left: 0;
  min-height: 100%;
  position: absolute;
  top: 0;
  z-index: 3
}

.CodeMirror-gutter {
  display: inline-block;
  height: 100%;
  margin-bottom: -50px;
  vertical-align: top;
  white-space: normal
}

.CodeMirror-gutter-wrapper {
  background: none !important;
  border: none !important;
  position: absolute;
  z-index: 4
}

.CodeMirror-gutter-background {
  bottom: 0;
  position: absolute;
  top: 0;
  z-index: 4
}

.CodeMirror-gutter-elt {
  cursor: default;
  position: absolute;
  z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  background: transparent;
  border-radius: 0;
  border-width: 0;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  color: inherit;
  line-height: inherit;
  overflow: visible;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-variant-ligatures: contextual
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal
}

.CodeMirror-linebackground {
  inset: 0;
  position: absolute;
  z-index: 0
}

.CodeMirror-linewidget {
  padding: .1px;
  position: relative;
  z-index: 2
}

.CodeMirror-rtl pre {
  direction: rtl
}

.CodeMirror-code {
  outline: none
}

.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber,
.CodeMirror-scroll,
.CodeMirror-sizer {
  box-sizing: content-box
}

.CodeMirror-measure {
  height: 0;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 100%
}

.CodeMirror-cursor {
  pointer-events: none;
  position: absolute
}

.CodeMirror-measure pre {
  position: static
}

div.CodeMirror-cursors {
  position: relative;
  visibility: hidden;
  z-index: 3
}

.CodeMirror-focused div.CodeMirror-cursors,
div.CodeMirror-dragcursors {
  visibility: visible
}

.CodeMirror-selected {
  background: #d9d9d9
}

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0
}

.CodeMirror-crosshair {
  cursor: crosshair
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
  background: #d7d4f0
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
  background: #d7d4f0
}

.cm-searching {
  background-color: #ffa;
  background-color: #ff06
}

.cm-force-border {
  padding-right: .1px
}

@media print {
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden
  }
}

.cm-tab-wrap-hack:after {
  content: ""
}

span.CodeMirror-selectedtext {
  background: none
}

.dp-md-view {
  font-size: 14px
}

.dp-md-view p {
  word-wrap: break-word;
  margin: 0 0 10px;
  padding: 0
}

.dp-md-view ul {
  list-style-type: disc;
  padding-left: 16px
}

.dp-md-view ol {
  list-style-type: decimal;
  padding-left: 24px
}

.dp-md-view h1 {
  color: var(--devui-text, #252b3a);
  font-size: 28px;
  font-weight: 700;
  position: relative
}

.dp-md-view table {
  border-collapse: collapse;
  display: table;
  margin-bottom: 10px
}

.dp-md-view td,
.dp-md-view th {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 5px 10px
}

.dp-md-view caption {
  border: 1px dashed var(--devui-line, #d7d8da);
  border-bottom: 0;
  padding: 3px;
  text-align: center
}

.dp-md-view th {
  background-color: var(--devui-global-bg, #f6f6f8);
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.dp-md-view .ue-table-interlace-color-single {
  background-color: var(--devui-base-bg, #fff)
}

.dp-md-view .ue-table-interlace-color-double {
  background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.dp-md-view td p {
  margin: 0;
  padding: 0
}

.dp-md-view code {
  color: #c7254e
}

.dp-md-view pre,
.dp-md-view pre code {
  color: var(--devui-text, #252b3a);
  font-size: 12px;
  padding: .5em
}

.dp-md-view pre,
.dp-md-view pre code,
.dp-md-view pre code.hljs,
.dp-md-view pre.hljs {
  background-color: var(--devui-area, #f5f5f5)
}

.dp-md-view .h1,
.dp-md-view .h2,
.dp-md-view .h3,
.dp-md-view .h4,
.dp-md-view .h5,
.dp-md-view .h6,
.dp-md-view h1,
.dp-md-view h2,
.dp-md-view h3,
.dp-md-view h4,
.dp-md-view h5,
.dp-md-view h6 {
  line-height: 1.1
}

.dp-md-view blockquote {
  border-left: 5px solid var(--devui-dividing-line, #f2f2f3);
  color: var(--devui-text-weak, #575d6c);
  margin: 0;
  padding: 0 8px
}

.dp-md-view a {
  color: var(--devui-link, #526ecc);
  cursor: pointer;
  text-decoration: underline
}

.dp-md-view a:hover {
  color: var(--devui-link-active, #526ecc)
}

.dp-md-view img {
  max-width: 100%
}

.dp-md-view input[type=checkbox] {
  vertical-align: middle
}

.dp-md-view .hljs {
  color: var(--devui-text, #252b3a);
  display: block;
  overflow-x: auto;
  padding: .5em
}

.dp-md-view .hljs-comment,
.dp-md-view .hljs-quote {
  color: #998;
  font-style: italic
}

.dp-md-view .hljs-keyword,
.dp-md-view .hljs-selector-tag,
.dp-md-view .hljs-subst {
  color: var(--devui-text, #252b3a);
  font-weight: 700
}

.dp-md-view .hljs-literal,
.dp-md-view .hljs-number,
.dp-md-view .hljs-tag .hljs-attr,
.dp-md-view .hljs-template-variable,
.dp-md-view .hljs-variable {
  color: var(--devui-warning-line, #fa9841)
}

.dp-md-view .hljs-doctag,
.dp-md-view .hljs-string {
  color: var(--devui-danger-line, #f66f6a)
}

.dp-md-view .hljs-section,
.dp-md-view .hljs-selector-id,
.dp-md-view .hljs-title {
  color: var(--devui-danger-line, #f66f6a);
  font-weight: 700
}

.dp-md-view .hljs-subst {
  font-weight: 400
}

.dp-md-view .hljs-class .hljs-title,
.dp-md-view .hljs-type {
  color: #458;
  font-weight: 700
}

.dp-md-view .hljs-attribute,
.dp-md-view .hljs-name,
.dp-md-view .hljs-tag {
  color: navy;
  font-weight: 400
}

.dp-md-view .hljs-bullet,
.dp-md-view .hljs-symbol {
  color: #990073
}

.dp-md-view .hljs-built_in,
.dp-md-view .hljs-builtin-name {
  color: #0086b3
}

.dp-md-view .hljs-meta {
  color: #999;
  font-weight: 700
}

.dp-md-view .hljs-deletion {
  background: #fdd
}

.dp-md-view .hljs-addition {
  background: #dfd
}

.dp-md-view .hljs-emphasis {
  font-style: italic
}

.dp-md-view .hljs-strong {
  font-weight: 700
}

.dp-md-view.devui-md-view-dark .hljs {
  color: #abb2bf;
  display: block;
  overflow-x: auto;
  padding: .5em
}

.dp-md-view.devui-md-view-dark .hljs-comment,
.dp-md-view.devui-md-view-dark .hljs-quote {
  color: #5c6370;
  font-style: italic
}

.dp-md-view.devui-md-view-dark .hljs-doctag,
.dp-md-view.devui-md-view-dark .hljs-formula,
.dp-md-view.devui-md-view-dark .hljs-keyword {
  color: #c678dd
}

.dp-md-view.devui-md-view-dark .hljs-deletion,
.dp-md-view.devui-md-view-dark .hljs-name,
.dp-md-view.devui-md-view-dark .hljs-section,
.dp-md-view.devui-md-view-dark .hljs-selector-tag,
.dp-md-view.devui-md-view-dark .hljs-subst {
  color: #e06c75
}

.dp-md-view.devui-md-view-dark .hljs-literal {
  color: #56b6c2
}

.dp-md-view.devui-md-view-dark .hljs-addition,
.dp-md-view.devui-md-view-dark .hljs-attribute,
.dp-md-view.devui-md-view-dark .hljs-meta-string,
.dp-md-view.devui-md-view-dark .hljs-regexp,
.dp-md-view.devui-md-view-dark .hljs-string {
  color: #98c379
}

.dp-md-view.devui-md-view-dark .hljs-built_in,
.dp-md-view.devui-md-view-dark .hljs-class .hljs-title {
  color: #e6c07b
}

.dp-md-view.devui-md-view-dark .hljs-attr,
.dp-md-view.devui-md-view-dark .hljs-number,
.dp-md-view.devui-md-view-dark .hljs-selector-attr,
.dp-md-view.devui-md-view-dark .hljs-selector-class,
.dp-md-view.devui-md-view-dark .hljs-selector-pseudo,
.dp-md-view.devui-md-view-dark .hljs-template-variable,
.dp-md-view.devui-md-view-dark .hljs-type,
.dp-md-view.devui-md-view-dark .hljs-variable {
  color: #d19a66
}

.dp-md-view.devui-md-view-dark .hljs-bullet,
.dp-md-view.devui-md-view-dark .hljs-link,
.dp-md-view.devui-md-view-dark .hljs-meta,
.dp-md-view.devui-md-view-dark .hljs-selector-id,
.dp-md-view.devui-md-view-dark .hljs-symbol,
.dp-md-view.devui-md-view-dark .hljs-title {
  color: #61aeee
}

.dp-md-view.devui-md-view-dark .hljs-emphasis {
  font-style: italic
}

.dp-md-view.devui-md-view-dark .hljs-strong {
  font-weight: 700
}

.dp-md-view.devui-md-view-dark .hljs-link {
  text-decoration: underline
}

.dp-md-container {
  border: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-radius: var(--devui-border-radius, 2px);
  display: block;
  font-family: helvetica, arial, PingFang, Microsoft YaHei, Hiragino Sans GB, Microsoft JhengHei, sans-serif;
  font-size: 14px;
  height: 100%
}

.dp-md-container .CodeMirror-lines {
  padding: 20px 0
}

.dp-md-container .CodeMirror pre {
  padding: 0 20px
}

.dp-md-container .CodeMirror pre.CodeMirror-line,
.dp-md-container .CodeMirror pre.CodeMirror-line-like {
  color: var(--devui-text, #252b3a);
  font-family: helvetica, arial, PingFang, Microsoft YaHei, Hiragino Sans GB, Microsoft JhengHei, sans-serif
}

.dp-md-container .dp-md-toolbar-container {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-radius: var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 0
}

.dp-md-container.dp-md-editonly .dp-md-content-container,
.dp-md-container.dp-md-readonly .dp-md-content-container {
  position: relative;
  z-index: 0
}

.dp-md-container.dp-md-editonly .dp-md-content-container .dp-editor-md-preview-container,
.dp-md-container.dp-md-editonly .dp-md-content-container .dp-md-editor,
.dp-md-container.dp-md-readonly .dp-md-content-container .dp-editor-md-preview-container,
.dp-md-container.dp-md-readonly .dp-md-content-container .dp-md-editor {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dp-md-container.dp-md-readonly .dp-md-content-container .dp-md-editor {
  z-index: -1
}

.dp-md-container.dp-md-readonly .dp-md-toolbar-container {
  opacity: .3;
  pointer-events: none
}

.dp-md-container.dp-md-readonly .dp-md-content-container .dp-editor-md-preview-container {
  border-left: none
}

.dp-md-container.dp-md-editonly .dp-md-content-container .dp-editor-md-preview-container {
  z-index: -1
}

.dp-md-container .dp-md-content-container {
  display: flex;
  height: calc(100% - 52px);
  min-height: 250px
}

.dp-md-container .dp-md-content-container .CodeMirror-scroll {
  padding-top: 5px
}

.dp-md-container .dp-md-content-container .dp-md-editor {
  flex-shrink: 0;
  position: relative;
  width: 50%
}

.dp-md-container .dp-md-content-container .dp-md-editor .dp-md-count {
  bottom: 4px;
  color: var(--devui-aide-text, #71757f);
  display: inline-block;
  font-size: 12px;
  position: absolute;
  right: 8px
}

.dp-md-container .dp-md-content-container .dp-editor-md-preview-container {
  background-color: var(--devui-base-bg, #fff);
  border-bottom-right-radius: var(--devui-border-radius, 2px);
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
  flex-shrink: 0;
  overflow-y: auto;
  padding: 20px;
  width: 50%
}

.dp-md-container .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
  color: var(--devui-line, #d7d8da)
}

.dp-md-container input[type=checkbox]+label {
  margin-left: 6px
}

.dp-editor-md-preview-container.dp-md-view {
  overflow-y: auto
}

.dp-md-view pre code {
  display: block;
  line-height: 1.5;
  overflow-x: auto
}

.devui-gantt-scale-wrapper {
  display: block;
  height: 36px;
  line-height: 18px
}

.devui-gantt-scale {
  color: var(--devui-placeholder, #babbc0);
  display: inline-block;
  font-weight: 400;
  height: 36px;
  position: absolute;
  text-align: center
}

.devui-gantt-scale.day:not(.milestone):hover .devui-scale-start {
  display: none
}

.devui-gantt-scale.day.milestone {
  background-image: linear-gradient(180deg, #fecc5500, #3ecca61a)
}

.devui-gantt-scale .devui-scale-start {
  height: 18px;
  left: 1px;
  position: absolute;
  white-space: nowrap;
  width: 100%
}

.devui-gantt-scale .devui-scale-start.milestone {
  color: var(--devui-success, #50d4ab)
}

.devui-gantt-scale .devui-scale-unit {
  height: 18px;
  position: absolute;
  top: 18px;
  width: 100%
}

.devui-gantt-scale .devui-scale-unit .border-left {
  border-left: 1px solid var(--devui-list-item-selected-bg, #f2f5fc);
  height: 18px
}

.devui-gantt-scale .devui-scale-unit .scale-highlight {
  background-color: var(--devui-brand, #5e7ce0);
  border-radius: var(--devui-border-radius, 2px);
  height: 18px;
  padding: 0 4px;
  position: absolute
}

.devui-gantt-scale .devui-scale-unit .scale-highlight div {
  color: var(--devui-base-bg, #fff);
  font-size: var(--devui-font-size, 12px);
  font-weight: 400
}

.devui-gantt-scale .devui-scale-unit .today {
  background: #ff790e33;
  border-radius: var(--devui-border-radius, 2px);
  height: 16px
}

.devui-gantt-scale .milestone-new {
  border: 1px solid var(--devui-list-item-selected-bg, #f2f5fc);
  cursor: pointer;
  display: none;
  height: 18px;
  margin-left: 16px;
  position: absolute;
  width: 18px
}

.devui-gantt-scale .milestone-new div {
  line-height: 16px
}

.devui-gantt-scale:not(.milestone):hover .milestone-new.day {
  display: block
}

.devui-mark-line {
  background: var(--devui-line, #d7d8da);
  bottom: 0;
  opacity: .5;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 1
}

.devui-mark-line.today {
  background: #ff790e;
  opacity: .2
}

.devui-mark-line.today.day {
  margin-left: 24px
}

.devui-mark-line.today.week {
  margin-left: 9px
}

.devui-mark-line.today.month {
  margin-left: 4px
}

.devui-mark-line.milestone {
  background: var(--devui-success, #50d4ab);
  opacity: .2
}

.devui-mark-line.milestone.day {
  margin-left: 24px
}

.devui-mark-line.milestone.week {
  margin-left: 9px
}

.devui-mark-line.milestone.month {
  margin-left: 4px
}

.devui-mark-stripe {
  background: linear-gradient(45deg, rgba(202, 207, 216, .2), rgba(202, 207, 216, .2) 10%, transparent 0, transparent 50%, rgba(202, 207, 216, .2) 0, rgba(202, 207, 216, .2) 60%, transparent 0, transparent);
  background-size: 6px 6px;
  bottom: 0;
  position: absolute;
  top: 0;
  z-index: 1
}

.devui-mark-stripe.day {
  width: 100px
}

.devui-mark-stripe.week {
  width: 40px
}

.devui-mark-stripe.month {
  width: 20px
}

.tools-container {
  position: absolute;
  right: 20px;
  top: 70px;
  z-index: 10
}

.tools-container .devui-dropdown-origin {
  border: 0
}

.tools-container .devui-dropdown-origin:hover {
  color: var(--devui-link, #526ecc) !important
}

.tools-container .devui-btn {
  color: var(--devui-text, #252b3a) !important;
  height: 32px !important;
  min-width: 50px;
  padding: 0 8px !important
}

.tools-container .devui-btn:hover {
  color: var(--devui-link, #526ecc) !important
}

.tools-container .tool.add .devui-btn,
.tools-container .tool.minus .devui-btn {
  min-width: 30px
}

.tools-container .devui-select-selection {
  width: 90px
}

.tools-container .devui-select-selection .devui-select-input {
  height: 32px
}

.tool.disabled {
  opacity: .5
}

.tool .switch-view {
  padding: 0 8px
}

.tool .switch-view:hover {
  color: var(--devui-link, #526ecc) !important
}

.devui-dropdown-menu {
  left: -6px !important;
  top: 10px !important
}

.gantt-container {
  overflow: scroll
}

.gantt-container .header {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  position: relative
}

.gantt-container .body {
  height: 100%;
  min-height: 400px;
  position: relative
}

.gantt-container .body .item {
  height: 40px;
  padding-top: 8px
}

.tool {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) #5170ff66;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  margin-left: 12px
}

.tool span {
  border: 0 !important
}

.d-graph-wrapper {
  overflow-x: auto
}

.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 {
  max-width: 100%;
  min-height: 1px;
  position: relative
}

.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-image-preview {
  align-items: center;
  display: flex;
  justify-content: center;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-image-preview g,
.devui-image-preview path,
.devui-image-preview polygon,
.devui-image-preview svg {
  fill: var(--devui-icon-text, #71757f)
}

.devui-image-preview__main-image {
  cursor: grab;
  height: auto;
  margin-top: -20px;
  max-height: 90%;
  max-width: 90%;
  width: auto
}

.devui-image-preview__close-btn {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  border: none;
  border-radius: 50%;
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: fixed;
  right: 20px;
  top: 15px;
  width: 36px;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-image-preview__close-btn:hover {
  background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__close-btn svg {
  height: 18px;
  width: 38px
}

.devui-image-preview__arrow-left {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  border: none;
  border-radius: 50%;
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  left: 20px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-image-preview__arrow-left:hover {
  background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__arrow-left svg {
  height: 18px;
  width: 38px
}

.devui-image-preview__arrow-right {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  border: none;
  border-radius: 50%;
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  z-index: var(--devui-z-index-full-page-overlay, 1080)
}

.devui-image-preview__arrow-right:hover {
  background: var(--devui-area, #f5f5f5)
}

.devui-image-preview__arrow-right svg {
  height: 18px;
  width: 38px
}

.devui-image-preview__toolbar {
  align-items: center;
  background: var(--devui-highlight-overlay, hsla(0, 0%, 100%, .8));
  bottom: 0;
  box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  display: flex;
  height: 50px;
  justify-content: center;
  left: 0;
  position: fixed;
  width: 100%
}

.devui-image-preview__toolbar button {
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  outline: 0;
  padding: 0;
  width: 24px
}

.devui-image-preview__toolbar .devui-image-preview__index {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  width: 100px
}

.devui-image-preview__toolbar>:not(:first-child) {
  margin-left: 20px
}

.devui-image-preview__bg {
  background: var(--devui-shadow, rgba(37, 43, 58, .24));
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  inset: 0;
  position: fixed;
  z-index: calc(var(--devui-z-index-full-page-overlay, 1080) - 1)
}

.d-input-icon-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  position: relative
}

.d-input-icon-container label {
  background-color: #ccc;
  flex: 1
}

.d-input-icon-container label input {
  padding-right: 29px
}

.d-input-icon-container span {
  align-items: center;
  bottom: 1px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 1px;
  top: 1px;
  width: 26px
}

.devui-layout {
  display: flex;
  flex: auto;
  flex-direction: column
}

.devui-layout__aside {
  flex-direction: row
}

.devui-layout__content {
  flex: auto;
  min-height: 0
}

.devui-layout__header {
  flex: auto;
  min-height: 40px
}

.devui-layout__footer {
  line-height: 1.5;
  text-align: center
}

.devui-list {
  background-clip: padding-box;
  background-color: var(--devui-connected-overlay-bg, #fff);
  outline: none;
  padding-bottom: 4px
}

.devui-list,
.devui-list-item {
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box
}

.devui-list-item {
  align-items: center;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  height: 36px;
  line-height: 36px;
  padding: 0 8px;
  transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.devui-list-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-list-item:active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-textarea {
  background: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  outline: none;
  padding: 4px 8px;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow .3s var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25));
  vertical-align: middle;
  width: 100%
}

.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-textarea.devui-textarea--glow-style:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-textarea--focus:not(.devui-textarea--error) {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-textarea--focus.devui-textarea--glow-style:not(.devui-textarea--error) {
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-textarea--disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-textarea--disabled,
.devui-textarea--disabled:hover {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-textarea--disabled .devui-textarea__inner {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-textarea--error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-textarea__show-count {
  color: inherit;
  font-size: var(--devui-font-size, 12px);
  pointer-events: none;
  text-align: right;
  white-space: nowrap
}

.devui-textarea--feedback {
  padding-right: 28px
}

.devui-mention {
  position: relative
}

.devui-mention__suggestions {
  background: #fff;
  box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));
  left: 24px;
  max-height: 250px;
  min-width: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  z-index: var(--devui-z-index-framework, 1000)
}

.devui-mention__suggestions-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 6px 14px
}

.devui-mention__suggestions-item:hover {
  background: #eee
}

.devui-mention__suggestions-item-active {
  background: #f2f5fa
}

.devui-mention__suggestions-loading {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  padding: 6px 10px;
  top: 10px;
  width: 40px
}

.devui-menu-horizontal a,
.devui-menu-horizontal a:active,
.devui-menu-horizontal a:hover,
.devui-menu-horizontal a:visited,
.devui-menu-vertical a,
.devui-menu-vertical a:active,
.devui-menu-vertical a:hover,
.devui-menu-vertical a:visited {
  text-decoration: none
}

.devui-menu-horizontal li,
.devui-menu-horizontal ul,
.devui-menu-vertical li,
.devui-menu-vertical ul {
  list-style: none;
  white-space: nowrap
}

.devui-menu-horizontal {
  background: var(--devui-global-bg-normal);
  box-sizing: border-box;
  display: flex;
  line-height: var(--devui-line-height-base, 1.5);
  padding: 14px 20px
}

.devui-menu-horizontal .devui-menu-item {
  box-sizing: content-box;
  cursor: pointer;
  display: flex;
  line-height: 24px;
  padding: 0 20px !important;
  position: relative
}

.devui-menu-horizontal .devui-menu-item:after {
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 20px;
  position: absolute;
  right: 20px;
  width: auto
}

.devui-menu-horizontal :after {
  background: transparent;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content,
.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content {
  color: var(--devui-menu-item-hover)
}

.devui-menu-horizontal .devui-menu-active-parent:after,
.devui-menu-horizontal .devui-menu-item-select:after {
  background: var(--devui-brand, #5e7ce0);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 20px;
  opacity: 1;
  position: absolute;
  right: 20px;
  width: auto
}

.devui-menu-horizontal .devui-menu-item a,
.devui-menu-horizontal .devui-menu-item span {
  color: var(--devui-text, #252b3a)
}

.devui-menu-horizontal .devui-menu-item:hover a,
.devui-menu-horizontal .devui-menu-item:hover span {
  color: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-menu-item:hover:after {
  background: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-submenu {
  margin: 0;
  padding: 0;
  position: relative
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title {
  padding: 0 20px
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title span {
  margin: 0
}

.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right,
.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up {
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-horizontal .devui-submenu:after {
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 20px;
  position: absolute;
  right: 20px;
  width: auto
}

.devui-menu-horizontal .devui-submenu:hover {
  cursor: pointer
}

.devui-menu-horizontal .devui-submenu:hover:after {
  background: var(--devui-brand, #5e7ce0)
}

.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right,
.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up {
  transform: rotate(180deg)
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper {
  background: var(--devui-global-bg-normal);
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)), left 0 linear;
  z-index: var(--devui-z-index-modal, 1050)
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show {
  border-radius: 8px;
  max-height: 100vh;
  opacity: 1;
  padding: 10px 0 !important;
  position: absolute;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
  visibility: visible
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item {
  margin-top: 5px
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu {
  margin: 5px 0;
  padding: 0 20px !important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title {
  padding: 0 !important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu {
  padding: 0 20px !important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
  visibility: hidden
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item {
  margin-top: 5px
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu {
  margin: 5px 0;
  padding: 0 20px !important
}

.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title {
  padding: 0 !important
}

.devui-menu-horizontal .devui-menu-item-disabled a,
.devui-menu-horizontal .devui-menu-item-disabled span,
.devui-menu-horizontal .devui-submenu-disabled a,
.devui-menu-horizontal .devui-submenu-disabled span {
  color: var(--devui-menu-disabled) !important;
  cursor: not-allowed
}

.devui-menu-horizontal .devui-menu-item-disabled:after,
.devui-menu-horizontal .devui-submenu-disabled:after {
  content: unset !important
}

.devui-menu-horizontal .devui-menu-item-disabled+.devui-menu-item-horizontal-wrapper,
.devui-menu-horizontal .devui-submenu-disabled+.devui-menu-item-horizontal-wrapper {
  display: none
}

.devui-submenu-menu-item-vertical-wrapper {
  overflow: hidden
}

.devui-submenu-menu-item {
  color: var(--devui-menu-item)
}

.devui-menu-vertical {
  border-right: 1px solid var(--devui-line, #d7d8da);
  padding: 0;
  transition: width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)), padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical :after {
  background: transparent;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical .layer_1 {
  margin: 0 !important
}

.devui-menu-vertical .layer_2>div.devui-submenu-title {
  background: var(--devui-block, #fff);
  margin: 0 !important
}

.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon {
  margin: auto
}

.devui-menu-vertical.devui-menu-collapsed ul li {
  display: none !important
}

.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon {
  margin: auto
}

.devui-menu-vertical .devui-menu-item-vertical-wrapper {
  margin: 4px 0 !important;
  padding-left: 0 !important
}

.devui-menu-vertical .devui-menu-item {
  background: var(--devui-block, #fff);
  color: var(--devui-menu-item);
  cursor: pointer;
  display: flex;
  flex-grow: 1;
  height: 40px;
  line-height: 40px;
  transition: background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.devui-menu-vertical .devui-menu-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-menu-vertical .devui-menu-item span:nth-child(2) {
  text-align: left
}

.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper) {
  display: flex;
  flex: auto
}

.devui-menu-vertical .devui-menu-item:after {
  background: var(--devui-primary-hover, #5e7ce0);
  content: "";
  display: block;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0)
}

.devui-menu-vertical ul.devui-submenu {
  margin: 0;
  padding: 0
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item {
  display: flex
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item>span {
  color: var(--devui-menu-item);
  flex: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title {
  align-items: center;
  color: var(--devui-menu-item);
  cursor: pointer;
  display: flex;
  height: 40px;
  line-height: 40px;
  padding-left: 18px;
  transition: background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:first-child {
  font-size: var(--devui-font-size-lg, 14px)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content {
  color: var(--devui-menu-item);
  flex: auto;
  font-size: var(--devui-font-size-lg, 14px)
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon {
  text-align: center
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up {
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened {
  transform: rotate(180deg)
}

.devui-menu-vertical ul.devui-submenu .devui-submenu-title:hover span {
  color: var(--devui-menu-item-hover) !important
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover span {
  color: var(--devui-menu-item-hover)
}

.devui-menu-vertical ul.devui-submenu .devui-menu-item-select * {
  color: var(--devui-menu-item-hover) !important
}

.devui-menu-vertical .devui-menu-item-select {
  background: var(--devui-primary-bg, #f2f5fc) !important;
  position: relative
}

.devui-menu-vertical .devui-menu-item-select a,
.devui-menu-vertical .devui-menu-item-select span {
  color: var(--devui-menu-item-hover)
}

.devui-menu-vertical .devui-menu-item-select:after {
  background: var(--devui-brand, #5e7ce0);
  content: "";
  display: block;
  height: 100%;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(1);
  width: 4px
}

.devui-menu-vertical .devui-menu-item:hover {
  color: var(--devui-menu-item-hover)
}

.devui-menu-vertical div.devui-submenu-title,
.devui-menu-vertical li.devui-menu-item {
  overflow: hidden;
  white-space: nowrap
}

.devui-menu-vertical div.devui-submenu-title span:nth-child(2),
.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span,
.devui-menu-vertical li.devui-menu-item span:nth-child(2),
.devui-menu-vertical li.devui-menu-item span:nth-child(2) span {
  overflow: hidden;
  text-overflow: ellipsis
}

.devui-menu-vertical .devui-menu-item-isCollapsed {
  width: -moz-fit-content;
  width: fit-content
}

.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon {
  margin: auto
}

.devui-menu-vertical ul li~ul>div {
  margin-top: 0 !important
}

.devui-menu-vertical .devui-menu-item-disabled *,
.devui-menu-vertical .devui-submenu-disabled * {
  background: var(--devui-block, #fff) !important;
  color: var(--devui-menu-disabled) !important;
  cursor: not-allowed !important
}

.devui-menu-vertical .devui-menu-item-disabled:after,
.devui-menu-vertical .devui-submenu-disabled:after {
  content: unset
}

.devui-menu-vertical .devui-menu__arrow-icon {
  height: 16px;
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 16px
}

.devui-menu-vertical .devui-menu__arrow-icon path {
  fill: var(--devui-text-weak, #575d6c)
}

.devui-menu-vertical .devui-menu__arrow-icon.is-opened {
  transform: rotate(180deg)
}

.devui-menu-icon+span {
  margin-left: 10px
}

.devui-menu-item-disabled:hover,
.devui-submenu-disabled:hover {
  color: var(--devui-menu-disabled) !important;
  cursor: not-allowed !important
}

.devui-submenu-disabled:hover span {
  color: var(--devui-menu-disabled) !important
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))
}

.fade-leave-to {
  display: none
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0
}

.devui-menu-item-disabled,
.devui-menu-item-disabled.devui-menu-vertical .devui-menu-item-disabled.devui-menu-item-select .devui-submenu-disabled,
.devui-submenu-disabled.devui-menu-item-select,
.devui-submenu-disabled.devui-menu-vertical {
  color: var(--devui-menu-disabled) !important;
  cursor: not-allowed !important
}

.devui-message {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  border-color: var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius-feedback, 4px);
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
  display: flex;
  left: 50%;
  padding: 10px 15px;
  position: fixed;
  top: 80px;
  transform: translate(-50%);
  transition: top .5s ease;
  z-index: var(--devui-z-index-modal, 1079)
}

.devui-message--success {
  background-color: var(--devui-success-bg, #cffcee);
  border-color: var(--devui-success-line, #50d4ab)
}

.devui-message--info {
  background-color: var(--devui-info-bg, #e9edfa);
  border-color: var(--devui-info-line, #5e7ce0)
}

.devui-message--warning {
  background-color: var(--devui-warning-bg, #ffe1c7);
  border-color: var(--devui-warning-line, #fa9841)
}

.devui-message--error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-message__close {
  cursor: pointer;
  line-height: 0;
  margin-left: auto;
  padding-left: 10px
}

.devui-message__image {
  display: inline-block;
  height: var(--devui-font-size-icon, 16px);
  line-height: 1;
  margin-right: 10px;
  margin-top: 1px;
  min-height: var(--devui-font-size-icon, 16px);
  min-width: var(--devui-font-size-icon, 16px);
  padding: 0;
  width: var(--devui-font-size-icon, 16px)
}

.devui-message__image--success {
  color: var(--devui-success, #50d4ab)
}

.devui-message__image--info {
  color: var(--devui-info, #5e7ce0)
}

.devui-message__image--warning {
  color: var(--devui-warning, #fac20a)
}

.devui-message__image--error {
  color: var(--devui-danger, #f66f6a)
}

.devui-message__content {
  display: -webkit-box;
  font-size: var(--devui-font-size-page-title, 16px);
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical
}

.devui-message__content--success {
  color: var(--devui-success, #50d4ab)
}

.devui-message__content--info {
  color: var(--devui-info, #5e7ce0)
}

.devui-message__content--warning {
  color: var(--devui-warning, #fac20a)
}

.devui-message__content--error {
  color: var(--devui-danger, #f66f6a)
}

.message-fade-enter-active,
.message-fade-leave-active {
  transform: translate(-50%);
  transition: all .5s ease
}

.message-fade-enter-from,
.message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -200%)
}

.devui-modal {
  background-clip: padding-box;
  background-color: var(--devui-fullscreen-overlay-bg, #fff);
  border: none;
  border-radius: var(--devui-border-radius-card, 8px);
  box-shadow: var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  left: 50%;
  opacity: 1;
  outline: 0;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  z-index: var(--devui-z-index-modal, 1050)
}

.devui-modal .btn-close {
  -webkit-appearance: none;
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: calc(var(--devui-z-index-modal, 1050) + 1)
}

.devui-modal .btn-close .devui-icon__container {
  align-items: center;
  display: inline-flex
}

.devui-modal .type-content {
  align-items: center;
  display: flex
}

.devui-modal .type-content-icon {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: center;
  line-height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  width: 24px
}

.devui-modal .type-content-text {
  font-size: 18px;
  font-weight: 700;
  vertical-align: middle
}

.devui-modal-content {
  background: var(--devui-fullscreen-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px)
}

.devui-modal__header {
  box-sizing: border-box;
  font-size: var(--devui-font-size-modal-title, 18px);
  font-weight: 700;
  height: 46px;
  letter-spacing: 0;
  line-height: 26px;
  overflow: hidden;
  padding: 20px 20px 0;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: 100%
}

.devui-modal__header .header-alert-icon {
  display: inline-block;
  line-height: 16px;
  margin-right: 8px;
  text-align: center;
  vertical-align: middle
}

.devui-modal__body {
  box-sizing: border-box;
  color: var(--devui-text-weak, #575d6c);
  font-size: var(--devui-font-size, 12px);
  padding: 20px
}

.devui-modal__footer {
  border-top: none;
  box-sizing: border-box;
  padding: 0 32px 24px;
  text-align: center;
  width: 100%
}

.devui-modal__footer>* {
  margin: 0 4px
}

.devui-modal--wipe-enter-active {
  transition: opacity .1s cubic-bezier(.16, .75, .5, 1), top .1s linear
}

.devui-modal--wipe-leave-active {
  transition: opacity .1s cubic-bezier(.5, 0, .84, .25), top .1s linear
}

.devui-modal--wipe-enter-from,
.devui-modal--wipe-leave-to {
  opacity: .2;
  top: calc(50% - 24px)
}

.devui-notification {
  position: fixed;
  right: 20px;
  top: 50px;
  width: 20em;
  word-break: normal;
  word-wrap: break-word;
  z-index: var(--devui-z-index-pop-up, 1060)
}

.devui-notification a:link,
.devui-notification a:visited {
  color: var(--devui-link-light, #96adfa)
}

.devui-notification a:active,
.devui-notification a:hover {
  color: var(--devui-link-light-active, #beccfa)
}

.devui-notification-item-container {
  background-color: var(--devui-feedback-overlay-bg, #464d6e);
  border-radius: var(--devui-border-radius-feedback, 4px);
  box-shadow: var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  filter: alpha(opacity=95);
  margin: 0 0 8px;
  opacity: .95;
  position: relative
}

.devui-notification__item {
  display: block;
  padding: 12px 16px;
  position: relative
}

.devui-notification__icon-close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 7px
}

.devui-notification__icon-close i.icon {
  color: var(--devui-light-text, #fff) !important
}

.devui-notification__title {
  display: block;
  font-size: var(--devui-font-size-card-title, 14px);
  font-weight: 700;
  padding: 0 0 calc(.5em - 2px)
}

.devui-notification__image {
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  left: 16px;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 14px;
  width: 16px
}

.devui-notification__image.devui-notification__image--warning path.devui-notification__warning-outer {
  fill: var(--devui-warning-line, #fa9841)
}

.devui-notification__image.devui-notification__image--warning path.devui-notification__warning-inner {
  fill: var(--devui-light-text, #fff);
  stroke: var(--devui-light-text, #fff)
}

.devui-notification__image.devui-notification__image--info {
  background-color: var(--devui-info, #5e7ce0)
}

.devui-notification__image.devui-notification__image--error {
  background-color: var(--devui-danger, #f66f6a)
}

.devui-notification__image.devui-notification__image--success {
  background-color: var(--devui-success, #50d4ab)
}

.devui-notification__image .devui-notification__image-error-path,
.devui-notification__image .devui-notification__image-info-path,
.devui-notification__image .devui-notification__image-success-path {
  fill: var(--devui-light-text, #fff)
}

.devui-notification__message {
  margin-left: 20px
}

.devui-notification__message .devui-notification__content {
  font-size: var(--devui-font-size, 12px);
  margin-top: 4px
}

.devui-notification-message-common .devui-notification__message {
  margin-left: 0
}

.devui-notification__message p {
  font-size: var(--devui-font-size, 12px);
  margin-top: 4px
}

.notification-fade-enter-active,
.notification-fade-leave-active {
  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))
}

.notification-fade-enter-from,
.notification-fade-leave-to {
  transform: translate(100%)
}

.devui-select {
  font-size: var(--devui-font-size, 12px);
  position: relative;
  width: 100%
}

.devui-select__selection:hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select--focus .devui-select__selection:not(.devui-select__selection--error),
.devui-select--focus .devui-select__selection:not(.devui-select__selection--error):hover,
.devui-select--open .devui-select__selection:not(.devui-select__selection--error),
.devui-select--open .devui-select__selection:not(.devui-select__selection--error):hover {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select .devui-tag {
  margin: 4px 0 4px 4px
}

.devui-select .devui-tag .devui-tag__item.devui-tag--md {
  height: 18px;
  line-height: 16px
}

.devui-select .devui-tag .devui-tag__item.devui-tag--default {
  background-color: var(--devui-label-bg, #e9edfa)
}

.devui-select--sm {
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-select--sm .devui-tag {
  margin: 2px 0 2px 4px
}

.devui-select--sm .devui-tag .devui-tag__item.devui-tag--sm {
  height: 18px;
  line-height: 16px
}

.devui-select--lg {
  font-size: var(--devui-font-size-lg, 14px)
}

.devui-select:not(.devui-select--disabled):not(.devui-select--underlined) .devui-select__selection.devui-select__selection--glow-style:hover {
  border-color: var(--devui-form-control-line, #d7d8da);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select:not(.devui-select--disabled):not(.devui-select--underlined) .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error:hover {
  border-color: var(--devui-danger-line, #f66f6a);
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select--focus .devui-select__selection.devui-select__selection--glow-style,
.devui-select--open .devui-select__selection.devui-select__selection--glow-style {
  border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-select--focus .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error,
.devui-select--open .devui-select__selection.devui-select__selection--glow-style.devui-select__selection--error {
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-select--underlined {
  border-bottom: 1px solid var(--devui-form-control-line, #d7d8da);
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1)
}

.devui-select--underlined:not([disabled]):not(.disabled):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select--underlined:not([disabled]):not(.disabled).devui-select--open {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select--underlined .devui-select__input,
.devui-select--underlined .devui-select__selection {
  border: none
}

.devui-select--disabled,
.devui-select--disabled .devui-select__input,
.devui-select--disabled .devui-select__selection {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-select--disabled .devui-select__arrow,
.devui-select--disabled .devui-select__clear {
  cursor: not-allowed
}

.devui-select--disabled .devui-select__arrow svg path,
.devui-select--disabled .devui-select__clear svg path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-select--open .devui-select__arrow {
  transform: rotate(180deg)
}

.devui-dropdown-menu-multiple .devui-select__item.active {
  background-color: transparent;
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-select__selection {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  position: relative;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-select__selection--error {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-select__selection--error,
.devui-select__selection--error:hover {
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-select__multiple {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  padding-right: 28px
}

.devui-select__multiple .devui-select__multiple--input {
  display: flex;
  max-width: 100%;
  min-width: 15px
}

.devui-select__input {
  background: none;
  border: none;
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  height: 30px;
  outline: none;
  padding: 4px 28px 4px 10px;
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1);
  vertical-align: middle;
  width: 100%
}

.devui-select__input:not([disabled]):not(.disabled):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-select__input:not([disabled]):not(.disabled):focus {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-select__input.disabled:hover,
.devui-select__input[disabled]:hover {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-select__input.devui-select__input--lg {
  height: 38px
}

.devui-select__input.devui-select__input--sm {
  height: 22px
}

.devui-select__clearable:hover .devui-select__clear {
  display: inline-flex
}

.devui-select__clearable:hover .devui-select__arrow {
  display: none
}

.devui-select__arrow,
.devui-select__clear {
  align-items: center;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 28px
}

.devui-select__clear {
  display: none
}

.devui-select__clear svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da);
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-select__clear svg:hover path {
  fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-select__clear--feedback {
  right: 28px
}

.devui-select__arrow {
  transform: rotate(0);
  transition: transform .25s ease-out
}

.devui-select__arrow svg path {
  fill: var(--devui-icon-text, #71757f)
}

.devui-select__arrow--feedback {
  right: 28px
}

.devui-select__dropdown {
  overflow: auto
}

.devui-select__dropdown-list {
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  width: 100%
}

.devui-select__item {
  border: 0;
  box-sizing: border-box;
  clear: both;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: block;
  font-size: var(--devui-font-size, 12px);
  line-height: 1.5;
  min-height: 36px;
  overflow: hidden;
  padding: 8px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.devui-select__item:hover:not(.active):not(.disabled) {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-select__item.active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-select__item.disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-select--sm .devui-select__item {
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-select--sm .devui-select__item .devui-checkbox .devui-checkbox__material,
.devui-select--sm .devui-select__item .devui-checkbox .devui-checkbox__material>svg {
  height: var(--devui-font-size-sm, 12px);
  width: var(--devui-font-size-sm, 12px)
}

.devui-select--lg .devui-select__item {
  font-size: var(--devui-font-size-lg, 14px);
  padding: 11px 10px
}

.devui-scrollbar::-webkit-scrollbar-corner {
  background-color: transparent
}

.devui-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--devui-line, #adb0b8)
}

.devui-select__dropdown--empty {
  color: var(--devui-disabled-text, #cfd0d3);
  font-size: var(--devui-font-size, 12px);
  line-height: 22px;
  min-height: 22px;
  text-align: center
}

.devui-select__group {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative
}

.devui-select__group:not(:last-of-type) {
  padding-bottom: 24px
}

.devui-select__group:not(:last-of-type):after {
  background: var(--devui-dividing-line, #f2f2f3);
  bottom: 12px;
  content: "";
  display: block;
  height: 1px;
  left: 12px;
  position: absolute;
  right: 12px
}

.devui-select__group-title {
  color: var(--devui-aide-text, #71757f);
  font-size: var(--devui-font-size, 12px);
  padding: 4px 12px
}

.fade-bottom-enter-from,
.fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.fade-bottom-enter-to,
.fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.fade-top-enter-from,
.fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.fade-top-enter-to,
.fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-pagination {
  align-items: center;
  display: flex;
  font-size: var(--devui-font-size, 12px)
}

.devui-pagination .devui-pagination__size {
  align-items: center;
  background-color: var(--devui-base-bg, #fff);
  border-color: var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  margin: 0 8px 0 0;
  min-height: 28px;
  outline: 0;
  padding: 4px 10px;
  position: relative;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  vertical-align: middle
}

.devui-pagination .devui-pagination__size span {
  margin-right: 8px
}

.devui-pagination .devui-pagination__size svg {
  transition: transform var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-pagination .devui-pagination__size svg path {
  fill: var(--devui-text, #252b3a)
}

.devui-pagination .devui-pagination__size:hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-pagination .devui-pagination__size:focus {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-pagination .devui-pagination__size.devui-pagination__size--sm {
  height: 26px
}

.devui-pagination .devui-pagination__size.devui-pagination__size--lg {
  height: 46px
}

.devui-pagination .devui-pagination__size.devui-pagination__size--open svg {
  transform: rotate(180deg)
}

.devui-pagination .devui-pagination__size>.devui-icon__container {
  align-items: center;
  display: flex
}

.devui-pagination .devui-pagination__total-size {
  color: var(--devui-text-weak, #575d6c);
  display: inline-block;
  margin: 0 12px 0 0;
  position: relative;
  vertical-align: middle
}

.devui-pagination .devui-pagination__item,
.devui-pagination .devui-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0
}

.devui-pagination a {
  color: #3eaf7c;
  text-decoration: none
}

.devui-pagination .devui-pagination__list {
  align-items: center;
  display: inline-flex;
  vertical-align: middle
}

.devui-pagination .devui-pagination__list>.disabled>a,
.devui-pagination .devui-pagination__list>.disabled>a:focus,
.devui-pagination .devui-pagination__list>.disabled>a:hover {
  cursor: not-allowed
}

.devui-pagination .devui-pagination__list li.devui-pagination__item {
  cursor: pointer
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled).active a.devui-pagination__link {
  background-color: var(--devui-primary, #5e7ce0);
  color: var(--devui-light-text, #fff);
  cursor: pointer;
  text-decoration: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled).active a.devui-pagination__link:hover {
  background-color: var(--devui-primary, #5e7ce0);
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--devui-light-text, #fff);
  text-decoration: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text-weak, #575d6c);
  display: flex;
  height: 28px;
  justify-content: center;
  line-height: 24px;
  margin-left: 4px;
  min-width: 28px;
  padding: 0 4px;
  transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link:hover {
  background-color: transparent;
  border: 1px solid var(--devui-dividing-line, #f2f2f3);
  box-shadow: 0 1px 3px 0 var(--devui-light-shadow, rgba(37, 43, 58, .12));
  color: var(--devui-text, #252b3a);
  text-decoration: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link svg {
  vertical-align: middle
}

.devui-pagination .devui-pagination__list li.devui-pagination__item .devui-pagination__link svg g polygon {
  fill: var(--devui-icon-text, #71757f)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link:hover {
  border: none;
  box-shadow: none
}

.devui-pagination .devui-pagination__list li.devui-pagination__item.disabled a.devui-pagination__link svg g polygon {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled) a.devui-pagination__link:active svg g polygon {
  fill: var(--devui-text, #252b3a)
}

.devui-pagination .devui-pagination__list li.devui-pagination__item:not(.disabled) a.devui-pagination__link:hover:not(:active) svg g polygon {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-pagination .devui-pagination--sm>li.devui-pagination__item>a.devui-pagination__link {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px;
  line-height: 22px;
  min-width: 24px
}

.devui-pagination .devui-pagination--lg>li.devui-pagination__item>a.devui-pagination__link {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px;
  line-height: 38px;
  min-width: 40px
}

.devui-pagination .devui-pagination__jump-container {
  align-items: center;
  display: inline-flex;
  margin: 0 12px;
  position: relative;
  vertical-align: middle
}

.devui-pagination .devui-pagination__jump-container .devui-input {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
  width: 42px
}

.devui-pagination .devui-pagination__jump-container .devui-input--lg {
  width: 56px
}

.devui-pagination .devui-pagination__jump-button {
  align-items: center;
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
  width: 24px
}

.devui-pagination .devui-pagination__jump-button .devui-pagination__go {
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--devui-icon-text, #71757f);
  border-top: 6px solid transparent;
  height: 0;
  width: 0
}

.devui-pagination .devui-pagination__jump-button:hover {
  border-color: var(--devui-brand-active, #526ecc)
}

.devui-pagination .devui-pagination__jump-button:hover .devui-pagination__go {
  border-left-color: var(--devui-brand-active, #526ecc)
}

.devui-pagination .devui-pagination__jump-size--default {
  height: 28px;
  width: 28px
}

.devui-pagination .devui-pagination__jump-size--default .devui-pagination__go {
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--devui-icon-text, #71757f);
  border-top: 8px solid transparent;
  height: 0;
  width: 0
}

.devui-pagination .devui-pagination__jump-size--sm {
  height: 24px;
  width: 24px
}

.devui-pagination .devui-pagination__jump-size--sm .devui-pagination__go {
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--devui-icon-text, #71757f);
  border-top: 6px solid transparent;
  height: 0;
  width: 0
}

.devui-pagination .devui-pagination__jump-size--sm .devui-pagination__link {
  height: 30px;
  line-height: 32px
}

.devui-pagination .devui-pagination__jump-size--lg {
  height: 46px;
  width: 46px
}

.devui-pagination .devui-pagination__jump-size--lg .devui-pagination__go {
  border-bottom: 14px solid transparent;
  border-left: 14px solid var(--devui-icon-text, #71757f);
  border-top: 14px solid transparent;
  height: 0;
  width: 0
}

.devui-pagination .devui-pagination__config {
  color: var(--devui-text, #252b3a);
  display: inline-block;
  margin: 0 4px;
  position: relative;
  vertical-align: middle
}

.devui-pagination .devui-pagination__setup-icon {
  cursor: pointer;
  display: flex;
  line-height: 30px
}

.devui-pagination .devui-pagination__config-container {
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  cursor: auto;
  left: -136px;
  line-height: 26px;
  padding: 4px 0;
  position: absolute;
  top: 28px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 150px;
  z-index: var(--devui-z-index-dropdown, 1052)
}

.devui-pagination .devui-pagination__config-item {
  border-bottom: 1px solid var(--devui-line, #d7d8da);
  padding-bottom: 8px;
  padding-top: 4px
}

.devui-pagination .devui-pagination__config-item:last-child {
  border-bottom: none
}

.devui-pagination .config-item-title {
  color: var(--devui-line, #d7d8da);
  font-size: var(--devui-font-size, 12px);
  line-height: 1.5;
  padding-left: 8px
}

.devui-pagination .devui-pagination__number {
  display: flex;
  margin-top: 4px;
  padding-left: 8px
}

.devui-pagination .devui-pagination__number div {
  border-bottom: 1px solid var(--devui-line, #d7d8da);
  border-right: 1px solid var(--devui-line, #d7d8da);
  border-top: 1px solid var(--devui-line, #d7d8da);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  height: 26px;
  text-align: center;
  width: 26px
}

.devui-pagination .devui-pagination__number div:first-child {
  border-left: 1px solid var(--devui-line, #d7d8da)
}

.devui-pagination .devui-pagination__number div:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-pagination .devui-pagination__number div.choosed {
  background-color: var(--devui-list-item-active-bg, #f2f5fc) !important;
  color: var(--devui-list-item-active-text, #252b3a);
  cursor: auto !important
}

.devui-pagination .config-item-words {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px);
  margin-top: 4px;
  padding-left: 8px
}

.devui-pagination .config-item-words:hover {
  background-color: var(--devui-area, #f5f5f5);
  cursor: pointer
}

.devui-pagination__size-list {
  background-clip: padding-box;
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  min-width: 60px;
  outline: none;
  padding: 12px
}

.devui-pagination__size-list ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.devui-pagination__size-list li {
  border: 0;
  border-radius: var(--devui-border-radius, 2px);
  cursor: pointer;
  display: block;
  line-height: 20px;
  min-height: 36px;
  overflow: hidden;
  padding: 8px 12px;
  text-overflow: ellipsis;
  transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap;
  width: 100%
}

.devui-pagination__size-list li:hover:not(.active) {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-pagination__size-list li.active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.no-left-padding.devui-panel-body-collapse:before {
  content: none !important
}

.no-left-padding.devui-panel-body-collapse .devui-panel-content {
  border-left: none !important
}

.devui-panel {
  background-color: var(--devui-base-bg, #fff);
  line-height: 1.5
}

.devui-panel .devui-panel-heading {
  color: var(--devui-text, #252b3a);
  padding: 12px 20px
}

.devui-panel .devui-panel-heading d-panel-header {
  line-height: 1.5
}

.devui-panel .devui-panel-body {
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: flex;
  position: relative
}

.devui-panel .devui-panel-body .devui-panel-content {
  background: var(--devui-base-bg, #fff);
  flex: 1;
  line-height: 1.5;
  padding: 15px
}

.devui-panel .devui-panel-body.devui-panel-body-collapse:before {
  content: "";
  height: 100%;
  width: 30px
}

.devui-panel .devui-panel-body.devui-panel-body-collapse .devui-panel-content {
  border-left: 2px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-panel .devui-panel-footer {
  background-color: var(--devui-area, #f5f5f5);
  color: var(--devui-text, #252b3a);
  padding: 10px 15px
}

.devui-panel .devui-panel-footer d-panel-footer {
  line-height: 1.5
}

.devui-panel.devui-panel-default .devui-panel-body,
.devui-panel.devui-panel-default .devui-panel-heading {
  background-color: var(--devui-default-bg, #f7f8fa)
}

.devui-panel.devui-panel-primary .devui-panel-body,
.devui-panel.devui-panel-primary .devui-panel-heading {
  background-color: var(--devui-primary-bg, #f2f5fc)
}

.devui-panel.devui-panel-primary .devui-panel-body-collapse .devui-panel-content {
  border-color: var(--devui-primary-line, #5e7ce0)
}

.devui-panel.devui-panel-info .devui-panel-body,
.devui-panel.devui-panel-info .devui-panel-heading {
  background-color: var(--devui-info-bg, #e9edfa)
}

.devui-panel.devui-panel-info .devui-panel-body-collapse .devui-panel-content {
  border-color: var(--devui-info-line, #5e7ce0)
}

.devui-panel.devui-panel-success .devui-panel-body,
.devui-panel.devui-panel-success .devui-panel-heading {
  background-color: var(--devui-success-bg, #cffcee)
}

.devui-panel.devui-panel-success .devui-panel-body-collapse .devui-panel-content {
  border-color: var(--devui-success-line, #50d4ab)
}

.devui-panel.devui-panel-warning .devui-panel-body,
.devui-panel.devui-panel-warning .devui-panel-heading {
  background-color: var(--devui-warning-bg, #ffe1c7)
}

.devui-panel.devui-panel-warning .devui-panel-body-collapse .devui-panel-content {
  border-color: var(--devui-warning-line, #fa9841)
}

.devui-panel.devui-panel-danger .devui-panel-body,
.devui-panel.devui-panel-danger .devui-panel-heading {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

.devui-panel.devui-panel-danger .devui-panel-body-collapse .devui-panel-content {
  border-color: var(--devui-danger-line, #f66f6a)
}

.devui-panel .devui-panel-leave-active {
  animation: panelUpOut .3s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s ease-in-out
}

.devui-panel .devui-panel-enter-active {
  animation: panelUpIn .3s ease-in-out;
  animation-fill-mode: both;
  transition: all .3s ease-in-out
}

@keyframes panelUpOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0 0
  }

  to {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0
  }
}

@keyframes panelUpIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0
  }

  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0 0
  }
}

.devui-progress__content {
  display: flex;
  flex-wrap: nowrap
}

.devui-progress__content .devui-progress__line {
  background: var(--devui-dividing-line, #f2f2f3);
  position: relative;
  width: 100%
}

.devui-progress__content .devui-progress__line .devui-progress__bar {
  background-color: #5e7ce0;
  height: 100%;
  transition: width .6s ease;
  width: 0
}

.devui-progress__content .devui-progress__line .devui-progress__bar>span {
  color: var(--devui-light-text, #fff);
  display: block;
  font-size: 12px;
  line-height: 1.5;
  padding: 0 10px;
  white-space: nowrap
}

.devui-progress__content .devui-progress__line>span {
  color: var(--devui-light-text, #fff);
  display: block;
  font-size: 12px;
  height: 100%;
  left: 0;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  top: 0;
  white-space: nowrap;
  width: 100%
}

.devui-progress__content .devui-progress__line .inside {
  text-align: center
}

.devui-progress__content .devui-progress__line .insideLeft {
  text-align: left
}

.devui-progress__content .devui-progress__line .insideRight {
  text-align: right
}

.devui-progress__content>span {
  min-width: 46px;
  padding: 0 5px;
  text-align: center
}

.devui-progress__circle {
  position: relative
}

.devui-progress__circle .devui-progress__circle-text {
  color: var(--devui-text, #252b3a);
  left: 50%;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: normal;
  width: 100%
}

.devui-quadrant-diagram canvas {
  z-index: 1
}

.devui-radio {
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  font-size: var(--devui-font-size, 12px);
  font-weight: 400;
  line-height: 1.5
}

.devui-radio__wrapper {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.devui-radio.active .devui-radio__material {
  border-color: var(--devui-brand, #5e7ce0);
  border-width: 4px
}

.devui-radio.active.devui-radio--bordered {
  border-color: var(--devui-primary-hover, #7693f5)
}

.devui-radio.disabled {
  cursor: not-allowed
}

.devui-radio.disabled .devui-radio__label {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-radio.disabled.devui-radio--bordered {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-radio.disabled .devui-radio__material {
  background-color: var(--devui-shape-icon-fill-disabled, #f5f5f5);
  border-color: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-radio.disabled.active .devui-radio__material {
  border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-radio__material {
  border: 1px solid var(--devui-shape-icon-fill, #d7d8da);
  border-radius: var(--devui-border-radius-full, 100px);
  display: inline-block;
  height: 16px;
  overflow: hidden;
  position: relative;
  transform: translateY(-1px);
  transition: border var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  width: 16px
}

.devui-radio__label {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px);
  margin-left: 8px
}

.devui-radio__input {
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  width: 0;
  z-index: -1
}

.devui-radio--glow-style.devui-radio .devui-radio__material {
  transition: box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))
}

.devui-radio--glow-style.devui-radio:not(.disabled):hover .devui-radio__material {
  box-shadow: 0 0 0 6px var(--devui-range-item-hover-bg, #e9edfa)
}

.devui-radio--bordered {
  border: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-radius: var(--devui-border-radius, 2px);
  padding: 0 15px 0 10px
}

.devui-radio.devui-radio--lg {
  align-items: center;
  display: flex
}

.devui-radio.devui-radio--lg .devui-radio__label {
  font-size: var(--devui-font-size-lg, 14px)
}

.devui-radio.devui-radio--lg .devui-radio__material,
.devui-radio.devui-radio--lg .devui-radio__material>svg {
  height: 18px;
  width: 18px
}

.devui-radio.devui-radio--lg.devui-radio--bordered {
  height: 40px
}

.devui-radio.devui-radio--md {
  align-items: center;
  display: flex
}

.devui-radio.devui-radio--md .devui-radio__label {
  font-size: var(--devui-font-size-md, 12px)
}

.devui-radio.devui-radio--md .devui-radio__material,
.devui-radio.devui-radio--md .devui-radio__material>svg {
  height: 16px;
  width: 16px
}

.devui-radio.devui-radio--md.devui-radio--bordered {
  height: 32px
}

.devui-radio.devui-radio--sm {
  align-items: center;
  display: flex
}

.devui-radio.devui-radio--sm .devui-radio__label {
  font-size: var(--devui-font-size-sm, 12px)
}

.devui-radio.devui-radio--sm .devui-radio__material,
.devui-radio.devui-radio--sm .devui-radio__material>svg {
  height: 14px;
  width: 14px
}

.devui-radio.devui-radio--sm.devui-radio--bordered {
  height: 24px
}

.devui-radio-group {
  align-items: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start
}

.devui-radio-group.is-row {
  flex-direction: row
}

.devui-radio-group.is-column {
  flex-direction: column
}

.devui-radio-group .devui-radio__wrapper {
  min-height: 28px
}

.devui-radio-group .devui-radio__wrapper:not(:last-child) {
  padding-right: 20px
}

.devui-radio-button {
  align-items: center;
  border: 1px solid var(--devui-line, #d7d8da);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  font-size: var(--devui-font-size-md, 12px);
  height: 32px;
  padding: var(--devui-btn-padding, 0 20px);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-radio-button.devui-radio-button--lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px;
  line-height: 40px;
  padding: var(--devui-btn-lg-padding, 0 24px)
}

.devui-radio-button.devui-radio-button--md {
  font-size: var(--devui-font-size-md, 12px);
  height: 32px;
  line-height: 32px;
  padding: var(--devui-btn-padding, 0 20px)
}

.devui-radio-button.devui-radio-button--sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px;
  line-height: 24px;
  padding: var(--devui-btn-sm-padding, 0 16px)
}

.devui-radio-button__input {
  height: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: -1
}

.devui-radio-button.active {
  background-color: var(--devui-brand, #5e7ce0);
  border-color: var(--devui-brand, #5e7ce0);
  color: #fff
}

.devui-radio-button.active.disabled {
  background-color: var(--devui-icon-fill-active-disabled, #beccfa);
  color: #fff
}

.devui-radio-button.disabled {
  background-color: #fff;
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-radio-group.is-row .devui-radio-button {
  border-left: none
}

.devui-radio-group.is-row .devui-radio-button:first-child {
  border-bottom-left-radius: var(--devui-border-radius, 2px);
  border-left: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-top-left-radius: var(--devui-border-radius, 2px)
}

.devui-radio-group.is-row .devui-radio-button:last-child {
  border-bottom-right-radius: var(--devui-border-radius, 2px);
  border-top-right-radius: var(--devui-border-radius, 2px)
}

.devui-radio-group.is-column .devui-radio-button {
  border-top: none;
  width: 100%
}

.devui-radio-group.is-column .devui-radio-button:first-child {
  border-top: 1px solid var(--devui-disabled-line, #dfe1e6);
  border-top-left-radius: var(--devui-border-radius, 2px);
  border-top-right-radius: var(--devui-border-radius, 2px)
}

.devui-radio-group.is-column .devui-radio-button:last-child {
  border-bottom-left-radius: var(--devui-border-radius, 2px);
  border-bottom-right-radius: var(--devui-border-radius, 2px)
}

.devui-rate--align {
  font-size: var(--devui-font-size-icon, 16px);
  line-height: 1;
  margin-right: 5px;
  position: relative
}

.devui-rate--pointer {
  cursor: pointer
}

.devui-rate {
  display: inline-flex
}

.devui-rate__color-active {
  line-height: 1.5
}

.devui-rate__color-active i {
  color: var(--devui-brand, #5e7ce0)
}

.devui-rate__color-active svg g {
  fill: var(--devui-brand, #5e7ce0)
}

.devui-rate__color--success i {
  color: #3dcca6
}

.devui-rate__color--success svg g {
  fill: #3dcca6
}

.devui-rate__color--warning i {
  color: #fac20a
}

.devui-rate__color--warning svg g {
  fill: #fac20a
}

.devui-rate__color--error i {
  color: #f66f6a
}

.devui-rate__color--error svg g {
  fill: #f66f6a
}

.devui-rate__color--customize {
  color: var(--star-color)
}

.devui-rate__color--customize svg g {
  fill: var(--star-color)
}

.devui-rate__active-star {
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0
}

.devui-rate__color {
  color: var(--devui-shape-icon-fill, #d7d8da);
  line-height: 1.5
}

.devui-rate__color .icon {
  color: var(--devui-shape-icon-fill, #d7d8da) !important
}

.devui-rate__color svg g {
  fill: var(--devui-shape-icon-fill, #d7d8da)
}

.devui-rate--only-read {
  cursor: not-allowed
}

.devui-read-tip {
  position: relative
}

.devui-read-tip .title {
  font-size: 16px
}

.source {
  overflow: initial
}

.read-tip-container {
  border: none;
  border-radius: var(--devui-border-radius-feedback, 4px);
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  font-size: var(--devui-font-size, 12px);
  height: -moz-max-content;
  height: max-content;
  line-height: 1.5;
  overflow-wrap: break-word;
  padding: 10px;
  width: -moz-max-content;
  width: max-content;
  z-index: 50
}

.read-tip-container,
.read-tip-container .after {
  background-color: var(--devui-feedback-overlay-bg, #464d6e);
  position: absolute
}

.read-tip-container .after {
  content: "";
  height: 12px;
  transform: rotate(45deg);
  width: 12px
}

.read-tip-container.top .after {
  bottom: -4px
}

.read-tip-container.left .after {
  right: -4px
}

.read-tip-container.right .after {
  left: -4px
}

.read-tip-container.bottom .after {
  top: -4px
}

.devui-result {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  text-align: center
}

.devui-result__icon-success:before {
  color: var(--devui-success, #50d4ab)
}

.devui-result__icon-danger:before {
  color: var(--devui-danger, #f66f6a)
}

.devui-result__icon-warning:before {
  color: var(--devui-warning, #fac20a)
}

.devui-result__icon-info:before {
  color: var(--devui-info, #5e7ce0)
}

.devui-result__title {
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size-lg, 14px);
  margin-top: 20px
}

.devui-result__desc {
  color: var(--devui-text-weak, #575d6c);
  font-size: var(--devui-font-size-md, 12px);
  margin-top: 10px
}

.devui-result__extra {
  margin-top: 30px
}

.devui-search {
  align-items: center;
  border-radius: var(--devui-border-radius, 2px);
  display: flex;
  justify-content: center;
  position: relative;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in, cubic-bezier(.5, 0, .84, .25))
}

.devui-search:not(.devui-search--error):not(.devui-search--disabled):not(.devui-search--focus):not(.devui-search--glow-style):hover .devui-input {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-search .devui-input {
  align-items: center;
  background-color: var(--devui-form-control-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  display: inline-flex;
  font-size: var(--devui-font-size-md, 12px);
  height: 32px;
  justify-content: center;
  padding: 4px 60px 4px 8px;
  transition: border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.devui-search .devui-input__inner {
  padding: 0
}

.devui-search .devui-input__wrapper {
  border: none;
  padding: 0
}

.devui-search--focus .devui-input {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-search__clear,
.devui-search__icon {
  align-items: center;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px
}

.devui-search__clear svg path,
.devui-search__icon svg path {
  fill: var(--devui-icon-text, #71757f)
}

.devui-search__clear {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 10px;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 36px;
  width: 30px
}

.devui-search__clear>svg path {
  fill: var(--devui-shape-icon-fill, #d7d8da);
  transition: all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)
}

.devui-search__clear>svg:hover path {
  fill: var(--devui-shape-icon-fill-hover, #babbc0)
}

.devui-search__clear:after {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3);
  content: "";
  height: 46%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px
}

.devui-search__icon {
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1
}

.devui-search--glow-style:not(.devui-search--disabled).devui-search--focus,
.devui-search--glow-style:not(.devui-search--disabled):hover {
  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08))
}

.devui-search--sm .devui-input {
  font-size: var(--devui-font-size-sm, 12px);
  height: 24px
}

.devui-search--sm .devui-input.devui-input--sm {
  font-size: var(--devui-font-size, 12px);
  padding-right: 60px
}

.devui-search--sm .devui-search__icon {
  height: 26px;
  width: 34px
}

.devui-search--sm .devui-search__icon svg {
  height: 14px;
  width: 14px
}

.devui-search--sm .devui-search__clear {
  height: 100%;
  right: 34px;
  width: 26px
}

.devui-search--sm .devui-search__clear>svg {
  height: 14px;
  width: 14px
}

.devui-search--sm .devui-search__clear {
  right: 24px
}

.devui-search--lg .devui-input {
  font-size: var(--devui-font-size-lg, 14px);
  height: 40px
}

.devui-search--lg .devui-input.devui-input--lg {
  padding: 4px 80px 4px 10px
}

.devui-search--lg .devui-search__clear,
.devui-search--lg .devui-search__icon {
  height: 40px;
  width: 40px
}

.devui-search--lg .devui-search__clear svg,
.devui-search--lg .devui-search__icon svg {
  height: 18px;
  width: 18px
}

.devui-search--lg .devui-search__clear {
  right: 40px
}

.devui-search--disabled .devui-input {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-search--disabled .devui-search__icon {
  cursor: not-allowed
}

.devui-search--disabled .icon-search {
  color: var(--devui-disabled-text, #cfd0d3) !important
}

.devui-search--left .devui-input {
  padding-left: 32px;
  padding-right: 32px
}

.devui-search--left .devui-input.devui-input--lg {
  padding-left: 40px;
  padding-right: 40px
}

.devui-search--left .devui-input.devui-input--sm {
  padding-left: 24px;
  padding-right: 24px
}

.devui-search--left .devui-search__clear {
  right: 0
}

.devui-search--left .devui-search__clear:after {
  display: none
}

.devui-search--left .devui-search__icon {
  left: 0
}

.devui-search--no-border .devui-input,
.devui-search--no-border .devui-input__wrapper {
  background-color: unset
}

.devui-search--no-border:not(.devui-search--focus) .devui-input:not(:hover, :focus, :active) {
  border: 1px solid transparent
}

.devui-skeleton-item {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-skeleton-item--round {
  border-radius: var(--devui-border-radius, 2px)
}

.devui-skeleton-item--square {
  height: 16px;
  width: 100%
}

.devui-skeleton-item--circle {
  border-radius: 50%
}

.devui-skeleton-item--circle.devui-skeleton-item--sm {
  height: 20px;
  width: 20px
}

.devui-skeleton-item--circle.devui-skeleton-item--md {
  height: 40px;
  width: 40px
}

.devui-skeleton-item--circle.devui-skeleton-item--lg {
  height: 60px;
  width: 60px
}

.devui-skeleton-item--image {
  align-items: center;
  display: flex;
  justify-content: center
}

.devui-skeleton-item--image svg {
  height: 40%;
  width: 40%
}

.devui-skeleton-item--image.devui-skeleton-item--sm {
  height: 50px;
  width: 50px
}

.devui-skeleton-item--image.devui-skeleton-item--md {
  height: 100px;
  width: 100px
}

.devui-skeleton-item--image.devui-skeleton-item--lg {
  height: 200px;
  width: 200px
}

.devui-skeleton-item--animation.devui-skeleton-item {
  animation: skeletonLoading 2s ease-in-out infinite;
  background: linear-gradient(100deg, #fff0 40%, #ffffff80, #fff0 60%) var(--devui-list-item-hover-bg, #f2f2f3);
  background-position-x: 180%;
  background-size: 200% 100%
}

@keyframes skeletonLoading {
  to {
    background-position-x: -20%
  }
}

.devui-skeleton {
  width: 100%
}

.devui-skeleton__paragraph {
  margin-bottom: 12px
}

.devui-skeleton__paragraph:last-child {
  margin-bottom: 0;
  width: 60%
}

.devui-skeleton-item.devui-skeleton__title {
  margin-bottom: 16px;
  width: 40%
}

.devui-slider {
  display: block;
  position: relative;
  width: 100%
}

.devui-slider.disabled {
  background-color: var(--devui-disabled-line, #dfe1e6);
  border-color: var(--devui-disabled-line, #dfe1e6);
  cursor: not-allowed
}

.devui-slider__runway {
  align-items: center;
  background-color: var(--devui-area, #f5f5f5);
  border-radius: var(--devui-border-radius-full, 100px);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  height: 5px;
  margin: 4px 0;
  padding: 4px 0;
  position: relative;
  width: 100%
}

.devui-slider__runway.disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  cursor: not-allowed
}

.devui-slider__runway:hover .devui-slider__bar:not(.disabled) {
  background-color: var(--devui-brand-hover, #7693f5)
}

.devui-slider__runway .devui-slider__bar {
  background-color: var(--devui-brand, #5e7ce0);
  border-bottom-left-radius: var(--devui-border-radius-full, 100px);
  border-top-left-radius: var(--devui-border-radius-full, 100px);
  height: 6px;
  position: absolute
}

.devui-slider__runway .devui-slider__bar.disabled {
  background-color: var(--devui-disabled-line, #dfe1e6);
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-slider__runway .devui-slider__bar.disabled:hover {
  cursor: not-allowed
}

.devui-slider__runway .devui-slider__button {
  background-color: var(--devui-base-bg, #fff);
  border: 2px solid var(--devui-brand, #5e7ce0);
  border-radius: 50%;
  height: 14px;
  margin-left: -7px;
  position: absolute;
  transition: transform .2s ease-in-out;
  width: 14px
}

.devui-slider__runway .devui-slider__button:hover:not(.disabled) {
  border-color: var(--devui-brand-hover, #7693f5);
  transform: scale(1.3)
}

.devui-slider__runway .devui-slider__button.disabled {
  border-color: var(--devui-disabled-line, #dfe1e6);
  cursor: not-allowed
}

.devui-slider__runway .devui-slider__popover {
  border-radius: var(--devui-border-radius-feedback, 4px);
  bottom: 26px;
  color: var(--devui-feedback-overlay-text, #dfe1e6);
  font-size: var(--devui-font-size-sm, 12px);
  position: relative;
  transform: translate(-50%)
}

.devui-slider__runway .devui-slider__popover .devui-slider__popover-arrow {
  background-color: var(--devui-feedback-overlay-bg, #464d6e);
  bottom: -4px;
  display: block;
  height: 8px;
  left: 50%;
  margin-left: -4px;
  position: absolute;
  transform: rotate(45deg);
  width: 8px;
  z-index: -1
}

.devui-slider__runway .devui-slider__popover .devui-slider__popover-content {
  background-color: var(--devui-feedback-overlay-bg, #464d6e);
  border-radius: var(--devui-border-radius-feedback, 4px);
  padding: 5px 14px;
  text-align: center
}

.devui-splitter__bar {
  align-items: center;
  background-color: var(--devui-dividing-line, #f2f2f3);
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  position: relative
}

.devui-splitter__bar .devui-splitter__collapse {
  background-color: var(--devui-dividing-line, #f2f2f3);
  cursor: pointer;
  position: absolute;
  z-index: 15
}

.devui-splitter__bar .devui-splitter__collapse:after,
.devui-splitter__bar .devui-splitter__collapse:before {
  background: #fff;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 10px
}

.devui-splitter__bar .devui-splitter__collapse:hover {
  background-color: var(--devui-brand-hover, #7693f5)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse {
  height: 30px;
  width: 12px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.hidden,
.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.hidden {
  display: none
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev {
  border-radius: 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;
  left: 100%
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before,
.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before {
  left: 1px;
  top: 9px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:before {
  transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:before {
  transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after,
.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after {
  left: 1px;
  top: 18px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev:after {
  transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.prev.collapsed:after {
  transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next {
  border-radius: var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);
  right: 100%
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before,
.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before {
  right: 1px;
  top: 9px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:before {
  transform: rotate(70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:before {
  transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after,
.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after {
  right: 1px;
  top: 18px
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next:after {
  transform: rotate(-70deg)
}

.devui-splitter__bar--horizontal .devui-splitter__collapse.next.collapsed:after {
  transform: rotate(70deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse {
  height: 12px;
  width: 30px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.hidden,
.devui-splitter__bar--vertical .devui-splitter__collapse.prev.hidden {
  display: none
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev {
  border-radius: 0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);
  top: 100%
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before,
.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before {
  bottom: 5px;
  left: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:before {
  transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:before {
  transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after,
.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after {
  bottom: 5px;
  left: 14px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev:after {
  transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.prev.collapsed:after {
  transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next {
  border-radius: var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;
  bottom: 100%
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before,
.devui-splitter__bar--vertical .devui-splitter__collapse.next:before {
  left: 5px;
  top: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:before {
  transform: rotate(20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:before {
  left: 5px;
  top: 5px;
  transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after,
.devui-splitter__bar--vertical .devui-splitter__collapse.next:after {
  left: 14px;
  top: 5px
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next:after {
  transform: rotate(-20deg)
}

.devui-splitter__bar--vertical .devui-splitter__collapse.next.collapsed:after {
  transform: rotate(20deg)
}

.devui-splitter__bar--horizontal.resizable:not(.none-resizable):active,
.devui-splitter__bar--horizontal.resizable:not(.none-resizable):focus,
.devui-splitter__bar--horizontal.resizable:not(.none-resizable):hover,
.devui-splitter__bar--vertical.resizable:not(.none-resizable):active,
.devui-splitter__bar--vertical.resizable:not(.none-resizable):focus,
.devui-splitter__bar--vertical.resizable:not(.none-resizable):hover {
  background-color: var(--devui-brand-hover, #7693f5)
}

.devui-splitter__bar--horizontal.resizable:not(.none-resizable):after,
.devui-splitter__bar--vertical.resizable:not(.none-resizable):after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10
}

.devui-splitter__bar--horizontal.resizable {
  cursor: col-resize
}

.devui-splitter__bar--horizontal.resizable:after {
  cursor: col-resize;
  height: 100%;
  top: 0;
  width: 10px
}

.devui-splitter__bar--vertical.resizable {
  cursor: row-resize
}

.devui-splitter__bar--vertical.resizable:after {
  cursor: row-resize;
  height: 10px;
  left: 0;
  width: 100%
}

.devui-splitter {
  border-radius: var(--devui-border-radius, 2px);
  display: flex;
  height: auto;
  position: relative;
  width: 100%
}

.devui-splitter.devui-splitter--horizontal {
  flex-direction: row
}

.devui-splitter.devui-splitter--vertical {
  flex-direction: column
}

.devui-splitter__pane {
  display: block;
  flex: 1 1 auto;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  position: relative
}

.devui-splitter__pane--fixed {
  flex-grow: 0;
  flex-shrink: 0
}

.devui-splitter__pane--hidden {
  flex: 0 !important;
  overflow: hidden !important
}

.devui-splitter__pane--grow {
  flex-grow: 1 !important
}

.devui-statistic {
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5715;
  list-style: none;
  margin: 0;
  padding: 0
}

.devui-statistic__title {
  font-size: 14px;
  margin-bottom: 4px
}

.devui-statistic__content {
  align-items: center;
  display: flex;
  font-size: 24px
}

.devui-statistic__prefix {
  align-items: center;
  display: flex;
  margin-right: 6px
}

.devui-statistic__suffix {
  align-items: center;
  display: flex;
  margin-left: 6px
}

.devui-statistic__value {
  display: inline-block
}

.devui-status {
  align-items: center;
  display: flex;
  height: 20px;
  line-height: 20px
}

.devui-status:before {
  border-radius: 100%;
  content: "";
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px
}

.devui-status.devui-status__bg--success:before {
  background-color: var(--devui-success, #50d4ab)
}

.devui-status.devui-status__bg--error:before {
  background-color: var(--devui-danger, #f66f6a)
}

.devui-status.devui-status__bg--warning:before {
  background-color: var(--devui-warning, #fac20a)
}

.devui-status.devui-status__bg--initial:before {
  background-color: var(--devui-initial, #e9edfa)
}

.devui-status.devui-status__bg--waiting:before {
  background-color: var(--devui-waiting, #beccfa)
}

.devui-status.devui-status__bg--running:before {
  background-color: var(--devui-info, #5e7ce0)
}

.devui-status.devui-status__bg--invalid:before {
  background-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-steps {
  display: flex
}

.devui-steps.vertical {
  flex-direction: column;
  height: 100%
}

.devui-steps.vertical .devui-step {
  flex-direction: row
}

.devui-steps.vertical .devui-step__line {
  height: 100%;
  left: 12px;
  top: 24px;
  width: 1px
}

.devui-steps.vertical .devui-step__content {
  margin-left: 8px;
  padding-top: 2px
}

.devui-steps.simple .devui-step {
  background-color: var(--devui-brand-foil, #f2f2f3);
  color: var(--devui-text, #252b3a);
  height: 36px;
  line-height: 36px;
  position: relative;
  text-align: center
}

.devui-steps.simple .devui-step:not(:first-child) {
  margin-left: 18px
}

.devui-steps.simple .devui-step:not(:last-child) {
  margin-right: 18px
}

.devui-steps.simple .devui-step:not(:first-child):before {
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border: 18px solid var(--devui-brand-foil, #f2f2f3);
  border-left: 18px solid transparent;
  content: "";
  height: 0;
  left: -28px;
  position: absolute;
  top: 0;
  width: 0
}

.devui-steps.simple .devui-step:after {
  border: 18px solid transparent;
  border-left: 18px solid var(--devui-brand-foil, #f2f2f3);
  content: "";
  height: 0;
  position: absolute;
  right: -36px;
  top: 0;
  width: 0
}

.devui-steps.simple .devui-step.active {
  background-color: var(--devui-brand, #5e7ce0);
  color: var(--devui-light-text, #fff)
}

.devui-steps.simple .devui-step.active:before {
  border-bottom-color: var(--devui-brand, #5e7ce0);
  border-right-color: var(--devui-brand, #5e7ce0);
  border-top-color: var(--devui-brand, #5e7ce0)
}

.devui-steps.simple .devui-step.active:after {
  border-left-color: var(--devui-brand, #5e7ce0)
}

.devui-steps.simple .devui-step.finished {
  background-color: var(--devui-success, #50d4ab);
  color: var(--devui-light-text, #fff)
}

.devui-steps.simple .devui-step.finished:before {
  border-bottom-color: var(--devui-success, #50d4ab);
  border-right-color: var(--devui-success, #50d4ab);
  border-top-color: var(--devui-success, #50d4ab)
}

.devui-steps.simple .devui-step.finished:after {
  border-left-color: var(--devui-success, #50d4ab)
}

.devui-step {
  display: flex;
  flex-direction: column;
  flex-shrink: 1
}

.devui-step:last-child {
  flex-shrink: 0
}

.devui-step:last-child:not(.center):not(.devui-step--simple) {
  flex-basis: auto !important
}

.devui-step:last-child .devui-step__line {
  display: none
}

.devui-step__dot-container {
  position: relative
}

.devui-step__content {
  display: flex;
  flex-direction: column
}

.devui-step__dot {
  align-items: center;
  background-color: var(--devui-brand-foil, #f2f2f3);
  border-radius: 50%;
  color: var(--devui-text, #252b3a);
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px
}

.devui-step__line {
  background-color: var(--devui-line, #d7d8da);
  height: 1px;
  left: 24px;
  position: absolute;
  top: 12px;
  width: calc(100% - 24px)
}

.devui-step__description,
.devui-step__title {
  color: var(--devui-placeholder, #babbc0)
}

.devui-step__description {
  font-size: 12px
}

.devui-step.active .devui-step__dot {
  background-color: var(--devui-brand, #5e7ce0);
  color: var(--devui-light-text, #fff)
}

.devui-step.active .devui-step__description,
.devui-step.active .devui-step__title {
  color: var(--devui-brand, #5e7ce0)
}

.devui-step.finished .devui-step__dot {
  background-color: var(--devui-success, #50d4ab)
}

.devui-step.finished .devui-step__description,
.devui-step.finished .devui-step__title {
  color: var(--devui-success, #50d4ab)
}

.devui-step.center {
  text-align: center
}

.devui-step.center .devui-step__line {
  left: calc(50% + 12px)
}

.devui-step.wait .devui-step__dot {
  background-color: var(--devui-brand-foil, #f2f2f3);
  color: var(--devui-text, #252b3a)
}

.devui-step.wait .devui-step__title {
  color: var(--devui-placeholder, #babbc0)
}

.devui-step.process .devui-step__dot {
  background-color: var(--devui-brand, #5e7ce0);
  color: var(--devui-light-text, #fff)
}

.devui-step.process .devui-step__title {
  color: var(--devui-brand, #5e7ce0)
}

.devui-step.finish .devui-step__dot {
  background-color: var(--devui-success, #50d4ab);
  color: var(--devui-light-text, #fff)
}

.devui-step.finish .devui-step__title {
  color: var(--devui-success, #50d4ab)
}

.devui-step.success .devui-step__dot {
  background-color: var(--devui-success, #50d4ab);
  color: var(--devui-light-text, #fff)
}

.devui-step.success .devui-step__title {
  color: var(--devui-success, #50d4ab)
}

.devui-step.error .devui-step__dot {
  background-color: var(--devui-danger, #f66f6a);
  color: var(--devui-light-text, #fff)
}

.devui-step.error .devui-step__title {
  color: var(--devui-danger, #f66f6a)
}

.devui-steps-guide {
  background: var(--devui-brand, #5e7ce0);
  border-radius: var(--devui-border-radius-feedback, 4px);
  box-shadow: var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0) #5170ff4d;
  color: var(--devui-light-text, #fff);
  font-size: var(--devui-font-size, 12px);
  min-height: 160px;
  padding: 20px;
  position: absolute;
  width: 400px
}

.devui-steps-guide .devui-steps-guide__title {
  font-size: var(--devui-font-size-page-title, 16px);
  margin: 0 0 20px;
  opacity: 1;
  padding: 0
}

.devui-steps-guide>.devui-steps-guide__arrow,
.devui-steps-guide>.devui-steps-guide__arrow:after {
  border-color: transparent;
  border-style: solid;
  display: block;
  height: 0;
  position: absolute;
  width: 0
}

.devui-steps-guide>.devui-steps-guide__arrow {
  border-width: 8px
}

.devui-steps-guide.left>.devui-steps-guide__arrow {
  border-left-color: var(--devui-brand, #5e7ce0);
  border-right-width: 0;
  margin-top: -3px;
  right: -6px;
  top: 23px;
  transform: rotate(-135deg)
}

.devui-steps-guide.top-left>.devui-steps-guide__arrow,
.devui-steps-guide.top-right>.devui-steps-guide__arrow,
.devui-steps-guide.top>.devui-steps-guide__arrow {
  border-bottom-width: 0;
  border-top-color: var(--devui-brand, #5e7ce0);
  bottom: -6px;
  transform: rotate(135deg)
}

.devui-steps-guide.top>.devui-steps-guide__arrow {
  left: calc(50% - 4px)
}

.devui-steps-guide.top-left>.devui-steps-guide__arrow {
  left: 23px
}

.devui-steps-guide.top-right>.devui-steps-guide__arrow {
  right: 23px;
  transform: rotate(-135deg)
}

.devui-steps-guide.right>.devui-steps-guide__arrow {
  border-left-width: 0;
  border-right-color: var(--devui-brand, #5e7ce0);
  left: -6px;
  margin-top: -3px;
  top: 23px;
  transform: rotate(135deg)
}

.devui-steps-guide.bottom-left>.devui-steps-guide__arrow,
.devui-steps-guide.bottom-right>.devui-steps-guide__arrow,
.devui-steps-guide.bottom>.devui-steps-guide__arrow {
  border-bottom-color: var(--devui-brand, #5e7ce0);
  border-top-width: 0;
  margin-left: 3px;
  top: -6px
}

.devui-steps-guide.bottom>.devui-steps-guide__arrow {
  left: calc(50% - 4px);
  transform: rotate(-135deg)
}

.devui-steps-guide.bottom-right>.devui-steps-guide__arrow {
  right: 23px;
  transform: rotate(135deg)
}

.devui-steps-guide.bottom-left>.devui-steps-guide__arrow {
  left: 23px;
  transform: rotate(-135deg)
}

.devui-steps-guide .devui-steps-guide__shining-plus,
.devui-steps-guide>.devui-steps-guide__shining-dot {
  background: var(--devui-brand, #5e7ce0);
  border-radius: var(--devui-border-radius-feedback, 4px);
  height: 6px;
  position: absolute;
  width: 6px
}

.devui-steps-guide.left>.devui-steps-guide__shining-dot,
.devui-steps-guide.left>.devui-steps-guide__shining-plus {
  right: -30px;
  top: 21px
}

.devui-steps-guide.right>.devui-steps-guide__shining-dot,
.devui-steps-guide.right>.devui-steps-guide__shining-plus {
  left: -30px;
  top: 21px
}

.devui-steps-guide.top>.devui-steps-guide__shining-dot,
.devui-steps-guide.top>.devui-steps-guide__shining-plus {
  bottom: -30px;
  left: calc(50% - 3px)
}

.devui-steps-guide.top-left>.devui-steps-guide__shining-dot,
.devui-steps-guide.top-left>.devui-steps-guide__shining-plus {
  bottom: -30px;
  left: 21px
}

.devui-steps-guide.top-right>.devui-steps-guide__shining-dot,
.devui-steps-guide.top-right>.devui-steps-guide__shining-plus {
  bottom: -30px;
  right: 21px
}

.devui-steps-guide.bottom>.devui-steps-guide__shining-dot,
.devui-steps-guide.bottom>.devui-steps-guide__shining-plus {
  left: calc(50% - 3px);
  top: -30px
}

.devui-steps-guide.bottom-right>.devui-steps-guide__shining-dot,
.devui-steps-guide.bottom-right>.devui-steps-guide__shining-plus {
  right: 21px;
  top: -30px
}

.devui-steps-guide.bottom-left>.devui-steps-guide__shining-dot,
.devui-steps-guide.bottom-left>.devui-steps-guide__shining-plus {
  left: 21px;
  top: -30px
}

.devui-steps-guide .devui-steps-guide__shining-plus {
  animation: devui-glow 2s 0s infinite
}

.devui-steps-guide .devui-steps-guide__container {
  position: relative
}

.devui-steps-guide .devui-steps-guide__container>.icon-close {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl {
  display: flex;
  flex-wrap: wrap
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots {
  color: var(--devui-light-text, #fff);
  font-size: var(--devui-font-size, 12px);
  height: 30px;
  position: relative;
  top: 25px
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots>em {
  margin: 0 5px 0 2px;
  opacity: .2
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__dots>em.devui-steps-guide__active {
  opacity: 1
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  justify-content: flex-end;
  padding: 20px 0 0;
  white-space: nowrap
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn>div {
  background: #ffffff1a;
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-light-text, #fff);
  cursor: pointer;
  margin-left: 10px;
  padding: 5px 15px
}

.devui-steps-guide .devui-steps-guide__container .devui-steps-guide__ctrl .devui-steps-guide__btn>div.devui-steps-guide__prev-step {
  background: none;
  border: 1px solid hsla(0, 0%, 100%, .1)
}

@keyframes devui-glow {
  0% {
    opacity: .5;
    transform: scale(1)
  }

  25% {
    opacity: .3;
    transform: scale(2)
  }

  50% {
    opacity: .1;
    transform: scale(3)
  }

  75% {
    opacity: .3;
    transform: scale(2)
  }

  to {
    opacity: .5;
    transform: scale(1)
  }
}

:host {
  display: inline-block;
  font-size: 0;
  vertical-align: middle
}

.devui-switch {
  align-items: center;
  display: inline-flex;
  height: 32px;
  width: 44.8px
}

.devui-switch__wrapper {
  background: var(--devui-shape-icon-fill, #d7d8da);
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius-full, 100px);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 62.5%;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all;
  vertical-align: bottom;
  width: 100%
}

.devui-switch__wrapper:not(.devui-switch--checked):hover {
  background-color: #bdbdbd;
  border-color: #bdbdbd
}

.devui-switch__wrapper:active {
  border-color: var(--devui-primary-hover, #7693f5)
}

.devui-switch__wrapper .devui-switch__inner-wrapper {
  box-sizing: border-box;
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  height: 100%;
  padding-left: 14px;
  width: 100%
}

.devui-switch__wrapper .devui-switch__inner-wrapper .devui-switch__inner {
  color: var(--devui-light-text, #fff);
  height: 100%;
  overflow: hidden;
  text-align: center;
  width: 100%
}

.devui-switch__wrapper small {
  background: var(--devui-light-text, #fff);
  border-radius: var(--devui-border-radius-full, 100px);
  height: 16px;
  left: 1px;
  position: absolute;
  top: 1px;
  transition: var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) all;
  width: 16px
}

.devui-switch__wrapper small.mouseDown {
  width: 19px
}

.devui-switch .devui-switch--checked .devui-switch__inner-wrapper {
  padding-left: unset;
  padding-right: 14px
}

.devui-switch .devui-switch--checked small {
  background: var(--devui-light-text, #fff);
  left: 26px
}

.devui-switch .devui-switch--checked small.mouseDown {
  left: 23px
}

.devui-switch--lg {
  height: 40px;
  width: 56px
}

.devui-switch--lg .devui-switch__wrapper {
  height: 64%
}

.devui-switch--lg .devui-switch__inner-wrapper {
  font-size: var(--devui-font-size-modal-title, 18px);
  padding-left: 24px
}

.devui-switch--lg .devui-switch--checked .devui-switch__inner-wrapper {
  padding-left: unset;
  padding-right: 24px
}

.devui-switch--lg small {
  height: 22px;
  width: 22px
}

.devui-switch--lg small.mouseDown {
  width: 26px
}

.devui-switch--lg .devui-switch--checked small {
  background: var(--devui-light-text, #fff);
  left: 31px
}

.devui-switch--lg .devui-switch--checked small.mouseDown {
  left: 28px
}

.devui-switch--sm {
  height: 24px;
  width: 33.6px
}

.devui-switch--sm .devui-switch__wrapper {
  height: 66%
}

.devui-switch--sm .devui-switch__inner-wrapper {
  font-size: var(--devui-font-size-sm, 12px);
  line-height: 1;
  padding-left: 12px
}

.devui-switch--sm .devui-switch--checked .devui-switch__inner-wrapper {
  padding-left: unset;
  padding-right: 18px
}

.devui-switch--sm small {
  height: 12px;
  position: absolute;
  width: 12px
}

.devui-switch--sm small.mouseDown {
  width: 14px
}

.devui-switch--sm .devui-switch--checked small {
  left: 19px
}

.devui-switch--sm .devui-switch--checked small.mouseDown {
  left: 17px
}

.devui-switch--checked {
  background: var(--devui-brand, #5e7ce0);
  border-color: var(--devui-brand, #5e7ce0)
}

.devui-switch--checked:hover {
  background: var(--devui-primary-hover, #7693f5);
  border-color: var(--devui-primary-hover, #7693f5)
}

.devui-switch--checked:active {
  background: var(--devui-brand-active-focus, #344899);
  border-color: var(--devui-brand-active-focus, #344899)
}

.devui-switch>.devui-switch--disabled,
.devui-switch>.devui-switch--disabled.devui-switch--checked,
.devui-switch>.devui-switch--disabled:active,
.devui-switch>.devui-switch--disabled:hover {
  cursor: not-allowed
}

.devui-switch>.devui-switch--disabled,
.devui-switch>.devui-switch--disabled:active,
.devui-switch>.devui-switch--disabled:hover {
  background-color: var(--devui-disabled-line, #dfe1e6);
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-switch>.devui-switch--disabled small,
.devui-switch>.devui-switch--disabled:active small,
.devui-switch>.devui-switch--disabled:hover small {
  background-color: var(--devui-unavailable, #f5f5f5)
}

.devui-switch>.devui-switch--disabled.devui-switch--checked {
  background-color: var(--devui-icon-fill-active-disabled, #beccfa);
  border-color: var(--devui-icon-fill-active-disabled, #beccfa)
}

.devui-switch>.devui-switch--disabled.devui-switch--checked small {
  background-color: var(--devui-light-text, #fff)
}

.devui-table__sort-clickable {
  cursor: pointer;
  flex: 1;
  height: 20px;
  line-height: 20px;
  margin-left: 8px;
  margin-right: 4px;
  vertical-align: -.55em
}

.devui-table__sort-default>svg g use {
  fill: var(--devui-dividing-line, #f2f2f3)
}

.devui-table__sort-default>svg g polygon {
  fill: var(--devui-icon-bg, #fff)
}

.devui-table__sort-default:hover>svg g use {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__sort-asc>svg g use,
.devui-table__sort-desc>svg g use {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__sort-asc>svg g polygon,
.devui-table__sort-desc>svg g polygon {
  fill: var(--devui-icon-bg, #fff)
}

.devui-table__sort-asc:hover>svg g use,
.devui-table__sort-desc:hover>svg g use {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__sort-asc>svg g polygon:last-of-type,
.devui-table__sort-desc>svg g polygon:first-of-type {
  opacity: .3
}

.filter-wrapper {
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  width: 200px
}

.filter-wrapper .filter-all-check {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 0 8px 4px
}

.filter-wrapper .filter-multiple-menu {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  padding: 4px 8px;
  width: 100%
}

.filter-wrapper .filter-operation {
  align-items: center;
  display: flex;
  height: 26px;
  justify-content: center;
  padding: 0 8px
}

.filter-wrapper .filter-single-menu {
  width: 100%
}

.filter-wrapper .filter-item {
  align-items: center;
  display: flex;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.filter-icon {
  cursor: pointer;
  display: block;
  flex: 1;
  height: 16px;
  text-align: right
}

.filter-icon>svg g {
  fill: var(--devui-dividing-line, #f2f2f3)
}

.filter-icon:hover>svg g {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.filter-item-active {
  background: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.filter-icon-active {
  visibility: visible !important
}

.filter-icon-active>svg g {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.filter-icon-active:hover>svg g {
  fill: var(--devui-icon-fill-active-hover, #252b3a)
}

.devui-table__thead tr {
  background-color: var(--devui-base-bg, #fff);
  border: none
}

.devui-table__thead tr th {
  background-color: inherit;
  border: none;
  border-bottom: 1px solid var(--devui-line, #d7d8da);
  display: table-cell;
  padding: 0;
  text-align: left
}

.devui-table__thead tr th.is-left {
  text-align: left
}

.devui-table__thead tr th.is-center {
  text-align: center
}

.devui-table__thead tr th.is-right {
  text-align: right
}

.devui-table__thead tr .operable:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-table__thead tr .resizeable:hover .resize-handle {
  border-right: 1px solid var(--devui-line, #d7d8da)
}

.devui-table__thead tr .resizeable .resize-handle:hover {
  border-right: 2px solid var(--devui-form-control-line-active, #5e7ce0)
}

.devui-table__thead tr .filter-active,
.devui-table__thead tr .sort-active {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)
}

.devui-table__thead .header-container {
  align-items: center;
  display: flex;
  padding-left: 20px;
  padding-right: 8px;
  position: relative
}

.devui-table__thead .header-container .title {
  color: var(--devui-text, #252b3a);
  display: inline-block;
  font-size: var(--devui-font-size, 12px);
  font-weight: 700;
  line-height: 36px;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
}

.devui-table__thead .header-container .resize-handle {
  bottom: 0;
  cursor: col-resize;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 5px
}

.devui-table__thead .header-container .resize-overlay {
  display: block;
  inset: 0;
  position: absolute;
  z-index: 1000
}

.devui-table__thead .devui-table__checkable-cell .header-container {
  padding-left: 0
}

.devui-table--header-bg thead.devui-table__thead tr {
  background: var(--devui-list-item-hover-bg, #f2f5fc)
}

.devui-table__tbody tr {
  background-color: var(--devui-base-bg, #fff);
  border: none;
  color: var(--devui-text, #252b3a);
  font-size: var(--devui-font-size, 12px)
}

.devui-table__tbody tr.hover-enabled:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-table__tbody tr.hover-enabled:hover .devui-table--last-sticky-left {
  background: linear-gradient(to left, transparent, var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-table__tbody tr.hover-enabled:hover .devui-table--first-sticky-right {
  background: linear-gradient(to right, transparent, var(--devui-list-item-hover-bg, #f2f2f3) 10px)
}

.devui-table__tbody tr td .icon-expand-row:hover {
  cursor: pointer
}

.devui-table__tbody tr.expanded td .icon-expand-row {
  transform: rotate(45deg)
}

.devui-table__tbody tr td {
  background-clip: padding-box;
  background-color: inherit;
  border: none;
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  line-height: 24px;
  vertical-align: middle
}

.devui-table__tbody tr td.is-left {
  text-align: left
}

.devui-table__tbody tr td.is-center {
  text-align: center
}

.devui-table__tbody tr td.is-right {
  text-align: right
}

.devui-table__tbody tr td .editable-cell {
  cursor: pointer;
  margin-left: -8px;
  padding-left: 8px;
  position: relative
}

.devui-table__tbody tr td .editable-cell:hover:after {
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%
}

.devui-table__tbody tr td .devui-table__cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.devui-table__tbody tr td .devui-table__cell .cell-text {
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis
}

.devui-table__tbody .is-hidden {
  display: none
}

.devui-table__lazy__flag {
  height: 0;
  width: 0
}

.devui-table--sticky-cell {
  position: sticky;
  z-index: 5
}

.devui-table--scroll-middle .devui-table--last-sticky-left,
.devui-table--scroll-right .devui-table--last-sticky-left {
  background: linear-gradient(to left, transparent, var(--devui-base-bg, #fff) 10px)
}

.devui-table--scroll-middle .devui-table--last-sticky-left:after,
.devui-table--scroll-right .devui-table--last-sticky-left:after {
  bottom: 0;
  box-shadow: inset var(--devui-table-inset-shadow-left, 8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 10px
}

.devui-table--scroll-left .devui-table--first-sticky-right,
.devui-table--scroll-middle .devui-table--first-sticky-right {
  background: linear-gradient(to right, transparent, var(--devui-base-bg, #fff) 10px)
}

.devui-table--scroll-left .devui-table--first-sticky-right:before,
.devui-table--scroll-middle .devui-table--first-sticky-right:before {
  bottom: 0;
  box-shadow: inset var(--devui-table-inset-shadow-right, -8px 0 8px -4px) var(--devui-light-shadow, rgba(37, 43, 58, .12));
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 10px
}

.devui-table {
  display: flex;
  overflow-x: auto;
  position: relative;
  width: 100%
}

.devui-table .hidden-columns {
  position: absolute;
  visibility: hidden;
  z-index: -1
}

.devui-table__container {
  flex: 1;
  overflow: auto
}

.devui-table__view {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%
}

.devui-table--striped tbody tr:nth-child(2n) {
  background-color: var(--devui-list-item-strip-bg, #f2f5fc)
}

.devui-table__empty {
  background-color: var(--devui-base-bg, #fff);
  padding: 40px 0
}

.devui-table__fix-header {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  position: relative
}

.devui-table__fix-header>.devui-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 10
}

.devui-table__scroll-view {
  flex: 1
}

.devui-table--layout-auto {
  table-layout: auto
}

.devui-table--sm tbody>tr>td {
  font-size: var(--devui-font-size-sm, 12px);
  padding: 7px 20px 8px
}

.devui-table--sm tbody>tr>td.devui-table__checkable-cell,
.devui-table--sm thead>tr>th.devui-table__checkable-cell {
  padding: 8px
}

.devui-table--md tbody>tr>td {
  font-size: var(--devui-font-size-md, 12px);
  padding: 11px 20px 12px
}

.devui-table--md thead>tr>th.devui-table__checkable-cell {
  padding: 8px 20px
}

.devui-table--lg tbody>tr>td {
  font-size: var(--devui-font-size-lg, 14px);
  padding: 15px 20px 16px
}

.devui-table--lg thead>tr>th.devui-table__checkable-cell {
  padding: 8px 20px
}

.devui-table--borderless tbody>tr>td {
  border-bottom: none
}

.devui-table--bordered tr {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered tr td {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered thead tr th:first-child {
  border-left: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table--bordered thead tr th {
  border-right: 1px solid var(--devui-dividing-line, #f2f2f3);
  border-top: 1px solid var(--devui-dividing-line, #f2f2f3)
}

.devui-table .resize-bar {
  background-color: var(--devui-form-control-line-active, #5e7ce0);
  bottom: 0;
  cursor: col-resize;
  display: none;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: var(--devui-z-index-function-widget, 999)
}

.table-selector {
  cursor: col-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.devui-table__tbody tr .devui-table__tree-operate {
  cursor: pointer;
  padding-right: 8px
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon rect {
  stroke: var(--devui-disabled-text, #cfd0d3)
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon path {
  fill: var(--devui-disabled-text, #cfd0d3)
}

.devui-table__tbody tr .devui-table__tree-operate>svg.svg-icon.svg-icon-close rect:last-child {
  fill: var(--devui-disabled-text, #cfd0d3);
  stroke: none
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon rect {
  stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon path {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-table__tbody tr .devui-table__tree-operate:hover>svg.svg-icon.svg-icon-close rect:last-child {
  fill: var(--devui-icon-fill-active, #252b3a);
  stroke: none
}

.devui-table__tbody tr .devui-table__tree-operate .svg-icon {
  transform: translateY(20%)
}

:host {
  display: block;
  outline: none
}

.devui-tag-input {
  height: 100%;
  outline: none;
  position: relative
}

.devui-tag-input:active {
  outline: 0
}

.devui-tag-input .is-disabled {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  cursor: not-allowed
}

.devui-tag-input .is-disabled .devui-tag-input__tags {
  min-height: 22px
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item span {
  margin-right: 0
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item .remove-button {
  background-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-tag-input .is-disabled .devui-tag-input__tags__item .remove-button svg path {
  fill: var(--devui-light-text, #fff)
}

.devui-tag-input__tags__wrapper {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  overflow: hidden;
  padding: 2px 4px;
  word-wrap: break-word;
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  cursor: text;
  height: 100%;
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1)
}

.devui-tag-input__tags__wrapper:hover {
  border-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tag-input__tags__wrapper:focus-within {
  border-color: var(--devui-brand, #5e7ce0)
}

.devui-tag-input__tags__wrapper.focused {
  outline: 0
}

.devui-tag-input__tags {
  list-style-type: none;
  margin: 0;
  padding: 0
}

.devui-tag-input__tags__item {
  background-color: var(--devui-label-bg, #e9edfa);
  border: 1px solid var(--devui-label-bg, #e9edfa);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  display: inline-block;
  line-height: 18px;
  margin: 1px;
  min-height: 18px;
  padding: 0 10px;
  position: relative
}

.devui-tag-input__tags__item span {
  line-height: 1.5;
  margin-right: 25px
}

.devui-tag-input__tags__item .remove-button {
  background-color: var(--devui-line, #d7d8da);
  border: none;
  border-radius: 50%;
  display: inline-block;
  font-size: var(--devui-font-size-page-title, 16px);
  height: 12px;
  line-height: 12px;
  margin: 0 0 0 12px;
  padding: 0;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: top;
  width: 12px
}

.devui-tag-input__tags__item .remove-button svg path {
  fill: var(--devui-light-text, #fff)
}

.devui-tag-input__tags__item .remove-button:hover {
  text-decoration: none
}

.devui-tag-input__tags__item:not(.is-disabled) {
  cursor: pointer
}

.devui-tag-input__tags__item:not(.is-disabled) span:hover {
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-tag-input__tags__item:not(.is-disabled) .remove-button:hover {
  background-color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-tag-input__input {
  border: 0;
  float: left;
  font-size: var(--devui-font-size, 12px);
  height: 22px;
  outline: 0;
  padding-left: 5px;
  width: 100%
}

.devui-tag-input__input::-ms-clear {
  display: none
}

.devui-tag-input__input_hide {
  display: none
}

.devui-tag-input__suggestion-list {
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: var(--devui-shadow-length-connected-overlay, 0 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  list-style-type: none;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  position: relative;
  width: 100%
}

.devui-tag-input__suggestion-list__item {
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  font-size: var(--devui-font-size, 12px);
  line-height: 20px;
  overflow: hidden;
  padding: 5px 10px;
  text-overflow: ellipsis;
  transition: color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap
}

.devui-tag-input__suggestion-list__item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tag-input__suggestion-list__item.selected {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-brand, #5e7ce0)
}

.devui-tag-input__suggestion-list__no-data {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #adb0b8);
  cursor: not-allowed
}

.devui-time-popup--btn {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px
}

.devui-time-picker {
  width: 200px
}

.devui-time-picker .time-input-icon {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between
}

.devui-time-picker .clear-button {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-right: 10px
}

.devui-time-picker--fade-bottom-enter-from,
.devui-time-picker--fade-bottom-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(-4px)
}

.devui-time-picker--fade-bottom-enter-to,
.devui-time-picker--fade-bottom-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-time-picker--fade-bottom-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-time-picker--fade-bottom-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-time-picker--fade-top-enter-from,
.devui-time-picker--fade-top-leave-to {
  opacity: .8;
  transform: scaleY(.8) translateY(4px)
}

.devui-time-picker--fade-top-enter-to,
.devui-time-picker--fade-top-leave-from {
  opacity: 1;
  transform: scaleY(.9999) translateY(0)
}

.devui-time-picker--fade-top-enter-active {
  transition: transform .2s cubic-bezier(.16, .75, .5, 1), opacity .2s cubic-bezier(.16, .75, .5, 1)
}

.devui-time-picker--fade-top-leave-active {
  transition: transform .2s cubic-bezier(.5, 0, .84, .25), opacity .2s cubic-bezier(.5, 0, .84, .25)
}

.devui-timeline-vertical {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative
}

.devui-timeline-vertical .devui-timeline-item {
  display: flex;
  flex-direction: row;
  width: 100%
}

.devui-timeline-vertical .devui-timeline-item-axis {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 12px
}

.devui-timeline-vertical .devui-timeline-item-line {
  border-left-color: var(--devui-dividing-line, #f2f2f3);
  border-left-width: 2px;
  height: calc(100% - 18px);
  min-height: 20px;
  position: relative
}

.devui-timeline-vertical .devui-timeline-item-line-extra {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.devui-timeline-vertical .devui-timeline-item-line:first-child {
  display: none
}

.devui-timeline-vertical .devui-timeline-item-data-left {
  text-align: end
}

.devui-timeline-vertical .devui-timeline-item-data-left,
.devui-timeline-vertical .devui-timeline-item-data-right {
  flex: 1;
  margin-bottom: 24px;
  margin-top: -2px
}

.devui-timeline-vertical .devui-timeline-item-line-style-dashed {
  border-left-style: dashed
}

.devui-timeline-vertical .devui-timeline-item-line-style-solid {
  border-left-style: solid
}

.devui-timeline-vertical .devui-timeline-item-line-style-dotted {
  border-left-style: dotted
}

.devui-timeline-vertical .devui-timeline-item-line-style-none {
  border-left-style: none
}

.devui-timeline-vertical .devui-timeline-item .devui-timeline-middle-zone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.devui-timeline-horizontal {
  align-items: center;
  display: flex;
  flex-direction: row;
  position: relative
}

.devui-timeline-horizontal-center .devui-timeline-item-data-bottom,
.devui-timeline-horizontal-center .devui-timeline-item-data-top {
  padding: 0 6px;
  text-align: center
}

.devui-timeline-horizontal-center .devui-timeline-item-data-bottom>div,
.devui-timeline-horizontal-center .devui-timeline-item-data-top>div {
  transform: translate(-50%)
}

.devui-timeline-horizontal .devui-timeline-item {
  display: flex;
  flex-direction: column;
  height: 100%
}

.devui-timeline-horizontal .devui-timeline-item-axis {
  align-items: center;
  display: flex;
  flex-direction: row;
  padding: 12px 0
}

.devui-timeline-horizontal .devui-timeline-item-line {
  border-bottom-color: var(--devui-dividing-line, #f2f2f3);
  border-bottom-width: 2px;
  min-width: 60px;
  position: relative;
  width: calc(100% - 18px)
}

.devui-timeline-horizontal .devui-timeline-item-line-extra {
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%)
}

.devui-timeline-horizontal .devui-timeline-item:first-child .devui-timeline-item-line:first-child {
  opacity: 0
}

.devui-timeline-horizontal .devui-timeline-item-data-bottom,
.devui-timeline-horizontal .devui-timeline-item-data-top {
  flex: 1;
  padding-right: 12px
}

.devui-timeline-horizontal .devui-timeline-item-line-style-dashed {
  border-bottom-style: dashed
}

.devui-timeline-horizontal .devui-timeline-item-line-style-solid {
  border-bottom-style: solid
}

.devui-timeline-horizontal .devui-timeline-item-line-style-dotted {
  border-bottom-style: dotted
}

.devui-timeline-horizontal .devui-timeline-item-line-style-none {
  border-bottom-style: none
}

.devui-timeline-horizontal .devui-timeline-item .devui-timeline-middle-zone {
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%)
}

.devui-timeline-item-dot,
.devui-timeline-item-dot>svg {
  flex-shrink: 0;
  height: 18px;
  width: 18px
}

.devui-timeline-item-dot>i {
  font-size: 18px;
  vertical-align: 0
}

.devui-timeline-item-type-primary {
  border: 2px solid var(--devui-placeholder, #babbc0);
  border-radius: 50%
}

.devui-timeline-item-type-success i {
  color: var(--devui-success, #50d4ab)
}

.devui-timeline-item-type-error i {
  color: var(--devui-danger, #f66f6a)
}

.devui-timeline-item-type-warning i {
  color: var(--devui-warning, #fac20a)
}

.devui-timeline-item-type-running {
  animation: devui-timeline-running 1.5s linear infinite;
  border: 2px solid var(--devui-success, #50d4ab);
  border-radius: 50%;
  line-height: 16px;
  text-align: center
}

@keyframes devui-timeline-running {
  0% {
    border-color: var(--devui-success, #50d4ab);
    color: var(--devui-success, #50d4ab);
    transform: rotate(0)
  }

  50% {
    border-color: var(--devui-success, #50d4ab);
    color: var(--devui-success, #50d4ab);
    transform: rotate(180deg)
  }

  to {
    border-color: var(--devui-success, #50d4ab);
    color: var(--devui-success, #50d4ab);
    transform: rotate(1turn)
  }
}

.devui-transfer {
  display: flex
}

.devui-transfer__panel {
  border: 1px solid var(--devui-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  width: 300px
}

.devui-transfer__panel--header {
  border-bottom: 1px solid var(--devui-dividing-line, #f2f2f3);
  display: flex;
  height: 40px;
  justify-content: space-between;
  line-height: 40px;
  padding: 0 16px
}

.devui-transfer__panel--header-allChecked {
  display: flex
}

.devui-transfer__panel--header-num {
  color: var(--devui-aide-text, #71757f)
}

.devui-transfer__panel--header-num-unit {
  margin-left: 4px
}

.devui-transfer__panel--body {
  display: flex;
  flex-direction: column;
  height: 100%
}

.devui-transfer__panel--body-search {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 7px 16px 0;
  width: 100%
}

.devui-transfer__panel--body-search .devui-search {
  width: 100%
}

.devui-transfer__panel--body-search .devui-input__inner {
  padding: 5px 0
}

.devui-transfer__panel--body-list {
  overflow: auto;
  padding-top: 8px;
  width: 100%
}

.devui-transfer__panel--body-list-group>div>div {
  cursor: pointer;
  padding: 0 16px
}

.devui-transfer__panel--body-list-item {
  align-items: center;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  cursor: pointer;
  display: flex;
  font-size: var(--devui-font-size, 12px);
  height: 36px;
  line-height: 36px;
  padding: 4px 0
}

.devui-transfer__panel--body-list-item .icon-drag-small {
  cursor: move;
  padding: 0 1px;
  visibility: hidden
}

.devui-transfer__panel--body-list-item:hover .icon-drag-small {
  visibility: visible
}

.devui-transfer__panel--body-list-drag-dragging {
  background-color: var(--devui-brand-foil, #f2f2f3) !important
}

.devui-transfer__panel--body-list-drag-over {
  background-color: var(--devui-brand-hover, #7693f5)
}

.devui-transfer__panel--body-list-drag-over-top {
  border-top-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer__panel--body-list-drag-over-bottom {
  border-bottom-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer__panel--body-list-drag:hover .devui-transfer__panel-body-list-drag__icon {
  visibility: visible
}

.devui-transfer__panel--body-list-tooltip .slotElement {
  display: flex
}

.devui-transfer__panel--body-list-empty {
  align-items: center;
  color: var(--devui-disabled-text, #cfd0d3);
  display: flex;
  height: 100%;
  justify-content: center
}

.devui-transfer__panel--body-nodrag {
  padding: 0 20px
}

.devui-transfer__operate {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 12px
}

.devui-transfer__operate--group {
  display: flex;
  flex-direction: column
}

.devui-transfer__operate--group .devui-button__icon.devui-button--circle.devui-button--lg {
  height: 36px;
  width: 36px
}

.devui-transfer__operate--group-right {
  margin-top: 20px
}

.devui-transfer-drag-dragging {
  background-color: var(--devui-brand-foil, #f2f2f3)
}

.devui-transfer .transfer-checkbox {
  font-size: var(--devui-font-size, 12px);
  height: 36px;
  line-height: 36px
}

.devui-transfer–drag-over-top {
  border-top-color: var(--devui-brand-active, #526ecc)
}

.devui-transfer–drag-over-bottom {
  border-bottom-color: var(--devui-brand-active, #526ecc)
}

.transfer-checkbox .devui-checkbox label {
  display: flex;
  width: 100% !important
}

.transfer-checkbox .devui-checkbox label .devui-checkbox__material {
  flex-shrink: 0
}

.devui-text-ellipsis,
.devui-tree__node .devui-tree__node-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-tree-indicator {
  background-color: var(--devui-brand, #5e7ce0);
  height: 1px;
  position: absolute
}

.devui-tree__node {
  color: var(--devui-text-weak, #575d6c);
  height: 30px;
  line-height: 1.5;
  position: relative;
  white-space: nowrap
}

.devui-tree__node--drop-inner .devui-tree__node--drop-top {
  background-color: var(--devui-brand, #5e7ce0);
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.devui-tree__node--drop-inner .devui-tree__node--drop-bottom {
  background-color: var(--devui-brand, #5e7ce0);
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0
}

.devui-tree__node--drop-inner .devui-tree__node--drop-left {
  background-color: var(--devui-brand, #5e7ce0);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 2px
}

.devui-tree__node--drop-inner .devui-tree__node--drop-right {
  background-color: var(--devui-brand, #5e7ce0);
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 2px
}

.devui-tree__node--drop-prev .devui-tree__node--drop-top {
  background-color: var(--devui-brand, #5e7ce0);
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.devui-tree__node--drop-next:before .devui-tree__node--drop-bottom {
  background-color: var(--devui-brand, #5e7ce0);
  bottom: 0;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0
}

.devui-tree__node .devui-tree__node-content {
  align-items: center;
  border-radius: var(--devui-border-radius, 2px);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--devui-font-size, 12px);
  padding-left: 6px;
  padding-right: 10px;
  width: 100%
}

.devui-tree__node .devui-tree__node-content.active {
  background-color: var(--devui-list-item-selected-bg, #f2f5fc);
  border-color: transparent;
  text-decoration: none
}

.devui-tree__node .devui-tree__node-content:not(.active):hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  transition: background-color .5s
}

.devui-tree__node .devui-tree__node-content--value-wrapper {
  align-items: center;
  display: inline-flex;
  height: 30px;
  overflow: hidden
}

.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading {
  margin-left: 50px
}

.devui-tree__node .devui-tree__node-content--value-wrapper .devui-tree__node-loading .devui-loading-area {
  background: none
}

.devui-tree__node .devui-tree-node__children {
  padding-left: 10px
}

.devui-tree__node .devui-tree-node__children:first-child {
  border-left-color: transparent
}

.devui-tree__node .devui-tree-node__children .devui-tree__node {
  content: "";
  margin-left: 8px;
  position: relative
}

.devui-tree__node .devui-tree-node__children .devui-tree__node:last-child {
  border-left-color: transparent
}

.devui-tree__node .devui-tree__node-title {
  border: 1px dashed transparent;
  border-radius: var(--devui-border-radius, 2px);
  display: inline-block;
  flex: 1;
  margin-left: 5px;
  max-width: 100%
}

.devui-tree__node .devui-tree__node-title:not(.disabled) {
  cursor: pointer
}

.devui-tree__node .devui-tree__node-title .devui-tree__match-highlight {
  color: var(--devui-brand, #5e7ce0);
  font-weight: 700
}

.devui-tree__node .devui-tree-node__edit {
  margin-left: .4em;
  padding: .1em
}

.devui-tree__node .devui-tree-node__edit>.devui-input-sm {
  height: 26px
}

.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error,
.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:focus,
.devui-tree__node .devui-tree-node__edit>.devui-input-sm.error:hover {
  border-color: var(--devui-danger, #f66f6a)
}

.devui-tree__node .devui-tree-node__leaf:not(.disabled) {
  cursor: default
}

.devui-tree__node .devui-tree-node__leaf .devui-tree-node__leaf--default {
  color: #f2a71f
}

.devui-tree__node .devui-tree-node__leaf .devui-leaf-icon-none {
  display: inline-block;
  height: 16px;
  width: 16px
}

.devui-tree__node .devui-tree__node-folder {
  font-size: var(--devui-font-size-icon, 16px);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle
}

.devui-tree__node .devui-tree__node-folder,
.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon {
  display: inline-block;
  height: 16px;
  line-height: 16px
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g path {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--icon:hover svg g rect {
  stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node .devui-tree__node-folder:not(.disabled) {
  cursor: pointer
}

.devui-tree__node .devui-tree__node-folder .devui-tree-node__folder--default {
  color: #f2b806
}

.devui-tree__node-indent {
  display: inline-block;
  height: 16px;
  margin-left: 8px;
  width: 16px
}

.devui-tree__node .devui-loading-children {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: devui-loading-children;
  animation-timing-function: ease-in-out;
  color: var(--devui-info, #5e7ce0);
  display: inline-block;
  font-size: 1em;
  font-style: italic;
  margin-left: .5em;
  margin-top: .15em;
  vertical-align: middle
}

@keyframes devui-loading-children {
  0% {
    color: #627fe1
  }

  12.5% {
    color: #627fe1
  }

  25% {
    color: #617fe1
  }

  37.5% {
    color: #617ee1
  }

  50% {
    color: #607ee0
  }

  62.5% {
    color: #607ee0
  }

  75% {
    color: #5f7de0
  }

  87.5% {
    color: #5e7ce0
  }

  to {
    color: #5e7ce0
  }
}

.devui-tree__node svg.svg-icon path {
  fill: var(--devui-icon-text, #71757f)
}

.devui-tree__node svg.svg-icon rect {
  stroke: var(--devui-icon-text, #71757f)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon path {
  fill: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon rect {
  stroke: var(--devui-icon-fill-active, #252b3a)
}

.devui-tree__node.devui-tree__node--open:not(.devui-tree-node__customIcon)>.devui-tree__node-content svg.svg-icon.svg-icon-close rect:last-child {
  fill: var(--devui-icon-fill-active, #252b3a);
  stroke: none
}

.devui-tree__node svg.svg-icon.svg-icon-close rect:last-child {
  fill: var(--devui-icon-text, #71757f);
  stroke: none
}

::ng-deep .devui-tree-mask {
  background: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-tree__node.devui-tree-without-virtual-scroll.devui-tree__node--open>.devui-tree__node-content,
.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children {
  position: relative
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children:before {
  background-color: var(--devui-dividing-line, #f2f2f3);
  content: "";
  height: calc(100% - 15px);
  left: 9px;
  position: absolute;
  top: 0;
  width: 1px
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content {
  position: relative
}

.devui-tree__node.devui-tree-without-virtual-scroll>.devui-tree-node__children .devui-tree__node-content:before {
  background-color: var(--devui-dividing-line, #f2f2f3);
  content: "";
  height: 1px;
  left: -9px;
  position: absolute;
  top: 50%;
  width: 8px
}

.devui-tree-vertical-line {
  width: 1px
}

.devui-tree-horizontal-line,
.devui-tree-vertical-line {
  background-color: var(--devui-dividing-line, #f2f2f3);
  position: absolute
}

.devui-tree-horizontal-line {
  height: 1px;
  margin-left: -16px;
  top: 50%
}

.toggle-disabled {
  cursor: not-allowed !important
}

.toggle-disabled svg.svg-icon rect {
  stroke: var(--devui-disabled-text, #cfd0d3) !important
}

.toggle-disabled svg.svg-icon.svg-icon-close rect:last-child {
  fill: var(--devui-disabled-text, #cfd0d3) !important;
  stroke: none !important
}

.toggle-disabled svg.svg-icon path {
  fill: var(--devui-disabled-text, #cfd0d3) !important
}

.select-disabled {
  background-color: transparent !important;
  color: var(--devui-disabled-text, #cfd0d3) !important;
  cursor: not-allowed !important
}

.devui-tree__node {
  font-size: 0
}

.devui-tree__node,
.devui-tree__node-content {
  position: relative
}

.devui-tree__node-vline {
  width: 1px
}

.devui-tree__node-hline,
.devui-tree__node-vline {
  background-color: var(--devui-dividing-line, #f2f2f3);
  position: absolute
}

.devui-tree__node-hline {
  height: 1px;
  left: -15px;
  top: 50%;
  width: 9px
}

.devui-tree__node-operation-area,
.devui-tree__node-operation-area .devui-icon__container {
  margin-left: 8px
}

.devui-tree__node-operation-area .devui-icon__container:first-child {
  margin-left: 0
}

.devui-tree__node-operation-area .devui-icon__container:hover {
  cursor: pointer
}

.devui-tree--list-enter-active,
.devui-tree--list-leave-active {
  transition: opacity .3s cubic-bezier(.5, .05, .5, .95), height .3s cubic-bezier(.5, .05, .5, .95)
}

.devui-tree--list-enter-from,
.devui-tree--list-leave-to {
  height: 0;
  opacity: 0
}

.devui-tree-select {
  position: relative;
  width: 100%
}

.devui-tree-select-disabled,
.devui-tree-select-disabled .devui-tree-select-input {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tree-select-disabled .devui-tree-select-arrow {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-tree-select-open .devui-tree-select-arrow {
  transform: rotate(180deg)
}

.devui-tree-select-input {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  height: 28px;
  outline: none;
  overflow: auto;
  padding: 0 10px;
  width: 100%
}

.devui-tree-select-input:empty:before {
  color: #d3d3d3;
  content: attr(placeholder);
  vertical-align: middle
}

.devui-tree-select-value {
  display: inline-block;
  height: 80%;
  vertical-align: middle
}

.devui-tree-select-value-enableLabelization {
  background-color: var(--devui-icon-fill, #71757f);
  margin: 2px 10px 2px 0;
  padding: 0 10px
}

.devui-tree-select-dropdown {
  background: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-tree-select-dropdown-list {
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 0
}

.devui-tree-select-item {
  align-items: center;
  border: 0;
  clear: both;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  line-height: 1.5;
  min-height: 36px;
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%
}

.devui-tree-select-item:hover:not(.active):not(.disabled) {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-tree-select-clearable {
  position: relative
}

.devui-tree-select-clearable:hover .devui-tree-select-clear {
  display: inline-flex
}

.devui-tree-select-clearable:hover .devui-tree-select-arrow {
  display: none
}

.devui-tree-select-notclearable {
  position: relative
}

.devui-tree-select-arrow,
.devui-tree-select-clear {
  align-items: center;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 28px
}

.devui-tree-select-clear {
  display: none
}

.devui-tree-select-clear:hover {
  color: var(--devui-icon-fill-active, #252b3a);
  cursor: pointer
}

.devui-input-group {
  align-items: center;
  display: flex !important;
  width: 360px
}

.devui-input-group:not(.disabled):hover .devui-input-group-addon {
  background-color: var(--devui-dividing-line, #f2f2f3);
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  font-weight: 700
}

.devui-input-group:not(.disabled) .devui-input-group-addon:active,
.devui-input-group:not(.disabled):hover .devui-form-control {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  border-right-color: var(--devui-form-control-line, #d7d8da)
}

.devui-input-group:not(.disabled) .devui-input-group-addon:active {
  background-color: var(--devui-dividing-line, #f2f2f3)
}

.devui-input-group .devui-input-group-addon {
  align-items: center;
  align-self: normal;
  background-color: var(--devui-area, #f5f5f5);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: 0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: var(--devui-font-size-icon, 16px);
  font-weight: 400;
  justify-content: center;
  position: relative;
  transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  white-space: nowrap;
  width: 36px
}

.devui-input-group .devui-form-control {
  background-image: none;
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);
  border-right: none;
  cursor: pointer;
  display: block;
  font-size: var(--devui-font-size, 12px);
  line-height: 32px;
  padding: 4px 8px;
  transition: border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)), box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
  width: 100%
}

.devui-input-group .devui-form-control.devui-upload__files-list {
  margin: 0;
  max-height: 52px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 3px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-item {
  height: 26px;
  line-height: 26px;
  margin-right: 2px;
  padding: 0 48px 0 12px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag {
  background-color: var(--devui-label-bg, #e9edfa);
  border-radius: var(--devui-border-radius, 2px);
  max-width: 100%;
  position: relative
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .devui-upload__filename {
  display: inline-block;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon {
  cursor: pointer;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%)
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.icon-right {
  color: var(--devui-success, #50d4ab)
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.icon-running {
  font-size: 16px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.devui-upload__delete-file-button {
  margin-right: 20px
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag .icon.devui-upload__delete,
.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .devui-upload__progress,
.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .icon-right {
  display: none
}

.devui-input-group .devui-form-control.devui-upload__files-list .devui-upload__file-tag:hover .icon-close {
  display: inline-block
}

.devui-input-group.disabled .devui-upload__placeholder {
  color: var(--devui-disabled-text, #cfd0d3)
}

.devui-input-group .devui-upload__placeholder {
  color: var(--devui-placeholder, #babbc0);
  line-height: 22px;
  max-height: 32px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.devui-input-group .devui-upload__progress {
  height: 16px;
  width: 16px
}

.devui-input-group.disabled .devui-form-control,
.devui-input-group.disabled .devui-input-group-addon {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-form-control {
  outline: none
}

.devui-input-group.disabled .devui-upload__delete-file-button {
  cursor: not-allowed;
  pointer-events: none
}

.devui-loading {
  color: var(--devui-aide-text, #71757f)
}

.devui-upload--failed-color {
  color: var(--devui-danger, #f66f6a)
}

.devui-upload {
  display: flex
}

.devui-upload-tip {
  font-size: 12px;
  height: 18px;
  margin-top: 8px
}

.devui-upload-tip .icon {
  font-size: 16px;
  margin-right: 8px;
  vertical-align: middle
}

.devui-upload-tip .icon-right-o {
  color: var(--devui-success, #50d4ab)
}

.devui-upload-tip .devui-upload-failed {
  color: var(--devui-danger, #f66f6a)
}

.devui-upload-tip a {
  color: var(--devui-link, #526ecc);
  cursor: pointer
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  border: 0;
  border-top: 1px solid var(--devui-line, #d7d8da);
  box-sizing: content-box;
  height: 0;
  margin: 20px 0;
  overflow: visible
}

pre {
  font-family: monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.5;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

[hidden],
template {
  display: none
}

body {
  color: var(--devui-text, #252b3a);
  font-family: HuaweiFont, Helvetica, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Microsoft JhengHei;
  font-size: var(--devui-font-size, 12px);
  line-height: var(--devui-line-height-base, 1.5);
  margin: 0;
  padding: 0
}

*,
:after,
:before {
  box-sizing: border-box
}

button {
  -webkit-appearance: button;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: 0;
  padding: 0
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: inherit
}

ol,
ul {
  list-style: none
}

ol,
p,
ul {
  margin: 0;
  padding: 0
}

a,
a:active,
a:focus,
a:hover,
a:visited {
  text-decoration: none
}

:-ms-input-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

::-moz-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

::-webkit-input-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.devui-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px
}

.devui-scrollbar::-webkit-scrollbar-track {
  background-color: transparent
}

.devui-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--devui-line, #d7d8da);
  border-radius: 8px
}

.devui-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--devui-placeholder, #babbc0)
}

body>* ::-webkit-scrollbar {
  height: 8px;
  width: 8px
}

body>* ::-webkit-scrollbar-track {
  background-color: transparent
}

body>* ::-webkit-scrollbar-thumb {
  background-color: var(--devui-line, #d7d8da);
  border-radius: 8px
}

body>* ::-webkit-scrollbar-thumb:hover {
  background-color: var(--devui-placeholder, #babbc0)
}

body>* ::-webkit-scrollbar-corner {
  background-color: transparent
}

.over-flow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.clear-fix {
  zoom: 1
}

.clear-fix:after {
  clear: both;
  content: "";
  display: block;
  width: 0
}

.devui-close {
  color: var(--devui-text, #252b3a);
  filter: alpha(opacity=20);
  float: right;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  opacity: .2;
  text-shadow: 0 1px 0 #fff
}

.devui-close:focus,
.devui-close:hover {
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
  text-decoration: none
}

button.devui-close {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0
}

a:focus,
a:hover {
  color: var(--devui-link, #526ecc)
}

a:active,
a:hover {
  outline: 0
}

.devui-link {
  color: var(--devui-link, #526ecc)
}

.devui-link:hover {
  color: var(--devui-link-active, #526ecc);
  cursor: pointer;
  text-decoration: underline
}

.devui-link-light {
  color: var(--devui-link-light, #96adfa)
}

.devui-link-light:hover {
  color: var(--devui-link-light-active, #beccfa);
  cursor: pointer;
  text-decoration: underline
}

.devui-disabled,
.devui-disabled.devui-input-group-addon {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-disabled,
.devui-disabled>.devui-input-group-addon,
.devui-disabled>input {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-body-scrollblock {
  width: 100%
}

.mr-content-spacing {
  margin-right: 4px
}

.padding-element-spacing {
  padding: 16px !important
}

.ml-element-spacing {
  margin-left: 16px
}

.mr-element-spacing {
  margin-right: 16px
}

.mt-element-spacing {
  margin-top: 16px
}

.mb-element-spacing {
  margin-bottom: 16px
}

.mlr-element-spacing {
  margin-left: 16px;
  margin-right: 16px
}

.mtb-element-spacing {
  margin-bottom: 16px;
  margin-top: 16px
}

.m-element-spacing {
  margin: 16px
}

.grid {
  letter-spacing: -.31em;
  *letter-spacing: normal;
  word-spacing: -.43em
}

.u,
.u-1,
.u-1-12,
.u-1-2,
.u-1-24,
.u-1-3,
.u-1-4,
.u-1-5,
.u-1-6,
.u-1-8,
.u-11-12,
.u-11-24,
.u-13-24,
.u-17-24,
.u-19-24,
.u-2-3,
.u-2-5,
.u-23-24,
.u-3-4,
.u-3-5,
.u-3-8,
.u-4-5,
.u-5-12,
.u-5-24,
.u-5-6,
.u-5-8,
.u-7-12,
.u-7-24,
.u-7-8 {
  display: inline-block;
  *display: inline;
  letter-spacing: normal;
  vertical-align: top;
  word-spacing: normal;
  zoom: 1
}

.u-1 {
  display: block
}

.u-1-2 {
  width: 49.99999%
}

.u-1-3 {
  width: 33.33333%
}

.u-2-3 {
  width: 66.66666%
}

.u-1-4 {
  width: 24.99999%
}

.u-3-4 {
  width: 74.99999%
}

.u-1-5 {
  width: 19.99999%
}

.u-2-5 {
  width: 39.99999%
}

.u-3-5 {
  width: 59.99999%
}

.u-4-5 {
  width: 79.99999%
}

.u-1-6 {
  width: 16.64999%
}

.u-5-6 {
  width: 83.33333%
}

.u-1-8 {
  width: 12.49999%
}

.u-3-8 {
  width: 37.49999%
}

.u-5-8 {
  width: 62.49999%
}

.u-7-8 {
  width: 87.49999%
}

.u-1-12 {
  width: 8.33333%
}

.u-5-12 {
  width: 41.66666%
}

.u-7-12 {
  width: 58.33333%
}

.u-11-12 {
  width: 91.66666%
}

.u-1-24 {
  width: 4.16666%
}

.u-5-24 {
  width: 20.83333%
}

.u-7-24 {
  width: 29.16666%
}

.u-11-24 {
  width: 45.83333%
}

.u-13-24 {
  width: 54.16666%
}

.u-17-24 {
  width: 70.83333%
}

.u-19-24 {
  width: 79.16666%
}

.u-23-24 {
  width: 95.83333%
}

.u-content {
  padding: 0 0 10px 10px
}

.devui-dropdown {
  position: relative;
  vertical-align: middle
}

.devui-dropdown .devui-dropdown-toggle {
  box-shadow: none;
  outline: none
}

.devui-dropdown .devui-dropdown-toggle.devui-dropdown-default {
  align-items: center;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: flex;
  line-height: 1.5;
  outline: 0;
  padding: 4px 10px;
  text-align: center
}

.devui-dropdown .devui-dropdown-toggle.devui-dropdown-default:not(.devui-dropdown-item) {
  display: inline-flex !important
}

.devui-dropdown .devui-caret {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px dashed;
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle
}

.devui-dropdown.devui-dropdown-open .devui-dropdown-toggle span.icon-chevron-down {
  transform: rotate(180deg)
}

.devui-dropdown-menu {
  background-clip: padding-box;
  background-color: var(--devui-connected-overlay-bg, #fff);
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24));
  float: left;
  left: 0;
  list-style: none;
  margin: 4px 0;
  min-width: min(100%, 102px);
  outline: none;
  padding-bottom: 5px;
  position: absolute;
  top: calc(100% - 1px);
  z-index: 1000
}

.devui-dropdown-menu.devui-dropdown-overlay,
.devui-dropdown-menu.devui-dropdown-overlay.popper-container {
  border: 1px solid var(--devui-brand, #5e7ce0)
}

.devui-dropdown-menu.devui-dropdown-overlay.popper-container {
  margin-bottom: -1px;
  margin-top: -1px
}

.devui-dropdown-menu>li {
  position: relative
}

.devui-dropdown-menu>li>a {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 36px;
  padding: 0 10px
}

.devui-dropdown-menu li>input {
  margin: 0 10px
}

.devui-dropdown-menu>.disabled>a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-dropdown-menu>.disabled>a:focus,
.devui-dropdown-menu>.disabled>a:hover {
  cursor: not-allowed
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled):hover:not(:active) {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled):active:hover {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled).devui-dropdown-bg {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3);
  color: var(--devui-list-item-hover-text, #252b3a)
}

.devui-dropdown-menu .devui-dropdown-item:not(.disabled).active {
  background-color: var(--devui-list-item-active-bg, #f2f5fc);
  color: var(--devui-list-item-active-text, #252b3a)
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback {
  display: block;
  height: 28px;
  line-height: 28px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 28px;
  z-index: 2
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback:hover {
  position: absolute
}

.devui-form-group.devui-has-feedback>.devui-form-control-feedback .devui-caret {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid;
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle
}

.form-group.has-feedback[tabindex] {
  outline: 0
}

.devui-dropdown-no-border {
  align-items: center;
  background-color: var(--devui-connected-overlay-bg, #fff);
  background-image: none;
  border: none;
  border-radius: 2px;
  box-shadow: none;
  color: var(--devui-text, #252b3a);
  cursor: pointer;
  display: flex;
  line-height: 1.5;
  min-height: 28px;
  min-width: min(100%, 102px);
  outline: 0;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none
}

.devui-dropdown-no-border:focus,
.devui-dropdown-no-border:hover {
  text-decoration: none
}

.devui-dropdown-no-border:active:hover,
.devui-dropdown-no-border:focus {
  color: var(--devui-brand-active, #526ecc)
}

.devui-dropdown .devui-dropdown-default {
  background-color: var(--devui-base-bg, #fff);
  border-color: var(--devui-form-control-line, #d7d8da);
  color: var(--devui-text, #252b3a)
}

.devui-dropdown .devui-dropdown-default:active,
.devui-dropdown .devui-dropdown-default:focus,
.devui-dropdown .devui-dropdown-default:hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-dropdown .devui-dropdown-menu {
  background: var(--devui-connected-overlay-bg, #fff);
  box-shadow: 0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .24))
}

.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled) {
  color: var(--devui-text, #252b3a)
}

.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled):focus,
.devui-dropdown .devui-dropdown-menu>li>a:not(.disabled):hover {
  background-color: var(--devui-list-item-hover-bg, #f2f2f3)
}

.devui-dropdown .devui-dropdown-menu>.disabled>a {
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-dropdown .devui-dropdown-menu>.disabled>a:focus,
.devui-dropdown .devui-dropdown-menu>.disabled>a:hover {
  background-color: transparent
}

.devui-image-preview-container img {
  cursor: zoom-in
}

.devui-form-controls input[type=password],
.devui-form-controls input[type=text],
[dInput] {
  font-size: var(--devui-font-size, 12px);
  height: 28px;
  width: 100%
}

.devui-form-controls input[type=password].devui-input-sm,
.devui-form-controls input[type=text].devui-input-sm,
[dInput].devui-input-sm {
  font-size: var(--devui-font-size-sm, 12px);
  height: 26px
}

.devui-form-controls input[type=password].devui-input-lg,
.devui-form-controls input[type=text].devui-input-lg,
[dInput].devui-input-lg {
  font-size: var(--devui-font-size-lg, 14px);
  height: 46px
}

[dTextArea] {
  width: 100%
}

.devui-form-controls textarea,
[dInput],
[dTextarea] {
  background-color: var(--devui-base-bg, #fff);
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  box-sizing: border-box;
  color: var(--devui-text, #252b3a);
  outline: none;
  padding: 4px 10px;
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1);
  vertical-align: middle
}

.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,
[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,
[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,
[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,
[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

.devui-form-controls textarea.devui-disabled,
.devui-form-controls textarea.devui-disabled:hover,
.devui-form-controls textarea.disabled,
.devui-form-controls textarea.disabled:hover,
.devui-form-controls textarea[disabled],
.devui-form-controls textarea[disabled]:hover,
[dInput].devui-disabled,
[dInput].devui-disabled:hover,
[dInput].disabled,
[dInput].disabled:hover,
[dInput][disabled],
[dInput][disabled]:hover,
[dTextarea].devui-disabled,
[dTextarea].devui-disabled:hover,
[dTextarea].disabled,
[dTextarea].disabled:hover,
[dTextarea][disabled],
[dTextarea][disabled]:hover {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  border-color: var(--devui-disabled-line, #dfe1e6);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-form-controls textarea,
[dTextarea] {
  width: 100%
}

.devui-input-group {
  border-collapse: separate;
  display: table;
  position: relative
}

.devui-input-group-addon {
  border: 1px solid var(--devui-form-control-line, #d7d8da);
  border-radius: var(--devui-border-radius, 2px);
  display: table-cell;
  padding: 0 10px;
  text-align: center
}

.devui-input-group-addon:last-child {
  border-bottom-left-radius: 0;
  border-left: 0;
  border-top-left-radius: 0
}

.devui-input-group-addon:first-child {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0
}

.devui-search-in-dropdown {
  background-color: var(--devui-embed-search-bg, #f2f2f3);
  border: none;
  color: var(--devui-text, #252b3a);
  margin: 0;
  padding: 5px 26px 5px 10px
}

.devui-search-in-dropdown:-ms-input-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

.devui-search-in-dropdown:hover {
  background-color: var(--devui-embed-search-bg-hover, #eef0f5)
}

.devui-input-lg {
  font-size: var(--devui-font-size-page-title, 16px);
  height: 32px;
  line-height: 20px
}

.devui-input-sm {
  font-size: var(--devui-font-size, 12px);
  height: 26px;
  line-height: 14px
}

.devui-dropdown,
.devui-dropup,
.devui-form-group {
  position: relative
}

.devui-form-control {
  background-color: var(--devui-base-bg, #fff);
  border-radius: var(--devui-border-radius, 2px);
  color: var(--devui-text, #252b3a);
  display: block;
  outline: 0;
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1);
  width: 100%
}

.devui-form-control.devui-disabled,
.devui-form-control.devui-disabled:focus,
.devui-form-control.devui-disabled:hover,
.devui-form-control.disabled,
.devui-form-control.disabled:focus,
.devui-form-control.disabled:hover,
.devui-form-control[disabled],
.devui-form-control[disabled]:focus,
.devui-form-control[disabled]:hover {
  border-color: var(--devui-disabled-line, #dfe1e6)
}

.devui-form-control.devui-disabled,
.devui-form-control.devui-disabled:focus,
.devui-form-control.devui-disabled:focus>input,
.devui-form-control.devui-disabled:hover,
.devui-form-control.devui-disabled:hover>input,
.devui-form-control.devui-disabled>input,
.devui-form-control.disabled,
.devui-form-control.disabled:focus,
.devui-form-control.disabled:focus>input,
.devui-form-control.disabled:hover,
.devui-form-control.disabled:hover>input,
.devui-form-control.disabled>input,
.devui-form-control[disabled],
.devui-form-control[disabled]:focus,
.devui-form-control[disabled]:focus>input,
.devui-form-control[disabled]:hover,
.devui-form-control[disabled]:hover>input,
.devui-form-control[disabled]>input {
  background-color: var(--devui-disabled-bg, #f5f5f5);
  color: var(--devui-disabled-text, #cfd0d3);
  cursor: not-allowed
}

.devui-form-control:hover {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

.devui-form-control:focus {
  border-color: var(--devui-form-control-line-active, #5e7ce0)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border) {
  border-color: var(--devui-form-control-line, #d7d8da);
  transition: border-color .3s cubic-bezier(.645, .045, .355, 1)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open) {
  border-color: var(--devui-form-control-line-hover, #9b9fa8)
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,
:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within {
  border-color: var(--devui-form-control-line-active, #5e7ce0);
  outline: none
}

:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open {
  border-color: var(--devui-connected-overlay-line, #526ecc);
  outline: none
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) {
  min-height: 28px
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled) {
  color: var(--devui-text, #252b3a)
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input {
  height: 26px
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border) {
  border-radius: var(--devui-border-radius, 2px);
  border-style: solid;
  border-width: 1px
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover {
  border-color: transparent
}

.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,
.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover {
  background-color: var(--devui-disabled-bg, #f5f5f5)
}

input::-moz-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

input:-ms-input-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

input::-webkit-input-placeholder {
  color: var(--devui-placeholder, #babbc0)
}

[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,
[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,
[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,
[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown,
d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup {
  border-color: var(--devui-danger-line, #f66f6a)
}

d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),
d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,
d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),
d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker,
d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled) {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled) {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled),
d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete] {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input {
  background-color: var(--devui-danger-bg, #ffd5d4)
}

d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input,
d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input {
  background-color: var(--devui-danger-bg, #ffd5d4);
  border-color: var(--devui-danger-line, #f66f6a)
}

d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,
d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container,
d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar {
  border-color: var(--devui-danger-line, #f66f6a)
}

d-form-control d-search {
  width: 100%
}

.devui-form-controls.devui-form-control-has-suffix [dInput],
.devui-form-controls.devui-form-control-has-suffix [dTextArea] {
  padding-right: 28px
}

.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],
.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea] {
  padding-right: 56px
}

.devui-form-controls.devui-form-control-has-feedback [dInput],
.devui-form-controls.devui-form-control-has-feedback [dTextarea] {
  padding-right: 28px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon {
  right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear,
.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line {
  right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left {
  padding-right: 30px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input {
  padding-right: 54px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit {
  padding-right: 84px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm,
.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm {
  right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm {
  padding-right: 54px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm {
  padding-right: 84px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg,
.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg {
  right: 70px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg {
  padding-right: 60px
}

.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg {
  padding-right: 95px
}

.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input {
  padding-right: 48px
}

.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback {
  right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select {
  vertical-align: middle
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input {
  padding-right: 52px
}

.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon {
  right: 34px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number {
  width: 100%
}

.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons {
  right: 32px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box {
  padding-right: 32px
}

.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled) {
  padding-right: 58px
}

.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul,
.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags {
  padding-right: 28px
}

.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback {
  right: 24px
}

.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control {
  padding-right: 48px
}

.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control {
  padding-right: 32px
}

.devui-font-base,
.devui-font-size-base {
  font-size: var(--devui-font-size, 12px)
}

.devui-font-base {
  font-weight: var(--devui-font-content-weight, normal);
  line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-modal-title,
.devui-font-size-modal-title {
  font-size: var(--devui-font-size-modal-title, 18px)
}

.devui-font-modal-title {
  font-weight: var(--devui-font-title-weight, bold);
  line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-page-title,
.devui-font-size-page-title {
  font-size: var(--devui-font-size-page-title, 16px)
}

.devui-font-page-title {
  font-weight: var(--devui-font-title-weight, bold);
  line-height: var(--devui-line-height-base, 1.5)
}

.devui-font-secondary-title,
.devui-font-size-secondary-title {
  font-size: var(--devui-font-size-card-title, 14px)
}

.devui-font-secondary-title {
  font-weight: var(--devui-font-title-weight, bold);
  line-height: var(--devui-line-height-base, 1.5)
}

.devui-scroll-overlay {
  overflow: auto
}

.devui-scroll-overlay::-webkit-scrollbar-thumb {
  background-color: transparent
}

.devui-scroll-overlay:hover::-webkit-scrollbar-thumb {
  background-color: var(--devui-line, #d7d8da)
}

.devui-scroll-overlay:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--devui-placeholder, #babbc0)
}

@-moz-document url-prefix() {
  body * {
    scrollbar-width: thin
  }

  body * .devui-data-grid__head-wrapper,
  body * .devui-scroll-overlay {
    scrollbar-color: transparent transparent
  }

  body * .devui-scroll-overlay:hover {
    scrollbar-color: var(--devui-line, #d7d8da) transparent
  }
}

* {
  margin: 0;
  padding: 0
}

.devui-result {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center
}

.devui-result .svg-icon {
  font-size: 72px
}

.progress-wrap {
  border-radius: 50px;
  bottom: 100px;
  box-shadow: inset 0 0 0 2px #fff3;
  cursor: pointer;
  display: block;
  height: 46px;
  opacity: 0;
  position: fixed;
  right: 50px;
  transform: translateY(15px);
  transition: all .2s linear;
  visibility: hidden;
  width: 46px;
  z-index: 10000
}

.progress-wrap.active-progress {
  opacity: 1;
  transform: translateY(0);
  visibility: visible
}

.progress-wrap:after {
  color: #232d3e;
  content: "↑";
  cursor: pointer;
  display: block;
  font-size: 24px;
  height: 46px;
  left: 0;
  line-height: 46px;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all .2s linear;
  width: 46px;
  z-index: 1
}

.progress-wrap:hover:after {
  opacity: 0
}

.progress-wrap:before {
  -webkit-background-clip: text;
  background-image: linear-gradient(298deg, #da2c4d, #f8ab37);
  content: "↑";
  font-size: 24px;
  line-height: 46px;
  opacity: 0;
  position: absolute;
  text-align: center;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  display: block;
  height: 46px;
  left: 0;
  top: 0;
  transition: all .2s linear;
  width: 46px;
  z-index: 2
}

.progress-wrap:hover:before {
  opacity: 1
}

.progress-wrap svg path {
  fill: none
}

.progress-wrap svg.progress-circle path {
  box-sizing: border-box;
  stroke: #0a1a54;
  stroke-width: 4;
  transition: all .2s linear
}

.error_page[data-v-fc980efc] {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center
}