/* CSS for prediction page */

#content {
  font-size: 14px;                      /* like Bootstrap; save GUI space */
}

/* guiMapWrapper: --------------------------------------------------------- */
/* modelled after [table]GlobesWrapper */

.guiMapWrapper {                        /* Flows map right or below GUI */
  display: flex;                        /* map flows below GUI if needed */
  flex-wrap: wrap;                      /* "" */
  justify-content: start;               /* left-justify, and avoid GUI L/R */
                                        /*   move when weather image appears */
  align-items: start;                   /* top-align GUI+map (when KML info */
                                        /*   makes GUI taller than map) */
}

@media screen and (min-width: 8in) {    /* desktop only */
  div.guiMapWrapper {                   /* override .guiMapWrapper */
    flex-wrap: nowrap;                  /* only wrap if horiz. viewport tight*/
  }
}

#stackedElements {                      /* map + KML overlay, sans caption */
  overflow: clip;                       /* clip map-zoomed weather images */
}
#animationFrames {                      /* weather images only (no KML) */
  transform-origin: top left;           /* gui.js map pan/zoom math basis */
}

/* ------------------------------------------------------------------------ */

.defMargin {
  margin: 5px;
}
.defPadding {
  padding: 5px;
}
.defSpacing {
  border-spacing: 5px;          /* see also overrides on e.g. some <td>s */
  border-collapse: separate;    /* lets border-spacing work? */
}
.defSpacing td {
  padding-right: 5px;           /* bump next-right <td> */
  vertical-align: top;          /* stabilize Model vertically when Provider */
                                /*   changes, e.g. <select> becomes text */
}

.widgetOrLabel {                /* text widget or label above it, in <td> */
  text-align: left;
  white-space: nowrap;          /* for potential long labels */
}

#animationSlider {              /* Xmas lights slider */
  min-height: 5.6em;            /* roughly what xmasSlider.init() does; */
                                /*   pre-set: minimize move on JS init/fail */
}
#animationLoad {                /* progress bar, used only during image load */
  visibility: hidden;
  height: 0.8em;
}

/* datetimepicker use by gui.js: ------------------------------------------ */

/* Event day in datepicker; be at least as specific as
 * jquery.datetimepicker.css selector
 * `.xdsoft_datetimepicker .xdsoft_calendar td' (`month days')
 * to override it, but less specific than
 * `.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current' (`selected day')
 * so that event day becomes current-blue when selected.
 * Do not use: will use background highlight for product/run range instead.
 */
/* .xdsoft_calendar td.datepickerEvent { */
/*   background: #e0e0e0;          /\* subtle *\/ */
/* } */

/* Put star icon before event day in day picker calendar: */
.xdsoft_datetimepicker .xdsoft_calendar td.datepickerEvent div::before {
  font-family: Arial, Glyphicons Halflings;
  content: "\e006\a0";          /* U+E006: Glyphicons star */
}
/* And home icon before now day.  This selector is less-specific than for
 * star-before-event-day so that latter overrides it iff same day:
 */
.xdsoft_calendar td.xdsoft_today div::before {
  font-family: Arial, Glyphicons Halflings;
  content: "\e021\a0";          /* U+E021: Glyphicons home */
}

/* ------------------------------------------------------------------------ */

.maybeEditable {                /* placemark <div>; read-only (KML), or */
                                /*   read/write (scratch; contentEditable) */
  padding: 3px;                 /* gap between cursor and left border */
  margin: 2px;                  /* gap between adjacent rows' borders */
  min-width: 100%;              /* push border full to right */
  overflow-wrap: anywhere;      /* so long words do not expand width */
}
[contentEditable="true"]:hover {
  background-color: #DDD;       /* darken: further hint it is editable */
}
[contentEditable="true"] {      /* e.g. placemark editing */
  background-color: #EEE;       /* hint it is editable (esp. if empty text) */
  display: inline-block;        /* get <br> not <div> when Enter pressed */
}

.textInfo {                     /* <div>s with lots of text */
  overflow-wrap: anywhere;      /* so long URLs wrap and are not cut off */
}

#placemarkInfo {                /* text info on current placemark */
  overflow-y: auto;             /* allow vertical scroll when max-height set*/
  /* There are weird 'overflow-{x,y}' interactions, per:
   * https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475
   * "If you are using visible for either overflow-x or overflow-y and
   * something other than visible for the other, the visible value is
   * interpreted as auto."
   *
   * So our 'overflow-y: auto' causes default 'overflow-x: visible' to
   * become 'auto'.  This could add an unwanted horizontal scrollbar;
   * we avoid that in '#placemarkInfo > table' rule.
   */
}
#placemarkInfo > table {        /* <table> in the #placemarkInfo <div> */
  /* Fill parent <div> (100%), but reduce a bit (5px) for
   * 'a[target="_blank"]::after' CSS open-in-new-tab icon, so it does
   * not overflow width, which would cause an unneeded horizontal
   * scrollbar due to #placemark 'overflow' interactions:
   */
  width: calc(100% - 5px);
}

.ui-widget-header {             /* Generic jQueryUI? used for progress bar */
  background: #C0C0C0;          /* see also createMultiHashProgressBar() */
  border: 0px solid #F0F0F0;
  font-weight: bold;
  /* see also enclosing <div> #animationLoad */
}
.ui-dialog {
  /* Make dialogs appear above KML: */
  z-index: 1000;                /* do we need to append `!important'? */
}

#navDownloadContainer {
  display: flex;
  align-items: flex-end;        /* bottom-align kids i.e. download buttons */
}
#downloadButtons {
  margin-left: auto;            /* align to right */
}