/************************************
Table of Contents 
************************************/

/* 
- Airplane Icon
- Fly Between Graphic
- Price and Fight Details Dropdown
- Luggage Graphics
- Boarding Pass
*/


/****** Airplane Icon ******/

.airplane-icon,
.airplane-icon-2,
.airplane-icon-3 {
  width: 20px;
  height: 20px;
}


/****** Background / Outside Design ******/

.flightcard {
  -moz-border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  border-radius: 0.25rem;
  box-sizing:  border-box;
  overflow: hidden;
}
.notch {
  position: absolute;
  z-index: 2;
  top: calc(50% - 12px);
  width: 18px;
  height: 24px;
  padding-left: 0px;
  padding-right: 0px;
}
.notch-left {
  right: calc(100% - 9px);
  border-radius: 0 50% 50% 0;
}
.notch-right {
  left: calc(100% - 9px);
  border-radius: 50% 0 0 50%;
}


/****** Fly Between Graphic ******/

.flybetweengraphic hr {
  color: transparent;
  height: 1px;
  border:  none 0px;
  border-top: dashed 1px var(--base-color-grey-300);
  margin: 0px 6px;
}
.inactive .flybetweengraphic hr {
  border-top-color: var(--base-color-grey-400);
}
.flybetweengraphic hr::before,
.flybetweengraphic hr::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  outline: 1px solid var(--base-color-grey-300);
  outline-offset: 2px;
  border-radius: 50%;
  background-color: var(--base-color-black);
}
.inactive .flybetweengraphic hr::before,
.inactive .flybetweengraphic hr::after {
  outline-color: var(--base-color-grey-400);
  background-color: var(--base-color-grey-400);
}
.flybetweengraphic hr::after {
  left: auto;
  right: -2px;
}
.flybetweengraphic-plane {
  top: calc(50% - 10px);
  left: calc(50% - 10px);
}


/****** Price and Fight Details Dropdown ******/

.accordion-button {
  width: auto;
}
.accordion-button:not(.collapsed) {
  color: var(--base-color-black);
}
.flightcard .accordion .accordion-item:last-child {
    border-bottom: none 0px;
}
.location {
  margin: 11px 0;
}
.location::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--base-color-black);
  border:  solid 2px var(--base-color-black);
}
.location-outline::before {
  background-color: transparent;
}
.location > .row > div:first-child {
  margin-top: -15px;
}


/****** Luggage Graphics ******/

.luggageicons svg path {
  fill: var( --base-color-grey-300 );
}
.luggageicons svg.active path {
  fill: var( --base-color-npblue-900 );
}
.luggage {
  width: 12px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: bottom center;
}


/****** Boarding Pass ******/

.qrcode {
  width: 25%;
  min-width: 150px;
  max-width: 250px;
}