/* Base */
.psg-green-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 0 2px #fff;
  vertical-align: middle;
  pointer-events: none;
  z-index: 3;
  margin-left: 6px; /* quando è inline accanto a pulsanti */
}

/* Corner positioning */
.psg-green-dot.corner { margin-left: 0; position: absolute; }
.psg-green-dot.corner.corner-tr { top: 8px; right: 8px; }
.psg-green-dot.corner.corner-tl { top: 8px; left: 8px; }
.psg-green-dot.corner.corner-br { bottom: 8px; right: 8px; }
.psg-green-dot.corner.corner-bl { bottom: 8px; left: 8px; }

@media (min-width: 768px) {
  .psg-green-dot { width: 14px; height: 14px; }
  .psg-green-dot.corner.corner-tr { top: 10px; right: 10px; }
  .psg-green-dot.corner.corner-tl { top: 10px; left: 10px; }
  .psg-green-dot.corner.corner-br { bottom: 10px; right: 10px; }
  .psg-green-dot.corner.corner-bl { bottom: 10px; left: 10px; }
}