/*Define image frame styles with grid layout for 4 images per row*/
.showImage{
    position: relative;
    top: 0;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: 6px;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
}

/*Define grid layout for image content - horizontal layout*/
.imageContent {
    position: relative;
    overflow: visible;
    width: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.imageContent ul { /*Horizontal layout*/
    position: relative;
    padding-left: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow: visible;
    margin: 0;
    gap: 6px;
}

.imageContent ul li { /*Horizontal item styling*/
    display: block;
    flex-shrink: 0;
    text-align: center;
    list-style: none;
    padding: 2px;
}

/*.imageContent ul li :hover{ !*57 * 55*!*/
/*    display:inline-block;*/
/*    border: whitesmoke 4px solid;*/
/*    */
/*    !*border-radius: 20px;*!*/
/*}*/

@-webkit-keyframes  shine {
    from{ -webkit-box-shadow: 0 0 3px #ffffff;}
    to{ -webkit-box-shadow: 0 0 3px #ffffff;}
}

.shiningBorder{
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
}

/* Responsive styles for tablets */
@media only screen and (max-width: 992px) {
    .imageContent {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .imageContent ul li {
        flex-shrink: 0;
    }

    .imageContent ul li img {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Responsive styles for mobile */
@media only screen and (max-width: 768px) {
    .showImage {
        width: 100%;
        height: auto;
        padding: 6px;
        overflow-x: auto;
    }

    .imageContent {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .imageContent ul li {
        flex-shrink: 0;
    }

    .imageContent ul li img {
        width: 45px !important;
        height: 45px !important;
    }
}

@media only screen and (max-width: 480px) {
    .showImage {
        width: 100%;
        height: auto;
        padding: 3px;
        overflow-x: auto;
    }

    .imageContent {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 3px;
    }

    .imageContent ul li {
        flex-shrink: 0;
    }

    .imageContent ul li img {
        width: 35px !important;
        height: 35px !important;
    }

    .imageItem {
        width: 35px !important;
        height: 35px !important;
        padding: 1px !important;
    }
}