.ImagePopup {
    cursor:pointer;
}

.ImagePopupPane {

    display:flex;

    flex-direction:column;

    position:fixed;
    left:0;
    top:0;

    width:100%;
    height:100%;

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

    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center center;

    background-size: contain;

    background-color: rgba(0,0,0,0.9);

    z-index:101;

}
.ImagePopupPane .Button {
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.95));
}

.ImagePopupPane .Header {
    height:50px;
    display:flex;
    flex-direction:row;
    justify-content: space-between;

    padding:1em;
}

.ImagePopupPane .Header .Button {

    width:50px;
    height:50px;

    /*max-width:50px;*/
    /*max-height:50px;*/

    text-decoration: none;

    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;

    cursor: pointer;

    /*box-shadow: 0px 0px 5px 1px rgba(255,255,255,0.8);*/


}
.ImagePopupPane .Header .Button[action="CloseImage"] {
    background-image: url("../images/close.png");

}

.ImagePopupPane .Header .Button[action="ZoomImage"] {
    background-image: url("../images/zoom.png");

}

.ImagePopupPane .Contents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    flex-grow:1;
}

.ImagePopupPane .Contents .Button {

    background-color: transparent;
    background-size: 50px 50px;

    background-repeat: no-repeat;

    text-decoration: none;

    color: gray;

    cursor: pointer;

    width:50px;
}

.ImagePopupPane .Contents .Button[action="PrevImage"] {

    background-image: url("../images/gallery_left.png");
    background-position:left center;

}

.ImagePopupPane .Contents .Button[action="NextImage"] {

    background-image: url("../images/gallery_right.png");
    background-position:right center;

}

.ImagePopupPane .Footer  {
    height:50px;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


.ImagePopupPane[loading] .Button {
    display:none;

}
.ImagePopupPane[loading] .Contents:after {

    content:'';

    /*display:block;*/
    position:absolute;

    /*bottom: 1em;*/
    /*left: 1em;*/

    top: calc(50% - (2em / 2));
    /*bottom: calc(50% - (2em / 2));*/

    left: calc(50% - (2em / 2));

    width:2em;
    height:2em;

    border-style: solid;
    border-color: gray;
    border-top-color:transparent;
    border-width: 1em;
    border-radius: 50%;

    animation: spin .8s linear infinite;
}

.ImagePopupPane[zoom] {
    background-size:cover;
}

.ImagePopupPane[zoom] .Contents .Button {
    display:none;
}