:root {
  --bb-sb-select-color: white;
  --bb-sb-select-bg: gray;
  --bb-sb-select-font-size: 8vmin;
  --bb-sb-select-border-style: solid;
  --bb-sb-select-border-width: 1px;
  --bb-sb-select-border-color:  white;
  --bb-sb-select-border-radius: 1vmin;

  --bb-sb-button-color: white;
  --bb-sb-button-bg: gray;
  --bb-sb-button-font-size: 1.5vw;
  --bb-sb-button-border-style: solid;
  --bb-sb-button-border-width: 1px;
  --bb-sb-button-border-color:  white;
  --bb-sb-button-border-radius: 1vmin;

  --bb-sb-control-focus-bg: var(--billberries-blue); /* old: yellowgreen */
  --bb-sb-control-focus-color: black;
}

.sb-control-device {
  display: block;
  width: inherit;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.sb-control-device > select {
  display: inline;
  width: 18vw;

  background: var(--bb-sb-select-bg);
  color: var(--bb-sb-select-color);
  font-size: var(--bb-sb-button-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--bb-sb-select-border-style);
  border-width: var(--bb-sb-select-border-width);
  border-radius: var(--bb-sb-select-border-radius);
  border-color: var(--bb-sb-select-border-color);
}

.sb-control-device > select:focus {
  background: var(--bb-sb-control-focus-bg);
  color: var(--bb-sb-control-focus-color);
}

.bb-sb-control-container {
  /* display: block; Levin Ramirez 29.12.2023 */
  width: 100%;
  height: 100%;
  /* padding: 0.5vmin; Levin Ramirez 29.12.2023 */
  color: white;
  /* Levin Ramirez 29.12.2023 ...*/
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.bb-sb-control-button-container {
  display: block;
  width: 100%;
  height: 100%;
  /* padding: 0.5vmin; */
  color: white;
}

.bb-sb-control-button-container > button {
  background: var(--bb-sb-button-bg);
  color: var(--bb-sb-button-color);
  font-size: var(--bb-sb-button-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--bb-sb-button-border-style);
  border-width: var(--bb-sb-button-border-width);
  border-radius: var(--bb-sb-button-border-radius);
  border-color: var(--bb-sb-button-border-color);
}

/* Alter the hover effect of general button elements */
.bb-sb-control-button-container > button:hover {
  color: var(--billberries-blue);
  border-color: var(--billberries-blue);
  background-color: transparent;
}

.bb-sb-player-item-last > select {
  display: inline;

  background: var(--bb-sb-select-bg);
  color: var(--bb-sb-select-color);
  font-size: var(--bb-sb-select-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--bb-sb-select-border-style);
  border-width: var(--bb-sb-select-border-width);
  border-radius: var(--bb-sb-select-border-radius);
  border-color: var(--bb-sb-select-border-color);
}

.bb-sb-player-item-last > select:focus {
  background: var(--bb-sb-control-focus-bg);
  color: var(--bb-sb-control-focus-color);
}

.bb-sb-player-item-lastf1 > select {
  display: inline;

  background: var(--bb-sb-select-bg);
  color: var(--bb-sb-select-color);
  font-size: var(--bb-sb-select-font-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  border-style: var(--bb-sb-select-border-style);
  border-width: var(--bb-sb-select-border-width);
  border-radius: var(--bb-sb-select-border-radius);
  border-color: var(--bb-sb-select-border-color);
}

.bb-sb-player-item-lastf1 > select:focus {
  background: var(--bb-sb-control-focus-bg);
  color: var(--bb-sb-control-focus-color);
}

.bb-sb-control-button-container > button:focus {
  background: var(--bb-sb-control-focus-bg);
  color: var(--bb-sb-control-focus-color);
}

.bb-sb-startbuttonmessage {
  color: var(--bb-sb-control-focus-color);
  font-size: var(--bb-sb-button-font-size);
}

.bb-button-refresh{
  border-radius: 0;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  line-height: 1;
}

.bb-button-refresh:hover{
	color: var(--billberries-blue);
	border-color: var(--billberries-blue);
}

.bb-button-print{
  border-radius: 0;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  line-height: 1;
}

.bb-button-print:hover{
	color: var(--billberries-blue);
	border-color: var(--billberries-blue);
}

.bb-button-download{
  border-radius: 0;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  line-height: 1;
}

.bb-button-download:hover{
	color: var(--billberries-blue);
	border-color: var(--billberries-blue);
}