CSS 2

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall visual appearance of a webpage, making it essential for creating visually appealing and well-structured websites.

This CSS template provides a clean, modern, and user-friendly interface for your survey tool. It ensures that participants can navigate and complete surveys effortlessly with simplicity and ease.

To edit the visuals of a survey we have 2 options, but are editable, you can edit the colors needed and upload a logo to make your surveys more visually appealing.

To edit visuals of a survey we have 2 options, but are editable, you can edit the colors needed and upload a logo to make your surveys more visually appealing.

Edit the values of the :root selector to make it fit to your needs.

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/*Starts editing part*/
:root {
  --font-family: 'Lato', sans-serif; /* Change this in case you use another font*/
  --bg-color: #ffffff; /*Color of the main question card, used white to make it appear as a card*/
  --mainBrandColor: hsla(288, 72%, 86%, 0.6); /*Main color, use some oppacity or a pastel color*/
  --secondaryBrandColor: #4e0945; /*Color used for buttons and option selection*/
  --oddMatrixColor: #ececec; /*color to use in matrix, preferably used a shade of the secondary color*/
  --parMatrixColor: #ebc1f599; /*color to use in matrix, preferably used a shade of the main color*/
  --logoSize: 150px; /*edit logo size*/
  --logoMargin: 25px 0px 5px 0px; /*edit logo margin*/
  --textColor: #333333; /*Text color*/
  --hoverColor: #fff; /* Use for text hovering, change between black or white deoendinbg on the colors used*/
}
/*Finish editing part*/

body {
  background-color: var(--bg-color);
  font-family: var(--font-family) !important; /* DELETE IF NO FONT WAS ADDED*/
}

#surveyLogoImage {
  width: var(--logoSize);
  margin: var(--logoMargin);
}

button.btn-primary,
button.btn-outline-primary {
  
  background-color: var(--mainBrandColor);
  border-color: var(--mainBrandColor);
  color: var(--hoverColor);
}

button.btn-primary:hover,
button.btn-outline-primary {
  background-color: var(--secondaryBrandColor);
  border-color: var(--secondaryBrandColor);
  color: var(--hoverColor);
}

.form-check-label.custom-control-label {
  background-color: var(--mainBrandColor);
}

.custom-control-input:checked+.form-check-label.custom-control-label {
  background-color: var(--secondaryBrandColor);
}

.form-check-label.custom-control-label:hover {
  background-color: var(--secondaryBrandColor);
  color: var(--hoverColor);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  background-color: none !important;
  background: none !important;
  border: none !important;
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
  box-shadow: none !important;
}

.btn.focus,
.btn:focus {
  box-shadow: none !important;
}

.custom-checkbox-filled .form-check, .custom-radio-filled .form-check {
  border: solid 1px var(--mainBrandColor);
  border-radius: 5px;
}

tr>td>div>div.form-check {
    border: none !important ;
}

.linear-scale__button {
    background: var(--oddMatrixColor);
    border-radius: 10px;
}

.btn-outline-primary:hover {
    background-color: var(--hoverColor);
    border-color: transparent !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--secondaryBrandColor);
    border-color: transparent !important;
}

.linear-scale__button.active, .linear-scale__button:hover {
  background-color: var(--secondaryBrandColor);
    color: var(--hoverColor) !important;
}

.custom-checkbox-filled .custom-control-input:checked~.custom-control-label, .custom-radio-filled .custom-control-input:checked~.custom-control-label{
  color: var(--hoverColor) !important;
}

.custom-checkbox-filled .custom-control-label, .custom-radio-filled .custom-control-label {
    color: var(--textColor);
}

/* center logo */
.mb-2, .my-2 {
    justify-content: center;
}

@media (min-width: 768px) {
  .matrix tbody tr:nth-of-type(odd) {
    background: var(--oddMatrixColor);
  }

  .matrix tbody tr:nth-of-type(2n) {
    background: var(--parMatrixColor);
  }
}

@media screen and (max-width: 768px) {
  table>tbody>tr>th:nth-of-type(odd) {
    background: var(--oddMatrixColor);
  }

  table>tbody>tr>th:nth-of-type(2n) {
    background: var(--parMatrixColor);
  }
}

.form-check-label.exclusive {
    background: var(--oddMatrixColor) !important;
}

You can see this with the quick preview.