@media (min-width: 576px) and (max-width: 991.98px) {
  #classregistermodal .modal-dialog { max-width: 100%; margin-left: 10px; margin-right: 10px; }
}
@media (min-width: 992px) {
  #classregistermodal .modal-dialog { max-width: 971px; }
}

/*
    .coursedetails .coursename { font-size: 34px !important; }
  .coursedetails .courseinfo { font-size: 16px !important; }
}
@media (min-width:  600px) { .card-columns { column-count: 2; } }
@media (min-width:  992px) { .card-columns { column-count: 3; } }
@media (min-width: 1200px) { .card-columns { column-count: 4; } }
@media (min-width: 1500px) { .card-columns { column-count: 5; } }

.coursemanager .card .coursedetails {
  position: absolute;
  top: 0;
  left: 0;
}
.coursedetails .coursename {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    letter-spacing: -1px;
    font-size: calc(16px + (26 - 16) * (100vw / 1000));
}
.coursedetails.background--dark .coursename {
    color: #eee;
}
.coursedetails.background--light .coursename {
    color: #222;
}
*/
.courseinfo {
    font-size: .9rem;
}
/* 
.coursedetails.background--dark .courseinfo {
    color: #eee;
}
.coursedetails.background--light .courseinfo {
    color: #222;
}
.coursedetails .courseactionbuttons {
  position: absolute;
  top: calc(100% - 50px);
}
 */

.coursemanager .card-header {
  font-size: .9em;
  font-weight: 500; 
  color: #fff;
  background-color: #d35b2b;
}
.coursemanager .dropdown-menu {
  font-size: .85em;
}
.coursemanager .card-footer {
  padding: 5px;
}
.coursemanager .card-footer .btn:hover .fa-rocket-launch {
  color: #fcf1e7;
}

#classregistermodal form label, #enrollstudentmodal form label {
  margin-top: 10px;
}
#classregistermodal form .form-check-label, #enrollstudentmodal form .form-check-label {
  margin-top: 0;
}
#classregistermodal form .form-check .form-check-input, #enrollstudentmodal form .form-check .form-check-input {
  margin-top: 6px;
}
#classregistermodal form .form-text, #enrollstudentmodal form .form-text {
  margin-top: 0;
}
/* .form-group label {
  margin-bottom: 0;
  margin-top: .5rem;
}
.modal-header button.close, .modal-header button.close:hover {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.modal-body input[type=text], .modal input[type=password], .modal input[type=email], .modal input[type=tel], .modal input[type=date], .modal input[type=month], .modal input[type=week], .modal input[type=time], .modal input[type=number], .modal input[type=search], .modal input[type=url], textarea {
  font-size: 16px;
} */

/** Progress bars on Class Register modal **/
#coursemanagerclasslist .progress-bar {
  font-size: clamp(8px, 1.1vw, 16px);
  background-color: #0b773daa!important;
  color: #222;
}

/** Artifact counters on Class Register modal **/
.skill-reading-container {
  color: white;
  background-color: #0b773daa;
  cursor: default;
}
.skill-writing-container {
  color: white;
  background-color: #ef6123aa;
  cursor: default;
}
.skill-listening-container {
  color: white;
  background-color: #1c3464aa;
  cursor: default;
}
.skill-speaking-container {
  color: white;
  background-color: #861517aa;
  cursor: default;
}
.skill-aboutme-container {
  color: #38383faa;
  background-color: #e7e7e7;
  cursor: default;
}
.skill-other-container {
  color: white;
  background-color: #38383faa;
  cursor: default;
}
.skill-counter-main{
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
/* .skill-counter-main .skill-counter{
  padding: 10px;
} */

/* #coursemanagerprogress .table>:not(caption)>*>* {
  padding: 0;
} */

/** Progress Report **/

  #coursemanagerprogress table {
    width: 100%;
  }

  #coursemanagerprogress thead tr {
    height: 3em;
  }

  #coursemanagerprogress tbody tr {
    height: 6em;
  }

  #coursemanagerprogress td {
    height: inherit;
  }

  #coursemanagerprogress td.listening {
    padding: 0;
    background-color: #1c346433;
    border-right: 1px solid #1c346466;
  }
  #coursemanagerprogress td.speaking{
    padding: 0;
    background-color: #86151733;
    border-right: 1px solid #86151766;
  }
  #coursemanagerprogress td.reading{
    padding: 0;
    background-color: #0b773d33;
    border-right: 1px solid #0b773d66;
  }
  #coursemanagerprogress td.writing{
    padding: 0;
    background-color: #ef612333;
    border-right: 1px solid #ef612366;
  }

  #coursemanagerprogress td:last-child {
    border-right: none;
  }




  #coursemanagerprogress td .categories {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* align-content: space-evenly;
    justify-content: space-evenly; */
  }

  #coursemanagerprogress div.competencycategory {
    display: grid;  
    justify-content: center;
    align-content: center;
    font-size: 2em;
  }






/* 
  td.listening { background-color: #1c346411; }
  td.speaking  { background-color: #86151711; }
  td.reading   { background-color: #0b773d11; }
  td.writing   { background-color: #ef612311; }
 */


/* .level-details{
  position: absolute;
} */

/*************************/
/* Styles for the stars */
/*************************/
/* .box-star-container {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px !important;
  color: yellow;
  position: relative;
  width: 40.5px;
  height: 38.5px;
  padding-left: 10px;
  padding-top: 0px;
}
.box-star-container .star1,
.box-star-container .star2{
  position: absolute;
  display: block;
  overflow: hidden;
}
.box-star-container .star2 span{
  overflow: hidden;
  display: block;
}
.box-star-container .star1 span::before{
  content: "✰✰✰✰✰";
  content: '✰';
  font-size: 25px;
  display: block;
}
.box-star-container .star2 span::before{
  content: "✰✰✰✰✰";
  content: '★';
  font-size: 25px;
  display: block;
}
.box-star-container:hover,
.box-star-container:hover span{
  background-color: inherit;
} */