.question {
    /*background-color: #FFFDE7;*/
    /*padding: 10px;*/
    /*border-radius: 10px;*/
    /*margin: 10px;*/
    /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;*/
}
.question textarea{
    min-height: 200px;
}

.answer-input {
    margin-top: 10px;
}
.compare-button{
    position: relative;
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
}
.question-header {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    margin-bottom: 10px;
}

.question .question-id {
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    color: var(--theme-color);
    white-space: nowrap;
}


.priorization-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.priorization-options .table {
    margin-bottom: 0;
}

.priority-buttons .btn {
    font-size: 0.8rem;
    white-space: nowrap;
}

.question-form-area {
    width: 100%;
    overflow-y: auto;
}

li.priorization-header {
    display: grid;
    grid-template-columns: auto 220px 140px;
    background-color: #ccc;
    color: black;
    padding: 4px 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

li.new-priorization-option {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    margin-bottom: 10px;
    text-align: center;
    cursor: default;
}

li.priorization-option {
    display: grid;
    grid-template-columns: auto 220px 140px;
    background-color: white;
    padding: 20px 10px;
    border-bottom: 1px solid #e7e7e7;
  }

  li.priorization-option.deleted .description {
    text-decoration: line-through;
    color: #878787;
} 

.prioridades,
.command-buttons{
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: row;
}

.prioridade-header {
    font-size: 10px;
}

.prioridades .prioridade,
.command-buttons button.command-button {
    position: relative;
    background: none;
    border-top: 7px solid;
    border-bottom: none;
    border-left: none;
    border-right: none;
    color: green;
    font-size: 12px;
    font-weight: bold;
    width: 70px;
    margin: 0;
    padding: 5px 7px 0;
    border-radius: 0;
    cursor: pointer;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    -o-transition: all 400ms;
    transition: all 400ms;
}

.prioridades .prioridade.active, .command-buttons button.disagree-button.active { opacity: 1; }
.prioridades .prioridade:not(.active), .command-buttons button.disagree-button:not(.active) { opacity: 0.25; }
.prioridades:not(:has(.active)) ~ .command-buttons:not(:has(.active)) button.command-button, .prioridades:not(:has(.active)) .prioridade { opacity: 1; }
.prioridades .prioridade:hover, .command-buttons button.disagree-button:hover { opacity: 1; }
li.priorization-option.deleted .prioridades .prioridade {
    text-decoration: line-through;
    opacity: 0.25;
}

.prioridades .botao-prioridade-2{
    border-top-color: rgb(255, 115, 0);
    border-top-color: rgba(255, 115, 0, .5);
    color: rgba(255, 115, 0, .5);
}
.prioridades .botao-prioridade-2.active {
    border-top-color: rgba(255, 115, 0, 1);
    color: rgba(255, 115, 0, 1);
}
.prioridades .botao-prioridade-1{
    border-top-color: rgb(0, 97, 97);
    border-top-color: rgba(0, 97, 97, .5);
    color: rgba(0, 97, 97, .5);
}
.prioridades .botao-prioridade-1.active {
    border-top-color: rgba(0, 97, 97, 1);
    color: rgba(0, 97, 97, 1);
}
.prioridades .botao-prioridade-0{
    border-top-color: rgb(0, 129, 0);
    border-top-color: rgba(0, 129, 0, .5);
    color: rgba(0, 129, 0, .5);
}
.prioridades .botao-prioridade-0.active {
    border-top-color: rgba(0, 129, 0, 1);
    color: rgba(0, 129, 0, 1);
}

.command-buttons button.command-button {
    height: 36px;
    border-top-color: rgba(255, 0, 0, .5);
    color: rgba(255, 0, 0, .5);
}
.command-buttons button.command-button.active {
    border-top-color: rgba(255, 0, 0, 1);
    color: rgba(255, 0, 0, 1);
}

.prioridades .prioridade.active::before,
.command-buttons button.disagree-button.active::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid;
}

.comment-button {
    cursor: pointer;
    font-size: 26px;
    align-self: center;
    color: #bfc3c6;
    margin-left: 20px;
}
.comment-button:hover {
    color: #36698e;
}
.comment-button.active {
    color: green;
}

.description {
    display: flex;
    align-items: center;
}

.comment-input {
    margin-top: 10px;
    color: blue;
}

.chat .chat-history li.priorization-option.deleted, .question-form li.priorization-option.deleted {
    background-color: #dcdcdc;
    color: white;
}

.questions {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 5px 8px;
}

.question-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.questions header {
    font-weight: bold;
    margin-bottom: 5px;
}

.question-list .question-id {
    padding: 5px;    
    background-color: #e6e6e8;
    height: 35px;
    width: 35px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.question-form-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px 0 20px;
}
.question-form-buttons button{
    cursor: pointer;
}

.question-list .question-id.respondida {
    background-color: #c6daef;
    color: black;
    position: relative;
}

.question-list .question-id.respondida::after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #43A047;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}

.question-list .question-id:hover {
    background-color: #43A047;
    color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

label.radio-button {
    cursor: pointer;
    background-color: white;
    padding: 8px 12px;
    border-radius: 40px;
    margin-right: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

label.radio-button input {
    margin-right: 10px;
}

.single-choice-options, .agreement-options, .identification-options {
    margin: 21px 0px;
}

.app .question-form-area button {
    background-color: white;
    color: black;
    border: 1px solid lightgray;
}

.app .question-form-area button:hover {
    background-color: lightgray;
}

.app .question-form-area button.disabled, .app .question-form-area button.disabled:hover {
    background-color: white;
    color: lightgray;
}

.single-choice-options, .agreement-options, .identification-options {
    margin: 21px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.single-choice-options label.radio-button {
    width: 400px;
    margin: 5px;
}

.custom-priorization-option .description {
    border: 1px solid lightgray;
}