A.ImagePopup {
    cursor:pointer;
}

.ModalPane .ImagePopup {
    /*   border:1px dotted red; */
    display:table;
    width:100%;
    height:100%;
    vertical-align:middle;

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

}

.ModalPane .ImagePopup>* {
    display:table-row;
}
.ModalPane .ImagePopup>*>* {
    display:table-cell;
}

.ModalPane .ImagePopup .Header>* {
    vertical-align:top;

}

.ModalPane .ImagePopup .Footer>* {
    vertical-align:bottom;

}

.ModalPane .ImagePopup .Base>* {
    vertical-align:middle;

}
.ModalPane .ImagePopup .Header .Contents {
    height:80px;
}
.ModalPane .ImagePopup .Footer .Contents {
    height:80px;
    text-align:right;
}

.ModalPane .ImagePopup .Footer .Contents .Caption {
    display:inline-block;
    vertical-align: middle;
    background-color:rgba(1,1,1,0.75);
    color:white;
    padding: 1em;
    border-top-left-radius: 1em;
}

.ModalPane .ImagePopup .Header .Contents .Button {
    display: inline-block;

    width:100%;
    height:100%;

    z-index: 1;

    background-color: transparent;

    text-decoration: none;

    background-repeat: no-repeat;

    cursor: pointer;

    background-size: 50px 50px;

    background-position: right 20px center;
}

.ModalPane .ImagePopup .Base .Contents {
    text-align:center;
    position:relative;
    vertical-align:middle;

    background-repeat: no-repeat;
    background-position: center center;
    height:100%;

}
.ModalPane.ImagePopup .Base .Contents .ImagePart {
    display: inline-block;
    vertical-align:middle;
}

.ModalPane .ImagePopup .Base .Contents .Button {
    display: inline-block;

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

    z-index: 1;

    background-color: transparent;

    text-decoration: none;

    background-repeat: no-repeat;
    color: gray;

    cursor: pointer;

    background-size:50px 50px;
}

.ModalPane .ImagePopup .Button[action="PrevImage"] {

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


    left:0;
    background-position:left center;
}

.ModalPane .ImagePopup .Button[action="NextImage"] {

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

    left:50%;
    background-position:right center;
}

.ModalPane .ImagePopup .Button[action="CloseImage"] {

    background-image: url("../images/close.png");

    background-position:right 20px center !important;
    width:50% !important;
}

.ModalPane .ImagePopup .Button[action="ZoomImage"] {

    background-image: url("../images/zoom.png");

    background-position:left 20px center !important;
    width:50% !important;
}

.ModalPane .cover-spin {
    /*position:fixed;*/
    /*width:100%;*/
    /*left:0;right:0;top:0;bottom:0;*/
    /*background-color: rgba(255,255,255,0.7);*/
    /*z-index:9999;*/
    /*display:block;*/
}

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

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

.ModalPane .cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    /*left:50%;top:50%;*/
    width:2em;height:2em;
    border-style:solid;
    border-color:gray;
    border-top-color:transparent;
    border-width: 1em;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}