/* Solid backgrounds keep arrows readable over every photograph. */
html body dialog .viewer-side{position:fixed!important;inset:50% auto auto!important;transform:translateY(-50%)!important;z-index:30!important;display:grid!important;place-items:center!important;width:52px!important;height:52px!important;min-height:44px!important;margin:0!important;padding:12px!important;border:1px solid #777!important;border-radius:50%!important;background:#333!important;color:#fff!important;cursor:pointer!important;box-shadow:0 2px 10px #0005!important}
html body dialog .viewer-side--prev{left:24px!important;right:auto!important}
html body dialog .viewer-side--next{right:24px!important;left:auto!important}
html body dialog .viewer-side svg{width:16px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;pointer-events:none}
html body dialog .viewer-side:hover:not(:disabled){background:#4a4a4a!important}
html body dialog .viewer-side:disabled{opacity:.5!important;cursor:default!important}
html body dialog .viewer-side:focus-visible{outline:3px solid #fff!important;outline-offset:4px!important}
html body dialog .viewer-side-count{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:30;padding:8px 16px;border-radius:24px;background:#333;color:#fff;font:700 16px/1.5 Inter,Arial,sans-serif}
html body dialog .viewer-side[hidden],html body dialog .viewer-side-count[hidden]{display:none!important}
@media(max-width:600px){html body dialog .viewer-side{width:44px!important;height:44px!important;padding:10px!important}html body dialog .viewer-side--prev{left:8px!important}html body dialog .viewer-side--next{right:8px!important}}