/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  background-color: #f2f4f8;
  font-size: 13px;
}

/*
 * Typography
 */


/*
 * Sidebar
 */

.sidebar {
  border-right: 1px solid #eee;
  padding: 0;
}

.sidebar::after{
	background: url(../img/sidebar.png);
	opacity: 0.2;
	height: 100%;
	width: 100%;
	content: '';
  position: absolute;
  top: 0; 
  left: 0;
  z-index: 1;
}

.sidebar .panel{
	background: #292e33;
}

/* Sidebar navigation */

.sidebar i {
    margin-right: 6px;
}

.sidebar .list-group-item {
    border-radius: 0;
    color: #ccc;
    border-left: 0;
    border-right: 0;
    white-space: nowrap;
	padding: 15px 10px;
	position: relative;
	background: transparent;
	border: none;
}

.sidebar .list-group-item:hover{
	background: transparent;
}

.sidebar .list-group .submenu .list-group-item{
	padding-left: 25px;
}

.sidebar .list-group .submenu a:hover,
.sidebar .list-group .submenu-1 a:hover{
	color: #3bb1dc;
}

.sidebar .list-group .submenu-1 .list-group-item{
	/*padding-left: 35px;*/
}

.app-content{
	background-color: #f2f4f8;
}

/* highlight active menu */

.sidebar .list-group > .list-group-item{
	border-bottom: 1px solid #171a1d;
}


.sidebar .list-group .list-group-item:focus{
	background: none;	
}

.sidebar .list-group > .list-group-item:not(.collapsed){
	background-color: #3bb1dc;
	color: #fff;
}

.sidebar .list-group > .list-group-item:not(.collapsed):hover{
	background-color: #3bb1dc;
	color: #fff;
}

.sidebar .list-group > .list-group-item + .show {
    background-color: #32373c;
}

/* closed state */
.sidebar .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f104";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 17px;
}

/* open state */
.sidebar .list-group > .list-group-item[aria-expanded="true"] {
  background-color: #222;
  color: #fff;
}
.sidebar .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f107";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 17px;
}




/*
 * Dashboard
 */

 /* Placeholders */
.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}


.app-footer {
    min-height: 50px;
    padding: 0 1rem;
    line-height: 50px;
    color: #151b1e;
    background: #f9f9fa;
    border-top: 1px solid #e1e6ef;
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
	
	#header-menu .nav-item{
		padding: 10px 0px;
	}
	
	.main-content{
		display: block !important;
	}
	
	#main-menu{
		display: none;
	}
	
	#main-menu.show{
		display: block;
	}
	
	aside,
	.app-content{
		width: 100%;
	}
	
	.sidebar,
	.app-content{
		position: static;
		width: 100%;
		height: auto !important;
	}
	
	.sidebar .list-group.panel{
		position: static;
	}
	
	.sidebar:after{
		display: none;
	}
	
	
 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) { 
	
	#header-menu .nav-item{
		padding: 10px 0px;
	}
	
	.main-content{
		display: block !important;
	}
	
	#main-menu{
		display: none;
	}
	
	#main-menu.show{
		display: block;
	}
	
	aside,
	.app-content{
		width: 100%;
	}
	
	.sidebar,
	.app-content{
		position: static;
		width: 100%;
		height: auto !important;
	}
	
	.sidebar .list-group.panel{
		position: static;
	}
	
	.sidebar:after{
		display: none;
	}
	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {


}