.otree-title {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

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

.text-blue {
    color: #0000ff;
}

.likert-centered {
    margin: 1rem auto 3rem 6rem;
    width: fit-content;
}

.likert-not-centered {
    margin-bottom: 3rem;
    width: fit-content;
}

.likert-centered .form-check-label,
.likert-not-centered .form-check-label {
    margin-left: -1.5rem;
    margin-top: 1.2rem;
}

.likert-centered .likert-centered__label-left,
.likert-not-centered .likert-centered__label-left {
    margin-left: -3.5rem;
}

.likert-centered .likert-centered__label-right,
.likert-not-centered .likert-centered__label-right {
    margin-right: -2.5rem;
}


#prediction, #revision {
    width: fit-content;
}

#prediction input.form-control, #revision input.form-control {
    max-width: 100px;
    text-align: center;
}

#prediction .form-control-errors, #revision .form-control-errors {
    max-width: 100px;
}


#prediction .controls, #revision .controls {
    margin-top: -0.5rem;
}

#prediction .col-form-label, #revision .col-form-label, #use-ai .col-form-label {
    display: none;
}

#use-ai .controls, #adjust .controls, #do-revision .controls, #attention .controls {
    text-align: left;
    width: fit-content;
    margin: auto;
}

.task-group-screen {
    display: flex;
    justify-content: space-between;
    overflow: auto;
}

.task-group-screen > div {
    width: 50%;
}

.task-group-screen > div:first-of-type {
    margin-right: 2rem;
}

.chat-container {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.btn-outline-primary-selected {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0 !important;
    cursor: default !important;
}
/* Feedback: Maybe a thicker, black border around the data entry fields. */
.form-control {
    border: 2px solid #000000; 
}