.city-autocomplete-popup {
  position: absolute;
  width: 630px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  margin-top: 8px;

  .tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e0e0e0;

    .tab-button {
      flex-grow: 1;
      padding: 10px;
      background-color: #f3f9ff;
      border: none;
      border-right: 1px solid #e0e0e0;
      color: #2457ff;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;

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

      &.active {
        background-color: #ffffff;
        color: #333;
      }

      &:hover {
        background-color: #e8f1ff;
      }
    }
  }

  .content {
    padding: 12px 16px;

    .content--scroll-panel {
      max-height: 350px;
      overflow-y: auto;
    }

    .row {
      display: flex;
      align-items: flex-start;
      padding: 4px 0;

      &.country-start-row {
        border-top: 1px solid #e0e0e0;
        padding-top: 12px;
        margin-top: 8px;

        &:first-child {
          border-top: none;
          padding-top: 0;
          margin-top: 0;
        }
      }
    }

    .cell {
      &.contry {
        width: 30%;
        font-weight: 700;
        padding: 7.5px;
      }

      &.city {
        flex: 1;
        padding-right: 16px;

        .city--item {
          display: inline-block;
          padding: 8px;
          cursor: pointer;
          border-radius: 4px;
          transition-duration: 0.1s;

          &:hover { background-color: #f3f9ff; }
        }

        &.city-active .city--item {
          background-color: #dfe8ff;
        }

        .airports-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: 8px;

          .city--item {
            color: #8a8a8a;
          }
        }
      }
    }
  }

  .city-autocomplete-popup-footer {
    background: #f3f9ff;
    border-top: 1px solid #e0e0e0;

    .gps-contaner {
      padding: 16px;

      .gps-button {
        height: 40px;
        width: 100%;
        background-color: #4a8cff;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;

        &:hover { background-color: #3a7aee; }
      }
    }
  }
}
