:root {
--chart-radius: 5px;


--airbus-colour: #3978d6;
--boeing-colour: #e09e23;
--bombardier-colour: #e73d26;
--comac-colour: #d486db;
--embraer-colour: #5cc00a;
--atr-colour: #2a9d8f;
}

.paper {
  background: var(--background-color);
  padding: 20px;
  border-radius: var(--chart-radius); 
  font-family: "Roboto Condensed", sans-serif;
  max-width: 1100px;
  margin: auto;
  margin-bottom: 20px;
}

.chart {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  font-family: "Roboto Condensed", sans-serif;
}

.chart-title, .color-option {
  text-transform: uppercase;
  font-family: "RubikMonoOne", sans-serif;
  letter-spacing: -2px;
  line-height: 2.2rem;
  padding-bottom: 1rem;
}

.chart-title {
  font-size: 2rem;
}

/* flex is used to place the checkbox label to the right of the checkbox */
.color-option {
  font-size: 1.2rem;
  display: flex;
  flex-direction:row-reverse;
  justify-content: flex-end;
  gap: 10px;
}

.color-option input {
  transform: scale(1.5);
  margin-bottom: 4px;
  }

.chart-description {
  display: flex;
  gap: 4rem;
  line-height: 1.5rem;
  padding-bottom: 3.5rem;
}

/* define the fleet container width */
.fleet-container {
  border-radius: var(--chart-radius); 
  height: fit-content;
  padding-bottom: 30px;
}

/* Define the fleet card header that includes the logo and airline name */
.fleet-header {
  height: 40px;
  font-size: 1.2rem;
  color: darkslategrey;
  display: flex;
  padding: 0 3px;
}

/* Give the img a height of 40px and display center middle */
.fleet-header div:first-child img {
  height: 30px;
  display: block;
  filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0.5));
  opacity: 0.8;
}


/* Target the title of the header only and enable ellipsis */
.fleet-header div:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: flex-end;

}

/* format the airline number differently */
.fleet-header>div>span {
  color: lightslategray;
}

/* define the fleet card header logo */
.fleet-header img {
  max-height: 40px;
  max-width: 90px;
}

.isotype {
  line-height: 9px;
  font-size: 10px;
  letter-spacing: -1px;
  font-family: "Noto-aircraft", sans-serif;
}

.fleet-footer {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}

.show-footer {
  display: flex;
}

.footer-total {
  font-size: 2rem;
  padding-top: 5px;
}

.footer-man-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* used in the body text to show the aircraft glyphs */
.ac-glyph {
  font-family: "Noto-aircraft";
}


/* define the manufacturer svg fill colours */
/* These colours are overridden by a grey-fill in the Head of the HTML, that .grey-fill class is then removed via a checkbox and a script in the bottom of the page body*/


.fleet-container  .airbus  {
  color: var(--airbus-colour);
}

.fleet-container .boeing  {
  color: var(--boeing-colour);
}

.fleet-container  .bombardier  {
  color: var(--bombardier-colour);
}

.fleet-container  .comac  {
  color: var(--comac-colour);
}

.fleet-container  .embraer  {
  color: var(--embraer-colour);
}

.fleet-container  .atr  {
  color: var(--atr-colour);
}