/************************************
    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: #00b7d6;
    --color-violet: #4a4099;
    --color-dblue: #493c9b;
    --color-dgreen: #00c45d;
    --color-green: #18d672;
    --color-blue: #4884c3;
    --color-gray: #333;
    --color-mgray: #555;
    --color-red: #c94658;
    --color-border: #a4b1b7;
    --color-gradient: #c2d6eb;
    --max-line-length: 80ch;
}

body {
    background: linear-gradient(to bottom, #fff 80%, var(--color-gradient) 100%);
    min-height: 100vh;
}

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

.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 {
    background: linear-gradient(-170deg, var(--color-dblue), var(--color-dgreen)) !important;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    border-bottom: 0 !important;
}

.navbar .container-fluid {
    padding-left: 0;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    min-height: unset;
    margin-right: 0;
}

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

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

.logo-container {
    margin-right: 1rem;
}

.logo-container > img {
    padding: unset;
}

/* Welcome screen & Privacy Notice styles */
: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);
}

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

:is(.group-title, .survey-name, .completed-text h1)::before {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: -1.5rem;
    width: 2rem;
    height: 2rem;
    display: block;
    border-left: 10px solid var(--color-blue);
    border-bottom: 10px solid var(--color-dgreen);
}

:is(.group-title, .survey-name, .completed-text h1)::after {
    content: '';
    position: absolute;
    top: -0.5rem;
    right: -1.5rem;
    width: 2rem;
    height: 2rem;
    display: block;
    border-right: 10px solid var(--color-violet);
    border-top: 10px solid var(--color-lblue);
}

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

}

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

.group-title {
    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;
    color: var(--color-violet) !important;
}

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