.student-classes {
  border-bottom: dashed 1px #000000;
  padding-top: 10px;
  padding-bottom: 35px;
  padding-left: 10px;
  padding-right: 10px;

  button.class-refresh {
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    font-size: 0.8em;
    background-color: #ffffff;
    padding: 3px;
    width: 120px;
  }
  button.class-refresh:hover {
    background-color: #AF3A23;
    color: #ffffff;
  }

  h1 {
    color: #265690;
    font-size: 36px;
    padding-top: 40px;
  }

  h2 {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase; 
  }

  .no-classes {
    width: 100%;
    padding-bottom: 25px;
    text-align: center;

    h2 {
      margin-top: 3px;
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase; 
      color: #cc482e;
    }
  }

  .panel-default > .panel-heading {
    text-align: center;
    background-color: grey;
    color: #fff;

    p {
      margin-top: 2px;
      margin-bottom: 0px;
      padding-bottom: 10px;
      text-align: center;
    }
  }

  pre {
    text-align: left;
  }
  table {
    width: 100%;
  }
  tr {
    height: 20px;
  }

  td {
    width: 30%;
  }

  .en-field {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .en-final,
  .en-comp,
  .en-cert {
    text-align: center;
  }
  .course-header,
  .student-course {
    margin: 25px 0 18px;
    display: grid;
    grid-template-columns: 36% 12% 12% 12% 12% 8% 8%;
    grid-column-gap: 5px;
    grid-template-areas:
      "title date final prog comp score passed"
      "trans trans trans trans trans trans trans";

    .en-title {
      grid-area: title;
      font-weight: bold;
    }
    .en-trans {
      grid-area: trans;
    }
  
    .en-date {
      grid-area: date;
    }
    .en-prog {
      grid-area: prog;
      text-align: center;
      font-weight: bold;
    }
    .en-title a,
    .en-prog a {
      color: #AA3A1D;
      text-decoration: none;
    }
    .en-final {
      grid-area: final;
    }
    .en-comp {
      grid-area: comp;
    }
    .en-score {
      grid-area: score;
      text-align: center;
    }
    .en-passed {
      grid-area: passed;
      text-align: center;
    }
  }

  .hidden-course-label {
    display: none;
  }

  .course-header {
    h4 {
      text-align: center;
      vertical-align: bottom;
      margin-bottom: 3px;
    }
    
    .en-title h4,
    .en-date h4 {
      text-align: left;
    }

    .en-title,
    .en-date {
      text-align: center;
      padding-top: 0px;
    }

  }

  .row .student-course,
  .student-course .row {
    margin-right: 0px;
    margin-left: 0px;
  }

  .course-det .col-sm-2 {
    text-align: center;
  }

  .course-table {
    width: 100%;
    min-height: 50px;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 15px;
  }
  @media screen and (max-width: 900px) {
    .hidden-course-label {
      display: inline-block;
      width: 30%;
    }

    .course-header {
      display: none;
    }

    .student-course {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 2px;
      grid-template-areas:
        "title title"
        "date date"
        "final final"
        "prog prog"
        "comp comp"
        "score passed"
        "trans trans";
        padding-bottom: 15px;
    }

    .en-title {
      padding-bottom: 0px;
    }

    .en-date,
    .en-final,
    .en-prog,
    .en-comp,
    .en-score,
    .en-passed {
      text-align: left;
      height: auto;
      padding-top: 2px;
      padding-bottom: 0px;
    }

    .en-passed .hidden-course-label {
      padding-right: 10px;
    }

  }
}