.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr; /* left to right */
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  background:white;
}	

.context-menu {
	position: relative;
	/* text-align: center; */
	flex-direction: row;
	display:inline-flex; 
	background: #F3F3F3;  /* color of space between menu buttons */
}

.context-menu.active   {border: 1px solid black;}
.context-menu.inactive {border: 0px;}

.parent-flex_column {  
	display: flex;  
	flex-direction: column; /* Stack vertically */  
	gap: 0px;              /* Spacing between divs */  
}

.div1 {  
  padding: 0px;  
}

.div2 {  
	padding: 0px;
	display:none;
}
		
.vertical-slider-container {
  /* Set container dimensions to match rotated slider */
  width: 20px;  /* Width = height of the slider after rotation */
  height: 200px; /* Height = width of the slider after rotation */
  position: absolute;
  margin: 30px; /* offset voor de Volume meter / Voorleessnelheid meter */
  z-index:2;
}

.vertical-slider {
  width: 20px;
  height: 125px;
}

input[type=range] {
	writing-mode: vertical-lr;
	direction: rtl;
	vertical-align: middle;
}

.div_output{
	width: 25px;
	text-align: center;
}

/* button colors */
.btnTTS.inactive, .btnPlay.inactive, .btnPause.inactive, .btnStop.inactive, .btnVolume.inactive, .btnSpeed.inactive, .btnClose.inactive
	{background-color:white; color: black;}

.btnTTS.active, .btnPlay.active, .btnPause.active, .btnStop.active, .btnVolume.active, .btnSpeed.active, .btnClose.active
	{background-color:black; color: white;}

/* icon colors */
.iTTS.inactive   {color: #78A75A;} /* dark green */
.iPlay.inactive  {color: #78A75A;} /* dark green */
.iPause.inactive {color: #78A75A;} /* dark green */
.iStop.inactive  {color: red; background:white;} /* red */
.iVolume.inactive{color: #000000; background:white;} /* black */
.iSpeed.inactive {color: #000000; background:white;} /* black */
.iClose.inactive {color: #000000; background:white;} /* black */

.iTTS.active   {color: #78A75A;} /* dark green */
.iPlay.active  {color: white; background:black;}  /* white_bg_black */
.iPause.active {color: white; background:black;}  /* white_bg_black */
.iStop.active  {color: white; background:black;} /* white_bg_black */
.iVolume.active{color: white; background:black;} /* white_bg_black */
.iSpeed.active {color: white; background:black;} /* white_bg_black */
.iClose.active {color: white; background:black;} /* white_bg_black */