* {
  box-sizing: border-box; 
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.app_container{
	height: 100%;
}
#main {
  display: flex;
  flex: 1;
  height: 60vh;
}
#main > article {
  flex: 1;
}
#main > nav{
  flex: 0 0 60px;
  background: #484d53;
  background: #6e737d;
  padding-top:70px;
}

#main > aside {
  flex: 0 0 350px;
/*
  background: #fff;
  background: #f0f1f4;
*/
  border-right: 1px solid rgba(0,0,0, 0.04);
  padding: 0px 0px;
  font-size: 13px;
  max-width: 350px;
  overflow-x: hidden;
  overflow-y: scroll;
}



#main > aside pre{
	
  color: rgba(0,0,0, 0.6);
  white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word; 
}

/*
pre > span:before {
      counter-increment: line;
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #ddd;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888
    }
*/

#main > nav {
  order: -1;
  border-right: 1px solid rgba(0,0,0, 0.15);
}

.app_container > header{
	height:  60px;
	background-color: #fff;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0, 0.2);
/* 	box-shadow: 0px 0px 5px rgba(0,0,0, 0.2); */
	z-index: 10;
}

.app_container #sub-header{
	
  background: rgba(0,0,0, 0.04);
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0, 0.1);
  z-index: 1;
  padding: 4px 0px;
  
}

.app_container > #main{
	background-color: #f0f1f4;
	background-color: rgba(0,0,0, 0.04);
	height: calc(100% - 60px);
}

.app_container > footer{
	height:  50px;
	background-color: #ddd;
}

/* Log messages */

#main h6{
	margin: 0;
	padding: 12px 10px;
/* 	background: #fff; */
	text-align: right;
	color: rgba(0,0,0, 0.4);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
}

#filter_bar{
	width: auto;
	height: 40px;
	background-color: transparent;
	font-size: 12px;
	color: rgba(255,255,255, 0.8);
}

/*
#filter_bar .nav-link{
	color: rgba(255,255,255, 0.8);
	color: #fff;
}
*/

#main #filter_bar .dropdown a,
#main #filter_bar a{
	
	color: rgba(255,255,255, 0.8);
/* 	color: rgba(0,0,0, 0.4); */
}

#main #filter_bar .dropdown-menu a{
	font-size: 12px;
	color: rgba(255,255,255, 0.8);
}
#main #filter_bar .dropdown-menu a.active{
	background: rgba(0,0,0, 0.1);
	color: rgba(255,255,255, 0.8);
}

#navbarNavDropdown .badge{
	padding: 0px 0px 0px 8px;
	line-height: 20px;
	height: 21px;
	background: rgba(0,0,0, 0.0);
	font-size: 12px;
	font-weight: 400;
	margin-top: 15px;
	margin-right: 5px;
	float: left;
	text-align: left;
	color: #333;
}

#navbarNavDropdown .badge span{
	font-size: 10px;
	float:right;
	padding: 0px 0px 0px 0px;
	line-height: 21px;
	height: 0px;
	margin: 0px;
	margin-right: 4px;
	margin-left: 0px;
	padding:0px;
	color: #fff;
	font-weight: 600;
	font-size: 6px;
	color: rgba(255,255,255, 0.4);
	color: #555;
}

#navbarNavDropdown small{
	color: rgba(0,0,0, 0.6);
	padding-top: 19px;
	margin: 0;
	margin-right:5px;
}

#main article{
	padding: 0px 0px 0px 0px;
	position: relative;
padding-top: 0px;
}

#main .form-group.has-search{
	margin: 0px;
}

#main .form-group.has-search input{
	background: #fcfdff;
	border-radius: 0px;
}

#sub-header .icon{
	float: left;
	line-height: 40px;
	margin: 0px 15px 0px 15px;
	font-size: 14px;
	color: rgba(0,0,0, 0.6);
}

.search{
	float: left;
	margin-top: 7px;
	width: 150px;
	background: transparent;
	color: rgba(0,0,0, 0.6);
	color: #fff;
	border: 0px;
	outline: none;
}

.log-entry{
	background: #fff;
	margin : 0px 0px 0px 0px;
	width: 100%;
	font-size: 13px;
	font-weight: 200;
	padding: 0px 0px;
	position: relative;
	font-family: 'Titillium Web', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'helvetica', sans-serif;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	border-bottom: 1px solid rgb(0,0,0, 0.1);
	box-sizing: border-box;
	color: rgba(0,0,0, 0.8);
	box-shadow: 0px 2px 2px rgba(0,0,0, 0.05);
}



.log-entry.active{
/* 	background-color: #f0f7ff; */
}

.log-entry:hover{
	background: #fffdef;
}

/*
.log-entry.active{
	background: #fffdef;
	background: #f8faff;
}
*/

.log-entry > *{
	float: left;
	display: block;
	margin: 0px;
	padding: 8px 0px;
}

.log-name .icon{
	font-size: 10px;
}





.log-entry .log-type{
	font-size: 10px;
	line-height: 16px;
	min-width: 30px;
	min-height: 36px;
	text-align: center;
	padding: 10px 10px 10px 10px;
	box-sizing: border-box;
	background: rgba(0,0,0, 0);
	color: rgba(0,0,0, 0.1);
	border: 1px solid rgba(0,0,0, 0);
	box-sizing: border-box;
}


.log-entry .log-time{
	min-width: 120px;
	font-size: 11px;
	font-weight: 300;
}

.log-entry .log-label,
.log-entry .log-data{
	float: right;
	padding-right: 10px;
	
}

.log-message{
	
	overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
width: 45%;
max-width: 45%;
}


.log-name{
	 width: auto;
	 font-weight: 400;
	 margin-right: 15px;
 }
 
.log-name span + span {
      width: 80px;
      direction:rtl;
      text-align:right;
}


 .log-entry.dev .log-type,
 .log-entry.dev .log-time{
	
}

 .log-entry .log-type,
 .log-entry .log-name{
	
}

 .log-entry .log-time{
	 font-weiight: 100;
 }
 
 
.log-entry.danger *{
	color: #721c24;
}
 
.log-entry.danger{
	background: rgb(248, 215, 218, 0.25);
	background: #F3E8EA;
	border: 1px solid rgb(245, 198, 203, 0.25);
	border-color: #F2DCDE;
	box-sizing: border-box;
}

.log-entry.success *{
	
	color: #155724;
}

.log-entry.success{
	background: rgb(212, 237, 218, 0.25);
	background: #E7F1EB;
	border: 1px solid rgb(195, 230, 203, 0.25);
	border-color: #DCECDF;
	box-sizing: border-box;
}

.log-entry.warning *{
	
	color: #856404
}

.log-entry.warning{
	background: rgb(255, 243, 205, 0.25);
	
	background: #F6F2E6;
	border: 1px solid rgb(255, 238, 186, 0.25);
	border-color: #f3ebcc;
	box-sizing: border-box;
}


.log-entry{
	border: 0px;
}






/* Header */
#account-info{
	position: relative;
}

#account-info .icon{
	float: right;
	color: rgba(0,0,0, 0.9);
	font-size: 14px;
	line-height: 30px;
	padding: 15px 15px;
	font-weight: 300;
	 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#account-info img{
	width: 35px;
	height: 35px;
	border-radius: 40px;
	border: 2px solid #fff;
	box-sizing: content-box;
	box-shadow: 0px 0px 0px 2px #6e737d;
	float: right;
	margin-top: 12.5px;
	margin-right: 15px;
	margin-left: 15px;
}



.project{
	width: 60px;
	height: 100%;
	padding: 12px 0px;
	float: left;
	background: #6e737d;
}

.dropdown{
	
	color: rgba(0,0,0, 0.6);
	float: left;
}

.dropdown button{
	
	text-align: right;
	float: right;
	background: #fff;
	border: none;
	color: rgba(0,0,0, 0.7);
	line-height: 44px;
}

#log-menu{
	display: inline;
	position: relative;
	float:left;
}

#log-menu ul{
	float: left;
	padding-top: 0px;
	margin-left: 15px;
}

#log-menu ul li a{
	line-height: 20px;
	font-size: 12px;
	color: rgba(0,0,0, 0.6);
}

#log-menu ul li .icon{
	display: block;
	font-size: 16px;
	line-height: 40px;
	padding: 0px 0px;
}

#log-menu ul li.active{
	border-bottom: 4px solid #6e737d;
	box-sizing: border-box;
}

#log-menu ul li.active a .icon{
/* 	color: #fff; */
}

header .logo{
	text-align: center;
	font-weight: 600;
	color: #666;
	font-family: 'Titillium Web', sans-serif;
	position: absolute;
	width: 100%;
	text-align: center;
	
}

header .logo p{
	line-height: 60px;
	margin: 0px;
	font-size: 30px;
	color:rgba(0,0,0, 0.2);
	color:#6e737d;
}

/* Main Nav */


#sidebar .dropdown{
	width: 100%;
	box-sizing: padding-box;
	padding: 0px 0px;
	background-color: rgba(0,0,0, 0.05);
	border: none;
	border-bottom: 1px solid rgba(0,0,0, 0.4);
}
	
#sidebar .dropdown button{
	width: 100%;
	padding: 7px 20px;
	background: #32353A;
	border-radius: 0px;
	border: none;
}

#main .dropdown,
#main .dropdown a,
#main .dropdown .icon{
	color: #333;
	font-size: inherit;
	text-indent: 0px;
}

#main .dropdown-menu{
	width: 96%;
}

#main .dropdown-menu .badge{
	float: right;
	background: rgba(0,0,0, 0.4);
}

#main .dropdown-menu .badge .icon{
	color: rgba(255,255,255, 0.8);
}

#main > nav h6{
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(255,255,255, 0.4);
	font-size: 10px;
	text-indent: 20px;
	margin-top: 20px;
}


#main > nav a.nav-link{
	color: rgba(255,255,255, 0.5);
	font-size: 9px;
	text-indent:0px;
	text-align: center;
	text-transform: uppercase;
	padding-top: 20px;
	padding-bottom:20px;
	padding: 40px 0px;
}

#main > nav a:hover{
	background: rgba(0,0,0, 0.1);
	color: #fff;	
}

#main > nav ul a .badge{
	text-indent: 0px;
	float: right;
	background: rgba(255,255,255, 0.5);
}

#main > nav a.active{
	color: rgba(255,255,255, 0.8);
	background-color: rgba(0,0,0, 0.1);
}

#main > nav .icon{
	color: rgba(255,255,255, 0.8);
	font-size: 24px;
	text-align: center;
}


/*-- Data sidebar --*/

#main > aside .list-group-item{
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0px;
/*
	background: #e0e4eb;
	background: #f0f1f4;
	background: #fff;
*/
	padding-top: 0px;
}

#main > aside h5{
	font-weight: 300;
	font-size: 18px;
	line-height: 49px;
	text-indent: 10px;
	margin: 0px !important;
	background: #F3E8EA;
	background: rgba(0,0,0, 0.04);
	color: #721c24;
	color: rgba(0,0,0, 0.6);
	border-right: 1px solid rgba(0,0,0, 0.06);
	border-left: 1px solid rgba(0,0,0, 0);
	box-sizing: border-box;
}

#main > aside .list-group-item small{
	line-height:18px;
	margin: 0;
}

#main > aside h5 .close{
	float: right;
	padding: 14px 10px 0px 10px;
	line-height:20px;
	font-size: 12px;
}



/* Reverse ellipsis */

.rev-ellipsis{
	-webkit-transform:rotateY(180deg) scale(-1, 1);
  -moz-transform:rotateY(180deg) scale(-1, 1);
  -o-transform:rotateY(180deg)  scale(-1, 1);
  -ms-transform:rotateY(180deg) scale(-1, 1);
  unicode-bidi:bidi-override;
  direction:rtl;
  
  width: 150px;
  overflow: hidden; /* 1 */
  white-space: nowrap; /* 2 */
  text-overflow: ellipsis; /* 3 */
}