.warning-message {
	font-size: 0.8rem;
}

/* icons styles */

.icon {
	color: white;
	font-size: 1.5rem !important;
}

.icon2 {
	color: white;
	font-size: 2rem !important;
	transition: background 0.5s ease-in-out;
}

.icon2b {
	color: white;
	font-size: 1.3rem !important;
	transition: background 0.5s ease-in-out;
}

/* boxes styles */
.boxwh {
    height: auto; /* Ajuster pour occuper seulement l'espace nécessaire */
    width: auto; /* Ajuster pour occuper seulement l'espace nécessaire */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    position: fixed;
    bottom: 20px; /* Ajuster selon vos besoins */
    right: 20px; /* Ajuster selon vos besoins */
    gap: 10px;
    transition: all 1s ease-in-out;
    /* z-index: 1000; Assurez-vous que le z-index n'est pas trop élevé */
    pointer-events: none; /* Permettre aux clics de passer à travers */
    max-width: 80%; /* Limite la largeur maximale à 80% de l'écran */
    overflow: hidden; /* Masque le contenu qui dépasse de la boîte */
}

@media (max-width: 767px) {
    .boxwh {
        bottom: 10px; /* Ajuste la marge en bas pour les petits écrans */
        right: 10px; /* Ajuste la marge sur le côté pour les petits écrans */
    }
}
.box2 {
	display: none;
	background-color:rgb(31, 102, 168,0.6);
	padding: 10px;
	padding-left: 9px;
	padding-right: 10px;
	border-radius: 5px;
	transition: background 0.5s ease-in-out;
	z-index: 1000;
	position: relative;
	pointer-events: auto;
}

.box2:hover {
	background-color:rgb(21, 69, 113);
}

/* buttons style */

.button {
	background-color:rgba(105, 220, 101, 0.6);
	padding: 10px;
	padding-left: 13px;
	padding-right: 13px;
	border-radius: 5px;
	transition: background 0.5s ease-in-out;
	pointer-events: auto;
	border: transparent;
}

.button:hover {
	background-color: green;
}