@charset "utf-8";
/* CSS Document */
* { outline:none;}
html, body { padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#001f56 url(../images/contentbg.jpg) center top repeat-x;}
h1,h2,h3 { margin:0; padding:5px; font-size:18px;}
h3 {padding:10px 10px 0 12px; font-size:16px; color:#3171b8;}
#Header h1 { float:left;}
#Header .powedby { float:right;}
#Header .poweredtitle { font-size:16px; display:inline-block; margin-top:-5px;}
/*Main Color Definition Chart*/
.low {background:#d25e00;} /*Orange*/
.lowlow {background:#a90000;}  /*Red*/
.high {background:#0060ff;}  /*Blue#0060ff*/
.normal {background:#079100;}  /*Green*/
.ullage { background:#626262;} /*Grey#626262*/
.water { background:#000;} /*Black*/
/*Main Color Definition Chart end*/
#MainWrapper { padding:0; position:relative;}
#Header {background:#f09721; color:#FFF;}
#Container {border-radius:8px; border:4px solid #f09721; margin:0 10px 10px 49px ; padding-bottom:10px; background:#FFF;}
#Top {height:150px;}
#TopLeft { float:left; padding:20px;}
#TopRight { float:right; color:#fff;padding:20px;}
#nav { position:absolute; top:186px; left:0; width:49px;}
.msg, .error, .desc  { text-align:center; padding:10px; font-size:28px; color:#3171b8;}
.error {color:red;}
.pagecont { padding:10px;}
a.prod-delete { display:inline-block; float:right;background:red;}
/*For menu*/
.selectmenu { padding:10px; width:460px; float:right;}
label { display:inline-block; padding: 5px;}
input, select { border:1px solid #3171b8; padding:5px; margin:0;}
a.botton,input[type="submit"], input[type="button"] { 
  border: 1px solid #0753a8; 
  border-top: 1px solid #64adfe;
  background: #3171b8;
  border-radius: 3px;  
  color:#fff;
  text-decoration:none;
  cursor:pointer; padding:4px 8px; margin:0 2px;}
a.botton:hover,input[type="submit"]:hover, input[type="button"]:hover { 
  border: 1px solid #c67d1b; 
  border-top: 1px solid #fcb14e;
  background: #f09721;
  text-decoration:none;
}
input {
  border: 1px solid #3171b8; 
  border-top: 1px solid #64adfe;
  background: #b4d8ff;
  border-radius: 3px;  
  color:#0753a8;
  
  }
/*Welcome page*/
ul#welcome {padding:0;list-style:none;border:none;max-width: 1200px;margin: 50px auto 20px;/* float: left; */}
ul#welcome li {display:block;margin: 0 1%;background: rgb(255, 255, 255);position:relative;overflow:hidden;float:left;width: 23%;height: 250px;text-align: center;border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;border: 0px solid #000000;}
ul#welcome li:hover {background: #F09721;}
ul#welcome li span.icon{font-size: 12.2em;line-height: 1.4em;display: block;}
ul#welcome li span.title{font-size: 1.9em;line-height: 1em;text-transform: uppercase;}
ul#welcome li a{color: #F09721;margin: 0;padding: 0;padding: 0 10px;display: block;text-decoration: none;}
ul#welcome li a:hover{color: #F09721;color: #3171B8;}
ul#welcome li.disabled {color: #A0A0A0;cursor:pointer;}
ul#welcome li.disabled:hover{background: rgb(255, 255, 255);}

/*Singles page*/
.SingleColorExp {padding:10px;}
.SingleLeft {float:left; width:280px;}
.SingleRight { float:left;width:80%;}
.TanksTitle, .SiteTitle{ font-size:16px; font-weight:bold;}
.label { display:inline-block; width:110px; font-weight:bold;}
.TanksRows .output { display: inline-block; width:140px; text-align: right;}
.Slabel {display:inline-block; width:110px; font-weight:bold;}
.SiteHolder .label { width:55px;}
.TankHolder, .SiteHolder {margin:10px 0 10px 10px; border:2px solid green; border-radius:8px;}
.TanksTitle,.SiteTitle { padding:5px; background:green; color:#fff;}
.SiteTitle{background:#3171b8;}
.SiteHolder {border:2px solid #3171b8;}
.TanksRows, .SiteRows, .TankDashRows,.singletextcolwrap { padding:2px 5px;}
.Shigh {border:2px solid #0060ff;}
.Slow {border:2px solid #d25e00;}
.Slowlow {border:2px solid #a90000;}
.Snormal {border:2px solid #079100;}
.Shigh .TanksTitle {background:#0060ff;}
.Slow .TanksTitle{background:#d25e00;}
.Slowlow .TanksTitle{background:#a90000;}
.Snormal .TanksTitle{background:#079100;}
/*DashbordPage*/
.colordefchart { margin:1% 1% 0 1%;border-bottom:2px solid #f09721; padding-bottom:10px;}
.ColorExpWrap { width:695px; margin:0 auto;}
.textcolwrap { float:left; color:#3171b8; font-weight:bold; text-align:center; padding:5px; margin:0 1px; border: 1px solid #dcedff;border-radius:3px;}
.colorbox { display:inline-block; width:13px; height:13px; margin:0 5px; border-radius:4px;}
.Holder { width:45.8%; float:left; padding:1.15%; margin:1% 0 0 1%; border-radius:8px; border:2px solid #3171b8; }
.hide { display:none;}
.Holder input[type="submit"], .Holder a.botton { display:block !important; border:none; background:#3171b8; color:#fff; text-align: center;}
.Holder .cols3 { width:32%; height:120px; float:left;}
.detailcols3 { width:30.8%; float:left; border-radius:8px;}
.TankDash {  margin:0 0 1% 2%; color:#fff; text-align:center; }
.TankDash .label { width:30px;}
.TankDashTitle { font-size:15px;}
.Titleprod { font-weight:bold;}
.TanksHolderDash {border-bottom:2px solid #3171b8; }
.dashsite {padding: 5px 0; margin-bottom:5px}
.date { text-align:center; color:#3171b8; font-weight:bold; font-size:18px; padding-right:2%; }
/*Forms*/
form { padding:0; margin:0;}
.inputwr { margin:1px;}
label { display:inline-block; width:80px;}
#ContentWrapper {min-height:500px; background:#fff;}
.allholder {padding:10px;}
#nav ul { padding-top:1px;}
#nav ul { margin:0; padding:0; list-style:none; border:none;background:#fff;}
#nav li { display:block; background:#fff;position:relative; height:55px; overflow:hidden; width:45px;border-top-right-radius:15px; border-bottom-right-radius:15px; border:2px solid #fff; margin-bottom:1px;}
#nav a { text-decoration:none; color:#3171b8; display:block; padding:18px 18px 18px 55px; font-size:16px; width:300px !important; position:absolute; background:#fff url(../images/icons.jpg) no-repeat; overflow:hidden;}
#nav a:hover { color:#f09721;}
#nav li.dash a { background-position:0 -321px;}
#nav li.chart a { background-position:0 -321px;}
#nav li.single a {background-position:0 -507px;}
#nav li.map a {background-position: 0 -1154px;}
#nav li.config a {background-position:0 -156px;}
#nav li.user a {background-position:0 -8px;}
#nav li.logout a {background-position:0 -719px;}
#nav li.data a {background-position:0 -8px;}
#nav li.threshold a {background-position:0 -933px;}
/*hover menu*/
#nav li.dash:hover a, #nav li.dash a.active { background-position:0 -410px;}
#nav li.chart:hover a, #nav li.chart a.active { background-position:0 -410px;}
#nav li.single:hover a, #nav li.single a.active {background-position:0 -603px;}
#nav li.map:hover a, #nav li.map a.active {background-position:0 -1265px;}
#nav li.config:hover a, #nav li.config a.active {background-position:0 -237px;}
#nav li.user:hover a, #nav li.user a.active {background-position:0 -77px;}
#nav li.threshold:hover a, #nav li.threshold a.active{background-position:0 -1043px;}
#nav li.logout:hover a {background-position:0 -827px;}
#nav li.data:hover a, #nav li.data a.active {background-position:0 -77px;}
.allholder {border-bottom:2px solid #3171b8;}
#Right {width:75%; float:left; padding:5px;}
#RightContent {padding:0; display:block; float:none;}
.prodid,.prodtype,.prodalias, .tankid,.tank {float:left; padding:5px; margin:1px;}
.prodid,.tankid {width:30px;}
.prodtype,.prodalias, .tank {width:200px;}
.rows {background:#abd3ff;}
.cols { background:#abd3ff;}
.cols {float:left; width:19%; margin-right:0.5%; padding:5px; margin:1px;}
.col1 {width:18.5%;}
.col2 {width:18%;}
.col3 {width:17%;}
.col4 {width:16%;}
.col5 {width:15%;}
.col6 {width:8%;}
.id { width:20px;}
.titles {background:#3171b8; font-size:16px; color:#fff;}
a { color:#d87000; text-decoration:none; font-weight:bold;} a:hover {text-decoration:underline;}
a.delete { display:inline-block; background:#bf0000; padding:5px; color:#fff;margin:1px;}
a.new{ display:inline-block; background:#d87000; padding:5px; color:#fff; font-size:16px; font-weight:normal; margin:1px;}
a.cancel {display:inline-block; background:#d87000; padding:6px; color:#fff;}
/*Sites*/
.widthlarge { width:95%; padding:10px;}
.sitedid,.sitename, .siteadres, .sitewijk, .sitetel, .siteemail,.samewidth { float:left; padding:5px; margin:1px;width:200px;}
.sitedid {width:30px;}
/*Threshold*/
.ThresholdWrapper { padding:1%;}
.ThresholdWrapper .row {}
.ThresholdWrapper .label { width:65px;}
.inputthreshold { width:25px; text-align:center;}
.ThresholdWrapper .row .label, .ThresholdWrapper .row .output {margin:1px; padding:5px;}
.ThresholdWrapper .row:nth-child(even) .output, .ThresholdWrapper .row:nth-child(even) .label {background:#90bbea;}
.ThresholdWrapper .row:nth-child(odd) .output, .ThresholdWrapper .row:nth-child(odd) .label {background:#d8eafe;}
.botton { display:inline-block; padding:5px; background:#f09721; color:#fff; margin-left:5px;}
.sitetel {}
.siteemail {}
/*Footer*/
.disclamer {padding: 10px 5% 20px;text-align:center;color:#fff;float: left;width: 90%;}
/*Map*/
#divmap {
    width: 100%;
    height: 800px;
    margin: 0;
}
#marker_info_content{/*
display: inline-block; overflow: auto; max-height;: 528px; max-width: 954px;*/min-width: 200px;}
#marker_info_content label{/* float:left; */display:block;/* width: 100%; */}
#marker_info_content #slider{/* width:200px; */min-width: 135px;height: auto;}
#marker_info_content #slider ul li{ top:-12px; left:0;}
#marker_info_content #content{ margin:0 0 0 5px;}
#marker_info_content #content .address{ font-style:italic;}
#marker_info_content #content h3{ margin:0; padding:0;}
#marker_info_content #slider, #marker_info_content #content{float:left;overflow: hidden;}
/*DropDowm Maps*/
.dropdown {
    position: relative;
    width: 200px;
  float:left;
}
.dropdown select
{
    width: 100%;
}
.dropdown > * {
    box-sizing: border-box;
    height: 1.5em;
}
.dropdown select {
}
.dropdown input {
    position: absolute;
    width: calc(100% - 20px);
}
/*Mobile*/
@media only screen and (max-width: 1750px) {
 .SingleRight {width:78%;}
}
@media only screen and (max-width: 1575px) {
 .SingleRight {width:72%;}
}

@media only screen and (max-width: 1327px) {
 .SingleRight {width:65%;}
}

@media only screen and (max-width: 1130px) {
 .SingleRight {width:62%;}
 ul#welcome li span.icon{font-size: 11.2em;line-height: 1.4em;}
ul#welcome li span.title{font-size: 1.7em;line-height: 1em;}
ul#welcome li {height:240px;}
}

@media only screen and (max-width: 962px) {
 .SingleRight {width:57%;}
}
@media only screen and (max-width: 855px) {
 .SingleRight {width:50%;}
  ul#welcome li span.icon{font-size: 10.2em;line-height: 1.4em;}
ul#welcome li span.title{font-size: 1.5em;line-height: 1em;}
ul#welcome li {height:230px;}
}