body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

/* Begin wrapper for the whole course search interface */
#course_data_wrapper {
    max-width: 1200px;
    line-height: 1.8rem;
    margin: 0 auto;
}
/* End wrapper for the whole course search interface */

/* Begin default search input */
#course_data_wrapper .dataTables_filter {
    display: none;
}
#course_data_wrapper .dataTables_filter label {
}
#course_data_wrapper .dataTables_filter label input {

}
/* End default search input */

/* Begin overall table */
#course_data_wrapper .dataTable {
    display: block;
    width: 100%;
    padding-bottom: 2rem;
}
/* End overall table */

/* Begin table header */
#course_data_wrapper .dataTable thead {
    display: block;
    width: 100%;
    position: sticky;
    background-color: white;
    top: 0;
    padding: 2rem 0;
}
#course_data_wrapper .dataTable thead tr {
    text-align: left;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
}
#course_data_wrapper .dataTable thead tr th {
    display: inline-block;
    flex: 1 1 33%;
    padding: .3rem 0;
    white-space: nowrap;
}
#course_data_wrapper .dataTable thead tr th.unused-header {
    display:none;
}
#course_data_wrapper .dataTable thead tr th.filter-header {
}
#course_data_wrapper .dataTable thead tr th.filter-header > div {
    display: inline-block;
}
#course_data_wrapper #searchbox,
#course_data_wrapper .dataTable thead tr th.filter-header > div select {
    padding: .75rem 10px;
    font-size: 1.1rem;
    margin-left: 10px;
    line-height:normal;
}
#course_data_wrapper .dataTable thead tr th.filter-header .yadcf-filter-wrapper {
}
#course_data_wrapper .dataTable thead tr th.filter-header .yadcf-filter-wrapper select {
    border:1px solid black;
}
#course_data_wrapper .dataTable thead tr th.filter-header .yadcf-filter-wrapper button {
    display: none;
}
/* End table header*/
/* Begin table body */
#course_data_wrapper .dataTable tbody {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
}
#course_data_wrapper .dataTable tbody tr {
    display: flex;
    flex: 1 0 51%; /* allow the rows to grow but not shrink below 51%, this forces a single column*/
    flex-wrap: wrap;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
    background-color: white;
    cursor: pointer;
    align-items:flex-start;
}
#course_data_wrapper .dataTable tbody tr td {
    display: flex;
    padding: 1.5rem 0;
    flex-wrap: wrap;
    color: #0055b8;
    justify-content: space-between;
}
#course_data_wrapper .dataTable tbody tr.expanded {
    background-color: #0055b8;
}
/* Override some styles that are coming from the ÒÁÈËÖ±²¥app pre-existing styles */
#course_data_wrapper .dataTable tbody tr td p {
    margin: 0 !important;
    color: #4d4d4d !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 1.8rem !important;
}
#course_data_wrapper .dataTable tbody tr.group td {
    flex: 1 0 51%;
    font-size: 1.2rem;
    font-weight: bold;
    justify-content: space-between;
    margin: 0 20px;
}
#course_data_wrapper .dataTable tbody tr.group.expanded td {
    color: white;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(1) {
    font-size: 1rem;
    font-weight: normal;
    padding: 1.1rem 0;
}
#course_data_wrapper .dataTable tbody tr td:after {
    content: "\f067";
    font-size: 2rem;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#course_data_wrapper .dataTable tbody tr.expanded td:after {
    content: "\f068";
    font-size: 2rem;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#course_data_wrapper .dataTable tbody tr.group {
    margin-left: 5px;
    margin-top: .3rem;
}
#course_data_wrapper .dataTable tbody tr:not(.group) {
    display: none;
}
#course_data_wrapper .dataTable tbody tr.visible:not(.group) {
    display: flex;
    background-color: #f2f2f2;
}
#course_data_wrapper .dataTable tbody tr.visible:not(.group).expanded {
    background-color: white;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td {    
    margin: 0 20px 0 30px;
}
/* This section contains column specific styling, if columns are added, removed, or re-ordered it could require multiple changes in all the nth-of-type selectors */
#course_data_wrapper .dataTable tbody tr:not(.group) td:not(:nth-of-type(1)) { 
    display:none;
    justify-content: start;
    padding: 0;
    color: #4d4d4d;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:not(:nth-of-type(1)):before {
    content: "";
}
#course_data_wrapper .dataTable tbody tr.expanded:not(.group) td:not(:nth-of-type(1)) {
    display:flex;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(1) {
    flex: 1 0 51%;
    white-space:nowrap;
    font-weight: bold;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(2) {
    flex: 1 0 51%;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(2):before {
    content: "Meeting times:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(3) {
    flex: 1 1 50%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(3):before {
    content: "Start Date:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(4) {
    flex: 1 1 50%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(4):before {
    content: "End Date:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(5) {
    flex: 1 1 50%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(5):before {
    content: "Status:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(6) {
    flex: 1 1 50%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(6):before {
    content: "Capacity:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(7) {
    flex: 1 0 51%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(7):before {
    content: "Instructor(s):";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(8) {
    flex: 1 0 51%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(8):before {
    content: "Academic Period:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(9) {
    flex: 1 0 51%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(9):before {
    content: "Campus:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(10) {
    flex: 1 0 51%;
    white-space:nowrap;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(10):before {
    content: "Location:";
    font-weight: bold;
    margin-right: 5px;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(11) {
    flex: 1 0 51%;
    margin-right: 30px;
    padding-bottom: 2.5rem;
}
#course_data_wrapper .dataTable tbody tr:not(.group) td:nth-of-type(11):before {
    content: "Description:";
    font-weight: bold;
    margin-right: 5px;
    flex: 1 0 51%;
}
/* End table body */

/* Begin table info */
#course_data_wrapper .dataTables_info {   
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: white;
}
/* End table info */

/* Mobile stacking for the two filter selects */
@media (max-width: 600px) {
  #course_data_wrapper .dataTable thead tr th {
    display: table-cell;      /* or block; table-cell is closer to default */
    flex: none;               /* neutralize any flex values */
    white-space: normal;      /* allow wrapping of header text/filter */
    vertical-align: top;
  }

  /* Now force the two filters to stack and fill the cell */
  #yadcf-filter--course_data-8,
  #yadcf-filter--course_data-9 {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem 0;    /* space between them */
  }
  
  /* Let ALL tbody cells wrap instead of DataTables' nowrap */
  #course_data_wrapper .dataTable tbody td {
    white-space: normal !important;
    word-break: break-word;      /* helps with long words/URLs */
  }

  /* The title cell (course + section rows) that owns the +/- */
  #course_data_wrapper .dataTable tbody tr td:first-child {
    position: relative;
    padding-right: 2rem;         /* room for the +/- icon on the right */
  }

  /* Keep the existing +/- pseudo-element fixed on the right */
  #course_data_wrapper .dataTable tbody tr td:first-child:after {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;        /* clicking still hits the cell */
    /* content remains from your existing CSS: "+" and "-" */
  }
  
   #course_data_wrapper .dataTables_scrollHead {
    position: relative;     /* make sure it participates in stacking */
    z-index: 20;            /* higher than tbody rows */
  }
   #course_data_wrapper .dataTable thead {
    position: relative;
    z-index: 20;

  /* Make sure the actual header cells have a solid background */
  #course_data_wrapper .dataTables_scrollHead thead th,
  #course_data_wrapper .dataTable thead th {
    background: #fff;       /* or whatever your table bg is */
  }
}