.head {
  border-left: 1px;
  text-align: left;
  background-color: #0E426C;
  color: white;
  font-weight: bold;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
  z-index:1;
}

.hideHead {
    display:none;
  }
  
.headlarge {
 position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
  z-index:1;
}
  /* ---- table-like ---- */

.table-like {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* clear fix */
.table-like:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- vertical table-like ---- */

.table-like__item {
  width: 100%;
  clear: both;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 0.5px solid #ddd;
  margin: 0px;
}

.table-like__item:hover {
  background-color: #ddd;
}

.table-like__item > * {
  display: inline-block;
  padding: 4px 4px;
  float: left;
}

.subject { width: 15%; }
.module { width: 40%; }
.start { width: 15%; }
.duration { width: 15%; }
.credit { width: 7%; }
.code { width: 8%; }

.smallmobile {
  display:none;
}

i {
    width: 20px;
}
select:disabled, input:disabled {
    cursor: not-allowed;
    background-color: #f5f5f5;
}

@media screen and (max-width: 1280px){
  .head{
    top: 0px;
    z-index:1;
  }
}
@media screen and (max-width: 1024px){ 
  .subject { width: 16%; }
.module { width: 35%; }
.start { width: 15%; }
.duration { width: 15%; }
.credit { width: 8%; }
.code { width: 8%; }
#form-ui {
      flex-direction: column;
  }
}
@media screen and (max-width: 768px){ 
  .duration { width: 14%; }
  .popup{ width: 85%; }
}
@media screen and (max-width: 700px){ 
  .popup{ width: 70%; }
}
@media screen and (max-width: 425px){ 
  .subject{ display:none!important; }
  .module { width: 35%; }
  .start { width: 20%; }
  .duration { width: 17%; }
  .credit { width: 12%; }
  .code { width: 8%; }
  .bigscreen{ display:none; }
  .smallmobile {display:flex;}
  .popup{ width: 85%;}
}
@media screen and (max-width: 375px){ 
  .module { width: 32%; }
  .start { width: 22%; }
  i { padding: 5px; } 
  .table-like{
    padding-left: -10px; 
    padding-right: -10px;
  }
  .table-like__item > *{
    padding: 0px 0px;
  }
}
@media screen and (max-width: 320px){ 
  .module { width: 41%; }
  .start { width: 28%; }
  i { padding: 5px; } 
  .popup{ width: 95%; }
  .code{ display: none; }
}

#form-ui {
  display:flex;
  gap:10px;
}

.hideContainer {
  display:none;
}

.item:hover{
    background-color: #ddd;
  }