/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* remove asterisk for mandatory questions */

body {
    font-size: 14px; /* Adjust this number to your liking */
}

.question-title-container .asterisk {
  display: none;
}

.question-text {
    font-size: 14px; 
}

.question-valid-container {
    text-align: left;
}


.question-help-container {
  border-width: 0px 0px 0px 0px;
  border-style: none;
}

/* disable lng change button on frist page*/
.ls-language-changer-item {
  display: none;
}


/* bootstrap button question */
/* Selected state */
.bootstrap-buttons-div > .form-check > .btn.active {
  color: #FFFFFF; /* Ensure text is white on active */
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}

/* Hover effect (optional) */
.bootstrap-buttons-div > .form-check > .btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Style for disabled radio button */
.bootstrap-buttons-div > .form-check > .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hide the actual radio input (visually hidden) */
.btn-check.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Incorporating btn-outline-primary */
.bootstrap-buttons-div > .form-check > .btn {
  border: 1px solid var(--bs-primary);
  color: #000000;
  background-color: transparent;
}

.bootstrap-buttons-div > .form-check > .btn:not(.active) {
    @extend .btn-outline-primary; /* Use btn-outline-primary for unselected */
}

.bootstrap-buttons-div > .form-check > .btn.active {
  color: #FFFFFF !important;
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}

.bootstrap-buttons-div > .form-check > .btn:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}