.search {
	margin: 8px ;
  width: 100%;
	margin-right: 20px;
}

.search #search_text_input {
	border: thin solid #E5E5E5;
  	float: left;
  	height: 30px;
  	outline: 0;
  	width: 100px;
  	border-top-right-radius: 0;
  	border-bottom-right-radius: 0;
  	border-top-left-radius: 3px;
  	border-bottom-left-radius: 3px;

}


.button_holder {
	background-color: #F1F1F1;
  	border: thin solid #e5e5e5;
  	cursor: pointer;
  	float: left;
  	height: 30px;
  	text-align: center;
  	width: 50px;
  	border-top-right-radius: 3px;
  	border-bottom-right-radius: 3px;
}



.button_holder img {
	margin-top: 1px;
    width: 20px;
}



.search_results {

	background-color: #fff;
    border: 1px solid #DADADA;
    border-bottom: none;
    border-top: none;
    margin-top: 21px;
}

.search_results_footer{
	padding: 7px 4px 0px 4px;
    height: 30px;
    border: 1px solid #DADADA;
    border-top: none;
    background-color: #20AAE5;
    text-align: center;
}

.search_results_footer a {
	color: #fff;
}


}

.searchPageFriendButtons {
	float: right;
}

.searchPageFriendButtons input[type="submit"] {
	border: none;
    padding: 7px 12px;
    border-radius: 5px;
    color: #fff;
}

.result_profile_pic {
	float: left;
    margin-right: 10px;
}

#search_hr {
	margin-bottom: 0px;
}

@media only screen and (max-width: 600px) {
    .top_bar .search {
        position: absolute;
        top: 40px; /* Ajusta según sea necesario para mover el buscador más abajo */
        left: 0;
        
        padding: 0;
        margin: 0;
       
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .top_bar .search.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .top_bar .search form {
        display: flex;
        width: 100%;
    }







    .top_bar .search #search_text_input {
        width: calc(100% - 50px); /* Deja espacio para el botón de la lupa */
        display: block;
        margin: 0;
        padding: 0 10px;
        border: thin solid #E5E5E5;
        height: 30px;
        outline: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .top_bar .button_holder {
        width: 50px; /* Mantiene el ancho del botón */
        padding: 0; /* Elimina cualquier padding */
        margin: 0; /* Asegura que no hay margen que desplace el botón */
        display: flex;
        align-items: center; /* Centra verticalmente la lupa */
        justify-content: center; /* Centra horizontalmente la lupa */
    }

    .top_bar .button_holder img {
        width: 20px;
        cursor: pointer;
    }
}


/*resuktado  */

@media only screen and (max-width: 600px) {
    .resultDisplay {
        padding: 10px 20px; /* Aumenta el padding para mayor espacio visual */
        height: auto; /* Deja que la altura se ajuste automáticamente */
        border-bottom: 1px solid #D3D3D3;
        display: flex; /* Usamos flex para una mejor disposición */
        align-items: center; /* Centra verticalmente los elementos */
        background-color: #fff; /* Fondo blanco para mayor contraste */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Añade una sombra ligera */
        margin-bottom: 10px; /* Espacio entre los resultados */
        border-radius: 5px; /* Bordes redondeados para un diseño más moderno */

    }

    .resultDisplay a {
        float: none;
        display: flex;
        align-items: center;
        width: 100%; /* Asegura que el enlace ocupe todo el ancho disponible */
        text-decoration: none; /* Elimina la subrayado del enlace */
    }

    .resultDisplay:hover {
        background-color: #f0f0f0; /* Color de fondo al pasar el ratón */
    }

    .liveSearchProfilePic img {
        height: 60px; /* Imagen más grande */
        width: 60px; /* Asegura que la imagen sea cuadrada */
        border-radius: 50%; /* Hace la imagen circular */
        margin: 0 15px 0 0; /* Espacio a la derecha de la imagen */
        flex-shrink: 0; /* Evita que la imagen se reduzca */
    }

    .liveSearchText {
        background-color: transparent;
        color: #1E96CA;
        flex-grow: 1; /* Deja que el texto ocupe el espacio restante */
    }

    .liveSearchText p {
        margin: 0; /* Elimina márgenes adicionales */
        font-size: 16px; /* Aumenta el tamaño del texto para mejor legibilidad */
        line-height: 1.4; /* Espacio entre líneas para mejor legibilidad */
    }
}

.search_results_scrollable {
    max-height: 400px; /* Ajusta la altura máxima según tus necesidades */
    overflow-y: auto; /* Habilita el desplazamiento vertical si el contenido es más alto que el contenedor */
    padding: 10px;
    background-color: #fff; /* Mantiene el fondo blanco */
    border: 1px solid #DADADA; /* Mantiene los bordes */
}



.main_column {
    width: 80%; /* Ajusta el ancho según sea necesario */
    margin: 0 auto; /* Centra el contenedor */
    float: none; /* Asegura que el contenedor no flote */
}

.search_results_scrollable {
    max-height: 500px; // Ajusta según la necesidad
    overflow-y: auto; // Habilita el desplazamiento vertical
}



/* Estilos generales para la barra de desplazamiento */
.search_results_scrollable {
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #888 #e0e0e0; /* Para Firefox, define el color de la barra y el fondo */
}

/* Personalización de la barra de desplazamiento para Webkit (Chrome, Safari, etc.) */
.search_results_scrollable::-webkit-scrollbar {
    width: 8px; /* Ancho en PC */
}

.search_results_scrollable::-webkit-scrollbar-track {
    background: #e0e0e0;
}

.search_results_scrollable::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

/* Media query para dispositivos móviles */
@media only screen and (max-width: 600px) {
    .search_results_scrollable::-webkit-scrollbar {
        width: 12px; /* Ancho más grueso para móviles */
    }

    .search_results_scrollable::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 3px solid #e0e0e0; /* Borde más grueso para mejor agarre */
    }
}


/*espacios entre cada post en resultados */

.search_result {
    border: 1px solid #ccc; /* Borde sutil */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Espacio entre resultados */
    background-color: #f9f9f9; /* Color de fondo ligero */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    border-radius: 5px; /* Bordes redondeados */
}

.search_result:hover {
    background-color: #e9e9e9; /* Cambio de color al pasar el ratón */
}

.result_profile_pic img, .liveSearchText img {
    width: 50px; /* Asegura un tamaño uniforme para las imágenes */
    height: 50px;
    border-radius: 50%; /* Imágenes redondas */
}