.ettt8 .grid_container{
	background-color: #b2b7be;
}
.ettt8 .box_01_10h__cell-framed > div,.ettt8 .box_01_10h__cell-unframed >div {
	background-color: white;
	width: 100%;
	display: flex;
	aspect-ratio: 1 / 1;
}

.ettt8 [class^="circle_"]{
	width: 80%;
	height: 80%;
	border-radius: 50%;
}
.ettt8 .circle_red_01h {
	background-color: red;
}
.ettt8 .circle_blue_01h {
	background-color: blue;
}
.ettt8 .circle_yellow_01h {
	background-color: yellow;
}
.ettt8 .circle_green_01h {
	background-color: green;
}
.ettt8 .circle_pink_01h {
	background-color: #FFC0CB;
}
.ettt8 .circle_orange_01h {
	background-color: orange;
}
.ettt8 .circle_purple_01h {
	background-color: purple;
}
.ettt8 .circle_red_01h {
	background-color: red;
}
.ettt8 .circle_aqua_01h {
	background-color: aqua;
}
.ettt8 .circle_mint_01h {
	background-color: #3EB489;
}
.ettt8 .circle_lilac_01h {
	background-color: #C8A2C8;
}
.ettt8 .circle_coral_01h {
	background-color: coral;
}
.ettt8 .circle_peach_01h {
	background-color: #FFE5B4;
}
.ettt8 .circle_violet_01h {
	background-color: violet;
}
.ettt8 .circle_gold_01h {
	background-color: gold;
}
.ettt8 .circle_cyan_01h {
	background-color: cyan;
}
.ettt8 .circle_indigo_01h {
	background-color: indigo;
}
.ettt8 .rekenrek-container, .ettt8 .rekenrek-container__2 {
	border: 2px solid lightblue;
	min-height: 80px;
	border:5px solid black;
	position: relative;
	background: none;
}
.ettt8 .rekenrek__to-move{
	display: inline-block;
	margin: 0;
	z-index: 1;
}
.ettt8 .rekenrek__move-items{
	margin-right: auto;
}
.ettt8 .rekenrek-ball{
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: inline-block;
	line-height: 2.5rem;
	text-align: center;
	user-select: none; /* Prevent text selection */
	cursor: grab; /* Change cursor to indicate draggable item */
	border:2px solid black;
	z-index: 1;
	background-color: white;
}
.ettt8 .white_ball{
	background-color: white;
}
.ettt8 .rekenrek__line{
	display: flex;
	width: 100%;
	justify-content: end;
	background: none;
}
.ettt8 .rekenrek__line::before{
	content: "";
	border-top: 2px solid black;
	width: 100%;
	position: absolute;
	left:0;
	top:50%
}

.bkg_0 .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(0, 0%, 100%);     
}
.bkg_1 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(0, 100%, 60%);
}
.bkg_2 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(40, 100%, 55%) ;
}
.bkg_3 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(60, 100%, 50%) ;
}
.bkg_4 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(120, 80%, 45%);
}
.bkg_5 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(200, 100%, 55%) ;
}
.bkg_6 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(330, 100%, 70%) ;
}
.bkg_7 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(45, 100%, 70%) ;
}
.bkg_8 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(160, 70%, 60%);
}
.bkg_9 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(210, 100%, 70%)	 ;
}
.bkg_10 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(270, 100%, 70%) ;
}
.bkg_11 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(70, 90%, 55%);
}
.bkg_12 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(50, 100%, 55%) ;
}
.bkg_13 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(200, 60%, 40%) ;
}
.bkg_14 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(220, 100%, 50%) ;
}
.bkg_15 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color:hsl(290, 90%, 60%);
}
.bkg_16 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(25, 100%, 65%);   /* tangerine */
}
.bkg_17 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(95, 90%, 50%);    /* lime green */
}
.bkg_18 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(185, 90%, 55%);   /* turquoise */
}
.bkg_19 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(320, 100%, 65%);  /* bright magenta */
}
.bkg_20 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(260, 100%, 55%);  /* deep purple */
}
.bkg_21 .rekenrek__line .rekenrek-ball:nth-of-type(-n+5) {
	background-color: hsl(0, 85%, 70%);     /* strawberry pink */
}
.to_move {
  margin-right: auto; /* pushes next ones to the right */
}
.rekenrek__line_container{
	position: relative;
	padding: 15px;
}