* {
  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 275px;
  background: #484d53;
}

#main > aside {
  flex: 0 0 300px;
  background: #fff;
  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:  75px;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0, 0.3);
}

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

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

/* Log messages */


#filter_bar{
	width: auto;
	height: 40px;
	background-color: #32353A;
	position: absolute;
	top: 0;
	left: 0px;
	right: 0px;
	font-size: 12px;
}

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

#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: 45px 0px 0px 0px;
	position: relative;
padding-top: 40px;
}

#main .form-group.has-search{
	margin: 0px;
}
.log-entry{
	background: #fff;
	margin : 1px 0px;
	width: 100%;
	font-size: 13px;
	padding: 6px 0px;
	position: relative;
	
	font-family: 'Titillium Web', sans-serif;
	font-family: 'Open Sans', sans-serif;
}



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

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

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

.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: 300;
	color: rgba(0,0,0,  0.4);
}
.log-entry .log-label,
.log-entry .log-data{
	float: right;
}


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

.project{
	width: 275px;
	height: 100%;
	padding: 18px 20px;
	float: left;
	background: #32353A;
	border-bottom: 1px solid rgba(0,0,0, 0.4);
}

.project > .dropdown{
	
	color: rgba(0,0,0, 0.4);
}

.project .dropdown button{
	
	text-align: right;
	float: right;
	background: #fff;
	border: none;
	color: rgba(0,0,0, 0.4);
}

header .logo{
	text-align: center;
	font-weight: 600;
	color: #666;
	font-family: 'Titillium Web', sans-serif;
	float: left;
	width: calc(100% - (275px + 450px));
	
}

header .logo p{
	line-height: 75px;
	margin: 0px;
	font-size: 26px;
}

/* 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{
	color: rgba(255,255,255, 0.5);
	font-size: 13px;
	text-indent:20px;
}

#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.5);
	font-size: 10px;
}


/*-- Data sidebar --*/

#main > aside .list-group-item{
	border-top: none;
	border-left: none;
	border-right: none;
}



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