.badge-custom-yellow span {
    background-color: #ffcc00 !important;
    /* Code couleur hexadécimal */
    color: #fff !important;
}

.badge-custom-green span {
    background-color: #28a745 !important;
    /* Code couleur hexadécimal */
    color: #fff !important;
}

.badge-custom-red span {
    background-color: #dc3545 !important;
    /* Code couleur hexadécimal */
    color: #fff !important;
}

.badge-custom-gray span {
    background-color: #6c757d !important;
    /* Code couleur hexadécimal */
    color: #fff !important;
}

.badge-custom-blue span {
    background-color: #548ec0 !important;
    /* Code couleur hexadécimal */
    color: #fff !important;
}

.badge-custom-position {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* public/css/filament-custom.css */
/* Style pour le texte du mode de paiement */
.modep {
    font-size: 14px;
}

/* Style pour les éléments SVG */
.modep svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.modep:hover svg {
    transform: scale(1.1);
    color: #dc3545;
    /* Agrandit l'icône au survol */
}

.badge svg {
    width: 18px;
    display: inline;
}

path[class^="department-"]:hover {
    fill: #ff6347;
    /* Couleur de survol */
    cursor: pointer;
}

.gsvg {
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
}

.carre {
    width: 15px;
    height: 15px;
    margin: 0px 5px 0px 15px;
}

/* Légende 0-25 */
.legend-0-25 {
    background-color: #fbbf24;
    /* Yellow-400 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
}

/* Légende 26-50 */
.legend-26-50 {
    background-color: #d97706;
    /* Yellow-600 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
}

/* Légende 51-75 */
.legend-51-75 {
    background-color: #4caf50;
    /* Green-400 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
}

/* Légende 76-100 */
.legend-76-100 {
    background-color: #2f855a;
    /* Green-600 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
}

/* Légende +100 */
.legend-100-plus {
    background-color: #3182ce;
    /* Blue-500 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 8px;
}

#carte-svg {
    /* float: left; */
    width: 100%;
    max-width: 490px;
    /* height: 100%; */
    max-height: 500px;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
}

g:hover {
    fill: #28a745;
}

/* Ajouter un effet de survol pour les départements de la carte */
.svg-department {
    transition: all 0.2s ease-in-out;
    opacity: 0.8;
}

.svg-department:hover {
    opacity: 1;
    /* Réduire l'opacité lors du survol */
    stroke: #000;
    /* Changer la couleur du contour lors du survol */
    /* Agrandir légèrement l'élément (10%) */
    box-shadow: 12px rgba(0, 0, 0, 0.4);
    /* Ajouter une ombre portée */
}

/* Personnaliser la barre de défilement */
::-webkit-scrollbar {
    width: 6px;
    /* largeur de la barre de défilement verticale */
    height: 6px;
    /* hauteur de la barre de défilement horizontale */
}

/* Personnaliser le fond de la barre de défilement */
::-webkit-scrollbar-track {
    background: #3182ce0e;
    /* Couleur du fond de la barre de défilement */
    border-radius: 10px;
    /* Arrondir les coins du fond */
}

/* Personnaliser la partie "pouce" (la partie que l'on déplace) */
::-webkit-scrollbar-thumb {
    background: #3182ce0e;
    /* Couleur du pouce */
    border-radius: 10px;
    /* Arrondir les coins du pouce */
    transition: background 0.3s ease;
}

/* Changer la couleur du pouce au survol */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Couleur du pouce au survol */
}

/* Personnaliser la barre de défilement horizontale */
::-webkit-scrollbar-horizontal {
    height: 8px;
    /* Hauteur de la barre de défilement horizontale */
}

/* Personnaliser le fond de la barre de défilement horizontale */
::-webkit-scrollbar-track-horizontal {
    background: #f1f1f1;
}

/* Personnaliser le pouce de la barre de défilement horizontale */
::-webkit-scrollbar-thumb-horizontal {
    background: #888;
}

.bg-red-row {
    background-color: #fde2e2 !important;
    /* fond rouge clair */
    color: #b91c1c !important;
    /* texte rouge foncé */
}

.bg-green-abonnee {
    background-color: #edfde2 !important;
    /* fond rouge clair */
    color: #36b91c !important;
    /* texte rouge foncé */
}