html {
  height: 100%; }

body {
  font-family: sans-serif;
  margin: 2rem;
  height: 100%; }

.main {
  margin: auto; }

.split-pane {
  display: flex;
  flex-direction: vertical; }

.split-elem {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 40%;
  margin: 0.25rem; }

.table-wrapper {
  border: 1px solid #ededed;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  border-radius: 0.25rem;
  display: inline-block;
  margin-top: 1rem;
  box-shadow: 0px 0px 5px rgba(128, 128, 128, 0.1);
  box-sizing: border-box;
  width: 100%; }

.class-table {
  border-collapse: collapse;
  table-layout: fixed; }
  .class-table th, .class-table td {
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .class-table th {
    text-align: left; }
  .class-table tr {
    transition: background-color 0.2s; }
    .class-table tr.hoverable:hover {
      background-color: #ffff99; }

.schedule-table {
  width: 100%;
  padding: 1rem; }

.feather {
  vertical-align: middle;
  height: 1rem; }

.button {
  border: 1px solid black;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle; }

.week-grid {
  display: grid;
  width: 100%;
  height: 70vh;
  grid-template-columns: auto repeat(5, 1fr);
  grid-template-rows: auto repeat(12, 1fr); }
  .week-grid .selected {
    border-style: dashed;
    border-width: 2px; }

.course-block {
  position: absolute;
  border: 1px solid;
  border-radius: 0.25rem;
  padding: 0.25rem;
  box-sizing: border-box;
  overflow: hidden; }
  .course-block p {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

.column-container {
  position: relative;
  padding: 0.25rem;
  box-sizing: border-box;
  border-left: 0.5px solid #b3b3b3;
  border-right: 0.5px solid #b3b3b3; }

.table-day-header {
  padding: 0.25rem;
  text-align: center; }

.time-column {
  padding-right: 1rem; }

.bubble {
  padding: 0.2rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  border: 0.1rem solid;
  border-radius: 0.5rem;
  margin-right: 0.5rem;
  background-color: #b9d2ff;
  border-color: #86b2ff;
  white-space: nowrap; }

.course {
  padding: 1rem;
  display: flex; }
  .course.selected {
    border-style: dashed;
    border-width: 2px; }
  .course:nth-child(2n) {
    background-color: #eef2f9; }
  .course.selected {
    border: 1px dashed black; }
  .course p {
    margin: 0; }

.course-content {
  flex-grow: 1; }

.course-add-remove {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.course-title {
  font-weight: bold;
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw; }

p.course-info {
  margin-top: 0.5rem;
  display: flex; }

.feather {
  height: 1.3rem;
  stroke-width: 0.15rem;
  margin-right: 0.1rem;
  vertical-align: middle; }

.color-green {
  background-color: #cbebd3;
  border-color: #5bc275;
  color: #246033; }

.color-red {
  background-color: #ebcbd3;
  border-color: #c25b75;
  color: #602433; }