
/* Image Navigator */

.esriGEImageNavigator {
    font-size: 13px;
}

.esriGEImageNavigator .imageNavigator_imageContainerOuter {
    position: relative;
}

.esriGEImageNavigator .imageNavigator_imageContainer {
    height: 200px;
    position: relative;
}

/* Pagination */

.esriGEImageNavigator .Pagination {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.esriGEImageNavigator .Pagination_PageAndArrows {
    bottom: 0px;
}

.esriGEImageNavigator .Pagination_Bullets,
.esriGEImageNavigator .Pagination_TriangleForward,
.esriGEImageNavigator .Pagination_TriangleBack {
    display: none;
}

.esriGEImageNavigator .Pagination_Items {
    left: 0px;
    right: 0px;
}

.esriGEImageNavigator .imageNavigator_imagePaginationRoot {
    min-width: 200px;
    height: 200px;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* this is to force clipping when exporting */
}

    .esriGEImageNavigator .imageNavigator_imagePaginationRoot .imageNode {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .esriGEImageNavigator .imageNavigator_imagePaginationRoot .imageNavigator_watermarkPano { 
        width: 24px;
        height: 24px;
        position: absolute;
        top: 7px;
        left: 7px;
        background-image: url("./images/imageNavigator/watermark-pano.svg");
        background-size: 24px;
        background-repeat: no-repeat;
    }
    
    .esriGEImageNavigator .imageNavigator_imagePaginationRoot .imageNavigator_watermark360 { 
        width: 24px;
        height: 24px;
        position: absolute;
        top: 7px;
        left: 7px;
        background-image: url("./images/imageNavigator/watermark-360.svg");
        background-size: 24px;
        background-repeat: no-repeat;
    }
    

/* Pagination Buttons */

.esriGEImageNavigatorPaginationLeftButton {
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    background-image: url("./images/paginationArrows/LeftArrow.svg");
    display: inline-block;
    cursor: pointer;
}

    .esriGEImageNavigatorPaginationLeftButton:hover {
        background-image: url("./images/paginationArrows/LeftArrow_hover.svg");
    }

    .esriGEImageNavigatorPaginationLeftButton.esriGEImageNavigatorPaginationLeftButtonDisabled {
        background-image: url("./images/paginationArrows/LeftArrow_disable.svg");
        cursor: default;
    }

.esriGEImageNavigatorPaginationRightButton {
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    background-image: url("./images/paginationArrows/RightArrow.svg");
    display: inline-block;
    cursor: pointer;
}

    .esriGEImageNavigatorPaginationRightButton:hover {
        background-image: url("./images/paginationArrows/RightArrow_hover.svg");
    }

    .esriGEImageNavigatorPaginationRightButton.esriGEImageNavigatorPaginationRightButtonDisabled {
        background-image: url("./images/paginationArrows/RightArrow_disable.svg");
        cursor: default;
    }

/* Waiting */

.esriGEImageNavigator .esriGEProgressAbsolute {
    background-size: 50px;
}

/* Navigation Buttons */

.esriGEImageNavigator .imageNavigator_prevImageButton {
    position: absolute;
    left: 10px;
    top: 80px;
    width: 30px;
    height: 40px;
}

.esriGEImageNavigator .imageNavigator_nextImageButton {
    position: absolute;
    right: 10px;
    top: 80px;
    width: 30px;
    height: 40px;
}

.esriGEImageNavigator .imageNavigator_prevImageButton,
.esriGEImageNavigator .imageNavigator_nextImageButton {
    opacity: 0;
}

.esriGEImageNavigator:hover .imageNavigator_prevImageButton,
.esriGEImageNavigator:hover .imageNavigator_nextImageButton {
    opacity: 1;
}

/* Navigator Label */

.esriGEImageNavigator .imageNavigator_navigatorLabel {
    text-align: center;
}

/* Caption Box */

.esriGEImageNavigator .imageNavigator_imageNoteContainerDiv {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    opacity: 0;
}

.esriGEImageNavigator .imageNavigator_imageContainerOuter:hover .imageNavigator_imageNoteContainerDiv,
.esriGEImageNavigator.fixedCaptions .imageNavigator_imageContainerOuter .imageNavigator_imageNoteContainerDiv {
    opacity: 1;
}

/* Thumbnails List */

.esriGEImageNavigator .imageThumbnailList {
    background-color: white;
}

.esriGEImageNavigator .imageThumbnailListItemRoot {
    width: 50px;
    height: 50px;
    border: 1px solid transparent;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

    .esriGEImageNavigator .imageThumbnailListItemRoot .imageNode {
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

.esriGEImageNavigator .imageThumbnailListItemRootSelected {
    border: 1px solid rgba(0, 145, 251, 1);
}

/* All Images View */

.esriGEImageNavigator .imageNavigator_allImagesView .imageThumbnailList {
    overflow-y: auto;
}

.esriGEImageNavigator .imageNavigator_allImagesView .imageThumbnailListItemRoot {
    width: 150px;
    height: 150px;
}

.esriGEImageNavigator .imageNavigator_allImagesView .imageThumbnailList .noImage {
    width: 150px;
    height: 150px;
}

/* No Image */

.esriGEImageNavigator .noImage {
    background-image: url("./images/imageNavigator/noImages.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 250px 139px;
    width: 250px;
    height: 139px;
    opacity: 0.5;
}

.esriGEImageNavigator .imageThumbnailList .noImage {
    width: 50px;
    height: 50px;
}

.esriGEImageNavigator .PaginationItemsNode .thumbnailIsUnavailable {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -0.625em;
}

/* No Image Placeholder */

.esriGEImageNavigator .imageNavigator_noImagePlaceHolder {
    text-align: center;
}

.esriGEImageNavigator .imageNavigator_noImagePlaceHolderImage.noImage {
}

.esriGEImageNavigator .imageNavigator_noImagePlaceHolderLabel {
    text-align: center;
    font-style: italic;
    margin-top: 15px;
    color: #AAAAAA;
}

/* Show All Images Button */

.esriGEImageNavigator .imageNavigator_showAllImagesButton {
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    background-image: url("./images/imageNavigator/squares.svg");
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    opacity: 0;
}

.esriGEImageNavigator:hover .imageNavigator_showAllImagesButton {
    opacity: 1;
}

.esriGEImageNavigator.hasNoImages .imageNavigator_showAllImagesButton {
    display: none;
}

/* Mobile */

.esriGEImageNavigator.mobile .imageNavigator_prevImageButton {
    opacity: 1;
    width: 60px;
    height: 100px;
    background-size: 24px;
    background-position: 40% center;
    left: 0px;
}

.esriGEImageNavigator.mobile .imageNavigator_nextImageButton {
    opacity: 1;
    width: 60px;
    height: 100px;
    background-position: 60% center;
    background-size: 24px;
    right: 0px;
}

.esriGEImageNavigator.mobile .imageNavigator_showAllImagesButton {
    opacity: 1;
    width: 32px;
    height: 32px;
}

.esriGEImageNavigator.mobile .imageNavigator_imageContainerOuter .imageNavigator_imageNoteContainerDiv {
    opacity: 1;
}