.documentation {
    display: inline-flex;
    width: 75%;
    font-size: 13px;
    color: var(--blue-gray-800);
}

.documentation-content {
    /* flex-grow: 2; */
    width: calc(66% - 75px);
    height: 73vh;
    margin-right: 75px;
    overflow: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.documentation-content::-webkit-scrollbar {
    display: none;
}

.documentation-content-title {
    color: var(--primary-900);
}

.documentation-content hr {
    margin: 18px 0px 18px 0px;
}

/* Start of class added by steve for styling of dotlists in documentation-components.php */

/* Style for documentation lists */

/* Cible les listes à l'intérieur de la section .profile clearfix */
.profile.clearfix .documentation-list {
    /* list-style-type: disc; */ /* Utiliser des puces pour les points */
    padding-left: 20px;    /* Ajouter une indentation à gauche */
    margin-bottom: 15px;   /* Ajouter un espace en dessous de la liste */
}

/* Style pour chaque élément de la liste à l'intérieur de la section .profile clearfix */
.profile.clearfix .documentation-list-item {
    list-style-type: disc; /* Utiliser des puces pour les points */
    margin-bottom: 5px;    /* Espace entre chaque élément de la liste */
    font-size: 1em;        /* Assurer une taille de police cohérente */
    line-height: 1.5em;    /* Améliorer la lisibilité avec la hauteur de ligne */
    color: #000;           /* Définir une couleur de texte standard */
}

/* Style for the back button inside the page header */
#extrait-bouton-return .btn {
    background-color: steelblue; /* Couleur de fond steelblue */
    color: white; /* Couleur du texte en blanc */
    padding: 10px 20px; /* Ajouter de l'espace autour du texte du bouton */
    border: none; /* Supprimer les bordures par défaut */
    border-radius: 5px; /* Arrondir les coins du bouton */
    text-decoration: none; /* Supprimer le soulignement du lien */
    display: block; /* Assurer que le bouton se comporte comme un bloc */
    margin-bottom: 20px !important; /* Ajouter de l'espace en dessous du bouton */
    font-size: 14px; /* Taille de la police */
    cursor: pointer; /* Changer le curseur en pointeur au survol */
}

#extrait-bouton-return .btn:hover {
    background-color: royalblue; /* Couleur de fond royalblue au survol */
}
  
/* End of class added by steve for styling of dotlists in documentation-components.php */

/* .anchors {
    flex-grow: 1;
} */

.anchors li {
    list-style-type: none;
}

.anchors a {
    color: var(--blue-gray-600);
    margin-left: 14px;
}

a.anchor-active {
    color: var(--primary-900);
    margin-left: 0;
}

.anchors-title {
    color: var(--black);
    font-weight: 500;
}

.anchor-item {
    margin: 5px 0px 5px 0px;
}

.documentation h4 {
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--black);
}

/* .documentation p {
    font-size: 13px;
    color: var(--blue-gray-800);
} */

.summary li a {
    font-size: 13px;
    color: var(--blue-gray-800);
}

/*.summary li:first-of-type {
    font-size: 15px;
    color: var(--black);
} -> créer une classe */

.bar_tabs {
    display: inline-block;
    width: calc(25% - 119px);
    vertical-align: top;
    margin-left: 28px;
    margin-right: 75px;
    padding-left: 16px;
    font-size: 13px;
    border-left: 2px solid var(--blue-gray-100);
}

.bar_tabs li {
    list-style-type: none;
    margin: 9px 0px 9px 0px;
}

.bar_tabs li a {
    color: var(--blue-gray-600);
}

/*li.active {
    list-style-type: inherit;
    color: var(--primary-900);
}*/

.bar_tabs li.active:before {
    margin-left: -25px;
    margin-right: 10px;
    content: "·";
    font-size: 60px;
    vertical-align: text-bottom;
    line-height: 20px;
    color: var(--primary-900);
}

li.active a {
    color: var(--primary-900);
}