#sidebar_expand_layer{

	display: none;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 10;

}

#sidebar_1st{

	position: fixed;

	z-index: 100;

	display: inline-flex;

	transform: translateX(-280px);

	transition: .5s ease-in;

}

#sidebar_1st.expand{

	transition: .5s ease-in;

	transform: translateX(0px);

}

#sidebar_1st_content{

	height: 100vh;

	width: 280px;

	padding: 2rem 1rem;

	border-top-right-radius: .625rem;

	/*border-bottom-right-radius: .625rem;*/

}

#sidebar_1st_btn{

	cursor: pointer;

	transform: translateY(80%);

	position: relative;

	height: 80px;

	width: 50px;

	border-radius: 0px .625rem .625rem 0px;

	font-size: 20px;

}

#sidebar_1st_btn .over_xl_version, #sidebar_1st_btn .under_xl_version{

	display: block;

	width: 100%;

	height: 100%;

}

#sidebar_1st_btn .over_xl_version{

	display: none;

}

#sidebar_1st_btn > div{

	position: absolute;

	left: 0;

	top: 0;

	z-index: 3;

	padding: .25rem;

}

#sidebar_1st_btn .icon{

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: .175rem .625rem .625rem .175rem;

}

#sidebar_1st_btn:before,

#sidebar_1st_btn:after {

	content: "";

	position: absolute;

	height: 20px;

	width: 10px;

	bottom: 0;

}

#sidebar_1st_btn:before {

	top: -20px;

	left: 0;

	border-radius: 0 0 0 .625rem;

	-moz-border-radius: 0 0 0 .625rem;

	-webkit-border-radius: 0 0 0 .625rem;

}

#sidebar_1st_btn:after {

	bottom: -20px;

	left: 0;

	border-radius: .625rem 0 0 0;

	-moz-border-radius: .625rem 0 0 0;

	-webkit-border-radius: .625rem 0 0 0;

}

#sidebar_1st .primary_item, 

#sidebar_1st .secondary_item{

	font-size: 17px;

	letter-spacing: .25em;

	padding: .75rem .875rem;

	border-radius: .625rem;

	cursor: pointer;

}

#sidebar_1st .primary_item:hover, 

#sidebar_1st .secondary_item:hover{

	transition: .2s ease-in;

}

#sidebar_1st .primary_item{

	width: 100%;

	display: inline-flex;

	align-items: center;

	justify-content: space-between;

}

#sidebar_1st .primary_item.active{

	font-weight: bolder;

}

.primary_content{

	margin: .25rem 0;

}

.secondary_content{

	margin: .375rem 0rem 1rem .8rem;

	padding-left: .5rem;

}

#sidebar_1st .primary_item .icon{

	width: 2.375rem;

}

@media(min-width: 576px){

	.content_layer {

	    padding: 1.375rem 3%;

	}

}

@media(min-width: 1200px){

	#content_area.shrink, #footer_area.shrink, #tool_area.shrink{

		margin-left: 280px;

	}

	#sidebar_expand_layer{

		display: none;

	}

	#sidebar_1st{

		transform: translateX(0px);

	}

	#sidebar_1st.shrink{

		transition: .5s ease-in;

		transform: translateX(-280px);

	}

	#sidebar_1st_btn .over_xl_version{

		display: block;

	}

	#sidebar_1st_btn .under_xl_version{

		display: none;

	}

}