body {
    background-image: url('/assets/images/index/dofus-photo-1415381.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
form {
    display: flex;
    align-items: center;
    
}
label {
    margin-right: 10px;
}
input[type="text"] {
    margin-top: -130px; /* Réduisez la valeur du margin-top pour déplacer le champ de recherche vers le haut */
    padding: 5px;
    background-color: #333;
    color: #fff;
    border: 3px solid #4e4d4d;
}


input[type="text"]:focus {
    outline: none;  
}

.search-container {
    background: url('/assets/images/index/banner-home.jpg') no-repeat center top; /* Arrière-plan avec votre image */
    background-size: 100% 100%; /* L'image couvrira toute la taille du conteneur */ 
    padding: 50px;
    text-align: center;
    position: relative;
}
h1::before {
    content: "LISTE DES OBJETS ET TAUX DE DROP"; /* Texte à afficher */
    font-family: "Roboto";
    display: block;
    background: url('/assets/images/index/bg-btn-monocompte.png') no-repeat center top; /* Image de fond derrière le titre */
    background-size: 100%; /* Ajuster la taille de l'image automatiquement */
    display: block;
    width: 416px; /* Largeur de l'image */
    height: 310px; /* Hauteur de l'image */
    margin: 0 auto; /* Centrer horizontalement */
    color: #000000; /* Couleur du texte (par exemple, rouge) */
    font-size: 18px; /* Taille de police du texte */
    padding: 180px 0 0 0; /* Augmentez la valeur de padding-top pour déplacer le texte vers le bas */
    text-align: center; /* Centrer le texte horizontalement */
}

form {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrer le contenu du formulaire horizontalement */
    
}
button[type="submit"] {
    background: url('/assets/images/index/Dropviewer.png') no-repeat;
    background-size: 30px 30px; /* Personnalisez la taille de l'image */
    width: 30px; /* Personnalisez la largeur du bouton */
    height: 30px; /* Personnalisez la hauteur du bouton */
    border: none;
    cursor: pointer; 
    margin-top: -130px; /* Réduisez la valeur du margin-top pour déplacer le champ de recherche vers le haut */
  
}
.category-icon {
    width: 24px; /* Largeur de l'icône */
    height: 24px; /* Hauteur de l'icône */
    background-size: cover; /* Ajuster la taille de l'icône */
    margin-right: 10px; /* Espacement entre l'icône et le nom de la catégorie */
}.category-name {
    font-size: 16px; /* Taille de police du nom de catégorie */
    color: #333; /* Couleur du texte du nom de catégorie */
}.categories-list {
    list-style: none;
    padding: 0;
}

/* Style pour chaque élément de catégorie */
.category {
    display: flex;
    align-items: center;
}
/* Style pour la tooltip */
.tooltip {
    position: absolute;
    display: none; /* Masquer par défaut */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    /* Autres styles de positionnement, comme left, top, z-index, etc. */
}

/* Afficher la tooltip lorsque l'élément est survolé */
.category-name:hover + .tooltip {
    display: block;
}