#questionnaire input[type="radio"].scaleOption { 
    -webkit-appearance: none;
    appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 3px solid var(--custom-color);
    filter: var(--custom-darker);
    margin: 0 0.5rem;
    cursor: pointer;
    transition: all .5s;
}

#questionnaire input[type="radio"].scaleOption:hover { 
    background-color: var(--custom-color);
}

#questionnaire input[type="radio"].scaleOption:checked { 
    background-color: var(--custom-color);
}

#questionnaire .answerOptions input[type="radio"], #questionnaire .answerOptions input[type="checkbox"] {
  opacity: 0;
  position: fixed;
  width: 0;
  margin:0px;
}

#questionnaire .answerOptions label {
    background-color: var(--custom-color);
    filter: var(--custom-lighter);
    display: block;
    margin: 0px;
    cursor: pointer;
  }

#questionnaire .answerOptions input[type="radio"]:hover + label, #questionnaire .answerOptions input[type="checkbox"]:hover + label {
    background-color: var(--custom-color);
  }  
    

#questionnaire .answerOptions input[type="radio"]:checked + label, #questionnaire .answerOptions input[type="checkbox"]:checked + label {
    background-color: var(--custom-color);
    color: var(--custom-color-text);
}

#questionnaire .collapsing {
  transition: none !important;
}

.progress .progress-bar { background-color: var(--custom-color) }

#questionnaire .info {
    background-color: rgb(181, 238, 238);
    color: #2A2A2A;
    font-size: 0.9rem;
    padding: 1rem;
    margin: 1rem 0px; 
}

#questionnaire .success {
    background-color: #25B372;
    font-size: 0.9rem;
    padding: 1rem;
    margin: 1rem 0px; 
}

#questionnaire .warning {
    background-color: #F58646;
    font-size: 0.9rem;
    padding: 1rem;
    margin: 1rem 0px; 
}

#questionnaire .danger {
    background-color: #EF5350;
    font-size: 0.9rem;
    padding: 1rem;
    margin: 1rem 0px; 
}

#track { 
    font-size: 0; 
    margin-top: 1.5rem;
}

#track a.item { 
    display: inline-block;
    font-size: 0.8rem;
    color: var(--theme-text);
    text-decoration: none; 
    background-color: var(--bg-transparent);
    padding: 0.8rem 1rem;
    min-width: 3rem;
    text-align: center;
 }

 #track a.item.active { 
    background-color: var(--custom-color);
    filter: brightness(0.9);
    color: var(--custom-color-text);
}

 #track a.item.roundedLeft { border-radius: 8px 0px 0px 8px; }

 #track a.item.roundedRight { border-radius: 0px 8px 8px 0px; }

 #track a.item:hover { 
    background-color: var(--custom-color);
    filter: var(--custom-darker);
 }

 form.login { width: 100%; } 
  
 form.login .pin { display:inline; font-size:24px; line-height:24px; width:45px; height:45px; padding:8px; margin:0px; border:1px var(--custom-color) solid; border-radius:5px; outline:none; text-align:center; }
 
 form.login button.login { display:inline; background-color: var(--primary-color); color: var(--theme-text); font-size:20px; line-height:24px; padding:11px 12px 8px 12px; border:1px var(--custom-color) solid; border-radius:5px; outline:none; text-align:center; top: -1px; }

 .phoneOrientation {
    height: 50px;
    width: 100px;
    border: 3px solid var(--theme-text);
    border-radius: 10px;
    animation: rotatePhoneOrientation 1.5s ease-in-out infinite alternate;
    /* display: none; */
}     
  
  @keyframes rotatePhoneOrientation {
    0% {
          transform: rotate(0deg)
      }
      50% {
          transform: rotate(-90deg)
      }
      100% {
          transform: rotate(-90deg)
      }
  }