html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.modal-wrapper {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.schedule {
  position: relative;
  padding: 2em 1em 0 1em;
}
.schedule .loader a {
  display: block;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 -1px #000;
  font-size: 2em;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  background: #f33;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
  border-radius: 50%;
}
.schedule .loader a:hover {
  background: #d00;
}
.schedule .loader .data-source {
  width: 80%;
  padding: 2em;
  background: #fff;
}
.schedule .loader .data-source textarea {
  width: 100%;
  height: 10em;
}
.schedule .loader .data-source:before {
  content: '';
  position: absoulte;
}
.schedule .loader .data-source.hidden {
  display: none;
}
.schedule .controls {
  z-index: 500;
  position: absolute;
  display: flex;
  justify-content: space-between;
  height: 300px;
  top: -300px;
  left: 1em;
  right: 1em;
  max-width: 40em;
  padding: 1em;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: top 0.5s ease-out;
}
.schedule .controls:hover {
  top: 0;
}
.schedule .controls .divider {
  border-left: 1px solid #999;
  border-right: 1px solid #ccc;
}
.schedule .controls .pane {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0;
  padding: 0 1em;
  user-select: none;
  justify-content: space-between;
  flex: 1;
}
.schedule .add-btn,
.schedule .del-btn,
.schedule .sort-btn {
  display: inline-block;
  border-radius: 4px;
  padding: 4px;
}
.schedule .add-btn:hover,
.schedule .del-btn:hover,
.schedule .sort-btn:hover {
  background: #21b384;
  text-shadow: 0 0 4px rgba(255,255,0,0.8);
}
.schedule ul.toggle {
  list-style: none;
}
.schedule .schedule-header,
.schedule .schedule-main {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
.schedule .schedule-header > tbody > tr > th,
.schedule .schedule-main > tbody > tr > th,
.schedule .schedule-header > tbody > tr > td,
.schedule .schedule-main > tbody > tr > td {
  margin: 0;
  padding: 0;
}
.schedule .schedule-header {
  margin-bottom: 5px;
  height: 2em;
}
.schedule .schedule-header th {
  text-align: center;
}
.schedule .schedule-header .all-day-events {
  vertical-align: top;
}
.schedule .schedule-header .event {
  position: static;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.schedule .schedule-header .event .subject {
  display: inline;
}
.schedule .schedule-header .event .owner {
  display: inline;
}
.schedule .schedule-header .event .owner:before {
  content: " - ";
}
.schedule .schedule-main {
  margin-top: -1px;
}
.schedule .col-title {
  text-align: center;
}
.schedule .scroll-wrapper {
  position: relative;
  overflow-y: scroll;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.schedule .row-header {
  width: 80px;
  text-align: right;
}
.schedule .hour {
  height: 100px;
  padding-right: 4px;
  font-size: 12px;
  font-weight: normal;
  color: #ccc;
}
.schedule .markers-wrapper {
  position: relative;
}
.schedule .markers {
  position: absolute;
  width: 100%;
}
.schedule .marker {
  box-sizing: border-box;
  height: 50px;
  margin-bottom: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
}
.schedule .schedule-main .events {
  position: relative;
  border-left: 1px solid #ccc;
}
.schedule .event {
  box-sizing: border-box;
  position: absolute;
  background: rgba(230,230,230,0.8);
  left: 0;
  right: 4%;
  border-left: 2px solid #000;
  box-shadow: 0 -1px rgba(0,0,0,0.2) inset;
  padding: 1px 2px;
  cursor: default;
  font-size: 10px;
  overflow: hidden;
}
.schedule .event:hover {
  z-index: 100;
}
.schedule .event .time {
  overflow: hidden;
  white-space: nowrap;
  font-size: 10px;
}
.schedule .event .subject {
  font-weight: bold;
}
.schedule .event .owner {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.schedule .event .description {
  white-space: pre-wrap;
}
.schedule .event.type0 {
  background: rgba(255,216,216,0.8);
  border-left-color: #c00;
  color: #c00;
}
.schedule .event.type0:hover {
  background: rgba(255,169,169,0.8);
}
.schedule .event.type1 {
  background: rgba(255,238,216,0.8);
  border-left-color: #cc6d00;
  color: #cc6d00;
}
.schedule .event.type1:hover {
  background: rgba(255,217,169,0.8);
}
.schedule .event.type2 {
  background: rgba(253,255,216,0.8);
  border-left-color: #becc00;
  color: #becc00;
}
.schedule .event.type2:hover {
  background: rgba(251,255,169,0.8);
}
.schedule .event.type3 {
  background: rgba(233,255,216,0.8);
  border-left-color: #52cc00;
  color: #52cc00;
}
.schedule .event.type3:hover {
  background: rgba(206,255,169,0.8);
}
.schedule .event.type4 {
  background: rgba(216,255,221,0.8);
  border-left-color: #00cc1b;
  color: #00cc1b;
}
.schedule .event.type4:hover {
  background: rgba(169,255,180,0.8);
}
.schedule .event.type5 {
  background: rgba(216,255,243,0.8);
  border-left-color: #0c8;
  color: #0c8;
}
.schedule .event.type5:hover {
  background: rgba(169,255,229,0.8);
}
.schedule .event.type6 {
  background: rgba(216,248,255,0.8);
  border-left-color: #00a3cc;
  color: #00a3cc;
}
.schedule .event.type6:hover {
  background: rgba(169,240,255,0.8);
}
.schedule .event.type7 {
  background: rgba(216,228,255,0.8);
  border-left-color: #0036cc;
  color: #0036cc;
}
.schedule .event.type7:hover {
  background: rgba(169,195,255,0.8);
}
.schedule .event.type8 {
  background: rgba(228,216,255,0.8);
  border-left-color: #3600cc;
  color: #3600cc;
}
.schedule .event.type8:hover {
  background: rgba(195,169,255,0.8);
}
.schedule .event.type9 {
  background: rgba(248,216,255,0.8);
  border-left-color: #a300cc;
  color: #a300cc;
}
.schedule .event.type9:hover {
  background: rgba(240,169,255,0.8);
}
.schedule .event-details {
  position: fixed;
  max-width: 900px;
  min-height: 300px;
  padding: 0;
  border: 1px solid #666;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 30px 2px rgba(0,0,0,0.3);
  display: flex;
}
.schedule .event-details .aside {
  padding: 5px 10px;
  background: #008000;
  font-family: monospace;
}
.schedule .event-details .aside span {
  display: inline-block;
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  background: #f0f0f0;
}
.schedule .event-details .aside .place span:before {
  content: "@";
}
.schedule .event-details .aside .tags span:before {
  content: "#";
}
.schedule .event-details .aside .place,
.schedule .event-details .aside .tags {
  margin-top: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.schedule .event-details .main {
  min-width: 500px;
}
.schedule .event-details .time {
  font-size: 1.5em;
  text-align: right;
}
.schedule .event-details .subject {
  padding: 5px 20px;
  background: #eee;
  font-size: 1.2em;
  font-weight: bold;
}
.schedule .event-details .owner {
  padding: 5px 20px;
  background: #eee;
  text-align: right;
}
.schedule .event-details .owner:before {
  content: "- ";
}
.schedule .event-details .description {
  padding: 5px 20px;
  white-space: pre-wrap;
  color: inherit;
}
.schedule .event-details .placeholder {
  padding: 5px 20px;
  color: #999;
}