.search-result-list-item.first-result {
    background-color: #f0f8ff; 
    border-left: 4px solid #007bff;
    font-weight: bold;
}
.search-result-list-item.first-result:hover {
    background-color: #007bff;
    color: white;
}

.search-result-list-item:hover {
    background-color: #00B8C0; 
    color: white; 
    text-decoration: none;
    cursor: pointer;
    opacity: 0.6 ;
}

.search-bar-input > .form-control:focus {
    border-radius: 50%;
    border: 1px solid #00B8C0; 
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 184, 192, 0.25); 
}

.on-focus {
    -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 184, 192, 0.9); 
    -moz-box-shadow: 0px 0px 25px -5px rgba(0, 184, 192, 0.9);
    box-shadow: 0px 0px 25px -5px rgba(0, 184, 192, 0.9);
    transition: all 0.3s ease-out;
}

.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
}

.search-bar {
    position: relative; 
}

.search-bar-result {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: white;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

.search-bar-result .card {
    border: none;
    border-radius: 0;
}


.search-bar-result::-webkit-scrollbar {
    width: 5px;
}

.search-bar-result::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
    border-radius: 111px;
}

.search-bar-result::-webkit-scrollbar-thumb {
    background-color: #00334E; 
    border-radius: 10px;
}

.search-bar-result::-webkit-scrollbar-thumb:hover {
    background-color: #000000; 
}

.search-bar-result::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
}