CSS Classes

NGSurvey provides a wide range of CSS classes that can be used to fully customize the layout of your forms.

Below is a list of all classes used by ngSurvey to display its user interface and which you can re-use to customize it.

Wrappers / containers

/*
  The body of the survey form, this class is directly attached to 
  the html body element 
  */
  .ngs-survey-body {}
  
  /*
  Wrapper that holds the survey form page
  */
  .ngs-survey__wrapper {}
  

Page content

/*
  Page container for survey header / questions / footer 
  */
  .ngs-survey__page {}
  
  /*
  Applied if an RTL language is selected by the respondenb 
  */
  .ngs-survey__page--rtl {}
  
  /*
  Holds the page content (questions or thanks message(.ngs-survey__thanks-page-message))
  */
  .ngs-survey__page-content-container {}
  
  /*
  Default thank you message formatting 
  */
 .ngs-survey__thanks-page-message {}

  /*
  Set if a header is displayed on the survey (eg: header for language selection)
  */
  .ngs-survey__page-content-container--header {}
  
  /*
  Set if  header is hidden  on the survey (eg: header for language selection)
  */
  .ngs-survey__page-content-container--no-header {}
  
  /*
  Footer container that holds buttons, progress etc..
  */
  .ngs-survey__page-footer {}
  
  /*
  Footer container for actions (buttons)
  */
  .ngs-survey__page-footer-actions-container {}
  
  /*
  Footer container buttons (submit, save progress etc..)
  */
  .ngs-survey__page-footer-actions-container button {}
  
  /*
  Wrapper around the progress bar or current page / total page of the survey
  */
  .ngs-survey__page-footer-progress-wrapper {}
  
  
  /*
  The page header allows to set the top background that is located 
  behind the form page holding the questions
  */
  .ngs-survey__page-header {}
  
  /*
  Select control dropdown of languages if multi languages is enabled 
  */
  .ngs-header__language-select-wrapper {}
  

Buttons

/*
  Buttons of the forms like submit, save progress etc.. 
  Note: it doesnt affect selection based buttons that are used 
  inside the survey form as answers
  */
  .ngs-survey__button {}
  
  .ngs-survey__button:hover:enabled {}
  
  .ngs-survey__button:active:enabled {}
  
  .ngs-survey__button:disabled {}  

Page navigator

/*
  Top page navigator if page navigation has
  been enabled
  */
  .ngs-survey__page-navigator {}
  
  /*
  Applied to the tabs of the navigator that 
  have invalid answers on their page
  */
  .ngs-survey__page-navigator--invalid {}
  
  /*
  Applied to the tabs of the navigator that
  are currently disabled due to skip / branching 
  rules
  */
  .ngs-survey__page-navigator--disabled {}
  
  /*
  Container of the page navigator tabs
  */
  .ngs-survey__page-navigator .mat-tab-links {}
  
  /*
  Tab of the page navigator
  */
  .ngs-survey__page-navigator .mat-tab-link {}
  

Progress bar

/*
  Progress container 
  */
  .ngs-survey__progress {}
  
  /*
  Progress container text if progress
  is displayed as text (eg: page numbers)
  */
  .ngs-survey__progress-text {}
  
  /*
  Progress bar container
  */
  .ngs-survey__progress-bar {}
  
  /*
  Actual progress bar's progress
  */
  .ngs-survey__progress-bar span {}
  
  /*
  Pprogress percentage container
  */
  .ngs-survey__progress-bar-percentage {}
  
  /*
  Pprogress percentage container text label
  */
  .ngs-survey__progress-bar-percentage-label {}
    

Questions

 /*
  Container of the question and its answers
  */
  .ngs-question__container {}
  
  /*
  Question container that holds all the answers
  Note that ngSurvey adds also automatically the question
  type as class named eg for a single selection question the 
  selector would be "ngs-question ngs-question-single"  or
  "ngs-question ngs-question-multi" for multiple selections.
  */
  .ngs-question {}
  
  /*
  Rendering type of the question. Let us know 
  how the question is rendered and let us style our 
  question depending on its current rendering type. 
  X in the class name will replaced by one of the following 
  rendering value.

  Standard = 0      // Enable standard rendering eg: when a user takes a form
  DesignTime = 1    // Enable design time eg: in the form builder 
  EditDefaults = 2, // Eanble editing of answers default values
  ReadOnly = 3,			// Enable read only mode rendering when a user takes the form (should be replaced by web print ?)
  Disabled = 4, 		// Enable disable mode to render control with disabled items
  Edit = 5, 				// Enable edit mode on controls eg: when an admin edits user's answers
  WebPrint = 6,			// Enable web printing
  Preview = 7,			// Enable previewing mode,
  Static = 8,       // Items are rendered statically from collections
  Add = 9,					// Enable add when a admin adds a respondent
  EditStyle = 10    // Editing of form style */
 .ngs-question--render-modeX {}

  /*
   Helper that can be assigned from each question settings page 
   to center question text
  */
  .ngs-question--centered {}
  
  /*
  Applied if any answer of the question is invalid or if 
  the question is required and hasn't been answered
  */
  .ngs-question--invalid {}
  
  
  /*
  Answer container that will only be applied if the 
  question is set to render the answers horizontally
  */
  .ngs-question__rows {}
  
  /*
  Answer container that will only be applied if the 
  question is set to render the answers horizontally
  The wrapped class can be used for example in a separate
  media query to wrap the content of the flex box if the 
  screen is not large enought to show all answers in 
  one row
  */
  .ngs-question__rows--wrapped {}
  
  /*
  Used if answers are rendered horizontally and if the 
  answers spacing should be even accross the screen
  */
  .ngs-question__rows-items--grown {}
  
  /*
  Wrapper around the question's answer row
  */
  .ngs-question__answer-wrapper {}
  
  /*
  Answer row container if rendered in horizontal mode
  */
  .ngs-question__row {}
  
  /*
  Container of the question "text"
  */
  .ngs-question__header {}
  
  /*
  Question's "text" 
  */
  .ngs-question__header p {}
  

Matrix questions

/*
  Matrix question container for its rows and columns
  */
  .ngs-matrix-question {}
  
  /*
  Matrix question's header for question text and column text
  */
  .ngs-matrix-question__header {}
  
  /*
  Used for matrix header description
  */
  .ngs-matrix-question__header-label-cell {}
  
  /*
  Matrix column headeer
  */
  .ngs-matrix-question__header-column-cell {}
  
  /*
  Matrix rows container
  */
  .ngs-matrix-question__rows {}
  
  /*
  Single row container that holds child question text and its answers
  */
  .ngs-matrix-question__row {}
  
  /*
  Alternate row
  */
  .ngs-matrix-question__row--odd {}
  
  /*
  Invalid row if any answers for the child question is invalid
  */
  .ngs-matrix-question__row--invalid {}
  
  /*
  Row child question text
  */
  .ngs-matrix-question__label-cell {}
  
  /*
  Row child question's answers
  */
  .ngs-matrix-question__answer-cell {}
  
  /*
  Sticky header,  used for matrix questions that
  have been collapsed
  */
  .ngs-question__header-stick {}
  
  /*
  Expand container that allows the respondent
  to collaspe or expand a matrix when run in
  lower resolutions
  */
  .ngs-question__expandable-action-container {}
    

Question sections

/*
  Individual question section that holds the question answers
  */
  .ngs-question__section {}
  
  /*
  Applied if any answer of the section is invalid
  */
  .ngs-question__section--invalid {}
  
  /*
  Applied when a selection based answer has been
  selected within the question section. 
  */
  .ngs-question__section--selected {}
  
  /*
  Container for the section question. Holds 
  the actual question (radio, checkbox, matrix etc..)
  */
  .ngs-question__section-wrapper-js {}
  
  /*
  Container of the section action icons (add / delete)
  */
  .ngs-question__section-toolbar {}
  
  /*
  add / delete icons for managing a section
  */
  .ngs-question__section-icon {}
  
  .ngs-question__section-icon:hover:not(.off) {}
  
  /*
  Applied if section limits have been reached
  */
  .ngs-question__section-icon--off {}
    

Answers

/*
  Container for the answer type. 
  Note: ngSurvey adds automatically following class to 
  identtify answers that have any rating / weight assigned 
  to them eg: ngs-question__answer rating-weight-3 
  if a rating weight of 3 has been assigned to the answer
  */
  .ngs-question__answer {}
  
  /*
  Wrapper of the answer image
  */
  .ngs-question__answer-image-wrapper {}
  
  /*
  Image that is shown instead of label
  if an image has been selected as answer
  */
  .ngs-question__answer-image {}
  
  
  /*
  Applied if the image answer is not selected
  */
  .ngs-question__answer-image--unselected {}
  
  .ngs-question__answer-image--unselected:hover {}
  
  /*
  Applied if the image answer has been selected
  */
  .ngs-question__answer-image--selected {}
  
  /*
  Applied if the answer image is disabled and 
  cant be selected
  */
  .ngs-question__answer-image--disabled {}
  
  /*
  Answer dropdown list type
  */
  .ngs-question__answer-select {}
  
  /*
  Field based answers
  */
  .ngs-question__answer-field {}
  
  .ngs-question__answer-field:focus {}
  
  /*
  Angular added classes if field is invalid and touched
  */
  .ngs-question__answer-field.ng-invalid.ng-touched {}
  
  .ngs-question__answer-field.ng-invalid.ng-touched:focus {}
  
  /*
  Applied if field is hidden
  */
  .ngs-question__answer-field--transparent {}
  
  /*
  If answers have been set to be rendred has
  button instead of checkboxes / radiobuttons
  */
  .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 {}
  
  /*
  Star rating answer container
  */
  .ngs-question__answer-star-graphic {}
  
  /*
  SVG star, its the default way to generate stars
  */
  .ngs-question__answer-star-graphic-vector {}
  
  /*
  Applied if an image has been chosen for the answer
  */
  .ngs-question__answer-star-graphic-image {}
  
  /*
  Applied if star has been selected
  */
  .ngs-question__answer-star-graphic--shining {}  

Answers labels

  /*
  Label element of the answer
  */
  .ngs-question__answer-label {}

  /*
  Label text of the answer
  */
  .ngs-question__answer-label-text {}

  /*
  Label text of the answer rendered in span 
  if no html has been set as text
  */
  .ngs-question__answer-label-text--plain {}

  /*
  Label text of the answer rendered in a div 
  if html has been set as text
  */
  .ngs-question__answer-label-text--rich {}

  /*
  Applied if label text is empty
  */
  .ngs-question__answer-label--unset {}

  /*
  Applied if label text is empty
  */
  .ngs-question__answer-label--unset {}

  /*
  Applied if label is an image
  */
  .ngs-question__answer-label--imaged {}

  /*
  Applied if label is rendered inside a matrix cell
  */
  .ngs-question__answer-label--in-cell {}  

Sliders

  /*
  Horizontal slider used for rating
  */
  .mat-slider-horizontal {}
  
  /*
  Thumbs of the slider
  */
  .mat-accent .mat-slider-thumb,
  .mat-accent .mat-slider-thumb-label,
  .mat-accent .mat-slider-track-fill {}

Ranking

 /*
  Box container holding the ranking row
  */
  .ngs-question__answer-ranking-box {}
  
  /*
  Order of the ranking
  */
  .ngs-question__answer-ranking-box-order {}
  
  /*
  Label of the ranking
  */
  .ngs-question__answer-ranking-label {}
   

Constant sum

  /*
  Constant sum progress bar wrapper
  */
  .ngs-question__answer-constant-sum-progress-wrapper {}
  

NPS Question

/*
  Container of the nps question
  */
  .ngs-question-nps {}
    
  
  /*
  Header holding the Not at all likely and Extremely likely text
  */
  .ngs-question-nps__header {}
  
  /*
  Right likely header text
  */
  .ngs-question-nps__header-likely {}
  
  /*
  NPS answer selection box
  */
  .ngs-question-nps .ngs-question__answer-nps-selection {}
  
  /*
  Applied if the NPS answer selection box is disabled
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--disabled {}
  
  /*
  Applied if the NPS answer selection box is selected
  */
  .ngs-question-nps .ngs-question__answer-nps-selection--selected {}
  
  /*
  Turns of the nps answer selection box if an answer has been selected on the question
  and its not that answer that has been selected
  */
  .ngs-question-nps .ngs-question__section--selected .ngs-question__answer-nps-selection:not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  Does hover effect only if its not disabled or already selected 
  */
  .ngs-question-nps .ngs-question__answer-nps-selection:hover:not(.ngs-question__answer-nps-selection--disabled):not(.ngs-question__answer-nps-selection--selected) {}
  
  /*
  Applies the class depending on the NPS score value
  */
  .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 {}
  
  /*
  Helper class that is added to the question CSS class properties to show 
  answers in mono-color  
  */
  .ngs-question-nps--monochrome .ngs-question__answer-nps-selection {}
  
  /*
  NPS selection boxes that are detractors 0-6 weight
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--detractors {}
  
  /*
  NPS selection boxes that are passives 7-8 weight
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--passives {}
  
  /*
  NPS selection boxes that are passives 9-10 weight
  */
  .ngs-question-nps--standard .ngs-question__answer-nps-selection--promoters {}
    

CEST / CSAT Question

  /*
  Container of the answers
  */
  .ngs-question-ces .ngs-question__answer,
  .ngs-question-csat .ngs-question__answer {}
  
  /*
  Answer rows container, by default a media query
  has bee setup to width from column / to row
  depending on the user resolutions. see below values
  */
  .ngs-question-ces .ngs-question__rows--wrapped,
  .ngs-question-csat .ngs-question__rows--wrapped {
    /*  Switch to column mode and display all answers by column    
  §    flex-flow: column; 
      flex-wrap: nowrap; 
  */
  }
  
  /*
  Switch to row mode and display all answers in a row
  */
  @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;
    }
  }
  
  /*
  Answer selection button
  */
  .ngs-question-ces .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-selection-button {}
  
  
  /*
  Applied to ces/csat questions selection button that are not selected
  */
  .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) {}
  
  
  /*
  Monochrome helper that can be applied from the question settings CSS classname
  */
  .ngs-question-ces--monochrome .ngs-question__answer .ngs-question__answer-selection-button,
  .ngs-question-csat--monochrome .ngs-question__answer .ngs-question__answer-selection-button {}
  
  /*
  CES question answer selection button applied on a basis of their weight value
  */
  .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 {}
  
  /*
  CSAT question answer selection button applied on a basis of their weight value
  */
  .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 {}
  
  /*
  Unselected csat answer image inside a question where 
  an answer has been selected. Used to "turn off" answers
  that have not been selected 
  */
  .ngs-question-csat .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected),
  
  /*
  Unselected csat answer image inside a csat image based question where 
  an answer has been selected. Used to "turn off" answers
  that have not been selected 
  */
  .ngs-question-csat-image .ngs-question__section--selected .ngs-question__answer-image:not(.ngs-question__answer-image--selected) {}
  
  /*
  csat / csat image question answer image
  */
  .ngs-question-csat .ngs-question__answer .ngs-question__answer-image,
  .ngs-question-csat-image .ngs-question__answer .ngs-question__answer-image {}
  
  /*
  Default CSAT uses only 3 or 2 images (smiles, thumbs). Classes are applied based on their
  rating weight
  */
  .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 {}
  
  
  /*
  Selected csat answer images based. Classes are applied based on their
  rating weight
  */
  .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 {}
  
  /*
  Selected CSAT answer selection buttons. Classes are applied based on their
  rating weight
  */
  .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,
  

Errors

  /*
  Error message box container
  */
  .ngs-survey__error-message {}
  
  /*
  Class used to display the small triangle on
  bottom of the error message
  */
  .ngs-survey__error-message--bottom:before {}
  
  /*
  
  Class used to display the small triangle on
  top  the error message
  */
  .ngs-survey__error-message--top:before {}
    

Security

  /*
  Auth0 authorization screen
  */
  .ngs-survey__auth0-authorize {}    

Google Material

Following classes will override the default google material component used in ngsurvey's forms. The list is not exhaustive as it only lists the one that are overridden by ngSurvey, you can of course also override any standard material component classes not listed below

  /*
  Outer container of the checkbox answer
  */
  .ngs-survey .mat-checkbox-layout {}
  
  /*
  Defines the content of the checkbox based answerrs
  */
  .ngs-survey .mat-checkbox-inner-container {}
  
  /*
  Disabled checbkox container background
  */
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
  .ngs-survey .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {}
  
  /*
  Defines the container of the radio button circle
  */
  .ngs-survey .mat-radio-inner-circle {}
  
  /*
  Defines the container of the radio button outer circle
  and selected button must be set using background-color and border-color
  */
  .ngs-survey .mat-radio-outer-circle {}
  
  /*
  Defines the "checked" radio bbutton outer circle that is not disabled
  */
  .ngs-survey .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled) {}
  
  /*
  Defines the "checked" radio button inner circle that is not disabled
  */
  .ngs-survey .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled) {}
  
  /*
  Defines the "checked" checkbox checked selection arrow
  */
  .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) {}
  
  
  /*
  Disabled radio button outer circle
  */
  .ngs-survey .mat-radio-disabled .mat-radio-outer-circle {}
  
  /*
  Disabled radio button inner circle
  */
  .ngs-survey .mat-radio-disabled .mat-radio-inner-circle,
  .ngs-survey .mat-radio-disabled .mat-radio-ripple .mat-ripple-element {}
  
  
  /*
  Material progress bar in use for constant sum totals
  */
  .ngs-survey .mat-progress-overflow .mat-progress-bar-fill::after {}
  
  /*
  Material progress bar in use for constant sum totals
  */
  .ngs-survey .mat-progress-bar-fill::after {}
  
  .ngs-survey .mat-progress-bar-buffer {}
  
  .ngs-survey .mat-progress-bar-background {}