/* Colour Setup */
.backgroundColour,	a.greyButton:hover, a.greyButton2:hover  { background: #b1b1b1 ; } /* primary background colour */
th.backgroundColour { background: #595959;}
.foreColour {  color: #adadad;}  /* primary foreground-colour (anticipate this matching .backgroundColour but split just in case) */
.bgTextColour,	a.greyButton:hover, a.greyButton2:hover   { color: white ;} /* when text is used on backgroundColour */
.msg { color: #cc0000; } 

#greenSlider .ui-slider-range, #defaultMaxSlider .ui-slider-range { background: #8ae234; }	
#greenSlider .ui-slider-handle, #defaultMaxSlider .ui-slider-handle { border-color: #8ae234; }

.greenIcon { background: #bbbbbb; color: white;text-decoration: none;display: inline-block;}
.greenIcon:hover { background: #47c438; }

.deleteIcon { background: #bbbbbb; color: white;text-decoration: none;;display: inline-block;}
.deleteIcon:hover {background: #f40300; }

.smallerBox {padding: 2px 3px;display: inline;margin-right: 4px; background: #b0b0b0;}
.directionActive { color: white }
.directionInactive {  color: #9d9d9f}

/* Define HTML Element Styles */
html, body { height: 100%; color: #565656; }
body { font-family: Verdana,Tahoma, Helvetica, Verdana; font-size: 13px;margin:0px; padding:0px;}
img { border:0px} 	
h1 { margin:0px; padding:0px;font-size: 28px; font-weight: normal;}
h1 { color: #afafaf; }
h1 a { color:#afafaf; text-decoration: none; }
h1 a:hover { text-decoration: underline; }
#siteInfo h2 a { text-decoration: none;}
#siteInfo h2 a:hover { text-decoration: underline; }

#ui-datepicker-div { font-size:12px; }

.icomoon { font: 'icomoon'; }
.icon-tel { background: black; color: white; content: 'e64c'; height: 50px; width: 50px;}
.fixedSmallBox { display: inline-block;width: 17px; height: 17px; text-align: center;line-height: 17px; font-weight: bold; font-size: 12px; }
/* Useful */
.clear {  clear: both; height: 0px; }
.row { display: block; margin-bottom: 7px;} 

/* Buttons */
.button { margin:0px;border:0px; border-radius: 3px;padding: 6px 20px; } 
.siteButton {  text-decoration: none;margin:0px;border:0px; border-radius: 3px;padding: 3px 40px;  }
.siteButtonEdit {  text-decoration: none;margin:0px;border:0px; border-radius: 3px;padding: 3px 15px;  }

.greyButton { font-size: 12px;margin-right: 10px;text-decoration: none;background: #828282; color: #626262; border-radius: 3px;padding-left: 20px;padding-right:20px;padding-top: 8px; padding-bottom: 8px; } 
	a.greyButton  span { display: inline; margin-left: 10px;}
.greyButton2 { font-size: 12px;margin-right: 10px;text-decoration: none;background: #e2e2e2; color: #626262; border-radius: 3px;padding-left: 20px;padding-right:20px;padding-top: 5px; padding-bottom: 5px; } 
	a.greyButton2  span { display: inline; margin-left: 10px;}
.editButton span { margin-left:2px; border-left: 0px solid white;padding-left:3px;} 
.addPlotButton {  text-decoration: none;margin:0px;border:0px; border-radius: 3px;padding: 6px 20px;   }

.editing {  background: #999!important; color: white; }
/* Alerts */

.miniAlertBox { display: inline-block;background: black; color: white;padding: 3px 2px;width: 15px;font-size: 11px;margin-left: 10px;text-align: center;}
	.redAlert  { background:#fe0000;font-weight: bold; }
	.orangeAlert { background:#ffaa00 ;}
	.greenAlert {  background:#47c43c ;}
	.greyAlert { background: #ccc; }	

/* For Footer - Keep sticky to bottom of page. */
.pageWrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -109px; }
.push { height: 109px; }
.hidden  { display: none !important;}

.addPlotButton{ font-family: Verdana !important; font-size:11px!important; }
/* Footer Area */
.spiderscope { color: #333; font-size:11px;padding-top: 10px;} 
	 .spiderscope a {  color: #333; text-decoration: none; }
	 .spiderscope a:hover { text-decoration: underline; }

/* misc, move to correct place.*/
	 .padme { padding-top:6px; padding-bottom:3px;} 
	 td.padme { padding: 10px 15px;} 

/* Tanks Columns Styles */

#detailArea{
    float: left;
    min-width: 100%;
}

.col-10{
    width: 33%;
}
.col-1, .col-xl-1 {
    width: 8.33333333%;
}
.col-1,.col-10{
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}
.select-container {
    display: block;
    width:100%;
    height: 26px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    background-clip: padding-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(to top, #eee 0%, #fff 50%);
}
.select-container:focus{
    border-radius:4px 4px 0 0
}
.tempoAdd, .filterAdd {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 17px;
    text-align: center;
    display: inline-block;
    background-color: #e2001a;
    color: #fff;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 5px 5px 0;
}
.filters button, .RemoveObject {
    margin-bottom: 5px;
    background-color: #dbdfe2;
    border: 0;
    padding: 5px 10px;
    line-height: 1;
    color: #000;
    cursor: pointer;
    text-decoration: none;
}
.filters button::after, .RemoveObject::after {
    display: inline-block;
    vertical-align: middle;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #B5B5B5;
    border-radius: 50%;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    font-size: 12px;
    color: #fff;
    background-color: #e2001a;
    content: "x";
    margin-left: 10px;
    padding: 2px;
}
.FilterBox{
    display:none;
    padding: 3px 6px;
    border: 1px solid lightgray;
    background-color: #595959;
    text-align: left;
    font-weight: normal;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 260px;
}
.FilterBox *{
    box-sizing:border-box
}
.FilterBox input[type="text"], .FilterBox select{
    width:100%;
    margin-bottom: 5px;
}
#detailTable th {
    position: relative;
    white-space: nowrap;
}
#detailTable th.hasFilterOptions{
    padding: 6px 22px 6px 0px;
}
.toggleTrigger{
    position: absolute;
    top: 50%;
    right: 3px;
    width: 15px;
    margin-top: -7px;
}
.toggleTrigger img{
    width: 100%;
}