:root {
  --np-color: white;
  --np-bg: black;
  --np-font-size: 2.5vmin;
  --np-padding: 0.5vmin;
  --np-border-width: 1px;
  --np-border-style: none;
  --np-border-color:  var(--cols-bg);
  --np-border-radius: 0.5vmin;
  --np-gap: 0.5vmin;
  --np-gap-l: 3vmin;
  --np-gap-p: 1vmin;

  --np-item-bg: gray;
  --np-item3-bg: black;
  --np-item4-bg: black;
  --np-item5-bg: black;

  --np-button-color: white;
  --np-button-bg: gray;
  --np-button3-bg: gray;
  --np-button4-bg: gray;
  --np-button5-bg: gray;
  --np-button-font-size: 1.5vw;
  --np-button3-font-size: 15vmin;
  --np-button4-font-size: 12vmin;
  --np-button5-font-size: 10vmin;
  --np-button9-font-size: 3vmin;
  --np-button-disabled-font-size: 1.5vw;
  --np-button-border-width: 1px;
  --np-button-border-style: solid;
  --np-button-border-color:  white;
  --np-button-border-radius: 0.5vmin;
  --np-button3-border-radius: 50%;
  --np-button4-border-radius: 50%;
  --np-button5-border-radius: 50%;
}

/* sb-numpad-grid is a grid container, the cols and rows properties are meant to be set in the html */
.sb-numpad-grid {
    background: var(--np-bg);
    color: var(--np-color);
    font-size: var(--np-font-size);
    padding: var(--np-padding);
    border-width: var(--np-border-width);
    border-style: var(--np-border-style);
    border-color: var(--np-border-color);
    border-radius: var(--np-border-radius);
    gap: var(--np-gap);
}

.sb-numpad-grid-l {
    background: var(--np-bg);
    color: var(--np-color);
    font-size: var(--np-font-size);
    padding: var(--np-padding);
    border-width: var(--np-border-width);
    border-style: var(--np-border-style);
    border-color: var(--np-border-color);
    border-radius: var(--np-border-radius);
    gap: var(--np-gap-l);
}

.sb-numpad-grid-p {
    background: var(--np-bg);
    color: var(--np-color);
    font-size: var(--np-font-size);
    padding: var(--np-padding);
    border-width: var(--np-border-width);
    border-style: var(--np-border-style);
    border-color: var(--np-border-color);
    border-radius: var(--np-border-radius);
    gap: var(--np-gap-p);
}

/* this is a numpad item, hosting a numpad button */
.sb-numpad-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background-color: var(--np-item-bg);
}  

.sb-numpad-item3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: var(--np-item3-bg);
}  

.sb-numpad-item4 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: var(--np-item4-bg);
}  

.sb-numpad-item5 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: var(--np-item5-bg);
}  

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-button {
    background-color: var(--np-button-bg);
    color: var(--np-button-color);
    font-size: var(--np-button-font-size);
    border-width: var(--np-button-border-width);
    border-style: var(--np-button-border-style);
    border-color: var(--np-button-border-color);
    border-radius: var(--np-button-border-radius);
    text-align: center;   /* this works for horizontal alignment */
    vertical-align: center;   /* tried a lot, nothing works */
  }

  /* sb-numpad-button is the very element in the numpad */
.sb-numpad-button-disabled {
  background-color: var(--np-button-bg);
  color: var(--np-button-bg);
  font-size: var(--np-button-disabled-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button3 {
  background-color: var(--np-button3-bg);
  color: var(--np-button-color);
  font-size: var(--np-button3-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button3-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button4 {
  background-color: var(--np-button4-bg);
  color: var(--np-button-color);
  font-size: var(--np-button4-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button4-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button5 {
  background-color: var(--np-button5-bg);
  color: var(--np-button-color);
  font-size: var(--np-button5-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button5-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button4-disabled {
background-color: var(--np-button-border-color);
color: var(--np-button3-bg);
font-size: var(--np-button4-font-size);
border-width: var(--np-button-border-width);
border-style: var(--np-button-border-style);
border-color: var(--np-button-border-color);
border-radius: var(--np-button-border-radius);
text-align: center;   /* this works for horizontal alignment */
vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button9 {
  background-color: var(--np-button-bg);
  color: var(--np-button-color);
  font-size: var(--np-button9-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button9-disabled {
background-color: var(--np-button-border-color);
color: var(--np-button3-bg);
font-size: var(--np-button9-font-size);
border-width: var(--np-button-border-width);
border-style: var(--np-button-border-style);
border-color: var(--np-button-border-color);
border-radius: var(--np-button-border-radius);
text-align: center;   /* this works for horizontal alignment */
vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button {
  background-color: var(--np-button-bg);
  color: var(--np-button-color);
  font-size: var(--np-button-font-size);
  border-width: var(--np-button-border-width);
  border-style: var(--np-button-border-style);
  border-color: var(--np-button-border-color);
  border-radius: var(--np-button-border-radius);
  text-align: center;   /* this works for horizontal alignment */
  vertical-align: center;   /* tried a lot, nothing works */
}

/* sb-numpad-button is the very element in the numpad */
.sb-numpad-generic-button-disabled {
background-color: var(--np-button-border-color);
color: var(--np-button3-bg);
font-size: var(--np-button-font-size);
border-width: var(--np-button-border-width);
border-style: var(--np-button-border-style);
border-color: var(--np-button-border-color);
border-radius: var(--np-button-border-radius);
text-align: center;   /* this works for horizontal alignment */
vertical-align: center;   /* tried a lot, nothing works */
}

.sb-progressbar-and-rem-secs {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'progressbar rem_secs';
}

.sb-progressbar-and-rem-secs > div {
    display: block;
    width: 100%;
    height: 100%;
}

.sb-progressbar {
    grid-area: progressbar;
}

.sb-rem-secs {
    grid-area: rem_secs;
}