.boxContainer{
  border-radius: 3px;
  overflow: auto;
  max-height: 100%;
  width: 100%;
  padding: 10px;
  gap: 10px;
  background-color: var(--color-suite-tertiary-S360);
  border-color: var(--color-border-S360);

  .colorInLimitsYellow{
  border: solid 2px var(--color-warning-S360) !important;
}

.backgroundInLimitsYellow{
  background-color: var(--color-warning-S360) !important;
}

.colorTextInLimitsYellow{
  color: var(--color-warning-S360) !important;
}

.colorOutLimitsE{
  border: solid 2px var(--color-danger-LimitPTS) !important;
}

.backgroundOutLimitsE{
  background-color: var(--color-danger-LimitPTS) !important;
}

.colorTextOutLimitsE{
  color: var(--color-danger-LimitPTS) !important;
}

.colorInLimitsGreen{
  border: solid 2px var(--color-success-S360) !important;
}

.backgroundInLimitsGreen{
  background-color: var(--color-success-S360) !important;
}

.colorTextInLimitsGreen{
  color: var(--color-success-S360) !important;
}

  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);

  >:nth-child(5n + 1){
      grid-column-start: 1;
      grid-column-end: 3;
  }

  @media only screen and (max-width: 500px){
      grid-template-columns: 100%;
      >*{
          grid-column-start: 1 !important;
          grid-column-end: 2 !important;
      }
  }


  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
      background: #555;
  }

  & .table-container::-webkit-scrollbar {
    display: none;
  }
}