.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; 
}

/* The slider handle */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.row {
	width: 100%;
	#text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.block {
	width: 33%;
	#display: inline-block;
}
.text-container {
	background-color: #6699CC;
	padding: 5px;
	border: 2px solid #ccc;
	width: 50px;
	margin: 5px auto;
	text-align: center;
}
#ideogram {
	height: 380px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	resize: both;
	position: relative;
}



/* NEW */



/* ── SLIDER ── */
.slidecontainer { width: 100%; }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #e0e0e0;
  outline: none;
  border-radius: 2px;
}
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #801818;
  border-radius: 50%;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #991e1e;
  border-radius: 50%;
  cursor: pointer;
}

/* ── ROW/BLOCK ── */
.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block { width: 33%; }
.text-container {
  background-color: #FFEBEE;
  padding: 5px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  width: 50px;
  margin: 5px auto;
  text-align: center;
  font-size: 0.85rem;
}

/* ── IDEOGRAM ── */
#ideogram {
  height: 380px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  resize: both;
  position: relative;
}
#ideogram_svg {
  width: 100%;
  overflow-x: auto;
  padding: 16px 0;
}