/* Fotor Photo Editor 1.0.283 — stage 3.3: one-time desktop pan hint. */

@media (min-width: 769px) {
  #fotor-root .editor-shell:not(.is-mobile) .sg-desktop-pan-hint {
    position: absolute;
    left: 18px;
    bottom: 72px;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(330px, calc(100% - 36px));
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid rgba(91, 157, 241, .3);
    border-radius: 10px;
    background: rgba(13, 18, 25, .96);
    color: rgba(234, 241, 250, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    pointer-events: auto;
    cursor: default;
    animation: sg-pan-hint-in .18s ease-out both;
  }

  #fotor-root .editor-shell:not(.is-mobile) .sg-desktop-pan-hint::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: #79b2ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M12 2l-3 3m3-3 3 3M12 22l-3-3m3 3 3-3M2 12l3-3m-3 3 3 3M22 12l-3-3m3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M12 2l-3 3m3-3 3 3M12 22l-3-3m3 3 3-3M2 12l3-3m-3 3 3 3M22 12l-3-3m3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  #fotor-root .editor-shell:not(.is-mobile) .sg-desktop-pan-hint.is-leaving {
    animation: sg-pan-hint-out .16s ease-in both;
  }
}

@media (max-width: 768px) {
  #fotor-root .sg-desktop-pan-hint {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #fotor-root .sg-desktop-pan-hint {
    animation: none !important;
  }
}

@keyframes sg-pan-hint-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sg-pan-hint-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(4px); }
}