/******************
    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
*/
/*
 * Collapsible Heading - No styling, just functional
 */
body {
     font-size: 1.2em;
}
 
#outerframeContainer {
-o-hyphens: none;
hyphens: none;
}
 
.collapsible-heading {
  cursor: pointer;
  display: block;
  font-weight: bold;
}

/*
 * Collapsible Content
 * We use 'display: none' as the initial hidden state.
 * The JS will toggle this.
 */
.collapsible-content {
  display: none;
}

/* Optional: The arrow indicator */
.collapsible-heading::after {
  content: '\027A4';
  /* Removed: float: right; */
  
  /* Add some space to the left of the arrow */
  margin-left: 8px; 
  
  transition: transform 0.3s ease;
  font-size: 1.2em;
  display: inline-block; /* Ensures it behaves like an inline element */
}

.result-veryhigh > .question-title-container {
    background-color: #1e8449 !important;
    font-size: 1.3em !important;
    color: #fff !important;
}
.result-high > .question-title-container {
    background-color: #2e9e48 !important;
    font-size: 1.3em !important;
    color: #fff !important;
}
.result-medium > .question-title-container {
    background-color: #9dc844 !important;
    font-size: 1.3em !important;
    color: #fff !important;
}
.result-low > .question-title-container {
    background-color: #e67e22 !important;
    font-size: 1.3em !important;
    color: #fff !important;
}

.collapsible-heading.open::after {
  transform: rotate(90deg);
}

.explanation {
    display: none;
}
    
.clickable-phrase {
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    padding: 2px 4px;
    background-color: #F0F0F0;
}

.clickable-phrase:hover {
    /*text-decoration: underline;*/
    background-color: #D0D0D0 !important;
}

.clickable-phrase.highlighted {
    background-color: #add8e6 !important; /* Light blue */
}

.clickable-phrase.correct {
    background-color: #90ee90 !important; /* Light green */
}

.clickable-phrase.incorrect {
    background-color: #ffb6c1 !important; /* Light red */
}

.answer-item label:after{
    background-color: #007ac3 !important;
}

.progress-bar {
    background-color: #007ac3 !important;
 }
.question-container {
    border: 1px solid #c2dff1 !important;
}
.btn-primary {
    background-color: #007ac3 !important;
    border-color: #95A5A6 !important;
}

.btn-skip {
    background-color: #efefef !important;
    border-color: #858585 !important;
    margin-right: 2em;
}
.btn-skip:hover {
    background-color: #fafafa !important;
    border-color: #858585 !important;
    color: #0f0f0f;
    margin-right: 2em;
}

.btn-primary:hover {
    background-color: #63aeda !important;
    border-color: #3696d0 !important;
}
 
.btn-primary:active, 
.btn-primary.active {
    background-color: #1A242F !important;
    border-color: #161F29 !important;
}

.fruity .btn-check:checked+.btn-primary{
    border: 1px solid #003787 !important;
    color: #fff;
    box-shadow: 0 0 0 .25rem rgba(61, 154, 209) !important;
    background-color: #4ba1d5;
}

.correct {
    background-color: green !important;
}

.correct:hover {
    background-color: limegreen !important;
}

.array-correct label:after {
    background-color: green !important;
}

.wrong{
    background-color: crimson !important;
}

.wrong:hover{
    background-color: red !important;
}

.array-wrong label:after{
    background-color: crimson !important;
}

.uncertain {
    background-color: DarkOrange !important;
}

.uncertain:hover {
    background-color: orange !important;
}

.array-uncertain label:after{
    background-color: DarkOrange !important;
}

.fruity .btn-outline-secondary {
    background-color: hsla(0, 0%, 100%, .2);
    border: 1px solid #3696d0;
    color: #007ac3 !important;
}
.btn-outline-secondary:hover {
    background-color: #e1eff8 !important;
    border-color: #3696d0 !important;
    color: #3696d0 !important;
}

.fruity a {
    color: #007ac3 !important;
}

.fruity a:focus,.fruity a:hover {
    color: #4ba1d5 !important
}

.fruity .text-info{
    color: #003787 !important;
}

.fruity .well {
    background-color: #dbecf7;
}

.answertext.control-label{
    text-align: left !important;
}

li a[data-limesurvey-submit='{ "move":3 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":4 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":5 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":6 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":7 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":8 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":10 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":11 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":12 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":13 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":15 }'] {
  margin-left: 2em;
  width: calc(100% - 2em) !important;
}
li a[data-limesurvey-submit='{ "move":16 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":17 }'] {
  margin-left: 2em;
  width: calc(100% - 2em) !important;
}
li a[data-limesurvey-submit='{ "move":18 }'] {
  display: none !important;
}
li a[data-limesurvey-submit='{ "move":19 }'] {
  margin-left: 2em;
  width: calc(100% - 2em) !important;
}
li a[data-limesurvey-submit='{ "move":20 }'] {
  display: none !important;
}
.fruity .navbar .navbar-nav .nav-item:after {
        background-color: #007ac3;
    }

.fruity .bg-warning{
    background-color: #cee6f4 !important;
}

.fruity .dropdown-menu>li>a:hover {
    background-color: #4ba1d5 !important;
    color: #ffffff !important;
}