body{
	background-color: #ddd;
}
.main-container{
	width: calc(100% - 50px);
	position: fixed;
	left:50px;
	float:left;
	z-index: 3;
}

.main-side-panel{
	float:left;
	padding-top:50px;
	width: 50px;
	height: 100%;
	position: fixed;
	background-color: #333;
	border-right: 2px solid #555;
	color: #fff;
	overflow: hidden;
	z-index: 2;
}
.panel-col{
	padding-bottom: 20px;
}
.text-center{
	text-align: center;
}

/*SIDE PANEL*/
	.main-side-panel > ul > li > button{
		width: 49px;
		height: 49px;
		font-size:25px;
		background-color: #333;
		border:none;
		outline:none;
		transition: background-color 0.3s ease;
	}
	.main-side-panel > ul > li > button:hover{
		background-color: #555;
	}
	.main-side-panel > ul > li > button,
	.main-side-panel > ul > li > button:hover,
	.main-side-panel > ul > li > button:focus,
	.main-side-panel > ul > li > button:active{
		outline:none;
	}
	.main-side-panel > ul > li > button.active{
		border-left: 2px solid #fd7;
		color:#fd7;
	}

/*MAIN PANEL*/
	.main-container > div.tab-panel{
		padding 	: 15px;
		padding-top	: 20px;
		position: relative;
	    clear: both;
	    float: left;
	}
	.main-container > div.tab-panel:not(.active){
		display 	: none;
	}
	.tab-panel.active{
		display 	: block;
	}

.my-main-panel > .panel-body{
	height: calc(100vh - 100px);
}

@keyframes tab_active_show{
	0%{
		transform: translateX(-100%) translateY(-20%) scale(0.1);
		opacity: 0;
	}
	100%{
		transform: translateX(0px) translateY(0px) scale(1);
		opacity: 1;
	}
}

@keyframes modal_active_show{
	0%{
		transform: scale(0.1);
		opacity: 0;
		display: none; 
	}
	100%{
		transform: scale(1);
		opacity: 1;
		display : block;
	}
}