/* this is index.php styles */

#homepage-nav,
#homepage-widgets {
  display: flex;
  flex-flow: column;
  grid-gap: 20px;
}

/* Course section block: .course-section, .course-section--teach, .course-section--take */
.course-section {
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border-top: 0;
  background-color: var(--white);
}

.course-section__title {
  padding: 20px;
}

.course-section--teach .course-section__title {
  background-color: var(--yellow-300);
}

.course-section--take .course-section__title {
  background-color: var(--green-300);
}

.course-section__content {
  padding: 20px;
}

/* Reusable content box (e.g. messages widget) */
.content-box {
  border-top: 0;
  background-color: var(--white);
  padding: 20px;
  border-radius: 10px;
}

.courselist ul {
  margin-left: 0;
  padding-left: 1rem;
}

.courselist li.courselistitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 20px 0;
}

.courselist > li > a {
  color: var(--primary-text);
  font-weight: 700;
  text-decoration: underline 2px;
  text-underline-offset: 2px;
  transition:
    ease-in-out text-underline-offset 200ms,
    color 200ms;
}

.courselist > li > a:hover,
.courselist > li > a:focus {
  color: var(--indigo-600);
  text-underline-offset: 3px;
}

ul.courselist > li > a.noticetext {
  font-weight: 400;
}

.course-actions {
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
  display: flex;
  flex-flow: column;
  grid-gap: 24.5px;
}

.widget-block {
  display: flex;
  flex-flow: column;
  grid-gap: 20px;
}

.widget-block .blockitems {
  border-radius: 10px;
}

.posts-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-table {
  width: 100%;
}

.widget-table thead {
  background-color: var(--middle-gray);
}

.widget-table th {
  padding: 10px 5px;
  text-align: center;
}

.widget-table td {
  padding: 20px 10px;
}