body {
  background-color: #fbfbfb;
}
@media (min-width: 991.98px) {
  main, footer {
    padding-left: 240px;
  }
}
@media (max-width: 340px) {
  .navbar-brand {font-size: 1.1rem;}
}
@media (max-width: 360px) {
  .navbar-brand {margin-right: 0.5rem;}
}
.username-nav{padding-top: 3.5pt; vertical-align: top; display: none; text-transform: lowercase;}
h3.fleet-summary-number {padding-left: 3px;}
h3.fleet-summary-number.nominal {color: #7abd73;}
h3.fleet-summary-number.advisory {color: #e3c502;}
h3.fleet-summary-number.caution {color: #e67e00;}
h3.fleet-summary-number.warning {color: #FF6961;}
h3.fleet-summary-number.no-data {color: #565656;}
#fleet_summary .col {min-width: 108px;}
.dropdown {display: inline-block; min-width: 140px;}
.prototype {display: none;}

div:has(div.spinner:not(.d-none)) {position: relative;
                                 min-height: 200px;}
div.spinner {position: absolute;
            opacity: 50%;
            left: 10px;
            top: 10px;
            right: 10px;
            bottom: 10px;
            z-index: 1000;
            background-color: #eee;
            }

#fleet_view>.fleet-view-card, #fleet_view>.filler {min-width: 278px;}
@media (min-width: 768px) {
	#fleet_view>.fleet-view-card, #fleet_view>.filler {min-width: 350px;}
}
.fleet-view-card h6 p {margin-bottom: 0;}
.fleet-view-card h6 :is(.data-age,p.aircraft-status,p.tail-status) {margin-top: .4em;}
.fleet-view-card .tail-number-link {color: rgb(33, 37, 41);
                                    display:inline-block;
                                    /*border: 1px solid rgba(0,0,0,.125);*/
                                    /*border-radius: 5px;*/
                                    min-width: 100%;
                                    padding: 5px 0px;
                                    margin: -1px;
                                    }
.fleet-view-card h6 .data-age {font-weight: bold;}
.fleet-view-card h6 p.tail-status {font-weight: bold; font-style: italic;}
.fleet-view-card h6 .data-age.nominal {color: #7abd73;}
.fleet-view-card h6 .data-age.advisory {color: #e3c502;}
.fleet-view-card h6 .data-age.caution {color: #e67e00;}
.fleet-view-card h6 .data-age.warning {color: #FF6961;}
.fleet-view-card h6 .data-age.no-data {color: #565656;}
.fleet-view-card h6 div.data-age-info {position: absolute;
                                       visibility: hidden;
                                       top: 0;
                                       width: 200px;
                                       left: 0;
                                       z-index: 1000;}
.fleet-view-card h6 div.data-age-info2 {display: block;
                                        background-color: white;
                                        border: solid #212529 1px;
                                        width: 100%;
                                        border-radius: 5px;
                                        padding: 5px;
                                        margin-top: 1.25em;}
.fleet-view-card h6 div.data-age-info .data-age-plain {font-weight: 400;
                                                       color: #212529;}
.fleet-view-card h6 .data-age {position: relative;}
.fleet-view-card h6 .data-age .info-icon {cursor: pointer;}
.fleet-view-card h6 .data-age:hover div.data-age-info {visibility: visible;}
.fleet-view-card h6 .data-age div.data-age-info.show {visibility: visible;}
.page-title h6 p.data-age.nominal :is(.bi,.data-age-number) {color: #7abd73;}
.page-title h6 p.data-age.advisory :is(.bi,.data-age-number) {color: #e3c502;}
.page-title h6 p.data-age.caution :is(.bi,.data-age-number) {color: #e67e00;}
.page-title h6 p.data-age.warning :is(.bi,.data-age-number) {color: #FF6961;}
.page-title h6 p.data-age.no-data :is(.bi,.data-age-number) {color: #565656;}
.page-title h6 p.data-age .data-age-number {font-weight: bold;}
.page-title h6 p.tail-status {font-weight: bold; font-style: italic;}

#filter_menu, #flight_menu {
  max-height: 280px;
  overflow-y: auto;
}
.flight-title {display: block; margin-top: 6.67px;}
.selected-flight {font-weight: bold;}
.filter-title {position:absolute; padding-top: 5px;}
.filter-body {margin-left: 4em;}
.filter-item {border: 1px solid rgba(0,0,0,.125); border-radius: 5px; width: fit-content; display: inline-block;}
.filter-item-title {padding-left: 5px; display: inline-block; vertical-align: top; padding-top: 7px; width: 51px;}
@media (max-width: 1220px) {
  .filter-item:not(:last-child) {margin-bottom: 5px;}
  .filter-item {display: block;}
}

.component.nominal i:not(.hi *)  {color: #7abd73;}
.component.advisory i:not(.hi *) {color: #e3c502;}
.component.caution i:not(.hi *) {color: #e67e00;}
.component.warning i:not(.hi *) {color: #FF6961;}
.component.no-data i:not(.hi *) {color: #565656;}
.component .component.nominal i:not(.hi *)  {color: #7abd73;}
.component .component.advisory i:not(.hi *) {color: #e3c502;}
.component .component.caution i:not(.hi *) {color: #e67e00;}
.component .component.warning i:not(.hi *) {color: #FF6961;}
.component .component.no-data i:not(.hi *) {color: #565656;}
.hi i.nominal  {color: #7abd73;}
.hi i.advisory {color: #e3c502;}
.hi i.caution {color: #e67e00;}
.hi i.warning {color: #FF6961;}
.hi i.no-data {color: #565656;}
.component.nominal .component-status::after {content: "Nominal"; color: #7abd73;}
.component.advisory .component-status::after {content: "Advisory"; color: #e3c502;}
.component.caution .component-status::after {content: "Caution"; color: #e67e00;}
.component.warning .component-status::after {content: "Warning"; color: #FF6961;}
.component.no-data .component-status::after {content: "No data"; color: #565656;}
.component .component.nominal .component-status::after {content: "Nominal"; color: #7abd73;}
.component .component.advisory .component-status::after {content: "Advisory"; color: #e3c502;}
.component .component.caution .component-status::after {content: "Caution"; color: #e67e00;}
.component .component.warning .component-status::after {content: "Warning"; color: #FF6961;}
.component .component.no-data .component-status::after {content: "No data"; color: #565656;}
.component .component-status::after {float: right; font-weight: bold;}
.lift-load {float: right;}
.lift i {color: #49a1ff}
.lift p {margin-bottom: 0;}
.hi .nominal.hi-value::before {content: "Nominal"; color: #7abd73;}
.hi .advisory.hi-value::before {content: "Advisory"; color: #e3c502;}
.hi .caution.hi-value::before {content: "Caution"; color: #e67e00;}
.hi .warning.hi-value::before {content: "Warning"; color: #FF6961;}
.hi .no-data.hi-value::before {content: "No data"; color: #565656;}
.hi .hi-value::before {float: left; font-weight: bold;}
:is(.component,.lift) button:hover {text-decoration: underline;}
.component .component-name, .lift .lift-name {padding-left: 0.3em;}
.hi .hi-name {padding-left: 0.3em;}
.component .hi {border-right-width: 0; border-left-width: 0;}
.component.supercomponent>div>.i-list-1>.hi:first-child {border-top-width: 0; padding-top: 0;}
.component .hi:last-child {border-bottom-width: 0;}
.component .i-list-2 .hi {border-right-width: 1px; border-left-width: 1px; background-color: rgba(0,0,0,.03);}
.component .i-list-2 .hi:last-child {border-bottom-width: 1px;}
:is(.component,.lift) :is(.i-list-1,.i-list-2,.i-list) {margin-bottom: 0;}
.component-status-body, .lift-list {padding: 0.5rem;}
:is(.component,.lift) .card-header {padding: 0.5rem 0rem;}
.component .component {margin-left: 0.5rem; margin-right: 0.5rem;}
.component .component {border-top-right-radius: 0; border-top-left-radius: 0;}
.component .component-list {margin-bottom: 0.5rem; border: 0}
.component-name {margin-right: 10px;}

.component-list-toggle::before {content: "Hide "}
.component-list-toggle.collapsed::before {content: "Show "}

#fleet_view .component-list {padding: 0 0.5rem 0.5rem 0.5rem;}
/* Flight list controls */
.flight-duration-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.flight-duration-filter input[type="number"] { border: 1px solid rgba(0,0,0,0.20); border-radius: 4px; width: 64px; padding: 2px 5px; font-size: 13px; }
.fl-load-more-wrap { text-align: center; margin-top: 14px; }
.fl-load-more { background: none; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; padding: 6px 24px; cursor: pointer; font-size: 13px; color: #6b7280; transition: background 0.15s, color 0.15s; }
.fl-load-more:hover { background: rgba(0,0,0,0.06); color: #495057; }
.fl-load-more:disabled { opacity: 0.55; cursor: default; }
/* Flight table */
.flight-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flight-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.flight-table thead th { font-size: 11px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,0.12); text-align: left; white-space: nowrap; }
.flight-table tbody tr { border-bottom: 1px solid rgba(0,0,0,0.07); transition: background 0.1s; }
.flight-table tbody tr:last-child { border-bottom: none; }
.flight-table tbody tr:hover { background: #f3f4f6; }
.flight-table tbody td { padding: 9px 10px; white-space: nowrap; }
.flight-table td:first-child a { font-size: 12px; color: #0284c7; text-decoration: none; }
.flight-table td:first-child a:hover { text-decoration: underline; }
.flight-table td:last-child { color: #6b7280; font-size: 12px; }

:is(h4,h6) div {display: inline;}
:is(h4,h6) .aircraft-status.nominal::after {content: "Nominal"; color: #7abd73;}
:is(h4,h6) .aircraft-status.advisory::after {content: "Advisory"; color: #e3c502;}
:is(h4,h6) .aircraft-status.caution::after {content: "Caution"; color: #e67e00;}
:is(h4,h6) .aircraft-status.warning::after {content: "Warning"; color: #FF6961;}
:is(h4,h6) .aircraft-status.no-data::after {content: "No data"; color: #565656;}
:is(h4,h6) .aircraft-status::after {font-weight: bold; display: block;}
@media (min-width: 576px) {
	:is(h4,h6) .aircraft-status::after {float: right;}
}
p.aircraft-type {margin-right: 15px;}
p.right-side {text-align: right;}
.card.page-title .card-subtitle:last-of-type, .watchlist-subtitle {margin-bottom: -.75rem;}
h4 .aircraft-status::after {font-size: 80%;}
h4.card-title .btn {font-size: 24px; padding-top: 0; padding-bottom: 0;}
h4.card-title .flight-title .btn {font-size: 20px;}
h4.card-title {padding-top: 1px;}
.flight-nav {display: inline-block;}
.upper.previous {display: inline-block;}
.lower.previous {display: none;}
@media (max-width: 430px) {
	.upper.previous {display: none;}
	.lower.previous {display: inline-block;}
	.lower-buttons .next {float: right;}
	.flight-nav {width: min-content; display: block;}
	.flight-nav.lower-buttons {width: 100%; margin-top: 5px;}
	.flight-nav.lower-buttons a {width: 48.8%;}
}

.ct-chart path {fill: none;}

:is(.i-list-1,.i-list-2) {padding-left: 0;}
.hi-value {font-weight: bold; text-align: right; width: 100%; display: block;}

.card:not(.card *) {margin-bottom: 1rem;}
.card-header:last-child {border-bottom: 0;}

.three-d-path-link {position: absolute;
                    top: 0; right: 0;
                    padding: inherit;}

.btn-transparent {color: #212529; border-color: #212529;}

.ct-horizontal.ct-label {writing-mode: vertical-lr;}
.ct-chart-bar .ct-horizontal.ct-label {align-items:center !important;}
.ct-chart-line .ct-horizontal.ct-label {translate: -0.5em;}
.ct-vertical.ct-label {translate: 0 0.5em;}

input.info {display: none}

a.ci-plot-button {cursor:pointer;}
#ci-chart-wrapper {position: fixed; width: 100vw; height: 100vh; top: 0; left: 0;
                   z-index: 1031; }
.ci-chart-screen {opacity: 50%; background-color: gray;
                  position: absolute; width: 100%; height: 100%;}
.ci-chart-box {position: absolute; width: 80%; height: 80%; top:10%; left:10%;
               background-color: white; border: 3px solid black;}
@media (max-width: 576px) {
  .ci-chart-box { width: 98%; height: 88%; top: 6%; left: 1%; }
  button.chart-close span { font-size: 220%; }
}
#optempo-chart-wrapper {position: relative; height: 300px;}
.hidden-chart {display: none;}
div.chart-close {right: 15px; top: 5px; position: absolute;}
div.chart-option {right: 15px; bottom: 15px; position: absolute;}
div.chart-title {text-align: center; left: 0; top: 13px; position: absolute; width: 100%;
                  font-size: 16px; color: #777;}
button.chart-close span {font-size: 150%; color: #ff0000;}
.ci-chart {width: 100%; height: 100%;}
.polar-tabs {display: none; position: absolute; top: -45px; left: 0; height: 50px;}
.show-polar-tabs .polar-tabs {display: block;}
.polar-tabs .nav-link {background-color: lightgray;
                                border-top-right-radius: 0.5rem;
                                border-top-left-radius: 0.5rem;}
.polar-tabs .nav-link:not(.active) {pointer-events: auto !important; cursor: pointer;}
.polar-tabs .nav-link:not(.active):hover {text-decoration: underline;}
#ci-chart-wrapper div.spinner {top: 0; left: 0; bottom: 0; right: 0; opacity: 100%; z-index: initial;}
#optempo-chart {width: 100%; height: 100%;}
#optempo-chart[data-x-axis]::before {bottom: -8px;}
#optempo-chart[data-y-axis]::after {left: 0;}
.tooltip-clickable {pointer-events: auto !important; cursor: pointer;}
.tooltip-clickable:hover {text-decoration: underline;}

.control-bar {display: flex; flex-wrap: wrap;}
.page-item .page-link.black {color: #212529;}
.page-link {cursor:pointer;}
.spacer {min-width: 2%;}
.pageDivWrapper {position: relative;}
#pageDiv {position: absolute;}
#search_group {flex-grow: 10; flex-shrink: 10; flex-basis: 200px;}
#fit_group {flex-wrap: nowrap; flex-basis: 0;}
#fit_group .btn {border: 1px solid #ced4da;}
#manual_nav {flex-wrap: wrap;}
#manual_nav li:last-of-type {margin-bottom: 8px;}

.strip-chart {
  --base-height: 400px;
  height: var(--base-height);
  width: 100%;
  --other-height: 100px;
  max-height: calc(100vmin - var(--other-height));
}
.strip-chart-parent {
  --other-height: 100px;
  --base-height: 400px;
  max-height: min(var(--base-height),calc(100vmin - var(--other-height)));
}
.strip-chart-units {margin-top: 1px;}
@media (max-width: 640px) {
  .strip-chart {
    --scale: 1.3;
    position: relative;
    transform: scale(calc(100%/var(--scale)));
    transform-origin: 0 0;
    --other-width: 48px;
    width: calc(var(--scale)*(100vw - var(--other-width)));
    min-height: min(calc(var(--scale)*var(--base-height)),calc(var(--scale)*(100vmin - var(--other-height))));
  }
}
@media (max-width: 480px) {
  .strip-chart {
    --scale: 1.6;
  }
}
@media (max-width: 400px) {
  .strip-chart {
    --scale: 1.9;
  }
}
.param-chart-body,.regime-chart-body {padding: .5rem}
.ecm-exceedance-bar { padding: 6px 14px; font-size: 12px; line-height: 1.8; border-top: 1px solid rgba(0,0,0,0.08); background: rgba(251,146,60,0.07); }
.ecm-exc-line.warning  { color: #dc2626; }
.ecm-exc-line.advisory { color: #ca8a04; }
#param-x-units,#regime-x-units {display: block; margin: 0 auto; width: inherit;}

.float-center {
  font-size: 100%;
}
.floaty {
  fill: #49a1ff;
}
.other-tail-tip {
  font-size: 80%;
  margin: 0;
}
#leaflet_map {height: 720px;}
#world-map {aspect-ratio:1; width:100%; max-height:500px;}
.hidden-tip {display: none !important;}
.jvectormap-tip a {color: inherit;}
#test_canvas {display:none;}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 58px 0 0; /* Height of navbar */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 1010;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
  }
}
.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#sidebarMenu .nav-link span {
  padding-top: .7em;
  vertical-align: top;
  display: inline-block;
}
.inbox {position: relative;}
.mail-count {position: absolute; top:9px; left: 35px;
  width: 1.5em;
  height: 1.5em;
  background-color: red;
  border-radius: 50%;
  color: white;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle !important;
  font-size: 80%;
  font-weight: 900;
}
.bi-mailbox:before, .bi-mailbox-flag:before {
  transform: scaleX(-1);
}