:root {
  --prime: #d7e1ed;
  --second: #f3f6f9;
}
.flight-route {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.flight-route,
.fli-head,
.fli-na,
.fli-body,
.fli-row {
  display: flex;
}
.flight-route > div {
  --padding: 20px;
  width: 50%;
}

.flight-route .conn-wrap .fli-body {
  --padding: 20px;
}

.fli-head {
  padding: 10px 20px;
  background: var(--prime);
  align-items: center;
  justify-content: space-between;
}
.fli-body {
  padding: 20px;
  gap: 5px;
  background: var(--second);
  justify-content: space-between;
}
.fli-body > .terminal {
  width: calc((100% - 120px) / 2);
}
.dep-wrap .fli-head,
.dep-wrap .fli-body {
  padding-right: var(--padding);
}
.ret-wrap .fli-head,
.ret-wrap .fli-body {
  padding-left: var(--padding);
}

.fli-head .title {
  color: var(--text-gray);
  font-family: var(--pf-regular);
}
.fli-na {
  align-items: center;
  gap: 5px;
  font-size: var(--font-xs);
}
.fli-na img {
  --size: 20px;
  width: var(--size);
  height: var(--size);
  object-fit: cover;
  border-radius: 50%;
}
.terminal .time {
  font-size: 13px;
  font-family: var(--pf-medium);
}
.route {
  font-family: var(--pf-light);
  color: var(--text-gray);
}
.airport {
  font-size: var(--font-xs);
}
.dur-time {
  width: 120px;
}
.durtntime {
  color: var(--black);
  font-family: var(--pf-medium);
}
.stop_image {
  position: relative;
  margin: 6px 0 3px 0;
  border-bottom: 0.5px dashed var(--gray);
}
.stop_image::after {
  content: "\f0fb";
  font-family: "Font Awesome 5 Pro";
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-gray);
}
.stop-value {
  font-family: var(--pf-light);
}
.dep-wrap-row {
  position: relative;
}
.dep-wrap-row .divider {
  --size: 40px;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* transform: translateX(-50%); */
  border-right: 1px dashed var(--black);
}
.dep-wrap-row .divider::before,
.dep-wrap-row .divider::after {
  content: "";
  display: block;
  width: var(--size);
  height: var(--size);
  background-color: var(--white);
  border-radius: 50%;
  position: absolute;
  top: -30px;
  left: -18px;
}
.flight-route .divider::after {
  top: unset;
  bottom: -30px;
}

.flight-alert {
  background: #fbd2d3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-xs);
  padding: 5px 12px;
  border-radius: 6px;
}
.flight-alert i {
  color: var(--text-gray);
}
.fli-title {
  font-size: 32px;
  font-family: var(--pf-bold);
  color: var(--this-yellow);
  margin-bottom: 15px;
}

.i-arr,
.loc-title {
  font-size: 20px;
}

.fli-img {
  width: 26px;
}

.fls-row {
  flex-wrap: wrap;
  background: 0 0;
  padding: 5px 15px;
  border: 1px solid var(--white);
  border-radius: var(--card-radius);
}

.fls-row:hover {
  background: var(--bg-primary-gradient-support);
  background: var(--bg-primary-gradient-rev);
  box-shadow: var(--fdd-shadow);
  border-color: transparent;
  border-left: 0;
}
.fli-row {
  align-items: center;
  justify-content: space-between;
}
.fli-row .price {
  margin-bottom: 0;
}
.fli-name {
  font-size: 18px;
}
.fl-t-img {
  width: 40px;
}

.fls-row .bag,
.fls-row .cab,
.fls-row .chec,
.fls-row .date,
.fls-row .dep,
.fls-row .dur,
.fls-row .f-co,
.fls-row .f-na,
.fls-row .stop .text,
.fls-row .ter,
.fls-row .time {
  font-size: 18px;
  font-family: var(--pf-light);
}

.fls-row .stop .text {
  flex-shrink: 0;
}

.fls-row .dep {
  font-family: var(--pf-bold);
}

.fls-row .bag,
.fls-row .dur,
.fls-row .f-na {
  font-family: var(--pf-medium);
}

.fls-row {
  gap: 12px;
  flex-wrap: nowrap;
}

.fl-img,
.fl-time {
  width: 10%;
}

.fl-bag,
.fl-ter {
  width: 15%;
}

.fl-dur {
  text-align: center;
  width: 16%;
}

.of-wrapper {
  border: 1px solid var(--white);
  border-radius: var(--card-radius);
  padding: 5px 15px;
}

.of-wrapper .of-row {
  border: 0;
  padding: 0;
}

.of-wrapper .of-row:hover {
  border-color: transparent;
  border-left: 0;
}

.f-de-collapse .panel-title {
  background: 0 0;
}

.f-de-collapse .panel-body,
.f-de-collapse .panel-title > a,
.f-de-collapse .panel-title > a:focus {
  padding: 15px 0;
}

.f-de-collapse .panel-heading a:after {
  background: var(--white);
  color: var(--this-black);
}
.conn-wrap {
  margin-top: 10px;
}
.conn-fl-wrap.panel-heading a,
.conn-fl-wrap.panel-heading a:active {
  display: block;
  font-size: var(--font-s);
  padding: 6px 0;
  text-align: center;
}

.conn-fl-wrap.panel-heading a::after {
  content: "\f077";
  font-family: "Font Awesome 5 Pro";
  font-size: 11px;
  color: var(--black);
  font-weight: 500;
}

.conn-fl-wrap.panel-heading a[aria-expanded="true"]::after {
  content: "\f078";
}
@media (max-width: 576px) {
  .fls-row .stop .text,
  .fls-row p {
    font-size: 14px !important;
  }
  .min-max{
    min-width: auto!important;
  }
  .dep-wrap-row .divider{
    display: none;
  }
  .flight-route{
    flex-wrap: wrap;
  }
  .flight-route > div{
    width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 992px) {
  .fli-row {
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) {
  .i-arr,
  .loc-title {
    font-size: 25px;
  }
  .fli-img {
    width: 35px;
  }
  .fls-row {
    gap: 12px;
    flex-wrap: nowrap;
  }
  .flight-route > div {
    --padding: 20px;
  }
  .terminal .time {
    font-size: 18px;
  }
  .ret-wrap-bundle .ak-collapse .panel-title > a {
    padding-left: 25px;
  }
}