/* Custom styles for Super Speedy Surveys */
.ssp-survey-container .sv_main {
    --primary-color: #8035be;
    --secondary-color: #a797c5;
    --background-color: #f4f4f4;
    --text-color: #404040;
    --header-color: #6a1b9a;
    --body-container-background-color: #ffffff;
    --input-background: #ffffff;
    --input-border-color: #cccccc;
    --input-focus-border-color: #8035be;
  
    background-color: var(--background-color);
    color: var(--text-color);
  
    /* Styling multiple input types at once */
    & :is(input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], select, textarea) {
      padding: 8px;
      border: 1px solid var(--input-border-color);
      background-color: var(--input-background);
      border-radius: 4px;
      transition: border-color 0.3s ease;
  
      &:focus {
        outline: none;
        border-color: var(--input-focus-border-color);
      }
    }
  
    .sv_q_title {
      color: var(--header-color);
      font-weight: bold;
    }
  
    .sv_p_title {
      background-color: var(--primary-color);
      color: white;
      padding: 10px;
      border-radius: 4px;
    }
  
    .sv_q_dropdown_control {
      background-color: var(--secondary-color);
    }
  
    .sv_q_rating_item {
      &.active .sv_q_rating_item_text {
        background-color: var(--primary-color);
        color: white;
      }
  
      &:hover {
        border-color: var(--primary-color);
      }
    }
  
    .sv_select_wrapper::before {
      background-color: var(--primary-color);
    }
  
    .sv_body__timer {
      color: var(--primary-color);
    }
  
    .sv_nav {
      background-color: var(--body-container-background-color);
    }
  
    .sv_progress_bar {
      background-color: var(--secondary-color);
  
      & > span {
        background-color: var(--primary-color);
      }
    }
  
    /* Style the submit button */
    .sv_complete_btn {
      background-color: var(--primary-color);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
  
      &:hover {
        background-color: var(--secondary-color);
      }
    }
  }

  .sv_main .sv_q_dropdown_control {
    color:black!important;
  }
  .sv_main select {
    color:white!important;
  }
  .sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_other input, .sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_dropdown_control, .sv_main .sv_container .sv_body .sv_p_root .sv_q input:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .sv_main .sv_container .sv_body .sv_p_root .sv_q select {
    padding: 0px 10px;
  }