#megazine .exif-caption-hide {
    opacity:0;
}
#megazine .exif-caption-show {
    opacity:unset;
}

#megazine .exif-info-hide, .gps-marker-hide {
    display:none;
}
#megazine .image-info-show, .gps-marker-show {
    display:block;
}

/* There was a strange effect, where certain images were wrapped with broad margins (due to margin:auto)
    With the result that the image became far too small.
    Strangely, adding this rule expanded the image to the full size; as required.
    Applying this rule directly to the image itself (via the .mz3-img clas) was not accepted (why not?)
    And also adding this rule to parents did not work.
    I have no idea why this helped and what was/is the reason of certain images with such a broad margin on all (!) sides!
 */
#megazine img {
    flex:auto;
}

.titlebar_right {
    color:white;
}
.titlebar_left {
    display:none;
}

.mz3-all-exif-wrapper {
    height: auto;
    position: relative;
    display: block;
}

.exif-text-position {
    display: flex;
    position: relative;
    justify-content: flex-end;
    flex-direction: column;
}

.mz3-exif-text-anchor-wrapper{
    position: absolute;
    left: 6px;
    background-color: rgba(0,0,0,0.30); /* is set programmatically */
}

.mz3-exif-text-anchor {
    position: relative;
    display: inline-flex;
}

.caption-node {
    color: rgba(255,255,255,0.80);
    font-size: 1.08vw;
    font-style: normal;
    font-family: 'helvetica', sans-serif;
    font-weight: normal;
    position: relative;
    left: 0;
    padding: 3px;
    text-align: left;
    width: 100%;
    height: auto;
    white-space: pre-line;
    margin-block: auto;
}

.grid-wrapper{
    position:absolute;
    margin: inherit;
    width:100%;
    height:100%;
}

.mz3-element-wrapper {
    width:100%;
    height:100%;
}

div.mz3-inner-element-wrapper {
    position:relative;
    width:100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

    .mz3-element-a-wrapper {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index:1005;
    }

    .wrapped-anchor-wrapper {
        text-align: center;
        overflow: hidden;
        margin: auto;
        object-fit: contain;
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        cursor:pointer;
    }

    .is-wrapped {
        text-align: center;
        overflow: hidden;
        margin:auto;
        object-fit: contain;
    }

        .mz3-img {
            box-sizing:border-box;
        }

        #megazine p.imageHeaderTextWrapper {
            color:black;
            font-size:28px;
            line-break: normal;
            padding-bottom:8px;
        }

        #megazine p.imageCommentWrapper{
            color: black;
            font-size: 11px;
            line-break: normal;
            padding-top:4px;
            font-family: 'verdana', auto, sans-serif;
        }

        .icon-wrapper {
            height:1px;
            width:100%;
            z-index: 1000;
        }

        .exif-info-icon, .gps-marker-icon {
                padding-bottom: 3px;
                padding-right: 1px;
                opacity: 0.5;
                text-align: center;
                cursor: pointer;
            }

        .link-uri-icon, .big-image-icon {
            padding-bottom: 3px;
            padding-right: 3px;
            opacity: 0.7;
            text-align: center;
            cursor: pointer;
        }

    /* The position will be calculated based on the image position , the border width and the current text size / line height */
        .mz3-image-description {
            position:relative;
            display: block;
            width:100%;
            text-align: center;
            color:#d0d0d0;
            font-size: 0.9vw;
            font-weight: normal;
            margin-bottom:0;
            font-family: 'verdana', auto, sans-serif;
            z-index:50;
        }

        /* top is calculated based on font-size and image position */
        .mz3-image-header {
            position:absolute;
            width:100%;
            text-align: center;
            color:#FFFFFF;
            font-size: 1.1vw;
            font-weight: normal;
            margin-top:0;
            z-index:50;
        }

/* overflow:auto would block all cursor: reactions and events on the border of the container */
/* width and height of this container or set to the page size */
#exif-info-pop-up, #gps-marker-pop-up {
    overflow: hidden;
    width: auto;
    height: auto;
    top: 20px;
    left: 20px;
    margin: 0;
    position: fixed;
    flex-flow: row;
    background-color: rgba(20 20 20 /100%);
}

#exif-info-pop-up {
    z-index: 1000;
}
#gps-marker-pop-up {
    z-index: 500;
}

    .resizer {
        /* All resizers are positioned absolutely inside the element; z-index must be higher than exifPopUp and mz3-element-a-wrapper */
        position: absolute;
        z-index:1010;
    }

    /* Placed at the right side */
    .resizer-r {
        cursor: col-resize;
        height: 100%;
        right: 0;
        top: 0;
        width: 16px;
    }

    /* Placed at the bottom side */
    .resizer-b {
        bottom: 0;
        cursor: row-resize;
        height: 16px;
        left: 0;
        width: 100%;
    }
    /* Placed at the left side */
    .resizer-l {
        cursor: col-resize;
        height: 100%;
        left: 0;
        top: 0;
        width: 16px;
    }

    /* Placed at the top side */
    .resizer-t {
        cursor: row-resize;
        height: 10px;
        left: 0;
        top:0;
        width: 100%;
    }

/* The four corner areas */
    /* bottom right corner */
    .resizer-cbr {
        cursor: se-resize;
        height: 18px;
        right: 0;
        bottom: 0;
        width: 18px;
    }
    /* Placed at the bottom left corner */
    .resizer-cbl {
        bottom: 0;
        cursor: sw-resize;
        height: 18px;
        left: 0;
        width: 18px;
    }
    /* Top left corner */
    .resizer-ctl {
        cursor: nw-resize;
        height: 100%;
        left: 0;
        top: 0;
        width: 18px;
    }
    /* Top right corner */
    .resizer-ctr {
        cursor: ne-resize;
        height: 10px;
        right: 0;
        top:0;
        width: 10px;
    }


#mz3-image-exif-info-popup-header-wrapper, #mz3-image-gps-marker-popup-header-wrapper {
        position: relative;
        cursor: move;
        display: block;
        padding: 2px;
        background-color: #3e3c3c;
        text-align: left;
    }

        /* i white x in red square (E:\_mz3 development\_mz3_2021\tool\app-internal-assets\icons\btn_close_19.png*/
        .close-exif-info-pop-up, .close-gps-marker-pop-up  {
            cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAATElEQVQ4jWM8HhDwn4FKgIlaBo0aNtgNs1i/nsFi/XoMNi7ASCidIRtwIjCQfJchG0DIIKIMQ/YmRYbBDIC5iuIwIwUM0XQ2ahhWAAAGvxtEwQODwgAAAABJRU5ErkJggg==), auto;
            position: relative;
            z-index: 1050;
            font-size: 14px;
            font-weight: normal;
            padding: 4px 10px 3px 3px;
            color: white;
            text-align: right;
            margin-left: auto;
            margin-right: 0;
            display: block;
            width: 16px;
        }

    #mz3-image-exif-info-body-wrapper, #mz3-image-gps-marker-body-wrapper {
        display: flex;
        flex-flow: row;
    }

#mz3-image-exif-info-wrapper, #mz3-image-gps-marker-wrapper {
        overflow: hidden;
        cursor: move;
        padding: 6px 0 4px 6px;
        margin: 0 0 0 0;
        position: relative;
        flex-basis: max-content;
        font-family: 'helvetica', auto, sans-serif;
        color: #f0f0f0;
    }


.exif-line-wrapper {
                display: block;
            }
                .exif-header-line {
                    display: flex;
                    cursor: context-menu;
                    color: #ffff00;
                    font-size: 11px;
                    font-weight: normal;
                    margin-top: 0;
                }

            .exif-group {
                flex-direction: row;
                justify-content: flex-start;
                align-items: baseline;
                flex-wrap: wrap;
                font-weight: normal;
                font-size: 11px;
                margin-bottom:3px;
            }
                .exif-line {
                    display: flex;
                    margin: 0 0 0 0;
                }
                    .exif-key {
                        width: 97px;
                        text-align: left;
                        color: rgba(200,200,200,1);
                        margin-right: 6px;
                    }

                    .exif-value {
                        width: 116px;
                        text-align: left;
                        color: rgba(240,240,240,1);
                    }

                .exif-gps-wrapper-line {
                    display: inline-flex;
                    align-items: center;
                    margin: 0;
                }
                    .gps-icon {
                        width: 66px;
                        height: auto;
                        padding: 3px;
                        margin:  0 9px 0 0;
                    }

                    .exif-gps-maps-group {
                        display: flex;
                        flex-flow: column;
                        align-items: flex-start;
                        padding: 0 0 0 0;
                    }
                        .exif-gps-maps-google-wrapper {
                            display:block;
                            margin: 0 0 3px 0;
                            text-align: left;
                        }
                            .exif-gps-maps-google-wrapper a.exif-gps-gmaps-anchor {
                                color:#ffff00!important;

                                font-family: 'verdana', auto, sans-serif;
                                text-decoration: none;
                            }

                        .exif-gps-osv-wrapper {
                            display:block;
                            margin: 0 0 3px 0;
                            text-align: left;
                        }
                            .exif-gps-osv-wrapper a.exif-gps-osv-anchor {
                                color:#ffff00!important;
                                font-family: 'verdana', auto, sans-serif;
                                text-decoration: none;
                            }

    /* width is set to pageWidth at the beginning and after the map is loaded to the width of exifPopUp */
    /* height is set to pageHeight at the beginning and then to the height of exifPopU - height of mz3-image-info-popup-wrapper */
    /* margin is calculated out of the sum of imageInfoWrapper margin plus padding */
    /* And padding is set to 0 */

    #mz3-leaflet-map-wrapper {
        width: 290px;
        margin: 6px 6px;
        flex: auto;
        }

        #leaflet-map {
            width: auto;
            height: 100%;
        }