#SpanCreator {
  background-color: hsl(12, 83%, 62%);
  padding: 1rem;
}
#SpanCreator>*{
  vertical-align: top;
}
#SpanCreator label {
  margin-bottom: 0.2em;
  display: block;
}
#SpanCreator .project_suggestions {
  display: inline-block;
  position: relative;
}
#SpanCreator .start,
#SpanCreator .finish {
  display: inline-block;
}

#SpanCreator .time_fields {
  width:23em;
  display: inline-block;
}
#SpanCreator .time_field_wrapper {
  display: inline-block;
}
#SpanCreator .time_field_wrapper:first-child {
  margin-right: 1em;
}
#SpanCreator .time_field_container {
  display: inline-block;
  position: relative;
  font-size: 1.35rem;
  letter-spacing: .1em;
}
#SpanCreator .time_field_container>* {
  vertical-align: top;
}
#SpanCreator .time_field_container .time {
  border: 1px solid hsl(0, 0%, 80%);
  display: inline-block;
  width: 3em;
  height: 1.25em;
  padding: 0.5em;
  text-align: right;
  padding-right: 4em;
  background-color: #fff;
  user-select: none;
}
#SpanCreator .time_field_container.has_focus .time {
  border:1px solid #FFF;
}
#SpanCreator .time_field_container .period {
  cursor:pointer;
  display: inline-block;
  border: 1px solid transparent;
  height: 1.25em;
  padding: 0.25em;
  position: absolute;
  left:3.5em;
  top:0.25em;
  text-transform: lowercase;
}
#SpanCreator .time_field_container button.now {
  display: inline-block;
  border-left:1px solid hsl(202, 46%, 72%);
  border-right:1px solid hsl(202, 46%, 72%);
  border-top: 0;
  border-bottom: 0;
  position: absolute;
  right:1px;
  top:1px;
  height:1.8em;
  font-size: 1.25em;
  cursor: pointer;
  padding:0.2em;
  background-color: hsl(202, 46%, 72%);
  color:#fff;
}
#SpanCreator .time_field_container button.now:hover {
  background-color: hsl(202, 46%, 76%);
}
#SpanCreator .time_field_container .cursor {
  display: none;
  position: absolute;
  height: 1.45em;
  border-left: 1px solid hsla(0, 0%, 0%, 0.3);
  top:.38em;
  left:3.55em;
  text-decoration: blink;
}
#SpanCreator .time_field_container.has_focus .cursor {
  display: inline-block;
}
#SpanCreator .error,
#SpanCreator .time_field_container .time.error {
  border:1px solid red;
}
#SpanCreator .time_field_container .time,
#SpanCreator input {
  background-color: hsl(0, 0%, 97%);
}
#SpanCreator .project_suggestions, 
#SpanCreator .time_field_wrapper, 
#SpanCreator .task_list {
  margin-bottom: 0.75rem;
}
#SpanCreator .project_suggestions input {
  font-size: 1.35em;
  box-sizing: border-box;
}
#SpanCreator .project_suggestions input:valid {
}
#SpanCreator .project_suggestions ul {
  display: none;
  z-index: 10;
  position: absolute;
  top: 4.5em;
  left:0;
  min-height: 3em;
  padding:0;
  margin:0;
  box-shadow: 0 3px 5px hsla(0, 0%, 90%, 1);
}
#SpanCreator .project_suggestions .suggestion:first-child {
  border-top:1px solid hsla(0, 0%, 80%, 1);
}
#SpanCreator .task_list .available li,
#SpanCreator .project_suggestions .suggestion {
  min-width: 17em;
  position: relative;
  cursor: pointer;
  list-style: none;
  padding:1em 1em;
  border-bottom:1px solid hsl(0, 0%, 82%);
  border-right:1px solid hsl(0, 0%, 82%);
  border-left:1px solid hsl(0, 0%, 82%);
  background-color: hsla(0, 0%, 97%, 0.9);
  margin: 0;
}
#SpanCreator .task_list li.selected,
#SpanCreator .task_list ul.available li:hover,
#SpanCreator .project_suggestions .suggestion.today.selected,
#SpanCreator .project_suggestions .suggestion.selected,
#SpanCreator .project_suggestions .suggestion.today:hover,
#SpanCreator .project_suggestions .suggestion:hover {
  background-color: hsl(209, 70%, 67%);
}
#SpanCreator .task_list .selected_indicator,
#SpanCreator .project_suggestions .suggestion .recent_indicator,
#SpanCreator .project_suggestions .suggestion .selected_indicator {
  display: none;
}
#SpanCreator .project_suggestions .suggestion.yesterday .recent_indicator,
#SpanCreator .project_suggestions .suggestion.today .recent_indicator {
  display: inline;
}
#SpanCreator .task_list .available .suggestion.selected .selected_indicator,
#SpanCreator .project_suggestions .suggestion.selected.today .selected_indicator,
#SpanCreator .project_suggestions .suggestion.selected .selected_indicator {
  display: inline-block;
  margin-right:0.1em;
}
#SpanCreator .project_suggestions .suggestion .recent_indicator {
  position: absolute;
  right:0.2em;
  opacity: 0.6;
}
#SpanCreator .task_list {
  display: inline-block;
  width: 15em;
  position: relative;
}
#SpanCreator .task_list input {
  font-size: 1.35em;
  box-sizing: border-box;
  width: 100%;
}
#SpanCreator .task_list ul.assigned {
  padding:0;
  margin-top: 0.3em;
}
#SpanCreator .task_list ul.assigned li {
  list-style: none;
  display: block;
  padding: 0.25em 0.5em 0.25em 0.25em;
  border-radius: 4px;
  margin:0.2em;
}
#SpanCreator .task_list li a {
  cursor: pointer;
  display: inline-block;
  padding:0.25em;
}
#SpanCreator .task_list ul.available li {
  display: block;
}

#SpanCreator .task_list ul.available {
  display: none;
  z-index: 10;
  position: absolute;
  top: 4.5em;
  left:0;
  min-height: 3em;
  padding:0;
  margin:0;
  box-shadow: 0 3px 5px hsla(0, 0%, 90%, 1);
}
#SpanCreator .task_list ul.available li {
}
#SpanCreator .button_container {
  margin-bottom: 1em;
}
#SpanCreator .button {
  display: inline-block;
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 4px;
  font-size: 1em;
}
#SpanCreator .button i {
  font-size: 1.5em;
  margin-right:0.2em;
  vertical-align: text-bottom;
}
#SpanCreator .save {
  background-color: hsl(214, 35%, 37%);
  color: hsl(0, 0%, 100%);
}
#SpanCreator .save:hover {
  background-color: hsl(214, 35%, 42%);
}
#SpanCreator .duplicate {
  background-color: hsl(214, 35%, 37%);
  color: white;
}
#SpanCreator .duplicate:hover {
  background-color: hsl(214, 35%, 42%);
}
#SpanCreator .cancel {
  background-color: hsl(202, 46%, 72%);
  border:  none;
  color: black;
}
#SpanCreator .editing_indicator {
  display: none;
}
#SpanCreator .hotkeys_button {
  font-size: 0.9em;
  cursor: pointer;
}
#SpanCreator section.hotkeys {
  display: none;
  margin-top:1em;
  margin-bottom: 0;
  font-size: 0.9em;
}
#SpanCreator section.hotkeys.active {
  display: block;
}
#SpanCreator .hotkeys .set {
  display: inline-block;
  margin-right: 2em;
  vertical-align: top;
}
#SpanCreator .hotkeys .set header {
  border-bottom: 1px solid black;
  margin-bottom: 0.5em;
}
#SpanCreator .hotkeys .keys {
  display: inline-block;
}
#SpanCreator .hotkeys .global .keys {
  min-width: 11em;
}
#SpanCreator .hotkeys .time .keys {
  min-width: 2em;
}
#SpanCreator .hotkeys ul {
  width: 20em;
  vertical-align: top;
}
#SpanCreator .hotkeys li {
  list-style: none;
  padding:0.25em;
}
#SpanCreator .hotkeys .icon {
  display:inline-block;
  border-radius: 4px;
  border: 1px solid black;
  padding: .1em .3em 0em 0.3em;
}
#SpanCreator .hotkeys .icon.pad {
  padding: .1em .5em 0em 0.5em;
}
#SpanCreator .hotkeys .text {
  display:inline-block;
  margin-left: 0.25em;
}
#SpanCreator .elapsed_minutes {
  display: block;
  padding: 0.5rem;
  font-size: 0.9rem;
  text-align: right;
}
#SpanCreator unit {
  font-size: 0.9em;
}