.post.full-width-card .last-activity-content,
.post.full-width-card .last-activity-content *{
  font-size: 1rem !important;
  line-height: 1.2;
}
.post.full-width-card .lesson-content.title,
.post.full-width-card .lesson-content.title *{
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
}


.report-contents h1{ font-size: 2.6rem; }
.report-contents h2{ font-size: 2rem; }
.report-contents h3{ font-size: 1.2rem; }
.report-contents h4{ font-size: 1rem; }
.report-contents h5{ font-size: .9rem; font-style: italic; }
.report-contents h6{ font-size: .75rem; font-style: italic; }

/* =============================================== */
/* Archive general: Cards justified
/* =============================================== */

.cards.justified{
  justify-content: normal;
}
/* =============================================== */
/* Archive general: Horizontal 100%
/* =============================================== */
.full-width-cards{
  display: flex !important;
  /*flex-flow == flex-direction:row|column|row-reverse|column-reverse && flex-wrap:wrap|no-wrap|wrap-reverse*/
  flex-flow: row wrap;
  justify-content: center;
  align-items:baseline;
  align-content: flex-start;
  flex-direction: column;
  width: 90vw;
  max-width: 900px;
  margin: 10px auto;
  box-shadow: 0 50px 50px 0 #eee;
  font-size: 1rem;
  transition: all .5s ease;
  padding: 1rem;
}
.full-width-cards .spinner-wrap{
  min-height: 130px !important;
}
.full-width-cards .spinner{
  margin-top: 20px !important;
}
article.post.full-width-card{
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0.25rem;
  background: rgb(225, 247, 255);
  border: 2px #999 solid;
  border-radius: 8px;
  box-shadow: var(--grey-color-lighter) 0 0 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .5s ease;
  transition: opacity .1s ease-in;
}
/* article.post.full-width-card:hover{
  border: 2px var(--main-color) solid;
} */
article.post.full-width-card-focus{
  border: 2px var(--main-color) solid;
  /* z-index: 1; */
}
.full-width-card > div{
  padding: 0.5rem;
}
.full-width-card h4,
.full-width-card h5,
.full-width-card h6{
  margin: 0;
  padding: 0;
  padding: 0.25rem 0;
  line-height: 1.3rem;
}
.load-more-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}


/* ------------------------------------------------- */
/* Report article divisions in the full-width format
/* ------------------------------------------------- */


article.post.full-width-card > section{
  padding: 0.25rem;
}

article > section:nth-child(2){
  border-radius: 5px 5px 0 0;
}
article > section:last-child{
  border-radius: 0 0 5px 5px;
}

/* ------------------------------------------------- */
/* Top bar, containing the post meta-data and
/* interaction buttons */
/* ------------------------------------------------- */

.post.full-width-card form.hidden-form{
    position: absolute;
}

section.top-bar{
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem 0.25rem !important;
  font-size: 0.85rem;
  background: rgb(225, 247, 255);
}
    .top-bar .authoring{
        display: flex;
        align-items: center;
    }
        .authoring div{margin-right: 1rem;}
        .authoring div:last-child{margin-right:none;}
        .authoring .teacher{
        display: flex;
        gap: .3rem;
        }
        .authoring .teacher img{
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        /* margin: auto 0.1rem; */ /* Commented out for https://te.io.test/class-reports/ */
        }
        .authoring .teacher span{
        text-transform: capitalize;
        }
    
    .top-bar .editing{
        display: flex;
        align-items: center;
        gap: .3rem;
    }



/* ------------------------------------------------- */
/* Title of the report
/* ------------------------------------------------- */

section.title-container{
  background: #f7f7f7;
}
  .title-container h3{
    margin: 0;
    padding: 0;
  }
    .title-container a{
      text-decoration: none;
      margin: 0;
      padding: 0.5rem 0;
    }
    .title-container a:hover{
      opacity: 0.9;
    }

    .title-container .title-text{
      color: #06c;
    }

/* ------------------------------------------------- */
/* Class reports inner content
/* ------------------------------------------------- */

/* Report contents */
section.report-contents{
  display: flex;
  background: #f7f7f7;
}
  section.report-contents > div{
    padding: 0.5rem;
  }

  .report-meta{
    max-width: 22%; /* 18%; */
    background: #f7f7f7;
    box-shadow: inset 0 0 100px #eee;
  }
    .report-meta .students{
      display: flex;
      flex-wrap: nowrap;
    }
      .students .dashicons-groups{
        line-height: 0.7rem;  
      }
      .students .student-names{
        display: flex;
        flex-direction: column;
        padding: .5rem 0;
        gap: .1rem;
      }
        .post.full-width-card.legacy .student{ /* Only apply the .student style for legacy article */
          display     : flex;
          flex-wrap   : nowrap;
          align-items : center;
          column-gap  : .1rem;
          font-size   : .66rem;
          text-decoration: none;
          margin:         0 .1rem 0 0;
          /* margin-right:   0.1rem;
          margin-bottom:  0.1rem; */
          background:   #eee;
          padding:        0.3rem; /* 0 0.3rem 0 0; */
          /* border: 0.5px #ccc solid; */
          box-shadow:     inset 0 0 0 0.25px #666;
          border-radius:  1rem; /* 8px; */
          color:        #333;
          /* Truncate text */
          white-space:    nowrap;
          overflow:       hidden;
          text-overflow:  clip;
        }
        .student-names .student [present-absent]{
          padding: 0;
          margin: 0;
          border-radius: 20px;
          font-size: 0.66rem;
          color: white;
          line-height: .75rem;
          height: .75rem;
          width: .75rem;
          text-transform: capitalize;      
        }
          [present-absent="present"]{
            background: rgb(50, 180, 70);
          }
          [present-absent="absent"]{
              background: darkred;
          }
        .student-names span + span{
          padding: 0;
          margin: 0;
          max-width: 105px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

  .class-info{
    max-width: 38%; /* 41%; */
    background: #eee;
    box-shadow: inset 0 0 100px #ccc;
    line-height: 1.25rem;
  }
  .class-info h6,
  .public-info h6{
    margin-top: 0.5rem;
  }
  .class-info > div > span,
  .public-info > div > span,
  .public-info .te-editor-rendered{
    font-size: 0.9rem;
    overflow-wrap: anywhere;
  }
  .public-info{
    max-width: 41%;
    background: #f7f7f7;
    box-shadow: inset 0 0 100px #eee;
    line-height: 1.25;
  }