/***************************************************************************************
 * This class encapsulates the default design of the WebBoxInterface.
 * Background styles and font styles should be overwritten in customer specific
 * style sheets, if necessary
 *
 * @author Thomas Dylla
 ***************************************************************************************

 /**
 Fallback for older browsers
 to make them HTML5 valid
 */
header, footer {
	display: block;
}

/** Global element styling */
html, body {
	margin: 0px;
	overflow-y: auto;
	min-height: 100%;
}

ul {
	list-style-type: none;
}

dl dt {
	margin-top: 1em;
	display: inline;
}

dl dt:first-child {
	margin-top: 0;
}

dl dd {
	margin-left: 10px;
}

dl dd span.elem1,
dl dt span.elem1{
	float: right;
}


/** Error message styling (not working in the ExtJS panels)*/
.error-message, .no-script {
	color: red;
	font-family: arial, sans-serif;
}

/**************************************************************************************/

.clearfix {
	display: block;
	clear: both;
}

/**************************************************************************************/

/**
 * Page header with IntegraSUN Logo on the left side and customer logo on the right side
 */

/* General container settings */
#page-header {
	background: #fff;
	height: 50px;
}

#page-header img{
	height: 44px;
	width: auto;
	display: block;
	padding: 3px;
	margin: 0 auto;
}

.footer-row{
	height: 40px;
	line-height:40px;	
	vertical-align: middle;
}

.placeholder-footer{
	height: 50px;
}

#page-footer{
	background: #fff;
}

/**************************************************************************************/

#content-container,
.col-sm-8,
.col-sm-4,
.col-sm-3,
.col-xs-12{
	padding:0;
}

.ghost{
	width:95%;
	height:90px;
	position:relative;
	display: block;
	background: #fff;
	margin: 0;
	margin-bottom: 10px;
	box-shadow: 2px 2px 2px #ccc;
	z-index:0;
}

.log-ghost{
	width:100%;
	height:90px;
	position:relative;
	display: block;
	background: #fff;
	margin: 0;
	margin-bottom: 10px;
	box-shadow: 2px 2px 2px #ccc;
	z-index:0;
}
	


.ghost-state{
	height: 30px;
}

.ghost-state i{
	text-shadow: none;
}

.ghost-state span{
	position: absolute;
	right:0;
	width:70%;
	text-align:center;
	display: block;
	height:30px;
	line-height: 30px;
	vertical-align: middle;
	font-size: 12px;
}

.disconnected{
	color: red;
}

.connected{
	color: green;
}

#log-messages-window{
	height: 100%;
	position: relative;
	display: block;
	overflow-y: scroll;
	z-index:99999;
}

#log-messages-window ul li{
	border-top: 1px solid #505050;
}

.button-icon{
	font-size: 16px;
}

.log-container{
	height: 230px;
	margin-right: 0;
	position: relative;
	padding-top: 30px;
}

.ghost-state .icon-container{
	line-height: 30px;
	height: 30px;
	font-size: 24px;
	color: #505050;
}

.log-container .icon-container{
	line-height: 230px;
	height: 230px;
	font-size: 90px;
	color: #ededed;
	width: 100%;
}

.log-container .icon-container i{
	text-shadow: 3px 3px 3px #dedede;
	z-index:-1;
}


#chartPanel{
	box-shadow: 2px 2px 2px #ccc;
	background: #fff;
}

.icon-container{
	font-size:50px;
	line-height:100px;
	vertical-align: middle;
	text-align:center;
	position: absolute;
	left:0;
	top:0;
	width:30%;
	height:90px;
	color: #505050;
	z-index:1;
}

.empty-message{
	color: #505050;
	text-align: center;
	line-height:30px;
	vertical-align: bottom;
	display: block;
	width: 100%;
}

i{
	text-shadow: 1px 1px 1px #000;
	font-style: normal;
}

.unit-container{
	position: absolute;
	right:0;
	bottom:2px;
	height:30px;
	font-size:20px;
	width:70%;
	text-align:center;
	color: #505050;
	z-index:1;
}

.caption-container{
	position: absolute;
	left:0;
	top:0px;
	height:18px;
	line-height: 18px;
	vertical-align: middle;
	font-size:12px;
	width:100%;
	text-align:center;
	color: #fff;
	background: #505050;
	z-index:1;
}

.data-container{
	position: absolute;
	right:0;
	top:0;
	height:90px;
	font-size:30px;
	width:70%;
	text-align:center;
	color: #000;
	line-height:90px;
	vertical-align:middle;
	z-index:9999;
}

.state-container{
	position: absolute;
	right:0;
	bottom:0;
	height:20px;
	line-height: 20px;
	vertical-align: middle;
	text-align:center;
	background: #505050;
	width: 20px;
	font-size:16px;
}

.state-container i.fa-exclamation-triangle{
	color: #ffff66;
}

.state-container i.fa-exchange,
.state-container i.fa-check-circle{
	color: #7fff00;
}


/**************************************************************************************/

/** Title in the log window */
.log-messages-caption {
	padding: 0;
	margin: 0;
	padding-top: 1px;
	margin-bottom: 5px;
	line-height: 1;
	font-size: 0.8em;
	text-align: left;
	font-weight: normal;
	border-top: 1px solid black;
}

/* Styling of the list in general */
.log-messages-list {
	margin-right: 20px;
}

/* Log message title */
.log-title {
	font-weight: bold;
	line-height: 20px;
	vertical-align: middle;
}

/* Description and log time */
.log-description, .log-time {
	display: block;
	padding-left: 3px;
}

.log-time i {
	line-height:20px;
	text-align: left;
	text-shadow: none;
	
}

/* Log message */
.log-message {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 3px;
}

/**************************************************************************************/

/* Add icons to the buttons for controling the date switching panel and the chart */

.date-switcher-forward-button-icon {
	background-image: url('../images/right.png');
}

.date-switcher-back-button-icon {
	background-image: url('../images/left.png');
}

.date-switcher-current-button-icon {
	background-image: url('../images/current.png');
}

.network-table thead tr th{
  font-weight: bold;
  background: #505050;
  color: #fff;
  width: 50%;
}

.network-table tbody td{
  width: 50%;
  background: #fff;
}

.network-table tbody td:nth-child(2),
.network-table thead tr th:nth-child(2){
  text-align: center;
}

.network-table{
  border-collapse:collapse;
  width: 100%;
  margin: 0 auto;
  padding: 5px;
}

/**************************************************************************************/

/* Overwrite ExtJS default styling for the tab bars */

.x-tab-bar, .x-tab-bar-body, .x-panel-body-default {
	background: #fff !important;
	border: 0 !important;
}

.x-tab, .x-tab-bar button {
	background: #fff !important;
	color: #000;
	font-family: arial, sans-serif;
}

.x-tab {
	border: 1px solid #000;
	color: #000;
	font-family: arial, sans-serif;
}

.x-active-default, .x-active, .x-active button {
	background: #004d70 !important;
	color: #fff;
	border: 1px solid #004d70;
}

.x-tab-bar, .x-tab-bar-body, .x-panel-body-default {
	background: #fff !important;
	border: 0 !important;
}

.x-tab, .x-tab-bar button {
	background: #fff !important;
	color: #000;
	font-family: arial, sans-serif;
}

.x-tab {
	border: 1px solid #000;
	color: #000;
	font-family: arial, sans-serif;
}

.x-active-default, .x-active, .x-active button {
	background: #004d70 !important;
	color: #fff;
	border: 1px solid #004d70;
}

/**************************************************************************************/

@media screen and (max-width:1040px){
	.icon-container{
		display: none;
	}
	.data-container{
		width: 100%;
	}
	.unit-container{
		width: 100%;
	}
	
	.ghost-state span{
		width:100%
	}
}
@media screen and (max-width:767px){
	.icon-container{
		display: block;
	}
	.data-container{
		width: 70%;
	}
	.unit-container{
		width: 70%;
	}

	.footer-row span.copyright{
		display: block;
		text-align: center;
	}

	.footer-row .text-right{
		text-align: center;
	}

	.log-container,
	.box-1,.box-2,.box-3,
	.box-4,.box-5,.box-6{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 5px;
	}
	
	.placeholder-footer{
		height: 90px;
	}
}

/**
 * Background for default styling
 */
.custom-theme {
	/*fallback*/
	background-color: #ededed;
}

#success-message,
#warning-message,
#error-message,
.alert-message{
	display: none;
}

body {
  padding : 10px ;
  
}

#exTab1 .tab-content {
  color : white;
  background-color: #fff;
  padding : 5px 15px;
}

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

.div_scan_result{
	background-color: #ccc;
	margin-top: 5px;
	margin-bottom: 15px;
	border: #000 1px solid;
	min-height:350px;
	overflow: auto;
	padding: 10px;
}