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

:root {
    font-size: 16px;
    --color-lblue: #b8e5f3;
    --color-dblue: rgb(0, 99, 144);
    --color-dgreen: #14b861;
    --color-green: #18d672;
    --color-gray: #333;
    --color-mgray: #555;
    --color-red: #c94658;
    --color-border: #a4b1b7;
    --max-line-length: 80ch;
}

body {
    background-image: url('../files/se-logo-background.png');
    background-attachment: fixed;
    background-size: calc(100vh * 0.8);
    background-repeat: no-repeat;
    background-position: top calc(100vh * 0.05) right -15rem;
}

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

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

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 */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    min-height: unset;
}

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

/* Welcome screen & Privacy Notice styles */
.survey-description, .group-description, .blue-inset {
    margin: 1rem 0 1rem -99rem;
    padding: 2rem 2rem 2rem 99rem;
    background-color: var(--color-lblue);
}

.completed-wrapper .blue-inset {
    margin: 0 -4rem;
    padding: 2rem;
}

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

.group-description .well {
	min-height: unset;
	padding: unset;
	margin-bottom: unset;
	background-color: unset;
	border: unset;
	border-radius: unset;
	-webkit-box-shadow: unset;
	box-shadow: unset;
}

.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: 0 4rem;
    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: #111;
}

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

/* Set gray background box */
.group-outer-container {
    position: relative;
}

.group-container::before {
    content: '';
    display: block;
    z-index: -1;
    background-color: #ebecec;
    position: absolute;
    top: 13em;
    left: -99em;
    right: 10em;
    bottom: 7em;
}

/* Heading styles */
.group-title, .survey-name, .completed-text h1 {
    position: relative;
    margin-bottom: 2rem;
    font-weight: 700;
    text-align: left;
}

:is(.group-title, .survey-name, .completed-text h1)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -4rem;
    width: 3rem;
    display: block;
    border-bottom: 3px solid var(--color-green);
}

.survey-name, .completed-text h1 {
    color: #fff;
    font-size: 3rem;
    text-transform: uppercase;
    text-shadow: -1px -1px 0.5px #444, 1px -1px 0.5px #444, -1px 1px 0.5px #444, 1px 1px 0.5px #444;
    
}

.group-title {
    color: var(--color-gray);
    font-size: 2rem;
}


/* 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-dgreen);
}

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

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

/* 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-green);
}

.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-red);
}

.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;
}

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

.survey-description.text-info {
    color: unset !important;
}