@charset "UTF-8";
/* CSS Document */
* {
   box-sizing: border-box;
}
.container {
   display: flex;
}
.left {
   width: 300px;
   display: flex;
   flex-direction: column;
}
#searchInput {
   width: 100%;
   padding: 8px;
   margin: 12px 0;
}
#nameListContainer {
   height: 200px;
   overflow-y: scroll;
   border: 1px solid #ddd;
    scrollbar-color: #888 #f1f1f1;
    scrollbar-width: thin;
}
#nameList {
   list-style: none;
   padding: 0;
   margin: 0;
   height: 100%;
}
#nameList li {
   cursor: pointer;
   padding: 5px;
   white-space: nowrap;
}
#nameList li:hover {
   color: red;
}
.poznati {
   color: blue; /* Boja za poznate članove */
   font-weight: bold;
}
.obican {
   color: black; /* Boja za obične članove */
}
.poznati {
   color: blue; /* Boja za poznate članove */
   font-weight: bold;
}
.obican {
   color: black; /* Boja za obične članove */
}
#instructions {
   max-height: 100px;
   width: 300px;
   height: 300px;
   overflow-y: scroll;
   border: 1px solid #ddd;
   margin-top: 10px;
}
.img-zoom-lens {
   position: absolute;
   border: 0px solid #d4d4d4;
   width: 50px;
   height: 50px;
   z-index: 1;
}
.img-zoom-result {
   border: 1px solid #d4d4d4;
   width: 1100px;
   height: 700px;
}
.pulse-button {
   border: none;
   outline: none;
    color: white;
   width: 5px;
   height: 5px;
   background-color: #ff5733;
   border-radius: 50%;
   position: absolute;
    cursor: pointer;
   animation: pulse 2s infinite;
   z-index: 2;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
#pulseButton:hover {
   transform: scale(1.2);
   background-color: #33c4ff;
}
@keyframes pulse {
   0% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.5);
   }
   100% {
       transform: scale(1);
   }
}
/* Responzivni dizajn */
@media (max-width: 768px) {
body {
flex-direction: column;
}
.left-container {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
}
.right-container {
height: auto;
}
.result-box {
height: 300px; /* Fiksirana visina za manje ekrane */
}
}