img {
  border-radius: 0.5rem;
  width: 15.625rem;
  height: 12.5rem;
  margin: 0rem 0.3125rem;
}

.container {
  text-align: center;
  display: grid;
  grid-template-columns: 40.625rem 12.5rem;
  grid-template-rows: 12.5rem 6.25rem 6.25rem;
  width: 53.125rem;
  min-width: 46.875rem;
  font-family: Cormorant;
  box-shadow: 0.3125rem 0.3125rem 0.3125rem silver;
  border-radius: 1.25rem;
  border-color: silver;
  border-width: 0.0625rem;
  border-style: solid;
  padding: 0.625rem;
  margin: auto;
  margin-top: 3rem;
}

.robotImage {
  grid-row: 1 / -1;
  grid-column: 2 / 3;
  justify-self: end;
  align-self: start;
}

.robotAkku {
  grid-row: 1 / 2;
  grid-column: 1/2;
  justify-self: start;
  align-self: center;
  display: grid;
  grid-template-columns: 15.625rem 12.5rem 12.5rem;
  align-items: center;
}

.akkuMsg {
  grid-column: 1/2;
  justify-self: start;
  align-self: center;
  margin: 0;
}

.akkuProgressbar {
  grid-column: 2/3;
  justify-self: center;
  align-self: center;
}

.akkuValue {
  grid-column: 3/4;
  justify-self: start;
  align-self: center;
  margin: 0;
  margin-left: 0.3125rem;
}

.robotCoordinates {
  grid-row: 2 / 3;
  grid-column: 1/2;
  justify-self: start;
  align-self: center;
  display: grid;
  grid-template-columns: 15.625rem 12.5rem;
  align-items: center;
}

.item-timestamp-name {
  grid-column: 1/2;
  justify-self: start;
  align-self: start;
}

.item-timestamp-value {
  grid-column: 2/3;
  justify-self: start;
  align-self: center;
}

mat-spinner {
  margin: 7rem auto;
}