/******************************************************************************************/
/*** 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;

  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 {
  appearance: none;

  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); 
}