/* secuforoauth-style.css */

.secuforoauth-providers-grid,
.secuforoauth-active-providers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.secuforoauth-provider-item {
    text-align: center;
    width: 120px;
}

.secuforoauth-provider-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #ddd;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.secuforoauth-provider-item:hover .secuforoauth-provider-image {
    transform: scale(1.05);
    border-color: #0073aa;
}

.secuforoauth-provider-item p {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.secuforoauth-provider-picture {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

/* secuforoauth-style.css */

/* Styles pour le conteneur du formulaire */
/* secuforoauth-style.css */

/* Styles pour le conteneur du formulaire */
#secuforoauth-provider-register {
    max-width: 600px; /* Largeur maximale du formulaire */
    margin: 0 auto; /* Centrer le formulaire */
    padding: 20px; /* Espacement interne */
    background-color: #f9f9f9; /* Couleur de fond */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre */
}

/* Styles pour l'en-tête */
.secuforoauth-header {
    text-align: center; /* Centre le texte et l'image */
    margin-bottom: 20px; /* Espacement en bas */
}

/* Styles pour l'image du fournisseur */
.secuforoauth-provider-picture {
    max-width: 100%; /* Assurer que l'image ne déborde pas */
    height: auto; /* Conserver les proportions de l'image */
}

/* Styles pour les étiquettes */
label {
    font-weight: bold; /* Mettre en gras les étiquettes */
    display: block; /* Occuper toute la largeur */
    margin-bottom: 5px; /* Espacement en bas */
}

/* Styles pour les champs de saisie */
.secuforoauth-input {
    width: 100%; /* Largeur à 100% */
    padding: 10px; /* Espacement interne */
    margin-bottom: 15px; /* Espacement en bas */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de police */
    transition: border-color 0.3s; /* Transition pour la bordure */
}

/* Changements de style au focus */
.secuforoauth-input:focus {
    border-color: #0073aa; /* Couleur de la bordure au focus */
    outline: none; /* Retirer l'outline par défaut */
}

/* Styles pour le bouton */
.secuforoauth-button {
    background-color: #0073aa; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    padding: 10px 15px; /* Espacement interne */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    font-size: 16px; /* Taille de police */
    transition: background-color 0.3s; /* Transition pour le bouton */
}

/* Changements de style au hover */
.secuforoauth-button:hover {
    background-color: #005f8c; /* Couleur au survol */
}




/* Styles pour le conteneur principal */
/* Styles pour le conteneur principal */
.secuforoauth-flex-container {
    display: flex; /* Utiliser flexbox pour la mise en page */
    justify-content: space-between; /* Espacement entre les formulaires */
    margin: 20px 0; /* Espacement vertical */
}

/* Styles pour le formulaire de configuration du fournisseur */
.secuforoauth_provider_config {
    flex: 1; /* Occuper une portion égale de l'espace */
    margin-right: 20px; /* Espacement à droite pour le formulaire de mappage */
}

/* Styles pour le formulaire de configuration du mappage */
.secuforoauth_configure_mappage_provider {
    flex: 1; /* Occuper une portion égale de l'espace */
    background-color: #f9f9f9; /* Couleur de fond */
    padding: 20px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre */
}

/* Styles pour les champs de saisie */
.secuforoauth-input {
    width: 100%; /* Largeur à 100% */
    padding: 10px; /* Espacement interne */
    margin-bottom: 15px; /* Espacement en bas */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de police */
    transition: border-color 0.3s; /* Transition pour la bordure */
}

/* Changements de style au focus */
.secuforoauth-input:focus {
    border-color: #0073aa; /* Couleur de la bordure au focus */
    outline: none; /* Retirer l'outline par défaut */
}

/* Styles pour les boutons */
.secuforoauth-button {
    background-color: #0073aa; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    font-size: 16px; /* Taille de police */
    transition: background-color 0.3s; /* Transition pour le changement de couleur */
}

/* Changements de style au hover */
.secuforoauth-button:hover {
    background-color: #005f8d; /* Couleur de fond au hover */
}

/* Styles pour le bouton supprimer du mappage */
.secuforoauth-remove-mappage {
    background-color: #dc3545; /* Couleur rouge */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 5px 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
}

/* Changements de style au hover pour le bouton supprimer */
.secuforoauth-remove-mappage:hover {
    background-color: #c82333; /* Couleur rouge plus foncé au hover */
}

/* Styles pour le conteneur de la liste de mappage */
#secuforoauth_mappage_list {
    margin-top: 20px; /* Espacement en haut */
}

/* Styles pour chaque élément de mappage */
.secuforoauth_mappage_item {
    display: flex; /* Utiliser flexbox pour l'alignement */
    align-items: center; /* Centrer verticalement */
    margin-bottom: 10px; /* Espacement en bas */
}

/* Styles pour les titres */
.secuforoauth-title {
    font-size: 24px; /* Taille de police */
    margin-bottom: 10px; /* Espacement en bas */
    color: #0073aa; /* Couleur spécifique pour les titres secuforoauth */
    font-weight: bold; /* Mettre le texte en gras */
}

/* Styles pour les paragraphes */
.secuforoauth-paragraph {
    font-size: 16px; /* Taille de police */
    margin: 10px 0; /* Espacement vertical */
    color: #333; /* Couleur de texte plus sombre pour la lisibilité */
}

/* Styles pour les labels */
.secuforoauth-label {
    font-weight: bold; /* Mettre le texte en gras */
    margin-bottom: 5px; /* Espacement en bas */
    display: block; /* Afficher en bloc pour un bon espacement */
}

/* Styles pour le shortcode affiché */
#secuforoauth_provider_shortcode {
    margin-top: 20px; /* Espacement en haut */
    padding: 10px; /* Espacement interne */
    background-color: #f1f1f1; /* Couleur de fond claire */
    border-radius: 5px; /* Coins arrondis */
    border: 1px solid #ddd; /* Bordure grise */
}

/* Styles pour le bouton Ajouter un nouveau clé/valeur */
.secuforoauth-add-mappage {
    background-color: #28a745; /* Couleur verte */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    font-size: 16px; /* Taille de police */
    transition: background-color 0.3s; /* Transition pour le changement de couleur */
}

/* Changements de style au hover pour le bouton Ajouter */
.secuforoauth-add-mappage:hover {
    background-color: #218838; /* Couleur plus foncée au hover */
}

/* Styles pour le bouton Supprimer le fournisseur */
.secuforoauth-delete-provider {
    background-color: #dc3545; /* Couleur rouge */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    font-size: 16px; /* Taille de police */
    transition: background-color 0.3s; /* Transition pour le changement de couleur */
}

/* Changements de style au hover pour le bouton Supprimer */
.secuforoauth-delete-provider:hover {
    background-color: #c82333; /* Couleur rouge plus foncé au hover */
}

/* Styles pour la documentation technique */

.secuforoauth_documentation p{
    text-align: left; /* Centrer le texte */
}

.secuforoauth_documentation h1 {
    text-align: left; /* Centrer le titre */
    color: #0073aa; /* Couleur spécifique pour les titres secuforoauth */
    font-weight: bold; /* Mettre le texte en gras */

}