/* Class management: extends the shared directory design. */
.class-list-page .sl-hero {
  background: linear-gradient(118deg, #174b7d 0%, #1775aa 58%, #1aa5b7 125%);
  box-shadow: 0 17px 40px rgba(23, 103, 148, .2);
}
.class-list-page .sl-add-btn { color: #126c98; }
.class-list-page .sl-add-btn:hover { color: #0b4f74; }
.class-list-page .sl-record-count strong { color: #177ca5; }
.class-list-page .sl-search-wrap input:focus { border-color: #83bdd2; box-shadow: 0 0 0 3px rgba(23,124,165,.1); }
.class-list-page table.cl-table { min-width: 870px; }

.class-list-page .cl-name { display: flex; min-width: 250px; align-items: center; gap: 11px; }
.class-list-page .cl-name > div { min-width: 0; }
.class-list-page .cl-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; border-radius: 12px; font-size: 13px; }
.class-list-page .cl-icon-1 { color: #087a91; background: #e9fafd; }
.class-list-page .cl-icon-2 { color: #3157d5; background: #eef2ff; }
.class-list-page .cl-icon-3 { color: #067647; background: #ecfdf3; }
.class-list-page .cl-icon-4 { color: #6941c6; background: #f4f0ff; }
.class-list-page .cl-name strong { display: block; overflow: hidden; max-width: 340px; color: #24324c; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.class-list-page .cl-name small { display: block; margin-top: 3px; color: #98a2b3; font-size: 9px; }

.class-list-page .cl-students { display: inline-flex; min-width: 105px; align-items: center; gap: 7px; }
.class-list-page .cl-students i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: #177ca5; background: #eaf7fa; font-size: 9px; }
.class-list-page .cl-students strong { color: #34435d; font-size: 11px; font-weight: 700; }
.class-list-page .cl-students span { color: #929dad; font-size: 9.5px; }

.class-list-page .cl-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.class-list-page .cl-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.class-list-page .cl-status-active { color: #067647; background: #ecfdf3; }
.class-list-page .cl-status-inactive { color: #b42318; background: #fef3f2; }
.class-list-page .cl-date { display: inline-flex; min-width: 105px; align-items: center; gap: 7px; color: #66748b; font-size: 9.5px; white-space: nowrap; }
.class-list-page .cl-date i { color: #8492a8; }

@media (max-width: 767px) {
  .class-list-page table.cl-table { min-width: 820px; }
}