.catalog-flip-root { position: relative; max-width: 100%; margin: 0 auto 2.5rem; } .catalog-flip-extra { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 1rem; padding: 0 0.5rem; } .catalog-flip-extra .catalog-flip-tool-btn.button-primary.sm { min-width: 2.75rem; padding-left: 14px; padding-right: 14px; text-align: center; } .catalog-flip-extra .catalog-flip-tool-btn--wide.button-primary.sm { min-width: auto; padding-left: 18px; padding-right: 18px; } .catalog-flip-zoom-label { display: inline-block; min-width: 3.25rem; text-align: center; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: #444; } .catalog-flip-viewport { overflow: auto; width: 100%; min-height: 280px; max-height: min(88vh, 1200px); margin: 0 auto; padding: 0.75rem; box-sizing: border-box; display: block; background: #ececec; border-radius: 4px; outline: none; } .catalog-flip-viewport:focus-visible { box-shadow: 0 0 0 2px rgba(205, 15, 22, 0.35); } .catalog-flip-zoom-scroller { display: block; } .catalog-flip-zoom-inner { position: relative; } .catalog-flip-book { width: 100%; min-height: 280px; margin: 0 auto; } #catalog-flip-book .stf__parent { margin: 0 auto; } .catalog-flip-spinner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; min-height: 280px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; color: #555; background: rgba(247, 247, 247, 0.94); box-sizing: border-box; border-radius: 4px; } .catalog-flip-spinner.catalog-flip-spinner--hide { display: none; } .catalog-flip-toolbar { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding: 0 0.5rem; } .catalog-flip-hint { margin: 0.75rem 0 0; text-align: center; font-size: 0.85rem; color: #666; } .catalog-flip-hint kbd { display: inline-block; padding: 0.1em 0.45em; font-size: 0.85em; font-family: inherit; border: 1px solid #ccc; border-radius: 3px; background: #fafafa; } .catalog-flip-toolbar .catalog-flip-nav-btn.button-primary.sm { min-width: 9rem; text-align: center; } .catalog-flip-pageinfo { font-size: 0.9rem; color: #555; min-width: 8rem; text-align: center; font-variant-numeric: tabular-nums; } .catalog-flip-spinner__txt { font-size: 0.95rem; } .catalog-flip-spinner__arc { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(205, 15, 22, 0.15); border-top-color: #cd0f16; animation: catalog-flip-spin 0.75s linear infinite; } @keyframes catalog-flip-spin { to { transform: rotate(360deg); } } .catalog-flip-page-fit { width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #ffffff; overflow: hidden; } .catalog-flip-page-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; background: #ffffff; } .catalog-flip-root:fullscreen { display: flex; flex-direction: column; min-height: 100vh; background: #f7f7f7; padding: 1rem; box-sizing: border-box; } .catalog-flip-root:fullscreen .catalog-flip-viewport { max-height: none; flex: 1; min-height: 60vh; } @media (max-width: 767px) { .catalog-flip-viewport { min-height: 240px; max-height: none; padding: 0.5rem; } .catalog-flip-spinner { min-height: 240px; } .catalog-flip-toolbar { gap: 0.5rem; } .catalog-flip-toolbar .catalog-flip-nav-btn.button-primary.sm { min-width: 7rem; padding-left: 18px; padding-right: 18px; font-size: 13px; } .catalog-flip-extra { gap: 0.35rem; } }