.appSwiper {
    position: fixed;
    left: 0px;
    top: 0px;
    transition: all var(--animation);
    z-index: 7;
    cursor: grab;
}

.swiper-container {
    background-color: white;
}

.swiperOpen {
    cursor: pointer;
    transition: all 0.25s;
}

.swiperOpen:hover {
    opacity: 0.75;
}

.appSwiper .gallery {
    display: none;
    width: 100vw;
    height: 100dvh;
    /* background-color: red; */
}

.appSwiper.active .gallery {
    display: block;
}

.appSwiper .slide {
    display: flex !important;
    height: 100%;
    align-content: normal;
    background-color: var(--main);
    /* background-color: var(--main); */
    width: 100%;
    position: relative;
}

.appSwiper .plusContainer {
    display: flex;
    flex-direction: row;
    position: fixed;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    top: var(--m);
    z-index: 5;
    opacity: 0;
    transition: opacity var(--animation), right var(--animation), top var(--animation);
    /* right: calc(var(--m) * 2 + 1em); */
    /* left: unset; */
    right: var(--m);
    top: calc(var(--m) * 3 + var(--fontNormal));
}


.appSwiper .plusData {
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 0%; */
    /* min-width: 1em; */
    /* height: 1em; */
    position: absolute;
    left: 100%;
    /* left: 50%; */
    top: 50%;
    transform: translate(0, -50%);
    /* background-color: var(--contrast); */
    /* padding: 1px; */
    /* border-radius: 0.25em; */
    margin-left: var(--m);
    pointer-events: none;
    /* color: var(--bg); */
    opacity: 0;
    transition: all var(--animation);
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--fontSmall);
}

.appSwiper .plusData {
    left: unset;
    right: calc(var(--m) * 1 + 2em);
    margin-left: unset;
}

.appSwiper .plusContainer:hover .plusData {
    /* max-width: 500px; */
    opacity: 1;
    transition: all var(--animation);
}

.appSwiper .plusContainer:has(.active) .plusData {
    opacity: 0;
}

/* .appSwiper.active .plusContainer {
    right: var(--m);
} */

.appSwiper .plusContainer.hide {
    display: none;
}

.appSwiper.active .plusContainer {
    display: flex;
    top: var(--m);
    /* top: calc(100dvh - var(--m) - var(--fontNormal)); */
}

.appSwiper .legendContainer {
    position: relative;
    background-color: var(--bg);
    /* width: var(--column4); */
    width: auto;
    height: 100%;
    color: var(--main);
    /* padding: var(--m); */
    font-size: var(--fontSmall);
    line-height: var(--lineHeight);
    flex-grow: 1;
}

.appSwiper .legend {
    position: absolute;
    /* bottom: calc(1 * var(--m) + 0 * var(--fontNormal)); */
    bottom: 0;
    padding: var(--m);
}

.appSwiper .pageNum {
    color: var(--contrast);
    font-size: var(--fontSmall);
    line-height: var(--lineHeight);
    padding-left: var(--m);
}

.appSwiper .pageData {
    display: flex;
    flex-direction: row;
}


.appSwiper .image {
    /* background-color: var(--main); */
    /* background-color:red; */
    width: auto;
    height: 100%;
    object-fit: contain;
    outline: none;
    max-width: 70%;
}

.image:not([src]) {
    visibility: hidden;
}

.swiper-pagination,
.swiper-pagination-fraction {
    color: var(--contrast) !important;
    font-size: var(--fontSmall);
    line-height: 1em !important;
    pointer-events: none;
    text-align: left !important;
    /* background-color: red; */
    bottom: var(--m) !important;
    left: var(--m) !important;
    /* left: unset !important; */
}

.safeLeft {
    width: 5rem;
    background-color: var(--bg);
}

.rightArrowContainer {
    display: none;
    position: fixed;
    z-index: 6;
    top: 50dvh;
    right: var(--m);
}

.leftArrowContainer {
    display: none;
    position: fixed;
    z-index: 6;
    top: 50dvh;
    left: var(--m);
}

.appSwiper.active .rightArrowContainer,
.appSwiper.active .leftArrowContainer {
    display: block;
}

@media screen and (orientation: portrait) {

    .appSwiper .plusContainer {
        top: calc(var(--m) * 4 + var(--fontNormal) + var(--fontNormal));
    }

    /* .appSwiper .plusContainer {
        left: var(--m);
        top: calc(var(--m) * 3 + 1 * var(--fontNormal) + 1 * var(--fontSmall));
        transform: translate(0, 0);
    }

    .appSwiper .plusData {
        left: calc(var(--m) * 1 + 2em);
        right: unset;
    } */

    .appSwiper .slide {
        flex-direction: column;
    }

    .appSwiper .legend {
        width: 100%;
        height: auto;
        /* bottom: calc(var(--m) * 2 + var(--fontSmall)); */
        /* top: var(--m); */
        top: 0;
        /* order: 2; */
    }


    .appSwiper .image {
        width: 100%;
        /* order: 1; */
        height: auto;
        max-width: unset;
        max-height: 80%;
    }

    .appSwiper .plusContainer .plusData {
        opacity: 1;
    }

    .rightArrowContainer {
        top: unset;
        /* bottom: 10dvh; */
        bottom: calc(1em + 2 * var(--m));
    }

    .leftArrowContainer {
        top: unset;
        /* bottom: 10dvh; */
        bottom: calc(1em + 2 * var(--m));
    }

    .appSwiper.active .plusContainer {
        top: var(--m);
        /* top: calc(100dvh - var(--m) - var(--fontNormal)); */
    }


}