/*
  * CSS for jsPsych experiments.
  *
  * This stylesheet provides minimal styling to make jsPsych
  * experiments look polished without any additional styles.
  */

/* ------------------------------------------ */
/*              CONTAINERS                   */
/* ------------------------------------------ */
/* Container holding jsPsych content */
.jspsych-display-element {
    display: flex;
    flex-direction: column;
    /* Make sure the JSPsych container doesn't scroll */
    overflow: hidden !important;
    /* fonts and type */
    font-family: "Open Sans", "Arial", sans-serif; 
    font-size: 1.9444vh; /* 28px / 1440 * 100 */
    line-height: 1.6em;
}

.jspsych-display-element:focus {
    outline: none;
}

.jspsych-content-wrapper {
    display: flex;
    margin: auto;
    flex: 1 1 100%;
    width: 100%;
    /* Make sure the JSPsych container doesn't scroll */
    overflow: hidden !important;
}

.jspsych-content {
    max-width: 95%;
    /* this is mainly an IE 10-11 fix */
    text-align: center;
    margin: auto;
    /* this is for overflowing content */
}

.jspsych-top {
    align-items: flex-start;
}

.jspsych-middle {
    align-items: center;
}

/* ------------------------------------------ */
/*              ELEMENTS                     */
/* ------------------------------------------ */
/* Form elements like input fields and buttons */
.jspsych-display-element input[type=text] {
    font-family: "Open Sans", "Arial", sans-serif;
    font-size: 1.9444vh; /* 28px / 1440 * 100 */
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
    display: inline-block;
    padding: 0.4167vh 0.4688vw; /* 6px / 1440 * 100, 12px / 2560 * 100 */
    margin: 0;
    font-size: 1.6667vh; /* 24px / 1440 * 100 */
    font-weight: 400;
    font-family: "Open Sans", "Arial", sans-serif;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-image: none;
    border: 0.0391vw solid transparent; /* 1px / 2560 * 100 */
    border-radius: 0.1563vw; /* 4px / 2560 * 100 */
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/* only apply the hover style on devices with a mouse/pointer that can hover - issue #977 */
@media (hover: hover) {
    .jspsych-btn:hover {
        background-color: #ddd;
        border-color: #aaa;
    }
}

.jspsych-btn:active {
    background-color: #ddd;
    border-color: #000000;
}

.jspsych-btn:disabled {
    background-color: #eee;
    color: #aaa;
    border-color: #ccc;
    cursor: not-allowed;
}

/* custom style for input[type="range] (slider) to improve alignment between positions and labels */
.jspsych-slider {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: transparent;
}

.jspsych-slider:focus {
    outline: none;
}

/* track */
.jspsych-slider::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 1.2500vh; /* 18px / 1440 * 100 */
    cursor: pointer;
    background: #eee;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
    border-radius: 0.0781vw; /* 2px / 2560 * 100 */
    border: 0.0391vw solid #aaa; /* 1px / 2560 * 100 */
}

.jspsych-slider::-moz-range-track {
    appearance: none;
    width: 100%;
    height: 0.5556vh; /* 8px / 1440 * 100 */
    cursor: pointer;
    background: #eee;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
    border-radius: 0.0781vw; /* 2px / 2560 * 100 */
    border: 0.0391vw solid #aaa; /* 1px / 2560 * 100 */
}

.jspsych-slider::-ms-track {
    appearance: none;
    width: 99%;
    height: 0.9722vh; /* 14px / 1440 * 100 */
    cursor: pointer;
    background: #eee;
    box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d;
    border-radius: 0.0781vw; /* 2px / 2560 * 100 */
    border: 0.0391vw solid #aaa; /* 1px / 2560 * 100 */
}

/* thumb */
.jspsych-slider::-webkit-slider-thumb {
    border: 0.0391vw solid #666; /* 1px / 2560 * 100 */
    height: 1.6667vh; /* 24px / 1440 * 100 */
    width: 0.5859vw; /* 15px / 2560 * 100 */
    border-radius: 0.1953vw; /* 5px / 2560 * 100 */
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -0.6250vh; /* -9px / 1440 * 100 */
}

.jspsych-slider::-moz-range-thumb {
    border: 0.0391vw solid #666666; /* 1px / 2560 * 100 */
    height: 1.6667vh; /* 24px / 1440 * 100 */
    width: 0.5859vw; /* 15px / 2560 * 100 */
    border-radius: 0.1953vw; /* 5px / 2560 * 100 */
    background: #ffffff;
    cursor: pointer;
}

.jspsych-slider::-ms-thumb {
    border: 0.0391vw solid #666; /* 1px / 2560 * 100 */
    height: 1.3889vh; /* 20px / 1440 * 100 */
    width: 0.5859vw; /* 15px / 2560 * 100 */
    border-radius: 0.1953vw; /* 5px / 2560 * 100 */
    background: #ffffff;
    cursor: pointer;
    margin-top: -0.1389vh; /* -2px / 1440 * 100 */
}

/* ------------------------------------------ */
/*              PROGRESS BAR                  */
/* ------------------------------------------ */
/* jsPsych progress bar */
#jspsych-progressbar-container {
    color: #555;
    border-bottom: 0.0391vw solid #dedede; /* 1px / 2560 * 100 */
    background-color: #f9f9f9;
    margin-bottom: 1.9444vh; /* 28px / 1440 * 100 */
    text-align: center;
    padding: 0.5556vh 0; /* 8px / 1440 * 100 */
    width: 100%;
    line-height: 1em;
    /* If progress bar is present, adjust the top position */
    margin-bottom: 0.3472vh !important; /* 0.5em ≈ 5px / 1440 * 100 */
}

/* Fix positioning relative to jspsych progress bar if present */
#jspsych-progressbar-container + div .discounting-container {
    margin-top: 0;
}

#jspsych-progressbar-container span {
    font-size: 0.9722vh; /* 14px / 1440 * 100 */
    padding-right: 1.5625vw; /* 14px / 2560 * 100 */
}

#jspsych-progressbar-outer {
    background-color: #eee;
    width: 50%;
    margin: auto;
    height: 0.9722vh; /* 14px / 1440 * 100 */
    display: inline-block;
    vertical-align: middle;
    box-shadow: inset 0 0.0391vw 0.0781vw rgba(0, 0, 0, 0.1); /* 1px, 2px / 2560 * 100 */
}

#jspsych-progressbar-inner {
    background-color: #9a9595;
    width: 0%;
    height: 100%;
}

/* ------------------------------------------ */
/*              DATA DISPLAY                 */
/* ------------------------------------------ */
/* Control appearance of jsPsych.data.displayData() */
#jspsych-data-display {
    text-align: left;
}