/* CSS common to all pages */

/* Bootstrap fixups: ------------------------------------------------------ */

body {
  font-family: arial;
  font-size: initial;
  margin: revert;
  line-height: revert;
}
hr {
  margin: revert;
  border: revert;
}
label {
  margin-bottom: 0px;
}
p {
  margin: revert;
}
a:focus {
  outline: revert;
  outline-offset: revert;
}
caption {
  padding: revert;
  color: revert;
  text-align: revert;
}

/* Button fixups: ---------------------------------------------------------- */

.wxBtn {                        /* fixups for buttons */
  padding: 1px 3px;             /* less than Bootstrap */
  font-size: 18px;              /* larger "" */
  top: 2px;                     /* more centered vertically "" */
}
.wxBtn:disabled {
  opacity: .4;                  /* more contrast than Bootstrap(?) .65 */
}
.wxBtnPressed, .wxBtnPressed:focus {    /* pressed "radio" button */
  background-color: #33aaff;    /* same blue as date/time picker */
  color: #ffffff;
}
.wxBtnPressed:hover {           /* override Bootstrap black-on-gray */
  background-color: #2e99e6;    /* darker than date/time picker blue */
                                /*   (mimic Bootstrap gray on hover) */
  color: #ffffff;
}
/* Pressed but pending button, e.g. track-current-location w/o location: */
.wxBtnPressed.wxBtnPending, .wxBtnPressed.wxBtnPending:focus {
  background-color: #e2e51f;
}
.wxBtnPressed.wxBtnPending:hover {
  background-color: #d0d31e;    /* darker than non-hover, ala wxBtnPressed */
}

.regionNavBtn {                 /* fixups for .wxBtn for region nav buttons */
  width: 1.8em;                 /* needed with <svg> version? */
  height: 1.7em;                /* "" */
}
.regionNavBtn:disabled {
  opacity: .4;                  /* more contrast than Bootstrap(?) .65 */
}

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

/* This @media assumes <meta name="viewport" content="width=device-width"/>:*/
/* Without <meta>: width 964/964px mobile portrait/landscape, height varies */
/* With <meta>:    width 344/689px "" */
/*  ""             max-width 4/8in "" */
/* See also window.matchMedia() and wxUtil.userAgentIsMobile() (deprecate */
/* latter for consistency w/CSS wtf?) calls in JavaScript: */
@media screen and (max-width: 8in) {    /* mobile only */
  .wideContent {
    font-size: 16px;                    /* max useful for Events page */
  }
}

a {
  text-decoration: none;                /* like Bootstrap on prediction page */
  color: #337ab7;                       /* "" */
}
a:hover {
  text-decoration: underline;           /* like Bootstrap on prediction page */
  color: #23527c;                       /* "" */
}

/* topNav: ---------------------------------------------------------------- */

.topNav {
  display: flex;
  flex-wrap: wrap;              /* later link <span>s flow below if needed */
}
.topNav > span {
  text-align: left;
  flex-grow: 1;
}
.topNav > span:last-of-type {
  text-align: right;
  margin-left: 1.5em;           /* separate from <span> to left */
}

/* eventInfoTable: -------------------------------------------------------- */

.eventInfoTable th {
  border-bottom: 1px solid #d0d0d0;
}
.eventInfoTable th, .eventInfoTable td {
  padding: 0.6em;
  text-align: left;
}

/* To save vertical space in mobile portrait (let the globe show nearly */
/* completely), hide some columns and transform the remaining 4 into */
/* 2x2 table: */
@media screen and (max-width: 5in) {    /* ~mobile portrait; same width as */
                                        /*   collapseIfNarrowScreen collapse */
  /* Force table to not be like tables anymore */
  table.eventInfoTable, .eventInfoTable thead, .eventInfoTable tbody,
  .eventInfoTable th, .eventInfoTable td, .eventInfoTable tr {
    display: block;
  }
  table.eventInfoTable {
    padding-bottom: 1em; /* vspace between info table and dataTable caption */
  }
  /* Hide table headers (but not "display: none;", for accessibility) */
  .eventInfoTable th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  /* Make <td> behave like a "row": */
  .eventInfoTable td {
    border: 1px solid #d0d0d0;
    position: relative;
    padding: 0.2em                      /* save vertical space */
  }
  .eventInfoTable td:nth-of-type(even) {
    padding-left: 30%;                  /* push right as 2nd "column" */
    position: absolute;                 /* start a new "row" */
  }
  .eventInfoTable td:nth-of-type(odd):before {
    padding-left: 50%;                  /* push right as 3rd "column" */
  }
  .eventInfoTable td:nth-of-type(odd) {
    padding-left: 80%;                  /* push right as 4th "column" */
  }
  .eventInfoTable td:before {
    /* Now like a table header */
    position: absolute;                 /* start a new "row" */
    /* Top/left values mimic padding */
    top: 0.2em;
    left: 2px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
  /* Midtime, object, and star already in eventDescription; ok to hide: */
  .eventInfoTable td:nth-of-type(1) { display: none; }
  .eventInfoTable td:nth-of-type(2) { display: none; }
  .eventInfoTable td:nth-of-type(3) { display: none; }
  /* Make visible labels for the rest; see also <td> text if these change: */
  .eventInfoTable td:nth-of-type(4):before { content: "Star MagV:"; }
  .eventInfoTable td:nth-of-type(5):before { content: "Comb. Mag:"; }
  .eventInfoTable td:nth-of-type(6):before { content: "Mag Drop:"; }
  .eventInfoTable td:nth-of-type(7):before { content: "Max Dur.:"; }
}

/* dataTable: ------------------------------------------------------------- */

.dataTableWrapper {
  overflow-y: auto;                     /* enable <tbody> vertical scroll */
  /* see also max-height set in dataTable.js on resize; WTF set via CSS only */
}
table.dataTable {
  border-collapse: collapse;            /* cells share borders, and no gaps */
}
.dataTable {
  background-color: #f0f0f0;
}
.dataTable caption {
  position: sticky;                     /* stay in place when tbody scrolls */
  top: 0px;                             /* "" */
  height: 1.5em;                        /* same as '.dataTable th' top */
  background: white;                    /* hide tbody scrolling behind */
}
.dataTable.twoLineCaption caption {     /* two-line caption e.g. Events */
  height: 3.7em;                        /* override '.dataTable caption' + */
                                /*  same as '.dataTable.twoLineCaption th' */
}
.dataRow:hover {
  background: #e0e0e0;                  /* highlight row on hover */
}
.dataTable tr.dataRowFocus {            /* more specific than .dataRow:hover*/
                                        /*   to override it */
  background: #d0d0d0;                  /* highlight more on focus; */
                                        /*   same as .pastFutureFocus */
}
.pastFuture {                           /* Past/Future Events "tabs" */
  padding: 0.37em;                      /* make .pastFutureFocus bkgnd thick*/
  /*   but exactly touch (do not overflow) .pastFutureWrapper border-bottom */
}
.pastFutureFocus {                      /* Past/Future Events "tab" focus */
  background: #d0d0d0;              /* same as '.dataTable tr.dataRowFocus' */
}
.pastFutureWrapper {                    /* <div> around Past/Future links */
  border-bottom: 1px solid #d0d0d0;     /* same as .pastFutureFocus */
}
.dataTable th {
  /* For scrolling <tbody>: */
  background-color: #f0f0f0;
  position: sticky;                     /* stay in place when tbody scrolls */
  top: 1.5em;                           /* stay with '.dataTable caption': */
                                        /*  its height + top + top/bot margin*/
  /* th-bottom-border-scroll-fix: */
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: inset 0 1px 0 #d0d0d0, inset 0 -1px 0 #d0d0d0; /*td border clr*/
}
.dataTable.twoLineCaption th {      /* two-line captioned th e.g. Events */
  top: 3.7em;               /* same as '.dataTable.twoLineCaption caption': */
                            /*  its height + top + top/bot margin*/
}
.twoLineCaption caption {
  line-height: 1.8em;               /* separate Past/Future and pagination */
}
.dataTable th, .dataTable td {
  border: 1px solid #d0d0d0;            /* divide rows/cols slightly */
  padding: 0.6em;       /* see also collapseIfNarrowScreen media query */
}
/* This and other th-bottom-border-scroll-fix rules are from: */
/* https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element */
/* and fix <th> bottom border disappearing with `border-collapse: collapse' */
/* when <tbody> scrolls up into it: */
table tbody:nth-of-type(1) tr:nth-of-type(1) td {
  border-top: none !important;          /* th-bottom-border-scroll-fix */
}

@media screen and (max-width: 8in) {    /* mobile only */
  .dataTableWrapper .dataTable th, .dataTableWrapper .dataTable td {
    /* override '.dataTable th, .dataTable td' rule */
    padding: 0.3em;                     /* save space on mobile */
  }
}

/* Collapse collapseIfNarrowScreen dataTable columns to '...' when screen */
/* too narrow, to give space to other more important columns: */
@media screen and (max-width: 5in) {    /* ~mobile portrait; same width as */
                                        /*   eventInfoTable 2x2 transform */
  .collapseIfNarrowScreen {
    white-space: nowrap;                /* push text into overflow */
    overflow: hidden;                   /* and hide it */
    max-width: 0.6em;                   /* space for other cols; fit '...' */
  }
  .collapseIfNarrowScreen:before {
    content: "... ";                    /* push <td> text right to hide it; */
    /*   '.collapseIfNarrowScreen { text-overflow: ellipsis; }' would still */
    /*   show ~1st char; >3 '.': sometimes text shows if only 3 '.' */
  }
  .collapseIfNarrowScreen input {       /* e.g. 'Delete...' button */
    display: none;                      /* do not show sliver of button */
  }
  .dataTableWrapper .dataTable th.collapseIfNarrowScreen,
  .dataTableWrapper .dataTable td.collapseIfNarrowScreen {
   /*override '.dataTableWrapper .dataTable th, .dataTableWrapper .dataTable'*/
    padding-left: 0.1em; /* center '.collapseIfNarrowScreen:before' dots */
  }
}

.pgNavArrow {                           /* dataTable etc. page nav */
  font-size: x-large;                   /* mobile visibility */
  font-weight: bold;                    /* "" */
  line-height: 0.9rem;                  /* do not make line taller */
}

.noWrap {
  white-space: nowrap;
}
.opaque {
  opacity: 0;
}

/* [table]GlobesWrapper: -------------------------------------------------- */
/* See also similar guiMapWrapper in prediction.css */

.tableGlobesWrapper {                   /* Flows globe next-to/below table */
  display: flex;                        /* globe flows below table if needed*/
  flex-wrap: wrap;                      /* "" */
  justify-content: space-around;        /* center e.g. globes horizontally */
  align-items: start;                   /* align-top items (in case short) */
}
#globesWrapper {
  position: sticky;                     /* when flowed R of data tbl, still */
                                        /*   visible if long dataTable */
                                        /*   scrolls in *viewport* (!tbody) */
  align-self: flex-start;               /* allow sticky to work */
  top: 6em;                             /* consistent [pre-]sticky position */
  padding: 1em;                         /* native image has no padding */
}
@media screen and (max-width: 8in) {    /* mobile only */
  #globesWrapper {
    padding: 0.5em;                     /* save some vertical space */
  }
}

/* required: -------------------------------------------------------------- */

.required:before {                      /* for required input fields */
  content: "*";
  color: red;
}

.requiredDerivable:before {   /* required, but derivable from another field */
  content: "*";
  color: #ffc000;
}

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

input.shortInput {
  width: 19em;                          /* same as .dragBox, .longInput */
}
input.longInput {
  /* E.g. URL input.  Make it at least same width as .shortInput for
   * consistency when narrow viewport, but lengthen on wide viewports
   * to near right edge to see more of the URL, but have a max (50em,
   * ~enough for OWC prediction URL) to that for sanity:
   */
  width: max(19em, min(100vw - 10em, 50em));
}

/* Drag/file/paste combo: ------------------------------------------------- */

.js .dragBox {                          /* overall drop/paste/select box */
  background-color: #cce8ff;            /* like buttons but less harsh */
  /* Use border not outline, so focus outline still appears when tabbing */
  /* to dragBox, so user knows when it has focus -- they can paste to it: */
  border: 2px dashed #8b9699;
  padding: 0.3em;
  transition: background-color .1s linear;
  max-width: 19em;                      /* short and same as .shortInput */
                                        /*   so no extra width on mobile */
                                        /*   and >= .dragFileChosen */
  text-align: center;
  font-size: small;                     /* like <input> */
}

.js .dragEntered {                      /* when dragging enters */
  background-color: #73c0ff;            /* darker; let user know to drop */
  border-offset: -0.4em;                /* slightly in from .dragBox */
  border-color: #c8dadf;
}

.js .dragInputFile {                    /* the <input type="file"> */
  /* Make the <input file> disappear, so we can control how it is rendered, */
  /* e.g. show selected file when dragged as well as when <input>-selected. */
  /* Only under JavaScript for graceful degradation: */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.js .dragLabel {                        /* "button" */
  /* Make <label> appear like a button.  Could eliminate <label> and
  /* instead make a separate <button> (so it styles as such automatically) */
  /* and have it trigger the actual <input file>, but latter would */
  /* still be in tab ordering but hidden.  And standard button rendering */
  /* seems harsh inside the .dragBox; blend with it more (no border): */
  background-color: #9dd2fe;
  padding: 4px 8px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.js .dragLabel:hover {                  /* "button" when hovered */
  background-color: #73c0ff;
}

.js .dragLabelPaste {                   /* "button" + "or drag or paste ..." */
  padding: 0.3em;
  /* Like .dragFileChosen, label should be one line, especially if on
   * mobile any user edits get through momentarily: do not want them
   * pushing text (and lower form elements) down momentarily:
   */
  white-space: nowrap;
  overflow: hidden;
}

.js .dragFileChosen {                   /* "No file chosen" or filename */
  padding: 0.3em 0.3em 0em;             /* bottom visual fudge from outline */
  /* Ala <input file>, do not overflow when filename long, and */
  /* do not change size (and cause reflow) regardless of inner text: */
  display: inline-block;                /* obey parent centering */
  max-width: 18em;                      /* < .js .dragBox; contain '...' */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Show ring around <input> label when focused, as if <input file> button: */
.js .dragInputFile:focus + .dragLabelPaste .dragLabel {
  outline: 1px dotted #000;             /* fallback */
  outline: 5px auto Highlight;          /* Firefox */
  outline: 5px auto -webkit-focus-ring-color;   /* Chrome; Firefox ignores */
}

/* Show user that form is being submitted, since we do it async via Ajax: */
.isSubmitting, .isSubmitting * {        /* `*' so over <input>s etc. as well */
  cursor: wait;
}

/* Hide "button" (<label>) and "or drag or paste ..." when no JavaScript, */
/* since we then show true button (and no drag/paste available). */
/* Also hide "No file chosen", as <input file> does it: */
.no-js .dragLabelPaste, .no-js .dragFileChosen {
  display: none;
}

/* Notifications: --------------------------------------------------------- */

#note {
  /* individual pages set height; some have more available than others */
  overflow-y: auto;                     /* vertical scrollbar iff needed */
}

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

.wrapAnywhere {
  overflow-wrap: anywhere;              /* break words to wrap if needed */
}

a[target="_blank"]::after {             /* open-in-new-tab icon */
  /* If icon size/margin changes, see prediction.css open-in-new-tab: */
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQY02NkwAGMGw/8R+YzogucrXdghLHV02fN4ZFSS2ZgYGBgQZdEV/Tl2a25PFJqyUzYrEVWdHNmWgpWt6inz5pj3Hjgv3r6rDnI4igmqiRMsMEwCZfvVBIm2GCTx3DjnQUFR7C5m4mBSMCCzXpsAADoRjRMc/xhYAAAAABJRU5ErkJggg==); /* 10x10px */
  margin: 0 3px 0 5px;
}

.noBullets li {
  list-style-type: none;                /* no bullets */
}
li {                                    /* easier visually, mobile touch */
  margin: 0.5em auto;
}

/* Stacked elements (weather images, KML overlay, KML globes): ------------ */

.stackedElement {                       /* weather images, KML, KML globes */
  position: absolute;                   /* all of these atop one another */
  opacity: 0;                           /* hidden until explicitly shown */
  /* Image size set dynamically by JavaScript in HTML */
}

canvas.stackedElement {                 /* KML overlay */
  z-index: 999;                         /* on top of animation frames */
                                        /*  (but below .ui-dialog z-index) */
  position: relative;                   /* push #acknowledgements below */
                                        /*   KML/scratch-points overlay */
  opacity: 1;                           /* undo .stackedElement value */
  /* Do not let browser zoom/pan/scroll on touch events we capture on map. */
  /* Must be set *before* first touch event ({pointer,touch}down)). */
  /* See also JavaScript change of these if MapPanZoomEnabled false: */
  touch-action: none;
  user-select: none;
}