@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import "barcodes.css";
@page {
  size: letter;
  margin: 0mm;
}
@media screen {
  .label {
    border-style: dotted;
  }
}
@media print {
  .label {
    border-style: none;
  }
  .labelgrid {
    page-break-after: always;
  }
  body {
    margin: 0mm;
  }
  .no-print,
  .no-print * {
    display: none !important;
  }
}
.labelgrid {
  /* Compuuted properties */

  --page-width: 8.5in;
  --page-height: 11in;

  --n-rows: 17;
  --n-cols: 5;

  --label-width: 1.28in;
  --label-height: 0.5in;

  --label-pitch-vert: 0.63in;
  --label-pitch-hor: 1.4in;

  --top-margin: 0.24in;
  --side-margin: 0.77in;

  --col-gap-calc: var(
    --col-gap,
    calc(var(--label-pitch-hor) - var(--label-width))
  );
  --row-gap-calc: var(
    --col-gap,
    calc(var(--label-pitch-hor) - var(--label-width))
  );

  --bottom-margin: var(--top-margin);
  --right-margin: var(--side-margin, var(--left-margin));
  --left-margin: var(--side-margin, var(--right-margin));

  display: grid;
  box-sizing: border-box;

  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;

  counter-reset: label-no-in-page;
  counter-increment: label-page-no;

  width: var(--page-width, 8.5in);
  height: var(--page-height, 11in);
  padding: var(--top-margin) var(--right-margin, var(--side-margin))
    var(--bottom-margin, var(--top-margin))
    var(--left-margin, var(--side-margin));

  grid-template-columns: repeat(var(--n-cols), var(--label-width));
  grid-template-rows: repeat(var(--n-rows), var(--label-height));

  column-gap: var(--col-gap, var(--col-gap-calc));
  row-gap: var(--row-gap, var(--col-gap-calc));
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: var(--label-width);
  height: var(--label-height);
  padding: 2%;

  overflow: hidden;

  font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: 100;
  text-align: center;

  counter-increment: label-no-in-page;
}
.label:hover {
  position:relative;
}
.label:hover > * {
  z-index: 1;
}
.label:hover::before {
  background-color: darkorange;
  content: counter(label-page-no)"."counter(label-no-in-page);
  position: absolute;
  width: 150%;
  height: 100%;
  opacity: 85%;
  color:rgb(3, 87, 123);
  font-size: min(calc(var(--label-height)*0.7),calc(var(--label-width)* 0.8 / 0.1 em / 10));
  font-weight: 900;
  box-sizing: border-box;
  z-index: 2;
}
.label .label-text .txt-name {
  font-weight: bold;
}
.label .label-text span {
  display: block;
  max-width: 100%;
  line-height: 0.8em;
}

.label > .label-text > .txt-date, .label > .label-text > .txt-owner {
  display: inline-block;
  margin-inline: 0.2em;
}