body {
    background: #fff;/* For browsers that do not support gradients */    
   
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Roboto, sans-serif;
  }
  #chartdiv {
  width		: 100%;
  height		: 500px;
  font-size	: 11px;
  position: absolute;
  left: 0px;
  }							
  
  td {
  font-family:Verdana;
  font-size: 11px;
  font-weight:bold;
  }
  #mapid { height: 210px;  width: 100%;}
  body{ background:url("/img/pexels-photo-157827.jpeg");}
  div#wrapper{max-width:1920px; margin: 0 auto; vertical-align: top; position:relative; background: #fff;}
  div#wrapper.fullScreen{width:100%; margin:auto;}
  div#wrapper.fullScreen footer{margin: 0 auto;}
  
  div.header{position:relative; min-height:150px; vertical-align:bottom;}
  h1{align:left; margin:0px; background:#c61416; color:#fff; font-size:35px; text-align:center; vertical-align:bottom;padding:30px; clear:both;box-shadow: 0px 5px 10px #333;}
  div#sideBar{width: 15%; min-width:200px; z-index:10;  margin: 0 20px 0 0;  display:inline-block;  color:#a6a6a6;}

  #sideBar .subMenu{margin: 0 0 0 2em; }
  #sideBar .subMenu li a{font-size:0.8em;}

  #sideBar .subMenu h3{font-size:1.2em; font-weight:bold; background: #333; padding:0.1em 0.8em;}
  #sideBar .subMenu ul{}
  #sensorDetails{margin-left: 2em; background:#ddd; }
  #sensorDetails table.dataPanel{ margin:0 0.3em; }
  
  .rightSidebar{ position:absolute; right:0px; width:30%; top:285px;}
  
  
  
  aside.secondary{ background:#f2f2f2; padding:10px 20px 10px 20px;} 
  aside.secondary table{width:100%;}
  aside.secondary th{text-align:left; padding-right:30px;}
  aside.secondary a{cursor:pointer;}
  aside.secondary tr{font-family:sans-serif;}
  
  aside#secondaryDetails{color:#000; font-weight:bold;}
  
  #menu ul{padding-left:0px; font-family:Sans-serif; color:rgb(103, 107, 109); margin:0px;}
  #menu li{border-bottom:2px solid #666; list-style-type: none; background: #f2f2f2;  text-align: right; font-size: 1.3em; color:#666; min-height:2em;}
  #menu li:hover{ background:#ccc; }
  #menu li a{ color: #666; text-decoration: none; display:block; width: 100%; padding: 5px 20px; font-family: 'Rubik', sans-serif;}
  
  .footer{width: 1920px; background:#f2f2f2; clear:both;display:flex;}
  .footerLinksColumn{ width: 24%; vertical-align: top; min-width:20em;}
  .footerLinksColumn li{list-style-type:none;}
  
  #menuBar ul li{ list-style-type: none;  }
  
  figure{margin:0px;}
  
  .highcharts-figure, .highcharts-data-table table {
    
    width: 100%;
    display:inline-block;
    right: 20px;
    z-index:10;
  }
  
  div#mapId{height:200px;}
  div#mapId.hidden{height:0px;}
  #voltageChart, #amperageChart, #wattageChart {
    height: 200px;
  }
  
  
  #menuBar{width:20%;}
  #phaseContainer{width: 50%; display:inline-block; vertical-align: top;}
  
  #phaseKey {font-family: sans-serif; color:000;}
  #phaseKey h2{font-size: 1.2em;}
  #phaseKey li{list-style-type:none;}
  #phaseKey li span{font-size:1.5em; padding-right:0.5em;}
  div#help{margin-top:20px; }
  div#helpLink{margin-top:0.5em; text-indent: 20px; cursor:pointer; font-size: 1.5em; float:left; border-radius: 0 0 10px 0; font-weight:bold; font-family:sans-serif; background:#f2f2f2; display:inline-block; padding-right:1em; text-align: center;}
  aside.historyCharts{display:inline-block; vertical-align: top; width:100%;}
  
  ul.dateNavigation {display:inline-block; list-style-type: none; width:40%; background:#fff;  text-align: center; font-family: sans-serif;}
  a#dateNavigationSubmit{text-decoration:none; color:#333; width:100%; height:100%; display: inline-block; padding:3px; border: 1px solid #333; padding:4px 5px; margin: 5px 0;}
  a#dateNavigationSubmit:hover{background:#ccc;}
  
  h3#currentTime{color:#000; font-weight:normal; margin-top:0px;}
  div.footer a{color:#000; font-family: sans-serif; text-decoration: none;}
  div.footer a:hover{text-decoration: underline;}
  
  div.modal{ width: 50%;  margin-left:25%; height: 50%;  padding:2em; background:#c2c2c2; border-radius:1em; margin: 1em 1em 1em 25%; font-size:2em;}
  div.modal input{ height:2em; width: 47em; }
  div.modal div.formRow label{min-width: 10em; display:inline-block;}
  #login input{border-radius:3px;}
  #login input.submit{width:100%; height:3em;}
  
  div.formRow{margin-bottom:1em;}

  div.flexBox{display:flex;margin: 20px 0;}
  div.flexBox div.content{width:100%;}

  .interactionCard{width: 45%; min-width:20em; margin: 40px auto;}

  body table.dataTable tbody tr{background-color: #f3f3f3;
    border-bottom: 1px solid #fff;
}
body table.dataTable tbody tr:hover{ background:#ccc;}
  body table.dataTable tbody td{font-weight:normal;border-bottom:1px solid #fff; padding:0;}
  body table.dataTable tbody td a{display:block; width:100%; height:100%; padding: 8px 10px;}

  
  .contentBlock{ padding: 1em;}
.editableDetails {background:#ddd;}

input{padding:0.5em 1em;}

.loggedInUserDetails a:hover{text-decoration:underline; color:#fff;}
.loggedInUserDetails a{color:#ccc;}
.loggedInUserDetails{box-shadow: 0px 5px 10px #333; box-shadow:inset;float:right; width:20%; padding:1em; background:#333; color:#ddd; height:8em; min-width:10em;max-width:24em; margin:1em;}
.loggedInUserDetails span.userName{display:block;}
.loggedInUserDetails span.backstage{font-size:0.8em; color:#999;}
.loggedInUserDetails a.adminLink{display:block;}


th{text-align: left;}
h2{font-size:1.8em; font-weight:bold; height:1.5em; border-bottom:2px solid #333; color:#333;}
h3{font-size:1.3em; font-weight:bold;}

.dataTables_wrapper{margin-top:0.5em;}
.content .dataTables_wrapper .dataTables_length select{padding-right:1em;}
.dataTables_filter{margin-right:1em;}

h4.alert{display:block; margin-bottom:0.5em; background: #990000; color:#fff; font-weight:bold; padding:0.3em 0.5em;}

.loadingData{text-align: center; font-size: 2em; color: #333;}
.loadingData img{display:inline;}

html .xdsoft_datetimepicker .xdsoft_month{ width:80px;}
html .xdsoft_datetimepicker .xdsoft_datepicker{width: 184px;}
html .xdsoft_datetimepicker .xdsoft_today_button{display:none;}
html .xdsoft_timepicker.active{margin-top:39px;}
html .xdsoft_datetimepicker .xdsoft_timepicker{width:45px;}
html .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, html .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, html .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current{background:#333; box-shadow:#333 0 1px 3px 0 inset;}
html .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover{background:#c61416;}
html .xdsoft_datetimepicker .xdsoft_calendar td:hover,
html .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
	color: #fff !important;
	background: #c61416 !important;
	box-shadow: none !important;
}
html .xdsoft_datetimepicker .xdsoft_calendar td > div{padding-right: 3px;}
html .xdsoft_datetimepicker.xdsoft_inline{border-top:0px;border-bottom:0px;border-left:0px;border-right:0px; padding-right:0px; padding-bottom:0px;}


#loadTime{display:block; cursor: pointer; background: #a6a6a6; color:#fff; padding:8px; font-weight:bold;margin-top:-5px; margin-bottom:20px; text-align: right; }