style.css

.LabHours {
  font-weight: bold;
  background-color: #99CCFF;
  cursor: default;
}

.TheoryHours {
  font-weight: bold;
  background-color: #CCCCFF;
  cursor: default;
}

.ColumnOneDays {
  font-weight: bold;
  background-color: #C0C0C0;
  cursor: default;
}

.TimetableContent,
.A1,
.B1,
.C1,
.D1,
.E1,
.F1,
.G1,
.A2,
.B2,
.C2,
.D2,
.E2,
.F2,
.G2,
.TA1,
.TB1,
.TC1,
.TD1,
.TE1,
.TF1,
.TG1,
.TA2,
.TB2,
.TC2,
.TD2,
.TE2,
.TF2,
.TG2 {
  color: grey;
  background-color: #FFFFCC;
  cursor: pointer;
}

.TimetableContent.highlight,
.A1.highlight,
.B1.highlight,
.C1.highlight,
.D1.highlight,
.E1.highlight,
.F1.highlight,
.G1.highlight,
.A2.highlight,
.B2.highlight,
.C2.highlight,
.D2.highlight,
.E2.highlight,
.F2.highlight,
.G2.highlight,
.TA1.highlight,
.TB1.highlight,
.TC1.highlight,
.TD1.highlight,
.TE1.highlight,
.TF1.highlight,
.TG1.highlight,
.TA2.highlight,
.TB2.highlight,
.TC2.highlight,
.TD2.highlight,
.TE2.highlight,
.TF2.highlight,
.TG2.highlight {
  color: black;
  background-color: #CCFF33;
  cursor: pointer;
}

.A1-tile,
.B1-tile,
.C1-tile,
.D1-tile,
.E1-tile,
.F1-tile,
.G1-tile,
.A2-tile,
.B2-tile,
.C2-tile,
.D2-tile,
.E2-tile,
.F2-tile,
.G2-tile {
  background-color: #FFC107;
}

.A1-tile.highlight,
.B1-tile.highlight,
.C1-tile.highlight,
.D1-tile.highlight,
.E1-tile.highlight,
.F1-tile.highlight,
.G1-tile.highlight,
.A2-tile.highlight,
.B2-tile.highlight,
.C2-tile.highlight,
.D2-tile.highlight,
.E2-tile.highlight,
.F2-tile.highlight,
.G2-tile.highlight {
  background-color: #64DD17;
}

.TA1-tile,
.TB1-tile,
.TC1-tile,
.TD1-tile,
.TE1-tile,
.TF1-tile,
.TG1-tile,
.TA2-tile,
.TB2-tile,
.TC2-tile,
.TD2-tile,
.TE2-tile,
.TF2-tile,
.TG2-tile {
  background-color: #FFC107;
}

.TA1-tile.highlight,
.TB1-tile.highlight,
.TC1-tile.highlight,
.TD1-tile.highlight,
.TE1-tile.highlight,
.TF1-tile.highlight,
.TG1-tile.highlight,
.TA2-tile.highlight,
.TB2-tile.highlight,
.TC2-tile.highlight,
.TD2-tile.highlight,
.TE2-tile.highlight,
.TF2-tile.highlight,
.TG2-tile.highlight {
  background-color: #64DD17;
}

.TAA1-tile,
.TBB1-tile,
.TCC1-tile,
.TDD1-tile,
.TEE1-tile,
.TFF1-tile,
.TGG1-tile,
.TAA2-tile,
.TBB2-tile,
.TCC2-tile,
.TDD2-tile,
.TEE2-tile,
.TFF2-tile,
.TGG2-tile {
  background-color: #FFC107;
}

.TAA1-tile.highlight,
.TBB1-tile.highlight,
.TCC1-tile.highlight,
.TDD1-tile.highlight,
.TEE1-tile.highlight,
.TFF1-tile.highlight,
.TGG1-tile.highlight,
.TAA2-tile.highlight,
.TBB2-tile.highlight,
.TCC2-tile.highlight,
.TDD2-tile.highlight,
.TEE2-tile.highlight,
.TFF2-tile.highlight,
.TGG2-tile.highlight {
  background-color: #64DD17;
}

.TimetableContent:hover,
.A1:hover,
.B1:hover,
.C1:hover,
.D1:hover,
.E1:hover,
.F1:hover,
.G1:hover,
.A2:hover,
.B2:hover,
.C2:hover,
.D2:hover,
.E2:hover,
.F2:hover,
.G2:hover,
.TA1:hover,
.TB1:hover,
.TC1:hover,
.TD1:hover,
.TE1:hover,
.TF1:hover,
.TG1:hover,
.TA2:hover,
.TB2:hover,
.TC2:hover,
.TD2:hover,
.TE2:hover,
.TF2:hover,
.TG2:hover {
  color: black;
  background-color: #CCFF33;
  cursor: pointer;
}

.TimetableContent.highlight:hover,
.A1.highlight:hover,
.B1.highlight:hover,
.C1.highlight:hover,
.D1.highlight:hover,
.E1.highlight:hover,
.F1.highlight:hover,
.G1.highlight:hover,
.A2.highlight:hover,
.B2.highlight:hover,
.C2.highlight:hover,
.D2.highlight:hover,
.E2.highlight:hover,
.F2.highlight:hover,
.G2.highlight:hover,
.TA1.highlight:hover,
.TB1.highlight:hover,
.TC1.highlight:hover,
.TD1.highlight:hover,
.TE1.highlight:hover,
.TF1.highlight:hover,
.TG1.highlight:hover,
.TA2.highlight:hover,
.TB2.highlight:hover,
.TC2.highlight:hover,
.TD2.highlight:hover,
.TE2.highlight:hover,
.TF2.highlight:hover,
.TG2.highlight:hover {
  color: grey;
  background-color: #CCFF33;
  cursor: pointer;
}

header {
  padding-left: 15px;
  padding-right: 15px;
}

header .alert {
  margin-top: 1em;
}

#site_heading {
  font-size: 2em;
}

td {
  vertical-align: middle!important;
  padding-left: 0.25em!important;
  padding-right: 0.25em!important;
  padding-top: 1.25em!important;
  padding-bottom: 1.25em!important;
}

footer {
  background-color: #9C27B0;
  color: #fff;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

footer a {
  color: #fff;
}

footer a:hover {
  color: #fff;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid #616161 !important;
}

#option_buttons .btn {
  margin: 0.25em;
}

.quick-selection .btn:hover {
  background-color: #64DD17;
}

.quick-selection .btn[disabled] {
  cursor: default;
  background-color: grey
}

.quick-selection .btn[disabled]:hover {
  background-color: grey;
}

.quick-selection .btn {
  min-width: 50px;
}

.quick-selection {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

#fb-like-share {
  margin-top: 0.25em;
}

#like-micpage {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}


/* Styles for individual table cells */

.tt-course-code {
  display: block;
  text-align: center;
}


/* Styles for the slot input form and the associated components. */

#slot-sel-area .list-group-item-danger .badge {
  background-color: #a94442;
}

.slot-clash {
  background: red !important;
  color: #fff !important;
}

.container-fluid {
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-right: auto!important;
  margin-left: auto!important;
}

.container-fluid .row {
  margin-right: 0!important;
  margin-left: 0!important;
}

input {
  color: black !important;
}

#insertSlotBtn {
  margin: 1em;
}

#insertSlotBtn .btn {
  white-space: normal!important;
}

#inputCourseCode,
#inputCourseTitle,
#inputSlotString,
#inputFaculty,
#inputVenue,
.list-group-item {
  text-transform: uppercase;
}


/* timetable screenshot msg */

#timetable_msg {
  color: black;
  background-color: white;
}

#timetable_msg tr,
#timetable_msg td {
  padding: 0!important;
  border-color: white!important;
  margin: 0!important;
}


/* slot selection panel */

#slot-sel-area {
  margin-top: 0.5em;
}


/* Excel sheet */

#ExcelSheet {
  margin: 1em;
}


/* custom scrollbar */

::-webkit-scrollbar {
  height: 0.2em;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #9C27B0;
}

@media (min-width:992px) {
  .quick-selection:hover> ::-webkit-scrollbar-thumb {
    background: #9C27B0;
  }
  .quick-selection> ::-webkit-scrollbar-thumb {
    background: transparent;
  }
   ::-webkit-scrollbar-thumb {
    background: #9C27B0;
  }
}

@media (max-width: 767px) {
  .container {
    width: auto;
  }
}