body {
    font-family: sans-serif;
    background: #eee;
    margin: 0;
    --modify: blue;
    --submit: green;
    --danger: red;
    --disabled: #999999;
    --header-bg: #006eb5;
    --header-bg-faded: #9ecae7;
    --divider: #3d4f5b;
    --revisions: #444444;
    --header-link-color: #c6f1ff;
    --header-height: 60px;
    --header-img-height: 40px;
    --heading-margin: 5px;
    --list-margin: 5px;
    --light-blue: #99d0ed;
    --primary-blue: #3eb3e2;
}

/* Basic page elements */

main {
    margin: auto 25px;
}

section {
    background: white;
    border-radius: 5px;
    border: solid 1px #aaa;
    margin: 50px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

section .description {
    margin-bottom: 15px;
}

section .description ul li strong {
    display: block;
}

h2 {
    font-size: 20px;
    font-weight: normal;
    color: navy;
}

h3, h4 {
    font-weight: normal;
}

ul, ol, li {
    margin: var(--list-margin);
}

p {
    white-space: pre-wrap;
    color: #555555;
}

hr {
    border: none;
    margin: 25px 0;
}

/* Header */

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: var(--header-height);
    background: var(--header-bg);
    color: white;
}

header span {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 10px;
}

header img {
    height: var(--header-img-height);
    width: auto;
}

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

/* Table of contents */

.question-navigator {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.question-navigator button {
    font-size: 18px;
}

/* Questions */

.question-heading {
    display: flex;
    justify-content: space-between;
}

textarea {
    width: 100%;
    min-width: 100%;
    border: solid 1px #aaaaaa;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

fieldset > div {
    margin: 5px;
    padding: 0 0 0 40px;
}

fieldset div div {
    margin: 5px;
}

label, legend {
    position: absolute;
    left: -999em; /* offscreen without being invisible to screen readers */
}

label.checkbox-label, .type-checkbox.has-options div div label, .type-radio label, .type-file label:nth-of-type(2),
label[for=query] {
    position: inherit;
}
label.checkbox-label > div {
    display: inline;
}

.type-checkbox li, .type-radio li {
    list-style-type: none;
}

.type-file {
    line-height: 30px;
    margin-top: -5px;
    margin-left: 15px;
}

.type-file input[type=checkbox] {
    vertical-align: middle;
}

.type-file a {
    margin-left: 10px;
}

.type-file input[type=file] {
    margin-left: 18px;
}

.question-field {
    padding-left: 10px;
    border-left: solid 5px var(--header-bg);
}

.question-field:nth-of-type(even) {
    border-left-color: var(--header-bg-faded);
}

.question-field h4 {
    margin-top: 0;
}

select, input[type=text], textarea {
    font-size: 16px;
}

select {
    padding: 5px;
}

input[type=checkbox] {
    width: 16px;
    height: 16px;
    vertical-align: bottom;
}

input[type=radio] {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}

/* Table questions */

.table-wrapper {
    position: relative;
    /*padding: 5px;*/
}

.table-wrapper table {
    min-width: 100%;
}

.table-wrapper ul {
    padding-inline-start: 0;
    margin: 0;
}

.table-wrapper li input[type=checkbox] {
    width: 14px;
    height: 14px;
}

.table-wrapper li {
    margin: 2px 5px;
}

.table-wrapper ul label {
    font-size: 14px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
}

.table-scroll.fade-left::before {
    content: " ";
    z-index: 100;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25px;
    /* gradient starts partly-opaque at the left and becomes transparent at the right */
    background: rgb(0, 0, 0);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.table-scroll.fade-right::after {
    content: " ";
    z-index: 100;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 25px;
    /* gradient starts partly-opaque at the right and becomes transparent at the left */
    background: rgb(0, 0, 0);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

table {
    table-layout: fixed;
    width: 1px; /* this is ignored but needs to be set to some value */
}

table, th, td {
    border: 1px solid #aaaaaa;
}

th {
    font-weight: normal;
    font-size: 14px;
}

th, td {
    width: 300px;
}

th.type-checkbox.single, td.type-checkbox.single {
    width: 160px;
}

td {
    padding: 5px;
}

th.type-file, td.type-file {
    width: 125px;
}

input[type="file"] {
    display: block; /* This makes the input appear on its own line */
    margin-bottom: 100px; /* Adds some space below */
}

th.control, td.control {
    width: 125px;
}

td.control div {
    display: flex;
}

.control [name=delete] {
    font-size: 18px;
}

td select {
    max-width: 100%;
}

td li {
    list-style: none;
    display: flex;
    justify-content: center;
}

td.type-file {
    width: 500px;
}

td.type-file li {
    display: unset;
}

.type-fixed, form th {
    background-color: rgb(201, 222, 240);
}

.type-fixed h1 {
    font-size: 18px;
    margin-block-start: 0em;
    margin-block-end: 0.83em;
}

.type-fixed div {
    justify-content: left;
}

th.control {
    background-color: white;
}

td.answer-cell > div > li > label {
    position: absolute;
    left: -999em; /* offscreen without being invisible to screen readers */
}

td.answer-cell.type-checkbox.has-options li {
    justify-content: left;
}

/* Revisions dropdown */

.revisions {
    font-size: 10px;
    color: var(--revisions);
}

.revisions.disabled {
    color: var(--disabled);
}

.question:not(:last-child) {
    padding-bottom: 30px;
    border-bottom: solid 1px #eeeeee;
}

summary {
    cursor: pointer;
    padding-left: 1rem;
}

/* Buttons */

button {
    border-radius: 5px;
    border: none;
    margin: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    align-self: center;
}

button:disabled {
    color: var(--disabled);
    background: white;
    border: solid 1px var(--disabled);
    cursor: unset;
}

button:disabled:hover {
    color: var(--disabled);
    background: white;
    border: solid 1px var(--disabled);
}

.submit {
    color: var(--submit);
    background: white;
    border: solid 1px var(--submit);
}

.submit:hover {
    color: white;
    background: var(--submit);
}

.modify {
    color: var(--modify);
    background: white;
    border: solid 1px var(--modify);
}

.modify:hover {
    color: white;
    background: var(--modify);
}

.danger {
    color: var(--danger);
    border: solid 1px var(--danger);
    background: white;
}

.danger:hover {
    color: white;
    background: var(--danger);
}

.link {
    color: blue;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-align: left;
}

.link.disabled {
    color: black;
    cursor: unset;
}

.submit-link {
    margin-block-end: 0;
}

/* Login page */

.login label {
    position: static;
}

.login table {
    border: none;
    table-layout: auto;
}

section.login {
    margin: 25px auto auto;
    display: inline-flex;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

/* Homepage */

.project-group table {
    table-layout: auto;
    width: 100%;
}

.project-group th, #main-nav a {
    background: var(--header-bg);
    color: white;
}

.project-group th, .project-group td {
    width: unset;
    padding: 5px;
}

.project-group th {
    cursor: pointer;
}

.project-group .cat {
    white-space: nowrap;
}

.project-group .editor span + span::before {
    content: ", ";
}

.project-group th.light {
    background-color: rgb(201, 222, 240);
    color: black;
}

#main-nav {
    display: flex;
}

#main-nav a {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    padding: 10px 20px;
}

section.instructions p, section.instructions ul, section.instructions h3, section.instructions h4, section.questions ul, section.instructions h3, section.questions h4 {
    max-width: 1000px;
}

/*https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/*/
.grow-wrap > div {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

.grow-wrap > div::after {
    /* Note the weird space! Needed to prevent jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;
    /* word-break: break-all; */

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap > div > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap > div > textarea,
.grow-wrap > div::after {
    /* Identical styling required!! */
    border: 1px solid black;
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
    box-sizing: border-box;
}

section.responses-overview h2, section.responses-overview h3,
section.responses-overview h4, section.responses-overview h5 {
    margin-block-end: 0;
}

section.responses-overview table {
    width: 100%;
}

section.responses-overview th:last-child {
    width: 900px
}

.ofi-form.review section {
    display: block;
}

.ofi-form.review p {
    margin-top: 0;
}

.ofi-form.review b {
    padding-bottom: 0.5rem;
    display: block;
}

.ofi-form.review table, th, td {
    width: auto;
    border: 1px solid #999;
}

.ofi-form.review table {
    border-spacing: 0;
    font-family: "Courier New", serif;
    overflow-wrap: break-word;
    width: 100%;
}

.ofi-form.review .table-scroll {
}

.ofi-form.review .table-scroll button {
    margin-bottom: .5rem;
    background-color: var(--light-blue);
}

.ofi-form.review .table-scroll button:hover {
    background-color: var(--primary-blue);
}

.ofi-form.review td {
    font-size: 14px;
}

.ofi-form.review th {
    text-align: left;
    padding: 5px;
    font-weight: bold;
}

.ofi-form.review .question:not(:last-child) {
    border: none;
    padding-bottom: .5rem;
}

.ofi-form.review .question-part + .question-part {
    padding-top: .5rem;
}

.ofi-form.review .index-col {
    width: .5rem;
    white-space: nowrap;
    display: none;
}

.ofi-form.review .answer-table {
    display: none;
    width: auto;
    max-width: 100%;
}

.ofi-form.review .answer-table + .answer-table {
    margin-top: 1rem;
}

.ofi-form.review .answer-table.table-1 {
    display: table;
}

/*temp*/
.ofi-form.review th, .ofi-form.review td {
    display: none;
}

.ofi-form.review th.this-table, .ofi-form.review td.this-table {
    display: table-cell;
}

/*review*/

.ofi-form.review td.type-checkbox {
    white-space: nowrap;
}

.ofi-form.review .type-fixed {
    background: none;
}

.ofi-form.review .index-col {
    display: table-cell;
}

.ofi-form.review .type-checkbox {
    width: 100px;
}

.ofi-form.review .date {
    width: 100px;
    max-width: 100px;
}

.ofi-form.review .email {
    max-width: 125px;
}

.ofi-form.review td.type-checkbox, .ofi-form.review td.date {
    white-space: nowrap;
}

.ofi-form.review #print {
    background-color: var(--primary-blue);
    font-size: 16px;
    margin: 1rem 0 0 0;
    padding: 5px 15px;
}

.ofi-form.review #print:hover {
    background-color: var(--header-bg);
}

.ofi-form.review #export_report {
    text-decoration: none;
    font-size: 16px;
    color: black;
}

.ofi-form.review button {
  padding: 10px 20px; /* Adds padding inside the button to increase its size */
  font-size: 18px; /* Changes the size of the text, which can also affect the button's size */
}

#toast {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding: 16px;
    border-radius: 8px;
    z-index: 1000;
}

@media print {
    .ofi-form.review p, .ofi-form.review .legible, .ofi-form.review tr {
        break-inside: avoid;
        /*page-break-inside: auto;*/
    }

    .ofi-form.review .answer-table {
        display: table;
    }

    .ofi-form.review th, .ofi-form.review td {
        display: none;
    }

    .ofi-form.review th.this-table, .ofi-form.review td.this-table {
        display: table-cell;
    }

    .no-print, .export_report {
        display: none;
    }



    main, section {
        margin: 0;
        border: none;
    }

}

.ofi-form .legible {
    padding-left: 1.5rem;
    max-width: 800px;
    font-family: "Courier New", serif;
    display: block;
    padding-bottom: 0.5rem;
}

#popup-window {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 500px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.submit-confirmation {
    background-color: white;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    width: 30%;
    height: 17%;
    border-radius: 5px;
}

.submit-confirmation > h1 {
    margin: auto;
    display: block;
    text-align: center;
}

.submit-confirmation > p {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    display: block;
    margin: auto;
    text-align: center;
}

#close-btn {
    background-color: #006eb5;
    color: white;
    margin: auto;
    border: 1px solid black;
    padding: 10px 20px 10px 20px;
}

#category-dropdown {
    display: inline-block;
}

#filter-btn {
    background-color: #006eb5;
    color: white;
    margin: auto;
    border: 1px solid black;
    padding: 4px;
}

label[for=program-select] {
    position: inherit;
}

#program-select {
    width: 10px;
    display: inline-block;
}