#debugger
{
	position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-family: Arial;
    font-size: 15px;
    color: #fff;
    box-shadow: 0px 0px 11px #333;
    width: 70%;
}

#tempJump
{
	position: absolute;
    width: 55px;
    height: 20px;
    top: 10px;
    right: 263px;
    background: #116be6;
    padding: 5px 3px;
    text-align: center;
    font-size: 16px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

#goNum
{
	position: absolute;
    width: 100%;
    color: #000;
    padding: 2%;
    margin-bottom: 1%;
    border-radius: 5px 0 0 5px;
    border: none;
    height: 15px;
}

#info
{
clear:both;
background:#333333;
padding:0.5%;
}
#scorm
{
clear:both;
margin-top:1%;
background:#5b5b5b;
padding:0.5%;
word-wrap: break-word;
}

#nextBtn
{
	float: right;
    font-family: Arial;
    font-size: 13px;
	background: #116be6; 
   /*  background: #116be6; */
	background-repeat: no-repeat;
    background-position: 76px;
    padding: 0 0 0 7%;
    line-height: 30px;
    width: 80px;
    text-align: left;
    margin-right: 12px;
    margin-top: 10px;
    border-radius: 4px;
}

#backBtn
{
	float: left;
    font-family: Arial;
    font-size: 13px;
    background: #116be6;
    background-repeat: no-repeat;
    background-position: 5px;
    padding: 0 6% 0 0;
    line-height: 30px;
    width: 80px;
    text-align: right;
    margin-top: 10px;
    border-radius: 4px;
    margin-left: 0px;
}


.top_part_debugger{
	position: absolute;
    width: 708px;
    height: 82px;
}

.yellow_patch{
	    position: absolute;
    width: 211px;
    height: 0;
    border-style: solid;
    border-width: 0px 0 51px 37px;
    border-color: transparent transparent #fbbc05 transparent;
    right: 0;
    top: 0;
}

.black_patch{
	position: initial;
	width: 76%;
	height: 0;
	border-style: solid;
	border-width: 51px 38px 0 0;
	border-color: #000 transparent transparent transparent;
}

.input_div {
	position: absolute;
    width: 354px;
    top: 10px;
    left: 15px;
    height: 30px;
}

.play_pause_sec{
	position: absolute;
    top: 51px;
    left: 17px;
    width: 425px;
}

.play_pause_sec li{
	float: left;
    margin-left: 10px;
}

.play_pause_sec li:nth-child(1){
    margin-left: 0;
}

#debug_sliderBar{
	width: 358px;
    height: 8px;
    position: relative;
    cursor: default !important;
    margin-top: 5px;
    margin-right: 6px;
}

.debug_sliderBar {
   width: 360px;
    height: 6px;
    position: absolute;
    border: 2px solid #fff;
    border-radius: 10px;
}

.debug_control {
    right: -1px;
    width: 205px;
    top: 4px;
}

.debug_progress {
   width: 100%;
    height: 6px;
    position: relative;
    border-radius: 10px;
}

.debug_progress span {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.debug_bufferBar {
    width: 0;
    background: #fff;
}

.debug_timeBar {
    width: 50%;
    background: #fbbc05;
    border-radius: 10px;
}

.btm_part_debugger{
    position: absolute;
    top: 54px;
    width: 709px;
    background: rgba(0, 0, 0, 0.73);
    border-radius: 0 0 8px 8px;
    height: auto;
    padding: 10px 10px;
}


.first_part, .secound_part, .third_part{
	background: #fff;
    width: 98%;
    border-radius: 7px;
    padding: 5px 6px;
    margin-bottom: 10px;
    float: left;
}

.html_file_no{
	float: left;
    margin-right: 18px;
}

.html_file_no p, .current_file_no p, .audio_file_no p, .secound_part p, .third_part p{
	color: #333;
    font-size: 12px;
}

.html_file_no span, .audio_file_no span{
	color: #0041ff;
    font-size: 14px;
}

.current_file_no{
	float: left;
    color: #000;
    margin-right: 15px;
}

.debu_module_name{ 
	float: left;
    margin-right: 12px;
	font-size: 14px;
}
.debu_module_name span{  
	color: #0041ff;
}
.debu_topic_name span{  
	color: #0041ff;
}
.debu_slide_name span{  
	color: #0041ff;
}
.debu_topic_name{
	float: left;
    margin-right: 12px;
	font-size: 14px;
}

.debu_slide_name{
	float: left;
	font-size: 14px;
}

.debu_title_txt{
	float: left;
	margin-right: 14px;
	flex-basis: 100%;
}

.debu_pagination-number{
	float: left;
    color: #000;
}

.debu_menu_status{
	float: right;
    color: #333;
    font-size: 12px;
}
.debu_menu_status ul li{
    float: left;
    margin-left: 13px;
}
.debu_menu_status ul li img{
	float: left;
    margin-top: 4px;
    margin-right: 5px;
}

.debu_menu_status ul li span{
	float: left;
}

.debu_course_status{
	float: left;
    clear: both;
    margin-top: 4px;
	width: 649px;
}
.debu_dots{
	float: left;
    margin-right: 6px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    font-size: 500%;
    position: relative;
   /* box-shadow: inset -10px -10px 100px #dcdcde, 0px 0px 0px #dcdcde, inset 0px 0px 10px #888;*/
    display: inline-block;
    margin: 1%;
	background-color: #dcdcde;
	
}
.debu_completed{
	/* float: left;
    margin-right: 6px; */
	background-color: #359c23;
}
.debu_not_started{
	background-color: #dcdcde;
	
}
.debu_in_progress{
	/* float: left;
    margin-right: 6px; */
	background-color: #ff0707;
}

.debu_option{
	float: left;
	/* clear: both; */
	color: #000;
	font-size: Clamp(0.8rem, 0.9vw, 2.5rem);
	width: 30%;
	margin-right: 2%;
	border-right: 1px solid #bfbfbf;
}
.debu_option:nth-child(5){
	margin-right: 0;
    border-right: 0;
}
.debu_option span{
	color: #0041ff;
    width: 280px;
    float: left;
}

.third_part{
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	gap: 0.5em;
}
.vLine{
    border-left: 2px solid #666;
    height: 2.04vw;
    position: absolute;
    margin-left: 0;
    top: 4%;
    left: 14%;
 }
 .vLine2{
    border-left: 2px solid #666;
    height: 2.04vw;
    position: absolute;
    margin-left: 0;
    top: 4%;
    left: 42%;
 }
 .txtColor{
	color:black;
 }