/***************************************************************
    Radboud University Theme for LimeSurvey
    Extends Fruity TwentyThree
    ---------------
    Copyright   : Radboud University, 2026
    Author      : Erik van den Berge <erik.vandenberge@ru.nl>
    Date        : 2026-08-03
***************************************************************/

:root {
    /* Define RU house colors */
    --ru-impact-red: #e3000b;
    --ru-poppy: #ff424b;
    --ru-lady-bug: #be311e;
    --ru-berry: #8f2011;
    --ru-maroon: #730e04;
    --ru-mahogany: #4a0004;
    --ru-gray: #797777;
    --ru-orange: #cf5107;
    --ru-blue: #008acb;
    --ru-petrol: #008f89;
    --ru-green: #4aa943;
    --ru-yellow: #ccaf00;
    --ru-white: #ffffff;

    --ru-impact-red-rgb: 227, 0, 11;
    --ru-poppy-rgb: 255, 66, 75;
    --ru-lady-bug-rgb: 190, 49, 26;
    --ru-berry-rgb: 143, 32, 17;
    --ru-maroon-rgb: 115, 14, 4;
    --ru-mahogany-rgb: 74, 0, 4;

    --ru-font-family: "Open Sans", system-ui, -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --ru-logo-image: url("https://www.ru.nl/themes/custom/ru/logo.svg"); /* TODO: host somewhere under our control */

    /* Set theme variables */
    --ru-primary: var(--ru-impact-red);
    --ru-secondary: var(--ru-berry);
    --ru-shadow-color: rgba(var(--ru-berry-rgb), 1);
    --ru-fruity-gray: #6E748C;                  /* default color in Fruity Theme (Apple) that we may want to match on some elements*/
    --ru-answer-text-color: #63697E;            /* darker variant of fruity-gray for WCAG compliance against our question background color */
    --ru-a11y-highlight-color: var(--ru-poppy);   /* for accessibility highlighting, e.g. when navigating with keyboard */

    /* Variables set in custom_header.twig based on theme options */
    --ru-background: var(--_ru-background, none);
    --ru-display-tips: var(--_ru-display-tips, none);                                 /* display-mode for default question tips (block|none)*/
    --ru-display-questioncount: var(--_ru-display-questioncount, none);               /* display mode for question-count container on welcome screen (block|none) */
    --ru-question-background-color: var(--_ru-question-background-color, #f8f7f7);  /* question background color (#f8f7f7|none) */
    --ru-question-box-shadow: var(--_ru-question-box-shadow, none);                   /* question container box shadow (none|0 2px 6px rgba(0,0,0,0.2)) */
    --ru-question-container-padding: var(--_ru-question-container-padding, 1.1rem);   /* add padding if we have background color or shadow */
    --ru-table-alt-color: var(--_ru-table-alt-color, #fcfcfe);                      /* alternating table row/column color (#fcfcfe|revert-rule) */
}

/**************************************************************/
/* #region Common Elements */
/**************************************************************/

a {
    color: var(--ru-primary);
    text-decoration: underline;
    font-size: 1.14rem; /* fix link size doesn't match regular text */
}

a:hover,
a:focus {
    color: var(--ru-secondary);
}

body {
    font-family: var(--ru-font-family) !important;

    /* Set background image properties */
    background-image: var(--_ru-background);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    /* Limesurvey adds padding to body element based on logo visibility via script
       Set default padding in case user disables Javascript */
    padding-top: 80px;
}

/* Fix page background and padding */
#main-col {
    display: inline-block; /* Fixes move-btn margin collapse */
    background-color: var(--ru-white);
    padding: 0 2rem;
    border-radius: 12px;
    width:100%;
}

/* Set text colors */
.text-primary {
    color: var(--ru-primary) !important;
}

.text-info {
    color: var(--ru-secondary) !important;
}

.ls-answers label,
.answer-item label,
.control-label,
.ls-answers
.ls-heading th,
.ls-answers th {
    color: var(--ru-answer-text-color);
}

/* #endregion Common Elements */

/**************************************************************/
/* #region Nav Bar */
/**************************************************************/

/* Set RU logo */
.logo-container {
    /* Keep visible at all screen sizes */
    display: block !important;

    /* Move so RU shield is centered */
    position: relative;
    left: 50%;
    transform: translateX(-91.3%); /* measured from image */
    margin:0;
    transition: left 0.2s ease-in-out, transform 0.2s ease-in-out; /* smooth transition back to left-align on smaller screens */
}

.logo-container > img {
    /* Replace logo image with SVG (LimeSurvey doesn't allow direct use of SVG) */
    content: var(--ru-logo-image);
    height: 3rem;
    padding: 0;
}

.navbar {
    /* Apply additional padding here instead of on logo image */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand {
    min-height: 3rem;
}

/* Add menu hover/focus effects */
#survey-nav .navbar-toggler .ri-more-fill {
    transition: color 0.1s ease-in, box-shadow 0.1s ease-in;
}

#survey-nav .navbar-toggler:hover .ri-more-fill,
#survey-nav .navbar-toggler:focus .ri-more-fill {
    color: var(--ru-primary);
}

#survey-nav .navbar-toggler:focus .ri-more-fill {
    box-shadow: 0 0 0 3px var(--ru-a11y-highlight-color);
}


/* Fix dropdown menu spacing */
.dropdown-item {
    padding: 0.5rem 1rem;
}

/* Set dropdown menu colors */
.dropdown-header,
.dropdown-item {
    color: var(--ru-answer-text-color);
}

.dropdown-menu > li > a {
    color: var(--ru-answer-text-color);
    transition: padding 0.1s ease-in;
}

/* Nudge dropdown item on hover/focus for clarity*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--ru-white) !important;
    background-color: var(--ru-primary) !important;
    /* shift padding while keeping total width the same (2rem) */
    padding-left: 1.1rem;
    padding-right: 0.9rem;
}

/* Put progress bar directly under the header (fixed, full width, always on top) */
.top-container {
    margin: 0 !important;
}

.top-container .top-content {
    padding: 0 !important;
}

.top-container .ls-progress-container {
    padding: 0;
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 1020; /* nav-bar is 1030 */
}

.top-container .progress {
    height: 4px;
    margin: 0;
    border-radius: 0;
}

/* Set progress bar colors */
.progress {
    background-color: #D3D5DA; /* progress bar background */
}

.progress-bar {
    background-color: var(--ru-primary);
}

/* Create some space between navbar and content */
.outerframe {
    margin-top: 1.5rem;
}

/* #endregion Nav Bar */

/**************************************************************/
/* #region Welcome Screen */
/**************************************************************/

/* Fix welcome-container margin collapse and size */
#welcome-container {
    display: inline-block;
    max-width: 100%;
    margin-top: 2rem; /* add margin to top... */
}

#firstpage-changelang + #limesurvey>#welcome-container {
    margin-top:0; /* ...but not when there's a firstpage-changelang above it already */
}

.alert {
    margin-top: 1rem;
}

/* Fix language change dropdown alignment */
#firstpage-changelang {
    margin-top: 1.5rem;
    margin-bottom: 0;
    display: flex;
    flex-direction: row-reverse; /* align right */
}

.form-change-lang .control-label,
.form-change-lang #language-changer-select.col-form-label {
    line-height: 24px; /* align with preceding text */
    margin-right: .375rem; /* add a bit more space for chevron */
}

.form-change-lang #lang-select {
    position: relative;
}

.form-change-lang #lang-select::after {
    position: absolute;
    right: 0;
    top: .5rem;
}

/* Remove language changer border, put it on #lang-select instead so it fits around chevron */
.form-change-lang #language-changer-select:focus {
    border: none;
    /* revert padding to default .col-form-label */
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    padding-left: 4px;
}

.form-change-lang #lang-select:focus-within {
    box-shadow: 0 0 0 3px var(--ru-a11y-highlight-color);
}

/* Put privacy message in a box */
/** privacy div is always visible, so only style if there is content inside */
.privacy:has(.ls-privacy-block) {
    background-color: #f8f7f7; /* should match default --ru-question-background-color */
    padding: 1rem 0.5rem;
    color: var(--ru-answer-text-color);
}


/* Fix typography */
.large-heading {
    font-family: var(--ru-font-family); /* for some reason title doesn't get theme font applied */
}

.survey-name {
    color: var(--ru-primary);
}

.survey-description {
    /* match question text */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
}

.survey-welcome {
    /* add whitespace */
    margin-top: 3rem;
    margin-bottom: 1rem;
    /* make normal size */
    font-size: var(--bs-body-font-size);
}

.question-count-text {
    /* make smaller and more subdued */
    font-size: var(--bs-body-font-size);
    font-weight: 400;
    font-style: italic;
    color: var(--ru-fruity-gray);

    /* make room for icon */
    position: relative;
    padding-left: 1.4rem;
}

/* add "i" icon before question count text */
/* we can't use :not(:empty) here because Limesurvey adds spaces to the div for some reason */
.question-count-text::before {
    content: "\EE59";
    display: var(--ru-display-questioncount);
    position: absolute;
    left: 0;
    font-family: remixicon;
    font-style: normal;
    height: 100%;
}

/* #endregion Welcome Screen */

/**************************************************************/
/* #region Question Screen */
/**************************************************************/

.group-title,
.group-container .group-title {
    margin-top: 1rem; /* reduce title whitespace at top */
    color: var(--ru-primary);
}

/* Style question container based on theme settings */
.question-container {
        background-color: var(--ru-question-background-color);
        box-shadow: var(--ru-question-box-shadow);
        padding: var(--ru-question-container-padding);
        border-radius: 4px;
    }

/* Put asterisk for required questions in front of the question text */
.question-title-container {
    position: relative;
}

.asterisk {
    position: absolute;
    left: -0.4rem;
    color: var(--ru-primary);
    font-size: 1rem;
}

/* Set question help color */
.ls-questionhelp,
.question-container .ls-question-message {
    color: var(--ru-answer-text-color);
}

/* Add "?" icon to question help for clarity*/
.ls-questionhelp {
    position: relative;
}

.dir-ltr .ls-questionhelp {
    margin-left: 1.4rem;
}

.ls-questionhelp::before {
    content: "\f045";
    display: block;
    position: absolute;
    left: -1.4rem;
    font-family: remixicon;
    font-style:normal;
    height: 100%;
    color: var(--ru-fruity-gray);
}

/* Fix default tip size*/
.question-container .ls-question-message {
    font-size: inherit;
}

/* Control generic tip visibility */
.ls-em-tip {
    display: var(--ru-display-tips);
}

.ls-questionhelp:has(>.ls-em-tip)::before {
    display: var(--ru-display-tips);
}

/* #endregion Question Screen */

/**************************************************************/
/* #region Arrays */
/**************************************************************/

/* Set alternating colors */
.ls-even {
    background-color: var(--ru-table-alt-color);
}

.ls-even:only-child,
.ls-even:only-child:hover,
.ls-even:only-child:hover > * {
    /* no need to show row/column indicator if it's just one */
    background-color: transparent;
    box-shadow: none;
}

.table-hover > tbody > tr:hover > th {
    color: var(--ru-answer-text-color);
}

/* #endregion Arrays */

/**************************************************************/
/* #region Buttons */
/**************************************************************/

/* Fix bootstrap buttons question size and text weight*/
.ls-answers .form-check {
    display: flex;
    height: 100%;
}

.ls-answers label.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600; /* match other answer options */
}


/* Set button colors, with dark box shadow on hover/focus */
.btn-primary {
    background-color: var(--ru-primary);
    border-color: var(--ru-primary);
    color: var(--ru-white);
}

.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:visited,
.btn-primary.dropdown-toggle.show,
.btn-primary.dropdown-toggle.show:focus {
    background-color: var(--ru-primary);
    border-color: var(--ru-primary);
    color: var(--ru-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
    box-shadow: 4px 4px 0 var(--ru-shadow-color);
}

.btn-outline-secondary {
    border-color: var(--ru-fruity-gray); /* same as dropdowns */
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active:focus {
    box-shadow: 4px 4px 0 var(--ru-shadow-color);
}

/* unchecked bootstrap buttons should behave like btn-secondary... */
.btn-check + .btn-primary.active,
.btn-check + .btn-primary:active,
.btn-check + .btn:active,
.btn-check + .btn:hover,
.btn-check + .btn:focus
{
    background-color: var(--ru-white);
    border-color: var(--ru-fruity-gray);
    color: var(--ru-answer-text-color);
}

/* ...but we want checked bootstrap buttons to be treated like btn-primary */
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus:checked + .btn-primary,
.btn-check + .btn-primary:active:focus {
    background-color: var(--ru-primary);
    border-color: var(--ru-primary);
    color: var(--ru-white);
}

.btn-check + .btn-primary:hover,
.btn-check:focus-visible + .btn-primary, /* show when selecting with keyboard */
.btn-check:checked:focus-visible + .btn-primary {
    box-shadow: 4px 4px 0 var(--ru-shadow-color) !important;
}

.btn-check + .btn {
    color: var(--ru-answer-text-color);
}


/* Style Next/Previous buttons with added arrow icons */
.btn-lg {
    padding: 10px; /* decrease padding to make room for increased border width */
}

.ls-move-btn {
    position: relative;
    font-weight: 600;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    border-width: 2px; /* increase border width to match other btns and inputs */
}

.ls-move-next-btn {
    padding-right: 2.8rem;
}

.ls-move-next-btn::after,
.ls-move-previous-btn::before {
    display: block;
    position: absolute;
    font-family: remixicon;
    font-size: inherit;
    line-height: inherit;
    top: 10px;
    transition: transform 0.1s ease-in;
}

.ls-move-next-btn::after {
    content: "\EA6C";
    right: 1.1rem;
}

.ls-move-next-btn:hover::after {
    transform: translateX(0.1rem);
}

.ls-move-previous-btn {
    padding-left: 2.8em;
}

.ls-move-previous-btn::before {
    content: "\EA60";
    left: 1.1rem;
}

.ls-move-previous-btn:hover::before {
    transform: translateX(-0.1rem);
}

.ls-move-btn:hover,
.ls-move-btn:active,
.ls-move-btn:focus {
    box-shadow: 4px 4px 0 var(--ru-shadow-color);
}

.ls-move-next-btn,
.ls-move-submit {
    background-color: var(--ru-primary);
    color: var(--ru-white);
}

/* #endregion Buttons */

/**************************************************************/
/* #region Dropdowns */
/**************************************************************/

/* Increase standard widths of Dropdown lists and "Other" fields  */
.list-question-select,
.list-dropdown .form-control,
.language .form-control {
    width: min(320px,calc(100vw - 5rem)); /* auto-shrink if viewport is smaller; /**6rem is approx margin */
}

/* #endregion Dropdowns */

/**************************************************************/
/* #region Forms */
/**************************************************************/

/* Fix form dropdown button height */
.form-control {
    line-height: 18px;
}

.form-select {
    line-height:26px;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 4px 4px 0 var(--ru-shadow-color);
}

.form-change-lang #language-changer-select,
.form-change-lang #lang-select::after {
    color: var(--ru-primary);
}

/* #endregion Forms */

/**************************************************************/
/* #region Image Select */
/**************************************************************/

/* Fix Image select list (Radio) question text, which gets wrapped in h3 for some reason */
.question-container .ls-label-question h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Fix Image select list (Radio) radio button sizes */
.imageselect-container .imageselect-radiobutton::before,
.imageselect-list .no-anwser-item .radio-label::before,
.imageselect-list .radio-text-item .label-radio::before
{
    /* match size of other radio buttons */
    width: 19px;
    height: 19px;
}

.imageselect-container .imageselect-radiobutton::after,
.imageselect-list .no-anwser-item .radio-label::after,
.imageselect-list .radio-text-item .label-radio::after
{
    /* match size of other radio buttons */
    width: 9px;
    height: 9px;
    left: 3px;
    top: 3px;
}

.imageselect-list .radio-item,
.imageselect-list .radio-text-item,
.imageselect-list .no-anwser-item {
    padding-left: 19px;
}

/* Fix Multiple Choice Image Select resizing issue on small screens */
.imageselect-container {
    display: flex;
}

/* Add box shadow effect on hover/focus for clarity */
.imageselect-label,
.imageselect-container .radio-label img {
    transition: box-shadow 0.15s ease-in-out; /* we add box shadow for accessibiliy below, so add transition for it*/
}

.checkbox-item:hover .imageselect-label,
.imageselect-checkbox:focus-visible + .imageselect-label,
.imageselect-container .radio-label:hover img,
.imageselect-container:focus-within .radio-label img{
    box-shadow: 4px 4px 0 var(--ru-shadow-color)
}

/* #endregion Image Select */

/**************************************************************/
/* #region Radio Buttons and Checkboxes */
/**************************************************************/

/* Set radio item colors */
.radio-item label::before {
    border: 2px solid var(--ru-fruity-gray);
    background-color: var(--ru-white);
}

.radio-item label::after {
    background-color: var(--ru-primary);
}

input[type=radio] .styled:checked + label::before,
input[type=radio] .styled:checked + label::after {
    color: var(--ru-primary);
}

.radio-item input[type=radio] + label::after,
.radio-item input[type=radio]:checked + label::after
{
    background-color: var(--ru-primary);
}

.radio-item input[type=radio]:checked + label::before {
    border-color: var(--ru-primary);
}

.radio-item:hover label::before,
.radio-item:active label::before,
.radio-item:focus label::before {
    border-color: var(--ru-secondary);
}

.radio-item input[type=radio]:checked + label {
    color: var(--ru-primary);
}

.radio-item input[type="radio"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px var(--ru-a11y-highlight-color);
    border-color: var(--ru-secondary);
}

/* Set checkbox colors */
.checkbox-item input[type=radio]:focus + label::before {
    outline: none;
}

.checkbox-item input[type=checkbox]:checked + label {
    color: var(--ru-primary);
}

.checkbox-item label::before,
.privacy .checkbox-item label::before {
    border: 3px solid var(--ru-fruity-gray);
    background-color: var(--ru-white);
}

.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: var(--ru-primary);
}

.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: transparent;
    color: var(--ru-primary);
}

input[type=checkbox]:checked::after,
.checkbox input[type=checkbox]:checked::after,
.checkbox-inline input[type=checkbox]:checked::after {
    background-color: var(--ru-primary);
    border-color: var(--ru-primary);
}

.checkbox-item:hover label::before,
.checkbox-item:active label::before,
.checkbox-item:focus label::before {
    border-color: var(--ru-secondary);
}

.checkbox-item input[type="checkbox"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px var(--ru-a11y-highlight-color);
    border-color: var(--ru-secondary);
}

/* Fix Multiple choice with comments alignment */
.multiple-opt-comments .row>.form-check {
    padding-left:0.75rem;
}

/* #endregion Radio Buttons and Checkboxes */

/**************************************************************/
/* #region Ranking */
/**************************************************************

/* Fix table padding */
.select-sortable-lists:not(.ranking-advanced-style) .sortable-list {
    padding-top: 10px;  /* match margin bottom of list items */
}

/* Show headers */
.select-sortable-lists:not(.ranking-advanced-style) .sortable-rank-subtitle {
    display: block;
    padding-left: 1.5rem; /* make room for icon */
    position: relative;
    color: var(--ru-fruity-gray);
    min-height: 1.5rem;
}

/* Add icons to headers for added clarity */
.ranking-available-items .sortable-rank-subtitle::before {
    content: "\ea6c"; /* arrow right */
    display: block;
    position: absolute;
    left: 0;
    font-family: remixicon;
}

.ranking-sorted-items .sortable-rank-subtitle::before {
    content: "\f15f"; /* sort asc */
    display: block;
    position: absolute;
    left: 0;
    font-family: remixicon;
}

/* Increase sorted ranking items border width for clarity*/
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
    border-width: 2px;
}

/* Set ranking colors */
.select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item,
.ranking-advanced-style .ranking-advanced-available-items .sortable-rank-subtitle {
    color: var(--ru-answer-text-color);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
    background-color: var(--ru-table-alt-color);
}

/* #endregion Ranking */

/**************************************************************/
/* #region Sliders */
/**************************************************************/

/* Fix slider tooltip position */
.slider-list .slider .tooltip.bs-tooltip-top,
.slider-list .slider .tooltip.bs-tooltip-auto[data-popper-placement^=top] {
    margin-top: -36px;
}

/* Fix horizontal slider triangle position */
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
    transform: translateY(0);
}

/* Set slider colors */
.slider-list .slider .slider-handle {
    background-color: var(--ru-primary);
    transition: outline 0.2s; /* add transition so focus-visible outline grabs more attention */
}

.slider-list .slider .slider-handle:focus-visible {
    outline: 3px solid var(--ru-a11y-highlight-color); /*Todo: improve contrast to background color? */
}

.slider-list .slider .slider-handle.custom::before {
    color: var(--ru-primary);
}

.slider-list .slider .slider-selection {
    background-color: var(--ru-secondary);
}

.slider-list .slider .tooltip .tooltip-inner {
    color: var(--ru-primary);
}

.slider-list .slider .slider-handle.custom,
.slider-list .slider.slider-untouched .slider-handle.custom,
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle,
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
    background-color: transparent;
}

.slider.slider-vertical .slider-tick.triangle, .slider.slider-vertical .slider-handle.triangle {
    border-left-color: var(--ru-primary);
    border-right-color: var(--ru-primary);
}

.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
    border-bottom-color: var(--ru-primary);
}


/* Fix emoji slider misalignment on mobile */
.ls-emojislider .slider-labels {
    display: flex;
}

/* Create more helpful shape for emoji slider handle */
.ls-emojislider .slider-handle {
    clip-path: polygon(50% 0%, 0% 33%, 25% 33%, 25% 70%, 0% 70%, 0 100%, 100% 100%, 100% 70%, 75% 70%, 75% 33%, 100% 33%); /* arrow-up shape */
    background-color: var(--ru-primary);
    border-bottom: 9px solid var(--ru-secondary); /* add shading effect for part that covers scale */
}

.ls-emojislider.slider-wrapper {
    color: var(--ru-answer-text-color);
}

/* #endregion Sliders */

/**************************************************************/
/* #region Star Rating */
/**************************************************************/

.star-1.star-drained.star-hover,
.star-2.star-drained.star-hover,
.star-3.star-drained.star-hover,
.star-4.star-drained.star-hover,
.star-5.star-drained.star-hover {
    text-shadow: 2px 2px 2px var(--ru-fruity-gray);
}

.star-cancel.star-hover {
    color: var(--ru-primary);
    text-shadow: 1px 1px 2px var(--ru-fruity-gray);
}

/* apply RU colors to star rating in increasing brightness */
/* TODO: star rating should only be available for 5-pt-choice, but stars.css goes up to 10 so we may need to extend this in the future */
/* TODO: can potentially be replaced with sibling-index() logic but support is not yet baseline */

.star-cancel.star-hover {
    color: var(--ru-secondary);
}

.star-1.star-drained,
.star-1.star-rated-on:not(.star-stub) {
    color: color-mix(in oklab, var(--ru-maroon) 100%, var(--ru-poppy) 0%);
}

.star-2.star-drained,
.star-2.star-rated-on:not(.star-stub) {
    color: color-mix(in oklab, var(--ru-maroon) 75%, var(--ru-poppy) 25%);
}

.star-3.star-drained,
.star-3.star-rated-on:not(.star-stub) {
    color: color-mix(in oklab, var(--ru-maroon) 50%, var(--ru-poppy) 50%);
}

.star-4.star-drained,
.star-4.star-rated-on:not(.star-stub) {
    color: color-mix(in oklab, var(--ru-maroon) 25%, var(--ru-poppy) 75%);
}

.star-5.star-drained,
.star-5.star-rated-on:not(.star-stub) {
    color: color-mix(in oklab, var(--ru-maroon) 0%, var(--ru-poppy) 100%);
}

/* #endregion Star Rating */

/**************************************************************/
/* #region Misc. Questions */
/**************************************************************/

/* Date selector */
.input-group-addon {
    background-color: var(--ru-primary) !important;
    border-color: var(--ru-secondary) !important;
}

.input-group-addon:hover,
.input-group-addon:active,
.input-group-addon:focus {
    background-color: var(--ru-secondary) !important;
    border-color: var(--ru-secondary) !important;
    box-shadow: none;
}

/* Signature pad */
.input-group-text, label .input-group-text {
    background-color: var(--ru-primary);
    border-color: var(--ru-secondary);
}

.geoname_search label {
    color: var(--ru-white);
    font-weight:400;
    font-size:1rem;
}

/* Text Display */
.boilerplate.question-container .ls-label-question p:not(p:first-child){
    /* sensible font size if we have more than 1 paragraph */
    /*TODO: should apply to all questions? */
    font-weight: 400;
    font-size: 1.14rem;
    line-height: 24px;
}

/* #endregion Misc. Questions */

/**************************************************************/
/* #region Misc. Screens */
/**************************************************************/

/* Fix completion window whitespace */
.completed-text {
    margin: 2rem 0;
}

.completed-text > div {
    margin-top:1rem;
}

/* Fix token & captcha screen bottom margin */
.token-page .load-survey-submit,
.form-captcha .load-survey-input {
    margin-bottom: 2rem;
}

/* #endregion Misc. Screens */

/**************************************************************/
/* #region Media Queries */
/**************************************************************/

@media (max-width: 1200px) {
    /* Hide background image */
    body {
        background-image:none!important;

        /* Remove background padding */
        .outerframe {
            margin-top: 1.5rem;
        }
        #main-col {
            padding: 0 1em;
        }
    }
}

@media (max-width: 768px) {
    /* Keep navbar consistent across all screen sizes */
    .navbar {
        padding-top: 0.5rem;
        padding-bottom:0.5rem;
    }

    /* Align logo left again */
    .logo-container {
        left: 0;
        transform: translateX(0);
    }

    /* Align lang select left again */
    #firstpage-changelang {
        flex-direction: row;
    }

    /* Move bootstrap button padding to bottom now they're listed vertically */
    .bootstrap-buttons-div {
        padding-right: 0;
        margin-bottom: 0.75rem !important;
    }

    /* Fix gender & yesno buttons not shifting to vertical */
    .gender-button.btn-group,
    .yesno-button.btn-group {
        display: flex;
        flex-direction: column;

        > .btn:not(:last-child) {
            margin-right: 0;
        }
    }

}

@media (max-width: 360px) {
    /** Things tend to break at this size, but we do our best for accessibility sake */

    /* Fix navigation button overlap */
    #navigator-container {
        flex-direction: column-reverse;
        gap: 0.5rem;

        .text-start, .text-end, .ls-move-btn {
            width: 100%;
        }
    }

    /* Shrink left/right padding */
    #outerframeContainer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* #endregion Media Queries */