.vui-dialog {
  --vui-dialog-width: 306px;
  --vui-dialog-radius: 6px;
  --vui-dialog-body-padding: 22px;
  --vui-dialog-title-font-size: 20px;
  --vui-dialog-title-color: var(--vui-color-text-base);
  --vui-dialog-text-font-size: 14px;
  --vui-dialog-action-font-weight: var(--vui-font-weight-medium);
  --vui-dialog-text-color: var(--vui-color-text-minor);
  --vui-dialog-action-height: 100px;
  --vui-dialog-action-font-size: var(--vui-font-caption-large);
  --vui-dialog-action-border-color: var(--vui-color-border-base);
  --vui-dialog-close-color: var(--vui-color-text-caption);
  --vui-dialog-action-highlight-color: var(--vui-color-primary);
  --vui-dialog-icon-size: 100px;
  --vui-dialog-icon-fill: var(--vui-color-text-caption);
  --vui-dialog-zindex: 1500;
}
.vui-dialog-content {
  width: var(--vui-dialog-width);
  border-radius: var(--vui-dialog-radius);
  background-color: var(--vui-color-bg-inverse);
  overflow: hidden;
}
.vui-dialog-body {
  color: var(--vui-dialog-text-color);
  font-size: var(--vui-dialog-text-font-size);
  text-align: left;
  padding: var(--vui-dialog-body-padding);
}
.vui-dialog-icon {
  position: relative;
  display: block;
  width: var(--vui-dialog-icon-size);
  height: var(--vui-dialog-icon-size);
  margin: var(--vui-v-gap-md) auto 8px;
}
.vui-dialog .vui-dialog-icon .vui-icon,
.vui-dialog .vui-dialog-icon .vui-icon.icon-svg,
.vui-dialog .vui-dialog-icon .vui-icon.icon-font {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--vui-dialog-icon-size);
  height: var(--vui-dialog-icon-size);
  fill: var(--vui-dialog-icon-fill);
  color: var(--vui-dialog-icon-fill);
  font-size: var(--vui-dialog-icon-size);
  line-height: var(--vui-dialog-icon-size);
}
.vui-dialog-close {
  position: absolute;
  color: var(--vui-dialog-close-color);
  top: 26px;
  right: 26px;
  z-index: 15;
}
.vui-dialog-title {
  color: var(--vui-dialog-title-color);
  text-align: center;
  font-size: 18px;
  font-weight: var(--vui-font-weight-normal);
  line-height: 1.2;
  margin: 0 0 20px 0;
}
.vui-dialog-text {
  display: flex;
  justify-content: center;
}
.vui-dialog-actions {
  position: relative;
  display: flex;
}
.vui-dialog-actions::after {
  content: "";
  position: absolute;
  z-index: 2;
  transform-origin: 100% 50%;
  transform: scaleY(0.5) translateY(-100%);
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  border-top: solid 2px var(--vui-dialog-action-border-color);
  transform-origin: 50% 0;
}
@media (min-resolution: 3dppx) {
  .vui-dialog-actions::after {
    transform: scaleY(0.33) translateY(-100%);
  }
}
.vui-dialog-actions.is-column {
  flex-direction: column;
}
.vui-dialog-actions.is-column .vui-dialog-btn {
  flex: 0 0 auto;
}
.vui-dialog-actions.is-column .vui-dialog-btn::before {
  display: none;
}
.vui-dialog-actions.is-column .vui-dialog-btn:not(:first-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  transform-origin: 100% 50%;
  transform: scaleY(0.5) translateY(-100%);
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  border-top: solid 2px var(--vui-dialog-action-border-color);
  transform-origin: 50% 0;
}
@media (min-resolution: 3dppx) {
  .vui-dialog-actions.is-column .vui-dialog-btn:not(:first-child)::after {
    transform: scaleY(0.33) translateY(-100%);
  }
}
.vui-dialog-actions.is-column .vui-dialog-btn:last-child {
  color: #666f83;
}
.vui-dialog-actions.is-column .vui-dialog-btn:first-child {
  color: var(--vui-dialog-action-highlight-color);
}
.vui-dialog-btn {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--vui-color-text-minor);
  text-align: center;
  transition: var(--vui-background-color) 0.3s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vui-dialog-btn::before {
  content: "";
  position: absolute;
  z-index: 2;
  transform-origin: 100% 50%;
  transform: scaleX(0.5) translateX(100%);
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  border-right: solid 2px var(--vui-dialog-action-border-color);
  height: 100%;
  transform-origin: 100% 50%;
}
@media (min-resolution: 3dppx) {
  .vui-dialog-btn::before {
    transform: scaleX(0.33) translateX(100%);
  }
}
.vui-dialog-btn.warning {
  color: var(--vui-color-text-error) !important;
}
.vui-dialog-btn.warning .vui-dialog-btn-loading .vui-activity-indicator-svg .circle circle {
  stroke: var(--vui-color-text-error) !important;
}
.vui-dialog-btn.disabled {
  color: var(--vui-color-text-disabled) !important;
}
.vui-dialog-btn.disabled .vui-dialog-btn-loading .vui-activity-indicator-svg .circle circle {
  stroke: var(--vui-color-text-disabled) !important;
}
.vui-dialog-btn:last-child {
  color: var(--vui-dialog-action-highlight-color);
}
.vui-dialog-btn:last-child::before {
  display: none;
}
.vui-dialog-btn:last-child .vui-dialog-btn-loading .vui-activity-indicator-svg .circle circle {
  stroke: var(--vui-dialog-action-highlight-color);
}
.vui-dialog-btn:not(.disabled):active {
  background-color: var(--vui-color-bg-tap);
}
.vui-dialog-btn .vui-dialog-btn-loading .vui-activity-indicator-svg {
  width: 32px !important;
  height: 32px !important;
  margin-right: 10px;
}
.vui-dialog-btn .vui-dialog-btn-loading .vui-activity-indicator-svg .circle circle {
  stroke: var(--vui-color-text-minor);
}
.vui-dialog-btn .vui-dialog-btn-icon {
  margin-right: 10px;
}