# Classes CSS

NGSurvey fournit une large gamme de classes CSS qui peuvent être utilisées pour personnaliser entièrement la mise en page de vos formulaires.

Vous trouverez ci-dessous une liste de toutes les classes utilisées par ngSurvey pour afficher son interface utilisateur et que vous pouvez réutiliser pour la personnaliser.

**Enveloppes / conteneurs**

```css
/*
  Le corps du formulaire de Sondage, cette classe est directement attachée à 
  l'élément body html 
  */
  .ngs-survey-body {}
  
  /*
  Enveloppe qui contient la page du formulaire de Sondage
  */
  .ngs-survey__wrapper {}
  
```

**Contenu de la page**

```css
/*
  Conteneur de la page pour l'en-tête du Sondage / les questions / le pied de page 
  */
  .ngs-survey__page {}
  
  /*
  Appliqué si une langue RTL est sélectionnée par le Répondant 
  */
  .ngs-survey__page--rtl {}
  
  /*
  Contient le contenu de la page (questions ou message de remerciement(.ngs-survey__thanks-page-message))
  */
  .ngs-survey__page-content-container {}
  
  /*
  Formatage par défaut du message de remerciement 
  */
 .ngs-survey__thanks-page-message {}

  /*
  Défini si un en-tête est affiché sur le Sondage (par ex. : en-tête pour la sélection de la langue)
  */
  .ngs-survey__page-content-container--header {}
  
  /*
  Défini si l'en-tête est masqué sur le Sondage (par ex. : en-tête pour la sélection de la langue)
  */
  .ngs-survey__page-content-container--no-header {}
  
  /*
  Conteneur de pied de page qui contient les boutons, la progression, etc.
  */
  .ngs-survey__page-footer {}
  
  /*
  Conteneur de pied de page pour les actions (boutons)
  */
  .ngs-survey__page-footer-actions-container {}
  
  /*
  Boutons du pied de page (envoyer, sauvegarder la progression, etc.)
  */
  .ngs-survey__page-footer-actions-container button {}
  
  /*
  Enveloppe autour de la barre de progression ou de la page courante / total des pages du Sondage
  */
  .ngs-survey__page-footer-progress-wrapper {}
  
  
  /*
  L'en-tête de page permet de définir l'arrière-plan supérieur qui se situe 
  derrière la page du formulaire contenant les questions
  */
  .ngs-survey__page-header {}
  
  /*
  Contrôle select déroulant des langues si le multi-langues est activé 
  */
  .ngs-header__language-select-wrapper {}
  
```

**Boutons**

```css
/*
  Boutons des formulaires tels qu'envoyer, sauvegarder la progression, etc. 
  Remarque : cela n'affecte pas les boutons basés sur la sélection qui sont utilisés 
  dans le formulaire de Sondage comme réponses
  */
  .ngs-survey__button {}
  
  .ngs-survey__button:hover:enabled {}
  
  .ngs-survey__button:active:enabled {}
  
  .ngs-survey__button:disabled {}  
```

**Navigateur de pages**

```css
/*
  Navigateur de page supérieur si la navigation par page a
  été activée
  */
  .ngs-survey__page-navigator {}
  
  /*
  Appliqué aux onglets du navigateur qui 
  ont des réponses invalides sur leur page
  */
  .ngs-survey__page-navigator--invalid {}
  
  /*
  Appliqué aux onglets du navigateur qui
  sont actuellement désactivés en raison du Skip Logic / Branchement conditionnel 
  règles
  */
  .ngs-survey__page-navigator--disabled {}
  
  /*
  Conteneur des onglets du navigateur de pages
  */
  .ngs-survey__page-navigator .mat-tab-links {}
  
  /*
  Onglet du navigateur de pages
  */
  .ngs-survey__page-navigator .mat-tab-link {}
  
```

**Barre de progression**

```css
/*
  Conteneur de progression 
  */
  .ngs-survey__progress {}
  
  /*
  Texte du conteneur de progression si la progression
  est affichée en texte (par ex. : numéros de page)
  */
  .ngs-survey__progress-text {}
  
  /*
  Conteneur de la barre de progression
  */
  .ngs-survey__progress-bar {}
  
  /*
  Progression réelle de la barre de progression
  */
  .ngs-survey__progress-bar span {}
  
  /*
  Conteneur du pourcentage de progression
  */
  .ngs-survey__progress-bar-percentage {}
  
  /*
  Étiquette de texte du conteneur du pourcentage de progression
  */
  .ngs-survey__progress-bar-percentage-label {}
    
```

**Questions**

```css
 /*
  Conteneur de la question et de ses réponses
  */
  .ngs-question__container {}
  
  /*
  Conteneur de question qui contient toutes les réponses
  Notez que ngSurvey ajoute aussi automatiquement le type de question
  comme classe appelée par exemple pour une question à sélection unique le 
  sélecteur serait "ngs-question ngs-question-single" ou
  "ngs-question ngs-question-multi" pour les sélections multiples.
  */
  .ngs-question {}
  
  /*
  Type de rendu de la question. Indiquez-nous 
  comment la question est rendue afin que nous puissions styliser 
  la question en fonction de son type de rendu actuel. 
  X dans le nom de la classe sera remplacé par l'une des valeurs de 
  rendu suivantes.

  Standard = 0      // Active le rendu standard, par ex. lorsque un utilisateur remplit un formulaire
  DesignTime = 1    // Active le mode design, par ex. dans le constructeur de formulaire 
  EditDefaults = 2, // Active l'édition des valeurs par défaut des réponses
  ReadOnly = 3,			// Active le rendu en mode lecture seule lorsque un utilisateur remplit le formulaire (devrait être remplacé par web print ?)
  Disabled = 4, 		// Active le mode désactivé pour rendre le contrôle avec des éléments désactivés
  Edit = 5, 				// Active le mode édition sur les contrôles, par ex. lorsqu'un administrateur édite les réponses d'un utilisateur
  WebPrint = 6,			// Active l'impression web
  Preview = 7,			// Active le mode aperçu,
  Static = 8,       // Les éléments sont rendus statiquement depuis des collections
  Add = 9,					// Active l'ajout lorsqu'un administrateur ajoute un Répondant
  EditStyle = 10    // Édition du style du formulaire */
 .ngs-question--render-modeX {}

  /*
   Aide pouvant être assignée depuis la page de paramètres de chaque question 
   pour centrer le texte de la question
  */
  .ngs-question--centered {}
  
  /*
  Appliqué si une réponse de la question est invalide ou si 
  la question est requise et n'a pas été répondue
  */
  .ngs-question--invalid {}
  
  
  /*
  Conteneur de réponses qui ne sera appliqué que si la 
  question est configurée pour afficher les réponses horizontalement
  */
  .ngs-question__rows {}
  
  /*
  Conteneur de réponses qui ne sera appliqué que si la 
  question est configurée pour afficher les réponses horizontalement
  La classe wrapped peut être utilisée par exemple dans une media query distincte
  pour envelopper le contenu du flex box si 
  l'écran n'est pas assez grand pour afficher toutes les réponses en 
  une seule ligne
  */
  .ngs-question__rows--wrapped {}
  
  /*
  Utilisé si les réponses sont rendues horizontalement et si 
  l'espacement des réponses doit être uniforme sur l'écran
  */
  .ngs-question__rows-items--grown {}
  
  /*
  Enveloppe autour de la ligne de réponses de la question
  */
  .ngs-question__answer-wrapper {}
  
  /*
  Conteneur de la ligne de réponses si rendu en mode horizontal
  */
  .ngs-question__row {}
  
  /*
  Conteneur du "texte" de la question
  */
  .ngs-question__header {}
  
  /*
  Le "texte" de la question 
  */
  .ngs-question__header p {}
  
```

**Questions matricielles**

```css
/*
  Conteneur de la question matricielle pour ses lignes et colonnes
  */
  .ngs-matrix-question {}
  
  /*
  En-tête de la question matricielle pour le texte de la question et le texte des colonnes
  */
  .ngs-matrix-question__header {}
  
  /*
  Utilisé pour la description de l'en-tête matriciel
  */
  .ngs-matrix-question__header-label-cell {}
  
  /*
  En-tête de colonne matricielle
  */
  .ngs-matrix-question__header-column-cell {}
  
  /*
  Conteneur des lignes matricielles
  */
  .ngs-matrix-question__rows {}
  
  /*
  Conteneur d'une seule ligne qui contient le texte de la question enfant et ses réponses
  */
  .ngs-matrix-question__row {}
  
  /*
  Ligne alternative
  */
  .ngs-matrix-question__row--odd {}
  
  /*
  Ligne invalide si des réponses de la question enfant sont invalides
  */
  .ngs-matrix-question__row--invalid {}
  
  /*
  Texte de la question enfant de la ligne
  */
  .ngs-matrix-question__label-cell {}
  
  /*
  Réponses de la question enfant de la ligne
  */
  .ngs-matrix-question__answer-cell {}
  
  /*
  En-tête fixe, utilisé pour les questions matricielles qui
  ont été réduites
  */
  .ngs-question__header-stick {}
  
  /*
  Conteneur d'expansion qui permet au Répondant
  de réduire ou d'agrandir une matrice lorsqu'elle est exécutée
  à des résolutions plus faibles
  */
  .ngs-question__expandable-action-container {}
    
```

**Sections de questions**

```css
/*
  Section de question individuelle qui contient les réponses de la question
  */
  .ngs-question__section {}
  
  /*
  Appliqué si une réponse de la section est invalide
  */
  .ngs-question__section--invalid {}
  
  /*
  Appliqué lorsqu'une réponse basée sur une sélection a été
  sélectionnée au sein de la section de question. 
  */
  .ngs-question__section--selected {}
  
  /*
  Conteneur pour la question de la section. Contient 
  la question réelle (radio, case à cocher, matrice, etc.)
  */
  .ngs-question__section-wrapper-js {}
  
  /*
  Conteneur des icônes d'action de la section (ajouter / supprimer)
  */
  .ngs-question__section-toolbar {}
  
  /*
  icônes ajouter / supprimer pour gérer une section
  */
  .ngs-question__section-icon {}
  
  .ngs-question__section-icon:hover:not(.off) {}
  
  /*
  Appliqué si les limites de la section ont été atteintes
  */
  .ngs-question__section-icon--off {}
    
```

**Réponses**

```css
/*
  Conteneur pour le type de réponse. 
  Remarque : ngSurvey ajoute automatiquement la classe suivante pour 
  identifier les réponses auxquelles un rating / poids est attribué 
  par exemple : ngs-question__answer rating-weight-3 
  si un poids de rating de 3 a été attribué à la réponse
  */
  .ngs-question__answer {}
  
  /*
  Enveloppe de l'image de la réponse
  */
  .ngs-question__answer-image-wrapper {}
  
  /*
  Image qui est affichée à la place du libellé
  si une image a été sélectionnée comme réponse
  */
  .ngs-question__answer-image {}
  
  
  /*
  Appliqué si la réponse image n'est pas sélectionnée
  */
  .ngs-question__answer-image--unselected {}
  
  .ngs-question__answer-image--unselected:hover {}
  
  /*
  Appliqué si la réponse image a été sélectionnée
  */
  .ngs-question__answer-image--selected {}
  
  /*
  Appliqué si l'image de la réponse est désactivée et 
  ne peut pas être sélectionnée
  */
  .ngs-question__answer-image--disabled {}
  
  /*
  Type liste déroulante de réponse
  */
  .ngs-question__answer-select {}
  
  /*
  Réponses basées sur des champs
  */
  .ngs-question__answer-field {}
  
  .ngs-question__answer-field:focus {}
  
  /*
  Classes ajoutées par Angular si le champ est invalide et touché
  */
  .ngs-question__answer-field.ng-invalid.ng-touched {}
  
  .ngs-question__answer-field.ng-invalid.ng-touched:focus {}
  
  /*
  Appliqué si le champ est masqué
  */
  .ngs-question__answer-field--transparent {}
  
  /*
  Si les réponses ont été configurées pour être rendues
  comme bouton au lieu de cases à cocher / boutons radio
  */
  .ngs-question__answer-selection-button {}
  
  .ngs-question__answer-selection-button:hover:not(.ngs-question__answer-selection-button--disabled):not(.ngs-question__answer-selection-button--selected) {}
  
  .ngs-question__answer-selection-button--disabled {}
  
  .ngs-question__answer-selection-button--selected {}
  
  /*
  Conteneur pour l'évaluation par étoiles
  */
  .ngs-question__answer-star-graphic {}
  
  /*
  Étoile SVG, c'est la méthode par défaut pour générer des étoiles
  */
  .ngs-question__answer-star-graphic-vector {}
  
  /*
  Appliqué si une image a été choisie pour la réponse
  */
  .ngs-question__answer-star-graphic-image {}
  
  /*
  Appliqué si l'étoile a été sélectionnée
  */
  .ngs-question__answer-star-graphic--shining {}  
```

**Libellés des réponses**

```css
  /*
  Élément label de la réponse
  */
  .ngs-question__answer-label {}

  /*
  Texte du label de la réponse
  */
  .ngs-question__answer-label-text {}

  /*
  Texte du label de la réponse rendu dans un span 
  si aucun HTML n'a été défini comme texte
  */
  .ngs-question__answer-label-text--plain {}

  /*
  Texte du label de la réponse rendu dans un div 
  si du HTML a été défini comme texte
  */
  .ngs-question__answer-label-text--rich {}

  /*
  Appliqué si le texte du label est vide
  */
  .ngs-question__answer-label--unset {}

  /*
  Appliqué si le texte du label est vide
  */
  .ngs-question__answer-label--unset {}

  /*
  Appliqué si le label est une image
  */
  .ngs-question__answer-label--imaged {}

  /*
  Appliqué si le label est rendu à l'intérieur d'une cellule matricielle
  */
  .ngs-question__answer-label--in-cell {}  
```

**Curseurs**

```css
  /*
  Curseur horizontal utilisé pour l'évaluation
  */
  .mat-slider-horizontal {}
  
  /*
  Pointeurs du curseur
  */
  .mat-accent .mat-slider-thumb,
  .mat-accent .mat-slider-thumb-label,
  .mat-accent .mat-slider-track-fill {}

```

**Classement (Ranking)**

```css
 /*
  Conteneur en boîte contenant la ligne de classement
  */
  .ngs-question__answer-ranking-box {}
  
  /*
  Ordre du classement
  */
  .ngs-question__answer-ranking-box-order {}
  
  /*
  Libellé du classement
  */
  .ngs-question__answer-ranking-label {}
   
```

**Somme constante**

```css
  /*
  Enveloppe de la barre de progression somme constante
  */
  .ngs-question__answer-constant-sum-progress-wrapper {}
  
```

**Question NPS**

```css
/*
  Conteneur de la question nps
  */
  .ngs-question-nps {}
    
  
  /*
  En-tête contenant les textes Not at all likely et Extremely likely
  */
  .ngs-question-nps__header {}
  
  /*
  Texte de l'en-tête à droite (likely)
  */
  .ngs-question-nps__header-likely {}
  
  /*
  Case de sélection de réponse NPS
  */
  .ngs-question-nps .ngs-question__answer-nps-selection {}
  
  /*
  Appliqué si la case de sélection NPS est désactivée
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--disabled {}
  
  /*
  Appliqué si la case de sélection NPS est sélectionnée
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--selected {}
  
  /*
  Désactive la case de sélection NPS si une réponse a été sélectionnée sur la question
  et que ce n'est pas cette réponse qui a été sélectionnée
  */
  .ngs-question-nps .ngs-question__section--selected .ngs-question__answer-nps-selection:not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  N'applique l'effet hover que si elle n'est pas désactivée ou déjà sélectionnée 
  */
  .ngs-question-nps .ngs-question__answer-nps-selection:hover:not(.ngs-question__answer-nps-selection--disabled):not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  Applique la classe en fonction de la valeur du score NPS
  */
  .ngs-question-nps .ngs-question__answer.rating-weight-0 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-1 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-2 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-3 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-4 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-5 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-6 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-7 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-8 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-9 .ngs-question__answer-nps-selection {}
  
  .ngs-question-nps .ngs-question__answer.rating-weight-10 .ngs-question__answer-nps-selection {}
  
  /*
  Classe d'aide ajoutée aux propriétés de la classe CSS de la question pour afficher 
  les réponses en mono-couleur  
  */
  .ngs-question-nps--monochrome .ngs-question__answer-nps-selection {}
  
  /*
  Cases de sélection NPS correspondant aux détracteurs (poids 0-6)
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--detractors {}
  
  /*
  Cases de sélection NPS correspondant aux passifs (poids 7-8)
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--passives {}
  
  /*
  Cases de sélection NPS correspondant aux promoteurs (poids 9-10)
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--promoters {}
    
```

**Question CEST / CSAT**

```css
  /*
  Conteneur des réponses
  */
  .ngs-question-ces .ngs-question__answer,
  .ngs-question-csat .ngs-question__answer {}
  
  /*
  Conteneur des lignes de réponses, par défaut une media query
  a été configurée pour passer de colonne à ligne
  en fonction des résolutions de l'utilisateur. voir les valeurs ci-dessous
  */
  .ngs-question-ces .ngs-question__rows--wrapped,
  .ngs-question-csat .ngs-question__rows--wrapped {
    /*  Basculer en mode colonne et afficher toutes les réponses par colonne    
  §    flex-flow: column; 
      flex-wrap: nowrap; 
  */
  }
  
  /*
  Basculer en mode ligne et afficher toutes les réponses sur une ligne
  */
  @media screen and (min-width: 960px) {
  
    .ngs-question-ces .ngs-question__rows--wrapped,
    .ngs-question-csat .ngs-question__rows--wrapped {
      flex-flow: row;
      flex-wrap: wrap;
    }
  }
  
  /*
  Bouton de sélection de réponse
  */
  .ngs-question-ces .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-selection-button {}
  
  
  /*
  Appliqué aux boutons de sélection des questions ces/csat qui ne sont pas sélectionnés
  */
  .ngs-question-ces .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-ces.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),
  .ngs-question-csat.ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected) {}
  
  
  /*
  Aide monochrome qui peut être appliquée depuis le nom de classe CSS des paramètres de la question
  */
  .ngs-question-ces--monochrome .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat--monochrome .ngs-question__answer .ngs-question__answer-selection-button {}
  
  /*
  Bouton de sélection de réponse de question CES appliqué en fonction de leur valeur de poids
  */
  .ngs-question-ces .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-6 .ngs-question__answer-selection-button {}
  
  .ngs-question-ces .ngs-question__answer.rating-weight-7 .ngs-question__answer-selection-button {}
  
  /*
  Bouton de sélection de réponse de question CSAT appliqué en fonction de leur valeur de poids
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  /*
  Image de réponse CSAT non sélectionnée à l'intérieur d'une question où 
  une réponse a été sélectionnée. Utilisée pour "éteindre" les réponses
  qui n'ont pas été sélectionnées 
  */
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected),
  
  /*
  Image de réponse CSAT non sélectionnée à l'intérieur d'une question basée sur des images CSAT où 
  une réponse a été sélectionnée. Utilisée pour "éteindre" les réponses
  qui n'ont pas été sélectionnées 
  */
  .ngs-question-csat-image .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected) {}
  
  /*
  Image de réponse pour question csat / csat image
  */
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-image,
  .ngs-question-csat-image .ngs-question__answer .ngs-question__answer-image {}
  
  /*
  Le CSAT par défaut utilise seulement 3 ou 2 images (sourires, pouces). Les classes sont appliquées en fonction de leur
  poids de rating
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image,
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image {}
  
  
  /*
  Images CSAT sélectionnées. Les classes sont appliquées en fonction de leur
  poids de rating
  */
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected,
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-image--selected {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-image--selected {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-image--selected {}
  
  /*
  Boutons de sélection CSAT sélectionnés. Les classes sont appliquées en fonction de leur
  poids de rating
  */
  .ngs-question-csat-image .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat-image .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button {}
  
  .ngs-question-csat .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button,
  
```

**Erreurs**

```css
  /*
  Conteneur de la boîte de message d'erreur
  */
  .ngs-survey__error-message {}
  
  /*
  Classe utilisée pour afficher le petit triangle en
  bas du message d'erreur
  */
  .ngs-survey__error-message--bottom:before {}
  
  /*
  
  Classe utilisée pour afficher le petit triangle en
  haut du message d'erreur
  */
  .ngs-survey__error-message--top:before {}
    
```

**Sécurité**

```css
  /*
  Écran d'autorisation Auth0
  */
  .ngs-survey__auth0-authorize {}    
```

**Google Material** 

Les classes suivantes remplaceront le composant Google Material par défaut utilisé dans les formulaires de ngSurvey. La liste n'est pas exhaustive car elle ne liste que celles qui sont remplacées par ngSurvey ; vous pouvez bien sûr également remplacer n'importe quelle classe de composant material standard non listée ci-dessous

```css
  /*
  Conteneur externe de la réponse case à cocher
  */
  .ngs-survey .mat-checkbox-layout {}
  
  /*
  Définit le contenu de la réponse basée sur la case à cocher
  */
  .ngs-survey .mat-checkbox-inner-container {}
  
  /*
  Fond du conteneur de la case à cocher désactivée
  */
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {}
  
  /*
  Définit le conteneur du cercle interne du bouton radio
  */
  .ngs-survey .mat-radio-inner-circle {}
  
  /*
  Définit le conteneur du cercle externe du bouton radio
  et le bouton sélectionné doit être défini à l'aide de background-color et border-color
  */
  .ngs-survey .mat-radio-outer-circle {}
  
  /*
  Définit le cercle externe "coché" du bouton radio qui n'est pas désactivé
  */
  .ngs-survey .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled) {}
  
  /*
  Définit le cercle interne "coché" du bouton radio qui n'est pas désactivé
  */
  .ngs-survey .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled) {}
  
  /*
  Définit la flèche de sélection cochée de la case à cocher "checked"
  */
  .ngs-survey .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),
  .ngs-survey .mat-checkbox-indeterminate.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled) {}
  
  
  /*
  Cercle externe du bouton radio désactivé
  */
  .ngs-survey .mat-radio-disabled .mat-radio-outer-circle {}
  
  /*
  Cercle interne du bouton radio désactivé
  */
  .ngs-survey .mat-radio-disabled .mat-radio-inner-circle,
  .ngs-survey .mat-radio-disabled .mat-radio-ripple .mat-ripple-element {}
  
  
  /*
  Barre de progression Material utilisée pour les totaux somme constante
  */
  .ngs-survey .mat-progress-overflow .mat-progress-bar-fill::after {}
  
  /*
  Barre de progression Material utilisée pour les totaux somme constante
  */
  .ngs-survey .mat-progress-bar-fill::after {}
  
  .ngs-survey .mat-progress-bar-buffer {}
  
  .ngs-survey .mat-progress-bar-background {}  
```

<br>