@import url(../../fonts/stylesheet.css);

*{
  box-sizing: unset !important;
}
body {
  background: #000;
  color: rgba(255, 255, 255, 1);
  margin: 0;
  padding: 0;
  font-family: 'SF Pro Display';
  font-weight: 500;
  font-style: normal;
  width: 1920px;
  height: 1080px;
}

.container {
  width: 1920px;
  height: 829px;
}

.wrapper {
  width: 1920px;
  height: 1080px;
}

.header {
  width: 1920px;
  height: 200px;
  display: flex;
}

.header-content {
  padding: 15px 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 35px;
}

#flightTable {
  font-family: 'SF Pro Display';
  /* make sure HeyWow is imported */
  font-weight: 500 !important;
  font-style: normal;
  /* 'Medium' is not valid – use 'normal' or 'italic' */
  font-size: 22px;
  line-height: 22px;
  letter-spacing: 0;
}

#flightTable .flightBody tr td span.yellow-txt {
  color: #ffb411;
  padding: 0;
}

.schedul-lbl {
  text-transform: uppercase;
}

.liveairways-div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 418px;
  height: 185px;
  justify-content: end;
  font-weight: 500;
  align-items: center;
  gap: 40px;
  position: relative;
}

.flight-time {
  display: flex;
  flex-direction: column;
  padding: 0px;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 120px;
  color: rgba(0, 0, 0, 1);
  font-size: 32px;
  font-family: 'HeyWow', sans-serif;
  font-weight: 600;
  line-height: 32px;
}

.liveairways-logo img {
  width: 110px;
  height: 110px;
  display: flex;
  border-radius: 5px;
}

.flight-details-table {
  overflow: auto;
  font-family: 'HeyWow';
  font-weight: 400;
  font-style: normal;
  font-size: 35px;
  height: 875px;
  max-height: 875px;
  overflow: hidden;
  position: relative;
  contain: layout paint style;
}

.promo-overlay {
  position: absolute;
  top: 0px;
  right: 0;
  width: 456px;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(456px);
  transition: transform 0.8s ease-in-out;
  height: calc(100% - 65px);
  contain: layout paint style;
}

.promo-overlay.show {
  transform: translateX(0);
}

.promo-overlay img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  display: block;
}

.flight-details-table table {
  width: 100%;
  border-spacing: 0;
}

.flight-details-table th {
  font-size: 36px;
  line-height: 36px;
  white-space: nowrap;
  height: 54px;
  overflow: hidden;
  text-align: left;
}

.flight-details-table td {
  font-size: 38px;
  line-height: 38px;
  white-space: nowrap;
  height: 54px;
  overflow: hidden;
  text-align: left;
}

.flight-details-table td.flight-no.ylow-clr{
color: #ffb411;
}
.flight-details-table td.flight-no .flight-number-clr{
color: #fff;
}
.flight-details-table td.time.animate {
  display: flex;
  justify-content: flex-start;
  gap: 0px;
  /* align-items: flex-end; */
}

.flight-details-table td.terminal.animate {
  display: flex;
  justify-content: flex-start;
  gap: 0px;
  /* align-items: flex-end; */
}

.flight-details-table td.terminal.animate .utc-offset.yellow-txt {
  font-size: 24px;
  position: relative;
  bottom: -2px;
}

.flight-details-table td.time.animate .utc-offset.yellow-txt {
  font-size: 24px;
  line-height: 1;
  position: relative;
  bottom: -2px;

}

.flight-details-table td.destination span.language {
  color: #F0BD6A;
  padding: 0 0 0 10px;
}

.flight-details-table td.destination span.iatacode {
  font-size: 28px;
  padding: 0 0 0 10px;
}

.flight-details-table td.destination.animate .departure {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.flight-details-table td.destination.animate .departure .from {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.flight-details-table td.destination.animate .departure .to {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.flight-details-table td.destination.animate .arrival .from {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.flight-details-table td.destination.animate .arrival .to {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}


.flight-details-table td.destination.animate .arrival {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

/* .flight-details-table td.destination.animate .arrival .from {
  width: 40%;
} */

/* .flight-details-table td.destination.animate .arrival .to {
  width: 90px;
} */

/* .flight-details-table td.destination.animate .from-side {
  width: 30%;

}

.flight-details-table td.destination.animate .to-side {
  width: 68%;
} */

.time {
  max-width: 102px;
  width: 102px;
  padding: 0 0 0 30px !important;
  display: flex;
  align-items: center;
  gap: 0px;
}
.time .clock-icon {
      width: 28px;
    height: 28px;
    flex-shrink: 0;
    stroke: currentColor;
}

.time .yellow-txt {
  color: #FBB20E;
}

.clock-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  stroke: currentColor;
}

.flight-no {
  max-width: 164px;
  width: 164px;
  padding: 0 0 0 0px;
}

.airline {
  max-width: 125px;
  width: 125px;
  padding: 0 0 0 0px;
  justify-content: center;
  text-align: center;
}

.terminal {
  max-width: 162px;
  width: 162px;
  padding: 0 0 0 0px;
}

.terminal .yellow-txt {
  color: #FBB20E;
  width: fit-content;
  background: unset;
  margin: unset;
}

.term-col {
  max-width: 80px;
  width: 80px;
  padding: 0;
  justify-content: center;
  text-align: center;
}

td.term-col {
  color: #FBB20E;
}

.term-col .yellow-txt {
  color: #FBB20E;
}

.destination .light-txt {
  color: #f1f3f587;
}

.gate {
  max-width: 118px;
  width: 118px;
  padding: 0 0 0 0px;
}

.belt {
  max-width: 90px;
  width: 90px;
  padding: 0 0 0 0px;
}

.remark {
  max-width: 325px;
  width: 325px;
  padding: 0 0 0 0px;
}

.destination {
  max-width: 337px;
  width: 337px;
  padding: 0 0 0 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.destination.decrease{
width: 535px;
max-width: 535px;
}

.destination.increase{
width: 535px;
max-width: 535px;
}

.animate.color {
  width: 325px;
  /* padding: 0px 10px; */
}

.animate.color .remark-title {
  width: 100%;
  padding: 4px 10px;
  font-size: 36px;
}

.animate.color.green .remark-title {
  background: #127C00;
}

.animate.color.red .remark-title {
  background: #B00100;

}

.animate.color.white .remark-title {
  background: #FFFFFF;
  color: #000;
}

.animate.color.blue .remark-title {
  background: #105599;
}

.animate.color.orange .remark-title {
  background: #FFA500;
  /* background: #bc5d01; */
  color: #000;
}

.animate.color.grey .remark-title {
  background: #6e6e6e;
}


.flight-img {
  width: 100%;
  height: 38px;
}

.flight-img-departure {
  background-color: white;
}

.terminal span {
  display: flex;
  padding: 4px;
  width: 120px;
  text-align: center;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 100px;
}

.gate span {
  display: flex;
  padding: 4px 12px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 100px;
  background: #686868 !important;
  color: #fff !important;
}


/* New Css */

.site-url {
  font-size: 21px;
  letter-spacing: 1px;
  font-family: 'HeyWow', sans-serif;
  font-weight: 500;
  font-style: normal;
}

.liveairways-logo {
  box-shadow: 4px 0px 10px 0px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

.time-monitor {
  content: "";
  display: inline-block;
  width: 100px;
  height: 8px;
  border-radius: 30px;
  z-index: 3;
}

.pagination-box {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 2px;
}

.pagination {
  font-size: 21px;
  width: 150px;
  text-align: center;
  margin: auto;
  font-family: 'HeyWow', sans-serif;
  /* make sure HeyWow is imported */
  font-weight: 500;
  font-style: normal;
}

.liveairways-div .right-clock {
  position: relative;
  top: -73px;
}

.liveairways-div .right-clock .flight-time {}

.plane-remarks {
  font-size: 22px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 1);
  margin: 0;
  font-family: 'HeyWow', sans-serif;
  font-weight: 700;
  font-style: bold;
}

.flight-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  height: 110px;
  width: 190px;
  z-index: 2;
}

.flight-logo img {
  width: 112px;
  height: 58px;
  padding-top: 10px;
}

.flight-details-table tr {
  height: 54px;
}



.active-page {
  font-weight: bold;
  font-size: 22px;
}

.flight-details-table th {
  letter-spacing: 0;
  font-weight: 500 !important;
}

/*.gate{display: none;}*/
table tbody tr,
table thead tr {
  display: flex;
  gap: 20px;
}

th,
td {
  display: flex;
  align-items: center;
}

table thead tr th.gate,
table thead tr th.belt {
  justify-content: center;
}

tbody tr td {
  font-weight: 400;
}

/*New Clock CSS*/
.lock-time-new {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.lock-time-new span {
  font-size: 18px;
  letter-spacing: 1px;
  font-family: 'HeyWow', sans-serif;
  font-weight: 600;
  font-style: normal;
  display: block;
  background: #000;
  text-align: center;
  width: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 0;
}


/*New Style For New Table*/
/* .time-new{max-width:116px;width:116px;padding: 0 0 0 20px !important;}
.flight-no-new {max-width:144px;width: 144px;}
.from {max-width: 400px;width: 400px;}
.term {max-width: 85px;width: 85px;}
.to{max-width: 400px;width: 400px;}
.local{max-width: 120px;width: 120px;}
.utc {max-width: 120px;width: 120px;}
.status {max-width:290px;width:290px;} */

tr:nth-child(15) {
  display: none;
}

.marquee-box {
  background-color: #000;
  display: flex;
  /* height: 55px; */
  position: absolute;
  width: 1920px;
  overflow: hidden;
  contain: layout paint style;
}

.plane-report {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 6px 12px;
}

.plane-report.Landed {
  padding-left: 35px;
}

.plane-report.Landed .plane-result {
  width: 100px;
}

.plane-report.departed {
  padding-left: 35px;
}

.plane-report.departed .plane-result {
  width: 143px;
}

.position-plane img {
  min-width: 44px;
  max-width: 44px;
  padding-bottom: 8px;
}

.plane-result {
  font-size: 26px;
  /* width: 150px;ss */
  font-family: 'HeyWow', sans-serif;
}

.plane-point {
  display: flex;
  position: relative;
  justify-content: flex-end;
}

.position-plane {
  display: flex;
  align-items: center;
  justify-content: center;
}

.position-plane::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 2px;
  background-color: #fff;
  bottom: 0px;
}

.departed {
  background-color: #d1151d;
}

.Landed {
  background-color: #2b7a0f;
}

/* marquee */

.marquee {
  background-color: #000000;
  color: #f5c253;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
}

.marquee-content {
  display: flex;
  will-change: transform;
  list-style: none;
  margin: 15px 0;
  padding: 0;
  /* animation: scrolling 120s linear infinite; */
  animation: auto ease 0s 1 normal none running none !important;
  /* duration hardcoded */
}

.marquee-run {}

@keyframes scrolling {
  from {
    transform: translateX(0%);
  }

  /* Element one fully OFF screen (just beyond left-ledge of container). */
  to {
    transform: translateX(-100%);
  }
}

.marquee-content li {
  font-family: 'HeyWow', sans-serif;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #ffb411;
  border-right: 2px solid #ffb411;
  padding: 0px 20px;
  font-size: 38px;
  line-height: 38px;

}

.marquee-content li .flight-img {
  width: 100px;
  height: 38px;
}

.animate {
  /* opacity: 0; */
}

/* .DEPARTED_LATE, .ARRIVED_LATE{color: #ff0c0e !important;} */