/******************************************************************************************/
/*** Shotclock                                                                          ***/
/******************************************************************************************/
shotclock {
    display: block;
}

.shotclock-container {
    --progress-color: #4d4d4d;
    --color-green: rgb(89, 170, 62);
    --color-orange: rgb(227, 138, 42);
    --color-red: rgb(227, 81, 30);

    display: block;
    position: relative;
    line-height: 1px;
    text-align: right;
    white-space: nowrap;
    padding: 3px;
    overflow: hidden;

    /*background-color: var(--progress-color);*/
}

.shotclock-container > span.shotclock-value {
    display: inline;
    width: 30px;
    text-align: right;
    vertical-align: bottom;
    color: white;
    padding: 0 8px 0 0;
    font-size: 1em;
    float: left;

    line-height: var(--progress-height);
}

shotclock.out-of-time > .shotclock-container > span.shotclock-value {
    color: var(--color-red);
}

.shotclock-container > progress {
    position: absolute;
    right: 3px;
    appearance: none;

    /*width: calc(100% - 30px);*/

    height: var(--progress-height);
    color: var(--progress-color);
}

.shotclock-container > progress::-webkit-progress-bar {
    background: var(--background-bar);
    background-size: var(--background-bar-size);
    background-position: var(--background-bar-position);

    background-repeat: no-repeat; /* must be defined after the above lines */
}

.shotclock-container > progress::-webkit-progress-value {
    padding: 0;

    background: var(--progress-color);
}

.shotclock-container > div.shotclock-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-style: italic;
    color: white;

    line-height: var(--progress-line-height);
}