/*
    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
*/

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/work-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/work-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/work-sans-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
    font-size: 16px;
    --color-lblue: #fcfcfc;
    --color-dblue: rgb(27, 20, 100);
    --color-link: rgb(204,51,102);
    --color-link-hover: rgb(51,51,102);
    --color-green: rgb(245,156,0);
    --color-gray: #333;
    --color-mgray: #555;
    --color-red: rgb(245,156,0);
    --color-border: #a4b1b7;
    --color-header: rgb(27, 20, 100);
    --max-line-length: 80ch;
}

.text-info {
    --bs-info-rgb: 51,51,102;
}

body {
    background-image: url('../files/research-matters-bg.png');
    background-color: #fbfbfb;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 90px;
    background-size: 100vw;
    font-family: 'Work Sans', 'Open Sans', Arial, sans-serif !important;
    padding-top: 90px;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

a:hover {
    color: var(--color-link-hover);
}

dl, ol, ul, li:last-child {
    margin-bottom: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
}

.h3, .h4, .h5 {
    margin-bottom: 0.5rem;
}

.h6 {
    margin-bottom: 0;
}

.dfn {
    position: relative;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1.5rem;
    color: var(--color-gray);
    font-style: italic;
}

.dfn::before {
    position: absolute;
    top: -2rem;
    left: -1.5rem;
    content: "\2937";
    font-weight: 700;
    font-size: 3rem;
}

:is(.survey-description, .blue-inset, .group-description) .dfn::before {
    color: #fff;
}

.question-container.boilerplate {
    background-color: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 0;
}

#outerframeContainer {
    max-width: 1170px;
   -moz-hyphens: none;
   -ms-hyphens: none;
    hyphens: none;    
}

body .top-container {
    margin-top: 0 !important;
}

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

.progress-bar {
    background-color: var(--color-green);
    text-align: right;
    padding-right: 0.5rem;
}

/* Navigation bar styles */
#survey-nav {
    background-color: var(--color-dblue) !important;
}

#survey-nav .navbar-brand, #survey-nav .navbar-nav .nav-link {
    color: #fff;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    min-height: unset;
}

.navbar > [class^="container"] {
    justify-content: flex-start;
}

.logo-container > img {
    max-height: 50px;
    margin-block: 20px;
}

/* Welcome screen & Privacy Notice styles */
.survey-description, .group-description, .blue-inset {
    margin: 1rem 0;
    padding: 2rem;
}

.group-description {
    padding: unset;
}

.well {
    background-color: unset;
    border: unset;
    margin: unset;
    padding: unset;
    box-shadow: unset;
    -webkit-box-shadow: unset;
}

:is(.survey-description, .blue-inset) :is(p, ul, ol) {
    margin: 0 auto 1rem;
    max-width: var(--max-line-length);
    color: #111;
}

.group-description > * {
    max-width: 90ch;
    color: #111;
}

:is(.survey-description, .group-description, .blue-inset) > *:last-child {
    margin-bottom: 0;
}

.privacy {
    margin: 1rem auto;
    max-width: calc(var(--max-line-length) + 4rem);
}

.privacy-block {
    border: none;
}

#datasecurity_notice {
    margin-bottom: 1rem;
    padding: 2rem;
    font-size: 0.95rem;
    background-color: #fefefe;
    border: 1px solid var(--color-border);
}

#datasecurity_notice.limit-text-window {
    max-height: 40vh;
}

#datasecurity_notice h1 {
    margin-top: 0;
    font-weight: 600;
    font-size: 1.5rem;
}

#datasecurity_notice ul {
    margin-bottom: 1rem;
}

#datasecurity_notice p:last-child {
    margin-bottom: 0;
}

.completed-wrapper {
    max-width: calc(90ch + 4rem);
    margin: 4rem auto;
    padding: 1rem 2rem;
    background-color: #fcfcfc;
    border: 1px solid var(--color-border);
}

/* Buttons */
.btn-group-lg > .btn, .btn-lg {
    border-radius: 0;
}

.btn-primary {
    border: none;
    background-color: var(--color-green);
}

.btn-primary:hover {
    background-color: var(--color-link-hover);
}

.alert-warning {
    background-color: #a3c1e1;
    border-color: rgb(74, 133, 193);
    color: #19324d;
}


/* Heading styles */
.group-title, .survey-name, .completed-text h1 {
    color: var(--color-header);
    position: relative;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
}

.survey-name, .completed-text h1 {
    font-size: 3rem;
}


/* Mandatory indicator styles */
.mandatory-notice {
    margin-bottom: 0.5rem;
    padding-left: 0.8rem;
    font-style: italic;
}

.asterisk {
    margin-left: -1.25rem;
}

.fa-asterisk {
    padding-right: 0.5rem;
}

sup.fa-asterisk {
    top: 0;
}

/* Question box styling */
.question-container {
    padding: 1rem;
    background-color: #fefefe;
    border: 1px solid var(--color-border);
}

.question-title-container {
    padding: 0 0 0 1rem;
}

.answer-container, .question-help-container, .question-valid-container {
    padding: 0 1rem;
}

.ls-questionhelp {
    padding-top: 0.5rem;
    color: var(--color-mgray);
    font-style: italic;
}

.ls-questionhelp::before {
    font-style: normal;
}

[id^="vmsg"].ls-questionhelp::before {
    color: var(--color-dblue);
}

.text-danger {
    color: var(--color-green) !important;
}

.question-valid-container .text-danger {
    font-weight: 600;
}

.ls-em-success {
    font-weight: 400;
    color: var(--color-orange);
}

.input-error input {
    border-color: var(--color-green);
}

/* Question bits styling */
.question-number, .question-code {
    font-weight: 700;
    color: var(--color-green) !important;
}

.question-number {
    color: var(--color-dblue) !important;
}

.form-control {
    border-color: var(--border-color);
}

.form-horizontal .control-label.col-12 {
    text-align: left;
}

.radio-item label::before {
    top: 2px;
    border-color: var(--border-color);
}

table .radio-item label::before {
    top: 0;
}

.radio-item label::after {
    width: 11px;
    height: 11px;
    left: 3px;
    top: 5px;
    background-color: var(--color-green);
}

table .radio-item label::after {
    top: 3px;
}

.checkbox-item label::before {
    top: 0.25rem;
}

.checkbox-item label::after, .form-check-input:checked {
    background-color: var(--color-green);
    color: #fff;
    border-color: #111;
    top: calc(0.25rem + 1px);
}

.yesno-button .btn-check + .btn-primary {
    border: 0;
}

.yesno-button .btn-check:nth-child(1) + .btn-primary:hover {
    background-color: var(--color-link-hover);
}

.yesno-button .btn-check:nth-child(1):checked + .btn-primary {
    background-color: #111;
    color: var(--color-green);
}

.yesno-button .btn-check:nth-child(3) + .btn-primary:hover {
    background-color: var(--color-link-hover);
}

.yesno-button .btn-check:nth-child(3):checked + .btn-primary {
    background-color: #111;
    color: #f44;
}

table, thead, tfoot, tbody, th, td, tr,
  .table-bordered > thead > tr > :is(td, th),
  .table > :not(:first-child) {
    border: 0;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(131,187,117,0.2);
}

.table-bordered > :is(thread, tbody, tfoot) > tr > :is(th, td) {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-left: 0;
    border-right: 0;
}

.table-array-radio .ls-odd, .table-10-point-array .ls-odd, .table-bordered tbody td:first-child, .table-bordered tbody th:first-child {
    background-color: #ecf8fc;
}


/* Default overrides */
.text-center {
    text-align: unset !important;
}

.survey-name, .completed-text h1 {
    text-align: center !important;
}


/* ------------------------------------------------------------------------ 
   Custom question styles 
   ------------------------------------------------------------------------ */

/* Attach question box to previous question box */
.attach-to-previous {
    margin-top: calc(-2rem - 1px);
    border-top: 0;
}

/* Style time text in attendance subquestions (eg. [12.00–16.00] Session 2 */
.event-time {
    display: inline-block;
    width: fit-content;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Style last column for 'No Answer' in array questions differently */
.array-noanswer :is(th, td):last-child {
    background-color: #f5f5f5;
    background-clip: padding-box;
    border-left: 1px dashed #999;
}

/* Put a background on a text-display question */
.question-container.backdrop {
    background-color: #eef9fc;
    border: 1px solid var(--color-border);
    padding: 1rem;
    padding-inline-end: 2rem;
    margin-block: 1rem;
}

/* Style sub-headers in multiple choice lists */
.multiple-choice-heading {
    font-weight: bold;
    font-size: 0.9rem;
}

.inserted-sub-heading:not(:first-child) {
    margin-top: 0.75rem;
}