html {
  --text-color: #606060;
  --item-label-color: DimGray;
  --text-shadow: 0;
  --background-gradient-image: linear-gradient(to bottom, #EEEEEE, #EEEEEE 95%, #DDDDDD);
  --section-background-image: var(--background-gradient-image);
  --button-shadow: inset 0 0 2px white, 0 0 4px rgba(0, 0, 0, 0.6);
  --button-background: #ebebeb;
  --button-backdrop-filter: none;
  --button-hover-color: #6093e7;
  --button-disabled-bg: #CCCCCC;
  --table-header-background: linear-gradient(#7fb8ff, #a2cfff);
  --table-header-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3), 0 0 4px rgba(0, 0, 0, 0.4);
  --table-header-text-shadow: 0;
  --table-header-color: rgb(0, 0, 0, 0.5);
  --table-header-selected-background: linear-gradient(#72ad5f, #90be81); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  --table-header-selected-shadow: inset 0 0 5px rgba(255, 255, 255, 0.4), 0 0 4px rgba(0, 0, 0, 0.2);
  --table-header-selected-color: rgba(240,240,240,0.9);
  --table-header-selected-text-shadow: 0;
  --table-even-row-background-color: #FFF;
  --table-odd-row-background-color: #DDD;
  --table-selected-row-background: linear-gradient(#72ad5f, #90be81); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  --table-selected-row-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  --backdrop-filter: none;
  --menubar-background-image: linear-gradient(rgba(255,255,255,1), rgba(220,220,220,1));
  --menubar-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.2);
  --scrollbar-color: hsl(0, 0%, 60%) hsl(0, 0%, 80%);
  --scrollbar-shadow-color: rgba(0, 0, 0, 0.5);
  --tooltip-background-color: rgba(240, 240, 240, 0.85);
  --modal-background-color: rgba(0,0,0,0.75);
  --modal-content-background-image: var(--background-gradient-image);
  --chat-background: #ebebeb;
  --chat-current-background: #ffffff;
  --chat-shadow: inset 0 0 2px white, 0 0 3px rgba(0, 0, 0, 0.5);
  --select-background-color: #aaaaaa;
  --select-linear-gradient: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  --input-border-color: #6093e7;
  --input-color: #606060;
  --input-background-color: #eeeeee;
  --placeholder-color: #909090;
  --control-panel-background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.8) 90%, rgba(232,232,216,0.8));
  --float-message-box-background: #ebebeb;
  --float-message-box-color: var(--table-header-color);
  --float-message-box-shadow: var(--table-header-shadow);
  --float-message-box-text-shadow: var(--table-header-text-shadow);
  --loading-spinner-background: rgba( 255, 255, 255, .8 );
  --fallback-background: #aaaaaa;
  --highlight-text-color: #dddddd;
}

html[data-theme='dark'] {
  --text-color: rgba(255, 255, 255, 0.8);
  --item-label-color: lightgray;
  --background-gradient-color: background-color: rgba(0, 0, 0, 0.4);
  --background-gradient-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  --section-background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  --section-background-color: rgba(0, 0, 0, 0.6);
  --button-shadow: inset 0 0 2px rgba(255, 255, 255, 0.4);
  --button-background: rgba(255, 255, 255, 0.2);
  --button-backdrop-filter: blur(2px);
  --table-header-background: linear-gradient(#444, #333);
  --table-header-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3);
  --table-header-text-shadow: 0;
  --table-header-color: rgba(255, 255, 255, 0.7);
  --table-header-selected-background: linear-gradient(#555555, #666666);
  --table-header-selected-shadow: inherit;
  --table-header-selected-color: rgba(255, 255, 255, 0.9);
  --table-header-selected-text-shadow: 0;
  --table-even-row-background-color: rgba(50, 50, 50, 1);
  --table-odd-row-background-color: rgba(80, 80, 80, 1);
  --table-selected-row-background: linear-gradient(#888888, #999999);
  --table-selected-row-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
  --button-hover-color: #6093e7;
  --button-disabled-bg: #333333;
  --backdrop-filter: blur(2px);
  --menubar-background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  --menubar-shadow: inset 0 -7px 9px -7px rgba(255,255,255,0.4);
  --scrollbar-color: rgba(255, 255, 255, 0.5) rgba(125, 125, 125, 0.6);
  --scrollbar-shadow-color: rgba(255, 255, 255, 0.5);
  --tooltip-background-color: rgba(0, 0, 0, 0.9);
  --modal-background-color: rgba(255,255,255,0.5);
  --modal-content-background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95));
  --chat-background: rgba(0, 0, 0, 0.4);
  --chat-current-background: rgba(0, 0, 0, 0.7);
  --chat-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.2);
  --select-background-color: #555555;
  --select-linear-gradient: linear-gradient(to bottom, #333333 0%,#555555 100%);
  --input-border-color: #aaa;
  --input-color: rgba(255, 255, 255, 0.8);
  --input-background-color: #555555;
  --placeholder-color: rgba(255, 255, 255, 0.4);
  --control-panel-background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
  --float-message-box-background: rgba(0, 0, 0, 0.4);
  --float-message-box-color: var(--table-header-color);
  --float-message-box-shadow: var(--table-header-shadow);
  --float-message-box-text-shadow: var(--table-header-text-shadow);
  --loading-spinner-background: rgba(0, 0, 0, .6);
  --fallback-background: #222222;
  --highlight-text-color: rgb(140, 185, 217);
}



body {
	font-size: 13px;
	font-family: system-ui;
	color: var(--text-color);
	background: var(--fallback-background);  /* fallback for old browsers */
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

a {
    font-size: inherit;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: "ibm-plex-mono", sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
}

.font-mono {
    font-family: "ibm-plex-mono", monospace;
}

::placeholder {
    color: var(--placeholder-color);
}

#map {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
}

#tabGroup {
    /*width: 80px;*/
    height: 100%;
}

#tabGroup {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
#tabGroup::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

#tabGroup img {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 18px;
}
#main-tabs .left-tab .label {
    font-size: 1.1em;
    font-weight: bold;
    color: rgba(240,240,240,0.9);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 3px;
    display: none;
    backdrop-filter: blur(2px);
}


#main-tabs .left-tab .tab-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    margin: 5px;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.6), 0 0 2px rgba(0, 0, 0, 1);
    position: relative;
}

#main-tabs .left-tab .tab-icon:hover, #main-tabs .left-tab .tab-icon.selected {
    cursor: pointer;
    box-shadow: inset 0 0 2px rgba(220, 220, 255, 1), 0 0 3px rgba(255, 255, 255, 0.8), 0 0 4px rgba(0, 0, 0, 0.8);
    /* background-color: rgba(255, 255, 255, 0.5); */
}


.mainPanel {
  width: 50%;
  height: 100%;
}

#worldMapCanvas.canvas {
    gap: 0;
    padding: 0;
}

.sidePanel {
    width: 50%;
    padding-left: 0px;
    box-sizing: border-box;
    right: 0;
}

.vertical-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.two-up-grid {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 768px) {
  .two-up-grid {
    grid-template-columns: 1fr;
  }
}

.three-up-grid {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    width: 100%;
    margin-top: 10px;
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr; /* Golden ratio proportions */
  gap: 8px;
}

@media (max-width: 768px) {
  .section-grid {
    grid-template-columns: 1fr;
  }
}

#linkDetails {
    display: flex;
}

#linkCharts {
    width: 260px;
    display: flex;
    flex-direction: column;
}

#detailsPanel {
    margin-bottom: 2rem;
  /*  width: 100%;
    float: left; */
}

#linkQuality {
    display: inline;
}

.value:has(#linkQuality) {
    display: flex;
    width: auto;
    align-content: end;
    justify-content: flex-start;
}

.airplaneCanvasLeftGroup {
   width: 70%;
   height: 99%;
   position: relative;
}

@media only screen and (min-device-width : 800px) {
    #airplaneModelTableFilters {
        position: absolute;
        top: 0px;
        right: 0px;
    }
}

#airplaneModelTableFilters {
    display: flex;
    gap: 8px
}

.bankCanvasLeftGroup, .oilCanvasLeftGroup {
   width: 40%;
}

.bankCanvasRightGroup, .oilCanvasRightGroup {
   width: 60%;
}

.airplaneCanvasRightGroup {
   width: 30%;
}

.officeCanvasLeftGroup  {
    width: 72%;
}
.officeCanvasRightGroup {
    width: 28%;
    gap: 8px;
    display: flex;
    flex-direction: column;
}
.sheet {
    padding: 0 8px;
}
.sheet .table.data {
    padding: 20px;
}

#airportCanvas {
}
.airportCanvasLeftGroup {
    padding: 0 10px 0 10px;
    box-sizing: border-box;
}

.airportCanvasRightGroup {
    width: 20%;
}

#rankingCanvas {
    width: 100%;
}

.rankingTable {
    margin: 0 !important;
    padding: 2px !important;
}

#airportDetails>.verticalGroup, .officeCanvasLeftGroup .verticalGroup, #rankingCanvas .verticalGroup, .campaignDetails .verticalGroup, #allianceCanvas .verticalGroup {
    width: 50%;
    gap: 8px;
}

.assetsDetails div.blueprint {
    filter : grayscale(100%);
    margin: 0 !important;
}

.assetsDetails div.blueprint:hover {
    filter : none;
}

#loanInterestRateChart, #oilPriceChart {
    width: 90%;
    height: 300px;
    margin: 0 auto;
}

#eventCanvas .firstColumn {
    width: 30%;
}

#eventCanvas .secondColumn {
    min-width: 400px;
}

body.christmas {
	background: linear-gradient(to bottom, rgba(117, 114, 113, 0.8) 10%, rgba(40, 49, 77, 0.8) 30%, rgba(29, 35, 71, 0.8) 50%, rgba(19, 25, 28, 0.8) 80%, rgba(15, 14, 14, .8) 100%), url(../images/background/snow.gif) !important;
 	background-size: cover !important;
}

#mainContainer {
    width: 100%;
    height: -webkit-calc(100dvh - 40px);
    height: -moz-calc(100dvh - 40px);
    height: calc(100dvh - 40px);
}

#main {
	height: 100%;
}

#map {
	background-color: #FFF;
}

.menubar {
	top: 0px;
	min-height: 40px;
	width: 100%;
	z-index: 999;
	background-image: var(--menubar-background-image);
	display: flex;
	align-items: center;
	justify-content: space-between;
	backdrop-filter: var(--backdrop-filter);
	box-shadow: var(--menubar-shadow);
	/* 	margin-top: -80px; */
}

#patreonDiv {
    margin: 5px;
}

.table {
	display: table;
}

.table.data {
	width: 100%;
}

.table .label {
	display: table-cell;
	width: 40%;
	vertical-align: middle;
}

.table .value {
	display: table-cell;
	width: 60%;
	vertical-align: middle;
}

.table .cell {
	display: table-cell;
	vertical-align: middle;
}

.table.frequencyDetail .cell, .table.frequencyDetailTotal .cell{
   padding: 4px 2px;
}

.text-hint {
    opacity: 0.8;
}

.table .table-row {
	display: table-row;
	width: 100%;
	height: 18px;
	overflow: hidden;
}


.table .table-header {
	display: table-header-group;
	width: 100%;
}

.table .table-header .cell:not(:empty) {
    background: var(--table-header-background);
    padding: 6px 4px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    color : var(--table-header-color);
    overflow: hidden;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #777;
}



.table .table-header .cell.selected, .progressionItem.selected {
    background: var(--table-header-selected-background);
    box-shadow: var(--table-header-selected-shadow);
    color: var(--table-header-selected-color);
    text-shadow: var(--table-header-selected-text-shadow);
}

.table:not(.rounded-none) .table-header .cell:first-child{
  border-radius:6px 0 0 0;
}

.table:not(.rounded-none) .table-header .cell:last-child{
  border-radius:0 6px 0 0;
}

.table:not(.rounded-none) .table-row:first-child .cell:last-child {
    border-top-right-radius: 6px;
}

.table:not(.rounded-none) .table-row:first-child .cell:first-child {
    border-top-left-radius: 6px;
}

.table:not(.rounded-none) .table-row:last-child .cell:last-child {
    border-bottom-right-radius: 6px;
}
.table:not(.rounded-none) .table-row:last-child .cell:first-child {
    border-bottom-left-radius: 6px;
}

.table.data div.table-row:nth-child(even) {
	background-color: var(--table-even-row-background-color);
}

.table.data div.table-row.selected:nth-child(even), .table.data div.table-row.selected:nth-child(odd), .table.data div.table-row.clickable:hover:nth-child(even), .table.data div.table-row.clickable:hover:nth-child(odd) {
    background: #72ad5f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(#72ad5f, #90be81);  /* Chrome 10-25, Safari 5.1-6 */
    background: var(--table-selected-row-background);
    box-shadow: var(--table-selected-row-shadow);
}

div.section.clickable:hover, div.section.clickable.selected, .allianceMissionCandidates div.selected {
  background: var(--table-header-selected-background);
  box-shadow: var(--table-header-selected-shadow);
}

.border-radius-cut {
    border-radius: 8px;
    border: 1px solid black;
    overflow: hidden;
}

.table.colored div.table-row:nth-child(even){
    background-color: var(--table-even-row-background-color);
}

.table.data div.table-row:nth-child(odd), .table.colored  div.table-row:nth-child(odd){
	background: var(--table-odd-row-background-color);
}

.inline-icons img {
    vertical-align: middle;
}

.item-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
}

.item {
    width: 160px;
    height: 40px;
    padding-bottom: 8px;
}

.item-span-2 {
    grid-row: span 2;
    width: auto;
    height: auto;
    padding-bottom: 8px;
}

.item-grid > .divider {
    grid-column: 1 / -1;
    margin: 0.5 rem;
}

.i-label {
    font-size: 13px;
    color: var(--item-label-color);
    letter-spacing: -0.1px;
    margin-bottom: 4px;
    font-weight: 700;
}

.i-label .tooltip {
    width: 16px;
    height: 16px;
}

.i-value {
    font-size: 13px;
    letter-spacing: -0.1px;
    display: flex;
    gap: 4px;
}

.progressionItem {
    background: #7fb8ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(#7fb8ff, #a2cfff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(#7fb8ff, #a2cfff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 5px;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.3), 0 0 4px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-shadow: 0px 0px 3px rgba(255,255,255,0.6);
    font-size: 1.1em;
    font-weight: bold;
    color : rgb(0, 0, 0, 0.5);
    border-radius: 3px;
    width: 100px;
    margin: 0.2em 0.2em;
}


 
.label, div.header, span.header {
	line-height: 1.1;
	color: var(--text-color);
	text-decoration: none;
	font-size: 12px;
}

div.header, span.header {
	font-size: 18px;
}

.button, .ajax-file-upload, .button.disabled:after {
   	border-radius: 8px;
}

div.button, button.button, .ajax-file-upload {
	text-align: center;
	line-height: 1.6em;
	/* color: #454544; */
	background-color: var(--button-background);
	text-decoration: none;
	font-size: 12px;
	display: inline-block;
	cursor: pointer;
	padding: 5px 15px;
	margin: 4px;
	box-shadow: var(--button-shadow);
	/*backdrop-filter: var(--button-backdrop-filter); otherwise touch title will be blurred*/
}

.button:hover {
    color: var(--button-hover-color);
}

.button.small {
    height: 20px;
    width: 20px;
}
.button.primary {
    font-weight: 600;
    font-size: 120%;
}

div.glow, span.glow, img.glow {
    animation: glow 2s infinite alternate;
}

span.glow, img.glow {
    border-radius: 2px 2px 2px 2px;
}


@keyframes glow {
  from {
    box-shadow: 0 0 5px -5px #C0D4F8;
  }
  to {
    box-shadow: 0 0 5px 5px #6495ED;
  }
}


div.button.selected, div.selectedSection {
  background: #72ad5f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(#72ad5f, #90be81);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(#72ad5f, #90be81); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

div.selectedSection {
	background-image: none;
}

.button, .ajax-file-upload {
	cursor: pointer
}

img.button {
    opacity: .6;
    transition: opacity .5s;
}
img.button:hover {
    opacity: 1;
}

/*streetview button*/
button.gm-svpc {
    display: none;
}

.airportPopupName {
    font-size: 14px;
    line-height: 1.02;
    padding: 0 18px 6px 0;
}

#airportPopupName {
    padding: 0 2px;
}

#airportPopupCity {
    font-size: 15px;
}

.airportFeatures {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/*google map button styles*/
.gm-ui-hover-effect {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important
}

.gm-style-iw-chr {
    height: 4px;
}

.gm-style .gm-style-iw-c {
    padding: 12px !important;
}

.gm-style-iw-d {
    max-height: unset !important;
}

.gm-style-iw {
    max-height: unset !important;
	overflow: hidden !important;
	line-height: 1.35;
	white-space: nowrap;
}

dd.info {
	line-height: 1.6em;
	color: var(--text-color);
	text-decoration: none;
	font-size: 10px;
}

dd.error {
	line-height: 1.6em;
	color: #ff8080;
	text-decoration: none;
	font-size: 10px;
}

#floatMessageBox {
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0px 0px 15px 15px;
	z-index: 1000;
	/* 	background:#ffc; */
	background: var(--float-message-box-background);
	padding: 5px;
	text-align: center;
	box-shadow: var(--float-message-box-shadow)
	color: var(--float-message-box-color)
	text-shadow: var(float-message-text-shadow)
}

.mapControlPanel {
	position: absolute !important;
	bottom: 100px !important;
	left: 50% !important;
	z-index: 1 !important;
	transform:translateX(-50%) !important;
	background-image: var(--control-panel-background-image) !important;
	backdrop-filter: var(--backdrop-filter);
}

#hideAirportLinksButton {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    z-index: 1;
}

#floatBackButton {
	position: absolute;
	top: 100px;
	left: 0px;
	z-index: 1000;
	/* 	background:#ffc; */
	padding: 5px;
	text-align: center;
	box-shadow: inset 0 0 2px white, 0 0 30px rgba(0, 0, 0, 0.5), 0 0 10px
		rgba(255, 255, 255, 0.7);
	/* 	box-shadow:inset 0 0 2px white,0 0 3px rgba(0, 0, 0, 0.5); */
}

#console  {
	background: #000;
	color: #ccc;
	display: block;
	padding: 5px 0px;
	-moz-box-shadow:    inset 0 0 5px #fff;
  	-webkit-box-shadow: inset 0 0 5px #fff;
	box-shadow:         inset 0 0 5px #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	height: 20px;
}

#console .actionMessage, #console .errorMessage {
	//animation-name: fadeIn;
  	//animation-duration: 1s;
}


#console .errorMessage {
	color: #AF383F;
}

div.section, div.selectedSection, .modal-content {
	border-radius: 5px 5px 5px 5px;
	box-shadow: inset 0 0 2px white, 0 0 3px rgba(0, 0, 0, 0.5);
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	padding: 20px 20px 32px 20px;
	box-sizing:border-box;
}

div.section {
	border-radius: 8px;
	padding: 16px 12px 20px 12px;
	background: var(--section-background-image);
}
div.section.tight {
	padding: 4px 4px;
}
.section textarea {
    border-radius: 8px;
}
.officeCanvasRightGroup h4, .officeCanvasRightGroup li, .officeCanvasRightGroup .button, .sidePanel .tight h4 {
    padding-left: 8px;
}
.officeCanvasRightGroup h4 {
    padding-bottom: 8px;
}

div.section div.section {
    margin: 8px;
}

.config {
    padding: 8px 0;
    margin: 8px 0;
}
.config + .config, .config:first-child {
  border-top: 0.5px solid lightgray;
}

.modalHeader {
    margin: 0.5rem 0 1.5rem;
}

.modal-content {
	background-image: var(--modal-content-background-image);
}

.modal-content p {
	margin-bottom: 8px;
}

.modal-content .table {
    margin-bottom: 1rem;
}

.modal-content .button:first-of-type {
    margin-left: 0;
}

.googleMapButton {
	box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
	border-radius: 2px;
	cursor: pointer;
	background-color: rgb(255, 255, 255);
	height: 28px;
	margin-right: 10px;
	font-size: 11px;
}

.googleMapIcon {
	box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
	border-radius: 2px;
	cursor: pointer;
	background-color: rgb(255, 255, 255);
	height: 40px;
	width: 40px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 11px;
}

div.googleMapPanel {
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	border-radius: 3px;
	background-color: rgb(255, 255, 255);
	margin-bottom: 22px;
	text-align: center;
	padding: 8 px;
	margin: 10px;
	font: 11px;
	border: 2px solid #fff;
}

.alignHelper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

div.divider {
	width: 100%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 0;
	height: 1px;
    background-image: linear-gradient(to right, rgba(69, 69, 68, 0), rgba(69, 69, 68, 0.75), rgba(69, 69, 68, 0.75), rgba(69, 69, 68, 0.75), rgba(69, 69, 68, 0));
}

.table.data .table-row div.divider.cell {
    border-top: 1px solid #6093e7;
    height: 0px;
    background-image: none;
    padding: 0;
}


a.selected, :not(.button):not(.no-highlight) > a:hover, span.selected, .clickable:hover:not(.cell), .clickable.selected:not(.cell) {
	border-radius: 3px 3px 3px 3px;
	background: #72ad5f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(#72ad5f, #90be81);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(#72ad5f, #90be81); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

a:hover, .clickable:hover, .clickable-no-highlight:hover {
	cursor: pointer;
}

.table .table-header .cell.clickable:hover {
    color: rgba(240,240,240,0.9);
    text-shadow: 0px 0px 5px rgba(255,255,255,0.5);
}


#airportIcons .feature {
	margin-left: 2px;
	margin-right: 2px;
}


.tabs {
	list-style: none;
	position: relative;
} 

.tabs li:hover {
	color: #6093e7;
}
.tabs li.active {
	font-weight: 700;
	background-color: #6093e7;
	color: #FFF;
}

li.row, div.table-row {
	font-size: 11px;
	color: var(--text-color);
}

/**
.table-panel {
    overflow-x: auto;
    overflow-y: hidden;
}
*/

.table-container-y {
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - 120px);
    overflow-y: scroll;
    overflow-x: hidden
}

.table-container-x {
    box-sizing: border-box;
    overflow-x: scroll;
    max-width: 100%;
}

.table.data {
    width: 100%;
    table-layout:fixed;
    overflow-x: auto;
    height: min-content;
}

.table.data .table-row div,
.table.padded .table-row div{
	padding: 6px 4px;
}

.warning, .fatal, .negative {
	color: #D46A6A;
}
.fatal {
	font-weight: bold;
}

div.future {
    color : #68A357;
    display: inline-block;
}

.roundImage {
    object-fit: cover;
    border-radius: 50%;
    box-shadow: inset 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.8);
}


.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 40s linear infinite;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    //box-sizing: border-box;
}

.marquee span:hover {
    animation-play-state: paused
}

.div-overlay {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0); //transparent
} 


#canvas {
    display: block;
    height: 100%;
}

.canvas {
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.highlight-text {
    color : var(--highlight-text-color) !important;
    font-weight: bold !important;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 11; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: var(--modal-background-color); /* Black w/ opacity */
}

#airplaneBaseModal .modal {
    overflow: hidden;
}

@media (min-width: 768px) {
    padding: 20px 20px 20px 24px;
}

.modal.transparentBackground {
    background-color: transparent;
}

.modal#confirmationModal {
    z-index: 12; /* Confirmation always sits on top, even about modal */
}

/* Modal Content/Box */
.modal-content {
    position: relative;
    z-index: 11;
    margin: 10% auto; /* 15% from the top and centered */
    max-width: 98%;
    width: 100%;
    display: block;
    overflow-x: visible;
    overflow-y: hidden;
}


.blur {
    filter: blur(9px);
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.blackAndWhite {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

img.logo {
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.2);
    margin-right: 4px;
}

img.flag {
    margin-right: 3px;
}

.airlineColorDot {
    width:          15px;
    height:         15px;
    padding:        1px;
    border:         1px solid #ccc;
    display:        inline-block;
    background-color: #EFEFEF;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    cursor: pointer;
}


/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.snowflake {
  /*color: #fff;*/
  color: rgba(255, 255, 255, 0);
  /*text-shadow: #fff 0 0 2px;*/
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@-webkit-keyframes snowflakes-shimmer{0%{opacity : 1},100%{ opacity : 1}50%{opacity : 0.2}}
@keyframes snowflakes-shimmer{0%{opacity : 1},100%{ opacity : 1}50%{opacity : 0.2}}

/*@-webkit-keyframes snowflakes-shake-0{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}*/
@keyframes snowflakes-shake-1{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
/*@-webkit-keyframes snowflakes-shake-1{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(40px);transform:translateX(40px)}}*/
@keyframes snowflakes-shake-2{0%,100%{transform:translateX(0)}50%{transform:translateX(40px)}}
/*@-webkit-keyframes snowflakes-shake-2{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(20px);transform:translateX(20px)}}*/
@keyframes snowflakes-shake-3{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}
/*@-webkit-keyframes snowflakes-shake-3{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(10px);transform:translateX(10px)}}*/
@keyframes snowflakes-shake-4{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes snowflakes-shake-5{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}



.snowflake{
    position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;
    /*-webkit-animation-name:snowflakes-fall,snowflakes-shake,snowflakes-shimmer;/
    -webkit-animation-duration:10s,3s,10s;
    -webkit-animation-timing-function:linear,ease-in-out,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite,infinite;
    -webkit-animation-play-state:running,running,running;*/
    /*animation-name:snowflakes-fall,snowflakes-shake, snowflakes-shimmer;*/
    animation-duration:10s,3s,10s;
    animation-timing-function:linear,ease-in-out,ease-in-out;
    animation-iteration-count:infinite,infinite,infinite;
    animation-play-state:running,running,running
}



.round-button{
    background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
    background-image: linear-gradient(top, #f4f1ee, #fff);
    border-radius: 50%;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);

    position: relative;
    display: inline-block;
    height: 35px;
    width: 35px;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.round-button:after{
    color:#e9e6e4;
    content: "";
    display: block;
    font-size: 20px;
    text-decoration: none;
    text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
    position: relative;

}

.round-button:hover {
    border-radius: 50% !important;
}

.tick:after{
    content: "✔";
    left:10px;
    top:9px;
}

#olympicsCityVoteTable span {
    font-size: 1.2em;
    font-weight: bold;
}
.number-button {
    margin: 5px;
}
.number-button span {
    position: absolute;
    left: 13px;
    top: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.tick:not(.disabled):hover:after, .selected .tick:not(.disabled):after, .number-button span {
    color:#83d244;
    text-shadow:0px 0px 6px #83d244;
}

.confetti {
    position: absolute;
}

.confetti.red {
  background-color: #E94A3F;
}

.confetti.yellow {
  background-color: #FAA040;
}

.confetti.blue {
  background-color: #5FC9F5;
}

/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-shadow-color);
}
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-shadow-color);
}

div {
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-color);
}

input:disabled, .button.disabled, .clickable.disabled, .round-button.disabled {
  color: #a0a0a0;
  background-color: var(--button-disabled-bg);
  position: relative;
}

input:disabled:hover, .button.disabled:hover, .clickable.disabled:hover, .round-button.disabled:hover {
  cursor: not-allowed;
}

.svg {
    width: 14px;
    height: auto;
}

.info.svg {
  width: 18px;
  margin-top: -2px;
}

input[type='number'] {
    border-radius: 0px;
    padding: 0;
}

button:disabled {
  filter: grayscale(100%);
  cursor: not-allowed;
}

/*.button.disabled:after, .clickable.disabled:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}*/

.button.loading {
    position: relative; /*not sure if it's safe to apply to everything*/
}

.button.loading:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--loading-spinner-background)
                  url('/assets/images/icons/spinner-plane.svg')
                  50% 50%
                  no-repeat;
  background-size: auto 80%;
  border-radius: inherit;
}

.touchTitle {
    position: absolute;
    top: 20px;
    padding: 4px;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    background: linear-gradient(#F0E069 0%, #FFF6B3 10%);
    color : #606060;
    border-radius: 3px 3px 3px 3px;
    text-transform: none !important;
}

#moreTopBarTab {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 11;
    cursor: pointer;
}

.reputationStars {
     margin: auto 8px;
     height: min-content;
 }

.modal-grid-options {
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    width: 100%;
    margin: 10px 0 20px;
}
.modal-grid-options-320 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.modal-grid-options .option {
    border: 1px solid rgb(100 126 151 / 20%);
    border-radius: 8px;
    padding: 16px 12px 20px 12px;
    box-sizing: border-box;
}

.modal-grid-options .option.available, .modal-grid-options .option.active {
    cursor: pointer;
}

.modal-grid-options .option.active {
    box-shadow: var(--table-header-selected-shadow);
    background: var(--table-header-selected-background);
    color: var(--table-header-selected-color);
    text-shadow: var(--table-header-selected-text-shadow);
}
.modal-grid-options .option.available:hover {
    box-shadow: 0px 0px 7px 10px rgb(48 205 255 / 20%);
}
.modal-grid-options .option.unavailable, .modal-grid-options .option.unavailable .dot {
    cursor: not-allowed !important;
}

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


li.dot {
    display: flex;
    align-items: center;
    margin: 4px 0;
}

div.remarks {
    font-style : italic;
    font-size : 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}


iframe.clip {
    display:block;
    margin:auto;
}

/* keep style for airportPopup */
.mapPopup, .mapPopup div.table-row, .mapPopup .label, .mapPopup h4, .mapPopup .header {
    color: #606060;
}
.mapPopup .button {
    background-color: #ebebeb;
    box-shadow: inset 0 0 2px white, 0 0 1px rgba(0, 0, 0, 0.6);
    border: 1px solid #BBB;
}

.threshold-section {
    max-width: 100%;
    margin: 20px auto 0;
}
.threshold-bar-container {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 20px;
    padding: 12px 4px;
}
.threshold-bar {
    position: relative;
    height: 4px;
    border: 1px solid #555;
    border-radius: 25px;
    margin: auto;
    width: 2400px;
    overflow: visible;
}
.threshold-bar.short-fat {
    width: 128px;
    height: 24px;
    overflow: hidden;
}
.threshold-bar .text-center {
    font-size: 1.1rem;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}
.threshold-bar .dot {
    position: absolute;
    top: -6px;
    width: 10px;
    height: 12px;
    padding: 2px;
    border-radius: 10%;
    z-index: 1;
    border-left: 2px solid gold;
    transition: border-color .4s;
}
.dot:hover {
    border-left-color: whitesmoke;
    cursor: pointer;
}
.threshold-bar-bg {
    background: darkgreen;
    height: 100%;
    position: absolute;
    top: 0;
}
.reputationDetails {
    margin: 12px auto;
    width: max-content;
}
.rep-value {
    float: right;
    padding-left: 4px;
}
button {
  /* Appearance Resets */
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  color: currentColor;
  padding: 0;
  font-size: 100%;
  line-height: inherit;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: color, background-color 0.2s;
}
.hover\:bg-red:hover{
    background-color: red;
}
small, .small {
    font-size: 85%;
}
.small-10px {
    font-size: 10px;
}
i, .italic {
    font-style: italic;
}
.strong {
    font-weight: bold;
}
.iata {
    color: currentColor;
    position: relative;
    opacity: .7;
    font-weight: 600;
    padding-right: 4px;
}
/* tailwinds style helpers */
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-lg {
	font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-base {
    font-size: 1rem;
}
.text-xs {
    font-size: 0.7rem
}
.text-underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.text-white {
    color: white;
}
.text-grey {
    color: dimgrey;
}
.font-extralight {
    font-weight: 200;
}
.font-normal {
    font-weight: 400;
}
.capitalize {
    text-transform: capitalize;
}
.leading-none {
    line-height: 1;
}
.leading-tight {
    line-height: 1.25;
}
.leading-snug {
    line-height: 1.375;
}
.leading-relaxed {
    line-height: 1.625;
}
/* Padding: Top, Right, Bottom, Left */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0px !important; }
.mt-0 { margin-top: 0px !important; }
.mr-0 { margin-right: 0px !important; }
.mb-0 { margin-bottom: 0px !important; }
.ml-0 { margin-left: 0px !important; }
.ml-auto { margin-left: auto !important; }
.pt-0 { padding-top: 0px; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }
.pt-8 { padding-top: 32px; }
.pt-10 { padding-top: 40px; }
.pt-12 { padding-top: 48px; }
.pt-16 { padding-top: 64px; }
.pr-0 { padding-right: 0px; }
.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }
.pr-5 { padding-right: 20px; }
.pr-6 { padding-right: 24px; }
.pr-8 { padding-right: 32px; }
.pr-10 { padding-right: 40px; }
.pr-12 { padding-right: 48px; }
.pr-16 { padding-right: 64px; }
.pb-0 { padding-bottom: 0px; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }
.pb-6 { padding-bottom: 24px; }
.pb-8 { padding-bottom: 32px; }
.pb-10 { padding-bottom: 40px; }
.pb-12 { padding-bottom: 48px; }
.pb-16 { padding-bottom: 64px; }
.pl-0 { padding-left: 0px; }
.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pl-5 { padding-left: 20px; }
.pl-6 { padding-left: 24px; }
.pl-8 { padding-left: 32px; }
.pl-10 { padding-left: 40px; }
.pl-12 { padding-left: 48px; }
.pl-16 { padding-left: 64px; }
.px-0 { padding-left: 0px; padding-right: 0px; }
.px-05 { padding-left: 2px; padding-right: 2px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.px-12 { padding-left: 48px; padding-right: 48px; }
.px-16 { padding-left: 64px; padding-right: 64px; }
.py-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.py-05 { padding-top: 2px; padding-bottom: 2px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.h-1 { height: 4px; }
.h-2 { height: 8px; }
.h-3 { height: 12px; }
.h-4 { height: 16px; }
.h-5 { height: 20px; }
.h-6 { height: 24px; }
.h-7 { height: 28px; }
.h-8 { height: 32px; }
.w-68 {width: 68px;}
.min-w-40 { min-width: 10rem; }
.min-w-52 { min-width: 13rem; }
.min-w-80 { min-width: 20rem; }
.min-w-96 { min-width: 24rem; }
.max-w-60 { max-width: 15rem; }
.max-w-72 { max-width: 19rem; }
.w-full { width: 100% !important; }
.w-half { width: 50% !important; }
.max-w-32 {max-width: 8rem;}
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem !important; }
.gap-8 { gap: 2rem !important; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.scale-75 { scale: 75%; }
.rotate-90 { rotate: 90deg}
.-rotate-90 { rotate: -90deg}
.list-disc { list-style-type: disc; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.rounded-none { border-radius: 0px !important; }
.overflow-x-auto { overflow-x: auto !important; }
.flex-align-center {
    display: flex;
    align-items: center;
}
.inline-block {
    display: inline-block;
}
.flex-row {
    display: flex;
    width: 100%;
    gap: 0 0.5rem;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-center {
    align-items: center;
    display: flex;
}
.justify-center {
    justify-content: center;
}
.flex-row > div {
    flex-shrink: 0;
}
.flex-container-width-half.gap-2 {
    gap: 0.5rem;
}
.flex-container-width-half {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
}
.flex-container-width-half.gap-2 > div, .flex-container-width-half.gap-2 > button {
    flex: 1 1 calc(50% - 0.5rem);
}
.flex-container-width-half > div, .flex-container-width-half > button {
    flex: 1 1 calc(50% - 1rem);
    box-sizing: border-box;
    margin: 0 auto;
}
.flex-container-width-third {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}
.flex-container-width-third > div, .flex-container-width-third > button {
    flex: 1 1 calc(33% - 1rem);
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 0;
}
.flex-container-width-quarter {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
}
.flex-container-width-quarter > div, .flex-container-width-quarter > button {
    flex: 1 1 calc(25% - 0.5rem);
    box-sizing: border-box;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.center {
    margin: 12px auto;
    width: max-content;
}
.section-title {
    width: 100%;
    font-size: 1em;
    font-weight: 600;
}
#linkCurrentDetails {
    flex-basis: 250px;
    width: 250px;
}
#planLinkExtendedDetails > .table-row {
    height: 32px;
}
#planLinkExtendedDetails .label {
    width: 30%
}
#planLinkExtendedDetails > .table-row > .value {
}
div#serviceLevelBar {
    scale: 1.2;
    transform: translate(9%, -9%);
}
.airplaneIcon {
    padding: 1px;
}
.link-decoration {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 10px 3px 0;
    align-self: stretch;
}
.link-decoration-circle {
    border: 2px solid #5f6368; border-radius:12px; height: 12px; width: 12px;
}
.link-decoration-line {
    border-right: 3.2px dotted #5f6368;flex: 1;margin-bottom: 2px;margin-top: 4px;width: 0px;
}
.planLinkPrice {
    width: 64px;
}
.class-values {
    display: flex;
    width: 210px;
    justify-content: space-between;
}
.class-value-child {
    width: 50px;
    text-align: right;
}
.class-value-child-helper {
    opacity:0.6;
    font-size:80%
}

/* Loading spinner */
.loadingSpinner {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: var(--loading-spinner-background);
}
.loader-svg {
    width:  220px;
    height: 220px;
    margin: 30% auto;
    animation:  1.4s linear infinite loader-spin;
    background: url('/assets/images/icons/spinner-plane.svg')
                50% 50%
                no-repeat;
}
.searchInput .spinner {
    position: absolute;
    top: -20px;
}
.spinner {
    z-index: 99;
    animation: 1.4s linear infinite loader-spin;
}
@keyframes loader-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

[popover] {
  background: black;
  color: white;
  font-weight: 400;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  max-width: 20ch;
  line-height: 1.4;
  top: 2rem;
  margin: 0 auto;
}
/*   IS-OPEN STATE   */
[popover]:popover-open {
  translate: 0 0;
}
/*   EXIT STATE   */
[popover] {
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
  translate: 0 -22rem;
}

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  [popover]:popover-open {
    translate: 0 -22rem;
  }
}
/* airplane config */
.chart-container.svelte-16dxm5m{height:100%;display:flex;flex-direction:column}.empty-chart.svelte-16dxm5m{display:flex;justify-content:center;align-items:center;height:180px;border-radius:4px;color:#333}.svg-btn.svelte-udovpc.svelte-udovpc{margin:0 2px;background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;width:24px;height:20px;transition:opacity .2s}.svg-btn.svelte-udovpc.svelte-udovpc:hover:enabled{opacity:.4}.svg-btn.svelte-udovpc svg.svelte-udovpc{width:auto;height:100%}label.svelte-udovpc.svelte-udovpc{width:72px;text-transform:capitalize}input.svelte-udovpc.svelte-udovpc{width:44px}.inputs.svelte-udovpc.svelte-udovpc{display:flex;flex-direction:column;padding:8px 0 4px;gap:2px}.inputs.svelte-udovpc div.svelte-udovpc{display:flex;align-items:baseline}.inputs.svelte-udovpc input.svelte-udovpc{margin:4px 0 0}.planeDiagram.svelte-udovpc.svelte-udovpc{display:flex;flex-direction:column;justify-content:flex-start;border:1px solid #ccc;overflow:hidden;padding:0 8px 0 16px;border-radius:80px 40px 40px 80px}.seat-group.svelte-udovpc.svelte-udovpc{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:end;align-content:start;width:auto;height:100%}.seat-group.top.svelte-udovpc.svelte-udovpc{padding:0;justify-content:end}.seat-group.center.svelte-udovpc.svelte-udovpc{padding:0;justify-content:center}.seat-group.bottom.svelte-udovpc.svelte-udovpc{padding:0;justify-content:start}.group-business.svelte-udovpc.svelte-udovpc{margin:0 6px;display:flex;flex-direction:column;flex-wrap:wrap;height:100%;align-content:start}.top.svelte-udovpc .group-business.svelte-udovpc{justify-content:end}.center.svelte-udovpc .group-business.svelte-udovpc{justify-content:center}.bottom.svelte-udovpc .group-business.svelte-udovpc{justify-content:start}.seat.svelte-udovpc.svelte-udovpc{flex:0 0 auto;box-sizing:border-box;min-width:4px;min-height:6px;border:.5px solid #222;margin:.5px 0 .5px 4px}.economy.svelte-udovpc.svelte-udovpc{background-color:#deb887;width:4px;height:6px}.business.svelte-udovpc.svelte-udovpc{background-color:silver;width:4px;height:9px;margin:1px 0 1px 5px}.first.svelte-udovpc.svelte-udovpc{background-color:gold;width:9px;height:11px;margin:1px 0 1px 3px}.aisle.svelte-udovpc.svelte-udovpc{flex:0 0 auto;height:7px;width:100%;background-color:#daa520;opacity:.15}