#context_tab
{
	left: 5%;
	top: 15%;
}

#i_button{

	left: 1%;
	bottom: 5%;
}

#slide_no
{
	width: 1px;
	float: left;
	font-size: 2em;
	font-weight: bolder;
}

/*#tutorial_button
{
	pointer-events: all;
	float:right; 
	margin-right: 10px;
	margin-top: 5px;
}*/

#skip_button
{
	box-shadow: 0 0 10px black;
	float: right;
	font-size: 1.1em;
	font-weight: bolder;
}

#slides
{
  z-index: 12;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh;
  width: 100%;
  position: absolute;
  text-align: center;
  background-color: transparent ;

}

#slide_previous
{
	box-shadow: 0 0 10px black;
	user-select: none;
	clear: both;
	float: left;
	margin-top: 20%;
	height: 40px;
	width: 40px;
}

#slide_next
{
	box-shadow: 0 0 10px black;
	user-select: none;
	float: right;
	margin-top: 20%;
	height: 40px;
	width: 40px;
}

#dist_tag
{
	user-select: none;
	pointer-events:none;
	text-align: center;
	color: black;
	font-size: 2em;
}


#curr_dis_tag
{
	pointer-events:none;
	height: 50px;
	width: 50px;
	left: -65px;
	top: -90px;
	text-align: center;
	overflow-wrap: break-word;
	font-weight: bolder;
	font-size: 0.8em;
	color: white;
	position: absolute;
}
#new_dis_tag
{
	pointer-events:none;
	height: 50px;
	width: 50px;
	left: 15px;
	top: -90px;
	text-align: center;
	overflow-wrap: break-word;
	font-weight: bolder;
	font-size: 0.8em;
	color: white;
	position: absolute;
}
#scroll_box_heap
{
	z-index: 10;
  position:absolute ;
  background-color: gray;
  height: 280px;
  width: auto;
  width: 300px;
  left: 20px;
  top: 280px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgba(255, 0, 0, 0.4);;
}
#scroll_box{
	z-index: 10;
	position: absolute;
	height: 280px;
	width: 150px;
	background: ghostwhite;
	left: 20px;
	top: 280px;
	border-radius: 3px;
	border: 4px solid seagreen;
	overflow-y: scroll;
	background-color: rgba(255, 0, 0, 0.4);;
}

#center_button
{
	font-size: 1.3em;
	font-weight: bold;
	position: absolute;
	cursor: pointer;
	left: 20px;
	width: 50px;
	height: 50px;
	top: 20px;
	border-radius: 50%;
	user-select: none;
	box-shadow: 1px 2px black;
	background: floralwhite;
	border: 5px solid darkred;
	color: red;
	text-align: center;
	padding: 3px;
	transition-property: background-color, letter-spacing,transform,font-size;
 	transition-duration: 0.5s ,0.3s,0.3s,0.3s;
 	transition-timing-function: ease, ease,ease;
}

#center_button:hover
{
	background-color: #67e4de;
	font-size: 1.7em;
	
}

#dialog
{
	z-index: 11;
	position: fixed;
	left: 100px;
	top: 300px;
	width: 50%;
	background-color: lightgreen;
	color: black;
	font-weight: bolder;
	border: 4px solid yellow;
	border-radius: 10px;
}

#coding_area
{
	z-index: 10;
	transition-property: right;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	color: #33001a;
	font-weight: bolder;
	overflow:none;
	border-radius: 10px;
	width: 25%;
	min-width: 30px;
	position: fixed;
	background: #cc6699;
	box-sizing: border-box;
	border: 5px solid darkviolet;
	padding: 30px;
	bottom: 20px;
}

#coding_area>button:hover
{
	background: red;
}

#coding_area>div
{
	font-weight: bold;
	margin-bottom: 5px;
}
#coding_area>button
{
	width: 30px;
	height: 60px;
	position: absolute;
	left: -35px;
	top: 160px;
	border-radius: 10px;
	border: 4px solid black;
}

#coding_area>div>button:hover
{
	background: red;
}

#coding_area>div>button
{
	height: 30px;
	margin-right: 7px;
	left: -35px;
	top: 160px;
	font-weight: bolder;
	border-radius: 10px;
	border: 4px solid black;
}

#code_editor
{
	box-sizing: border-box;
	spellcheck : "false";
	border-radius: 10px;
	height: 200px;
	width: 100%;
	background: #52527a;
	color: orange;
	font-size: 1.5em;
	font-weight: bolder;

}

#tools_panel
{
	top:100px;
}


#animation_panel
{
	transition-property: right;
	transition-duration: 0.3s;
	/*right: -500px;*/ 
	top:100px;
}

#animation_panel>button{
	float: left; 
	height: 100%; 
	width: 30px; 
	margin-right: 20px;
}

#code_editor_output
{
	box-sizing: border-box;
	border-radius: 10px;
	background: #52527a;
	width: 100%;
	color: orange;
	font-size: 1.5em;
	font-weight: bolder;

}

body
{
	width: 500vh;
}

#graph-container
{
	box-sizing: border-box;
	overflow: hidden; 
	position :relative;
	background: #cccccc;
	width: 100%;
	height: 100vh; 
	padding-left: 0px;
}

#draw_area
{
	margin:0px; 
	padding: 0px;
	overflow: visible;
	pointer-events: none;
	overflow: visible;
}

#draw_area_container
{
	pointer-events: none;
	transform-origin: top left; 
	position: absolute;
}

#control-panel
{
	z-index: 10;
	border-radius: 10px;
	user-select: none;
	position: relative;
	width:550px ;
	background: palevioletred;
	box-sizing: border-box;
	border: 5px solid lightgreen;
	height: 120px;
	margin: 5px 5px 5px 0px;
	color: darkgreen;
	padding: 10px;
	padding-top: 5px;
}

#graph
{
	position: absolute;
	left: 0px;
	top: 0px;
	transform-origin: top left;
	pointer-events: none;
	width: 100px;
	height: 100px;
	margin:0px; 
	padding: 0px;  
}