div.TaskAssessment{
  /*padding-left: 30px;*/
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 25px;
  font-size: 22px;
}

div.assementWrap{
  height: auto;
  margin: 0px;
  top: 0px;
  vertical-align: top;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #606060;
}

ol.TaskAssessment {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 3rem;

    .instructions {
        margin-bottom: 15px;
    }

    div.instructionalText {
        background-color: #e6f7ff;

        p{
            font-size: 18px;
            color: #444;
            padding: 20px;
            border-radius: 5px;
            margin: 0 0 10px 0;
        }

        > * {
            background-color: transparent;
        }
    }

    textarea {
        min-width: 300px;
    }
}

div.assessmentSumary{
    margin-bottom: 10px;
}

section.assessmentSection {
    box-shadow: 0 0 5px #d9d9d8;
    border-radius: 10px; 
    padding: 20px;
    margin: 0px 0 16px 0;
    
    ol{
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
}

section.assessmentSection > ol > li > header > div.info > p, 
ol.TaskAssessment > li.Question > header > div.info > p {
  font-size: 14px;
  font-weight: 700;
}
section.assessmentSection  header.sectionHeader aside.overview {
  /*margin: 20px 0;*/
  font-size: 14px;  
}

section.assessmentSection  header.sectionHeader aside.overview p {
  /*padding: 10px;*/
  /*background-color: #e6f7ff90;*/
  /*background-color: #f2f2f2;*/
  width: fit-content;
  /*border-radius: 5px;*/
  color: #666;
}

section .Assessment div option[selected]{
  background:royalblue;
}

/*section .Assessment div.title{
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
}*/

ol.questionList {
  margin: 0 0 0 10px;
}

li.Question {
    display: flex;
    flex-flow: column nowrap;
    
    input[type="text"]{
        border: 1px #cccccb solid;
        border-radius: var(--border-radius);
        padding: 5px;
    }
    
    ol{
        display: flex;
        flex-direction: column;
        gap: 5px;
        list-style: none;
        &.answerList {
            display: flex;
            flex-flow: row wrap;
        }
        > li{
            display: flex;
            flex-direction: row;
            gap: 5px;
            align-items: center;
            > input[type="radio"]{
                margin: 0px;
            }
        }
    }
}

li.Question h3{
    padding-bottom: 5px;
    font-weight: 400;
    color: #444;
    font-size: 14px;
}

li.Question h3.questionNumber {
  margin-right: 10px;
}

li.Question li.answer {
  margin: 10px 0 0px 20px;
  flex: 1 1 45%;
  color: #888;
}

li.Question > footer:not(:empty) {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    border-radius: var(--border-radius);
    margin: 10px 0;
}

li.Question > textarea{  
    font-size: 14px;
    resize: vertical;
    min-height: 50px;
}

li.Question> footer textarea.gradingComments {
  width: 50%;
  margin: auto 0;
}

li.Question> footer textarea.comments {
  width: 100%;
}

li.Question> footer textarea.comments[required] {
  border-color: red;
}

li.Question input {
  /*margin-top: 10px;*/
}

div.assessmentSumary{
  padding-top: 10px;
  color: #555555;
  font-size: 12px;
}

.assessmentSumary p{
  padding-top: 10px;
  padding-bottom: 10px;

}

ol.TaskAssessment li.question{
  margin-left: 12px; 
}

span.assessmentbtn{
  background: #555555;
  color: #ffffff;
  padding: 5px;
  margin-bottom: 10px;
  display: inline-block;
}
section.assessmentSection > .sectionHeader {
  margin: 0px 0 20px 0;
}

span.assessmentbtn:hover{
  cursor: pointer;
}

div.btnHolder{
  padding-bottom: 15px;
  padding-top: 10px;
}


li.Question > aside{
  /*color: darkgray;*/
  font-style: italic;
  margin-bottom: 5px;
}

li.Question header.questionHeader {
  color: #444;
  display: flex;
  flex-flow: row nowrap;
}

section.assessmentSection header.sectionHeader h3 {
  /*margin-top: 15px;*/
  color: #666;
  text-transform: uppercase;
  font-size: 14px;
}

li[required] > header > h3 > p::before { 
  content:"* " ;
  color: red;
}

li.Question footer > input[type="text"]{
  width: 50px;
  height: 20px;
  margin: auto 0 auto 10px;
}
li.Question footer > p:not(:empty) {
  margin: auto 0;
}
li.Question footer > p:empty {
  display: none;
}

li.Question footer.hideFooter {
  display: none;
}

div.totalScore{
  text-align: right;
  color: #555555;
  font-weight: 700;
}

div.sectionTotal{
  text-align: right;
  color: #555555;
  font-weight: 700;
}

div.sectionPercent {
  display: inline-block;
  margin-left: 5px;
  margin-top: 15px;
  /*font-weight: bold;*/
  color: black;
}

div.scoreChecker{
  text-align: right;
  color: red;
  font-weight: 700;
}


section[mpath='TXCTK_ASSESSMENTS'] span.desc{
  display: none;
}

/*

ol.REF {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    
 
}

ol.REF > li{
    -moz-box-orient: vertical;
    display: inline-block;
    padding-top: 10px;
    vertical-align: top;
    padding-right: 10px;
    word-wrap: break-word;
}*/

ol.TaskAssessment  textarea.gradingComments{
  width: 50%;
  height: 18px;
}


ol.TaskAssessment  textarea.userComments{
  width: 50%;
  height: 18px;
}

/* SP 05-05-2021 Performance Review Assessment Styling */
div.IcaJsonContent ol.TaskAssessment section.instructions {
  margin: 20px 0;
  font-size: 14px;
  background-color: #ebfaeb;
  border-radius: 10px;
  box-shadow: 0 0 5px #d9d9d8;
  padding: 20px;
  display: block;
}

ol.TaskAssessment ol.AUTO_ASSESS,
ol.TaskAssessment ol.AGREEMENT_SCALE,
ol.TaskAssessment ol.PERFORMANCE_RATING {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  gap: 1rem;
  /*margin: 15px 0;*/
}

ol.TaskAssessment li.AUTO_ASSESS,
ol.TaskAssessment li.AGREEMENT_SCALE,
ol.TaskAssessment li.PERFORMANCE_RATING {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  /*padding: 10px 5px;*/
}

ol.TaskAssessment li.AUTO_ASSESS input[type='radio'],
ol.TaskAssessment li.AGREEMENT_SCALE input[type='radio'],
ol.TaskAssessment li.PERFORMANCE_RATING  input[type='radio']{
  opacity: 0;
  position: fixed;
  width: 0;
}

ol.TaskAssessment li.AUTO_ASSESS label,
ol.TaskAssessment li.AGREEMENT_SCALE label,
ol.TaskAssessment li.PERFORMANCE_RATING label{
    background-color: #fff;
    padding: 5px 10px;
    /*font-size: 14px;*/
    border: 1px solid #d9d9d9;
    border-radius: var(--border-radius);
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover{
        background-color: #ebf4ff;
        border-color: #005cc8;
    }
}

ol.TaskAssessment li.AUTO_ASSESS input[type='radio']:checked + label,
ol.TaskAssessment li.AGREEMENT_SCALE input[type='radio']:checked + label,
ol.TaskAssessment li.PERFORMANCE_RATING  input[type='radio']:checked + label {
    background-color: #fff;
    border-color: #005cc8;
    color: #0075ff;
    /*box-shadow: 0 0 0 2px rgba(0, 117, 255, 0.12);*/
}

section[associatedtask] li.Question  ol{
  margin-left: 60px;
}
section[associatedtask] li.Question  li{
    display: inline-block;
    min-width: 100px;
    /*margin: 20px 0;*/
}