.picture-position-menu,
.picture-wrap-menu {
  max-width: calc(100vw - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.picture-position-menu {
  width: 280px;
  padding: 12px;
}
.picture-position-menu strong {
  display: block;
  margin: 0 6px 10px;
}
.picture-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.picture-position-menu .picture-position-grid button,
.picture-position-menu > button[data-picture-wrap] {
  justify-content: center;
  padding: 6px;
}
.picture-position-menu button[aria-checked="true"],
.picture-wrap-menu button[aria-checked="true"] {
  background: #e1edfa;
  box-shadow: inset 3px 0 #176ac4;
}
.position-symbol {
  display: inline-block;
  position: relative;
  width: 43px;
  height: 56px;
  border: 1px solid #555;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 5px,
    #aaa 5px 6px,
    transparent 6px 9px
  );
  margin: 3px;
}
.position-symbol i {
  position: absolute;
  width: 17px;
  height: 15px;
  background: #c9e7fb;
  border: 2px solid #3885bd;
  box-shadow: 0 0 0 3px white;
}
.position-left i {
  left: 3px;
}
.position-right i {
  right: 3px;
}
[data-picture-h="center"] .position-symbol i {
  left: 11px;
}
[data-picture-v="center"] .position-symbol i {
  top: 19px;
}
.position-top i {
  top: 4px;
}
.position-bottom i {
  top: 36px;
}
.inline-position i {
  top: 20px;
  left: 11px;
}
.wrap-symbol {
  position: relative;
  flex: 0 0 26px;
  height: 24px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    #3696da 3px 4px,
    transparent 4px 7px
  );
}
.wrap-symbol i {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 12px;
  height: 11px;
  background: #5b6571;
  border: 2px solid white;
}
.wrap-inline i {
  left: 0;
}
.wrap-topAndBottom i {
  box-shadow:
    10px 0 white,
    -10px 0 white;
}
.wrap-tight i,
.wrap-through i {
  border-radius: 50%;
}
.wrap-behind i {
  opacity: 0.35;
}
.picture-wrap-menu {
  width: 260px;
}
.picture-motion-check {
  display: inline-flex;
  justify-content: center;
  flex: 0 0 26px;
}
.picture-wrap-menu [data-picture-motion][aria-checked="true"] {
  background: transparent;
  box-shadow: none;
}
.picture-wrap-menu [data-picture-motion][aria-checked="true"] .picture-motion-check::before {
  content: "✓";
}
.picture-wrap-menu [data-picture-motion]:not(:disabled):hover,
.picture-wrap-menu [data-picture-motion]:focus-visible {
  background: var(--hover);
}
@media (forced-colors: active) {
  .picture-position-menu button[aria-checked="true"],
  .picture-wrap-menu button[aria-checked="true"] {
    outline: 1px solid Highlight;
    outline-offset: -2px;
  }
}
.picture-wrap-menu hr,
.picture-position-menu hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 7px 0;
}
.picture-layout-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.picture-layout-dialog h2 {
  margin-top: 0;
  font-size: 18px;
}
.picture-layout-dialog fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 12px 0;
  border: 1px solid #ccd2db;
}
.picture-layout-dialog label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.picture-layout-dialog select {
  min-width: 0;
  flex: 1;
}
.picture-layout-dialog input[type="number"] {
  width: 88px;
}
.picture-distance-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#picture-layout-error {
  color: #b22222;
}
.picture-points-bar {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: white;
  border: 1px solid #cbd3df;
  box-shadow: 0 2px 10px #0002;
  padding: 9px;
  white-space: nowrap;
  font-size: 12px;
}
.picture-wrap-overlay {
  position: absolute;
  overflow: visible;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  touch-action: none;
  outline: none;
}
.picture-wrap-overlay path {
  fill: #e32b2b10;
  stroke: #d22;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: crosshair;
}
.picture-wrap-overlay circle {
  fill: #dc2222;
  stroke: white;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  cursor: move;
}
.picture-wrap-overlay circle[aria-selected="true"] {
  fill: #111;
}
.document-image.picture-moving {
  cursor: grabbing;
  will-change: transform;
}
.document-image .picture-wrap-overlay ~ .image-resize-handle {
  display: none;
}
@media (max-width: 600px) {
  .picture-points-bar span {
    display: none;
  }
  .picture-layout-dialog fieldset {
    grid-template-columns: 1fr;
  }
}