@csr632/next/lib/balloon/index.css

A configurable component library for web built on React.

@charset "UTF-8";
.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  margin: -1px; }

.next-balloon {
  box-sizing: border-box;
  position: absolute;
  max-width: 300px;
  max-width: var(--balloon-size-max-width, 300px);
  border-style: solid;
  border-style: var(--balloon-border-style, solid);
  border-radius: 3px;
  border-radius: var(--balloon-corner, 3px);
  font-size: 12px;
  font-size: var(--balloon-content-font-size, 12px);
  font-weight: normal;
  font-weight: var(--balloon-content-font-weight, normal);
  animation-duration: 300ms;
  animation-duration: var(--motion-duration-standard, 300ms);
  animation-timing-function: ease-in-out;
  animation-timing-function: var(--motion-ease-in-out, ease-in-out);
  word-wrap: break-all;
  word-wrap: break-word;
  z-index: 0;
  /* size */
  /* 带关闭按钮的右侧padding变大 */ }
  .next-balloon *,
  .next-balloon *:before,
  .next-balloon *:after {
    box-sizing: border-box; }
  .next-balloon:focus,
  .next-balloon *:focus {
    outline: 0; }
  .next-balloon-primary {
    color: #333333;
    color: var(--balloon-primary-color, #333333);
    border-color: #4494F9;
    border-color: var(--balloon-primary-color-border, #4494F9);
    background-color: #E3F2FD;
    background-color: var(--balloon-primary-color-bg, #E3F2FD);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: var(--balloon-primary-shadow, 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
    border-width: 1px;
    border-width: var(--balloon-primary-border-width, 1px); }
    .next-balloon-primary .next-balloon-close {
      position: absolute;
      top: 12px;
      top: var(--balloon-size-close-margin-top, 12px);
      right: 12px;
      right: var(--balloon-size-close-margin-right, 12px);
      font-size: 12px;
      font-size: var(--balloon-size-close, 12px);
      cursor: pointer;
      color: #999999;
      color: var(--balloon-primary-color-close, #999999); }
      .next-balloon-primary .next-balloon-close .next-icon {
        width: 12px;
        height: 12px;
        line-height: 12px; }
        .next-balloon-primary .next-balloon-close .next-icon:before {
          width: 12px;
          height: 12px;
          font-size: 12px;
          line-height: 12px; }
      .next-balloon-primary .next-balloon-close :hover {
        color: #333333;
        color: var(--balloon-primary-color-close-hover, #333333); }
    .next-balloon-primary:after {
      position: absolute;
      width: 12px;
      width: var(--balloon-size-arrow-size, 12px);
      height: 12px;
      height: var(--balloon-size-arrow-size, 12px);
      content: '';
      transform: rotate(45deg);
      box-sizing: content-box !important;
      border: 1px solid #4494F9;
      border: var(--balloon-primary-border-width, 1px) var(--balloon-border-style, solid) var(--balloon-primary-color-border, #4494F9);
      background-color: #E3F2FD;
      background-color: var(--balloon-primary-color-bg, #E3F2FD);
      z-index: -1; }
    .next-balloon-primary.next-balloon-top:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      left: calc(50% + -7px);
      left: calc(50% + var(--balloon-size-arrow-expose-primary, -7px));
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-right:after {
      top: calc(50% + -7px);
      top: calc(50% + var(--balloon-size-arrow-expose-primary, -7px));
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      border-left: none;
      border-bottom: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-bottom:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      left: calc(50% + -7px);
      left: calc(50% + var(--balloon-size-arrow-expose-primary, -7px));
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-left:after {
      top: calc(50% + -7px);
      top: calc(50% + var(--balloon-size-arrow-expose-primary, -7px));
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-left-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-left-bottom:after {
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-right-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      border-bottom: none;
      border-left: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-right-bottom:after {
      right: -7px;
      right: var(--balloon-size-arrow-expose-primary, -7px);
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      border-bottom: none;
      border-left: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-top-left:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-top-right:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose-primary, -7px);
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-bottom-left:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-primary.next-balloon-bottom-right:after {
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose-primary, -7px);
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon-normal {
    color: #333333;
    color: var(--balloon-normal-color, #333333);
    border-color: #DCDEE3;
    border-color: var(--balloon-normal-color-border, #DCDEE3);
    background-color: #FFFFFF;
    background-color: var(--balloon-normal-color-bg, #FFFFFF);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    box-shadow: var(--balloon-normal-shadow, 0px 2px 4px 0px rgba(0, 0, 0, 0.12));
    border-width: 1px;
    border-width: var(--balloon-normal-border-width, 1px); }
    .next-balloon-normal .next-balloon-close {
      position: absolute;
      top: 12px;
      top: var(--balloon-size-close-margin-top, 12px);
      right: 12px;
      right: var(--balloon-size-close-margin-right, 12px);
      font-size: 12px;
      font-size: var(--balloon-size-close, 12px);
      cursor: pointer;
      color: #999999;
      color: var(--balloon-normal-color-close, #999999); }
      .next-balloon-normal .next-balloon-close .next-icon {
        width: 12px;
        height: 12px;
        line-height: 12px; }
        .next-balloon-normal .next-balloon-close .next-icon:before {
          width: 12px;
          height: 12px;
          font-size: 12px;
          line-height: 12px; }
      .next-balloon-normal .next-balloon-close :hover {
        color: #666666;
        color: var(--balloon-normal-color-close-hover, #666666); }
    .next-balloon-normal:after {
      position: absolute;
      width: 12px;
      width: var(--balloon-size-arrow-size, 12px);
      height: 12px;
      height: var(--balloon-size-arrow-size, 12px);
      content: '';
      transform: rotate(45deg);
      box-sizing: content-box !important;
      border: 1px solid #DCDEE3;
      border: var(--balloon-normal-border-width, 1px) var(--balloon-border-style, solid) var(--balloon-normal-color-border, #DCDEE3);
      background-color: #FFFFFF;
      background-color: var(--balloon-normal-color-bg, #FFFFFF);
      z-index: -1; }
    .next-balloon-normal.next-balloon-top:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      left: calc(50% + -7px);
      left: calc(50% + var(--balloon-size-arrow-expose, -7px));
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-right:after {
      top: calc(50% + -7px);
      top: calc(50% + var(--balloon-size-arrow-expose, -7px));
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      border-left: none;
      border-bottom: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-bottom:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      left: calc(50% + -7px);
      left: calc(50% + var(--balloon-size-arrow-expose, -7px));
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-left:after {
      top: calc(50% + -7px);
      top: calc(50% + var(--balloon-size-arrow-expose, -7px));
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-left-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-left-bottom:after {
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      left: -7px;
      left: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-right-top:after {
      top: 12px;
      top: var(--balloon-size-arrow-margin, 12px);
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      border-bottom: none;
      border-left: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-right-bottom:after {
      right: -7px;
      right: var(--balloon-size-arrow-expose, -7px);
      bottom: 12px;
      bottom: var(--balloon-size-arrow-margin, 12px);
      border-bottom: none;
      border-left: none;
      box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-top-left:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-top-right:after {
      top: -7px;
      top: var(--balloon-size-arrow-expose, -7px);
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      border-right: none;
      border-bottom: none;
      box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-top, -1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-bottom-left:after {
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      left: 12px;
      left: var(--balloon-size-arrow-margin, 12px);
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
    .next-balloon-normal.next-balloon-bottom-right:after {
      right: 12px;
      right: var(--balloon-size-arrow-margin, 12px);
      bottom: -7px;
      bottom: var(--balloon-size-arrow-expose, -7px);
      border-top: none;
      border-left: none;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
      box-shadow: var(--balloon-shadow-bottom, 1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon.visible {
    display: block; }
  .next-balloon.hidden {
    display: none; }
  .next-balloon-medium {
    padding: 16px 16px 16px 16px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px); }
  .next-balloon-closable {
    padding: 16px 40px 16px 16px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-closable-right, 40px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px); }

.next-balloon-tooltip {
  box-sizing: border-box;
  position: absolute;
  max-width: 300px;
  max-width: var(--balloon-size-max-width, 300px);
  border-style: solid;
  border-style: var(--balloon-tooltip-border-style, solid);
  border-radius: 3px;
  border-radius: var(--balloon-corner, 3px);
  font-size: 12px;
  font-size: var(--balloon-tooltip-content-font-size, 12px);
  font-weight: normal;
  font-weight: var(--balloon-tooltip-content-font-weight, normal);
  z-index: 0;
  word-wrap: break-all;
  word-wrap: break-word;
  color: #333333;
  color: var(--balloon-tooltip-color, #333333);
  border-color: #DCDEE3;
  border-color: var(--balloon-tooltip-color-border, #DCDEE3);
  background-color: #F2F3F7;
  background-color: var(--balloon-tooltip-color-bg, #F2F3F7);
  box-shadow: none;
  box-shadow: var(--balloon-tooltip-shadow, none);
  border-width: 1px;
  border-width: var(--balloon-tooltip-border-width, 1px);
  /* size */ }
  .next-balloon-tooltip *,
  .next-balloon-tooltip *:before,
  .next-balloon-tooltip *:after {
    box-sizing: border-box; }
  .next-balloon-tooltip:after {
    position: absolute;
    width: 12px;
    width: var(--balloon-size-arrow-size, 12px);
    height: 12px;
    height: var(--balloon-size-arrow-size, 12px);
    content: '';
    transform: rotate(45deg);
    box-sizing: content-box !important;
    border: 1px solid #DCDEE3;
    border: var(--balloon-tooltip-border-width, 1px) var(--balloon-tooltip-border-style, solid) var(--balloon-tooltip-color-border, #DCDEE3);
    background-color: #F2F3F7;
    background-color: var(--balloon-tooltip-color-bg, #F2F3F7);
    z-index: -1; }
  .next-balloon-tooltip-top:after {
    top: -7px;
    top: var(--balloon-size-arrow-expose, -7px);
    left: calc(50% + -7px);
    left: calc(50% + var(--balloon-size-arrow-expose, -7px));
    border-right: none;
    border-bottom: none; }
  .next-balloon-tooltip-right:after {
    top: calc(50% + -7px);
    top: calc(50% + var(--balloon-size-arrow-expose, -7px));
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    border-left: none;
    border-bottom: none; }
  .next-balloon-tooltip-bottom:after {
    bottom: -7px;
    bottom: var(--balloon-size-arrow-expose, -7px);
    left: calc(50% + -7px);
    left: calc(50% + var(--balloon-size-arrow-expose, -7px));
    border-top: none;
    border-left: none; }
  .next-balloon-tooltip-left:after {
    top: calc(50% + -7px);
    top: calc(50% + var(--balloon-size-arrow-expose, -7px));
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    border-top: none;
    border-right: none; }
  .next-balloon-tooltip-left-top:after {
    top: 12px;
    top: var(--balloon-size-arrow-margin, 12px);
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    border-top: none;
    border-right: none; }
  .next-balloon-tooltip-left-bottom:after {
    bottom: 12px;
    bottom: var(--balloon-size-arrow-margin, 12px);
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    border-top: none;
    border-right: none; }
  .next-balloon-tooltip-right-top:after {
    top: 12px;
    top: var(--balloon-size-arrow-margin, 12px);
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    border-bottom: none;
    border-left: none; }
  .next-balloon-tooltip-right-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    bottom: 12px;
    bottom: var(--balloon-size-arrow-margin, 12px);
    border-bottom: none;
    border-left: none; }
  .next-balloon-tooltip-top-left:after {
    top: -7px;
    top: var(--balloon-size-arrow-expose, -7px);
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    border-right: none;
    border-bottom: none; }
  .next-balloon-tooltip-top-right:after {
    top: -7px;
    top: var(--balloon-size-arrow-expose, -7px);
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    border-right: none;
    border-bottom: none; }
  .next-balloon-tooltip-bottom-left:after {
    bottom: -7px;
    bottom: var(--balloon-size-arrow-expose, -7px);
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    border-top: none;
    border-left: none; }
  .next-balloon-tooltip-bottom-right:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    bottom: -7px;
    bottom: var(--balloon-size-arrow-expose, -7px);
    border-top: none;
    border-left: none; }
  .next-balloon-tooltip.visible {
    display: block; }
  .next-balloon-tooltip.hidden {
    display: none; }
  .next-balloon-tooltip-medium {
    padding: 8px 8px 8px 8px;
    padding: var(--balloon-tooltip-size-padding-top, 8px) var(--balloon-tooltip-size-padding-right, 8px) var(--balloon-tooltip-size-padding-bottom, 8px) var(--balloon-tooltip-size-padding-left, 8px); }

.next-balloon[dir="rtl"] {
  /* 带关闭按钮的右侧padding变大 */ }
  .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close {
    left: 12px;
    left: var(--balloon-size-close-margin-right, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-left: inherit;
    border-bottom: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-right: inherit;
    border-top: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose-primary, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose-primary, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-right:after {
    right: auto;
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px); }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal .next-balloon-close {
    left: 12px;
    left: var(--balloon-size-close-margin-right, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-left: inherit;
    border-bottom: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-right: inherit;
    border-top: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-top:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-left: none;
    border-bottom: none;
    border-top: inherit;
    border-right: inherit;
    box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-right, 1px -1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-top:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-bottom:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-right: none;
    border-top: none;
    border-bottom: inherit;
    border-left: inherit;
    box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: var(--balloon-shadow-left, -1px 1px 1px 0px rgba(0, 0, 0, 0.1)); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-right:after {
    right: auto;
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px); }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon[dir="rtl"].next-balloon-closable {
    padding: 16px 16px 16px 40px;
    padding: var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-right, 16px) var(--balloon-size-padding-top, 16px) var(--balloon-size-padding-closable-right, 40px); }

.next-balloon-tooltip[dir="rtl"] {
  /* size */ }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-top: none;
    border-right: none;
    border-left: inherit;
    border-bottom: inherit; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-top: inherit;
    border-right: inherit;
    border-left: none;
    border-bottom: none; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-top: inherit;
    border-right: inherit;
    border-left: none;
    border-bottom: none; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom:after {
    right: -7px;
    right: var(--balloon-size-arrow-expose, -7px);
    left: auto;
    border-top: inherit;
    border-right: inherit;
    border-left: none;
    border-bottom: none; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-top: none;
    border-right: none;
    border-left: inherit;
    border-bottom: inherit; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom:after {
    left: -7px;
    left: var(--balloon-size-arrow-expose, -7px);
    right: auto;
    border-top: none;
    border-right: none;
    border-left: inherit;
    border-bottom: inherit; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-left:after {
    right: 12px;
    right: var(--balloon-size-arrow-margin, 12px);
    left: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-right:after {
    left: 12px;
    left: var(--balloon-size-arrow-margin, 12px);
    right: auto; }
  .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-medium {
    padding: 8px 8px 8px 8px;
    padding: var(--balloon-tooltip-size-padding-top, 8px) var(--balloon-tooltip-size-padding-left, 8px) var(--balloon-tooltip-size-padding-bottom, 8px) var(--balloon-tooltip-size-padding-right, 8px); }