.swal-wide{
    width:700px !important;
}
.custom-option {
    background-color: #20c997;
    color: #fff;
}
.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-locked-wrapper {
    position: relative; /* Nécessaire pour le positionnement de l'infobulle */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Largeur de la boîte */
    height: 40px; /* Hauteur de la boîte */
    background-color: #ff0000; /* Couleur de fond */
    border-radius: 10px; /* Coins arrondis */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Effet hover */
}

.icon-locked-wrapper i {
    color: white; /* Couleur de l'icône */
    font-size: 20px; /* Taille de l'icône */
}

.icon-locked-wrapper:hover {
    background-color: #ff4d4d; /* Changer la couleur de fond au survol */
    transform: scale(1.1); /* Effet d'agrandissement */
}

/* Style de l'infobulle */
.icon-locked-wrapper::after {
    content: attr(data-tooltip); /* Récupère le texte depuis l'attribut data-tooltip */
    position: absolute;
    top: 50%; /* Centrer verticalement par rapport à l'icône */
    right: 105%; /* Positionne l'infobulle à gauche de l'icône */
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    width: 200px; /* Largeur fixe de l'infobulle */
    text-align: center; /* Centrer le texte à l'intérieur de l'infobulle */
    white-space: normal; /* Permettre le retour à la ligne */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-size: 12px;
    z-index: 10;
}

.icon-locked-wrapper:hover::after {
    opacity: 1;
}