pr-duration {
  display: grid;
  grid-template-columns: 0fr 0.5rem 0fr 0.5rem 0fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;
  grid-template-rows: auto auto;
  justify-items: left;
  width: 50%;
}
pr-duration [aria-hidden=true] {
  display: block;
}
pr-duration span {
  border-top: 0.0625rem solid var(--c-border);
  border-bottom: 0.0625rem solid var(--c-border);
  justify-self: left;
  font-size: var(--font-size-x-small);
  color: var(--c-font-descriptor);
  line-height: 2rem;
}
pr-duration[readonly] span {
  background-color: var(--c-input-disabled-bg);
}
pr-duration input:read-only {
  color: var(--c-disabled);
  border: unset;
  border-top: 0.0625rem solid var(--c-border);
  border-bottom: 0.0625rem solid var(--c-border);
}
pr-duration input:read-only:focus,
pr-duration input:read-only:hover {
  border: 0.0625rem solid var(--c-focus);
}
pr-duration input {
  border: 0.0625rem solid transparent;
  border-top: 0.0625rem solid var(--c-border);
  border-bottom: 0.0625rem solid var(--c-border);
  text-align: left;
  line-height: 1.5rem;
  padding: 0.25rem 0.5rem;
}
pr-duration input,
pr-duration span {
  grid-row: 1/span 1;
}
pr-duration input:first-of-type {
  border-left: 0.0625rem solid var(--c-border);
}
pr-duration input:first-of-type:hover,
pr-duration input:first-of-type:focus {
  border-left: 0.0625rem solid var(--c-focus);
}
pr-duration input:first-of-type:invalid {
  border-left: 0.0625rem solid var(--c-error);
}
pr-duration input:last-of-type {
  border-right: 0.0625rem solid var(--c-border);
}
pr-duration input:last-of-type:hover,
pr-duration input:last-of-type:focus {
  border-right: 0.0625rem solid var(--c-focus);
}
pr-duration input:last-of-type:invalid {
  border-right: 0.0625rem solid var(--c-error);
}
pr-duration label {
  grid-row: 2;
  grid-column: span 2;
}
pr-duration label.gridElement {
  color: var(--c-font-descriptor);
  font-size: var(--font-size-x-small);
}
@media screen and (max-width: 547px) {
  pr-duration {
    width: 100%;
  }
}