/** QÃœESTIONARIS
 * --------------------- */
.questionari{
    color: #222;
    margin-bottom: 1rem;
}

.questionari-title {
    margin-bottom: 10px;
    font-size: 1.8em;
    font-weight: bold;
    color: #222;
}
.questionari-page {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: #222;
}
.questionari-date {
    margin-bottom: 20px;
    padding-top: 4px;
    font-size: 1.4em;
    text-align: right;
    color: #222;
    border-top: 4px solid rgba(170, 170, 170, .8);
}

.questionari-cat{
    padding: 1.2em;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    
    color: #222;
    background-color: #eee;
    border-bottom: 8px solid rgba(170, 170, 170, .8);
    
}
.questionari-eval{
    background-color: #eee;
    text-align: center;
    padding: 1.2em;
    margin-bottom: 1rem;
}
.question-box{
    margin-bottom: 1rem;
    color: #222;
}
.question-content{
    padding: 0;
    text-align: left;
    color: #222;
    background-color: #eee;
}
.question-header{
    display: grid;
    grid-template-columns: 1fr minmax(10%, 100px);
    grid-auto-flow: row;
    grid-gap: .8em;
    grid-template-areas:
        "questionnumber questioninfo";
    align-items: center;
    
    margin-bottom: 2px;
    padding: 10px 20px;
}
.question-number{
    grid-area: questionnumber;
    font-size: 1.25em;
    text-align: left;
}
.question-info{
    grid-area: questioninfo;
    font-size: 0.9em;
    text-align: center;
}
.question-text{
    margin-bottom: 2px;
    padding: 10px 20px;;
    
    font-size: 1.6rem;
    font-weight: bold;
    color: #222;
}
.question-content .question{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: row;
    grid-gap: .8em;
    grid-template-areas:
        "questionlabels questioncontrols";
        
    margin-bottom: 2px;
    padding: 10px 20px 20px 20px;
}
.question-content .question > label,
.question-content .question > .question-label {
    grid-area: questionlabels;
    grid-row: auto;
    text-align: right;
    font-size: 0.9em;
    font-weight: normal;
    color: #222;
}
.question-content .question > input,
.question-content .question > select,
.question-content .question > textarea,
.question-content .question > .question-input {
    grid-area: questioncontrols;
    grid-row: auto;
    text-align: left;
    color: #222;
}
.question-content .question .question-input label{
    display: inline-block;
    padding-right: 2px;
    padding-left: 2px;
    max-width: 90%;
    font-weight: normal;
    vertical-align: top;
    color: #222;
}

.question-content .question > .input.input-block,
.question-content .question > .question-input.input-block{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: auto;
    text-align: left;
}

.question-content.result-correct{
    background-color: #e5fdec;
    background-image: url('../images/questionaris/checkcircle.svg');
    background-repeat: no-repeat;
    background-position: right 45px;
    background-size: 120px;
    border: 6px solid #00be07;
}
.question-content.result-partial{
    border: 6px solid #ffec2d;
}
.question-content.result-wrong{
    background-color: #f6dcf8;
    background-image: url('../images/questionaris/wrongcircle.svg');
    background-repeat: no-repeat;
    background-position: right 45px;
    background-size: 120px;
    border: 6px solid #fc0000;
}


.result-correct .question-header{
    color: #fff !important;
    background-color: #00be07 !important;
}

.result-wrong .question-header{
    color: #fff !important;
    background-color:  #fc0000 !important;
}

.question-info .ok{
    font-weight: bold;
    color: #fff;
}
.question-info .ko{
    font-weight: bold;
    color: #fff;
}

.question .help{
    margin-top:5px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #777;
}
.questionari .field-feedback {
    min-height: 2rem;
    padding: 3px 20px;
}

.questionari .ff-wrong{
  display: inline-block;
  background-color: #ffcccc !important;
}
.questionari .ff-correct{
  display: inline-block;
  background-color: #ccffce !important;
}

.questionari .ff-partialcorrect{
  display: inline-block;
  background-color: #fcfcd5 !important;
}

.questionari .question-feedback {
    display: block;
    margin-top: 2px !important;
    margin-bottom: 2em;
}

.questionari .feedback-correct{
    display: flex;
    align-items: center;
    
    padding-top: 10px;
    padding-left: 40px;
    padding-bottom: 10px;
    padding-right: 20px;
    
    background-color: #ccffce;
    border-left: 6px solid #00be07;
}
.questionari .feedback-partialcorrect{
    display: flex;
    align-items: center;
    
    padding-top: 10px;
    padding-left: 40px;
    padding-bottom: 10px;
    padding-right: 20px;
    
    background-color: #fcfcd5;
    border-left: 6px solid #ffec2d;
}
.questionari .feedback-wrong{
    display: flex;
    align-items: center;
    
    padding-top: 10px;
    padding-left: 40px;
    padding-bottom: 10px;
    padding-right: 20px;
    
    background-color: #ffcccc;
    border-left: 6px solid #fc0000;
}
.feedback-info{
    display: block;
    
    padding-top: 10px;
    padding-left: 50px;
    padding-bottom: 10px;
    padding-right: 20px;
    
    background-color: #d8eaff !important;
    background-image: url('../images/questionaris/infocircle.svg');
    background-repeat: no-repeat;
    background-position: 10px 4px;
    background-size: 30px;
    border-left: 6px solid #0077ff;
}

.questionari-result{
  background-color: #eee;
  margin-bottom: 1rem;
  padding: 1.2em;
  text-align: center;
  color: #222;
}
.questionari-result .questionari-result-title{
  font-size: 20px;
  font-weight: bold;
}
.questionari-result .questionari-progress{
  font-size: 30px;
}
.btn-sendquiz{
    color: #FFF;
    background-color: #555;
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-sendquiz:hover,
.btn-sendquiz:active,
.btn-sendquiz:focus{
    color: #FFF;
    background-color: #333;
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-resetquiz{
    color: #FFFFFF;
    background-color: #555;
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-resetquiz:hover,
.btn-resetquiz:active,
.btn-resetquiz:focus{
    color: #FFF;
    background-color: #333;
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-pdfquiz{
    color: #FFF;
    background-color: #777;
    border: 1px solid transparent;
    box-shadow: none;
}
.btn-pdfquiz:hover,
.btn-pdfquiz:active,
.btn-pdfquiz:focus{
    color: #FFF;
    background-color: #333;
    border: 1px solid transparent;
    box-shadow: none;
}