/* Custom oTree elements */
.otree-body {
    position: relative;
}

.page-header {
    margin-bottom: 0;
    padding-top: 0;
}

.otree-timer {
    width: 200px;
    margin: 0 auto 1rem auto;
}

.alert {
    padding: 0.5rem 0.5rem;
}

.otree-timer p {
    text-align: center;
    margin-bottom: 0;
}

#consent_form {
    font-size: x-large;
    background-color: #add8e6;
    width: 75%;
    margin: auto;
}

.otree-btn-next {
    display: inherit;
    margin: 2rem 0 2rem auto;
}

._formfield-flex ._formfield {
    display: flex;
}

._formfield-flex .col-form-label {
    margin-right: 1rem;
}

._formfield-flex-space-bw {
    margin-bottom: 2rem;
}

._formfield-flex-space-bw ._formfield {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

._formfield-flex-space-bw .col-form-label {
    padding-top: 0;
}

._formfield-flex-space-bw .form-control-errors {
    flex: 100%;
}

input[type=number] {
    max-width: 100px;
    text-align: center;
}

/* Custom elements */
.title {
    text-align: center;
    font-weight: bold;
    padding-top: 5rem;
    margin-bottom: 2rem;
}

.t-extra {
    padding-top: 6rem;
}

.boxes {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

#box-top-right, #summary-box {
    width: 38%;
}

#box-top-right {
    padding: 0.5rem;
    border: 1px solid #000000;
    background-color: #D1D1F0;
}

#summary-box-content {
    border: 1px solid #000000;
    overflow: auto;
    height: 160px;
    padding: 0.5rem;
}

.box-line:empty {
    height: 1.25em;
    line-height: 1.25;
}

.example-label {
    color: #ff0000;
    font-weight: bold;
    align-self: center
}

.result-value {
    padding-left: 5rem;
}

#select-price-container {
    display: flex;
}

.q_explain {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 2rem auto;
}

.q_explain div:first-of-type {
    margin-right: 4rem;
}

#autoset-report {
    display: none;
}

@media only screen and (min-width: 800px) {
    ._formfield-flex-space-bw .col-form-label, .q_explain div {
        flex: 0.7;
    }
}

/* Eyes Task */
#eyes_test_container {
    position: absolute;
    height: 60vh;
    width: 100%;
    top: 10vh;
    left: 0;
}

#eyes_img {
    display: block;
    height: 20vh;
    margin: 20vh auto;
}

.eyes-task-options {
    position: absolute;
    top: 0;
    left: 0;
}

.eyes-task-options:nth-child(3) {
    left: 100%;
    transform: translate(-100%);
}

.eyes-task-options:nth-child(4) {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
}

.eyes-task-options:nth-child(5) {
    top: 100%;
    transform: translate(0, -100%);
}