Untitled

:host {
  font-size: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;

  .shipments-tabs {
    display: flex;
    flex-direction: column;

    .tab-item {
      &.e-active {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .row.shipments-grid {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        overflow: hidden;
        .mygrid {
          overflow: hidden;
          flex: 1 1 0;
        }
      }
    }
  }

  .item-label {
    font-weight: bold;
  }

  .icon-arrow {
    color: var(--yusen-orange);
  }

  .path-boat-icon {
    color: var(--yusen-orange);
    font-size: 14px;
  }

  .path-plane-icon {
    color: var(--yusen-blue2);
    font-size: 14px;
  }

  header {
    .icon {
      color: var(--yusen-orange);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.active-shipments-grid ::ng-deep {
  yla-cell-template-renderer {
    height: 100% !important;
    div {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      p {
        line-height: 1rem !important;
      }
    }
  }
}

.badge {
  padding: 0.5rem;

  &.na {
    background-color: var(--yusen-blue4);
    color: var(--yusen-blue);
  }

  &.early {
    background-color: var(--bs-success);
    color: var(--white);
  }

  &.on-time {
    background-color: var(--yusen-blue);
    color: var(--white);
  }

  &.delay {
    background-color: var(--yusen-blue2);
    color: var(--white);
  }

  &.significant-delay {
    background-color: var(--yusen-orange);
    color: var(--white);
  }

  &.critical-delay {
    background-color: var(--bs-danger);
    color: var(--white);
  }
}