.menu-button {
  ul {
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    li {
      padding: 10px;
      width: 25%;
      text-align: center;
      border-right: 1px solid gainsboro;
      cursor: pointer;

      a {
        color: black;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
      }

      &.active {
        background-color: black;

        a {
          color: #fff;
        }
      }
    }

    li:last-child {
      border-right: none;
    }
  }
}

.TICKET-BOX {
  margin-top: 2rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: 6px;

  .flight-info-div {
    border-bottom: 1px solid gainsboro;
    padding-bottom: 1rem;

    .div-both-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .div-one {
        ul {
          display: flex;
          gap: 20px;

          li {
            font-size: 17px;
            display: flex;
            gap: 6px;
            align-items: center;
            font-weight: 500;
            color: #585757;
            border-right: 1px solid gainsboro;
            padding-right: 3rem;

            i {
              font-size: 20px;
              color: black;
            }

            span {
              font-size: 16px;
              font-weight: 500;
              color: #585757;
              i {
                font-size: 15px;
                padding-left: 10px;
                cursor: pointer;
              }
            }
          }
        }
      }

      .div-two {
      span {
      background: #ff00001f;
      padding: 5px 10px;
      color: #b50d0d;
      border-radius: 6px;
      font-weight: 600;
      font-size: 16px;
      }
      }

      .done {
        span {
          background: #4caf5038;
          padding: 5px 10px;
          color: #4caf50;
          border-radius: 6px;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }

  .flight-place-info {
    margin-top: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 10px;

    .flight-place-left {
      width: 15%;

      figure {
        width: 100%;
        height: 150px;
        overflow: hidden;
        border-radius: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .flight-place-right {
      width: 83%;

      .first-hadding-div {
        display: flex;
        justify-content: space-between;

        .hadding-first {
          display: flex;
          gap: 10px;
          align-items: center;

          span {
            color: black !important;
            font-size: 26px;
            font-weight: 600;
          }

          i {
            color: black;
            font-size: 20px;
          }
        }

        .hadding-price {
          span {
            font-size: 26px;
            font-weight: 600;
            color: black;
          }
        }
      }
    }
  }

  .time-div {
    margin-top: 1.3rem;

    .flight-row {
      display: flex;
      align-items: center;
      background: #f8f9fb;
      padding: 18px 24px;
      border-radius: 8px;
      gap: 60px;
    }

    .time-box {
      min-width: 90px;
    }

    .time {
      font-size: 20px;
      font-weight: 600;
      color: #111;
    }

    .date {
      font-size: 16px;
      color: #7a7a7a;
      margin-top: 4px;
    }

    .arrow-box {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .arrow-box .dot {
      width: 6px;
      height: 6px;
      background: #cfcfcf;
      border-radius: 50%;
    }

    .arrow-box .line {
      width: 50px;
      height: 2px;
      background: #cfcfcf;
    }

    .flight-box {
      min-width: 120px;
    }

    .flight-no {
      font-size: 20px;
      font-weight: 600;
      color: #111;
      display: flex;
      gap: 10px;
    }

    .plane {
      font-size: 14px;
      margin-right: 4px;
      width: 40px;
      display: block;
      height: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .airline {
      font-size: 16px;
      color: #7a7a7a;
      margin-top: 4px;
    }

    .passenger-box {
      min-width: 180px;
    }

    .name {
      font-size: 20px;
      font-weight: 600;
      color: #111;
    }

    .count {
      font-size: 16px;
      color: #7a7a7a;
      margin-top: 4px;
    }
  }
}

.addons-wrap {
  margin-top: 1.5rem;
}

.addons-line .label {
  font-weight: 600;
  font-size: 20px;
  color: #6b6f76;
}

.addons-line .value {
  font-weight: 400;
  color: #6b6f76;
  margin-left: 6px;
  font-size: 20px;
}

.earn-line {
  margin-top: 6px;
  font-size: 20px;
  line-height: 20px;
  color: #6b6f76;
  display: flex;
  align-items: center;
  gap: 4px;

  span {
    font-size: 20px;
    font-weight: 600;
  }
}

.earn-line strong {
  font-weight: 600;
  color: #c4a576;
  font-size: 20px;
}

.earn-line .amount {
  font-weight: 600;
  color: #c4a576;
}

.earn-line .chevron {
  margin-left: 6px;
  font-size: 18px;
  color: #c4a576;
  line-height: 1;
}