:root {
    --rw-blue: #0751b9;
    --rw-blue-accent: #3585ea;
    --rw-navy: #032045;
    --rw-page-bg: #eef3f9;
}

body {
    background-color: var(--rw-page-bg) !important;
    color: var(--rw-navy) !important;
}

header#survey-nav.navbar.fixed-top {
    background: var(--rw-blue) !important;
    border-bottom: 3px solid var(--rw-navy);
    min-height: 64px;
    display: flex;
    align-items: center;
}

header#survey-nav .navbar-brand.logo-container {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
}
header#survey-nav .navbar-brand.logo-container img.logo {
    max-height: 48px;
    width: auto;
}

/* Everything on this theme's nav bar (language, save/load, question index)
   lives inside the single "..." dropdown popup, not directly on the blue
   bar - so only the toggle button/icon itself needs to be visible on blue.
   The popup itself is a normal white menu and should keep its normal dark
   text; do NOT force nav-link colors globally here, or items inside the
   white popup (e.g. the "Back" link) become white-on-white and vanish. */
header#survey-nav .navbar-toggler,
header#survey-nav .navbar-toggler .ri-more-fill,
header#survey-nav span[class^="ri-"] {
    color: #ffffff !important;
}

.top-container.container-fluid {
    margin-top: 72px;
}

div.outerframe.container-fluid {
    background: #ffffff;
    max-width: 900px;
    margin: 1.5rem auto 3rem auto;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(3, 32, 69, 0.12);
}

.btn-primary,
.ls-move-btn.ls-move-next-btn,
.action--ls-button-submit.btn-primary {
    background-color: var(--rw-blue) !important;
    border-color: var(--rw-blue) !important;
}
.btn-primary:hover,
.ls-move-btn.ls-move-next-btn:hover {
    background-color: var(--rw-navy) !important;
    border-color: var(--rw-navy) !important;
}

.progress-bar {
    background-color: var(--rw-blue-accent) !important;
}

.survey-name.large-heading {
    color: var(--rw-navy) !important;
    font-weight: 700;
}

a, .ls-link-action {
    color: var(--rw-blue);
}

/* Everything below overrides the theme-color-preset's hardcoded green
   (#14AE5C) with our brand blue, for every place it actually shows up
   while taking a survey. (There's a long tail of green also hardcoded
   into admin-only/demo widgets like carousels that never render on a
   real survey page - not worth chasing those.) */
:root {
    --bs-primary: var(--rw-blue) !important;
    --bs-primary-rgb: 7, 81, 185 !important;
}

.checkbox-item input[type=checkbox]:checked + label::after,
.checkbox-item input[type=checkbox]:checked + label,
.radio-item input[type=radio]:checked + label {
    color: var(--rw-blue) !important;
}
.checkbox-item input[type=checkbox]:checked + label::before,
.radio-item input[type=radio]:checked + label::before {
    border-color: var(--rw-blue) !important;
}
.radio-item input[type=radio] + label::after,
.radio-item input[type=radio]:checked + label::after {
    background-color: var(--rw-blue) !important;
}
.checkbox input[type=checkbox]:checked:after,
.checkbox-inline input[type=checkbox]:checked:after {
    background-color: var(--rw-blue) !important;
    border-color: var(--rw-blue) !important;
}

.btn-outline-primary {
    color: var(--rw-blue) !important;
    border-color: var(--rw-blue) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--rw-blue) !important;
    border-color: var(--rw-blue) !important;
    color: #ffffff !important;
}
.btn-link {
    color: var(--rw-blue) !important;
}

/* Image-select / picture-choice questions */
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label {
    border-color: var(--rw-blue) !important;
}
input.imageselect-checkbox:checked ~ .imageselect-select::before {
    border-color: var(--rw-blue) !important;
}
input.imageselect-checkbox:checked ~ .imageselect-select::after,
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:after {
    background-color: var(--rw-blue) !important;
}

/* Ranking question borders */
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item,
.ranking-advanced-style .sortable-rank,
.ranking-advanced-style .ranking-advanced-sorted-items .sortable-item {
    border-color: var(--rw-blue) !important;
}

/* "..." survey-options popup: hover/active highlight */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
    background-color: var(--rw-blue) !important;
}