@font-face {
 font-family: 'Agency FB';
 font-style: bold;
 src: local(""), url("fonts/AGENCYB.TTF") format("truetype"); }
@font-face {
 font-family: 'Blender Pro';
 font-style: normal;
 src: local(""), url("fonts/blenderpro-medium-webfont.ttf") format("truetype"); }
body {
 font-family: 'Blender Pro', sans-serif;
 margin: 0; }

header {
 align-items: center;
 background-color: #23343e;
 column-gap: 1em;
 display: flex;
 height: 5em;
 padding-left: 1em;
 padding-right: 1em; }
 header img:not([height]) {
   height: 4em; }
 header h1 {
   color: white;
   font-family: 'Agency FB', sans-serif; }
 header nav ol {
   display: flex;
   list-style-type: none;
   margin-left: 5em; }
   header nav ol li {
     color: #72cadb; }
   header nav ol li:not(:last-child)::after {
     content: '>';
     font-family: sans-serif;
     font-size: small;
     margin: 0 .25rem; }
 header .spacer {margin-left: auto}
 header input[name="search"] {
   background: none;
   border-color: #72cadb;
   border-style: solid;
   color: #72cadb;
   font-family: inherit;
   border-radius: 1em;
   padding: 0.5em; }
 header input[name="search"]::placeholder {
   color: #72cadb; }
 header input[name="login"] {
   height: 3em; }
 header input[name="settings"] {
   height: 2em; }

main {
 background-color: #e0e0e0;
 display: grid;
 grid-template-columns: 12em 20em auto;
 height: 50em; }
 main nav {
   grid-row: 1 / 3; }
   main nav ol {
     background-color: #23343e;
     font-size: large;
     height: 100%;
     margin-block: 0;
     /*! padding-top: 2em; */
     list-style-type: none;
     width: 8em; }
     main nav ol li {
       color: #72cadb;
       height: 3em; }
     main nav ol li[name="ai-assistant"] {
       color: white; }
     main nav ol li::before {
       background-size: 1em 1em;
       content: "";
       display: inline-block;
       height: 1em;
       margin-right: 0.5em;
       width: 1em; 
       margin-top: 1em;
}
     main nav ol li[name="home"]::before {
       background-image: url("images/home.png"); }
     main nav ol li[name="operations"]::before {
       background-image: url("images/operations.png"); }
     main nav ol li[name="assets"]::before {
       background-image: url("images/assets.png"); }
     main nav ol li[name="ai-assistant"]::before {
       background-image: url("images/ai-assistant.png"); }
 main section:where(*:not(#map *)) {
   height: 50em;
   width: 100%; }
 main section.chat section {
   height: 90%;
   overflow: scroll;
}
   main section.chat section h2 {
     font-weight: normal;
     margin-block-end: 0.25em;
     margin-block-start: 1em;
     padding-left: 1em; }
   main section.chat section p {
     background-color: #a4a4a4;
     margin: 1em;
     margin-block-start: 0;
     padding: 1em; }
   main section.chat section input[name="question"] {
     background: none;
     border-color: #a4a4a4;
     border-style: solid;
     font-family: inherit;
     border-radius: 1em;
     margin-left: 1em;
     padding: 0.5em;
     width: 20em; }
 main section [role="tablist"] {
   /*! grid-template-columns: 5em 6em auto; */ /* FIXME: Doesn't reflow nicely with UI tweaks! */
   margin-left: 1em;
   margin-right: 1em; 
   padding-left: 0px;
}
 main section.chat [role="tablist"] {
   grid-template-columns: 6em 6em 6em auto; /* FIXME: Doesn't reflow nicely with UI tweaks! */
   margin-left: 1em;
   margin-right: 1em;
   /*! padding-left: 0px; */
 }
 main section.routes [role="tab"] {
   font-size: 1.5em;
   margin-top: 0;
   margin-bottom: 0.25em; }
 main section.routes [role="tab"][aria-selected="true"] {
   font-size: 2em;
   margin-top: 0;
   margin-bottom: 0.25em; }
main section.routes {
 width: 95%;
}  
main section.spatial {
 width: 100%;
 /*! height: 100%; */
}
main section.routes section.spatial svg path {
   opacity: 0.75;
   stroke-dasharray: 0 10;
   stroke-linecap: round;
   stroke-width: 0.5em;
   vector-effect: non-scaling-stroke; }
 main section.routes section.spatial svg g.entity-region-0 path,
 main section.routes section.spatial svg g.entity-region-2 path,
 main section.routes section.spatial svg g.entity-region-4 path,
 main section.routes section.spatial svg g.entity-region-6 path,
 main section.routes section.spatial svg g.entity-region-8 path {
   stroke: #72cadb; }
 main section.routes section.spatial svg g.entity-region-1 path,
 main section.routes section.spatial svg g.entity-region-3 path,
 main section.routes section.spatial svg g.entity-region-5 path,
 main section.routes section.spatial svg g.entity-region-7 path,
 main section.routes section.spatial svg g.entity-region-9 path {
   stroke: white; }
 main section.routes section.dim .series:not(.labels) {
   opacity: 0.7; }
 main section.routes section.dim .series.series-name-0,
 main section.routes section.dim .series.series-name-2,
 main section.routes section.dim .series.series-name-4,
 main section.routes section.dim .series.series-name-6,
 main section.routes section.dim .series.series-name-8 {
   fill: #72cadb; }
 main section.routes section.dim .series.series-name-1,
 main section.routes section.dim .series.series-name-3,
 main section.routes section.dim .series.series-name-5,
 main section.routes section.dim .series.series-name-7,
 main section.routes section.dim .series.series-name-9 {
   fill: white; }
 main section.routes section.dim svg {
   margin-left: 5em;
   margin-right: 5em; }
   main section.routes section.dim svg line,
   main section.routes section.dim svg circle {
     fill: none;
     stroke: #a4a4a4; }
   main section.routes section.dim svg g.series.labels circle {
     fill: #a4a4a4; }
   main section.routes section.dim svg g.series.labels text {
     text-anchor: middle; }
 main section.provenance {
   grid-column: 2; }
   main section.provenance ol li {
     margin-top: 3em; }
     main section.provenance ol li form fieldset {
       background-color: #a4a4a4;
       border: none;
       display: grid;
       grid-template-columns: 10em auto;
       width: 32em; }
       main section.provenance ol li form fieldset legend {
         font-size: x-large;
         font-weight: bold;
         left: -0.25em;
         position: relative;
         top: -1em;
         padding-inline-start: 0; }
       main section.provenance ol li form fieldset label {
         grid-column: 1; }
       main section.provenance ol li form fieldset a {
         color: inherit; }
       main section.provenance ol li form fieldset input {
         background: inherit;
         border: none;
         padding: 0; }
       main section.provenance ol li form fieldset a,
       main section.provenance ol li form fieldset input {
         grid-column: 2; }

[role="tablist"] {
 display: flex;
 grid-template-rows: min-content min-content 1fr;
 list-style: none}

[role="tab"] {
 cursor: pointer;
 background: inherit;
 border: inherit;
 font: inherit;
 grid-row: 2;
 grid-column: auto;
 margin-top: 1em;
 margin-bottom: 1em;
 padding-left: 0;
 padding-right: 0.5em;
 text-align: left; }
 [role="tab"]:not([aria-selected="true"]):hover {
   font-weight: bold; }
 a[role="tab"] {
   color: inherit;
   text-decoration: none;
 }

[role="tab"]:not([aria-selected="true"]) {
 opacity: 0.5; }

[role="tabpanel"] {
 grid-row: 3;
 grid-column: 1 / span 4; }

[role="tabpanel"][tabindex="-1"] {
 position: absolute;
 left: -10000px; }
