.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt30{ margin-top:30px; }
.mt60 { margin-top:60px; }

.header { display:none; }

.sidebar {
	position: fixed;top: 0px;left:0;
	width: 300px;height: 100%;max-height: 100%;
    color: #242424;background: #FFFFFF;
	border-right:1px solid #EEE;
	overflow: hidden; 
	z-index: 999; 
	-webkit-transition: width;
    -o-transition: width;
    transition: width;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    transition: width .1s cubic-bezier(0,0,.2,1);
}

.sidebar .logo { padding:20px 30px;background:#b71918;text-align: center;margin-bottom:20px;}
.sidebar .logo img { max-width:150px;filter:brightness(0) invert(100%);}

.sidebar > ul { width:100%;height:100%;z-index: 555;overflow-y: scroll; }
.sidebar > ul li {  display: block;}
.sidebar > ul li a { display: flex;align-items:center;justify-content:start; overflow: hidden; font-size:15px;padding: 15px 30px; color: #242424;font-weight:600  }


.sidebar ul li a i.fal{ width:25px; margin-right: 5px;text-align: center; }
.sidebar ul li a span { margin-right:5px;width:50px;text-align: center;font-size:12px;font-weight: normal;padding:3px 0px;}


.sidebar > ul > li:hover > a, 
.sidebar > ul > li.active > a{ background: #EEE !important; }


.content {  position: absolute; padding-left:300px;  width:100%; }

.content .widget { padding:100px 115px;}
.content .widget  + .widget{ border-top:1px solid #EEE; }

.content .widget:nth-child(even){ background: #F9F9F9; }
.content .widget:nth-child(even) .table tr td{ background:#FFF; }

.content .widget > h2 { display:flex;align-items:center;justify-content:flex-start; }
.content .widget > h2 span{ margin-right:10px; }


.tab-code { position:relative; }
.tab-code .tab-button { position:absolute;top:20px;left:1.5rem; }
.tab-code .tab-button .button { display:inline-block;background:#999;color:#FFF;padding:5px;border-radius:4px;font-weight:bold;font-size:12px;cursor: pointer;}
.tab-code .tab-button .button.active { color:#242424;background: #FFF; }

.tab-code > pre:not(.active) { display:none; }
.tab-code .active { display:block; }

.tab-code .active .hljs { padding-top:70px !important; }

.hljs { padding:1.5rem !important;border-radius:4px;max-height: 400px;overflow: scroll;}

@media screen and (max-width: 768px) {


	 .login .modal.active .modal-dialog { width:90%; }


	.sidebar.active { display: block; }


	body { padding-top:72px; }


	

	.header { position:fixed;top:0;left:0;display:flex;align-items:center;justify-content: center; padding:20px 15px;height:72px;background:#b71918;width:100%;z-index:999999;}
.header .logo img { min-width:100px;max-width:100px;filter:brightness(0) invert(100%);}
.header .toggle { margin-left:auto;color:#FFF;font-size:20px; }

	.sidebar {  display:none;top:72px;border-right:0px;padding-top:15px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22); }
	.sidebar .logo { display:none; }

	
	

	.content { padding:0px; }

		.content .widget { padding:50px 15px; }



}