:root {
    /* --np-button4-font-size: 9vmin; */
    /* --np-button3-font-size: 9vmin; */

    --s-font-size: 2.5vmin;
    --xs-font-size: 4vmin;
    --xxs-font-size: 4.5vmin;

    --l-font-size: 3vmin;
    --xl-font-size: 7vmin;
    --xxl-font-size: 12vmin;
    --xxxl-font-size: 15vmin;

    --bb-sb-progress-bar-padding-top: 0vmin;    
    --bb-sb-progress-bar-padding-bottom: 0vmin;
    --bb-sb-progress-bar-padding-left: 0vmin;
    --bb-sb-progress-bar-padding-right: 0vmin;
    --bb-sb-progress-bar-column-gap: 2px;
    --bb-sb-progress-bar-row-gap: 2px;
    --bb-sb-progress-bar-background-color: black;
    --bb-sb-progress-bar-justify-content: space-evenly;
    --bb-sb-progress-bar-justify-items: stretch;
    --bb-sb-progress-bar-align-content: space-evenly;
    --bb-sb-progress-bar-align-items: center;

    --rem-secs-font-size: 7vmin;
    --rem-secs-text-align: center;
    --rem-secs-border-style: none;
    --rem-secs-border-width: 1px;
    --rem-secs-border-radius: 1vmin;
    --rem-secs-border-color: var(--item-border-color);
    
    --player-last-font-size: var(--xxxl-font-size);
    --player-last-color: inherit;
    --player-last-text-align: inherit;
    --player-last-margin-left: 0vmin;
    --player-last-margin-right: 0vmin;
    --player-last-margin-top: 0vmin;
    --player-last-margin-bottom: 0vmin;
    --player-last-padding-left: 0vmin;
    --player-last-padding-right: 0vmin;
    --player-last-padding-top: 0vmin;
    --player-last-padding-bottom: 0vmin;
    --player-last-border-style: none;                     /* today: none */
    --player-last-border-width: 1px;
    --player-last-border-color: var(--item-border-color);
    --player-last-border-radius: 1vmin;
  
    --player-lastf1-font-size:  var(--xxxl-font-size);
    --player-lastf1-color: inherit;
    --player-lastf1-text-align: inherit;
    --player-lastf1-margin-left: 0vmin;
    --player-lastf1-margin-right: 0vmin;
    --player-lastf1-margin-top: 0vmin;
    --player-lastf1-margin-bottom: 0vmin;
    --player-lastf1-padding-left: 0vmin;
    --player-lastf1-padding-right: 0vmin;
    --player-lastf1-padding-top: 0vmin;
    --player-lastf1-padding-bottom: 0vmin;
    --player-lastf1-border-style: none;                     /* today: none */
    --player-lastf1-border-width: 1px;
    --player-lastf1-border-color: var(--item-border-color);
    --player-lastf1-border-radius: 1vmin;
  
    --player-first-font-size: var(--xxs-font-size);
    --player-first-color: inherit;
    --player-first-text-align: inherit;
    --player-first-margin-left: 0vmin;
    --player-first-margin-right: 0vmin;
    --player-first-margin-top: 0vmin;
    --player-first-margin-bottom: 0vmin;
    --player-first-padding-left: 0vmin;
    --player-first-padding-right: 0vmin;
    --player-first-padding-top: 0vmin;
    --player-first-padding-bottom: 0vmin;
    --player-first-border-style: none;                     /* today: none */
    --player-first-border-width: 1px;
    --player-first-border-color: var(--item-border-color);
    --player-first-border-radius: 1vmin;
  
    --player-score-inningpts-font-size: var(--xxxl-font-size);
    --player-score-inningpts-color: orange;
    --player-score-inningpts-text-align: inherit;
    --player-score-inningpts-border-style: none;
    --player-score-inningpts-border-width: 1px;
    --player-score-inningpts-border-color: var(--cols-bg);
    --player-score-inningpts-border-radius: 1vmin;
  
    --player-score-pts-font-size: var(--xxxl-font-size);
    --player-score-pts-color: inherit;
    --player-score-pts-text-align: inherit;
    --player-score-pts-border-style: none;
    --player-score-pts-border-width: 1px;
    --player-score-pts-border-color: var(--cols-bg);
    --player-score-pts-border-radius: 1vmin;
  
    --player-score-set-font-size: var(--xl-font-size);
    --player-score-set-color: inherit;
    --player-score-set-text-align: inherit;
    --player-score-set-border-style: none;
    --player-score-set-border-width: 1px;
    --player-score-set-border-color: var(--cols-bg);
    --player-score-set-border-radius: 1vmin;

    --player-stats-font-size: var(--xxs-font-size);
    --player-stats-color: inherit;
    --player-stats-text-align: inherit;
    --player-stats-border-style: none;
    --player-stats-border-width: 1px;
    --player-stats-border-color: var(--cols-bg);
    --player-stats-border-radius: 1vmin;

    --player-stats-average-font-size: var(--xxs-font-size);
    --player-stats-average-color: inherit;
    --player-stats-average-text-align: inherit;
    --player-stats-average-border-style: none;
    --player-stats-average-border-width: 1px;
    --player-stats-average-border-color: var(--cols-bg);
    --player-stats-average-border-radius: 1vmin;

    --player-stats-highrun-font-size: var(--xxs-font-size);
    --player-stats-highrun-color: inherit;
    --player-stats-highrun-text-align: inherit;
    --player-stats-highrun-border-style: none;
    --player-stats-highrun-border-width: 1px;
    --player-stats-highrun-border-color: var(--cols-bg);
    --player-stats-highrun-border-radius: 1vmin;

    --player-stats-innings-font-size: var(--xxs-font-size);
    --player-stats-innings-color: orange;
    --player-stats-innings-text-align: inherit;
    --player-stats-innings-border-style: none;
    --player-stats-innings-border-width: 1px;
    --player-stats-innings-border-color: var(--cols-bg);
    --player-stats-innings-border-radius: 1vmin;

    --score-sets-explain-font-size: var(--l-font-size);
    --score-sets-explain-color: white;
    --score-sets-explain-text-align: center;
    --score-sets-explain-border-style: none;
    --score-sets-explain-border-width: 1px;
    --score-sets-explain-border-radius: 1vmin;
    --score-sets-explain-border-color: var(--cols-bg);
      
    --score-points-explain-font-size: var(--l-font-size);
    --score-points-explain-color: white;
    --score-points-explain-text-align: center;
    --score-points-explain-border-style: none;
    --score-points-explain-border-width: 1px;
    --score-points-explain-border-radius: 1vmin;
    --score-points-explain-border-color: var(--cols-bg);

    --score-innings-explain-font-size: var(--l-font-size);
    --score-innings-explain-color: orange;
    --score-innings-explain-text-align: center;
    --score-innings-explain-border-style: none;
    --score-innings-explain-border-width: 1px;
    --score-innings-explain-border-radius: 1vmin;
    --score-innings-explain-border-color: var(--cols-bg);

    --bb-grid-font-size: 2.5vmin;
    --bb-grid-color: white;
    --bb-grid-background-color: gray;

    --bb-grid-margin: 0vmin;
    --bb-grid-margin-left: var(--bb-grid-margin);
    --bb-grid-margin-right: var(--bb-grid-margin);
    --bb-grid-margin-top: var(--bb-grid-margin);
    --bb-grid-margin-bottom: var(--bb-grid-margin);

    --bb-grid-padding: 5px;
    --bb-grid-padding-left: var(--bb-grid-padding);
    --bb-grid-padding-right: var(--bb-grid-padding);
    --bb-grid-padding-top: var(--bb-grid-padding);
    --bb-grid-padding-bottom: var(--bb-grid-padding);

    --bb-grid-column-gap: 3px;
    --bb-grid-row-gap: 3px;

    --bb-grid-border-style: none;
    --bb-grid-border-width: 1px;
    --bb-grid-border-color: var(--billberries-blue);
    --bb-grid-border-radius: 1vmin;

    --bb-grid-justify-content: space-evenly;        /* The justify-content property is a sub-property of the Flexible Box Layout module. */ 
                                                    /* It defines the alignment along the main axis. It helps distribute extra free space leftover when */
                                                    /* either all the flex items on a line are inflexible, or are flexible but have reached their maximum size */
                                                    /* valid: space-evenly, space-between, space-around, start, center */

    --bb-grid-align-content: space-evenly;          /* The justify-content property is a sub-property of the Flexible Box Layout module. */ 
                                                    /* It defines the alignment along the main axis. It helps distribute extra free space leftover when */
                                                    /* either all the flex items on a line are inflexible, or are flexible but have reached their maximum size */
                                                    /* valid: space-evenly, space-between, space-around, start, center */

    --bb-grid-justify-items: stretch;               /* The justify-items property aligns grid items by distributing free space in the columns (not the overall container) */
                                                    /* valid: stretch, start, center, end */

    --bb-grid-align-items: center;                  /* The CSS property align-items is for vertical positioning of the items in a grid. */
                                                    /* valid: stretch, start, center, end */
                                                    /* valid: stretch, start, center, end */
}

.bb_grid_landscape {
    padding-top: var(--bb-grid-padding-top);
    padding-bottom: var(--bb-grid-padding-bottom);
    padding-left: var(--bb-grid-padding-left);
    padding-right: var(--bb-grid-padding-right);

    grid-column-gap: var(--bb-grid-column-gap);
    grid-row-gap: var(--bb-grid-row-gap);
    background-color: var(--bb-grid-background-color);

    justify-content: var(--bb-grid-justify-content);
    justify-items: var(--bb-grid-justify-items);
    align-content: var(--bb-grid-align-content);
    align-items: var(--bb-grid-align-items);
}

.bb_grid_landscape > div {
    width: 100%;
    height: 100%;
  
    border-style: none;
    border-width: 1px;
    border-color: hotpink;
    background-color: black;

    /* align-content: center; */
}

.pts_p1 { 
    text-align: center;
}
.pts_p2 { 
    text-align: center;
}
.break_p1 { 
    text-align: center;
}
.break_p2 {
    text-align: center;
}
.inning_p1 { 
    text-align: center;
}
.inning_p2 { 
    text-align: center;
}
.avg_p1 { 
    text-align: center;
}
.avg_p2 { 
    text-align: center;
}
.hr_p1 { 
    text-align: center;
}
.hr_p2 { 
    text-align: center;
}

.lds-ellipsis {
    /* change color here */
    color: inherit;
}

.lds-ellipsis,
.lds-ellipsis div {
    box-sizing: border-box;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}

.lds-ellipsis div {
    position: absolute;
    top: 30%;
    left: 1;
    right: 1;
    width: 2.5vmin;
    height: 2.5vmin;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 1vw;
    animation: lds-ellipsis1 1s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 1vw;
    animation: lds-ellipsis2 1s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 4vw;
    animation: lds-ellipsis2 1s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 7vw;
    animation: lds-ellipsis3 1s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(3vw, 0);
    }
}

.bb-sb-progress-bar-box {
    /* display: block; */
    height: 100%;
    width: 100%;
    border-radius: 10%;
}

.bb-sb-progress-bar-40 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(40, 1fr);
    grid-template-rows: 1fr;

    padding-top: var(--bb-sb-progress-bar-padding-top);
    padding-bottom: var(--bb-sb-progress-bar-padding-bottom);
    padding-left: var(--bb-sb-progress-bar-padding-left);
    padding-right: var(--bb-sb-progress-bar-padding-right);

    grid-column-gap: var(--bb-sb-progress-bar-column-gap);
    grid-row-gap: var(--bb-sb-progress-bar-row-gap);
    background-color: var(--bb-sb-progress-bar-background-color);

    /* justify-content: var(--bb-sb-progress-bar-justify-content);
    justify-items: var(--bb-sb-progress-bar-justify-items);
    align-content: var(--bb-sb-progress-bar-align-content);
    align-items: var(--bb-sb-progress-bar-align-items); */

    place-content: center;
}

.sb-overlay-progress-item {
    /* position: relative;
    display: inline-block;
    box-sizing: border-box; */
    background-color: green;
    /* height: 50px; */
}

@media all and (orientation: landscape) {
    .sb-numpad-grid-l {
        height: 90%;
        justify-content: var(--bb-grid-justify-content);
        justify-items: var(--bb-grid-justify-items);
        align-content: space-evenly;
        align-items: stretch;
        font-size: var(--xxl-font-size);;
    }

    .sb-numpad-generic-button4 {
        font-size: var(--xxl-font-size);;
    }
    .sb-numpad-generic-button3 {
        font-size: var(--xxl-font-size);;
    }
}

@media all and (orientation: portrait) {
    .sb-numpad-grid-p {
        height: 90%;
        justify-content: var(--bb-grid-justify-content);
        justify-items: var(--bb-grid-justify-items);
        align-content: space-evenly;
        align-items: stretch;
    }
    .sb-numpad-generic-button4 {
        font-size: var(--xl-font-size);;
    }
    .sb-numpad-generic-button3 {
        font-size: var(--xl-font-size);;
    }
}