/* retoor <retoor@molodetz.nl> */
:root {
  --md-clippy-z: 10001;
  --md-clippy-balloon-bg: #ffffcc;
  --md-clippy-balloon-color: #000000;
  --md-clippy-balloon-border: 1px solid #000000;
  --md-clippy-balloon-radius: 5px;
  --md-clippy-balloon-padding: 8px;
  --md-clippy-balloon-max-width: 230px;
  --md-clippy-content-max-width: 200px;
  --md-clippy-content-min-width: 120px;
  --md-clippy-font-family: "Microsoft Sans", "Segoe UI", sans-serif;
  --md-clippy-font-size: 10pt;
  --md-clippy-tip-width: 10px;
  --md-clippy-tip-height: 16px;
}

.md-clippy-agent {
  position: fixed;
  z-index: var(--md-clippy-z);
  cursor: pointer;
  touch-action: none;
  display: none;
}

.md-clippy-balloon {
  position: fixed;
  z-index: var(--md-clippy-z);
  cursor: pointer;
  display: none;
  background: var(--md-clippy-balloon-bg);
  color: var(--md-clippy-balloon-color);
  padding: var(--md-clippy-balloon-padding);
  border: var(--md-clippy-balloon-border);
  border-radius: var(--md-clippy-balloon-radius);
  max-width: var(--md-clippy-balloon-max-width);
}

.md-clippy-balloon-tip {
  position: absolute;
  width: var(--md-clippy-tip-width);
  height: var(--md-clippy-tip-height);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAMAAAAlvKiEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF///MAAAA////52QwgAAAAAN0Uk5T//8A18oNQQAAAGxJREFUeNqs0kEOwCAIRFHn3//QTUU6xMyyxii+jQosrTPkyPEM6IN3FtzIRk1U4dFeKWQiH6pRRowMVKEmvronEynkwj0uZJgR22+YLopPSo9P34wJSamLSU7lSIWLJU7NkNomNlhqxUeAAQC+TQLZyEuJBwAAAABJRU5ErkJggg==) no-repeat;
}

.md-clippy-balloon-content {
  max-width: var(--md-clippy-content-max-width);
  min-width: var(--md-clippy-content-min-width);
  font-family: var(--md-clippy-font-family);
  font-size: var(--md-clippy-font-size);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
