/* Personnel File: share button, top right. Ink block, label hidden on phones. */

.sharediv { position: absolute; top: 20px; right: 20px; z-index: 20; padding: 0; }

.sharebutton, sharebutton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 10px;
  text-decoration: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: 0;
}
.sharebutton .share-icon, .share-icon { width: 12px; height: 12px; padding: 0; color: inherit !important; filter: none; vertical-align: middle; }
.sharebutton-img { position: static; margin: 0; }
.sharebutton:hover, sharebutton:hover { background: var(--tab); color: var(--on-tab); }

@media screen and (max-width: 600px) {
  .sharebutton-mb { display: none; }
}

.toastdiv { display: flex; align-items: center; justify-content: center; }
.toastbox {
  width: 280px;
  padding: 10px;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  position: fixed;
  top: 105%;
  transition: transform .3s steps(4);
  z-index: 60;
  text-align: center;
}
.toastbox.toast-tox--active { transform: translateY(-150px); }