/* Fonts */

/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v51-latin-regular-4279528ce0e7dc28919e6f8ce5f0eaa5.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/roboto-v51-latin-regular-b3eb8ed0ff6091efdfc71f16dd9848f2.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/roboto-v51-latin-italic-edbbd00269c18f7d0a4bccdc5cf1d89b.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/roboto-v51-latin-italic-5d796e135ab80ecfd8cd9d1d5d919f04.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/roboto-v51-latin-500-55cfeb5304f00ff33469dc76a3b30758.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('/fonts/roboto-v51-latin-500-69ea7ef233df306fb644bb22b021629a.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* Boostrap */

:root {
    --bs-font-sans-serif: Roboto, Arial, sans-serif;

    --bs-primary: #1E6761;
    --bs-primary-rgb: 30, 103, 97;
    --bs-primary-darker: #17524d;
    --bs-primary-darkest: #123e3a;

    --bs-secondary: #DFE9E8;
    --bs-secondary-rgb: 223, 233, 232;
    --bs-secondary-darker: #c4d6d5;

    --bs-primary-text-emphasis: #FFFFFF;
    --bs-secondary-text-emphasis: #1E6761;

    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);

    --bs-light: #F7F7F7;
    --header-height: 4rem;

    --lock-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a6b73%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2211%22%20width%3D%2214%22%20height%3D%2210%22%20rx%3D%222%22%20ry%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221%22%20fill%3D%22%235a6b73%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");
    --completed-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a6b73%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-darker);
    --bs-btn-hover-border-color: var(--bs-primary-darker);
    --bs-btn-active-bg: var(--bs-primary-darkest);
    --bs-btn-active-border-color: var(--bs-primary-darkest);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary-darkest);
    --bs-btn-active-border-color: var(--bs-primary-darkest);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn {
    white-space: nowrap;
}

.alert-primary {
    --bs-alert-bg: var(--bs-primary);
    --bs-alert-border-color: var(--bs-primary-darkest);
}

.alert-secondary {
    --bs-alert-bg: var(--bs-light);
    --bs-alert-border-color: var(--bs-secondary);
    --bs-alert-color: var(--bs-body-color);
}

.accordion {
    --bs-accordion-active-bg: var(--bs-secondary);
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-border-color: var(--bs-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), 0.25);
}

#content .accordion-header {
    border: none;
    padding: 0;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-secondary);
    color: var(--bs-secondary-text-emphasis);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-secondary-text-emphasis);
}

.accordion-button:disabled {
    background-color: var(--bs-light);
    color: var(--bs-secondary-color);
}

.accordion-button:disabled:after {
    background-image: var(--lock-icon) !important;
}

.accordion-button.completed:after {
    background-image: var(--completed-icon) !important;
}

.accordion-button.completed:not(.collapsed)::after {
    transform: rotate(0deg);
}

.accordion-button:focus {
    border-color: var(--bs-secondary-text-emphasis);
}

.form-control {
    --bs-border-width: 2px;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb), 0.25);
}

.form-check-input {
    background-color: var(--bs-white);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.text-muted {
    font-size: 16px;
}

.list-group {
    --bs-list-group-action-color: var(--bs-list-group-action-color);
    --bs-list-group-action-hover-bg: var(--bs-secondary);
    --bs-list-group-action-active-bg: var(--bs-secondary-darker);
}

.list-group-item {
    min-height: 4.5rem;
}

.mb-n3 {
    margin-bottom: -1rem;
}

.mt-n4 {
    margin-top: -1.5rem;
}

a:focus-visible,
button:focus-visible,
audio:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Base */

html {
    font-size: 18px;
}

html,
body {
    overflow-x: hidden;
    hyphens: auto;
}

[x-cloak] {
    display: none !important;
}

a {
    color: var(--bs-primary);
}

a.active {
    color: inherit;
    text-decoration: none;
}

strong, th {
    font-weight: 500;
}

:target {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.study-id {
    letter-spacing: 1px;
}

.nowrap {
    white-space: nowrap;
}

.icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    background-repeat: no-repeat;
}

.icon--completed {
    background-image: var(--completed-icon);
}

.icon--lock {
    background-image: var(--lock-icon);
}


/* Header */

#header nav {
    height: var(--header-height);
}

@media (max-width: 768px) {
    #header .navbar-collapse {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));

        padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);

        background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity));
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}

#header {
    z-index: 1030;
}

.navbar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1020; /* Smaller than .fixed-top (1030) */
}


/* Footer */

#footer {
    font-size: 16px;
}

#footer-help {
    background-color: var(--bs-light);
}

#footer-help h6 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}


/* Content */

#content {
    padding-top: var(--header-height);
}

#content .separator {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-primary);
}

#content h1,
#content h2,
#content h3,
#content h4 {
    font-weight: normal;
    hyphens: none;
    margin-top: 2rem;
}

#content h1 {
    font-size: 1.7rem;
}

#content h2 {
    font-size: 1.4rem;
}

#content h3 {
    font-size: 1.2rem;
}

#content h4 {
    font-size: 1rem;
    font-weight: 500;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content p,
#content ol,
#content ul,
#content .accordion {
    margin-bottom: 1.25rem;
}

#content ul {
    list-style-type: disc;
}

#content ol {
    list-style-type: decimal;
}

#content li {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

#content .accordion h2 {
    margin-bottom: 0;
    margin-top: 0;
}

#content .accordion p {
    margin-top: 1rem;
}

.page-section {
    padding: 2rem 0;
}

.page-section > .container > *:first-child,
.page-section > .container > .row:first-child > *:first-child > *:first-child,
.alert > *:first-child {
    margin-top: 0 !important;
}

.page-section > .container > *:last-child,
.page-section > .container > .row:last-child > * > *:last-child,
.alert > *:last-child {
    margin-bottom: 0 !important;
}

.page-section--background {
    background-color: var(--bs-light);
}

#content .page-section--hero h2 {
    font-size: 1.3rem;
    font-weight: 500;
}

#content .page-section--hero h3 {
    font-size: 1rem;
    font-weight: 500;
}

#content .page-section > .container {
    max-width: 540px;
}

img.decoration {
    width: 200px;
}

@media (min-width: 768px) {
    #content .page-section > .container {
        max-width: 720px;
    }
}

.page-section .row img {
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: contain;
}

.page-section .row img.small {
    width: 85%;
}

@media (max-width: 768px) {
    .page-section .row img {
        max-height: 250px;
    }
}


/* Breadcrumb */

#content ul.breadcrumb,
#content ol.breadcrumb {
    list-style-type: none;
}

#content ul.breadcrumb li,
#content ol.breadcrumb li {
    margin: 0;
}


/* Progress bar */

#progress-bar-container {
    position: fixed;
    top: var(--header-height);
    z-index: 1035;
    width: 100%;
    height: 3px;
}

#progress-bar {
    background-color: var(--bs-primary);
    height: 3px;
    width: 0;
}


/* Modal */

body.modal-open,
body.modal-open .fixed-top,
.modal {
    padding-right: 0 !important;
}

body.modal-open {
    overflow: auto !important;
}


/* Modules */

#content .module-tasks p {
    margin-bottom: 0.75rem;
}

#content .module-tasks ol {
    padding-left: 1rem;
}

#content .module-tasks li {
    margin-left: 0.5rem;
}


/* Print */

@media print {

    body {
        font-size: 12pt;
    }

    #content {
        padding-top: 0;
    }

    #content .page-section > .container {
        max-width: 100%;
    }

    #content p {
        text-align: justify;
    }

    #content .accordion-item {
        border: none;
    }

    #content .accordion-collapse {
        display: block !important;
        height: auto !important;
    }

    #content .accordion-button {
        padding-bottom: 0;
    }

    #content .accordion-button::after {
        display: none !important;
    }

    #content .accordion-body {
        padding-top: 0;
        padding-bottom: 0;
    }

}