html, body {
   height: 100%;
   width: 100%;
}

body {
   margin: 0;
   overflow: hidden;
}

form {
   padding: 0;
   margin: 0;
}

* {
   /* One unfortunate side-effect of this: The need to do lots of calc()s for heights and widths */
   box-sizing: border-box;
}

/********** bootstrap replacement section **********/
html, body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
}

a {
   text-decoration: none;
}
a:hover, a:active {
   outline: 0;
}

img {
   width: auto;
   height: auto;
   max-width: none;
   vertical-align: middle;
   border: 0;
   -ms-interpolation-mode: bicubic;
}

input, button, select, textarea {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input:not:focus, input:not:active { /* Don't highlight selected/focused buttons, links etc. */
   outline: none;
   border: 0;
}
::-moz-focus-inner { /* hide Mozilla's dotted-line focus-indicator on buttons etc. */
   border: 0;
}

label, input, button, select, textarea {
   font-weight: normal;
   line-height: 1em;
}

button, input, select, textarea {
   margin: 0;
   font-size: 100%;
   vertical-align: middle;
}

/********************/

/* Way-cool TG-Segments button styles */
button[data-id], button[data-action], button[type=submit] {
   border: 0.2em solid gray;
   border-radius: 0.3em;
   padding: 0.25em;
   margin-right: 0.2em;

   color: darkslategray;
   background-color: white;
   font-size: 1.5rem;
   font-style: italic;
}
button[data-id]:disabled, button[data-action]:disabled {
   color: lightgray;
   border-color: lightgray;
}
button[data-id].selected {
   color: white;
   background-color: darkslategray;
}

.warningBackground {
   background-color: red;
}

.errorMessage {
   color: red;
   text-align: center;
   font-style: italic;
}
.expired {
   color: red;
}

.hidden {
   display: none;
}
.invisible {
   visibility: hidden;
}

/* Loading indicators =============================================================================================== */
.loading, .loading_large {
   width: 100%;
   height: 100%;
}
.loading div {
   margin: 10em auto;
   width: 1em;
}
.loading_large div {
   margin: 10em auto;
   width: 252px;
}
.loading_inline {
   padding: 0 0.25em;
}

/* styles for jQuery.autocomplete library */
.autocomplete-suggestions {
   border: 1px solid #999;
   background: #FFF;
   cursor: default;
   overflow: auto;
   -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
   -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
   box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}
.autocomplete-suggestion {
   padding: 2px 5px;
   white-space: nowrap;
   overflow: hidden;
}
.autocomplete-no-suggestion {
   padding: 2px 5px;
}
.autocomplete-selected {
   background: #F0F0F0;
}
.autocomplete-suggestions strong {
   font-weight: bold;
   color: #000;
}
.autocomplete-group {
   padding: 2px 5px;
}
.autocomplete-group strong {
   font-weight: bold;
   font-size: 16px;
   color: #000;
   display: block;
   border-bottom: 1px solid #000;
}

/* Dropdown Menu =============================================================================================*/
.dropdown {
   position: relative;
}

.show > .dropdown-menu {
   display: block
}

.dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
   display: none;

   /* default bootstrap 4 styling */
   padding: .25rem 0;
   background-color: #fff;
   border: 1px solid rgba(0,0,0,.15);
}
.dropdown-menu-right {
   right: 0;
   left: auto;
}
.dropdown-item {
   display: block;
   width: 100%;
   padding: .25rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
   clear: both;
   white-space: nowrap;
   background: 0 0;
}

.dropdown-item:focus, .dropdown-item:hover {
   text-decoration: none;
   background-color: #f7f7f9;
}

/* AdminSettingsView overlay ======================================================================================== */
.adminSettingsView {
   display: none;

   position: absolute;

   top: 3rem;
   left: 0;
   bottom: 0;
   right: 0;

   height: calc(100% - (3rem + 1px));
   width: 100%;

   margin: 1px;

   background-color: white;
}
.adminSettingsView h2 {
   margin-left: 1em;
}
.adminSettingsView > .settings {
   position: absolute;
   top: 0;
   width: calc(100% - 2px); /* subtract margins */
   height: calc(100% - (4rem + 2px)); /* subtract footer height incl. margins */

   margin: 1px;
   border-radius: 5px;

   color: darkslategray;
   background-color: #dee5e8;
}
.adminSettingsView > footer {
   position: fixed;
   bottom: 1px;

   height: calc(4rem - 1px); /* subtract margins */
   width: 100%;

   border-radius: 5px;

   white-space: nowrap;

   font-size: 1.25rem;
   /*text-align: center;*/

   background-color: #bcbebd;
   color: darkslategray;
}
.adminSettingsView > footer img.loading_inline {
   position: absolute;
   left: 0.5em;
   bottom: 1.75rem;
}
.adminSettingsView > footer .controls {
   position: absolute;
   top: 0.5em;
   left: 2em;
   width: 100%;
}
.adminSettingsView .buttonPanel button {
   padding: 0.25em 0.75em;
}
.adminSettingsView .scrollable {
   height: calc(100% - 9em);
   width: 100%;
   overflow: auto;
}
.adminSettingsView .filter {
   padding: 0.25em 1.3em 0;
   margin-bottom: 1em;
}
.adminSettingsView .filter label {
   position: relative;
}
.adminSettingsView .filter input {
   vertical-align: baseline;
   width: 15em;
}
.adminSettingsView .filter [data-action=clear] {
   position: absolute;
   right: 0.5em;
   bottom: 0;
   cursor: pointer;
}
.adminSettingsView .errorMessage {
   padding: 1em 1em 1em 2em;
}
.adminSettingsView table {
   table-layout: fixed; /* for IE9 */
   border-collapse: collapse;
   margin: 0 1em;
   font-size: 1.25em;
}
.adminSettingsView thead th {
   text-align: left;
   border-bottom: 1px double black;
   vertical-align: bottom;
}
.adminSettingsView tfoot {
   font-size: 0.9em;
   font-style: italic;
}
.adminSettingsView tbody tr.currentUser {
   font-style: italic;
}
.adminSettingsView tbody tr:hover {
   color: white;
   background-color: lightblue;
}
.adminSettingsView tr > *:first-child, .adminSettingsView tr > *:nth-child(3) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 1.6em;
   padding: 0;
}
.adminSettingsView tr > *:first-child {
   min-width: 14em;
   max-width: 14em; /* needed for 'text-overflow: ellipsis' to work */
   width: 14em;
}
.adminSettingsView tr > *:nth-child(2) {
   min-width: 5em;
   width: 5em;
}
.adminSettingsView tr > *:nth-child(3) {
   min-width: 20em; /* prevents distortion when area-name editor opens */
   max-width: 20em; /* needed for 'text-overflow: ellipsis' to work */
   width: 20em;
}
.adminSettingsView tr > *:nth-child(4) {
   padding-left: 0.5em;
}

.adminSettingsView tbody .error {
   font-style: italic;
   background-color: pink;
   border: 1px dotted red;
}
.adminSettingsView tbody summary {
   display: inline-block;
   cursor: pointer;
}

/* SegmentMapView =================================================================================================== */
/*
 * The map sits where the nav sidebar normally is, but wider: while it's showing, the sidebar is hidden and the
 * Segment list gives up some of its width (see the "body.mapShowing" rules in the RetroLayout section below).
 */
.segmentMapView {
   display: none; /* shown by SegmentMapView.show() */
   position: absolute;

   top: calc(6rem + 2px); /* clear the header and the search bar, both 3rem */
   left: 0;
   bottom: 0;

   width: 57%;

   background-color: #e8e8e8;
}
.segmentMapView .mapCanvas {
   width: 100%;
   height: 100%;
}

/*
 * The map's legend. Sits over the bottom-left corner of the map, which is the quietest part of it: Google's
 * own controls take the other three corners (zoom bottom-right, fullscreen top-right, and its attribution
 * runs along the bottom edge, which the bottom offset here clears).
 *
 * It is scrollable rather than growing without limit -- an agency is free to define more root Conditions than
 * there is map to list them down.
 */
.segmentMapView .segmentMapLegendView {
   position: absolute;
   left: 0.75rem;
   bottom: 1.75rem; /* clears Google's attribution strip */
   z-index: 1;

   /*
    * Eight root Conditions come to roughly 215px, so this clears them on any window taller than about 450px
    * and scrolls only past that. 45% was not enough: it cut the list at five entries on a short window, with
    * nothing but a scrollbar to say the rest were there.
    */
   max-height: 60%;
   overflow-y: auto;
   overflow-x: hidden;

   padding: 0.5rem 0.75rem;
   border-radius: 5px;

   background-color: rgba(255, 255, 255, 0.92);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

   font-size: 0.85rem;
   line-height: 1.4;
   color: #333333;
}
.segmentMapView .segmentMapLegendView h2 {
   margin: 0 0 0.35rem;

   font-size: 0.9rem;
   font-weight: bold;
}
/* Collapsed, the heading is the whole control, so it should not carry a gap to a list that is not there. */
.segmentMapView .segmentMapLegendView.collapsed h2 {
   margin-bottom: 0;
}
.segmentMapView .segmentMapLegendView.collapsed ul {
   display: none;
}
/*
 * The heading is a <button> for keyboard reach; these strip it back to reading as the heading it sits in.
 * The caret is the visible open/closed state, matching the aria-expanded the view keeps on the button.
 */
.segmentMapView .segmentMapLegendView .legendToggle {
   display: flex;
   align-items: center;
   width: 100%;

   margin: 0;
   padding: 0;
   border: none;
   background: none;

   font: inherit;
   color: inherit;
   text-align: left;
   cursor: pointer;
}
.segmentMapView .segmentMapLegendView .legendToggle::after {
   content: "\25BE"; /* down-pointing caret: the list below is open */
   margin-left: 0.5rem;
   font-size: 0.8em;
}
.segmentMapView .segmentMapLegendView.collapsed .legendToggle::after {
   content: "\25B4"; /* up-pointing: click to re-open */
}
.segmentMapView .segmentMapLegendView .legendToggle:focus-visible {
   outline: 2px solid #43697d;
   outline-offset: 2px;
}
.segmentMapView .segmentMapLegendView ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
/*
 * Long Condition names wrap rather than run out of the panel: the map pane is draggable down to
 * map.minWidthPercent, and a name has no width to spare at that end of the range. The swatch stays with the
 * first line, which is what keeps a wrapped row readable.
 */
.segmentMapView .segmentMapLegendView li {
   display: flex;
   align-items: flex-start;
}
.segmentMapView .segmentMapLegendView .conditionName {
   min-width: 0;
}
.segmentMapView .segmentMapLegendView li + li {
   margin-top: 0.2rem;
}
/*
 * Drawn as a bar rather than a square: these colours are read off lines on the map, and a colour reads
 * differently as a thin stroke than it does as a block.
 */
.segmentMapView .segmentMapLegendView .swatch {
   flex: 0 0 auto;
   width: 1.5rem;
   height: 0.4rem;
   margin-top: 0.5em; /* centres the bar on the first line of the name, now that names can wrap */
   margin-right: 0.5rem;
   border-radius: 2px;

   /* a pale Condition colour would otherwise vanish into the legend's own background */
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Shown instead of a map when it can't be built (no API key configured, network trouble, no coordinates) */
.segmentMapView .mapMessage {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;

   transform: translateY(-50%);

   padding: 1rem 2rem;

   text-align: center;
   font-size: 1.1em;
   color: #43697d;
}

/* SegmentMapSplitterView =========================================================================================== */
/*
 * The divider between the map and the Segment list. It only exists while the map is showing; its `left`, and the
 * widths of the two panes, are set inline by SegmentMapSplitterView as it is dragged.
 *
 * It is wider than the visible line so there is a comfortable target to grab -- the line is drawn by the grip and
 * borders, while the element itself straddles the seam.
 */
#segmentMapSplitter {
   display: none; /* shown alongside the map, below */
   position: absolute;
   z-index: 200; /* over both panes, under the dropdown menus */

   top: calc(6rem + 2px); /* line up with the map and the list */
   bottom: 0;
   left: 57%; /* matches .segmentMapView's default width, until the splitter sets its own */

   width: 9px;
   margin-left: -4px; /* centre the target on the seam between the panes */

   background-color: #cfd8dc;
   border-left: 1px solid #b0bec5;
   border-right: 1px solid #b0bec5;

   cursor: col-resize;
}
body.mapShowing #segmentMapSplitter {
   display: block;
}
#segmentMapSplitter:hover,
#segmentMapSplitter.dragging {
   background-color: #a9cbd3;
}
#segmentMapSplitter:focus {
   outline: 2px solid #43697d;
   outline-offset: -2px;
}

/* The grip: a short run of vertical bars at the middle of the divider, the usual "you can drag this" cue. */
#segmentMapSplitter .grip {
   position: absolute;
   top: 50%;
   left: 1px;

   width: 5px;
   height: 32px;
   margin-top: -16px;

   background-image: repeating-linear-gradient(to right, #607d8b, #607d8b 1px, transparent 1px, transparent 3px);
}

/*
 * Laid over everything for the duration of a drag, so that the pointer keeps reporting to the splitter rather than
 * to whatever it passes over -- without this, crossing the map hands the drag to Google and the map pans instead.
 */
.splitDragMask {
   position: fixed;
   z-index: 1100;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   cursor: col-resize;
}

/* LoginView ======================================================================================================== */
/*
 * A full-viewport overlay that centers its card both ways via flexbox, rather than the old top/transform
 * percentage trick -- that broke (clipped the card's top off-screen) once the card grew tall enough (icon +
 * title + subtitle + panel). `overflow: auto` here (not on <body>, which stays `overflow: hidden` for every
 * other view) means a card taller than the viewport scrolls instead of clipping.
 */
.loginView {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   display: flex;
   align-items: center;
   justify-content: center;
   overflow: auto;

   background: none;
   border: none;
}
.loginView > div {
   width: 22em;
   margin: 2em 0; /* breathing room top/bottom on the rare occasion this view has to scroll */
   padding: 0;

   border: none;
   background-color: transparent;
}
.loginView .loginIcon {
   display: block;
   max-width: 10em;
   max-height: 6em;
   margin: 0 auto 0.75em auto;
}
.loginView h3 {
   text-align: center;
   margin: 0 0 0.25em 0;
   color: #223;
   font-size: 1.3rem;
}
.loginView .loginSubtitle {
   text-align: center;
   margin: 0 0 1em 0;
   color: #667;
   font-size: 0.95rem;
}

/* The card itself: a dark "Login" header bar over a white body, rounded and shadowed. */
.loginView .loginPanel {
   border-radius: 6px;
   overflow: hidden; /* clip the header's square corners to the panel's rounded ones */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
   background-color: white;
}
.loginView .loginPanel > header {
   background-color: #0a2b4c;
   color: white;
   font-weight: bold;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.75em 1.25em;
}
.loginView .loginPanelBody {
   padding: 1.5em 1.25em;
}
/* Used by the Okta landing page (public/oktaLanding.html) while it exchanges the token it was handed, and on
   failure -- the ".errorMessage" class (see above) takes over for the latter. */
.loginView .statusMessage {
   text-align: center;
   margin: 0;
   color: #667;
   font-size: 0.95rem;
}

/* The (optional) "Sign in with Okta" button, and the "OR" divider beneath it. */
.loginView .oktaSignInButton {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5em;
   width: 100%;
   position: static; /* override the generic button[type=submit] rule, below */
   font-size: 0.9rem;
   font-weight: bold;
   padding: 0.75em 1em;
   border-radius: 4px;
   border: none;
   background-color: #0b5fbf;
   color: white;
}
.loginView .oktaSignInButton .oktaIcon {
   width: 1.1em;
   height: 1.1em;
   flex: none; /* keep the icon from shrinking if the label wraps */
}
.loginView .oktaSignInButton:hover {
   background-color: #094c99;
}
.loginView .oktaHelpText {
   text-align: center;
   margin: 0.5em 0 0 0;
   color: #777;
   font-size: 0.75rem;
}
.loginView .loginDivider {
   display: flex;
   align-items: center;
   text-align: center;
   color: #888;
   font-size: 0.8rem;
   margin: 1em 0;
}
.loginView .loginDivider::before, .loginView .loginDivider::after {
   content: '';
   flex: 1;
   border-bottom: 1px solid #ccc;
}
.loginView .loginDivider span {
   padding: 0 0.75em;
}

.loginView form {
   width: 100%;
   margin: 0;
}
.loginView dl {
   height: auto;
   overflow: hidden; /* contain the floated dt/dd below, so following elements don't ride up alongside them */
}
.loginView dt {
   width: 100%;
   text-align: left;
   text-transform: uppercase;
   font-size: 0.65rem;
   color: #666;
   white-space: nowrap;
}
.loginView dt, .loginView dd {
   float: none;
   margin: 0 0 0.25em 0;
   line-height: normal;
}
.loginView dd {
   margin-bottom: 0.75em;
}
.loginView input:not([type=checkbox]) {
   width: 100%;
   box-sizing: border-box;
   padding: 0.5em;
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: white;
}
/* While empty (i.e. showing its placeholder), give the field an off-white background so it reads as unfilled. */
.loginView input:not([type=checkbox]):placeholder-shown {
   background-color: #faf8f2;
}
.loginView input:not([type=checkbox])::placeholder {
   font-size: 0.85em;
}
.loginView .rememberMe {
   display: flex;
   align-items: center;
   gap: 0.4em;
   margin: 0.5em 0 1em 0;
   color: #444;
   font-size: 0.85rem;
   cursor: pointer;
}
.loginView .rememberMe input[type=checkbox] {
   margin: 0;
}
.loginView button[type=submit] {
   position: static;
   display: block;
   width: 100%;
   margin: 0.5em 0 0 0;
   padding: 0.6em 1em;

   border: 2px solid #0a2b4c;
   border-radius: 4px;
   color: #0a2b4c;
   background-color: white;
   font-size: 1rem;
   font-style: normal;
}
.loginView button[type=submit]:hover {
   background-color: #eef1f5;
}
.loginView button[type=submit]:disabled {
   color: #9aa6b2;
   background-color: white;
   border-color: #9aa6b2;
}

dt, dd {
   display: block;
   float: left;
   margin: 0;
}
dt {
   clear: both;
}

/* RetroLayout ====================================================================================================== */
#header {
   height: 3rem;
}
#sidebar {
   width: 25%;
   height: calc(100% - 6rem);
}
main {
   position: absolute;
   top: calc(6rem + 2px); /* absolute positioning ignores margins, but we must include their height here */
   right: 0;

   width: 75%;
   height: calc(100% - (6rem + 1px)); /* subtract header + search bar heights + v.margins */
}

/*
 * While the map is showing (class set on <body> by RetroLayout), the map takes the sidebar's place and then some,
 * and the Segment list narrows to make room. Area/Route navigation is unavailable until the map is dismissed.
 */
body.mapShowing #sidebar {
   display: none;
}
body.mapShowing main {
   width: 43%;
}

/* SearchView ======================================================================================================= */
/*
 * Sits between the title bar and the map/list. Its 3rem height is accounted for in the `top` and `height` of
 * everything below it -- #sidebar, main, .segmentMapView and #segmentMapSplitter -- so changing it here means
 * changing those too.
 */
#search {
   height: 3rem;
}
.searchView {
   height: 3rem;
   box-sizing: border-box;
   padding: 0.4rem 1rem;

   /* the field keeps its width; the return button sits beside it rather than beneath */
   display: flex;
   align-items: center;

   background-color: #f0f0f0;
}
.searchView .searchForm {
   flex: 0 1 28rem; /* matches the field's own max-width, so the button starts where the field ends */
   min-width: 0;
}
/*
 * The way back from a search result. Hidden until a result has been gone to (SearchView.offerReturnToPrevious),
 * so it is only ever offered when there is somewhere to go.
 */
.searchView .returnToPrevious {
   flex: 0 0 auto;
   margin-left: 0.75rem;
   padding: 0.25rem 0.6rem;

   border: 1px solid #b0bec5;
   border-radius: 3px;
   background-color: white;

   font-size: 0.85rem;
   line-height: 1.6rem;
   color: #43697d;
   white-space: nowrap;
   cursor: pointer;
}
.searchView .returnToPrevious:hover {
   background-color: #eef3f5;
   border-color: #43697d;
}
.searchView .searchInput {
   width: 100%;
   max-width: 28rem;
   box-sizing: border-box;
   padding: 0.25rem 0.5rem;

   border: 1px solid #b0bec5;
   border-radius: 3px;

   font-size: 0.95rem;
   line-height: 1.6rem;
   color: #333333;
   background-color: white;
}
.searchView .searchInput:focus {
   outline: none;
   border-color: #43697d;
}

/* A look-ahead row: what kind of thing it is, what it is called, and (for a Segment) the route it is on. */
.autocomplete-suggestion .searchKind {
   display: inline-block;
   min-width: 5rem;
   margin-right: 0.5rem;
   padding: 0.05rem 0.3rem;
   box-sizing: border-box;

   border-radius: 3px;
   background-color: #43697d;
   color: white;

   font-size: 0.7rem;
   font-weight: bold;
   line-height: 1.2rem;
   letter-spacing: 0.04em;
   text-align: center;
   text-transform: uppercase;
}
.autocomplete-suggestion .searchLabel {
   white-space: normal; /* Segment names are long; let them wrap rather than be cut off */
}
.autocomplete-suggestion .searchMeta {
   float: right;
   margin-left: 1rem;

   color: #77878f;
   font-size: 0.85rem;
}
/* the rows carry their own padding, and must be free to grow when a long name wraps */
.searchView + .autocomplete-suggestions .autocomplete-suggestion,
.autocomplete-suggestions .autocomplete-suggestion {
   padding: 0.35rem 0.5rem;
   white-space: normal;
}

/* HeaderView ======================================================================================================= */
.headerView {
   position: relative;
   /*background-color: #43697d;*/
   background-color: #FF6600;   
   color: white;

   margin: 1px;
   border-radius: 5px;

   text-align: center;

   display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
}
.headerView a, .headerView a:hover, .headerView a:focus {
   color: white;
}

.headerView h1, .headerView .h1 {
   margin: 0;
   font-size: 2rem;
   line-height: 3rem;
}
.headerView .agency {
   margin-left: .5rem;
}
.headerView .title {
   margin: 0 auto;
}

/* "Show Map"/"Show List" toggle, sitting just left of the user menu */
.headerView .mapToggle {
   align-self: center;
   flex-shrink: 0;

   margin-right: 1rem;
   padding: .4rem 1rem;

   border: 0;
   border-radius: 5px;

   background-color: white;
   color: #43697d;

   font-family: inherit;
   font-size: 1.1rem;
   font-style: italic;
   font-weight: bold;
   white-space: nowrap;

   cursor: pointer;
}
.headerView .mapToggle:hover, .headerView .mapToggle:focus {
   background-color: #e3ecf1;
}

/* drop-down menu */
.headerView .user-menu-toggler {
   font-size: 1.75em;
   line-height: 3rem;
}
.headerView .user-menu-toggler img {
   vertical-align: -0.125rem;
   padding-right: .5rem;
}

.headerView .dropdown-item {
   color: #43697d;
}
.headerView  .dropdown-item:focus, .headerView  .dropdown-item:hover {
   color: #354d5d;
}

/* HeaderView Toggler =============================================================================================== */
.headerView-toggler {
   /* Normalize a button */
   text-transform: none;
   -webkit-appearance: button;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   background: 0 0;
   border: 1px solid transparent;
   /* Styles */
   padding: .5rem;
   font-size: 1.25rem;
   line-height: 1;
}
.headerView-toggler-icon {
   display: inline-block;
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
   content: "";
   background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") no-repeat center center;
   -webkit-background-size: 100% 100%;
   background-size: 100% 100%;
}

/* NavSidebarView =============================================================================================*/
.navSidebarView {
   height: 100%; /* needed for overflow-y to scroll! */
}
.navSidebarView * {
   border-radius: 5px;
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
}

.navSidebarView header {
   position: relative;
   font-weight: bold;
}
.navSidebarView nav {
   position: relative;
   overflow-y: auto;
   height: 100%;
}
.navSidebarView nav > header {
   padding-left: 2em;
   background-color: #dee5e8;
}
.navSidebarView nav > header, .navSidebarView li {
   margin: 1px;

   min-height: 2.5rem;
   line-height: 2.5rem;

   font-size: 1.25rem;

   color: darkslategray;
   cursor: pointer;
}
.navSidebarView ul {
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: white;
}
.navSidebarView li {
   position: relative;
   padding: 0;
}
.navSidebarView li > label {
   display: block;
   line-height: inherit;
   background-color: #dee5e8;
   overflow: hidden;
   white-space: nowrap;
}
.navSidebarView .selected {
   font-weight: bold;
   background-color: #a9cbd3;
}
.areaList .listIndicator {
   position: absolute;
   left: 2em;
}
.areaList .name {
   position: relative;
   left: 3em;
}
.subAreasList .name {
   left: 3.5em;
}
.routeList .name {
   position: relative;
   left: 1.5em;
}

.listIndicator {
   position: absolute;
   left: 1em;

   font-size: 0.75em;

   color: slategray;
}

/* SegmentConditionsView =============================================================================================*/
.segmentConditionsView {
   position: relative;
   z-index: 0;
   color: darkslategray;
   height: 100%;
   width: 100%;
   padding: 0 1px;

   /*
    * A column: the headers and the footer take exactly the height their content needs, and the Segment list
    * takes whatever is left. This replaces two hardcoded heights that had to be kept in step by hand -- a
    * 13rem footer, and a list sized as calc(100% - 20rem) -- and which padded the footer out to its tallest
    * possible content even when it held nothing but a single dropdown.
    */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
}
.segmentConditionsView > header,
.segmentConditionsView > .secondary_header,
.segmentConditionsView > footer {
   flex: 0 0 auto;
}
.segmentConditionsView > .loading_large {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
   background-color: white;
   opacity: 0.7;
}
.segmentConditionsView > .loading_large > div {
   position: relative;
   margin: 0 auto;
   top: 50%;
   transform: translateY(-50%);
}

.segmentConditionsView * {
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
}
.segmentConditionsView input[type=checkbox] {
   margin: 0 0.5em;
}
.segmentConditionsView h1 {
   margin: 0;
   vertical-align: middle;
}
/*
 * 1rem is the pane's left inset, shared by the Area name, the checkbox row and the footer, so that everything
 * outside the Segment list starts on the same vertical line. Each of these used to arrive at its own left
 * edge by a different route -- header padding here, a checkbox's own margin there, footer padding below --
 * which happened to land them in roughly, but not exactly, the same place.
 */
.segmentConditionsView > header {
   padding: 0 1rem;
   border-radius: 5px;

   font-size: 1.5rem;
   line-height: 3.5rem;
   height: 3.5rem;

   background-color: #999999;
   position: relative;
   font-weight: bold;
}

/*
 * This row's height is fixed, and the Segment list's height is derived from it (see .segmentsList), so a control
 * that wrapped onto a second line would spill over the list below rather than pushing it down. The row is
 * therefore laid out as a single line which never wraps; when the pane is too narrow to fit every label, the
 * label text is shortened with an ellipsis instead. Every control stays visible and clickable, and each carries
 * a title attribute with its full text.
 */
.segmentConditionsView > .secondary_header {
   height: 2.5rem;
   line-height: 2rem;

   font-size: 0.95rem;
   font-weight: normal;
   color: #333333;
   background-color: #f0f0f0;
   padding-left: 1rem;
   padding-right: 3.5rem; /* keep labels clear of the refresh button, which is positioned over the row's end */

   display: flex;
   align-items: center;
   white-space: nowrap;
}
.segmentConditionsView > .secondary_header > label:first-child input[type=checkbox] {
   margin-left: 0; /* the row's inset already positions this; its own margin would double the gap */
}
.segmentConditionsView > .secondary_header > label {
   display: flex;
   align-items: center;

   min-width: 0; /* a flex item will not shrink below its content's width without this */
   overflow: hidden;
}
.segmentConditionsView > .secondary_header > label > span {
   overflow: hidden;
   text-overflow: ellipsis;
}
.segmentConditionsView > .secondary_header > label input[type=checkbox] {
   flex: 0 0 auto; /* only the text gives way; the box itself keeps its size */
}
/*
 * "Select All" is much the shortest of these, so let the two longer labels give up their room first rather than
 * shrinking all three in proportion -- which would truncate this one while space clearly remained.
 */
.segmentConditionsView > .secondary_header > label[data-overflow=pinned] {
   flex-shrink: 0;
}

/* Toolbar overflow ("priority plus") =============================================================================== */
/*
 * While ToolbarOverflowView measures, flex shrinking is suspended so that each control reports the width it
 * actually wants rather than the width it has been squeezed into.
 */
.segmentConditionsView > .secondary_header.measuring > label {
   flex-shrink: 0;
}

.segmentConditionsView > .secondary_header > .toolbarOverflow {
   flex: 0 0 auto;
   align-self: center;
   line-height: normal;
}
.segmentConditionsView .overflowToggle {
   padding: 0 0.5rem;
   border: 1px solid transparent;
   border-radius: 3px;

   background: transparent;
   color: #555555;
   font-size: 1.5rem;
   line-height: 1.6rem;
   cursor: pointer;
}
.segmentConditionsView .overflowToggle:hover,
.segmentConditionsView .toolbarOverflow.show > .overflowToggle {
   border-color: #b0bec5;
}
/*
 * Says that something switched on is hidden inside the menu. Without it a filter could be quietly narrowing the
 * Segment list with nothing on screen to explain why.
 */
.segmentConditionsView .overflowToggle.hasActive {
   color: #c98a00;
   font-weight: bold;
}

/*
 * Overrides the template's "dropdown-menu-right", which anchors the menu's *right* edge to the toggle. The
 * toggle sits wherever the last visible control ends -- often well left of centre in this narrow panel, since
 * "Select All" is pinned and everything else may be hidden -- so a right-anchored menu opens off the panel's
 * own left edge and gets clipped. Opening it from the toggle's left edge instead keeps it inside the row, in
 * the blank space nav's absolute positioning leaves to the right.
 */
.segmentConditionsView .overflowMenu {
   left: 0;
   right: auto;

   min-width: 14rem;
   padding: 0.25rem 0;
}
/* the controls in here are the very same elements as on the row, so their row styling has to be undone */
.segmentConditionsView .overflowMenu > label {
   display: block;
   width: auto;
   overflow: visible;

   padding: 0.35rem 1rem 0.35rem 0.25rem;

   font-size: 1rem;
   line-height: 1.6rem;
   color: #333;
   white-space: nowrap;
   cursor: pointer;
}
.segmentConditionsView .overflowMenu > label:hover {
   background-color: #f7f7f9;
}
.segmentConditionsView .overflowMenu > label > span {
   overflow: visible;
   text-overflow: clip; /* there is room for the full text in the menu */
}
.segmentConditionsView > header h1 {
   font-size: 1.2em;
   white-space: nowrap;
}
.segmentConditionsView > header nav button[data-action=refresh] {
   border: none;
   background: transparent;
}
/*
 * Sits within the checkbox row, at its right-hand end.
 *
 * This was previously 3.5rem tall against a 2.5rem row, so it rose a full rem into the bar above and took
 * that bar's grey with it -- which is what made the refresh button read as part of the Area-name bar rather
 * than as part of the row of controls it actually belongs to.
 */
.segmentConditionsView > header nav {
   position: absolute;
   right: 0.25em;
   bottom: 0;
   height: 2.5rem;

   display: flex;
   align-items: center;

   background-color: transparent; /* the row's own colour shows through */
   z-index: 1; /* keep it above the controls, which it is positioned over */

   overflow: hidden; /* avoid ugliness at narrow screen widths */
}
.segmentConditionsView > header label {
   vertical-align: middle;
}
/*
 * The timestamp takes the checkbox row's colour, so it reads as one of that row's labels alongside "Select
 * All". It was white while <nav> still rose into the grey Area bar above (see the note on "> header nav");
 * once the row stopped overlapping that bar, white left it near-invisible against the row's own #f0f0f0.
 */
.segmentConditionsView > header .lastUpdate {
   color: inherit;
}
.segmentConditionsView > header button[data-action=refresh] {
   margin-left: 0.25em;
   margin-right: inherit;
}
/* TODO replace ".segmentConditionsView > footer" instances with simpler ".conditionSelectionView" ? */
.segmentConditionsView > footer {
   position: relative;

   width: 100%;

   margin-top: 1px;
   padding: 0.4rem 1rem 0.5rem;
   box-sizing: border-box;
   border-radius: 5px;

   white-space: nowrap;

   font-size: 1rem;
   text-align: center;

   background-color: #ececec;
   color: #333333;
}
/*
 * The selectors start at the pane's left margin, in line with the buttons below them, rather than being
 * centred over them (the footer as a whole is still centred, for anything else that sits in it).
 */
.segmentConditionsView > footer .conditionSelectors {
   overflow-x: auto;
   overflow-y: hidden;
   text-align: left;
}
.segmentConditionsView > footer .conditionSelectors > div:first-child {
   padding-left: 0; /* the gap between selectors should not also indent the first one */
}
/*
 * The selector titles and the lists beneath them are set at 1rem to match the Segment list rows, which carry
 * no font-size of their own and so take the 16px on html/body. Deliberately rem rather than em: the point is
 * to match the list, not the footer, so this should not drift if the footer's own size is ever changed.
 */
.segmentConditionsView > footer h1 {
   padding: 0.5em 0.5em 0.5em 0;

   font-size: 1rem;
   line-height: 1em;
}
.segmentConditionsView > footer select {
   min-width: 8em;
   padding: 2px;
   font-size: 1rem;
}
.segmentConditionsView > footer .controls {
   width: 100%;
   margin-top: 0.5em;

   /* one row, with Submit held out at the right-hand end however wide the pane happens to be */
   display: flex;
   align-items: center;
   box-sizing: border-box;
}
.segmentConditionsView > footer img.loading_inline {
   position: absolute;
   left: 0.5em;
   bottom: 0.8em; /* alongside the buttons, whatever height the selectors above have taken */
}
.segmentConditionsView > footer button {
   /* every button stays on the row; a very narrow pane shortens the labels rather than wrapping them */
   min-width: 0;
   flex: 0 1 auto;

   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.segmentConditionsView > footer button[data-action=send] {
   min-width: 7em; /* looks too small if it's just sized around "Submit" */
}
.segmentsList {
   flex: 1 1 auto;
   min-height: 0; /* without this a flex item refuses to shrink below its content, and the list must scroll */

   border-radius: 5px;
   overflow-y: auto;
}
.segmentConditionsView section {
   /*margin: 1px 1px 1px 0;*/
   margin-top: 1px;
}
.segmentConditionsView table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0 1px; /* vertical spacing only; horizontal spacing gives the tables excessive outer margins */
}
.segmentConditionsView table * {
   border-radius: inherit;
}
.segmentConditionsView table > caption {
   width: 100%;
   margin: 0;
   border-radius: 5px;

   /*
    * Brings the Area's own checkbox onto the same line as the per-Segment checkboxes below it, which sit
    * 0.5rem into their cell. Without this the caption's checkbox has only its own margin to go on, and lands
    * nearer the edge of the pane than anything else.
    */
   padding-left: 0.5rem;
   box-sizing: border-box;

   height: 2.5rem;

   font-size: 1.05rem;
   line-height: 2.5rem;
   text-align: left;
   vertical-align: middle;

   color: #333333;
   background-color: #d4d6d5;
}
.segmentConditionsView caption > label {
   font-weight: bold;
}
.segmentConditionsView tr div {
   padding: 0.25rem 0.5rem;
}
/*
 * The colour belongs to the cell, not to the <div> inside it. A <td> stretches to the height of the tallest
 * heading in the row, but the <div> is only as tall as its own text, so colouring the <div> left bare cell
 * showing beneath any heading that was shorter than the tallest -- and none at all in the empty checkbox
 * column.
 */
.segmentConditionsView thead td {
   color: white;
   background-color: #83958e;
}
.segmentConditionsView thead div {
   line-height: 1em;
   min-height: 1.4em;

   font-size: 1rem;
   font-weight: bold;

   text-align: left;
   overflow: hidden;

   background-color: transparent;
}
.segmentConditionsView tbody div {
   cursor: pointer;
   height: 100%;
   min-height: 5rem;
   line-height: 1.5rem;
}
/*
 * "Show Only Selected" (class set on the view by SegmentConditionsView). The rows already carry .selected --
 * SegmentListItemView.setSelected() puts it there and keeps it right across re-draws -- so narrowing the list
 * is just a matter of not painting the rest. Done here rather than by filtering the Collection, which would
 * re-render the list and clear the selection this filters on.
 *
 * A group whose Segments are all hidden hides too (SegmentsListView.applySelectedOnlyFilter), otherwise the
 * list is left as a column of headings with nothing under them.
 */
.segmentConditionsView.selectedOnly tbody tr:not(.selected) {
   display: none;
}
.segmentConditionsView.selectedOnly section.emptyUnderSelectedOnly {
   display: none;
}
/* Sits where the list would be, so an empty list reads as "nothing selected" rather than as a failed load. */
.segmentConditionsView .noSelectionMessage {
   flex: 0 0 auto; /* a column flex item, like the header and footer either side of the list */

   margin: 0;
   padding: 1.5rem 1rem;

   font-size: 1rem;
   text-align: center;
   color: #667;
}
.segmentConditionsView tbody tr:nth-child(even) td {
   background-color: #f2f5f7;
   border-right: 1px solid white;
}
.segmentConditionsView tbody tr:nth-child(odd) td {
   background-color: #dee5e8;
   border-right: 1px solid white;
}
.segmentConditionsView tbody tr.selected td {
   background-color: #cfe2e8;
}
/*
 * The Segment just arrived at from the search bar. Deliberately after the .selected rule, which it has the
 * same specificity as: a searched-for Segment is also selected, and this needs to win until the user does
 * something in the list.
 *
 * It fades rather than snapping when the class comes off, so the row settles back into its ordinary
 * selected appearance instead of blinking.
 */
.segmentConditionsView tbody tr td {
   transition: background-color 0.4s ease-out;
}
.segmentConditionsView tbody tr.searchHit td {
   background-color: #fdf3c0;
}
.segmentConditionsView tbody tr.searchHit td:first-child {
   box-shadow: inset 3px 0 0 #e0a800;
}
.segmentConditionsView td {
   padding: 0;
   vertical-align: top;
}
/* the per-Segment checkbox column: only as wide as the box it holds */
.segmentConditionsView td.selectCell {
   width: 2.25rem;
}
.segmentConditionsView td.selectCell > div {
   min-height: 0;
   padding: 0.4rem 0 0 0.5rem;
   text-align: left;
}
.segmentConditionsView td.selectCell + td {
   width: 42%;
}
.segmentConditionsView thead tr:nth-child(odd) td {
   border-right: 1px solid white;
}
.segmentConditionsView td:first-child {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-right: 1px solid white;
}
.segmentConditionsView td:last-child {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}
.segmentConditionsView tbody ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.segmentConditionsView tbody ul > li {
   font-weight: normal;
}
.segmentConditionsView tbody ul > li.root {
   font-weight: bold;
}

.conditionSelectors > div {
   display: inline-block;
   vertical-align: top;
   padding: 0 0.25em;
}
.conditionSelectors textarea {
   font-size: 0.8em;
   height: 5.125rem;
   resize: horizontal; /* sorry bud, we've got no vertical space to spare  */
}
.conditionSelectors textarea + aside {
   font-size: 0.6em;
}
.conditionSelectors .requiredMark {
   color: #cc0000;
   font-weight: bold;
}
.conditionSelectors.segmentsSelected .required + select,
.conditionSelectors.segmentsSelected .required + textarea {
   border: 1px solid red;
}

/* Footer controls ================================================================================================== */
/*
 * These override the heavy app-wide button styling for the Segment list's footer only; the rest of the
 * application keeps the older look.
 */
.segmentConditionsView > footer .controls button {
   border: 1px solid #9aa5ab;
   border-radius: 4px;
   padding: 0.3em 0.7em;
   margin-right: 0.35em;

   font-size: 1rem;
   font-style: italic;
   color: #37474f;
   background-color: #fdfdfd;
}
.segmentConditionsView > footer .controls button:hover:not(:disabled) {
   background-color: #f0f4f6;
}
.segmentConditionsView > footer .controls button:disabled {
   color: #b0b0b0;
   border-color: #d0d0d0;
   background-color: #f7f7f7;
}
/* Submit is the action the whole footer builds up to, so it is the one that is filled in. */
.segmentConditionsView > footer .controls button[data-action=send] {
   margin-left: auto; /* pushed to the right-hand end of the row */
   margin-right: 0;
   flex: 0 0 auto;

   color: white;
   border-color: #4d7186;
   background-color: #5b8299;
   font-style: normal;
   font-weight: bold;
}
.segmentConditionsView > footer .controls button[data-action=send]:hover:not(:disabled) {
   background-color: #4d7186;
}
.segmentConditionsView > footer .controls button[data-action=send]:disabled {
   color: #eeeeee;
   border-color: #a8bcc7;
   background-color: #a8bcc7;
}