
.animation-control-overlay-class {
    position:fixed;
	display:block;
    left: 0;
    top: 0;
	font-size:12px;
	margin-left: 1%;
    margin-top: 1px;
	margin-bottom:1px;
    height: 200px;
    width: 0px;
	max-width:550px;;
    z-index: 8; /* Sit on top */
    background-color: rgba(0,0,0, .9);
	border-style:solid;
	border-width:0px;
	border-radius:5px;
	border-color:blueviolet;
    /*overflow: auto;  /* Enable or Disable horizontal scroll */
	overflow:auto;
    transition: 0.3s; /* 0.5 second transition effect to slide in or slide down the */
		
}

.animation-control-title-class {
	background:none;
    color:white;
}

/* Position the close button (top right corner) */
.animation-control-overlay-class .closeAnimationControlbtn {
    position: absolute;
	display:block;
	color:white;
    top: 0px;
    right: 5px;
    font-size: 25px;
	text-decoration:none;
}


/* Top Menu Buttons For Animation Control */
.horizontal-animation-list-class {
	position:relative;
	display:flex;
	margin:0px;
	padding:0px;
	margin-top:5px;
	margin-left:5px;
	list-style: none;
	background-color:grey;
}

.horizontal-animation-list-class > li {
    float:left;
   	margin-left:5px;
    height: 100%;
    color: white;
    text-decoration: none;
	background:none;
}

.animation-checkbox-div-class {
    display: flex;
    flex-direction: column; /* Stack the checkboxes vertically */

}

.animation-buttons-class {
    width: 25px;
	margin:0px;
    opacity: 1;
}

#animation-audio-list-id {
	font-size: 12px;
	color: black;
	margin-top: 5px;
}


#scrollbarContainer {
	width: 80%;
	margin: 10px auto;
	position: relative;
}

#scrollbar {
	width: 100%;
	height: 12px;
	margin-top:-5px;
	background-color: #eee;
	position: absolute;
	cursor: pointer;
}

#scrollThumb {
	width: 20px;
	height: 100%;
	background-color: #3498db;
}

#scrollIndicator {
	position: absolute;
	width:5px;
	height:100%;
	background-color:rgb(0, 68, 193);
}

/* Red Light Record Indicator*/
#flashing-light {
    width: 10px;
    height: 10px;
	border-radius: 50%;
    background-color: red;
	opacity: 0; /* Initial state: not visible */
    animation: none; /* Flash every 1 second */
}

@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}