.radio-button-set {
    margin: 10px;
}

.radio-button-set input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-button-set label {
    margin-right: 5px;
    display: inline-block;
    background-color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    color: #737373;
    border: 1px solid lightgray;
    border-radius: 5%;
}

.radio-button-set label:hover {
    background-color: lightgray;
}

.radio-button-set input[type="radio"]:focus + label {
    background-color: lightgray;
}

.radio-button-set input[type="radio"]:checked + label {
    border-color: black;
    color: black;
    font-weight: bold;
}

#short-url-sample {
    font-weight: bold;
}

.extra-space-above {
    margin-top: 2em;
}

.activity-links {
    text-align: center;
    margin: 1em;
}

.activity-links a {
    margin: 0 2em;
}

.centered-heading {
    text-align: center;
    margin: 1em;
}

.interface-hint {
    font-size: 8;
    color: lightgray;
    font-weight: 300;
    text-align: center;
    margin: auto;
}

#no-data-banner {
    font-size: larger;
    text-align: center;
    margin: 3em auto;
}

.activity-widget-container {
    width: 80%;
    height: 65%;
    margin: 2em auto;
}

#address-form label {
    display: block;
    padding: 1em;
}
#address-form input,textarea {
    margin: 5px;
    font-weight: normal;
}

.allocator-targets {
    margin: 1em;
}

.allocator-targets th, .allocator-targets td {
    padding: 10px;
}

#allocator-add-target {
    margin: 2em 0;
}

#allocator-add-target select {
    padding: 7px;
    font-size: 1em;
    border: 1px solid lightgray;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 7px;
}

.default-option {
    color: lightgray;
}

.cell-centered-content {
    text-align: center;
}

.cell-right-aligned-content {
    text-align: right;
}

.row-italic-content {
    font-style: italic;
}
.batch_widget {
    position: relative;
    margin: 0.5em;
    margin-top: 1em;
    padding: 1em;
    border: 1px solid lightgray;
    border-radius: 0.5em;
}

.link-sharing-widget {
    padding: 1em;
    border: 1px solid lightgray;
    border-radius: 5%;
    margin-bottom: 5px;
}

.link-sharing-widget input[type="text"] {
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 3px;
    margin-right: 5px;
    margin-left: 5px;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    vertical-align: bottom;
    font-size: 12px;
}

.radio-set {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 5px;
}

.radio-set input {
    position: absolute;
    opacity: 0;
}

.radio-set input + label {
    border: 1px solid lightgray;
    border-radius: 5%;
    padding: 0.5em;
    margin: 0;
    float: left;
    font-size: 12px;
    font-weight: normal;
    color: #737373;
    cursor: pointer;
}

.radio-set input:checked + label {
    border-color: black;
    color: black;
}

.radio-set input + label:hover {
    background-color: lightgray;
    color: black;
}

fieldset.recruitment {
    padding: 0.35em 0.625em 0.75em;
    margin: 1em 0;
    border: 1px solid silver;
    background-color: #efefef;
    display: flex;
    flex-wrap: wrap;
}

fieldset.recruitment legend {
    border: none;
    width: max-content;
    padding: 3px;
}

fieldset.trialfiles legend {
    color: gray;
}

fieldset.trialfiles p {
    margin-left: 5px;
}

ul.query-params {
    list-style: none;
    padding: 0;
    margin-bottom: 3px;
}

ul.query-params li {
    padding: 3px;
}

/* the parameter name itself */
ul.query-params span,ul.query-params label {
    border: 1px solid silver;
    border-radius: 3px;
    padding: 0.5em;
    margin-right: 4px;
    margin-bottom: 0;
    font-weight: normal;
    font-family: monospace;
}

ul.query-params input {
    margin-left: 4px;
    padding: 0.5em;
}

input.new-param-name {
    border: 1px solid silver;
    border-radius: 3px;
    margin-right: 4px;
    padding: 0.5em;
    font-weight: normal;
    font-family: monospace;
}

p.new-param {
    padding: 3px;
    margin: 0;
}

.number-max-9999 {
    width: 4em;
    text-align: center;
}

.field-container {
    padding: 0.5em;
    border-radius: 2px;
    border: 1px solid silver;
    background-color: white;
    margin: 2px;
}

.field-container.one-col {
    flex: 100%;
}

.field-container.two-cols {
    flex: 48%;
}

.field-container.disabled-field {
    display: none;
}

.field-heading {
    color: #8e8e8e;
    font-size: 16px;
    margin-bottom: 1px;
    margin-top: 5px;
}

input.url {
    border: 1px solid lightgray;
    padding: 7px;
    margin-right: 1px;
    font-family: monospace;
    color: darkslategray;
    font-size: 11px;
}

p.option {
    padding: 3px;
}

p.option input {
    padding: 0.5em;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

p.option label {
    font-weight: normal;
    margin-bottom: 2px;
}

p.hint {
    font-size: 11px;
    color: #8e8e8e;
    margin: 0 0 0 3px;
}

p.hint.warning {
    color: darkred;
}

input.plus-min {
    margin: 0 1px;
}

#create-button {
    font-size: 18px;
}

span.right-most {
    float: right;
}

.batch_widget .spaced-more {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.batch_widget .spaced {
    margin-left: 2px;
    margin-right: 2px;
}

.batch_widget .fix-alignment {
    margin: 1px;
    vertical-align: middle;
}

.fixed-width-counter {
    display: inline-block;
    min-width: 2.5em;
    text-align: right;
}

.url[disabled] {
    cursor: not-allowed;
}

p.full-width {
    width: 100%;
}

a.toggle-view-settings {
    display: block;
    cursor: pointer;
    color: #696969;
}

.hidden-switch {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.shown-switch {
    opacity: 1;
    max-height: 1500px;
    transition: all 0.4s ease-in;
    overflow: visible;
}

#revealNewBatch {
    margin: 1em;
    padding: 0.5em;
    cursor: pointer;
}

#revealNewBatchContainer {
    padding: 0.5em;
    font-size: 18px;
}

.label-before-input {
    margin-right: 1em;
}

.input-text-centered {
    text-align: center;
}

.input-with-hint-icon {
    padding-right: 20px;
}

.input-hint-icon {
    position: relative;
    z-index: 1;
    left: -20px;
    color: #adadad;
    cursor: pointer;
    width: 0;
    pointer-events: none;
}

input[type=range].timeout-slider {
    margin: 0 10px;
    display: inline;
    width: 25em;
}

.param-select {
    padding: 0.2em;
    margin: 0.2em;
}



#invoice-list {
    list-style-type: none;
    padding-left: 5px;
}

#invoice-list li {
    padding: 8px;
    border: 1px solid lightgray;
    border-radius: 10px;
    margin: 3px;
}

.invoice-attribute {
    min-width: 10em;
    width: 10em;
    overflow: hidden;
    display: inline-block;
    text-align: right;
}

ul.invoice_batches {
    list-style-type: none;
    padding: 1em 3em;
}

#invoice-request-hint {
    padding: 1em;
    text-align: center;
    color: gray;
    font-size: smaller;
}

#invoice-list ul.collapsed {
    display: none;
}

.invoice-header-spacer {
    width: 3.5em;
    display: inline-block;
}



/* breadcrumbs is a class on the nav element that contains an ol */
.breadcrumbs {
    word-spacing: 0.3em;
}
.breadcrumbs ol {
    padding-left: 0;
}
.breadcrumbs li+li:before {
    content:"> ";
}
.breadcrumbs li {
    color: gray;
    display: inline;
}
.breadcrumbs a {
    color: gray;
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: rgb(80, 80, 80);
}

#cardsort-hint {
    color: gray;
    font-size: 14px;
    text-align: center;
    margin: 0.5em;
}

/* SVG_CANVAS_ID */

#md-chinrest-controls {
	width: 400px;
	margin: 20px auto;
    text-align: center;
}

#md-chinrest-controls button {
    padding: 5px;
}

#md-svg-canvas {
	width: 900px; 
	margin: 0 auto; 
}

/*
 * Global add-ons
 */
.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}

/*
 * Placeholder dashboard ideas
 */
.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

/*
 * Task form buttons macro
 */
#btnDone {margin-left: .2em;}

/*
 * Stimuli config form
 */
.options-list > li {
  list-style-type: none;
}


#demo-playground {
    width: 100%;
    height: 95vh;
}



.distance-form {
    padding: 1em;
    text-align: center;
}

.distance-form p {
    text-align: center;
    margin: 10px auto;
    padding: 1em;
    font-size: 20px;
}

.distance-form button {
    text-align: center;
    margin: 1em;
    padding: 12px;
    font-size: 24px;
}

#confirm-distance-form button {
    text-transform: capitalize;
    width: 6em;
}

#distance-form-header {
    text-align: center;
    margin: 10px auto;
    padding: 1em;
    font-size: 20px;
}

#documentation-container {
    margin: 4vh 4vw 2vh 4vw;
}

.documentation {
    font-size: 16px;
}
.documentation a {
    color: #004B6B;
    text-decoration: none;
    border-bottom: 1px dotted #004B6B;
}
.documentation a:hover {
    color: #003045;
    border-bottom: 1px solid #003045;
}

.documentation h1 {
    font-size: 30px;
}

.documentation table {
    margin: 1em;
  padding: 0; }
.documentation tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
.documentation tr:nth-child(2n) {
      background-color: #f8f8f8; }
.documentation tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
.documentation tr td {
      border: 1px solid #cccccc;
      text-align: left;
      margin: 0;
      padding: 6px 13px; }
.documentation tr th :first-child, table tr td :first-child {
      margin-top: 0; }
.documentation tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }
.documentation tfoot tr td {border-style: none;}
.documentation tfoot {font-size: smaller; font-weight: lighter;}
.documentation tfoot li { list-style-type: none; }
.documentation img {
    max-width: 70%
}
.documentation aside {
    font-style: italic;
    font-weight: lighter;
    font-size: smaller;
    margin: 0.5em;
    color: Gray;
}

.side-figure {
    width: 200px;
    float: right;
    border: 1px solid gray;
    padding: 5px;
}

.side-figure img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}
.thumbnail-link {
    opacity: 0.7;
    text-decoration: none;
    color: gray;
}
.thumbnail-link:hover {
    opacity: 1;
    text-decoration: none;
    color: black;
}
.thumbnail-link img {
    height: 2em;   
}
.text-stim-span {
    font-size: 1em;
    font-family: "Lucida Console", Monaco, monospace;
}

.panel-section {
    display: inline-block;
    vertical-align:top;
    margin-right: 3em;
    margin-bottom: 2em;
    padding: 0;
}
.panel-section h4 {
    margin-bottom: 1em;
}
.single-button {
    margin-left: 0.5em;
    display: inline-block;
}


.section-frontpage {
    margin: auto;
    text-align: center;
    padding: 5em 10vw;
}

.section-frontpage h2 {
    color: gray;
    padding: 2em;
}

#features {
    text-align: left;
}

#features h1 {
    font-size: 36px;
    font-weight: normal;
    padding: 20px 5px 10px 0px;
}

#features .subheader {
    color: gray;
    font-style: italic;
    font-size: 18px;
}

#features ul {
    padding-left: 1em;
    color: #545454;
    list-style-type: none;
    padding-left: 0;
    font-size: 20px;
    line-height: 1.5em;
}

#price-banner {
    font-size: 22px;
    font-style: bold;
}

#free-banner {
    font-size: 18px;
}

.radio-toggle {
    display: none;
}

.radio-toggle + label {
    min-width: 25px;
    padding: 7px 15px;
    color: gray;
}
  
.radio-toggle:checked + label {
    cursor: default;
    color: white;
    background-color: gray;
    display: inline-block;
    padding: 5px;
}

.radio-toggle-container {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 0;
    display: inline-block;
    margin: 5px 50px;
    width: max-content;
}

@media screen and (max-width: 460px) {
    .radio-toggle-container {
        margin: 5px auto;
    }
}

.toggle-currency label {
    width: 2em;
}

.toggle-customer-type label {
    width: 8em;
}

#price-calculator {
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#price-calculator label {
    color: gray;
    font-size: 14px;
}

.annotated-slider {
    display: inline-block;
    border: none;
}

.annotated-slider input,
.annotated-slider output,
.annotated-slider label {
    display: block;
}

.formula-static-segment {
    margin: 0 5px;
}

.formula-dynamic-value {
    min-inline-size: 60px;
}

#price-calculator .line-item {
    display: inline-block;
}

@media screen and (max-width: 860px) {
    #price-calculator .line-item {
        display: block;
        width: 100%
    }
}

section.paradigm-category { /* each category */
    padding: 2em 1em;
}

.paradigm-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.paradigm-card {
    /* box-sizing: content-box;
    position: relative; */
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3%;
    width: 200px;
    min-height: 290px; /* accomodates largest one */
    padding: 0;
    margin: 6px;
    font-weight: normal;
}

.paradigm-card img {
    display: block;
    margin: 0 auto;
    width: 100%;
    /*height: 112.5px;*/
}

.paradigm-card .text-box {
    padding: 8px;
}

.paradigm-card h4 {
    font-size: 16px;
}

.paradigm-card p {
    color: gray;
    font-size: 13px;
}

.paradigm-menu {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.task-card-action {
    margin: 4px;
    padding: 4px;
    border: 1px solid lightgray;
    border-radius: 3px;
    background-color: white;
    line-height: normal;
    color: gray;
    text-decoration: none;
}

.task-card-action:hover {
    background-color: lightgray;
    color: rgb(43, 43, 43);
    text-decoration: none;
}

#paradigms .splide__track {
    margin-bottom: 30px; /* allow space for pagination */
}
#paradigms .splide__pagination__page {
    background: #ccc;
}
#paradigms .splide__pagination__page.is-active {
    background: rgb(114, 114, 114);
}

#team li {
    width: 200px;
}

.image-cropper {
    width: 130px;
    height: 130px;
    position: relative;
    overflow: hidden;    
    margin: 0 auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.image-cropper img {
    display: inline;
    height: 100%;
    width: auto;
    background-color: lightgray;
}

#team p {
    font-size: 15px;
}

.fa-envelope {
    color: gray;
}
.fa-twitter {
    color: #1DA1F2;
}
.fa-youtube {
    color: #CD201F;
}
.fa-discord {
    color: #5865f2;
}
.fa-reddit {
    color: #FF5700;
}

.responsive-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;    
    margin: 0;   
    width: 100%;
}

.responsive-card-list li {
    display: inline-block;
    text-align: center;
}

.responsive-card-list li {
    padding: 5px 5px 20px 5px;
}

.contact-card {
    width: 255px;
}

.contact-card a {
    text-decoration: none;
    color: #333;
}

.contact-card h3 {
    font-size: 16px;
    margin: 2px;
}

.contact-card p {
    margin-top: 2px;
}

.subsection {
    padding: 2em 0;
}

#erc-logo {
    width: 40vw;
    max-width: 300px;
}

#prolific-logo {
    width: 40vw;
    margin: 6vw;
    max-width: 300px;
}

#customer-collage {
    width: 60vw;
    opacity:0.75;
}
/*
Slider element in Gallery Select task
*/

#gallery-slider-container {
    margin: 2em;
    text-align: center;
}
#gallery-slider {
    display: inline;
    width: 50%;
}
#gallery-slider-container span {
    padding: 0 1em;
}
.gallery-slider-label {
    display: block;
    margin: 4em 0;
    font-size: 20px;
}
#gallery-slider-container.gallery-slider-hidden {
    display: none;
}

#gallery-reject-container.gallery-reject-hidden {
    display: none;
}
#gallery-reject-container {
    display: block;
    height: 15%;
    width: 100%;
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}
#gallery-reject {
    display: block;
    padding: 1em;
}
/* used by the gallery task to use the screen for html content */
#meadows-canvas-container.canvas-hidden .canvas-container {
    display: none;
}

/* this is for both the import widget and the process widget */

.import_widget {
    margin: 1em;
}

/* .import_widget input {
    display: none;
}
.import_widget label {
    display: block;
} */

/* JobWidget */
p.job-status {
    font-style: italic;
    font-weight: lighter;
    color: gray;
}

progress.job-progress {
    width: 90%;
}

progress.job-progress.hidden {
    display: none;
}

/*
The actual invoice document to be converted into pdf
*/

@media print {
    @page {
      size: letter portrait;
      margin: 1in;
    }
}
@media screen {
    html#invoice {
      margin: 1in;
    }
}

#invoice {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
}

#invoice a#payment {
    margin: 1em;
    font-size: 16px;
    display: block;
}
#invoice img#qr {
    width: 180px;
} 
#invoice address {
    white-space: pre;
}

#invoice address#ours {
    clear: both;
    float: right;
}

#invoice h1 {
    margin-top: 2.5em;
    font-size: 22px;
    font-weight: normal;
    clear: both;
}

#invoice address#theirs {
    clear: both;
    font-style: normal;
}

#invoice h2#logo {
    font-family: 'Lato', sans-serif;
    color: #666666;
    float: right;
}

#invoice time {
    float: right;
    font-style: italic;
}

#invoice p#instructions {
    clear: both;
}

#invoice tr#total {
    font-size: 18px;
    font-weight: bold;
}

#invoice #payment_method {
    font-size: 26px;
}


#invoice-editor form {
    margin: 2em;
}

table.admin_invoice_batches {
    max-height: 300px;
    overflow: scroll;
    display: block;
    border-collapse: separate;
    border-spacing: 2em 0;
    width: 500px;
}

table.admin_invoice_batches td {
    padding: 10px 0;
}

dl.inline-def-list dd {
    display: inline;
    margin: 0;
}

dl.inline-def-list dd::after {
    display: block;
    content: '';
}

dl.inline-def-list dt {
    display: inline-block;
    min-width: 100px;
}


form.test-job {
    display: inline;
    margin: 2em;
}



/* breadcrumbs is a class on the nav element that contains an ol */
.meadows-jobstatus {
    padding: 0.4em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 0.3em;
    width: 8em;
    color: white;
}

.meadows-jobstatus i {
    margin-right: 0.5em;
    margin-left: 0.5em;
}

.meadows-jobstatus.waiting {
    background-color: rgb(0, 0, 255, 0.9);;
}
.meadows-jobstatus.started {
    background-color: rgba(255, 214, 100, 0.9);
}
.meadows-jobstatus.finished {
    background-color: rgb(0, 255, 0, 0.9);
}
.meadows-jobstatus.failed {
    background-color: rgb(255, 0, 0, 0.9);
}
.meadows-jobstatus.expired {
    background-color: rgba(255, 123, 0, 0.9);
}


.label-input {
    font-size: 2em;
    font-family: monospace;
    display: block;
    margin: 0 auto;
}

.label-submit-hint{
    display: block;
    margin: 0 auto;
    font-size: 1em;
    color: gray;
    width: 20em;
    text-align: center;
}



/* To be deprecated as too unspecific, not sure where used */
table, td, tr {
    border-spacing: 1em;
    text-align: left;
    padding: 1em;
}
section {
	padding:2em;
}
section h2 {
    font-weight: 100;
}
/* end deprecated rules */


.container .text-muted {
    margin: 20px 0;
}

.body-margins {
    margin-top:1em;
    margin-left:5vw;
    width:90vw;
}
.tabnav {
    margin-top: 1.5em;
    margin-bottom: 1.5em; 
}
.tabnav a {
    color: #606060;
    padding: 1em;
}
.tabnav a:hover {
    color:black;
    text-decoration: none;
}
.tabnav .selected {
    color: black;
    border: 1px solid lightgray;
    border-radius: 5%;
    border-bottom: 0;
}
.title-bar h1, .title-bar h2, .title-bar h3 {
    float:left;
    margin: 0;
}
.title-bar {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 10px;
}
.title-actions {
    display: inline-block;
}
.subheading {
    clear:left;
}
.subheading .note {
    font-size: smaller;
}
.version-tag {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 0.5em;
    background-color: white;
    line-height: normal;
    color: gray;
}
.experiment-page {
    padding: 1em;
}
.draggable-item {
    cursor:grab;
}
.note a {
    color: #606060;
}

.loaded {
    max-width: 1000px;
    margin: 4em auto;
    opacity: 0;
}

.loaded {
    transition: opacity 0.25s linear;
    opacity: 1;
}

.loaded .loaders {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background: rgba(0, 0, 0, 0.5);*/
    z-index: 1003;
}

.loaded .loaders .loader {
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 1004;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-top: -30px;
    margin-left: -26px;
}

.loaded .loaders .loading {
    position: absolute;
    color: #fff;
    top: 45%;
    left: 50%;
    margin-top: 10px;
    margin-left: -40px;
    font-size: 14px;
    color: #5789d3
}

@-webkit-keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@-webkit-keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-webkit-keyframes pacman-balls {
    75% {
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(-60px, -6.25px);
        transform: translate(-60px, -6.25px);
    }
}

@keyframes pacman-balls {
    75% {
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(-60px, -6.25px);
        transform: translate(-60px, -6.25px);
    }
}

.pacman {
    position: relative;
}

.pacman > div:nth-child(2) {
    -webkit-animation: pacman-balls 1s -0.99s infinite linear;
    animation: pacman-balls 1s -0.99s infinite linear;
}

.pacman > div:nth-child(3) {
    -webkit-animation: pacman-balls 1s -0.66s infinite linear;
    animation: pacman-balls 1s -0.66s infinite linear;
}

.pacman > div:nth-child(4) {
    -webkit-animation: pacman-balls 1s -0.33s infinite linear;
    animation: pacman-balls 1s -0.33s infinite linear;
}

.pacman > div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0s infinite linear;
    animation: pacman-balls 1s 0s infinite linear;
}

.pacman > div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 15px solid transparent;
    border-top: 15px solid #5789d3;
    border-left: 15px solid #5789d3;
    border-bottom: 15px solid #5789d3;
    border-radius: 15px;
    -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
    animation: rotate_pacman_half_up 0.5s 0s infinite;
    position: relative;
    left: -30px;
}

.pacman > div:nth-child(2) {
    width: 0px;
    height: 0px;
    border-right: 15px solid transparent;
    border-top: 15px solid #5789d3;
    border-left: 15px solid #5789d3;
    border-bottom: 15px solid #5789d3;
    border-radius: 15px;
    -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
    animation: rotate_pacman_half_down 0.5s 0s infinite;
    margin-top: -30px;
    position: relative;
    left: -30px;
}

.pacman > div:nth-child(3),
.pacman > div:nth-child(4),
.pacman > div:nth-child(5),
.pacman > div:nth-child(6) {
    background-color: #5789d3;
    border-radius: 100%;
    margin: 2px;
    width: 6px;
    height: 6px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
    -ms-transform: translate(0, -6.25px);
    transform: translate(0, -6.25px);
    top: 15px;
    left: 42px;
}



#map_a932a953ac6057c824a4fd070e7b03b9 {
    width: 800px;
    height: 400px;
    margin: auto;

}
.leaflet-container {
    font-size: 1rem;
}



/*
See also task_new and .task-type-name
*/

.main-action {
    font-size: 18px;
    padding: 0.5em 2em;
    background-color: #ababab;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
    color: white;
    border-radius: 19px;
    border: none;
    margin: 1.5em 0;
}
.main-action:disabled {
    box-shadow: none;
    color: rgb(172, 172, 172);
    background-color: rgb(223, 223, 223);
}

.main-action:hover {
    background-color: #909090;
}

.cancel-action {
    margin: 1em;
    font-size: 18px;
    color: gray;
}

.notfound {
    margin: 10em auto; 
    max-width: 600px;
}

.notification-banner {
    border: 1px solid lightgray;
    border-radius: 5px;
    color: gray;
    padding: 1em;
    line-height: 1em;
    vertical-align: middle;
    max-height: 3.5em;
    overflow-y: hidden;
}
.notification-banner.dismissed {
    transition: all 0.25s ease-in;
    opacity: 0;
    max-height: 0;
    line-height: 0;
    padding: 0;
    border: none;
    margin: 0;
}
.notification-banner .dismiss-icon {
    cursor: pointer;
}
.notification-banner i.fas {
    float: right;
    color: lightgray;
}
.notification-banner i.fas:hover {
    color: gray;
}
.notification-banner a {
    color: #505050;
    font-style: italic;
}
/* also see footer.css */
/* body {
    margin: 0;
} */
/* general default styles for all outerlayout inheriting pages, 
i.e. everything except participant interface */
body#outerlayout {
    margin: 0;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; *//* bootstrap default for backwards compat */
    font-size: 14px; /* bootstrap default for backwards compat */
}
#body-container {
    margin-top: 40px;
    min-height: calc(100vh - 80px); /* push footer down. 80px = header+footer */
    overflow: hidden; /* prevents child elements' margins from pushing this around  */
}
#nav-main {
    height: 40px;
    width:100%;
    overflow: hidden; /* if the floating menu wraps around, extend this nav */
    z-index: 1;     /* always on top */
    background-color: white; /* to cover content below */
    position: fixed;  /* attached to the top */
    top: 0;
    font-size: 16px;
}
#outerlayout {
    #logo {
        font-size: 2em;
        text-decoration: none;
        font-family: 'Lato', sans-serif;
        color: #666666;
        padding-left: 5px;
    }
}
#nav-main a {
    color: #666666;
    text-decoration: none;
}
#nav-main a:hover {
    color: black;
}
#nav-main ul {
	float: right;
	margin: 0;
	padding: 8px 0 0 0;
	list-style-type: none;
}
#nav-main li {
	display: inline;
	margin: 0 1em 0 0;
}

#nav-main .mw-subtle-button {
    padding: 5px 10px;
    background-color: #919191;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
    position: relative; /* safari fix for box-shadow+hover */
    color: white;
    border-radius: 19px;
    border: none;
}
#nav-main .mw-subtle-button:hover {
    background-color: #666666;
    color: white;
}

#main-hamburger {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    margin: 3px;
    font-size: larger;
}

@media screen and (max-width: 860px) {
    #main-hamburger {
        display: block;
    }
    #nav-main ul {
        float: none;
    }
    #nav-main li {
        display: block;
        padding: 5px 15px;
    }
    #nav-main {
        height: fit-content;
    }
    #nav-main .collapsed {
        display: none;
    }
}


footer.mw-classic {
    height: 30px;
    overflow: hidden;
    background-color: rgb(46, 46, 46);
    color: rgb(131, 140, 149);
    font-size: 12px;
    font-weight: normal;
    padding: 5px 4em;
    text-align: left;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#nav-footer {
    display: inline-block;
}

#nav-footer ul {
    list-style-type: none;
}

#nav-footer li {
    display: inline;
    margin: 0 0.5em;
}

#nav-footer a {
    color: inherit;
    text-decoration: none;
}

#nav-footer a:hover {
    color: inherit;
    text-decoration: underline;
}


/*
    Styling for participation.jinja, the "exit page"
*/
#exitSection {
    font-size: larger;
    margin: auto;
    width: 80%;
    text-align: center;
}

#exitSection h2 {
    font-size: 1.5em;
    font-weight: normal;
    color: #707070;
}

#exitSection dl {
    margin: 1em;
}

#exitSection dt {
    color: #707070;
    font-weight: normal;
    margin-top: 0.8em;
}

#exitSection dd {
    font-weight: bolder;
    color: black;
}

.exitSection em {
    margin: 0.5em;
}

#redirectCounter {
    font-weight: bold;
}

.exitLink {
    font-size: 1.2em;
    border: 1px solid #52a052;
    border-radius: 3px;
    padding: 0.5em;
    line-height: normal;
    color: #52a052;
    background-color: #bdecbd;
}

#exitLink i {
    font-size: smaller;
    margin: 2px;
}

#exitLink:hover {
    text-decoration: none;
    background-color: #a2d6a2;
    color: darkgreen;
}



/* See style/.button */
/* standard version corresponds to neutral-outlined */

.button.mw-button-brand-accent {
    border-color: rgb(106, 53, 123);
    background-color: rgb(106, 53, 123);
    color: white;
}
.button.mw-button-brand-accent:hover {
    border-color: rgb(74, 37, 86);
    background-color: rgb(74, 37, 86);
    color: white;
}



#hint {
    font-weight: bold;
}

.md-hint-size-small {
    font-size: 2vh;
}
.md-hint-size-normal {
    font-size: 4vh;
}
.md-hint-size-large {
    font-size: 6vh;
}
.md-invisible-hint {
    color: transparent;
    user-select: none;
    pointer-events: none;
}

html.task_base {
    margin: 0;
    padding: 0;
    height: 100%;
}

body.task_base {
    /* Set per task from the background_color parameter; the literal here
       is the fallback for any page that renders body.task_base without
       the custom property. */
    background-color: var(--md-task-bg, #DDD);
    margin: 0;
    padding: 0;
    height: 100%;
}

.canvas-container {
    margin: 0 auto;
}

#playground {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

#header {
    flex: 0 1 auto;
    width: 100%;
    text-align: center;
    /* Zero the strut, so an empty #hint produces no line box and the header
       collapses. The visible height comes from the size class on the span.
       That is how a task without a hint takes up no space, while still being
       able to show loading status ("loading 8/20") once TaskContext writes
       it into #hint. Do not hide the header itself. */
    font-size: 0;
}

#meadows-canvas-container {
    flex: 1 1 0%;
    min-height: 0;
    margin: 2px 2px 2px 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#form-content-container {
    padding: 2em;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: scroll;
}

#meadows-toolbar {
    flex: 0 1 35px;
    background-color: white;
    width: 100%;
    font-size: 13px;
    overflow: hidden;
    padding: 2px
}
#meadows-toolbar ul {
    list-style-type: none;
    text-align: center;
    margin: auto;
    width: 80%;
    padding: 0;
}
#meadows-toolbar li {
    display: inline-block;
    margin: 0 1vw;
}
#meadows-toolbar a {
    /* width: 100px; */
    white-space: nowrap;
    padding: 3px 8px;
    margin: 2px;
    display: inline-block;
    text-decoration: none;
    color:DimGray;
}
#meadows-toolbar a:hover {
    text-decoration: none;
    color: black;
}
#meadows-toolbar .meadows-button {
    color:White;
    border-radius: 4px;
    background-color: #00cc00;
}
#meadows-toolbar .meadows-button[disabled] {
    color:White;
    border-radius: 4px;
    background-color: LightGray;
}
#meadows-toolbar .meadows-button[disabled]:hover {
    color:White;
    background-color: LightGray;
}
#meadows-toolbar .meadows-button:hover {
    color:White;
    background-color: #008000;
}

#meadows-toolbar #progress-bar {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    text-align: left;
    width: 14vh; /* same as <a> neighbors */
    border: 1px solid lightgray;
    border-radius: 4px;
    background-color: white;
}
#meadows-toolbar #progress-bar-filler {
    display: inline-block;
    width: 0%;
    height: 100%;
    background-color: LightGray;
}

#qual-retry-instruction {
    font-size: 28px;
    margin: auto;
    padding: 2em;
}

#btn-submit {
    cursor: default;
}

/* ---- Task canvas layouts --------------------------------------------------

   Applied to #meadows-canvas-container by ITaskView.setCanvasLayout(). That
   container holds the fabric canvas (which fabric wraps in .canvas-container)
   plus any html the task appended beside it, typically a form. Which layout a
   task asks for is a task parameter; see the Stimulus Form task's "layout".

   .md-canvas-layout-classic deliberately has no rules of its own: it keeps the
   default column / space-evenly behaviour declared on the container above. */

/* Canvas on top, form underneath, the two centred together as one block.
   Differs from the default space-evenly in that the gap between them is not
   stretched to fill the height - that stretching is what left a wide empty
   band under a canvas that was much taller than the stimulus in it. */
#meadows-canvas-container.md-canvas-layout-below {
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}
/* Forms centre themselves horizontally with margin:auto. In a flex column the
   auto top and bottom margins would also swallow the free space and undo the
   centring above, so zero those two and leave the horizontal ones alone. */
#meadows-canvas-container.md-canvas-layout-below > * {
    margin-top: 0;
    margin-bottom: 0;
}
/* Never let flexbox squeeze the canvas wrapper.

   fabric sizes .canvas-container with an inline height and absolutely positions
   the two <canvas> elements inside it at that same fixed height. Absolute
   children do not participate in the shrink, so if the wrapper is allowed to
   flex-shrink the canvases keep their full height and paint straight over
   whatever follows - which showed up as the stimulus covering the first rows of
   the form at large item_size. Pinning the wrapper makes the form absorb the
   shortfall instead, which it can do: it has max-height and overflow:auto and
   simply scrolls. Same reason as the right-left rule further down. */
#meadows-canvas-container.md-canvas-layout-below > .canvas-container {
    flex-shrink: 0;
}
/* Let the form shrink below its content height so the rule above has something
   to give: a flex item's default min-height:auto would otherwise floor it at
   its content size and push the overflow back out of the container. */
#meadows-canvas-container.md-canvas-layout-below > :not(.canvas-container) {
    min-height: 0;
    max-height: 100%;
}

/* Canvas centred on the screen with the form to its right. Three columns with
   equal outer ones, so the canvas sits on the page's centre line whatever
   width the form turns out to need. */
#meadows-canvas-container.md-canvas-layout-right-centered {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    column-gap: 1em;
}
#meadows-canvas-container.md-canvas-layout-right-centered > .canvas-container {
    grid-column: 2;
    margin: 0;
    /* see the note on the below layout: a squeezed wrapper lets fabric's
       absolutely positioned canvases overflow and paint over the form */
    min-height: min-content;
}
#meadows-canvas-container.md-canvas-layout-right-centered > :not(.canvas-container) {
    grid-column: 3;
    /* bound the height so the form's own overflow-y:auto can scroll it
       instead of spilling out of the container */
    max-height: 100%;
}

/* Canvas against the left edge, form immediately to its right. */
#meadows-canvas-container.md-canvas-layout-right-left {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
}
#meadows-canvas-container.md-canvas-layout-right-left > * {
    margin: 0;
    max-height: 100%;
}
/* never squeeze the canvas to make room for a wide form */
#meadows-canvas-container.md-canvas-layout-right-left > .canvas-container {
    flex-shrink: 0;
}



/* Widget */

.process_widget > .fa {
    color: #b8b8b8;
}

.process_widget button.button[disabled] {
    cursor: progress;
}

.process_widget {
    position: relative;
    margin: 0.5em;
    margin-top: 1em;
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 0.5em;
}

.process_widget p {
    color: gray;
    padding: 0.2em;
}

.process_widget .fa-check {
    color: darkgreen;
}

.process_widget .fa-exclamation-triangle {
    color: darkred;
}

.process_widget h3 {
    margin-right: 2px;
    font-size: 18px;
    margin-top: 0;
    color: rgb(49, 49, 49);
    font-style: italic;
    font-weight: normal;
    margin-left: 0.5em;
    display: inline;
}

.process_widget progress {
    display: block;
    margin-top: 0.2em;
    width: 100%;
}

.process_widget ul {
    list-style-type: none;
    font-size: smaller;
    color: gray;
}

.collapsible {
    display: none;
}

.collapsible.open {
    display: block;
}

.collapser {
    border: none;
    background-color: white;
    width: 100%;
    padding: 0 0 0 5px;
    text-align: left;
}

.collapser:focus {
    outline: none;
}

.collapser h3,i,span {
    display: inline;
}

.collapser .fa-chevron-down,.fa-chevron-right {
    color: gray;
}

.right-menu {
    float: right;
    margin-right: 3px;
}

.right-menu li {
    text-align: right;
}

.process_widget .timing-label {
    margin-right: 2px;
}

ul.three-columns {
    margin-left: 2em;
    padding: 0.5em;
    column-count: 4;
    column-gap: 0.5em;
    width: 65em;
}

form.select-as-set {
    display: inline;
}

.right-bottom-nav {
    text-align: right;
}

a.stimset-preview {
    margin-right: 3px;
}

a.stimset-preview:not([href]) {
    pointer-events: none;
    cursor: progress;
    color: lightgray;
}

span.summary-label {
    margin-left: 1em;
    color: gray;
    font-weight: lighter;
}

#app-preview-container {
    border: 3px solid gray;
    border-radius: 10px;
    box-shadow: 2px 2px 2px lightgray;
    padding: 5px;
    width: fit-content;
    margin: auto;
}
#app-preview {
    width: 250px;
    height: 500px;
}
aside#app-guide {
    float: left;
    width: 300px;
    padding: 1em;
}
#app-version {
    margin: 8px;
    color: gray;
    font-size: smaller;
}
.meadows-progress {
    vertical-align: baseline;
    display: -ms-flexbox;
    display: inline-flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.meadows-progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width 0.6s ease;
}

.meadows-bg-progress {
    background:
        repeating-linear-gradient(
            45deg,
            #1e90ff,
            #1e90ff 10px,
            #9cf 10px,
            #9cf 20px
        ) !important;
}

.meadows-bg-success {
    background-color: #28a745 !important;
}

.slot-status-started {
    background:
        repeating-linear-gradient(
            45deg,
            #1e90ff,
            #1e90ff 10px,
            #9cf 10px,
            #9cf 20px
        ) !important;
}

.slot-status-finished {
    background-color: #28a745 !important;
}

.slot-status-disqualified {
    background-color: red !important;
}

.slot-status-timedout {
    background-color: gray !important;
}

.ptrue-overview {
  overflow: auto;
  margin-bottom: 2em;
}

.ptrue-overview table {
    margin: auto;
    border-spacing: 2em 0;
    border-collapse: separate;
}

#playground.ptrue-task {
  background-color: white;
}

#playground.ptrue-task #hint {
  font-weight: normal;
  font-size: 1.5vh;
  color: gray;
}





.mw-width-constraint {
    max-width: 520px;
}

.mw-info-box {
    background: #f8f8f8;
    border-left: 3px solid #aaa;
    padding: 0.6em 1em;
    margin-bottom: 1em;
}

.mw-section-space {
    margin-top: 2em;
}

/* See style/.button */
/* standard version corresponds to neutral-outlined */
.button.mw-button-danger-accent {
    border-color: rgb(190, 0, 0);
    background-color: rgb(190, 0, 0);
    color: white;
}
.button.mw-button-danger-accent:hover {
    border-color: rgb(160, 0, 0);
    background-color: rgb(160, 0, 0);
    color: white;
}

input[type=range].meadows-standard {
    background-color: transparent;
    -webkit-appearance: none;
}

input[type=range].meadows-standard:focus {
    outline: none;
}

input[type=range].meadows-standard::-webkit-slider-runnable-track {
    background: #d5d9db;
    border: 0.2px solid #afb1b3;
    border-radius: 3.8px;
    width: 100%;
    height: 4px;
    cursor: pointer;
}

input[type=range].meadows-standard::-webkit-slider-thumb {
    margin-top: -10.2px;
    width: 24px;
    height: 24px;
    background: #f0eeec;
    border: 0.8px solid #c5c4c4;
    border-radius: 20px;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range].meadows-standard:focus::-webkit-slider-runnable-track {
    background: #e3e5e7;
}

input[type=range].meadows-standard::-moz-range-track {
    background: #d5d9db;
    border: 0.2px solid #afb1b3;
    border-radius: 3.8px;
    width: 100%;
    height: 4px;
    cursor: pointer;
}

input[type=range].meadows-standard::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #f0eeec;
    border: 0.8px solid #c5c4c4;
    border-radius: 20px;
    cursor: pointer;
}

input[type=range].meadows-standard::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 10.9px 0;
    color: transparent;
    width: 100%;
    height: 4px;
    cursor: pointer;
}

input[type=range].meadows-standard::-ms-fill-lower {
    background: #c7cdcf;
    border: 0.2px solid #afb1b3;
    border-radius: 7.6px;
}

input[type=range].meadows-standard::-ms-fill-upper {
    background: #d5d9db;
    border: 0.2px solid #afb1b3;
    border-radius: 7.6px;
}

input[type=range].meadows-standard::-ms-thumb {
    width: 24px;
    height: 24px;
    background: #f0eeec;
    border: 0.8px solid #c5c4c4;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 0;
}

input[type=range].meadows-standard:focus::-ms-fill-lower {
    background: #d5d9db;
}

input[type=range].meadows-standard:focus::-ms-fill-upper {
    background: #e3e5e7;
}

@supports (-ms-ime-align:auto) {
    input[type=range].meadows-standard {
        margin: 0;
    }
}

div.center-column {
    max-width: 500px;
    padding: 15px;
    margin: 100px auto;
}

div.center-column input {
    box-sizing: border-box;
}

#login-form button {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 2px;
    color: #444;
    cursor: pointer;
    display: block;
    font-size: 22px;
    font-weight: 500;
    margin: 0.5em 0;
    padding: 10px;
    width: 100%;
}

#login-form button:hover {
    background-color: #ccc;
    color: black;
}

#login-form input {
    width: 100%;
    padding: 10px;
    font-size: 15px;
}

#login-form label {
    display: block;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
}

#login-form section {
    margin: 0 0 20px 0;
    padding: 0;
    position: relative;
}

#login-form h1 {
    color: #6c6c6c;
    font-weight: normal;
    margin-bottom: 1em;
}

.invalid-message {
    margin-top: 5px;
    background-color: lemonchiffon;
    border-radius: 10px;
    padding: 1em;
    font-weight: bold;
    text-align: center;
}

.invalid-message .icon {
    color: orange;
}

.fullsize-anchor-button {
    box-sizing: border-box;
    text-align: center;
    display: block;
    font-size: 22px;
    width: 100%;
    padding: 10px;
    color: gray;
    border: 1px solid lightgray;
    border-radius: 3px;
    text-decoration: none;
    line-height: normal;
    margin: 0.5em 0;
}

.fullsize-anchor-button:hover {
    background-color: lightgray;
    color: rgb(43, 43, 43);
    text-decoration: none;
}

.or-separator-line {
    text-align: center;
    color: gray;
    font-size: 16px;
    padding: 0.5em;
}

#forgot-password {
    color: #8f8f8f;
    display: block;
    font-size: 14px;
    float: right;
    margin-bottom: 7px;
    margin-top: 2px;
}

#register-form-container #deformsubmit {
    text-align: center;
    display: block;
    font-size: 22px;
    width: 100%;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 3px;
    text-decoration: none;
    line-height: normal;
    margin: 0.5em 0;
    background-color: #eee;
    color: #444;
}

#register-form-container #deformsubmit:hover {
    background-color: lightgray;
    color: rgb(43, 43, 43);
    text-decoration: none;
}

#register-form-container h2 {
    color: #6c6c6c;
    font-weight: normal;
    margin-bottom: 1em;
}

input[name="password-confirm"] {
    margin-top: 3px;
}

p#terms {
    color: gray;
    text-align: center;
    padding: 1em;
    font-size: 12px;
}

.single-file-upload.dropzone {
    border: 1px solid lightgray;
    border-radius: 5%;
    display: inline-block;
    padding: 0.5em;
    min-height: 0;
    width: 30em;
    text-align: center;
}

.single-file-upload.dropzone .dz-message {
    color: gray;
    margin: 0;
}

.single-file-upload .dz-button {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 0.5em;
    background-color: white;
    line-height: normal;
    color: gray;
}

.single-file-upload .dz-button:hover {
    background-color: lightgray;
    color: rgb(43, 43, 43);
    text-decoration: none;
}

.single-file-upload.dropzone .dz-preview .dz-remove {
    color: gray;
    float: right;
}

.single-file-upload.dropzone .dz-preview {
    width: 90%;
    margin: 2px;
    min-height: 0;
}

.single-file-upload.dropzone .dz-preview .dz-image {
    width: 0;
    height: 0;
}

.single-file-upload.dropzone .dz-preview .dz-details {
    padding: 0;
    text-align: left;
    min-width: 80%;
}

.single-file-upload.dropzone .dz-preview .dz-progress {
    width: 200px;
    left: 50px;
}

.single-file-upload.dropzone .dz-size {
    display: inline;
}

.single-file-upload.dropzone .dz-filename {
    display: inline;
}


#slider-form {
    text-align: center;
}
#slider-form-input {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    margin: 40px 10px;
}
#slider-form button {
    display: block;
    margin: auto;
    padding: 5px 10px;
}

.sliderform-min-label {
    font-size: 18px;
}

.sliderform-max-label {
    font-size: 18px;
}
/* For the StimForm task (participant-facing).

   This file assumes NO framework css. The participant task page still loads
   bootstrap 3 (meadows/templates/task_base.jinja2), but nothing here depends
   on it and nothing here exists to undo it: box-sizing, font, colour, weight
   and the appearance of every control are declared below. Bootstrap is being
   phased out, and when it goes this form must not move. Test that by disabling
   bootstrap.min.css in devtools - the form should look identical.

   Sizing: .stimform's font-size comes from the form_font_size task parameter,
   written onto the form element as --stimform-font-size by StimForm.drawForm()
   (arboretum/src/stimform.ts). Every other dimension in this file is in em, so
   that one number scales the label column, the controls, the radio spacing and
   the button together. There is deliberately no viewport- or content-dependent
   shrinking: the researcher sets the size, and if the result does not fit, the
   form scrolls (see "Overflow" below). */

.stimform {
    /* --- palette -------------------------------------------------------
       Neutral greys throughout: the form must not compete with the stimulus
       for the participant's attention. Adjust the form's colour here and
       nowhere else. */
    --stimform-ink: #2b2b2b;      /* label and input text */
    --stimform-muted: #8a8a8a;    /* unselected radio borders, slider rail */
    --stimform-line: #c9c9c9;     /* text input border */
    --stimform-surface: #ffffff;  /* input fill, slider thumb, radio dot ring */
    --stimform-mark: #2b2b2b;     /* checked radio, thumb ring, focus ring */
    /* The one non-neutral: the same green the participant toolbar's
       .meadows-button uses (css/playground.css), so the two primary buttons
       in the player match. */
    --stimform-accent: #00cc00;
    --stimform-accent-hover: #008000;

    /* --- framework-free base -------------------------------------------- */
    box-sizing: border-box;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--stimform-font-size, 16px);
    line-height: 1.4;
    color: var(--stimform-ink);

    /* --- the alignment grid ---------------------------------------------
       Three columns: label | control | empty. Column 3 is never filled; it
       exists only to mirror column 1. Because the two are the same 1fr of the
       same free space they are always exactly equal, so the control column's
       centre is the form's centre - and the form fills
       #meadows-canvas-container, whose centre line is where
       .canvas-container{margin:0 auto} centres the canvas. That puts the
       slider midpoint, the text input, the radio group and the Next button on
       one vertical line under the stimulus, with no pair of magic numbers to
       keep in sync (this replaces the old label width:12em /
       padding-right:10em scheme, whose two values had silently drifted apart).

       width:100% is load-bearing: the form used to be shrink-to-fit via
       margin:auto, and under fit-content sizing an empty 1fr track contributes
       nothing, so the mirror would collapse.

       The label column floors at min-content, the mirror at 0. With room to
       spare both resolve to the same 1fr share and the mirror holds exactly;
       when the form runs out of width the label column stops shrinking, the
       mirror collapses and the grid overflows into a scrollbar. That is the
       intended failure: a squeezed form scrolls, rather than crushing the
       label column to one word per line (measured: 31px and 13 lines at a
       600px viewport, before the floor was added). Alignment is guaranteed
       in the case that matters and given up only once you are scrolling. */
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1em;
    row-gap: 0.6em;
    width: 100%;

    /* --- overflow --------------------------------------------------------
       The researcher's job is to make the content fit; ours is to fail
       legibly. Too many fields, too long a label or too large a font produces
       a scrollbar, never a broken page or a form that pushes the toolbar off
       screen. Both axes, not just y.

       overflow:auto also gives this element an automatic minimum size of 0 as
       a flex item, which is what lets it actually shrink inside
       #meadows-canvas-container instead of overflowing it. */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    /* Reserve the gutter so the layout doesn't shift when the bar appears.
       both-edges, not plain stable: a gutter on one side only shifts the
       grid's content box by half its width, which knocks the control column
       (and so every widget) off the page centre line by ~5px. Measured. */
    scrollbar-gutter: stable both-edges;
    /* Firefox: thin bar, transparent track blends into body.task_base */
    scrollbar-width: thin;
    scrollbar-color: var(--stimform-muted) transparent;
}

/* box-sizing for the subtree: bootstrap's `*` rule used to supply this. */
.stimform,
.stimform *,
.stimform *::before,
.stimform *::after {
    box-sizing: border-box;
}

/* WebKit (Chrome/Safari): match the Firefox scrollbar treatment above. */
.stimform::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.stimform::-webkit-scrollbar-track {
    /* transparent so body.task_base's --md-task-bg shows through instead of
       a white strip */
    background: transparent;
}
.stimform::-webkit-scrollbar-thumb {
    background-color: var(--stimform-muted);
    border-radius: 4px;
}

/* In the two "form to the right" layouts the form is short of width, so the
   mirror column is waste; drop it and let the form take only what it needs.
   Keyed on the container class rather than added to css/playground.css,
   whose md-canvas-layout-* rules are deliberately task-agnostic. */
#meadows-canvas-container.md-canvas-layout-right-centered .stimform,
#meadows-canvas-container.md-canvas-layout-right-left .stimform {
    /* minmax(0, ...) on both tracks so each can shrink below its content
       width when the side column is tight. A plain max-content label track
       cannot shrink, so a long title starved the controls of room; letting it
       wrap instead (see .stimform-label's overflow-wrap) keeps both readable. */
    grid-template-columns: minmax(0, max-content) minmax(0, auto);
    width: auto;
    /* Keep the control column at its own width instead of letting it swallow
       the leftover space in the cell.

       The form is a grid/flex item here and still stretches to fill its cell,
       so it is wider than its content. An `auto` track is stretchable, so all
       that slack landed in the control column; .stimform-control then centred
       the slider inside the over-wide track, which read as a much bigger gap
       between the label and the input - and it grew with the viewport, since
       a wider screen leaves more slack. `start` opts the tracks out of that
       stretching (only `normal`/`stretch` stretch auto tracks), so the gap is
       exactly the column-gap, as it is in the below layout. */
    justify-content: start;
}

/* --- rows ---------------------------------------------------------------
   Every widget kind produces the same two children, so all three are centred
   by the same rule. (Radio groups used to omit the wrapper entirely and were
   centred by a different one, which is why they sat several em off the line.)
   Explicit grid-column is what keeps auto-placement from flowing a label into
   the empty third column. */

.stimform-label {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    margin: 0;
    font-weight: 600;
    /* no width cap: the column sizes itself. Wrap long titles at word
       boundaries - the old fixed 12em cap broke them mid-word. */
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.stimform-control {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    /* Cap the control at the width of its own column.

       The slider and the text input are a fixed 22em with max-width:100%, but
       that percentage resolves against THIS element - and because the element
       is justify-self:center it is only as wide as its content, so the cap
       resolved to the control's own width and never bit. Giving the wrapper a
       percentage cap of its own gives the inner max-width something real to
       measure against: the grid area. Without it, a long label in one of the
       side layouts takes so much of the column that the slider and the text
       input hang off the right-hand edge of the screen. */
    max-width: 100%;
}

.stimform-submit {
    grid-column: 2;
    justify-self: center;
    /* break away from the last field */
    margin-top: 1.4em;
}

/* --- slider -------------------------------------------------------------
   Participant-side styling, written here on purpose: css/range.css's
   .meadows-standard is the researcher-side slider and the two audiences do
   not share widget styling. No min/max labels and no value readout - the
   participant's judgement is meant to be intuitive. */

.stimform input[type='range'] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 22em;
    max-width: 100%;
    height: 1.6em;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.stimform input[type='range']::-webkit-slider-runnable-track {
    height: 0.35em;
    border-radius: 0.2em;
    background: var(--stimform-muted);
}
.stimform input[type='range']::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: var(--stimform-surface);
    border: 2px solid var(--stimform-mark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* centre the thumb on the rail: (track height - thumb height) / 2 */
    margin-top: -0.45em;
}
.stimform input[type='range']::-moz-range-track {
    height: 0.35em;
    border-radius: 0.2em;
    background: var(--stimform-muted);
}
.stimform input[type='range']::-moz-range-thumb {
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: var(--stimform-surface);
    border: 2px solid var(--stimform-mark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- radio group --------------------------------------------------------
   Each option is a <label> wrapping its own input, so the whole chip is a hit
   target. Wrapping matters: a field with many options runs onto more lines
   rather than forcing the form to scroll sideways. */

.stimform-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* row gap larger than column gap so wrapped lines stay readable */
    gap: 0.3em 0.2em;
    max-width: 30em;
}

.stimform-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    padding: 0.35em 0.7em;
    border-radius: 0.4em;
    /* explicit: bootstrap bolds every label */
    font-weight: 400;
    cursor: pointer;
}
.stimform-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.stimform input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    border: 2px solid var(--stimform-muted);
    border-radius: 50%;
    background: var(--stimform-surface);
    cursor: pointer;
}
.stimform input[type='radio']:checked {
    border-color: var(--stimform-mark);
    background: var(--stimform-mark);
    /* an inset ring of the surface colour leaves a dot in the middle */
    box-shadow: inset 0 0 0 0.22em var(--stimform-surface);
}

/* --- text input --------------------------------------------------------- */

.stimform input[type='text'] {
    appearance: none;
    -webkit-appearance: none;
    /* same width as the slider, so the input column has one right edge */
    width: 22em;
    max-width: 100%;
    margin: 0;
    padding: 0.45em 0.6em;
    border: 1px solid var(--stimform-line);
    border-radius: 0.35em;
    background: var(--stimform-surface);
    color: var(--stimform-ink);
}
.stimform input[type='text']:focus {
    border-color: var(--stimform-mark);
}

/* --- submit ------------------------------------------------------------- */

.stimform input[type='submit'] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0.5em 2em;
    border: 0;
    border-radius: 0.35em;
    background: var(--stimform-accent);
    color: #fff;
    cursor: pointer;
}
.stimform input[type='submit']:hover {
    background: var(--stimform-accent-hover);
}

/* --- shared control rules ----------------------------------------------- */

/* Controls do not inherit the font by default; opt them in so every em-based
   dimension above scales with form_font_size. Labels are left out and the
   properties are listed one by one rather than using the `font` shorthand:
   the shorthand would reset font-weight and, being more specific than
   .stimform-label / .stimform-option, would undo their weights. */
.stimform input,
.stimform select,
.stimform button,
.stimform textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    /* controls do not inherit colour either; bootstrap's normalize used to
       supply this one */
    color: inherit;
}

/* One focus treatment for every control, in place of bootstrap's or the
   browser's. */
.stimform input:focus-visible {
    outline: 2px solid var(--stimform-mark);
    outline-offset: 2px;
}

/* archive uploader  mode */

#archive-uploader .dz-preview {
    display: block;
}

#archive-uploader .dz-image {
    width: 100%;
}

#archive-uploader .dz-progress {
    width: 100%;
    position: relative;
    margin-top: 2px;
    margin-left: 0;
    left: 0;
    top: 0;
    height: 20px;
}

/* thumbnail img sizing */
.dz-image img {
    width: 100%;
}

/* Default dropzone styling raises these, 
but I want to hide them beneath header when scrolling */
#avfiles-form .dz-image {
    z-index: 0;
}

#avfiles-form.dropzone {
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 1em;
}

/* used on several pages */
.form-validation-failure-message {
    color: red;
}

.preview-section {
    float: left;
}

.preview-section nav {
    text-align: center;
}

.preview-section a {
    margin-right: 3px;
}

.preview-section ul {
    margin-top: 1em;
}

.marked-canvas {
    border: 1px solid lightgray;
}

/* overrides meadows general canvas-container rules */
.preview-section .canvas-container {
    margin: 10px;
}



.items {
    list-style-type: none;
    padding: 0;
    margin-top: 1em;
}

.items > li {
    border: 1px solid lightgray;
    border-radius: 3px;
    margin: 0.5em 0;
    padding: 1em;
    font-size: 0.8em;
}

.items > li h3 {
    margin-top: 0;
    margin-bottom: 0;
}

section.downloads {
    border-radius: 0.5em;
    border: 1px solid LightGray;
    padding: 1em;
    margin: 0.5em;
}


.icon-link {
    color: gray;
    font-size: 12px;
    height: 100%;
    vertical-align: middle
}
.icon-link:hover {color: black;}
.info-icon {
    color: gray;
}

.simple {list-style: none; padding: 0; margin: 1em; font-size: larger;}
.simple li {margin: 0.5em;}
.note {font-weight: lighter; color: Gray}
.space-after {margin-right: 0.5em;}
.inline-heading {font-weight: bolder; color: black;}
.subheading {font-size: larger;}

.pane {
    border-radius: 0.5em;
    border: 1px solid LightGray;
    padding: 1em;
    margin: 0.5em;
}

/* experiment page */
.small-items {
    list-style-type: none;
    padding: 0;
}

.small-item {
    border: 1px solid lightgray;
    border-radius: 3px;
    margin: 0.5em 0;
    padding: 0.3em;
}
.button {
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 0.5em;
    background-color: white;
    line-height: normal;
    color: gray;
}
.button:hover {
    background-color: lightgray;
    color: rgb(43, 43, 43);
    text-decoration: none;
}
.button:hover .icon {
    opacity: 1;
}
.button[disabled] {
    cursor: not-allowed;
    color: lightgray;
}
.button.disabled {
    cursor: not-allowed;
    color: lightgray;
}
.button[disabled]:hover {
    background-color: white;
    color: lightgray;
}
.button.disabled:hover {
    background-color: white;
    color: lightgray;
}

.large-button {
    font-size: 18px;
    margin: 0.5em;
    display: inline-block;
    padding: 0.7em;
}

.large-button i {
    margin-right: 6px;
}

p.summary-line {margin: 0 0 0 6em;}
.action-menu { float: right; margin: 0.5em;}
.inline-title {font-size: 1.6em;}

.switch-box {
    font-size: larger;
    border: 4px solid lightgray;
    border-radius: 2px;
    margin: 0.3em;
}
input.switch-radio { position: absolute; opacity: 0; width: 0; margin:0;}
.switch-label {
    background-color: lightgray;
    color: white;
    padding: 0 0.5em 0 0.5em;
    border-radius: 2px;
}
.switch-label img { filter: invert(100%); width: 1em; }
input:checked + .switch-label { background-color: white; color: black;}
input:checked + .switch-label img {filter: invert(0%);}

input.two-digits {width: 3em;}
#lbl-ntasksrepeat {margin: 0.3em; font-weight: normal;}


.inline-form {display: inline}


/* participation page */


#registration-pane {
    padding: 1em;
    width: 35em;
    border: 1px solid lightgray;
    border-radius: 2px;
    }
#registration-pane .btn-primary {
    background-color: White;
    border-color: LightGray;
    color: DimGray;
}
#registration-pane .btn-primary:hover {
    background-color: lightgray;
    color: White;
}
#registration-pane label {color: DimGray;}

/* social media macro */
.sharing {
    display: inline-block;
    list-style-type: none;
}
.sharing li {
    display: inline;
    margin-right: 1em;
}
.sharing a {
    color: gray;
}
.sharing a:hover {
    color: black;
    text-decoration: none;
}
.sharing-header {
    color: gray;
}

.panel-form {
    display: inline-block;
    border: 1px solid lightgray;
    border-radius: 3px;
    margin: 1em;
    padding: 0.5em;
    padding-right: 2em;
}


.cancel-bootstrap-fontweight {
    font-weight: normal;
}

/* sample page */

.chart-container {
    margin: 2em;
    width: 80%;
}

#entrySection {
    font-size: larger;
    margin: auto;
    width: 80%;
    text-align: center;
}

#entryButton {
    font-size: 1.2em;
    border: 1px solid #52a052;
    border-radius: 3px;
    padding: 0.5em;
    line-height: normal;
    color: #52a052;
    background-color: #bdecbd;
}

#entryButton i {
    font-size: smaller;
    margin: 2px;
}

#entryButton:hover {
    text-decoration: none;
    background-color: #a2d6a2;
    color: darkgreen;
}

#entryButton[disabled] {
    background-color: white;
    border-color: lightgray;
    cursor: not-allowed;
    color: lightgray;
}

#entryButton[disabled]:hover {
    background-color: white;
    cursor: not-allowed;
    color: lightgray;
}

.radio-cards input[type="radio"] {
    display: none;
}

.radio-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.radio-card {
    box-sizing: content-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s;
    border-radius: 3%;
    width: 200px;
    margin: 6px;
    font-weight: normal;
}

.radio-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

:checked + .radio-card {
    border: 2px solid #4e4e4e;
    margin: 4px;
}

.radio-card img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.radio-card section {
    padding: 8px;
}

.radio-card h4 {
    font-size: 16px;
}

.radio-card p {
    color: gray;
    font-size: 13px;
}

.radio-card .icon-link {
    float: right;
    margin: 4px;
    color: #cbcbcb;
}

.radio-card .icon-link:hover {
    float: right;
    margin: 4px;
    color: gray;
}

form.task-type-name input[type="submit"] {
    font-size: 18px;
    padding: 0.5em 2em;
    background-color: #ababab;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
    color: white;
    border-radius: 19px;
    border: none;
    margin: 1.5em 0;
}
form.task-type-name input[type="submit"]:disabled {
    box-shadow: none;
    color: rgb(172, 172, 172);
    background-color: rgb(223, 223, 223);
}

form.task-type-name input[type="submit"]:hover {
    background-color: #909090;
}

.cancel-action {
    margin: 1em;
    font-size: 18px;
    color: gray;
}

section#task-name {
    margin: 2em;
    padding: 0;
}

section#task-name label {
    color: #4e4e4e;
    font-weight: normal;
    line-height: 1.5em;
}

section#task-name input {
    border: 1px solid gray;
    border-radius: 4px;
    display: block;
    padding: 8px;
    font-size: 20px;
}

section#task-name p {
    color: gray;
    width: 500px;
}

:root {
    --toggle-height: 23px;
    --toggle-width: 40px;
    --toggle-thumb-diam: 17px;
    --toggle-thumb-margin: 3px;
    --toggle-transition: 0.4s;
}

.toggle-widget {
    position: relative;
    display: inline-block;
    height: var(--toggle-height);
    align-items: center;
}

.toggle-widget input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-widget label {
    padding-right: calc(var(--toggle-width) + 3px);
    cursor: pointer;
    line-height: var(--toggle-height);
    font-weight: normal;
}

.slider {
    position: absolute;
    z-index: -1;
    cursor: pointer;
    top: 0;
    left: 114px;
    right: 0;
    bottom: 0;
    width: var(--toggle-width);
    border-radius: var(--toggle-height);
    background-color: rgb(200, 200, 200);
    -webkit-transition: var(--toggle-height);
    transition: var(--toggle-height);
}

.slider::before {
    position: absolute;
    content: "";
    height: var(--toggle-thumb-diam);
    width: var(--toggle-thumb-diam);
    left: var(--toggle-thumb-margin);
    bottom: var(--toggle-thumb-margin);
    border-radius: 50%;
    background-color: white;
    -webkit-transition: var(--toggle-height);
    transition: var(--toggle-height);
}

input:disabled + .slider::before {
    background-color: rgb(240, 240, 240);
}

input:disabled + .slider {
    background-color: rgb(220, 220, 220);
}

input:focus + .slider {
    box-shadow: 0 0 1px gray;
}

input:checked + .slider {
    background-color: #81bbab;
}

input:checked + .slider::before {
    -webkit-transform: translateX(var(--toggle-thumb-diam));
    -ms-transform: translateX(var(--toggle-thumb-diam));
    transform: translateX(var(--toggle-thumb-diam));
}

input:checked:disabled + .slider {
    background-color: #81bbaaa4;
}

input:checked:disabled + .slider::before {
    background-color: rgb(240, 240, 240);
}

p.tsf-element-container {
    margin: 0;
    margin-left: 1em;
    margin-top: 3px;
    margin-bottom: 3px;
}
fieldset.tsf-element-container {
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: .4em;
    margin-left: 1em;
}
fieldset.tsf-element-container legend {
    display: inline;
    width: auto;
    font-size: 1em;
    font-weight: 300;
    line-height: inherit;
    color: #333;
    border: none;
    margin: 0;
}
p.tsf-element-container label {
    font-weight: normal;
    padding-bottom: 2px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin-bottom: 0;
}
p.tsf-element-container button {
    margin-right: 1em;
}

p.tsf-padded-for-buttons {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

input.tsf-file-lines {
    display: none;
}

p.tsf-element-container .fa {
    color: gray;
    font-size: 12px;
    height: 100%;
    vertical-align: middle;
}

#formcontainer input[type="radio"] {
    vertical-align: text-bottom;
}
/* Some of these also apply to the account, billing etc pages */

.side-nav {
    width: 14em;
    float: right;
    border: 1px solid lightgray;
}

.side-nav a {
    display: block;
    padding: 1em;
    border-bottom: 1px solid lightgray;
    text-decoration: none;
    color: #606060;
    font-size: 1.1em;
    border-left: 5px solid transparent;
}

.side-nav a.side-nav-selected {
    border-bottom: 1px solid lightgray;
    border-left: 5px solid darkgray;
}

.side-nav i {
    margin-right: 3px;
}

.side-nav a:hover {
    background-color: #f6f8fa;
}

#signout-button {
    margin: 0.5em;
    padding: 0.5em;
    text-align: center;
    border: 1px solid lightgray;
    border-radius: 5px;
}

#user-content-div {
    margin-right: 15em;
}

.email-entry {
    overflow: auto;
}

.email-span {
    font-weight: bold;
    font-size: 1.2em;
    font-family: monospace;
    vertical-align: text-top;
}

.email-tags {
    display: inline;
    padding-left: 1em;
    vertical-align: sub;
}

.email-tags li {
    display: inline;
    list-style-type: none;
    font-weight: lighter;
    border-radius: 10px;
    border: 1px solid lightgray;
    padding: 0.5em;
}

.email-tags span {
    font-weight: lighter;
    color: gray;
    border-bottom: 1px dotted lightgray;
}

.email-actions {
    float: right;
}

.meadows-input-text {
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 3px;
    line-height: normal;
}

#affiliation-textarea {
    width: 100%;
}

.section-heading {
    font-size: 1.6em;
    color: #676767;
    font-weight: normal;
    margin-top: 0;
}

.validation-failure-span {
    font-weight: bold;
    color: darkred;
    font-style: italic;
}

.green {
    color: #28a745;
}

.blue {
    color: blue;
}

.gray {
    color: gray;
}

.confirm-button {
    color: white;
    background-color: #28a745;
}

.spaced-paragraph {
    padding: 2em;
}

.action-menu-experiment {
    margin: 5px 2px;
}

.toggle-list-collapse {
    display: block;
    margin: 5px auto;
    background-color: white;
    color: gray;
    border: none;
}

.toggle-list-collapse:hover {
    color: black;
}

.collapsable-list {
    transition: max-height 500ms ease-in;
    overflow-y: hidden;
    max-height: 0;
}

.collapsable-list.expanded {
    max-height: none;
}

.user-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li.user-item {
    border: 1px solid lightgray;
    border-radius: 3px;
    margin-top: 5px;
    padding: 8px;
}

li.user-item:hover {
    background-color: #f3f3f3;
}

li.user-item h3 {
    color: #676767;
    display: inline;
    font-size: 24px;
}

/* stylelint-disable-next-line no-descending-specificity */
li.user-item a {
    color: #676767;
}

li.user-item p {
    font-size: 12px;
    color: gray;
    font-weight: lighter;
    margin-bottom: 0;
}

.button-spacer {
    padding: 1em;
}

.action-menu-experiment .button {
    color: rgb(168, 167, 167);
}

.action-menu-experiment .button:hover {
    color: black;
    background-color: #f3f3f3;
}

.my-nav {
    margin-right: 15em;
    width: 100%;
    text-align: center;
}

.my-nav a {
    padding: 1em;
    margin: 1em 0;
    border-bottom: 1px solid lightgray;
    text-decoration: none;
    color: lightgray;
    font-size: 1.1em;
}

.my-nav a.my-nav-selected {
    color: gray;
    border-bottom: 1px solid gray;
}

.my-nav a:hover {
    color: rgb(60, 60, 60);
    border-bottom: 1px solid rgb(60, 60, 60);
    text-decoration: none;
}

.highlight-chip {
    color: rgba(128, 0, 128, 0.4);
    background-color: rgba(128, 0, 128, 0.05);;
    display: inline-block;
    border: 1px solid rgba(128, 0, 128, 0.4);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 10px;
}

a:hover .highlight-chip {
    color: rgba(128, 0, 128, 1);
    border-color: rgba(128, 0, 128, 1);
}

.login-email {
    font-weight: bold;
}

.bar {
  fill: steelblue;
}
.bar:hover {
  fill: brown;
}
.axis--x path {
  display: none;
}

table.trials {
  border-collapse: separate;
  border-spacing: 1em 0;
}

.volcheck-container {
    margin: auto;
    max-width: 700px;
    text-align: center;
}

.volcheck-button {
    margin: 10px;
    font-size: 20px;
    padding: 0.5em;
    border-radius: 20%;
    width: 50px;
}

.volcheck-button:disabled {
    color: gray;
}

.volcheck-button:enabled:hover {
    background-color: lightgray;
}