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;
}

/* State Map overlay ================================================================================================ */
#stateMap > div {
   display: none;
   z-index: 1000;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-color: white;
}
#stateMap > div, #stateMap iframe {
   width: 100%;
   height: 100%;
   text-align: center;
   border: none;
}

#stateMap button {
   position: absolute;

   top: 1.5rem;
   left: 6rem;

   width: 9rem;
   height: 2.5rem;

   border: 0;

   color: white;
   background-color: #1994d0;

   box-shadow: 3px 0 12px 1px #1b1b1b;

   font-size: 1.5em;
   font-weight: bold;

   cursor: pointer;
}

/* LoginView ======================================================================================================== */
.loginView {
   position: absolute;
   width: 100%;

   top: 40%;
   transform: translateY(-60%);
}
.loginView > div {
   position: relative;
   width: 30em;
   margin: 0 auto; /* horiz. center */
   padding: 1em;

   border: 1px solid black;
   /*background-color: lightblue;*/
   background-color: #FF6600;
}
.loginView h3 {
   text-align: center;
   margin: 0.25em 0 0.5em 0;
}
.loginView form {
   width: 25em;
   margin: 0 auto;
}
.loginView dl {
   height: 5em;
}
.loginView dt {
   width: 8em;
   margin-right: 0.25em;
   text-align: right;
   white-space: nowrap;
}
.loginView dt, dd {
   margin-bottom: 0.25em;
   line-height: 2em;
}
.loginView input:not([type=checkbox]) {
   width: 13em;
}
.loginView button {
   position: absolute;
   font-size: 1rem;
   bottom: 0.5em;
   right: 0.5em;
}

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

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

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

/* HeaderView ======================================================================================================= */
.headerView {
   position: relative;
   background-color: #43697d;
   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;
}

/* 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 > header {
   margin: 1px 0 0 1px;

   font-size: 1rem;
   line-height: 3.5rem;
   text-align: center;

   background-color: #bcbebd;
   color: darkslategray;
}
.navSidebarView nav {
   position: relative;
   overflow-y: auto;
   height: calc(100% - (3.5rem + 2px)); /* subtract height of sidebar header, including margins */
}
.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;
}
.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;
   transform: scale(1.5); /* standard checkboxes are too small; anything above 1.5x generally looks bad */
   -webkit-transform: scale(1.5);
}
.segmentConditionsView h1 {
   margin: 0;
   vertical-align: middle;
}
.segmentConditionsView > header {
   padding: 0 0.5rem;
   border-radius: 5px;

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

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

.segmentConditionsView > .secondary_header {
   height: 2.5rem;
   line-height: 2rem;
   padding-left: 0;
}
.segmentConditionsView > header h1 {
   font-size: 1.2em;
   white-space: nowrap;
}
.segmentConditionsView > header nav {
   position: absolute;
   right: 0.25em;
   bottom: 0;
   height: 3.5rem;

   background-color: #999999;
   z-index: 1; /* ensure it stays on top of the Area name etc. */

   overflow: hidden; /* avoid ugliness at narrow screen widths */
}
.segmentConditionsView > header label {
   vertical-align: middle;
}
.segmentConditionsView > header .lastUpdate {
   color: white;
}
.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;

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

   margin-top: 1px;
   padding: 0 0.5em;
   border-radius: 5px;

   white-space: nowrap;

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

   background-color: #bcbebd;
   color: darkslategray;
}
.segmentConditionsView > footer .conditionSelectors {
   overflow-x: auto;
   overflow-y: hidden;
}
.segmentConditionsView > footer h1 {
   padding: 0.5em;

   font-size: 0.8em;
   line-height: 1em;
}
.segmentConditionsView > footer select {
   min-width: 8em;
   padding: 2px;
   font-size: 0.8em;
}
.segmentConditionsView > footer .controls {
   position: absolute;
   left: 0;
   bottom: 0.5em;
   width: 100%;
}
.segmentConditionsView > footer img.loading_inline {
   position: absolute;
   left: 0.5em;
   bottom: 1.75rem;
}
.segmentConditionsView > footer button {
   /* ensure that all buttons are visible, even on narrow screens */
   max-width: 22%; /* (100 / (4 buttons)) + (some padding) */
   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 {
   height: calc(100% - (20rem + 2px)); /* subtract height of header + footer + v.margins */
   border-radius: 5px;
   overflow-y: auto;
}
.segmentsListWithStatewideOffset {
   height: calc(100% - (20rem + 2px)); /* subtract height of header + footer + v.margins */
}
.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;

   height: 2.5rem;

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

   color: darkslategray;
   background-color: #bcbebd;
}
.segmentConditionsView caption > label {
   font-weight: bold;
}
.segmentConditionsView tr div {
   padding: 0.25rem 0.5rem;
}
.segmentConditionsView thead div {
   line-height: 1em;
   min-height: 1.4em;

   font-size: 1.25em;
   font-weight: bold;

   text-align: center;
   overflow: hidden;

   color: white;
   background-color: #83958e;
}
.segmentConditionsView tbody div {
   cursor: pointer;
   height: 100%;
   min-height: 5rem;
   line-height: 1.5rem;
}
.segmentConditionsView tbody tr:nth-child(even) td {
   background-color: #f2f5f7;
}
.segmentConditionsView tbody tr:nth-child(odd) td {
   background-color: #dee5e8;
}
.segmentConditionsView tbody tr.selected td {
   font-weight: bold;
   background-color: #a9cbd3;
}
.segmentConditionsView td {
   padding: 0;
   width: 33%;
   vertical-align: top;
}
.segmentConditionsView td:first-child {
   width: 34%;
   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;
   border-left: 1px solid white;
}
.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.segmentsSelected .required {
   color: red;
}
.conditionSelectors.segmentsSelected .required + select,
.conditionSelectors.segmentsSelected .required + textarea {
   border: 1px solid red;
}