
/*estilos de las sugerencias*/
.contentSugerencias{ /*contyenedor*/
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    padding-left: 8px;
    transition-duration: .2s;
    color: var(--colorText);
}
.contentSugerencias:hover{ /*cuando el mouse pase sobre alguna sugerencia*/
    background-color: var(--colorMain);
    color: #fff;
    transition-duration: .2s;
}

.contentSugerencias__img{ /*imagen de cada sugerencia*/
    width: 25px;
    height: 25px;
}
.contentSugerencias__Contenttext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.contentSugerencias__text{ /*texto de cada sugerencia*/
    font-size: 1em;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}
.contentSugerencias__subTitle{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1em;
    line-height: 1;
}
.contentSugerencias__initialC{ /*iciales de pais*/
    position: absolute;
    right: 8px;
}
/*fin de los estilos de las sugerencias*/



/*mostrar y ocultar sugerencias*/
.showSugerencias{ /*mostrar contenedor*/
    opacity: 1;
    visibility: visible;
    transition-duration: .2s;
}
.hideSugerencia{ /*ocultar sugeremcias*/
    opacity: 0;
    visibility: hidden;
    transition-duration: .2s;
}



/*mostrar mensaje de que no se encontraron sugerencias*/
.sinSgrContent{ /*contenedor*/
    display: flex;
    gap: 15px;
    padding: 15px;
    align-items: center;
}
.sinSgrContent__img{ /*imagen de advertencia*/
    width: 25px;
    height: 25px;
}
.sinSgrContent__p{ /*texto indicativo*/
    color: #f00;
    font-size: 1.2em;
    line-height: 1;
    white-space: pre-wrap;
}
.sinSgrContent__lastSearch{ /*texto de la ultima busqueda*/
    color: #06a106;
}
/*fin de mostrar mensaje de queno se encontraron sugerencias*/



/*skeleton screen*/
.contentSugerencias__skeletonScreen{ /*esqueleto del contenedor*/
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    padding-left: 8px;
    position: relative;
    animation: loading .8s infinite;
}
.contentSugerencias__img__skeletonScreen{ /*esqueleto de logo*/
    width: 25px;
    height: 25px;
    background-color: var(--colorTransparente);
}
.contentSugerencias__Contenttext__skeletonScreen{ /*contenedor del texto*/
    height: 25px;
    width: 60%;
    background-color: var(--colorTransparente);
}
.contentSugerencias__initialC__skeletonScreen{
    width: 25px;
    height: 25px;
    background-color: var(--colorTransparente);
    position: absolute;
    right: 8px;
}


@keyframes loading {
    0% { opacity: .5; }
    100% { opacity: 1; }
}
/*fin de skeleton screen*/



/*ocultar boton del campo de busqueda*/
.hideBtnDelInput{
    visibility: hidden;
    opacity: 0;
    transition-duration: .2s;
}
.inputSinRight{
    padding-right: 8px;
}
/*fin de ocultar boton del campo de busqueda*/