.preview-frame {
  display: none;
  width: 90vw;
  height: 70vh;
  margin-top: 10px;
  border: 2px solid #2196f3;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 99;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
  transition: opacity 0.3s ease;
}

.thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover; /* Ensures image fills box without distortion */
  border-radius: 12px; /* Slight round corners */
  margin-right: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #eee;
}

.thumbnail:hover {
  transform: scale(1.05); /* Subtle zoom effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  border-color: #2196f3; /* Highlight border on hover */
}



        .hidethelink {
            /* display: none !important; */
            animation-name: hidinglink;
            animation-duration: 2s;
            animation-fill-mode: forwards;

            /* visibility: hidden; */
            /* opacity: 0; */
            /* width: 0%; */

        }

        @keyframes hidinglink {
            0% {
                opacity: 1;

            }

            100% {
                opacity: 0;
                display: none;

                !important
            }
        }
#lblCount {
    font-weight: bold;
    color: green;
    padding: 5px 10px;
    display: inline-block;
}


.showthelink {
    border-style: ridge;
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 8px;
  transition: background 0.3s;
}

.showthelink:hover {
  background: #e3f2fd;
}

        @keyframes showinglink {
            0% {
                opacity: 0;


            }

            100% {
                opacity: 1;
                display: block;

                !important
            }
        }