/*
 ============================================================
 ASPIRIN V214.4.1
 DIRECT PHOTO / VIDEO VIEWER
 ============================================================
*/


.a21441-viewer {
    position: fixed;
    inset: 0;
    z-index: 14000;

    display: none;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        rgba(0,0,0,.97);

    touch-action:
        pan-y;
}


.a21441-viewer.visible {
    display: block;
}


.a21441-body {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        142px
        10px
        72px;
}


.a21441-photo {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 12px;
}


.a21441-video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 12px;

    background: #000;
}


.a21441-loading,
.a21441-error {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        min(
            82vw,
            360px
        );

    box-sizing:
        border-box;

    padding:
        18px
        20px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 18px;

    background:
        rgba(12,12,14,.88);

    color:
        rgba(255,255,255,.84);

    font-size: 16px;
    line-height: 1.45;

    text-align: center;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.a21441-error {
    color: #ff9d9d;
}


.a21441-back {
    position: absolute;

    top:
        calc(
            env(
                safe-area-inset-top,
                0px
            )
            + 76px
        );

    left: 10px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius: 16px;

    background:
        rgba(14,14,16,.92);

    color: #fff;

    font-size: 16px;
    font-weight: 800;

    line-height: 1;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.a21441-nav {
    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 62px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 17px;

    background:
        rgba(14,14,16,.84);

    color: #fff;

    font-size: 38px;

    line-height: 1;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.a21441-prev {
    left: 5px;
}


.a21441-next {
    right: 5px;
}


.a21441-nav[hidden] {
    display: none !important;
}


.a21441-counter {
    position: absolute;

    left: 50%;

    bottom:
        calc(
            env(
                safe-area-inset-bottom,
                0px
            )
            + 18px
        );

    z-index: 20;

    transform:
        translateX(-50%);

    min-width: 64px;

    box-sizing:
        border-box;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 999px;

    background:
        rgba(14,14,16,.88);

    color:
        rgba(255,255,255,.88);

    font-size: 14px;
    font-weight: 800;

    text-align: center;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}