* {
  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;
}
.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 300px;
  background: #fff;
  background: #f0f1f4;
  border-left: 1px solid rgba(0,0,0, 0.15);
  padding: 0px 0px;
  font-size: 13px;
  max-width: 300px;
  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;
}

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

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

/* Log messages */

#main h6{
	margin: 15px 8px 5px 8px;
	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;
}

#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: #333;
}
#main #filter_bar .dropdown-menu a.active{
	background: rgba(0,0,0, 0.1);
}

#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;
}

.log-entry{
	background: #fff;
	margin : 1px 0px 3px 8px;
	width: calc(100% - 16px);
	font-size: 12px;
	padding: 0px 0px;
	position: relative;
	font-family: 'Titillium Web', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'helvetica', sans-serif;
}



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

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

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

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

.log-type .icon{
	font-weight: bold;
	color: rgba(0,0,0,  0.4);
	font-size: 10px;
}

.log-entry .log-time{
	min-width: 95px;
}
.log-entry .log-time,
.log-entry .log-name{
	font-weight: 500;
	color: rgba(0,0,0,  0.4);
}
.log-entry .log-label,
.log-entry .log-data{
	float: right;
	
	 color: rgba(0,0,0, 0.4);
}

.log-message{
	color: rgba(0,0,0, 0.6);
	overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
width: 45%;
max-width: 45%;
}


/*
.log-name span {
      white-space: nowrap;
      overflow: hidden;
      display:inline-block;
 }
.log-name span:first-child {
      width: 50px;
      text-overflow: ellipsis;
 }
*/
 
 .log-name{
	 max-width: 170px;
	 min-width: 170px;
 }
 
.log-name span + span {
      width: 80px;
      direction:rtl;
      text-align:right;
 }
 
 .log-entry.danger .log-type,
 .log-entry.danger .log-time,
 .log-entry.danger .log-name{
	color: #721c24;
}

 .log-entry.success .log-type,
 .log-entry.success .log-time,
 .log-entry.success .log-name{
	color:  #155724;
}

 .log-entry.warning .log-type,
 .log-entry.warning .log-time,
 .log-entry.warning .log-name{
	color:  #856404;
}

 .log-entry.info .log-type,
 .log-entry.info .log-time,
 .log-entry.info .log-name{
	color:  #004085;
	color:  #383d41;
}

 .log-entry.dev .log-type,
 .log-entry.dev .log-time,
 .log-entry.dev .log-name{
	color:  #383d41;
}

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

#account-info .icon{
	float: right;
	color: rgba(0,0,0, 0.6);
	font-size: 20px;
	line-height: 30px;
	padding: 15px 15px;
}

#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.4);
	line-height: 48px;
}

header .logo{
	text-align: left;
	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-top:  1px solid rgba(0,0,0, 0.2);
	border-radius: 0px;
	background: #e0e4eb;
	background: #fffdef;
}



/* 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 */
}