table { page-break-inside: avoid;
}

/* styles for the list pages */
table.listtable {
    margin-left:auto;
    margin-right:auto;
    border-collapse: separate;
    border-spacing: 2px;
}

table.listtable th {
    padding-left:4px;
}

table.listtable thead {
    background-color: #ccc;
}

table.listtable td {
    vertical-align:top;
    padding: 5px;
}

/* Each month in the full html table is a table.monthtable */
table.monthtable, table.weektable {
    table-layout: fixed;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    /* background-color:#f8f8f8; */
}

table.monthtable tr:nth-child(2), table.weektable tr:first-child {
  /*
  background-color: #4e4082;
  */
  background-color: #232323;
  color: #fff;
}

.weektable th {
  font-weight: normal;
  border: 2px solid black;
}

table td {
  vertical-align: top;
  border: 2px solid black;
}

/* These control the general properties of an individual date entry. */

/* The month name box */
td.monthtd {
  text-align: left;
  font-size: 20pt;
}

/* The day of the week boxes */
.daytd {
  font-size: 13pt;
  padding: 4px;
  width: 100%;
  text-align: center;
}

tbody tr:first-child td {
  border: none;
}

/* An entry that has something in it */
td.eventtd {
  letter-spacing: -0.5px;  
}

td.eventtd > div {
  margin-left: 4px;
  margin-right: 4px;
}

td.eventtd > div > span, td.eventtd > div > a {
  display: block;
}

td.eventtd > div * {
  font-size: 11pt;
  font-style: normal;
}

td.eventtd .links {
  display: block;
  width: 100%;
  text-align: right;
  position: absolute;
  bottom: 0;
}

td.eventtd .links {
  color: #fff;
  padding-right: 10px;
}

td.eventtd .hw a {
  display: block;
}

td.eventtd:hover .links {
  color: #000;
  cursor: pointer;
}

.summary span, .summary.hw a {
  font-weight: normal;
  font-size: 10pt;
  font-style-italic;
  margin-right: 0;
}

div.hw {
  border: 2pt solid #fbbcff;
}

/* An entry not during the quarter */
td.notinquarter {
    background-color:LightGray;
}

/* Highlights today's entry in the calendar */
table td.today {
    border-width : 5px 5px 5px 5px;
    border-color : SkyBlue;
    marker : 1;
}

/* The date label */
span.datespan {
  font-size: 14pt;
  display: block;
  text-align: right;
  margin-right:5px;  
  color:DimGray;
}

/* these control the styles of the entries inside
   an individual date entry. The span's are intended
   to control font styles.  The div's are intended 
   for properties applying to the entire entry.
*/

.event-card {
  margin: 6px;
}

.summary {
  font-weight: bold;
  font-size: 11pt;
}

span.description {
  font-style: italic;
}

.eventtd h4 {
  font-size: 11pt;
}

.modal-title .close {
  font-size: 35px;
  opacity: 0.15;
}

.modal-body h2 {
  display: flex;
  align-items: center;
}

.modal-body h2 span {
  font-weight: normal;
  font-size: 18pt;
  margin-left: 5px;
}

.modal-body h3 {
  font-size: 18pt;
  margin-bottom: 4px;
}

.modal-body h2 { 
  padding: 4px;
}

div .summary {
  padding: 3px;
}

div.lecture .summary, h2.lecture {
  background-color: #dfdaf1;
}

div.lecture {
  border: 2pt solid #dfdaf1;
}

div.lecture hr {
  border-top: 1pt solid #dfdaf1;
}

div.section .summary, h2.section {
  background-color: #78d4a5;
}

div.section {
  border: 2pt solid #78d4a5;
}

div .section hr {
  border-top: 1pt solid #78d4a5;
}

div.hw .summary, h2.hw {
  background-color: #fbbcff;
}

div .summary {
  margin-bottom: 0;
}

.eventtd > div {
  margin-bottom: 4px;
  border-radius: 2pt;
}

.eventtd > div hr {
  margin: 0 4px;
}

div.lab .summary, h2.lab {
  background-color: #519c76;
}

div.lab {
  border: 2pt solid #519c76;
}

div.lab hr {
  border-top: 1pt solid #519c76;
}

div.other .summary, h2.other {
  background-color: #dda0dd;
}

div.other {
  border: 2pt solid #dda0dd;
}

div.other hr {
  border-top: 1pt solid #dda0dd;
}

td .summary a {
  text-decoration: underline;
  color: #636363
}

td .summary a:hover {
  color: #000;
}

div.exam .summary {
  background-color: #f2dede;
  padding: 4px;
}

div.exam {
  border: 2pt solid #f2dede;
}

div.oh .summary, h2.oh {
  background-color: #bfe9f9;
}

div.oh {
  border: 2pt solid #bfe9f9;
}

div.holiday .summary {
  background-color: #f5f5f5;
}

div .description, div .status {
  margin: 4px;
  font-size: 8pt;
}

.readings-header, .materials-header, .resources-header, .details-header {
  margin-left: 4px;
  margin-bottom: 0;
}

.eventtd li {
  margin-bottom: 0;
}

.eventtd ul, .eventtd ol {
  margin-left: 25px;
  margin-bottom: 0;
}

@media print {
  TABLE, IMG { page-break-during: avoid }
}

@media only screen and (max-width: 600px) {
  table {
    table-layout: auto;
    display: flex;
  }

  tbody {
    width: 100%;
  }

  td.eventtd .summary, td.eventtd .summary .location {
    display: block;
  }

  table tr {
    display: flex;
    flex-direction: column;
  }

  table.monthtable tr:nth-child(2) {
    display: none;
  }
}

@media only screen and (max-width: 950px) {
  .summary .location {
    display: none;
  }
}