:root {
    --f-spinner-color-1: rgba(0, 0, 0, .1);
    --f-spinner-color-2: rgba(17, 24, 28, .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: calc(var(--f-spinner-width) * -.5) 0 0 calc(var(--f-spinner-height) * -.5);
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height);
    border-radius: var(--f-spinner-border-radius);
    border: var(--f-spinner-border-width) solid var(--f-spinner-color-1);
    border-top-color: var(--f-spinner-color-2);
    animation: f-spinner .75s linear infinite, f-fadeIn .2s ease .2s both
}

@keyframes f-spinner {
    to {
        transform: 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: 1
}

.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
}