/*nav
{
	width: 100%;
	min-height: 25px;
	position: absolute;
	z-index: 6;
	float: left;
}
nav>div
{
	float: right;
	padding: 15px 0px;
	background-color: #eae5e5b8;
}
nav>div>span
{
	padding: 8px;
	text-transform: capitalize;
	cursor: pointer;
}

nav>div>span:hover
{
	background-color: #c3c3c38a;
}*/

nav
{
	width: 5%;
	height: 100vh;
	position: absolute;
	/*background-color: red;*/
	z-index: 2;
	top: 0px;
	right: 0px;
	
}

.nav_bar
{
	width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.nav_bar_content{
	background: #fff;
    padding: 2px 6px 2px 8px;
    border-radius: 20px;
}

.dot_circle
{
	width: 10px;
	height: 10px;
	background-color: #949292;
	border-radius: 50px;
	margin: 10px 0px;
	cursor: pointer;
	position: relative;
}

.active
{
	border: 2px solid #949292;
	background-color: #fff;
	margin-left:-2px;
}

.hide{
	display:none;
	font-family: allerfont;
}

.dot_circle:hover .page_name {
	display: block;
	
	padding: 4px 10px 0px 5px;
	border-radius: 25px 0px 0px 25px;  
	margin-top: -10px;
  }

.page_name
{
	width: 95px;
	height:30px;
	position: absolute;
	right: 15px;
	font-family: allerfont;
	display:none;
	text-align: right;
	font-size:13px;
	background-color: #fff;
}

.page_name_text{
	margin-top: 5px;
}