/* Widget changes when in edit annotation dialog */
#focusWidgetWindow .widgetContainer {
  border: none;
  float:  left;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
.darkTheme #focusWidgetWindow .widgetContainer {
  background-color: hsla(213, 3%, 10%, .8);
}
#focusWidgetWindow .xboxContent > div {
  border: none;
  border-bottom-right-radius: 0px;
}
#focusWidgetWindow .widgetTitleContainer {
  border-bottom:  none;
}
.darkBlue #focusWidgetWindow .widgetContainer .widgetTitleContainer {
  background-color: hsla(213, 3%, 10%, .8);
}
.darkBlueTheme #focusWidgetWindow .widgetContainer .widgetTitleContainer {
  background-color: hsla(200, 50%, 20%, .8);
}
#focusWidgetWindow .ejsc-legend,
#focusWidgetWindow .ejsc-h-axis-caption-div.axisLabels {
  opacity:  0;
}

/* Overlay and animation elements */
#focusWidgetAnimationBox,
#focusWidgetHeader,
#focusWidgetOverlay {
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
#focusWidgetAnimationBox {
  position: fixed;
  z-index:  3;
  border-radius: 5px;
  background-color: white;
}
.darkTheme #focusWidgetAnimationBox {
  background-color: hsla(213, 5%, 12%, .95);
}
.darkBlueTheme #focusWidgetAnimationBox {
  background-color: hsla(200, 75%, 18%, .95);
}
#focusWidgetContent {
  position: fixed;
  z-index: 4;
  transition: opacity 500ms ease;
}
#focusWidgetWindow {
  z-index:  2;
  top:  0;
  width:  100%;
  height: 100%;
  position: absolute;
  float:  left;
}
#focusWidgetHeader {
  background: hsla(0, 0%, 50%, 0.95);
  z-index:  3;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: inline-block;
  width:  100%;
  background: linear-gradient(#f0f3f7 0%, #e4e7eb 100%);
  border-bottom: 1px solid #a4aab3;
  border-top: 1px solid #a4aab3;
  transform-origin: 0% 0% 0;
}
#focusWidgetHeader > div {
  margin: 8px 8px 8px 16px;
}
#focusWidgetHeader > div:last-child {
  float:  right;
}
#focusWidgetTitle {
  font-size: 18px;
  color: hsla(210, 82%, 49%, 1);
}
#focusWidgetExit {
  cursor: pointer;
  font-size: 14px;
  background: #3B9FFF;
  color: #fff;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
}
#focusWidgetOverlay {
  height: 100%;
  width:  100%;
  background: hsla(0, 0%, 50%, 0.95);
}

#annotationPanel {
  float:  right;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  background-color: white;
  transition: opacity 500ms ease;
  z-index:  4;
}
.darkTheme #annotationPanel {
  background-color: hsla(213, 3%, 10%, .8);
}
.darkBlueTheme #annotationPanel {
  background-color: hsla(200, 50%, 20%, .8);
}
#annotationPanel > div {
  margin: 29px 10px;
  border: 1px solid rgba(0,0,0,.2);
}
.darkTheme #annotationPanel > div,
.darkTheme .AnnotationEditDialogFooter {
  border-color: hsl(213,3%,44%);
}
.darkBlueTheme #annotationPanel > div,
.darkBlueTheme .AnnotationEditDialogFooter {
  border-color: hsl(200,30%,44%);
}
.AnnotationEditDialogTitle {
  background-color: rgb(252, 174, 91);
  color:            white;
  height:           20px;
  line-height:  20px;
  font-size:  14px;
  padding-left: 10px;
}
.darkTheme .AnnotationEditDialogTitle {
  background-color: hsl(195,98%,35%);
}
.darkBlueTheme .AnnotationEditDialogTitle {
  background-color: hsl(195,100%,40%);
}
.system .AnnotationEditDialogTitle {
  background-color: rgb(176, 190, 197);
}
.darkTheme .system .AnnotationEditDialogTitle {
  background-color: rgb(69, 99, 135);
}
.darkBlueTheme .system .AnnotationEditDialogTitle {
  background-color: rgb(33, 101, 135);
}
.AnnotationEditDialogFooter {
  border-top: 1px solid rgba(0,0,0,.2);
  height:           29px;
}
.AnnotationEditDialogFooter img {
  padding-top: 6.5px;
  padding-left: 20px;
  cursor: pointer;
}

/* Annotation note */
.AnnoNoteContainer {
  padding:  10px;
}
.darkTheme .AnnoNoteContainer {
  color: hsl(200, 30%, 75%);
}
.darkBlueTheme .AnnoNoteContainer {
  color: hsl(200, 30%, 75%);
}
.AnnoNoteTime {
  font-weight:    bold;
  margin:         3px 0px;
  padding:        2px 0px;
  border-radius:  5px;
}
.AnnoNoteTime.invalid {
  color:  red;
}
.AnnoNoteTime.active {
  width:            fit-content;
  padding:          2px 3px;
  background-color: rgba(252, 174, 91, .5);
}
.darkTheme .AnnoNoteTime.active {
  background-color: rgba(2, 133, 177, .5);
}
.darkBlueTheme .AnnoNoteTime.active {
  background-color: rgba(2, 133, 177, .5);
}
.system .AnnoNoteTime.active {
  background-color: rgba(207, 216, 220, .5);
}
.darkTheme .system .AnnoNoteTime.active {
  background-color: rgba(69, 99, 135, .5);
}
.darkBlueTheme .system .AnnoNoteTime.active {
  background-color: rgba(33, 101, 135, .5);
}
.edit .AnnoNoteTime,
.add .AnnoNoteTime {
  cursor:pointer;
}
.AnnoNoteTime span {
  font-weight:  normal;
}

#AnnoNote {
  display:   flex;
  flex-flow: column;
}

#AnnoNote hr {
  border: none;
  height: 1px;
  width:  100%;
  flex:   none;
}
.AnnoNoteTitle {
  font-weight:  bold;
  padding-bottom: 5px;
  overflow-y: scroll;
}
.AnnoNoteContent {
  overflow-y: scroll;
  flex:       1;
}
.AnnoNoteFooter {
  height: 10px;
}
.AnnoNoteFooter > div {
  cursor: pointer;
  padding:  0px 10px;
}
.AnnoNoteFooter > div:first-child {
  float:  left;
}
.AnnoNoteFooter > div:last-child {
  float:  right;
}
.AnnoNoteMessage {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding:5px;
}
.darkTheme .AnnoNoteMessage,
.darkBlueTheme .AnnoNoteMessage {
  color:  #000;
}
.AnnoNoteMessage > span {
  background-color: rgb(175, 189, 196);
  padding: 10px;
  text-align: center;
  width:75%;
  display:inline-block;
}
#AnnoNote input {
  width:100%;
  border-color: rgba(204, 204, 204, .5);
}
#AnnoNote textarea {
  width:100%;
  margin-top: 5px;
  border-color: rgba(204, 204, 204, .5);
}

/* Calendar */
#AnnoNote .date-time-calendar {
  padding:0px;
  height:100%;
}
#AnnoNote .calendar-div {
  width:100%;
}
#AnnoNote .date-time-time-select-div {
  width:auto;
}
#AnnoNote .ui-datepicker-title {
  margin:0 1.9em;
}
#AnnoNote .now-button {
  width:auto;
}
#AnnoNote .date-time-calendar td {
  padding:1px;
}
#focusWidgetWindow .date-time-calendar .ui-state-active {
  border-radius:    12px;
}

#focusWidgetWindow .granularity-container,
#focusWidgetWindow .xlabel-suffix,
#focusWidgetWindow .c3LegendToggler,
#focusWidgetWindow .c3-axis-x-label,
#focusWidgetWindow .widget-menu-dropdown {
  visibility: hidden;
}