/*------------ reset panel ----------------------*/
 html,body{	height:100%;width:100%;	padding:0;	margin:0;overflow:hidden;}
/*------------Upper Panel Start------------------*/
.upperPanel{ position: absolute; left:0; right:0; top:0;  height:50%}
/*-----------Upper Panel End-------------------*/
/*-----------Bottom Panel Start---------------*/
.bottomPanel{  position: absolute;  left:0;  right:0;  bottom:0;  height:50%}
.bottomPanel .smallWidth .window{ top:0;}
/*--------------Bottom Panel End-----------------*/

/*--------dashboard layout with 3 panels---------*/
.panelSize{	width:50%;	position:absolute;	bottom:0;top:0;}
.leftPanel{	left:1px;	width: 65%;}
.rightPanel{right:0;width: 35%;}
/*-----window sise Start ------*/
.fullWindow{height:99%;	width:100%;	position:absolute;}
.halfWindow{height:49.5%;width:100%;	position:absolute;}
/*---window position--*/
.upperWindow{top:0;}
.bottomWindow{	bottom:0;}
/*--------------------*/
/*-----window sise End -------*/
/*-----------------------------------------------*/
/*-------------------Window Start------------------------------*/
/*window sizes small, half and large (3/4) size window panel*/
.smallWidth{width:33.3%;height:100%;position:absolute;}
.halfWidth{	width:50%;height:100%;position:absolute;}
.largeWidth{width:66.6%;height:100%;position:absolute;}
/*add sizes classes for apropriate width panel */
.size60{ width:60% !important;}
.size40{ width:40% !important;}
.right60{ left:60% !important;}
.right40{ left:40% !important;}
/*-----set each window position at Left, Middle, Right ----*/
.left{	left:1px;}
.middle{left:33.3%;}
.right{	left:66.6%;}
.rightHail{ right:0;}
/**toolbar dropdown**/
.toolbarDropdown{top:3px; display:block;}
/*-----------------------------------------------*/

/* Global declarations */
/*----------------------------------------------- Modify default property of tags ------------------------------------------------------*/
/*clear float and position effect*/
.clear{	clear:both;}
/*opened popupbox style*/
.openPopup{ cursor: pointer; float: right; height: 22px; position: relative; z-index: 65;}
.openPopup label{font-size: 12px;  margin: 5px 0 4px 4px; padding: 0;}
/*down arrow icon*/
.arrowIcon{	background:url(images/IconComboBox.png) no-repeat scroll 0 0 transparent; background-position:center; float: right; height: 15px; margin: 0 4px; width: 15px; z-index: 9;}
.active{background:#F5F5F5;border: 1px solid #CCCCCC;}
.showPopup{
	height: 181px;
    position: absolute;
    right: -1px;
    top: 21px;
    width: 363px;
	border:1px solid #CCCCCC;
	background:#FFFFFF;
	z-index:5;
	border-top:none;
	display:none;
	overflow: hidden;
}
/*----button style----*/
.btnStyle{
	-moz-user-select: none;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    font: bold 13px "Helvetica Neue",Helvetica,Arial,clean,sans-serif !important;
    margin: 0 2px;
    overflow: visible;
    padding: 0;
    text-decoration: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    white-space: nowrap;
	background-color: #015EA9;
	float:right;
	behavior: url(pie/PIE.htc);
}
.btnStyle.simple{
	 behavior: url(pie/PIE.htc);
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	/*filter:progid:DXImageTransform.Microsoft.Shadow(color='#555555',direction='120',strength='1');*/
	background-image: url(images/btn-sprite.png);
    background-position: 0 0;
    background-repeat: repeat-x;
    color: #FFFFFF !important;
    display: inline-block;
    /*font-family: inherit;*/
    font-size: 13px !important;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: normal !important;
    font-variant: inherit;
    font-weight: bold !important;
    line-height: 1;
    padding: 2px 7px;
    position: relative;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25), -2px 0 1px rgba(0, 0, 0, 0.25);
    vertical-align: middle;
}
/*hover and active button effect*/
.btnStyle.simple:hover,btnStyle.simple:focus{color: #FFFFFF !important;background-position:0 -50px;}
.btnStyle:active{background-position:0 -95px;padding: 2px 7px 3px;}
#applyFooter{height:16px;border-top: 1px solid #DEDEDE; height: 22px; padding: 3px 2px 2px 2px;}
#applyFooter:hover{ background:#c9e2fc;}
#applyContainer{width:100%;	height: 157px; overflow: auto; width: 100%;}
#selectOption{margin:-1px 0 0 0;width: 140px;}
#state{height: 22px;width:100%; text-align:left;  }
/*container for chart - take full height with of parent container*/
#container{height:100%;width:100%;padding:0;margin:0;}
/*upper devission*/
.upper{	height:100%;width:100%;	float:left;left: 0;position: absolute; right: 0;top: 0;	}
.innerUpper{ height:100%;/* border:1px solid gray;*/float:left;}
/*lower devission*/
.lower{	height:100%;width:100%;	float:left;	bottom: 0; left: 0; position: absolute;  right: 0;}
#leftUpperContainer{/*width:80%;*/width:100%}
#rightUpperContainer{width:310px;float:right;border-left:1px solid #F5F5F5;	margin-top:10px;}
#rightUpperContainer.innerUpper { height : 96%!important; }
.UpperContainer{position: relative;	border-top:1px solid #f5f5f5; height: 23%; padding: 0px; width: 99%; overflow:hidden;}
/*upper panel right side line graph parent container*/
.lineParent{border:2px solid #AAAAAA;width:120px;position:absolute;	float:left;	bottom: 2px; left: 1px;  position: absolute;  top: 1px; overflow: hidden; cursor:pointer;z-index:9999;}
.lineParent div, .lineParent div svg, .lineParent div svg rect{ height:100% !important;}
.lineParentHeading{	color: #222222; float: left;font-size: 11px; font-weight: bold;left: 130px; margin: 0px; position: absolute;}
.lineParentHeading label{ color:#333;}
.lineParentHeading span{ font-weight:normal;color:#333;}
.line{margin:1px  4px;	width:120px;height:100%;}
.innerLower{height:100%;width:100%;  /* border:1px solid gray;	border-right:none;*/float:left;}
#middleLowerContainerBar{ height:100%;width:100%; /* border:1px solid gray;	border-right:none;*/float:left;}
#rightLowerContainerBar{ height:80%;width:99%;	overflow: visible; /* border:1px solid gray;border-right:none;*/float:right;}
#rightLowerContainer{float: right;}
#middleLowerContainer label{ margin: 5px; padding: 4px;}
.ssaPopup{height: 16px;padding: 2px;text-align: left;width: 140px;}
#leftLowerContainer{overflow:hidden;}
/*speedo meter*/
.meter{ margin: .5% auto 0; background-repeat: no-repeat;height: 210px !important;width: 304px !important;}
.tSelect{ float: right;height: 19px;padding: 3px; width: 95px;}
/*.tSelect
{
    background: url("images/icons/IconComboBoxW.png") no-repeat scroll right 8px #08633B ;
    display: block;float: right; height: 23px; margin: 1px 17px 1px 0; overflow: hidden; position: relative;
    width: 57px;
}*/
.tSelect select{ height:100%; width: 100%; padding:1px}
/*.tSelect select
{
    background: none repeat scroll 0 0 transparent;border: medium none; clip: rect(2px, 49px, 19px, 2px);
    color: #FFFFFF;display: inline-block;height: 100%; outline: medium none;padding: 2px 0;width: 74px;z-index: 2;
}
.tSelect select option{border-left: 0 none; overflow: hidden;}
.tSelect select option:hover{}
*/
/*------small common classes------*/
.borderset{border:2px solid #1d5ba0;}
.colorTxt{ color:#5896DA; text-shadow: 0 1px 1px #EEEEEE;}
.BTxt{ color:#222222;}
.applyArea{margin:3px;}
.popupTable tr td{ padding:2px;}
/*------chart container------*/
#MainContent_MainContent_upRevenue{float: left;height: 98%;left: 0;position: absolute; right: 310px;}
.highcharts-container{ width:100% !important;}
/*------------------Dashboard according to operator--------------*/
/*---add these classes with titlebar to add colors according to operator---*/
.airtelTitle {background:#D62128; color:#fff;}
.vodafoneTitle {background:#FE0000; color:#fff;}
.gloTitle {background:#08633B; color:#fff;}
.tigoTitle {background:#37479F; color:#fff;}
.expressoTitle {background:#7369A3; color:#fff;}
.mtnTitle {background:#F9C61B; color: #333 !important; text-shadow: 1px 2px 3px #ddd;}
.mtnTitle .title, .mtnTitle .month, .mtnTitle .charTimer{color:#333 !important;}

/*---chart timer on titlebar---*/
.charTimer{ min-width:100px; float:left;font-size: 12px;left: 42%; position:relative; font-weight:normal; height:30px; color:#fff;}
.charTimer div{ float:left; margin:4px;}
#countdown{ font-weight:bold;}
/*play pausee  buttons*/
.playPause{ min-width:30px; height:18px; margin:2px;float:right; border-radius:3px;border: 1px solid #fff;background:#fff; overflow:hidden; box-shadow: 1px 1px 2px #444444;filter: progid:DXImageTransform.Microsoft.Shadow(color='#555555', Direction=150, Strength=2); background: url("images/inner.gif") repeat-x scroll 0 0 #fff;}
.playPause .play{ border-radius:3px 0 0 3px; border-right: 1px solid #AAAAAA;background: url("images/icons/playPause.png") no-repeat scroll 0 0 #fff; background-position:-2px -23px;}
.playPause .play:hover{background-position:-2px -128px;}
.playPause .pause{ border-radius:0 3px 3px 0;background: url("images/icons/playPause.png") no-repeat scroll 0 0 #fff;background-position:-2px -3px;}
.playPause .pause:hover{background-position:-2px -148px;}
.playPause .play, .playPause .pause{display: block; float: left;height: 100%; width: 24px;cursor:pointer;}
.playPause .activeControll{ /*background-color:#7BA049 ;*/ background-color:#B8D3ED; cursor:default;}
.playPause .play.activeControll{background-position:-1px -109px !important;}
.playPause .pause.activeControll{background-position:-2px -91px !important;}
/*--------------------------------------Dashboard End-------------------------------------------------*/