/*
//Copyright 2017 Made Headway Limited
*/

/*@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&subset=latin-ext');*/

/* Reset css */
/* Global styling: */
form, table, td, tr, button, br, img, h1, h2, h3
{   margin: 0;   padding: 0;}
img
{   border: 0;}
html
{   overflow-y:scroll;}
body
{ 
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;  
  margin:0;   padding:0; background-color:#CCC; }
span
{   min-height:1px;}
input[type="text"], input[type="password"]
{  -moz-box-sizing:    border-box;  -webkit-box-sizing: border-box;   box-sizing:        border-box;}
label input[type="radio"]
{ position:relative; top:2px;}
input.text, textarea, select
{   font-size:14px;   padding:1px 1px 1px 1px;   border-top:1px solid #777;   border-left:1px solid #ccc;   border-right:1px solid #ccc;   border-bottom:1px solid #ddd;   background-color:#fff;   resize:none;}
table
{   border-collapse:collapse;}
td
{   vertical-align:top; font-size: 14px;}

hr
{   border:0;   width:95%;   height:1px;   color:#FF7F27;   background-color:#FF7F27;}

h1,h2 { color:#444; font: 24px 'Source Sans Pro', sans-serif; } 

textarea
{   height:90px;}

button
{ border-radius: 12px;  white-space:nowrap;   cursor:pointer;   font-size:15px; 
  background-color:#FF7F27;   color:#FFF;   
  padding:6px 12px; border: none; margin: 1px;}
button:hover
{   background-image:none;   background-color:#BB7711;}
button[disabled]
{   color:#AAA;}
.logoutBtn button
{ background-color:#999;   color:#FFF; }
.logoutBtn button:hover
{ background-color:#777;}

.alarms .objectListingTable td:last-child
{
  width:45%;
}

select, input[type=text], textarea, input[type=password]
{   font-weight:normal;  border:1px solid #ccc; font-size: 14px;}
select
{   position:relative;   top:-2px;}

/* Unselectable elements */
.noSel
{   cursor:default;   -webkit-touch-callout: none;   -webkit-user-select: none;   -khtml-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   -o-user-select: none;   user-select: none;}

a, a:link { color:#A01;}
a:link:hover { color:#F33;}


/* BMS Styling */

.headerContent
{ 
  margin:0; background-color:#FFF; padding:0px;
  position:relative;
}

.bodyContent
{ margin:16px auto; 
  width:95%; 
  max-width: 1000px;
  background-color:#FFF;
  padding:16px 24px;
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.19);
}

.ZoonexDashboard .bodyContent,
.Omnibox .bodyContent, 
.Start .bodyContent {
  background-color:transparent;
  max-width:1500px;
  box-shadow:none;
}

.ZoonexDashboard .bodyLogo,
.Omnibox .bodyLogo,
.Start .bodyLogo  {
  display:none;
}

.footerContent
{ padding:0px 0px 4px 0px; background-color:#e1e1e1; }

.headerLogo  { display:inline-block; width: 200px; padding: 12px 0 8px 12px; vertical-align:top;}
.headerLogo img  {width: 100%; height: auto;}


.breadcrumbs div, .breadcrumbs a 
{ 
  display:inline-block; 
  margin-left:8px; 
  margin-right:8px; 
  text-decoration:none;
  color:#FFF !important;
}
.breadcrumbs { background-color:#bcbcbc; display:block; padding:4px 16px; cursor:default; font-weight:bold; color:#FFF; }
.breadcrumbs:before {
  content:"You are in: Omni ";
}

.userNote
{ color:#FFF; padding:4px 10px; background-color:#EFEFEF; color:#999; }
.logoutBtn { display:inline; }
.logoutBtn button { background-color:transparent !important; border:hidden; padding:0; margin-left:12px; text-decoration:underline; color:#999; }
.logoutBtn button:hover { color:#FF7F27; }

.footer
{ text-align:center; color:#111; }

.footerCredit {color: #666;  line-height: 4.5em;}

.clearer
{ clear:both;}


/* Start screen */
.userChoice
{ display:inline-block; width:140px; height:65px; vertical-align:middle; line-height:65px; text-align:center; border:1px solid #AAA; margin:24px 16px; cursor:pointer;

  background-color:#DDD;}
.userChoice:hover
{ background-color:#888; color:#FFD;}

.sectionTitle
{ color:#444; font: 24px 'Source Sans Pro', sans-serif; }

.sectionContent
{}

.validIdentities
{ text-align:center;}

.authBox {
  position:relative;
  overflow:visible;
  background-color:#FFF;
  max-width:460px;
  margin:32px auto;
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.19);
  padding:12px 26px;
}
.authBox .authLogo {
  background: transparent url(/images/icons/key.svg) no-repeat top right;
  position:absolute;
  top:-22px;
  right:16px;
  width:64px;
  height:64px;
}

.loginBox
{ width:80%; margin:16px auto; text-align:center;}
.loginTableField
{ text-align:right;}

.centreTable
{ margin:8px auto;}
.centreTable td
{ padding:4px 6px; /*border:1px solid #DDD;*/
}

.optionList a
{ color:#000 !important; background-color:#DDD; display:block; border:1px solid #888; font-style:normal; margin: 24px auto; width:80%; height:65px; line-height:65px; vertical-align:center; text-align:center; text-decoration:none;}
.optionList a:hover
{ background-color:#888; color:#FFD !important;}

.ral
{ text-align:right;}

.cal
{ text-align:center;}

.searchResults
{ margin-top:24px;}

div.error
{ width:98%; background-color:#FDD; border-top:2px solid #FF7F27; border-bottom:1px solid #FF7F27; margin:8px 0px; padding:4px 1%; text-align:center;}
div.message
{ width:100%; background-color:#FDD; border-top:2px solid #FF7F27; border-bottom:1px solid #FF7F27; margin:8px 0px; padding:4px; text-align:center;}

.staticContentAnnotation { width:98%; background-color:#c2ec7e; border-top:2px solid #FF7F27; border-bottom:1px solid #FF7F27; margin:8px 0px; padding:4px 1%; text-align:right;}

.centreTable tr.head td
{ background-color:#DDD !important; color:#000 !important; font-weight:400; text-align:center; border:1px solid #FFF; border-bottom:1px solid #666; cursor:normal !important;}
.centreTable tr.even td
{ background-color:#EEE;}

.searchResults .centreTable tr:hover td
{ cursor:pointer; background-color:#888; color:#FFF;}

tr.underlined td
{ border-bottom:2px solid #666;}

#autocompleteOutput
{ margin:8px 16px; padding:8px;}


/* Status styling */
.topSection
{ padding:0px 1% 24px 1%;}

.regionRow
{ clear:both;}

.region
{ background: #fff none repeat scroll 0 0; border: 4px solid #CC8811; margin:0px 1% 0px 1%; float: left; overflow: hidden; vertical-align: top; white-space: normal; width: 80vw;}

.region .region
{ background-color:#DCC;}

.region.branchRegion
{ display:block; float:none; width:100%; margin-bottom:16px;}

.region.tillRegion
{ width:58%;}

.region.tourRegion
{ width:36%;}

.region.alertRegion
{ width:47%;}
.region.patchRegion
{ width:47%;}

.region .title
{ color:#FF7F27; font-size:24px; font-weight:400; padding:4px 12px 8px; margin-bottom:16px; }


.tills
{ /*width:94%;*/
  margin:0px 1% 12px; padding:6px 26px 6px 6px; background-color:#EEE; border:1px solid #000; min-height:348px; overflow-y:scroll; overflow-x:hidden; text-align:center;}

.tills .till
{ text-align:left; display:block; float:left; border:1px solid #000; min-height:180px; min-width:200px; width:25%; margin-bottom:12px;}

.till .transaction
{ margin:4px;}

.till .transaction td /*table tr td:nth-child(1)*/
{ text-align:right;}

.sensibleTable tr.hd td
{ font-weight:400; border-bottom:1px solid #444; background-color:#EEF;}

.sensibleTable tr.hd2 td
{ font-weight:400; border-bottom:1px solid #444; background-color:#EEF;}

.sensibleTable
{ width:100%; margin-bottom:12px;}
.sensibleTable td
{ padding:4px;}

.supervisorContent .sensibleTable tr.hd td
{ border-left:1px solid #AAA; border-right:1px solid #AAA; padding:4px 8px; white-space:normal;}

.supervisorContent .sensibleTable td
{ white-space:nowrap;}

.sensibleTable tr.even td
{ background-color:#DDE;}

.dataColumnLeft
{ border-left:1px solid #999; padding-left:8px; text-align:right;}
.dataColumnRight
{ border-right:1px solid #999; padding-right:8px;}

.toursContainer
{ min-height:200px; max-height:360px; margin:12px; overflow-y:scroll; overflow-x:hidden; padding-right:20px;}

.alertsContainer, .patchContainer
{ height:200px; margin:12px; overflow-y:scroll; overflow-x:hidden; padding-right:20px;}

.clickShield.dragManager { background-color:rgba(0,0,0,0) !important;}

.clickShield
{ background-color:rgba(16,0,1,0.1); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; pointer-events: all;}

.buggyBrowser .clickShield
{ background-color:rgba(0,0,0,0.25);}

.clickShield.dragManager {
}
.dragWrap { display:block; position:absolute; overflow:visible; width:1px; height:1px;}
.dragWrap * { cursor:grab;}

.dialogContainer
{ position:absolute; top:50%; left:50%; overflow:visible;}
.dialog
{ position:absolute; box-shadow: 0px 0px 14px #000;}
.dialog .content
{ max-height:400px; overflow-y:auto; overflow-x:hidden; padding-right:20px; margin:16px;}
.dialog .controls
{ padding:4px 16px 12px;}

.tour_error
{ color:#800;}
.tour_warning
{ color:#A80;}


#logContainer
{ margin:0px 32px 12px; width:98%; overflow-y:scroll; overflow-x:hidden; padding-right:20px; min-height:400px; max-height:500px;}

/* Menus */

#dynamic-menu, #dynamic-menu div.topmenu
{ display:inline;}

#menuLegend td { padding:4px; vertical-align:middle;}

.menuControl { width:32px; padding:0px 0px 2px; position:relative; top:2px;}

.linkList { 
  display:inline-block;
  width:calc(100% - 322px);
  vertical-align:middle;
  text-align:right;
  padding-top:20px;
}

*[_link] {
  background-repeat: no-repeat;
  background-position:50% 12%;
  background-size:58%;
}

.bodyLogo {
  position:relative;
  background-position:50% 40%;
  top:-32px;
  display:block;
  width:84px;
  height:84px;
  float:right;
  background-color:#888;
  border-radius:44px;
}

.linkList a {
  display:inline-block;
  width:84px;
  height:34px;
  border-radius:12px;
  margin:4px;
  vertical-align:top;
  
  padding-top:50px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  color:#FFF;
}
.linkList a span {
  height:34px;
  width:84px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
.linkList a:hover {
  color:#FFF;
}

a.colourA { background-color: #ffb027; }
a.colourA:hover { background-color: #e59e23; }
a.colourB { background-color: #ff9c27; }
a.colourB:hover { background-color: #e58c23; }
a.colourC { background-color: #ff7f27; }
a.colourC:hover { background-color: #e57223; }
a.colourD { background-color: #ec6646; }
a.colourD:hover { background-color: #d45c3f; }
a.colourE { background-color: #ec4646; }
a.colourE:hover { background-color: #d43f3f; }
a.colourF { background-color: #4588aa; }
a.colourF:hover { background-color: #3e7a99; }
a.colourG { background-color: #6099b6; }
a.colourG:hover { background-color: #5689a3; }
a.colourH { background-color: #5ba9d2; }
a.colourH:hover { background-color: #5298bd; }
a.colourI { background-color: #666; }
a.colourI:hover { background-color: #333; }
a.colourJ { background-color: #fb7c01; }
a.colourJ:hover { background-color: #86690a; }

/* All links */
*[_link="Omnibox"] {
  /*display:none !important;*/
}
*[_link="Energy Report"] {
  background-image:url('/images/icons/icons-energy-report.svg');
}
*[_link="Dashboard"] {
  background-image:url('/images/icons/icons_training.svg');
}
*[_link="Machine Protection"] {
  background-image:url('/images/icons/icons_admin.svg');
}
*[_link="Comfort Levels"] {
  background-image:url('/images/icons/icons_profile.svg');
}
*[_link="Sub Meters"] {
  background-image:url('/images/icons/icons_dashboard.svg');
}
*[_link="Building Efficiency"] {
  background-image:url('/images/icons/icons_building_efficiency.svg');
}
*[_link="A/C Unit Efficiency"] {
  background-image:url('/images/icons/icons_HStop.svg');
}
*[_link="Alarms"] {
  background-image:url('/images/icons/icons_alarms.svg');
}
*[_link="Buildings"] {
  background-image:url('/images/icons/icons_buildings.svg');
}
*[_link="Devices"] {
  background-image:url('/images/icons/icons_audit.svg');
}
*[_link="Customers"] {
  background-image:url('/images/icons/icons_users.svg');
}
*[_link="On-site Instances"] {
  background-image:url('/images/icons/icons_centralDocs.svg');
}
*[_link="Users"] {
  background-image:url('/images/icons/icons_user.svg');
}
*[_link="Config"] {
  background-image:url('/images/icons/icons_techLib.svg');
}
*[_link="Login"] {
  background-image:url('/images/icons/key-white.svg');
}
*[_link="AMT Controllers"] {
  background-image:url('/images/icons/amt.svg');
}

/* Zoonex */
*[_link="Zoonex"] {
  background-image:url('/images/icons/icons_zoonex.svg');
}
*[_link="Omnibox"] {
  background-image:url('/images/icons/icons_omni.svg');
}
*[_link="Logs"] {
  background-image:url('/images/icons/icons_logs2.svg');
}
*[_link="Automated Alarms"] {
  background-image:url('/images/icons/icons_alarms.svg');
}
*[_link="Scheduling"] {
  background-image:url('/images/icons/icons_schedule.svg');
}
*[_link="Devices"][href="zoonexdevices"] {
  /* Override this one */
  background-image:url('/images/icons/icons_zoonex.svg');
}

a.omniPageLink {
  display:inline-block;
  font: 17px 'Source Sans Pro', sans-serif;
  color: #444444;
  line-height: 56px;
  text-decoration:none;
  
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.19);
  background-color: #efefef;
  background: #EFEFEF url('/images/strike.svg') no-repeat 8px 50%;
  background-size:40px;
  margin: 8px 16px 8px 0px;
  padding: 0px 8px 0px 56px;
  width: 292px;
  height: 56px;
  transition: background-color .5s;
}

.topSurround {
  min-height:calc(100vh - 4.5em - 5px);
}

a.omniPageLink:hover {
  color:#444;
  background-color:#FFF;
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.35);
}

/* Week selector */

#weekChoice .week
{ border:1px solid #CCC; background-color:#EEE; padding:4px; margin:1px; cursor:pointer; text-align:middle;}

#weekChoice .week.selected
{ border:1px solid #000; background-color:#AAA;}

#weekControl
{ text-align:center;}


#dayChoice .day
{ float:left; width:40px; height:20px;

  border:1px solid #CCC; background-color:#EEE; padding:4px; cursor:pointer; text-align:middle;}

#dayChoice .day.selected
{ border:1px solid #000; background-color:#AAA;}

#dayChoice .day.other
{ background-color:#99C;}

#dayChoice .day.colhead
{ text-align:center; background-color:#FDA; border:1px solid #FFF; border-bottom:2px solid #222;}
#dayChoice .day.colhead.wkend
{ background-color:#FFA;}



#dayChoice
{ width:354px; margin:2px auto;}

.dlgContent {  margin:2px 16px 8px;}

.objectDataTable { width:95%; margin:0px auto;}
.objectDataTable select, .objectDataTable input[type="text"], .objectDataTable input[type="password"], .objectDataTable textarea { width:100%;}
.objectDataTable input[type="file"] { width:190px;}
.objectDataTable td { padding:4px;}

.objectDataTable input[type="text"].sliderValue { width:64px; text-align:center; background-color:#EEE; margin-right:32px;}
.objectDataTable .ui-slider
{ display:inline-block; width:360px;}

.mini .objectListingTable
{ max-height:220px; }

.objectListingTable
{ margin:12px 0; max-height:220px; min-height:128px; border:1px solid #DDD;}

#sensorSummary .objectListingTable { height:inherit;}
.ItemStatusChangeRequest.objectListingTable { max-height:80vh;}

.objectListingTable {overflow: auto;}

.objectListingTable table { width:100%;}
.objectListingTable td { padding:4px 8px; border-right:1px solid #fff; border-left:1px solid #FFF; background-color:#e1e1e1; cursor:default;}
.objectListingTable tr td:last-child { border-right:0px none;}
.objectListingTable tr.selected td{ color:#FFF; background-color:#888 !important;}
.objectListingTable tr.selected a { color:#FFF !important;}
.objectListingTable tr.selected a:hover { color:#000 !important;}

.objectListingTable tr:nth-child(2n+1) td { background-color:#EEE;}

.objectListingTable tr.hd td { background-color:#999; color:#FFF; cursor:normal;}
.objectListingTable tr.hd td.sortHeader { background-color:#DDF; color:#444;}

.objectListingTable.User {
  max-height:80vh;
}

.objectListingTable tr.airconLine:hover td {
  background-color:#FFA !important;
}

.objectListingTable.OnsiteItem, .objectListingTable.OnsiteInstance, .objectListingTable.KindOfDevice {
  border:none;
  min-height:auto;
  max-height:none;
}

.objectListingTable.OnsiteItem tr.highlight td {
  background-color:#FFA;
  color:#A40;
}

.objectListingTable tr.searchSubsetHeader td {
  padding:16px 4px 8px 4px;
  background-color:#FFF;
  text-align:center;
  font-weight:bold;
}

.objectControls button { margin-left:16px;}

.graphWrap {
  position:relative;
}
#graphOverlay {
  position:absolute;
  top:0px;
  right:0px;
  width:195px;
  height:82px;
  pointer-events:none;
  background: transparent url('/style/logo.png') no-repeat 100% 0%;
  background-size:100%;
}

.pseudoArrayListing { overflow-y:scroll; height:128px; border:1px solid #000; background-color:#FFF; margin:4px;}

/* Availability stuff */

.dayLine { display:block;}
.dayLine:nth-child(2n) { background-color:#EEE;}
.dayLine div { display:inline-block; padding:4px;}
.dayLabel { width:90px; font-weight:400;}
.dayNumeral { width:25px;}
.dayPreference {
}
.dayComment input { width:100%;}

.availabilitySettings { margin:16px 0px 20px;}
.availabilitySettings td:first-child { width:130px; padding-top:6px;}
.availabilitySettings td { padding:3px 6px;}
.availabilitySettings select, .availabilitySettings input[type="text"], .availabilitySettings textarea
{ width:100%;}

.availabilitySettings.config input[type="text"] { width:120px;}

.configSettings .parameterLine { background-color:#EEE; padding:4px 12px;}
.configSettings .parameterLine:nth-child(2n) { background-color:#FFF;}
.configSettings .parameterLine div { display:inline-block; vertical-align:top;}
.configSettings .parameterLine .parameterKey { width:200px;}
.configSettings .parameterLine .parameterValue { width:70%; min-width:320px;}
.configSettings .parameterLine .parameterValue input[type="text"],
.configSettings .parameterLine .parameterValue textarea { width:100%;}

.slotList { height:500px; overflow-y:scroll; border:1px solid #666; padding:4px;}
.slotList .templateSlotStation { padding:2px 4px; border:1px solid #AAA;}
.slotList .templateSlotRole { padding:2px 4px; margin:4px; border:1px solid #DDD;}
.objectDataTable .slotList input[type="text"] { width:80px ;}
.slotList .templateSlot { padding:4px; margin:4px; border-bottom:1px dashed #999;}

/* Templates */
.dayTemplate { display:inline-block; font-size:12px; font-weight:400; border:1px solid #666; padding:2px 8px; margin:2px 8px; background-color:#FFF; color:#000 !important;}
.dayTemplate.weekDay { background-color:#8AF;}
.dayTemplate.weekend { background-color:#FAD;}

table.dayTemplateListing { margin:4px auto;}

.rosterManagement { width:100%;}
.rosterManagement .pane { display:inline-block; padding:2px; margin:1%; min-height:600px; vertical-align:top;}
.rosterManagement .allocation.pane { width: 74%; min-width:740px;}
.rosterManagement .controls.pane { width:20%; min-width:200px;}


/* Roster itself */

.rosterManagement .hd td, .fullRoster .hd td { font-weight:400; border-bottom:1px solid #000;}

.rosterManagement td, .fullRoster td { padding:4px;}

.slot, .nonslot, .hoverSlot { cursor:pointer; font-size:10px;}

.fullRoster { min-width:900px;}

.hoverSlot { overflow:hidden;}

.slot.early { background-color:#FED;}
.slot.late { background-color:#DEF;}
.nonslot { background-color:#CCC;}

table.slotSelection { width:100%;}
.slotSelection td { border:1px solid #CCC;}

#staffListRole { max-width:220px;}

.staffDragList { max-height:60vh; border:1px solid #FFF; padding:2px; overflow-y:scroll;}

.stationSection { padding:4px 8px; margin:4px 8px 12px; border:1px solid #666; background-color:#EEE;}
.stationTitle { font-size:20px; font-weight:400;}

#staffLists .roleSection { padding: 4px 4px; margin:0px 0px 0px 8px;}

.dragableUser, .userHeader { width:65%; overflow:hidden; font-size:13px;}
.userLine .userMetrics { width:34%;}
.userLine .metric, .userLine .metricHeader { width:33%; text-align:right;}
.userHeader, .metricHeader { background-color:#EEE; border-bottom:1px solid #060; padding-bottom:3px;}

.roleSection { padding:4px 8px; margin:4px 8px; border:1px solid #666;}
.roleTitle { font-size:18px; font-weight:400; background-color:rgba(0,0,0,0.4); color:#FFF; padding:2px 4px 4px;}

.dayCol { width:11%; font-weight:400; text-align:center; padding:4px 8px;}

/* Bookings */
.bookingsExpander { text-align:right; margin:4px 12px 16px;}
.bookingDetail { display:none; margin:4px 12px;}
.bookingDetail table { width:100%;}
.bookingDetail td { border:1px solid #CCC; background-color:#FFF;}

/* Editable slots */
.editableSlots .slot, .editableSlots .nonslot
{ border:1px solid #000;}
.editableSlots .slot:hover, .editableSlots .nonslot:hover
{ border:3px solid #000;}
.editableSlots .slots input { max-width:80px;}

.scheduleSummary { min-width:60%; margin:4px auto;}

.scheduleSummary td { padding:4px 8px; border-right:1px solid #DDD;}
.scheduleSummary tr.selected td{ color:#FFF; background-color:#888 !important;}
.scheduleSummary tr td:first-child { text-align:center;}
.scheduleSummary tr.selected a { color:#FFF !important;}
.scheduleSummary tr.selected a:hover { color:#000 !important;}

.scheduleSummary tr:nth-child(2n+1) td { background-color:#EEE;}

.scheduleSummary tr.hd td { font-weight:400; border-bottom:2px solid #000; border-right:1px solid #FFF; background-color:#DDF; cursor:normal;}
.scheduleSummary tr.hd td.sortHeader { background-color:#BBD; color:#FFF;}

.scheduleSummary tr.add td{ background-color:#AFA !important;}
.scheduleSummary tr.del td{ background-color:#FAA !important;}

.op { display:block; margin-top:6px; padding-bottom:6px; border-bottom:1px dashed #DDD;}
.opControl
{ display:inline-block; vertical-align:middle; margin-left:10px;}
.opLabel { font-weight:400;}

.userLine { font-size:13px;}
.userLine.perfect { background-color:#AFA;}
.userLine.excess { background-color:#FAA;}
.userLine div { display:inline-block; vertical-align:top;}

/* Item display */
.inside {margin:4px auto;}

.objectListingTable.ActivityDocument, .objectListingTable.ActivityComment
{ height:200px;}

#historyList { max-height:160px; border:1px solid #000; background-color:#FFF; overflow-y:scroll; padding:4px;}

.visibleOnHoverOnly
{ color:rgba(255,255,255,0.1) !important;}
.visibleOnHoverOnly:hover
{ color:#00F !important;}

/* Building manager */
.frameset { position:relative;}
.frameset .split { position:absolute; overflow-y:auto; overflow-x:hidden;}
.frameset .outputFrame { overflow:auto;}

.frameset .objectListingTable { margin:4px 8px;}
.frameset h2 { margin-top:4px; margin-left:12px;}
.frameset .objectControls { margin-right:8px;}

#buildingManagerFrameset #schematic { background-color:#000; color:#FDD;}
#buildingManagerFrameset #sectorList { background-color:#FFF;}


#buildingManagerFrameset #deviceTree .deviceNode { margin:4px 2px 4px 6px; padding:2px 2px 2px 6px; border:1px solid #444; cursor:pointer; background-color:rgba(198,0,22,0.1);}
#buildingManagerFrameset #deviceTree .deviceNode a{ display:inline-block; float:right;}
#buildingManagerFrameset #deviceTree .children { clear:both;}

.leafNode { display:inline-block; color:#FFF; text-align:center; background-color:#FF7F27 !important; margin:0px 1px 0px 1px; padding:2px 12px 2px 12px; border:1px solid #444; cursor:grab !important;}
.leafNode.grabbed { cursor:grabbing !important;}

/* Floorplan controls */
.floorplanControls
{ display:block; position:absolute; bottom:5px; right:22px; text-align:right;}
.floorplanControls label { display:inline-block; background-color:rgba(0,0,0,0.7); border:1px solid #888; margin:2px 4px; padding:4px;}
.floorplanControls button { margin-left:32px;}

.simplePropsTable { width:60%; margin:8px auto;}
.simplePropsTable td { padding:4px;}
.simplePropsTable tr:nth-child(2n) td { background-color:#FFF;}
.simplePropsTable tr:nth-child(2n+1) td { background-color:#CDF;}
.simplePropsTable tr td:first-child { font-weight:400;}

.simplePropsTable tr:hover td { background-color:#FF7F27; color:#FFA;}

@media print { .topSection {   display:none; }
  .headerContent {   display:none; }
  .footer {   display:none; }
  .region {   border:0px hidden;   border-radius:0px; }
  body {   font-size:12px;   margin:0px;   background-color:#FFF; }
  .sensibleTable {   border:1px solid #888; }
  @page {   size:auto;   margin:10mm; }
}

.para { padding: 6px 0px 16px;}

#heatplotControls, #devicesByBuildingControls { text-align:center;}
.graphControl { display:inline-block; padding:6px; margin:4px; }
.graphControl .label, .graphControl .widget { display:inline;}

#sensorSummary td:last-child
{
  text-align:center;
}
.sensorHistory 
{ 
  display:inline-block;
  width:150px;
  overflow:hidden; 
  white-space:nowrap; 
  height:32px; 
  border:1px solid #AAA; 
  background-color:#FFF; 
  border-radius:4px;
  margin:4px; 
  cursor:pointer; 
}
.sensorHistory div { display:inline-block; padding:0; margin:0; font-size:1px; height:32px;}

#sensorSummary { margin:12px 16px; max-height:80vh; overflow-y:auto; border:1px solid #DDD; background-color:#EFEEEE;}

#sensorSummary table { margin:12px auto;}

a.iconHamburger {display: none;}

@media only screen and (max-width: 899px) {
  .inside { width: 100%;}
  .para { padding: 6px 0px;}
  .headerLogo {padding: 2px; width: 124px;}
  #sensorSummary {margin: 12px 0;}
  .linkList { 
    width: calc(100% - 166px);
  }
  .linkList a, .linkList .topmenu > div.menuItem { padding: 3px 6px; }
}

@media only screen and (max-width: 599px) {
  .bodyContent {width: 99%;}
  .headerLogo {padding-top: 3px;}
  .header {min-height: 50px; padding: 6px 0 0 6px;}
  .userNote {margin:0px 40px 0 0;}
  .linkList  {top:4px; right:4px;}
  .linkList a {display: none; }
  .linkList a, .linkList .topmenu > div.menuItem {border-radius: 0px;}
  .linkList.responsive {position: relative; padding-bottom: 20px;}
  .linkList.responsive a { float: none;  display: block; text-align: left; clear: both; padding: 12px; margin: -4px 0 0 4px;}
  .linkList a.iconHamburger {display: block; font-size: 2em; padding: 2px 6px; margin: 0;}
  .linkList.responsive a.iconHamburger { position: absolute; right: 0; top: 0; padding: 2px 6px;}
}

@media only screen and (max-width: 599px) {
  .userNote span {display: none;}
  .sectionContent, .loginBox {width: auto;}
  .footerCredit {line-height: 1.5em; padding: 0 10px;}
}

input.hasDatepicker {
  width:140px;
  padding-left:6px;
}

.ld-circle {
  animation: ld-opacity 0.9s linear infinite;
  fill-opacity:0;
}
.ld-circle0 { animation-delay:0.1s; }
.ld-circle1 { animation-delay:0.2s; }
.ld-circle2 { animation-delay:0.3s; }
.ld-circle3 { animation-delay:0.4s; }
.ld-circle4 { animation-delay:0.5s; }
.ld-circle5 { animation-delay:0.6s; }
.ld-circle6 { animation-delay:0.7s; }
.ld-circle7 { animation-delay:0.8s; }
.ld-circle8 { animation-delay:0.9s; }

@keyframes ld-opacity {
  20% { fill-opacity: 0; }
  40% { fill-opacity: 1; }
  100% { fill-opacity: 0; }
}

#buildingRender {
  background:linear-gradient(#fff8f8, #ffa0a0);
  border:1px solid #ff8080;
}
#buildingRender svg text {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
#buildingRender svg text::selection {
    background: none;

}

#airconplot svg {
  max-height:60vh;
}

.centileSeries.withComment:hover path 
{
  fill:#A00;
}

div.tiny {
  font-size:0.8em;
}

svg .lineHover {
  pointer-events:none;
}

svg .backdrop:hover .unnecessaryAnnotation
{
  opacity:0.3;
  transition:opacity 1s;
}
svg .unnecessaryAnnotation {
  transition:opacity 1s;
}
svg .backdrop:hover .unnecessaryAnnotation:hover
{
  opacity:1;
  transition:opacity 1s;
}
.unnecessaryAnnotation text{
  pointer-events:none;
}

svg .datapoint:hover {
  stroke-width:6px;
  stroke:#000;
  fill:#FF0;
}

.autoSizingPanel
{
  overflow:hidden;
  opacity:0;
  height:16px;
}

.Devices .find {
  display: inline-block;
  float: right;
  vertical-align: bottom;
  margin-top: 8px;
}

#devices {
  overflow-y:scroll;
  height:50vh;
  border:1px solid #DDD;
  clear:both;
}
.deviceTreeview { font-size:16px; }
.deviceTreeview input { display: none; }
.deviceTreeview input ~ ul { display: none; }
.deviceTreeview input:checked ~ ul { display: block; }
.deviceTreeview input ~ .treeLine > label:after 
{ 
  content: '+';
  text-align:center;
  line-height:14px;
  padding-top:-6px;
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  background-color:#FFF;
  border:1px solid #000;
}
.deviceTreeview input:checked ~ .treeLine > label:after { 
  content: '-'; 
}
.deviceTreeview label:hover { color:#822; }

.deviceTreeview ul:before
{
  content:'';
  position:absolute;
  top:-16px;
  width:1px;
  left:-1px;
  height:16px;
  background-color:#000;
}
.deviceTreeview ul
{
  list-style:none;
  padding-left:16px;
  margin-bottom:2px;
  position:relative;
}
.deviceTreeview ul:after
{
  content:'';
  position:absolute;
  left:-16px;
  top:0px;
  width:15px;
  bottom:17px;
  border-right:1px solid #000;
  background-color:#FFF;
}

span.unit {
  min-width:32px;
  text-align:left;
  display:inline-block;
}

.deviceTreeview ul:first-child > li:first-child > .treeLine:first-child {
  padding-top:2px;
}
.deviceTreeview .treeLine {
  padding:6px 0px 6px;
  position:relative;
}
.deviceTreeview .treeLine:hover {
  background-color:#FDA !important;
}

.deviceTreeview .treeLine.highlighted {
  background-color:#FFA;
}

.deviceTreeview label
{
  margin-left:8px;
  padding-left:32px;
  display:inline-block;
  position:relative;
}
.deviceTreeview label:before
{
  content:'';
  position:absolute;
  left:-25px;
  width:42px;
  top:8px;
  height:1px;
  background-color:#000;
}

.deviceTreeview .propertyBlock {
  position:absolute;
  right:0px;
  top:0px;
  height:100%;
  width:440px;
  text-align:right;
  overflow:hidden;
  white-space:nowrap;
}
.deviceTreeview .propertyColumn{
  display:inline-block;
  width:25%;
  margin:0px 8px 8px;
}

.commentBox {
  margin:60px 0px 60px 0px;
}

.dialog .commentBox {
  margin:76px 0px 28px 0px;
  padding:8px 12px;
  border:2px solid #565657;
}
.commentBox img {
  width:48px;
  height:48px;
  float:left;
  margin:4px;
}
.newComment textarea {
  height:56px;
  width:100%;
}
.commentBox .addCommentFrame {
  margin-top:32px;
  margin-left:72px;
}
.commentBox .commentField {
  margin-left:72px;
}
.commentBox .newComment {
  margin:4px;
}
.commentBox .commentButton {
  float:right;
  margin-top:8px;
  margin-left:16px;
}
.commentBox .comment {
  margin-top:48px;
}
.commentBox .commentContentFrame {
  margin-left:72px;
}
.commentBox .commentContent {
  margin-top:8px;
  margin-bottom:8px;
}
.commentBox .commentUser {
  font-weight:bold;
  color:#000;
  margin-right:16px;
}
.commentBox .commentTime {
  color:#888;
}
.commentBox .commentPage {
  color:#444;
  font-weight:bold;
  margin-right:16px;
}
.commentBox .replyButton {
  background-color:#fff;
  border: none;
  color: #FF7F27;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  text-transform:uppercase;
  font-family:Arial, Helvetica, sans-serif;
  padding:0px;
}
.commentBox .replyButton:hover {
  color:#BB7711;
}

.commentBox > .comment {
  padding-bottom:24px;
  margin-top:24px;
  border-bottom: 1px solid #EFEFEF;
}

.commentBox .allComments {
  overflow-y:auto;
  max-height:60vh;
  padding-right:32px;
}

.commentReplies {
  position: relative;
  margin-left:16px;
}

.commentReplies .expander_toggle {
  cursor:pointer;
  color:#800;
}

.commentReplies .expander_toggle:hover {
  color:#F00;
}

.commentReplies input[type="checkbox"] { display: none; }
.commentReplies input[type="checkbox"] ~ ul { display: none; }
.commentReplies input[type="checkbox"]:checked ~ ul { display: block; }

.commentReplies  .expander_toggle:before { content: '\25b6   Show '; }
.commentReplies  input[type="checkbox"]:checked ~ .expander_toggle:before { content: '\25b2   Hide '; }

.commentReplies .content { display:none; }
.commentReplies input[type="checkbox"]:checked ~ .content { display:block; }

.sensorComments {
  width:36%;
  vertical-align:top;
  overflow-y:auto;
}
.sensorComments .allComments {
  max-height:auto;
}

.objectDataComment {
  font-style:italic;
  margin:6px 4px 8px;
}


.treeview { font-size:16px; position:relative; }
.treeview input { display: none; }
.treeview input ~ ul { display: none; }
.treeview input:checked ~ ul { display: block; }
.treeview input ~ .treeviewLine > label:after 
{ 
  content: '+';
  text-align:center;
  line-height:14px;
  padding-top:-6px;
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  background-color:#FFF;
  border:1px solid #000;
}
.treeview input:checked ~ .treeviewLine > label:after { 
  content: '-'; 
}
.treeview label:hover { color:#822; }

.treeview ul:before
{
  content:'';
  position:absolute;
  top:-16px;
  width:1px;
  left:-1px;
  height:16px;
  background-color:#000;
}
.treeview ul
{
  list-style:none;
  padding-left:16px;
  margin-bottom:2px;
  position:relative;
}
.treeview ul:after
{
  content:'';
  position:absolute;
  left:-16px;
  top:0px;
  width:15px;
  bottom:17px;
  border-right:1px solid #000;
  background-color:#FFF;
}

.treeview ul:first-child > li:first-child > .treeviewLine:first-child {
  padding-top:2px;
}
.treeview .treeviewLine {
  padding:6px 0px 6px;
  position:relative;
}
.treeview .treeviewLine:hover {
  background-color:#FDA !important;
}

.treeview .treeviewLine.highlighted {
  background-color:#FFA;
}

.treeview label
{
  margin-left:8px;
  padding-left:32px;
  display:inline-block;
  position:relative;
}
.treeview label:before
{
  content:'';
  position:absolute;
  left:-25px;
  width:42px;
  top:8px;
  height:1px;
  background-color:#000;
}

.treeview .propertyBlock {
  position:absolute;
  right:0px;
  top:0px;
  height:100%;
  width:440px;
  text-align:right;
  overflow:hidden;
  white-space:nowrap;
}

.treeview .propertyColumn:first-child{
  text-align:left;
  width:60%;
}
.treeview .propertyColumn{
  display:inline-block;
  width:25%;
  margin:0px 8px 8px;
  position:relative;
  height:100%;
  vertical-align:top;
}

/*#buildingDevices {
  overflow-y:scroll;
  height:50vh;
  border:1px solid #DDD;
}*/

.sensorHistory2
{ 
  position:relative;
  display:inline-block;
  width:100%;
  overflow:hidden; 
  white-space:nowrap; 
  height:74%; 
  border:1px solid #AAA; 
  background-color:#FFF; 
  border-radius:4px;
  margin-bottom:4%;
  cursor:pointer; 
  
  text-align:center;
  font-size:14px;
  font-style:italic;  
  line-height:24px;
  color:#666;
}
.sensorHistory2 div { 
  padding:0; 
  margin:0; 
  font-size:1px; 
}

.dashboardTable {
  display: table;
  margin-top:16px;
  margin-bottom:16px;
}
.dashboardTable .row {
  display: table-row;
  height:38px;
}
.dashboardTable .label {
  display: table-cell;
  width:180px;
  color:#666;
}
.dashboardTable .field {
  display: table-cell;
  width:400px;
}
.dashboardTable .cell {
  display: table-cell;
  padding-left:40px;
}
.dashboardTable .spacer {
  display: table-row;
  height:26px;
}
.dashboardTable input[type=text] {
  width:100%;
  padding:6px;
}
.dashboardTable img {
  vertical-align: top;
}

.dashboardImageIcon img, .dashboardImageIcon button
{
  vertical-align:middle;
  display:inline-block;
  margin-right:12px;
}

.expander { 
  margin-top:20px; 
  margin-bottom: 20px; 
  border:1px solid #e8e8e8;
  padding:8px;
  -webkit-transition: background-color 0.3s;
  transition:background-color 0.3s;
}
.expander:hover {
  background-color:#fafafa;
}
.expander > input[type="checkbox"] { display: none; }
.expander > input[type="checkbox"] ~ div { 
  display: none; 
  padding:16px;
}
.expander > input[type="checkbox"]:checked ~ div { display: block; }
.expander > input[type="checkbox"] ~ label { 
  font-size: 16px;
  color:#333; 
  -webkit-transition: color 0.3s;
  transition: color 0.3s;  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.expander > input[type="checkbox"] ~ label:hover { color:#800; }
.expander > input[type="checkbox"] ~ label:before { content: '\25b8'; margin-right:8px; }
.expander > input[type="checkbox"]:checked ~ label:before { content: '\25b4';  margin-right:8px; }

#treeviewLegend
{
  position:relative;
  border:2px solid #888;
  padding:12px 4px 8px;
  margin:20px 2px;
  background-color:#EFEFEF;
}
#treeviewLegend:after
{
  content:'Legend';
  position:absolute;
  top:-18px;
  left:20px;
  background-color:#EFEFEF;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-left:1px solid #888;
  border-right:1px solid #888;
  border-top:1px solid #888;
  padding: 0px 8px;
  display:inline-block;
}

#treeviewLegend .section {
  display:inline-block;
  position:relative;
  width:190px;
  border:1px solid #DDD;
  padding:16px 12px 8px;
  margin:4px 4px 10px;
  vertical-align:top;
  background-color:#FFF;
}
#treeviewLegend .section:after
{
  content:attr(_label);
  position:absolute;
  top:-8px;
  left:12px;
  background-color:#FFF;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  padding: 0px 8px;
  display:inline-block;
}

#treeviewLegend .key {
  white-space:nowrap;
  margin-bottom:4px;
}
#treeviewLegend .key > div {
  display:inline-block;
  vertical-align:middle;
}
#treeviewLegend .keyBox {
  width:32px;
  height:32px;
  border:1px solid #000;
  border-radius:8px;
  overflow:hidden;
}
#treeviewLegend .keyBox .keyContent {
  width:32px;
  height:32px;
}
#treeviewLegend .keyLabel {
  margin-left:16px;
}


/* If screen wide enough...*/
@media only screen and (min-width: 1520px) 
{
  #devicesByBuilding {
    position:relative;
  }
  #treeviewLegend {
    position:absolute !important;
    width:232px;
    top:0px;
    left:100%;
    margin-left:16px;
  }
}

/*******************/
/* Network diagram */


/* Types of nodes */
/* Generic */
#networkDiagram .diagramNode {
  cursor:pointer;
}
#networkDiagram .diagramNode.NETWORK {
  fill:#F00;
}
#networkDiagram .diagramNode.INTERFACE {
  fill:#FE0;
}
#networkDiagram .diagramNode.CONTROLLER {
  fill:#FA0;
}
#networkDiagram .diagramNode.CONTROLLER {
  fill:#FA0;
}
/* Trend */
#networkDiagram .diagramNode.TRENDLAN {
  fill:#F00;
}
#networkDiagram .diagramNode.TRENDDEVICE {
  fill:#A00;
}
/* BACNET */
#networkDiagram .diagramNode.BACNETDEVICE {
  fill:#A2B;
}
/* Lonworks */
#networkDiagram .diagramNode.LONDOMAIN {
  fill:#0F0;
}
#networkDiagram .diagramNode.LONDEVICE {
  fill:#090;
}

#networkDiagram .diagramNode.selected {
  stroke:#000;
  stroke-width:4;
}

#networkDiagram .diagramNode.highlight {
  fill:#FFA;
  stoke:#A40;
  stroke-width:12;
}

#networkDiagram .hideTextUntilHover text {
  visibility:hidden;
}
#networkDiagram .hideTextUntilHover:hover text {
  visibility:visible;
}

#networkDiagram .subnetBack {
  stroke:#000;
  fill:none;     
}
#networkDiagram .subnetBack.selected {
  fill:#FFB;
  stroke-width:36;
  stroke:#FDD;
}

.deviceSelectionTable {
  margin-top:16px;
  margin-left:64px;
}

.deviceSelectionTable tr td:first-child {
  white-space:nowrap;
}

.deviceSelectionTable td {
  padding:4px;
}
.deviceSelectionTable .desc {
  padding: 10px 24px;
  font-style: italic;
}

#multiValueStackNote {
  position:fixed;
  width:100%;
  top:0px;
  left:0px;
}

#multiValueStackNote div {  
  margin:12px auto;
  width:80%;
  background-color:rgba(250,180,120,0.95);
  border:1px solid #A40;
  border-radius:16px;
  padding:16px;
  color:#A40;
  z-index:3;
}

#multiValueStackNote b {
  color:#A00;
  text-decoration:underline;
  cursor:pointer;
  font-weight:normal;
}

.dynamicSVGContainer {
  position:relative;
}
.dynamicSVGContainer:after {
  position:absolute;
  content:' ';
  display:block;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  z-index:2;
  pointer-events:none;
  background:url("logowm.png") no-repeat 50% 50%;
}


.criteriaSelectionBox {
  float:right;
  padding-right:18px;
}

.EnergyReport .headline
{
  text-align:center;
  font-size: 16px;
  color: #333;
  position: relative;
  top: -18px;
  margin-bottom:-18px;
}
.EnergyReport .headline .label {
  color:#444;
  font-size:20px;
}
.EnergyReport .headline * {
  text-align:initial;
}
.EnergyReport .headline > div {
  display:inline-block;
  vertical-align:middle;
}
.EnergyReport .headline .lines > div > div {
  display:inline-block;
  vertical-align:middle;
}
.EnergyReport .headline .secondary {
  font-size:14px;
}

.EnergyReport .headline .value {
  width:140px;
  text-align:right;
  padding-right:8px;
  vertical-align:middle;
  font-weight:bold;
}

.EnergyReport .headline .secondary .value {
  font-size:18px;
  color:#AA0000;
}
.EnergyReport .headline .primary .value {
  font-size:24px;
  color:#e57223;
}

.EnergyReport .usagePlot {
  width:90%;
  margin:32px auto;
  border:2px solid #EEE;
  min-height:200px;
  line-height:200px;
  text-align:center;
  font-size:32px;
  color:#EEE;
}

.EnergyReport .usageTable {
  width:80%;
  margin:20px auto;
  text-align:center;
}

.EnergyReport input[_datePicker] {
  background-color:#F5F5F5;
  border:0px hidden;
  text-align:center;
  font-size:18px;
  font-weight:bold;
  width:120px;
  margin:0px 8px;
}


.usageTable table {
  width:100%;
  margin:8px auto;
  text-align:left;
}
.usageTable table td {
  padding:4px 8px;
}
.usageTable table tr.hd td {
  font-weight:bold;
}
.usageTable table td:nth-child(2), 
.usageTable table td:nth-child(3)
{
  text-align:right;
  max-width:140px;
}
.usageTable table td:nth-child(4) {
  min-width:140px;
}

.usageTable .indent1 {
  padding-left:24px;
}
.usageTable .indent2 {
  padding-left:40px;
}

.usageTable tr.low td:nth-child(2) {
  color:#3A3;
}
.usageTable tr.weekdays td:nth-child(2) {
  color:#FA2;
}
.usageTable tr.high td:nth-child(2) {
  color:#A44;
}
.usageTable tr.odd td {
  background-color:#EFEFEF;
}

span.dropArr {
  cursor:pointer;
  margin-right:8px;
}

span.dropArr::before {
  content:'▶';
}
span.dropArr.dropped::before {
  content:'▼';
}


#inlineDeviceList {
  position:relative;
  min-width:480px;
  max-width:1000px;
  width:90%;
  border:1px solid #000;
  border-radius:4px;
  box-shadow:3px 3px 4px #776;
  margin:32px auto 8px;
  padding:8px 32px 32px;
}
#inlineDeviceList::after {
  position:absolute;
  z-index:1;
  content:'Live device values';
  background-color:#FFF;
  border-top:1px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  top:-25px;
  height:16px;
  font-size:14px;
  padding:4px 8px;
  left:24px;
}
#inlineDeviceList .treeview {
  margin-top:20px;
  margin-left:24px;
}


/* Alarm stuff */
#currentAlarms {
  clear:both;
}

.alarmPreview {
  cursor:pointer;
  position:relative;
  border: 2px solid #DDD;
  border-radius:8px;
  box-shadow:2px 2px 3px #000;
  background-color:#EFEFEF;
  padding:8px 12px 8px 56px;
  margin:8px;
  
  min-height:32px;
  display:inline-block;
  
  width:calc( 33% - 88px );
  vertical-align:top;
}
.alarmPreview .alarmIcon {
  position:absolute;
  top:6px;
  left:10px;
  
  width:32px;
  height:32px;
  border:2px solid #444;
  border-radius:18px;
}
.alarmPreview .alarmName {
  font-size:16px;
  margin-bottom:4px;
  border-bottom:1px solid #444;
  padding-bottom:2px;
}
.alarmPreview .alarmName:empty {
  display:none;
}
.alarmPreview .alarmMessage {
  color:#888;
  font-size:12px;
}


.alarmPreview.alarmStatus-failed .alarmIcon,
.alarmPreview.alarmStatus-error .alarmIcon
{
  background-color:#E33;
  box-shadow:0px 0px 8px rgba(255,80,80,0.8);
}
.alarmPreview.alarmStatus-warning .alarmIcon
{
  background-color:#E33;
  box-shadow:0px 0px 8px rgba(255,180,80,0.8);
}
.alarmPreview.alarmStatus-passed .alarmIcon,
.alarmPreview.alarmStatus-ok .alarmIcon {
  background-color:#5F5;
  box-shadow:0px 0px 8px rgba(80,255,80,0.8);
}
.alarmPreview.alarmStatus-pending .alarmIcon {
  background-color:#FE4;
  box-shadow:0px 0px 8px rgba(255,240,80,0.8);
}
.alarmPreview.alarmStatus-pending .alarmMessage::after {
  content:'Pending...';
  font-style:italic;
}

.alarmPreview.alarmStatus-invalid .alarmIcon {
  border-color:#999;
}
.alarmPreview.alarmStatus-invalid .alarmIcon::before {
  content:'?';
  color:#AAA;
  font-size:32px;
  width:36px;
  display:block;
  text-align:center;
  line-height:32px;
}

.alarmPreview.alarmStatus-inactive {
  opacity:0.4;
}

@media only screen and (max-width: 850px) {
  .alarmPreview {
    width:initial;
    display:block;
  }
}

.machineProtectionAssets {
  min-width:60%;
  margin:4px auto;
}

.machineProtectionAssets tr td.is_pass {
  background-color:#DFD;
  color:#090;
}
.machineProtectionAssets tr td.is_warning {
  background-color:#FDA;
  color:#A50;
}
.machineProtectionAssets tr td.is_critical {
  background-color:#FAA;
  color:#900;
}

.machineProtectionAssets tr td.is_val {
  position:relative;
  cursor:pointer;
  padding-left:24px;
}
.machineProtectionAssets tr td.is_val.is_na {
  cursor:normal;
}
.machineProtectionAssets tr td.selectedPlot::after {
  content:"⬤";
  position:absolute;
  display:block;
  left:4px;
  top:3px;
}


#protectionPlot .graphTitle {
  text-align:center;
  font-weight:bold;
  font-size:14px;
}
#protectionPlot .graphTitle::before {
  content:"for ";
  font-weight:normal;
  font-style:italic;
}


.SubMeters .section {
  border:1px solid #EFEFEF;
  padding:4px 8px;
  margin:4px 8px;
}
.SubMeters .section .title {
  font-size:16px;
  font-weight:bold;
  margin:4px 0px;
}
.SubMeters .readingsTable {
  width:100%;
}
.SubMeters .detail {
  margin-top:8px;
}
.SubMeters .readingsTable td {
  padding:4px 8px;
}
.SubMeters .readingsTable .hd1 td:first-child {
  border-right:1px solid #DDD;
}
.SubMeters .readingsTable .hd1 td {
  text-align:center;
  /*font-variant:small-caps;*/
  font-weight:bold;
  border-bottom:1px solid #444;
}
.SubMeters .readingsTable .hd2 td {
  font-weight:bold;
  border-bottom:2px solid #222;
}
.SubMeters .readingsTable .hd2 td:nth-child(2) {
  border-right:1px solid #DDD;
}
.SubMeters .readingsTable .row:hover td {
  background-color:#ff7f27 !important;
  color:#FFFFAA;
}
.SubMeters .readingsTable .row:nth-child(2n) td {
  background-color:#EFEFEF;
}
.SubMeters .readingsTable .row td:nth-child(5) {
  font-weight:bold;
}
.SubMeters .readingsTable .row td:nth-child(2) {
  border-right:1px solid #DDD;
}
.SubMeters .readingsTable tr td.reading {
  text-align:right;
}

.SubMeters .label, .SubMeters .value {
  display:inline-block;
  min-width:100px;
  vertical-align:top;
}
.SubMeters .dialPlot {
  font-size:14px;
  font-weight:bold;
  margin-top:16px;
  margin-left:32px;
  
  width:calc( 70% - 48px );
  display:inline-block;
  vertical-align:top;
  text-align:center;
}
.SubMeters .dialPlotContent {
  max-width:300px;
  margin:4px auto;
}
.SubMeters .section .section {
  border:1px solid #DDD;
}
.SubMeters .dialDetails {
  display:inline-block;
  vertical-align:top;
  width:30%;
}
.SubMeters .graphSelectionTable td {
  padding: 4px 8px;
  text-align:right;
}
.SubMeters #trendsPlot {
  margin:16px 4px 32px;
}


.customerImage {
  /*display:inline-block;*/
  width:140px;
  height:96px;
  margin-left:auto;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.companyDetailsSummary .col-3 {
  font-size:14px;
  display:inline-block;
  vertical-align:top;
  width:33%;
}

.companyDetailsSummary .field {
  display:block;
  padding:8px;
}
.companyDetailsSummary .field .label {
  display:inline-block;
  vertical-align:top;
  width:120px;
}
.companyDetailsSummary .field .value {
  display:inline-block;
  vertical-align:top;
}

@media only screen and (max-width: 850px) {
  .companyDetailsSummary .col-3 {
    display:block;
    width:initial;
  }
  .customerImage {
    display:none;
  }

  .bodyContent { padding:8px; }
}


#instanceInfo {
  min-height:70vh;
  width:80%;
  padding:12px;
  margin:20px auto;
  background-color:#040;
  border:2px solid #0F0;
  border-radius:2px;
  color:#0F0;
  font-family:monospace;
  white-space:pre;
  font-size:16px;
  overflow-x:auto;
}
#instanceInfo.osi-error {
  color:#F00;
}

.toggleSwitch {
  cursor:pointer;
  vertical-align:middle;
  display:inline-block;
  position:relative;
  width:80px;
  height:32px;
  border-radius:9px;
  background-color:#ECEEEE;
}
.toggleSwitch::after {
  content:"Off";
  display:block;
  position:absolute;
  top:3px;
  left:3px;
  width:36px;
  height:24px;
  background-color:#444;
  border-radius:9px;
  line-height:24px;
  text-align:center;
  color:#FFF;
  transition:1s;
}

.toggleSwitch.on::after {
  content:"On";
  background-color:#66D699;
  color:#FFF;
  font-weight:bold;
  left:36px;
}

.toggleSlider {
  max-width:200px;
  width:calc( 100% - 26px );
  min-width:96px;
  display:inline-block;
  vertical-align:middle;
  /*padding-left:32px;*/
  height:32px;
}

#extraConfig {
  padding:16px;
}

#extraConfig .field {
  display:inline-block;
  padding:8px;
}


.amtController {
  display:block;
  border:1px solid #000;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.4);
  background-color:#DFE0E1;
  margin:8px 12px;
  overflow:hidden;
}
.amtController .title {
  padding:8px 14px;
  background-color:#444;
  color:#FFF;
  font-size:16px;
  font-weight:bold;
  border-bottom:1px solid #000;
}
.amtController .dashboard {
  padding:8px 14px;
}
.amtController .dashboard .control {
  position:relative;
  overflow:hidden;
  
  display:inline-block;
  float:left;
  vertical-align:top;
  width:calc( 25% - 18px - 36px );
  border:1px solid #000;
  margin:8px;
  padding:41px 18px 12px;
  border-radius:4px;
  box-shadow:-2px -2px 3px rgba(0,0,0,0.4);
}

#actionSummary .amtController .dashboard .control {
  width:initial;
}

.amtController .control[_control="tankLevel"] {
  width:calc( 75% - 18px - 36px );
}
.amtController .control[_control="tankLevel"] svg {
  margin:24px 0px 23px;
}

.amtController .control::before {
  content:attr(_label);
  position:absolute;
  background-color:#444;
  color:#FFF;
  line-height:32px;
  padding-left:12px;
  text-align:left;
  font-size:16px;
  top:0px;
  left:0px;
  width:100%;
  height:32px;
  border-bottom:1px solid #222;
}

.amtController .control.annotationMissing {
  color:#A00;
  background-color:#F99;
  border-color:#A00;
  text-align:center;
  font-size:16px;
}

.alarmLight {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:80px;
  height:80px;
  border-radius:47px;
  background-color:#A22;
  box-shadow:0px 0px 12px rgba(255,0,0,0.1);
}

.alarmLight::after {
  content:"Fail";
  line-height:80px;
  position:absolute;
  top:0px;
  left:0px;
  width:80px;
  height:80px;
  font-size:18px;
  font-weight:bold;
  text-align:center;
  color:#FFF;
}

.zoonexMiniControls .alarmLight {
  width:46px;
  height:46px;
  border-radius:23px;
}
.zoonexMiniControls .alarmLight::after {
  width:46px;
  height:46px;
  line-height:46px;
  font-size:14px;
}

.alarmLight.on {
  background-color:#66D699;
  box-shadow:0px 0px 12px rgba(000,255,0,0.1);
}

.alarmLight.on::after {
  content:"Pass";
}

.amtController .alarmStatusText {
  display:none;
  vertical-align:middle;
  /*margin-left:32px;*/
  margin-top:2px;
  font-size:14px;
}

.amtController .statusSpan {
  display:none;
}

.amtController .operationDesc {
  display:none;
  text-align:center;
  font-size:18px;
  margin-bottom:12px;
}

.amtController .toggleSlider {
  margin:13px;
}

.amtController .ui-slider-handle {
  font-size:24px;
  text-align:center;
  position:relative;
}
.amtController .ui-slider-handle::after {
  content:attr(_value);
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  line-height:26px;
  font-size:14px;
}
.vcncConfig table, .vcncConfig .deviceList {
  margin-left:64px;
}
.vcncConfig table td{
  padding:4px 8px;
}

.vcncConfig .deviceList .device {
  display:inline-block;
  padding:8px 12px;
  margin:8px 16px;
  border:1px solid #000;
  border-radius:4px;
  background-color:#EFEFEF;
  box-shadow:2px 2px 3px rgba(0,0,0,0.4);
}

.vcncConfig .deviceList .device .removeButton {
  display: inline-block;
  background-color:#F00;
  color:#FF0;
  cursor:pointer;
  padding:2px 6px;
  margin-left:12px;
  border-radius:16px;
}
.vcncConfig .deviceList .device .removeButton:hover {
  background-color:#FDA;
}

*[_objects="AnalysisReport"] .objectControls {
  display:none;
}

.halfDialog {
  display:inline-block;
  width:50%;
  vertical-align:top;
}


#schedulePanel {
}
.dayDefinition {
  position:relative;  
  height:1.5em;
  padding-top:0.5em;
}
.dayDefinition .timeline {
  position:absolute;
  width:80%;
  right:0px;
  top:0px;
}
.dayDefinition .timeline .dayTime {
  position:absolute;
  top:0px;
  height:15.5em;
  border-left:1px dotted #666;
  padding-left:2px;
  padding-top:0.5em;
  z-index:5;
  pointer-events:none;
}
.dayDefinition .timeline .dayTime:nth-child(3n + 1) {
  border-left:2px dotted #666;
}

.dayDefinition.dayHeader {
  border-bottom:1px dashed #666;
}

.dayDefinition .event {
  position:absolute;
  height:1.8em;
  margin-top:0.1em;
  border:1px solid #A60;
  border-radius:8px;
}
.dayDefinition .event.on {
  background-color:#FDA;
}
.dayDefinition .event.off {
  background-color:#ADF;
}
.dayDefinition .event:first-child {
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;
}
.dayDefinition .event:last-child {
  border-top-right-radius:0px;
  border-bottom-right-radius:0px;
}


.dayDefinition .event .leftBit {
  position:absolute;
  left:0px;
  height:100%;
  width:12px;
  pointer-events:all;
  cursor:ew-resize;
}
.dayDefinition .event .rightBit {
  position:absolute;
  right:0px;
  height:100%;
  width:12px;
  pointer-events:all;
  cursor:ew-resize;
}

.objectDataTable .key {
  display:inline-block;
  vertical-align:top;
  border:1px solid #888;
  width:1.2em;
  height:1.2em;
  margin-left: 16px;
  margin-top:-1px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
  border-radius:8px;
}

.objectDataTable .key.on {
  background-color:#FDA;
}
.objectDataTable .key.off {
  background-color:#ADF;
}

#schedulePanel.disabled >.dayDefinition::after {
  content:'';
  opacity:0.5;
  background-color:#FFF;
  pointer-events:all;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:10;
}

.includeSettingBox {
  display:block;
  position:absolute;
  top: 8px;
  right:8px;
}

.zoonexDevicePlot {
  position:relative;
  background-color:transparent;
  margin:8px auto;
  border:1px solid #000;
}

.zoonexDevicePlot::after {
  content:'';
  background-image:url( /style/grid.png );
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  pointer-events:none;
}

.SurveyGroup tr .treeBlob {
  display:inline-block;
  vertical-align:top;  
  margin-right:4px;
  height:10px;
  width:4px;
}


.ZoonexGroup tr[_depth] .treeBlob {
  border-left:2px solid #999;
  border-bottom:2px solid #999;
  display:inline-block;
  height:12px;
  width:6px;
  margin-right:12px;
}
.ZoonexGroup tr.mid[_depth] .treeBlob {
  height:24px;
  border-bottom:0px hidden;
  margin-bottom:-8px;
  margin-top:-8px;
}
.ZoonexGroup tr.mid[_depth] .treeBlob::after {
  content:'-';
}

.ZoonexGroup tr[_depth="0"] .treeBlob {
  border-left:2px hidden;
}

.zoonexInlineControls {
  text-align:center;
  margin-top:12px;
  margin-bottom:9px;
  padding-bottom:8px;
  border-bottom:1px solid #000;
}

.zoonexInlineControl {
  display:inline-block;
  width:180px;
  height:100px;
  vertical-align:middle;
  position:relative;
}

.zoonexInlineControl .statusSpan {
  position:absolute;
  font-size:10px;
  font-style:italic;
  display:block;
  width:100%;
  bottom:4px;
}

.zoonexMiniControls .zoonexInlineControl {
  width:96px;
  height:64px;
}


.zoonexGroupChange select, .zoonexScheduleChange select {
  position:relative;
  top:2px;
  min-width:200px;
  margin-left:16px;
}

.zoonexGlyph {
  position:absolute;
  margin-left:-36px;
  margin-top:-36px;
  padding:12px;
  z-index:3;
  transition:.3s;
}
.zoonexIcon {
  width:48px;
  height:36px;
  margin-right:8px;
  
  -webkit-mask-image: url(/images/icons/icons_zoonex.svg);
  -webkit-mask-repeat: no-repeat;
  
  mask-image: url(/images/icons/icons_zoonex.svg);
  mask-repeat:no-repeat;
  
  background-color:#000;
  display:inline-block;
  vertical-align:middle;
}
.zoonexLabel {
  height:48px;
  line-height:48px;
  white-space:nowrap;
  font-weight:bold;
  display:inline-block;
  vertical-align:middle;
}
.zoonexGlyph:hover {
  background-color: #EFEFEF;
  border: 1px solid #444;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.2);
  z-index:5;
}

.zoonexMiniControls {
  display:none;
}
.zoonexGlyph:hover .zoonexMiniControls {
  display:block;
  margin-top:12px;
}


.filterPanel {
  background-color:#E9EAEB;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
  border:2px solid #666;
  padding:8px 12px;
  margin-bottom:16px;
}

.filterPanel .field {
  display:inline-block;
  width:40%;
  border:1px solid #999;
  box-shadow:0px 0px 6px rgba(255,255,255,0.9);
  padding:4px 8px;
  margin:8px 12px;
}

.filterPanel .field select {
  width:100%;
}

.notificationEmailContent {
  background-color:#E9EAEB;
  border-radius:4px;
  box-shadow:2px 2px 3px rgba(0,0,0,0.3);
  border:2px solid #666;
  padding:8px 12px;
  margin-bottom:16px;
  margin-top:24px;
}
.notificationEmailContent .title {
  font-size:16px;
  margin-bottom:4px;
}
.notificationEmailContent #alarmText {
  height:40vh;
  padding:12px 18px;
  margin-bottom:12px;
  width: calc( 100% - 36px );
  margin-top:10px;
}
.notificationEmailContent #alarmTitle {
  width:300px;
}
.notificationEmailContent .defs {
  width:100%;
  margin-top:12px;
  font-size:10px;
}
.notificationEmailContent .defs td {
  padding:4px;
}
.notificationEmailContent .defs td:first-child {
  font-weight:bold;
}
.notificationEmailContent .defs td:nth-child(2) {
  font-style:italic;
}

#zoonexListing .objectListingTable td:nth-child(3) {
  position:relative;
}

#zoonexListing .objectListingTable tr:NOT(.hd):nth-child(2n+1) td { background-color:#E1E1E1;}

.textEditBtn {
  display:block;
  background-image:url('/images/icons/icons_24_whiteEdit.svg');
  background-size:cover;
  background-color:#000;
  border-radius:8px;
  background-repeat:no-repeat;
  background-position:50% 50%;
  cursor:pointer;
  position:absolute;
  right:4px;
  top:4px;
  height:16px;
  width:16px;
  padding:2px;
}

#zoonexGroupControls .dashboard {
  text-align:center;
  margin-top:12px;
  margin-bottom:18px;
}

#zoonexGroupControls .dashboard .control {
  display:inline-block;
  vertical-align:top;
  
  width:180px;
  padding:8px 12px;
  margin:6px;
  
  background-color: #DFE0E1;
  border-radius: 4px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
  border: 2px solid #AAA;
}
#zoonexGroupControls .dashboard .control span {
  display:block;
}