CSS 1

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.

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

/*Starts editing part*/
:root {
  --mainColor: #b8f84d; /*Color used for buttons and option selection*/
  --secondaryColor: #ffffff; /**/
  --oddMatrixColor: #d9d9d9; /*color to use in matrix, preferably used a shade of the secondary color*/
  --parMatrixColor: #e0fcb3; /*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*/
}
/*Finish editing part*/

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

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

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

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

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

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

.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(--mainColor);
  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(--mainColor);
    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(--mainColor);
    border-color: transparent !important;
}

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

.custom-checkbox-filled .custom-control-input:checked~.custom-control-label, .custom-radio-filled .custom-control-input:checked~.custom-control-label{
  color: var(--textColor) !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 this quick preview: