.error-balloon-wrapper {
  display: flex;
  justify-content: center;
  .arrow::before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    background: var(--color-error-fill);
    border-bottom: 1px solid var(--color-error);
    border-right: 1px solid var(--color-error);
    transform: rotate(-135deg);
    top: -5px;
    left: calc(50% - 5px);
    display: inherit;
    z-index: 10;
  }
  .error-balloon {
    position: relative;
    }
  }
  .close-error-balloon {
    position: absolute;
    top: 8px;
    right: 5px;
    cursor: pointer;
    border: none;
    background: none;
    display: inherit;

    & svg {
      width: 10px;
      height: 10px;
    }
  }

.error-balloon {
  font-family: inherit;
  max-width: min(260px, 100%);
  color: var(--text-color-ultra-dark);
  border-radius: 5px;
  z-index: 2;
  padding: 20px;
  font-size: var(--text-size-regular);
  background: var(--color-error-fill);
  border: 1px solid var(--color-error);

  .error-balloon-container {
    display: flex;
    justify-content: center;

    .icon svg {
      display: block;
    }

    div:first-child {
      margin-right: 10px;
    }
    .error-balloon-children-container {
      display: flex;
      justify-content: flex-start;
      text-align: left;
    }
  }
}
.dynamic-proof-approval {
  .modal-content {
    .error-balloon.proof-preview-failure {
      left: calc(50% - min(130px, 50%));
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

