.nggf-wrapper {
    width:100%;
}


.nggf-main {
    text-align:center;
    margin-bottom:20px;
	position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}


.nggf-large-image {
    max-width:100%;
    max-height:700px;
}


.nggf-image-prev,
.nggf-image-next {

    background:#222;
    color:white;

    border:none;

    font-size:30px;

    width:45px;
    height:60px;

    cursor:pointer;

    opacity:.7;

}

.nggf-image-prev:hover,
.nggf-image-next:hover {

    opacity:1;

}


.nggf-filmstrip {

    display:flex;
    gap:10px;
    overflow-x:auto;
	overflow-y:hidden;
    flex:1;
    scroll-behavior:smooth;
    padding:10px;
    cursor:grab;
    user-select:none;
	 white-space:nowrap;

    -webkit-overflow-scrolling:touch;
}

.nggf-filmstrip img {
    flex-shrink:0;
}

.nggf-thumb {
    width:120px;
    height:80px;
    object-fit:cover;
    cursor:pointer;
    border:4px solid transparent;
	flex-shrink:0;
}


.nggf-thumb:hover {

    border-color:#0073aa;

}


.nggf-thumb.active {

    border:4px solid #d4af37 !important;
    box-shadow:0 0 8px rgba(212,175,55,0.8);

}

.nggf-filmstrip-container {

    display:flex;
    align-items:center;
    gap:10px;

}


.nggf-filmstrip {

    display:flex;
    gap:10px;
    overflow:hidden;
    flex:1;

}


.nggf-scroll-left,
.nggf-scroll-right {

    width:40px;
    height:60px;

    background:#222;
    color:white;

    border:none;

    font-size:25px;
    cursor:pointer;

}


.nggf-scroll-left:hover,
.nggf-scroll-right:hover {

    background:#555;

}

.nggf-filmstrip.dragging {

    cursor:grabbing;

}