table {
  border-spacing: 0;
  display: table;
  overflow-x: auto;
  text-align: left;
  width: 100%;
  border-collapse: collapse;
}

tr {display: table-row;}
td,
th {
  border-bottom: 0.1rem solid #e1e1e1;
  padding: 0.5rem;
}

td:first-child,
th:first-child {
  padding-left: 0;
}

td:last-child,
th:last-child {
  padding-right: 0;
}
thead {
    display: table-header-group;
  }
  tbody {
    display: table-row-group;
  }
  td {
      display: table-cell;
    }


@media (min-width: 40rem) {
  table {

    overflow-x: initial;
  }
}




main {
    margin-bottom:3em;
}



.grid .header {
  border-bottom: 1px solid #c1c1c1;
  border-top: 1px solid #c1c1c1;
  margin:.5em 0;
}


.grid a ul:hover {
  background-color:#eee;
}

/* .grid .colx4 li:last-of-type{
  text-align: right;
} */

/* .student.grid ul ul li:nth-child(2){
  padding: 0 1em;
}

.student.grid .col1{
  flex: 1 1 10%;
}
.student.grid .col2{
  flex: 1 1 90%;
} */




h1 {
  margin:0;
  margin-bottom:1em;
  line-height: 1.2;
}



h4.breadcrumbs  {
  font-size:0.9em;
  font-weight: normal;
  color:#9e9c9c;
}


/* .moreorless {
  display:none;
} */


.grade .checks {
  margin-bottom: 1em;
}

.grade .info {
border-left:solid 1px #c1c1c1;
padding-left:1em;
}


.grade  h3 {
  margin:0;
}

.assessment > *:last-child {
  margin-left:3em;
}
.checks .tooltip {
  position: relative;
display: inline-block;
}
.checks .tooltip {margin:0;    color: lightgray;}

.checks .tooltip i {
  visibility: hidden;
      background: #c7c7c7;
      background-color: #555;
      color: #fff;
      padding: .3em .5em;
      border-radius: .3em;
      width: 200px;
      border-radius: 6px;
      opacity: 0;
      transition: opacity 0.3s;
      display: block;
      position: absolute;
      z-index: 1;
      top: -65%;
      left: 30px;
}

.checks .tooltip i::after {
  content: "";
      position: absolute;
      top: 50%;
      left: -10px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #555 transparent transparent;
}

.checks .tooltip:hover > i{
  visibility: visible;
  opacity: 1;
}
.checks checkbox{
  margin:0;
}




.details {
  justify-content: space-between;
}

.pill {
  background: #d4d4d4;
  margin: 0;
  border-radius: .2em;
  padding: .5em 1em;
  line-height: 1;
  display: inline-block;
}
.pill.referral {
  background:#b54747;
  color:#fff;
}
.pill.pass {
  background: #519a51;
  color:#fff;
}
.pill.good {
  background: green;
  color:#fff;
}
.pill.excellent{
  background: green;
  color:#fff;
}

.pill.ehcp{
  background: #df7514;
  color:#fff;
}

.grade .grades {
margin-bottom:3em;
}
.grade .grades .pill {
padding: 1em 1.5em;
}

.flags p {
  display: block;
  margin-left: 0.2em;
}
.flags .pill { display: inline;   margin:0.2em;}


.material-icons {
  transform: translateY(5px);
}


/* .details div div:nth-child(-n+2) {
  border:solid 1px #c1c1c1;
} */

/* .grid.feedback {font-size:0.9em;} */

.grid.feedback .flex > *:first-child {
  flex: 0 0 5%;
}
.grid.feedback .flex > *:last-child {
  flex: 0 0 20%;
  text-align: right;
}

.grid.feedback .flex > *:not(:first-child):not(:last-child)  {
  flex: 1 1 25%;
}


.grid.feedback ul {
  box-sizing: border-box;
  border-bottom: solid 1px #ccc;
}
.grid.feedback h4 + ul{
  border-top: solid 1px #ccc;
}

.summary {
  background-color: #ccc;
  padding:1em;
  margin-bottom:2em;
}

.summary h4{
  margin-top:0;
}
.summary p:last-of-type{margin-bottom:0;}


.profile .details .data p {
  margin:0.5em 0;
}

.box {
  width:100%; display: block; height: 4em; border: solid 1px #c1c1c1; padding: .5em;
}

.studentprojectfeedback .details {
  justify-content: space-between;
}
.studentprojectfeedback .details > *:first-child{
flex: 1 0 70%;
margin-right:3em;
}

.studentprojectfeedback .details > *:last-child{
flex: 0 1 25%;
}


.grade .assessment.flex > *:first-child {
  flex: 1 1 70%;
}

.action {overflow: auto;}
.action .btn {

    padding: 1em 2em;
    font-size: 1.2em;
    background: #4183c4;
}