:root {
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-border-radius: 50%;
    --f-spinner-border-width: 4px;
}
.f-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height);
    translate: -50% -50%;
    border: var(--f-spinner-border-width) solid var(--f-spinner-color-1);
    border-top-color: var(--f-spinner-color-2);
    border-radius: var(--f-spinner-border-radius);
    animation:
        f-spinner 0.75s linear infinite,
        f-fadeIn 0.2s ease 0.2s both;
}
@keyframes f-spinner {
    to {
        rotate: 360deg;
    }
}
.f-panzoom,
.f-zoomable {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.f-panzoom:before,
.f-panzoom:after,
.f-zoomable:before,
.f-zoomable:after {
    display: block;
    content: "";
}
.f-panzoom:not(.has-controls):before,
.f-zoomable:not(.has-controls):before {
    margin-bottom: auto;
}
.f-panzoom:after,
.f-zoomable:after {
    margin-top: auto;
}
.f-panzoom.in-fullscreen,
.f-zoomable.in-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    z-index: 9999;
}
.f-panzoom__wrapper {
    position: relative;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}
.f-panzoom__wrapper.will-zoom-out {
    cursor: zoom-out;
}
.f-panzoom__wrapper.can-drag {
    cursor: move;
    cursor: grab;
}
.f-panzoom__wrapper.will-zoom-in {
    cursor: zoom-in;
}
.f-panzoom__wrapper.is-dragging {
    cursor: move;
    cursor: grabbing;
}
.f-panzoom__wrapper.has-error {
    display: none;
}
.f-panzoom__content {
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}
.f-panzoom__content.is-lazyloading,
.f-panzoom__content.has-lazyerror {
    visibility: hidden;
}
img.f-panzoom__content {
    width: auto;
    height: auto;
    vertical-align: top;
    object-fit: contain;
    transition: none;
    user-select: none;
}
.f-panzoom__wrapper > .f-panzoom__content {
    visibility: hidden;
}
.f-panzoom__viewport {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.f-panzoom__viewport > .f-panzoom__content {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
picture.f-panzoom__content img {
    vertical-align: top;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: none;
    user-select: none;
}
.f-panzoom__protected {
    position: absolute;
    inset: 0;
    z-index: 1;
    user-select: none;
}
html.with-panzoom-in-fullscreen {
    overflow: hidden;
}