/* PLACE YOU CUSTOM STYLES IN THIS FILE */
a.carrousel-world:hover{
    text-decoration: none;
    color: #e08821;
}
.carrousel-world{
    color: white;
}

img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.scrollable-body::-webkit-scrollbar {
    width: 9px;
    /* Largeur de la barre de défilement */
}

.scrollable-body::-webkit-scrollbar-track {
    background-color: transparent;
}

.scrollable-body::-webkit-scrollbar-thumb {
    background-color: var(--system-color-gem-orange);
    /* Couleur du bouton de la barre de défilement */
    border-radius: 4px;
}

.scrollable-body::-webkit-scrollbar-thumb:hover {
    background-color: #b56d19;
    /* Couleur du bouton de la barre de défilement au survol */
}
div.Lightning-profil {
    width: 100%;
    display: block;
}
div.Lightning-profil {
    display: inline-block;
    border: 8px solid black;
    animation: lightning 0.3s infinite alternate, thunder 0.3s infinite alternate, colorChange 2s infinite forwards;
}
@keyframes lightning {
    0%,
    90%,
    100% {
        border-color: rgb(255 255 255 / 67%);; 
    }

    50%,
    95% {
        border-color: rgb(255 255 255 / 77%); 
    }
}

@keyframes thunder {
    0%,
    90%,
    100% {
        box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.062); 
    }

    50%,
    95% {
        box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.225); 
    }
}

@keyframes colorChange {
    100% {
        color: rgba(255, 255, 255, 0); 
        box-shadow: none; 
    }
}
/* Style de base de la case à cocher */
input[type="checkbox"] {
    appearance: none; /* Pour supprimer le style par défaut du navigateur */
    width: 20px; /* Largeur de la case à cocher */
    height: 20px; /* Hauteur de la case à cocher */
    background-color: white; /* Couleur de fond de la case à cocher */
    border: 2px solid black; /* Bordure de la case à cocher */
    border-radius: 3px; /* Arrondi des coins de la case à cocher */
    cursor: pointer; /* Curseur de la souris au survol */
    margin: 2px 0px 0px -25px;
}

/* Style de la case à cocher lorsqu'elle est cochée */
input[type="checkbox"]:checked::after {
    content: ''; /* Contenu vide nécessaire pour le pseudo-élément */
    display: block; /* Affichage en tant que bloc pour pouvoir définir les dimensions */
    width: 12px; /* Largeur du "coche" */
    height: 12px; /* Hauteur du "coche" */
    background-color: #e08821; /* Couleur de fond du "coche" */
    border-radius: 2px; /* Arrondi des coins du "coche" */
    margin: 2.5px 2px 2px 2.4px;; /* Marge à l'intérieur de la case à cocher */
}
input[type="radio"] {
    appearance: none; /* Pour supprimer le style par défaut du navigateur */
    width: 20px; /* Largeur de la case à cocher */
    height: 20px; /* Hauteur de la case à cocher */
    background-color: white; /* Couleur de fond de la case à cocher */
    border: 2px solid black; /* Bordure de la case à cocher */
    border-radius: 10px; /* Arrondi des coins de la case à cocher */
    cursor: pointer; /* Curseur de la souris au survol */
    /* margin: 2px 0px 0px -25px; */
}

/* Style de la case à cocher lorsqu'elle est cochée */
input[type="radio"]:checked::after {
    content: ''; /* Contenu vide nécessaire pour le pseudo-élément */
    display: block; /* Affichage en tant que bloc pour pouvoir définir les dimensions */
    width: 12px; /* Largeur du "coche" */
    height: 12px; /* Hauteur du "coche" */
    background-color: #e08821; /* Couleur de fond du "coche" */
    border-radius: 6px; /* Arrondi des coins du "coche" */
    margin: 2.5px 2px 2px 2.1px;; /* Marge à l'intérieur de la case à cocher */
}
/* Style du label lorsque l'input radio correspondant est cochée */
input[type="radio"]:checked ~ label, input[type="checkbox"]:checked ~ label {
    color: #e08821; /* Couleur du texte lorsque l'input radio est cochée */
}