/**
 * Author:       Matthew Hearn
 * Date:         6/27/13
 * File:         nexgenwebapp/src/main/webapp/styles/style.css
 * Description:  The main style for nex gen web app.
 */

/**
 * Line chart
 */

.axis
{
    font-size:  0.7em;
}

.axis path, .axis line
{
    fill:  none;
    stroke:  #000;
    shape-rendering:  crispEdges;
}

.x.axis path
{
    display:  none;
}

.line
{
    fill:  none;
    stroke:  blue;
    stroke-width:  1.5px
}

/**
 * Bar chart
 */

.bar
{
    fill:  #337AB7;
    shape-rendering:  crispEdges;
}

.bar text
{
    fill:  white;
    font-size:  0.75em;
}

.bar.negative
{
    fill:  #d9534f;
}

.barchart-tooltip
{
    position: absolute;           
    padding:  0.5em;
    background: rgba(255, 255, 255, 0.8);   
    border: 0px;      
    border-radius: 0.3em;           
    pointer-events: none;    
    top:  0;
    left:  0;
}
 
/**
 * Graph
 */

.node
{
    cursor:  pointer;
    stroke: #fff;
    stroke-width: 1.5px;
}

.node:hover
{
    filter:  brightness(1.2);
}

line.link
{
    stroke: #999;
}

.nodetext
{
    pointer-events: none;
    font: 10px sans-serif;
}

.dev
{
    fill:  white;
    pointer-events: none;
    stroke:  black;
    stroke-width:  0.05em;
    font: 1.5em sans-serif;
    font-weight:  bold;
}

.port
{
    fill:  black;
    pointer-events: none;
    stroke:  white;
    stroke-width:  0.05em;
    font: 1.3em sans-serif;
    font-weight:  bold;
}

.dev-status
{
    font-size:  1.3em;
    pointer-events: none;
    stroke-width:  0.05em;
}

.dev-status.dev-status-locked
{
    fill:  #1E90FF;
    stroke:  #87CEFA;
}

.dev-status.dev-status-locked.dev-status-manual-locked
{
    fill:  #72E500;
    stroke:  #B2FF66;
}

.dev-status.dev-status-locked.dev-status-purge-locked
{
    fill:  #9933ff;
    stroke:  #C233FF;
}

.dev-status.dev-status-xact
{
    fill: #3CB371;
    stroke:  #00FA9A;
}

.dev-status.dev-status-assocprobs
{
    fill:  #FFA500;
    stroke:  #FFD700;
}

.dev-status.dev-status-problem
{
    fill:  #FF0000;
    stroke:  #FFA07A;
}

.dev-status.dev-status-problem-warning
{
    fill:  #FF9933;
    stroke:  #FFA07A;
}

.dev-status.dev-status-full-bin
{
    fill:  #f5a10a;
    stroke:  #040100;
}

.dev-status.dev-status-skip-turnaround
{
    font-size:  1em;
    font-weight:  bolder;
    fill:  red;
    stroke:  red;
}

.dev-status.dev-status-virtual-zonegate
{
    border-left: 1px solid lightgrey;
    position: absolute;
    font-size:  3em;
    font-weight:  bolder;
    fill:  darkslategrey;
    transform: scaleY(2);
}

.dev-status-req-offline
{
    animation-duration: 0.6s;
    animation-name: flash-gray-svg;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.zone-transition
{
    cursor:  pointer;
    fill:  blue;
    font-size:  1em;
    font-weight:  bold;
    text-decoration:  underline;
    stroke-width:  0;
}

.zone-transition.zone-transition-visited
{
    fill:  purple;
}

@-webkit-keyframes flash-gray-svg
{
    from
    {
        fill:  currentColor;
    }

    to
    {
        fill:  #D3D3D3;
    }
}

@keyframes flash-gray-svg
{
    from
    {
        fill:  currentColor;
    }

    to
    {
        fill:  #D3D3D3;
    }
}

circle.dev-status-holder
{
    fill:  transparent;
    stroke:  #E6E6FA;
    stroke-width:  0.2em;
}

.arrow
{
    pointer-events: none;
    font: 50px sans-serif; 
}

.xact-marker
{
    cursor:  pointer;
    fill:  black;
    font-family:  sans-serif;
    font-size:  1.2em;
    font-weight:  bolder;
}

.xact-marker text
{
    fill:  white;
    pointer-events: none;
    stroke:  rgba(0, 0, 0, 0.8);
    stroke-width:  1px;
}

.xact-marker:hover
{
    filter:  brightness(1.2);
}

.xact-marker.xact-marker-filtered path, .xact-marker.xact-marker-filtered line
{
    fill:  rgb(220, 220, 220) !important;
    stroke:  rgb(220, 220, 220) !important
}

.xact-marker.xact-marker-unhealthy path, .xact-marker.xact-marker-unhealthy line
{
    fill:  #FF8400 !important;
    stroke:  #FF8400 !important
}

.xact-marker.xact-marker-unhealthy-severe path, .xact-marker.xact-marker-unhealthy-severe line
{
    fill:  #FF0000 !important;
    stroke:  #FF0000 !important
}

.xact-pending-marker
{
    cursor:  pointer;
    fill:  black;
    font-family:  sans-serif;
    font-size:  1.2em;
    font-weight:  bold;
}

.xact-pending-marker:hover
{
    filter:  brightness(1.2);
    opacity:  1;
}

.xact-pending-marker text
{
    fill:  white;
    pointer-events: none;
    stroke:  rgba(0, 0, 0, 0.8);
    stroke-width:  1px;
}

.xact-pending-marker.xact-pending-marker-filtered path, .xact-pending-marker.xact-pending-marker-filtered line
{
    fill:  rgb(220, 220, 220) !important;
    stroke:  rgb(220, 220, 220) !important
}

/**
 * Fluid container
 */
 
.fluid-container
{
    padding:  0 15px;
}

/**
 * Main view tabs
 */

.problem-tab > a
{
    color:  #FE0000;
    font-weight:  bold;
}

.problem-tab.active > a
{
    background-color:  #FE0000 !important;
}

.problem-tab.active .badge
{
    color:  #FE0000 !important;
}

.resource-pool-tab > a
{
    color:  #72E500;
    font-weight:  bold;
}

.resource-pool-tab.active > a
{
    background-color:  #72E500 !important;
}

.resource-pooltab.active .badge
{
    color:  #72E500 !important;
}

/**
 * Device details
 */
 
.device-details
{
    height:  600px;
    padding:  5px 5px 5px 5px;
    overflow-y:  scroll;
}

.device-details .placeholder
{
    height:  30%;
}

/**
 * Set the mouse pointer properly.
 */

.nav, .pagination, .carousel, .panel-title a
{
    cursor:  pointer;
}

/**
 * Transaction
 */

.transaction
{
    display:  flex;
    flex-direction:  column;
    margin-top:  0.5em;
    border-left:  0.4em solid #3CB371;
}

.transaction.transaction-ill
{
    border-left:  0.4em solid #808080;
}

.transaction.transaction-unhealthy
{
    border-left:  0.4em solid #FF8400;
}

.transaction.transaction-severe
{
    border-left:  0.4em solid #FF0000 !important;
}

.transaction.ng-enter,
.transaction.ng-leave,
.transaction.ng-move
{
  transition: 0.5s linear all;
}

.transaction.ng-enter,
.transaction.ng-move
{
  opacity: 0;
  /*transform:  translateX(-100%);*/
}

.transaction.ng-move.ng-move-active,
.transaction.ng-enter.ng-enter-active
{
  opacity: 1;
  /*transform:  translateX(0);*/
}

.transaction.ng-leave
{
  opacity: 1;
}

.transaction.ng-leave.ng-leave-active 
{
  opacity: 0;
  transition:  2s linear opacity;
}

.transaction-title-bar
{
    background-color:  #3CB371;
    color:  white;
    font-weight:  bold;
}

.transaction-ill .transaction-title-bar
{
    background-color:  #808080;
}

.transaction-ill .transaction-base 
{
    background-color: #D3D3D3;
}

.transaction-ill .transaction-info
{
    background-color: #D3D3D3;
}

.transaction-ill .device.station .shape,
.transaction-ill .device.blower .shape
{
    background-color:  #606060;
}

.transaction-unhealthy .transaction-title-bar
{
    background-color:  #FF8400;
}

.transaction-severe .transaction-title-bar
{
    background-color:  #FF0000;
}

.transaction-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.transaction-title-bar .btn-link:hover
{
    color:  white;
}

.transaction-title-bar .transaction-accept-time
{
    font-size:  0.8em;
}

.transaction .transaction-status
{
    border:  1px solid transparent;
    border-radius:  1em;
    color:  white;
    font-weight:  bold;
    flex-shrink:  0;
    padding:  0.1em;
    text-align:  center;
    width:  100%;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8),
                  1px -1px 0 rgba(0, 0, 0, 0.8),
                 -1px 1px 0 rgba(0, 0, 0, 0.8),
                  1px 1px 0 rgba(0, 0, 0, 0.8);
}

.transaction-status-progress
{
    height:  3px;
    margin-left:  auto;
    margin-right:  auto;
    position:  relative;
    width:  80%;
}

.transaction-status-progress-bar
{
    background-color:  rgba(255, 255, 255, 0.5);
    display:  block;
    height:  100%;
}

.transaction-base
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  space-between;
    padding:  0.5em;
}

.transaction-base > .transaction-status-slot
{
    min-width:  10em;
}

.transaction-base > .transaction-path
{
    padding-left:  2em;
    padding-right:  1em;
    flex-grow:  3;
    flex-shrink:  3;
    width:  75%;
}

.transaction-base > .transaction-path .device, .transaction-base > .transaction-blower .device
{
    margin-top:  0.8em;
}

.transaction-base > .transaction-path .device-zone, .transaction-base > .transaction-blower .device-zone
{
    color:  gray;
    position:  absolute;
    font-size:  0.85em;
    font-weight:  bold;
    left:  50%;
    text-align:  center;
    text-overflow:  ellipsis;
    transform:  translate(-50%, -4em);
    white-space:  nowrap;
    overflow:  hidden;
    width:  6.5em;
}

.transaction-base > .transaction-path .device-zone .glyphicon,
.transaction-base > .transaction-blower .device-zone .glyphicon
{
    display: none;
}

.transaction-base > .transaction-path .device-zone:hover, .transaction-base > .transaction-blower .device-zone:hover
{
    color:  black;
    overflow:  visible;
    width:  13em;
}

.transaction-base > .transaction-path .device-zone:hover .glyphicon, .transaction-base > .transaction-blower .device-zone:hover .glyphicon
{
    display:  inline;
}

.transaction-base .device.selected .device-zone
{
    color:  black;
    overflow:  visible;
    width:  13em;
    transform:  translate(-50%, -4em) scale(0.5, 0.5);
}

.transaction-base .device.selected .device-zone .glyphicon
{
    display:  inline;
}

.transaction-base .device.selected .device-zone > span
{
    background-color:  rgba(255, 255, 255, 0.8);
    border-radius:  0.2em;
    padding-left:  0.5em;
    padding-right:  0.5em;
    /*display: block;*/
}

.transaction-base > div
{
    padding-left:  1em;
    padding-right:  1em;
}

.transaction-base > .transaction-blower
{
    border-right:  1px solid #DDD;
    border-left:  1px solid #DDD;
    padding-left:  3em;
    padding-right:  3em;
}

.transaction-base > .transaction-type-icon
{
    border-right:  1px solid #DDD;
    padding-right:  2em;
    display: inline-block;
}

.transaction-base > .transaction-type-icon:hover .glyphicon
{
    transform:  scale(2, 2);
}

.filtered-xact
{
    opacity:  0.5;
}

.filtered-xact .transaction-base,
.filtered-xact .transaction-info
{
    display:  none;
}

/**
 * Transaction scans tab
 */

.transaction-scans-container
{
    display:  flex;
    justify-content:  space-around;
}

.transaction-scans-container .transaction-scans-location
{
    display:  flex;
    flex-direction:  column;
    align-items:  center;
}

.transaction-scans-container .transaction-scans
{
    display:  flex;
    align-items:  flex-start;
    padding-top:  1em;
}

.transaction-scans-container .transaction-scans-device
{
    display:  flex;
    flex-direction:  column;
    align-items:  center;
}

.transaction-scans-container .transaction-scans-transition
{
    align-self:  center;
    color:  #e0e0e0;
    font-size:  2.5em;
    text-align:  center;
}

.transaction-scans-container .transaction-scans .transaction-scan
{
    background-color:  white;
    border-radius:  0.5em;
    border:  1px solid #e0e0e0;
    display:  flex;
    flex-direction:  column;
    align-items:  center;
    font-size:  0.85em;
    min-width:  8em;
    padding:  0.5em;
    text-align:  center;
}

.transaction-scans-container .transaction-scans .transaction-scan:not(:last-child)
{
    margin-right:  0.5em;
}

.transaction-scans-container .transaction-scans .transaction-scan .transaction-scan-title
{
    background-color:  #e0e0e0;
    border-radius:  0.5em;
    border:  1px solid #e0e0e0;
    font-weight:  bold;
    padding:  0.5em;
    transform:  translateY(-1em);
}

.device.device-placeholder
{
    outline:  2px dashed gray;
}

.device.locked
{
    border:  1px solid #2C734B;
    border-radius:  0.5em;
}

.device .lock-icon
{
    bottom:  0;
    color:  #c7d0db;
    left:  50%;
    position:  absolute;
    font-weight:  bold;
    text-align:  center;
    transform:  translate(-50%, 0.4em);
    width:  2em;
}

.request-empty
{
    font-size: 1.2em;
    fill: darkslategray;
    stroke-width:  0.15px;
}

.full-bin
{
    font-size: 1.2em;
    fill:  #f5a10a;
    stroke: #040100;
}

.device.this-locked .lock-icon
{
    color:  #1E90FF;
    text-shadow: 1px 1px 2px #87CEFA, 0 0 1em #87CEFA, 0 0 0.2em #87CEFA;
}

.device.xact-locked .lock-icon
{
    color:  #1E90FF;
    text-shadow: 1px 1px 2px #87CEFA, 0 0 1em #87CEFA, 0 0 0.2em #87CEFA;
}

.device.maint-locked .lock-icon
{
    color:  #72E500;
    text-shadow: 1px 1px 2px #B2FF66, 0 0 1em #B2FF66, 0 0 0.2em #B2FF66;
}

.vacuumPath
{
    transform:  translateY(-0.5em) rotate(-45deg);
}

.pressurePath
{
    transform:  translateY(-0.5em) rotate(45deg);
}

.transaction-path .glyphicon-arrow-right
{
    color:  gray;
    font-size:  1.3em;
}

.transaction-path .glyphicon-arrow-right.xact-path-inactive
{
    color:  #d3d3d3;
}

.transaction-path .glyphicon-arrow-left
{
    color:  gray;
    font-size:  1.3em;
}

.transaction-path .glyphicon-chevron-right
{
    color:  gray;
    font-size:  1.3em;
}

.transaction-info
{
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    padding:  0.5em;
}

.transaction-meta
{
    align-content:  center;
    align-items:  stretch;
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    display:  flex;
    justify-content:  space-between;
}

.transaction-timeline
{
    flex-basis:  auto;
    flex-grow:  3;
}

.transaction-details
{
    height:  29em;
    overflow-y:  scroll;
}

.transaction-details tr
{
    height:  3em;
}

.transaction-stats
{
    flex-basis:  auto;
    flex-grow:  1;
    margin-right:  0.5em;
}

/**
 * Device shapes
 */
 
.device
{
    border:  1px solid transparent;
    border-radius:  50%;
    cursor:  context-menu;
    display:  inline-block;
    position:  relative;
    /*
    transition:  transform 0.2s ease;
    -webkit-transition:  -webkit-transform 0.2s ease;
    */
}

.transaction-path .device, .location .device, .blower-path .device
{
    padding:  0.3em;
}

.transaction-path .device.curr
{
    background:  radial-gradient(circle, white 0%, white 57%, transparent 60%);
}

.transaction-path .device.this-locked:not(.curr),
.transaction-path .device.maint-locked:not(.curr)
{
    background:  radial-gradient(circle, white 0%, white 57%, #ededed 60%);
}

.device.selected
{
    transform:  scale(2, 2);
    -webkit-transform:  scale(2, 2);
    z-index:  10;
    /*
    transition:  transform 0.2s ease;
    -webkit-transition:  -webkit-transform 0.2s ease;
    */
}

.remote 
{
   display: inline-block;
   color: white;
   font-weight: bold;
   text-align: center;
   text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
   transition: text-shadow 0.5s ease;
   margin-top: -1.7em;
   position: relative;
   height: 2em;
   transform: translate(-50%, -50%); 
}

.device .shape
{
    float:  clear;
}

.pressure-arrow:before {
    width: 50%;
    height: 4px;
    background: fuchsia;
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 25%;
    /*margin-top: 5px;*/
    /*border-bottom: 3px solid fuchsia;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;*/
}

.pressure-arrow:after {
    content: "";
    display: inline-block !important;
    width: 1;
    height: 0;
    border-left: 8px solid fuchsia;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    vertical-align: middle;
    /*margin-right: -180px;*/
    /*margin-top: 5px;*/
}

.vacuum-arrow:after {
    width: 50%;
    height: 4px;
    background: aqua;
    content: "";
    display: inline-block !important;
    vertical-align: middle;
    /*margin-right: 25%;*/
    /*margin-top: 5px;*/
    /*border-bottom: 3px solid fuchsia;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;*/
}

.vacuum-arrow:before {
    content: "";
    display: inline-block !important;
    width: 1;
    height: 0;
    border-right: 8px solid aqua;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    vertical-align: middle;
    margin-left: 25%;
    /*margin-top: 5px;*/
}

.device .device-label
{
    color:  white;
    display:  inline-block;
    font-weight:  bold;
    margin-top:  -1.7em;
    position:  absolute;
    text-align:  center;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
    transition:  text-shadow 0.5s ease;
    /*z-index:  11;*/
    width:  2em;
}

.device.curr .device-label
{
    text-shadow: 1px 1px 2px #2c4e00, 0 0 1em #2c4e00, 0 0 0.2em #2c4e00;
}

/* An unkown device type */

.device:not(.blower):not(.diverter):not(.station):not(.iz):not(.stub):not(.zone-gate):not(.cct_receiver) .shape
{
    background:  transparent;
    height:  2em;
    width:  2em;
}
 
.device.blower .shape
{
    /*background:  blue;*/
    background:  #97BA0E;
    height:  2em;
    width:  2em;
    border-radius:  50%;
}

.device.blower.pressure .shape
{
    /*background:  #6A5ACD;*/
    background:  #FF33FF;
}

.device.blower.vacuum .shape
{
    background:  #00FFFF;
}

.device.diverter .shape
{
    height:  0;
    width:  0;
    border-left:  1em solid transparent;
    border-right:  1em solid transparent;
    /*border-bottom:  2em solid green;*/
    border-bottom:  2em solid #9846B6;
}

.device.diverter.curr .shape
{
    border-bottom-color:  #91FF00;
}

.device.diverter.reverse-diverter .shape
{
    transform:  scaleY(-1);
}

.device.iz .shape
{
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-bottom-color: gray;*/
    border-bottom-color: #00B8A8;
    position: relative;
    top: -1em;
}

.device.iz.curr .shape
{
    border-bottom-color:  #91FF00;
}

.device.iz .shape:after
{
    content: '';
    position: absolute;
    left: -1em;
    top: 1em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-top-color: gray;*/
    border-top-color: #00B8A8;
}

.device.iz.curr .shape:after
{
    border-top-color:  #91FF00;
}

.device.zone-gate .shape
{
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-bottom-color: gray;*/
    /*border-bottom-color: #00B8A8;*/
    border-bottom-color: #009f5c;
    position: relative;
    top: -1em;
}

.device.zone-gate.curr .shape
{
    border-bottom-color:  #91FF00;
}

.device.zone_gate .shape
{
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-bottom-color: gray;*/
    /*border-bottom-color: #00B8A8;*/
    border-bottom-color: #009f5c;
    position: relative;
    top: -1em;
}

.device.zone_gate.curr .shape
{
    border-bottom-color:  #91FF00;
}

.device.zone-gate .shape:before
{
    background-color:  white;
    content:  '';
    position:  absolute;
    height:  2em;
    width:  0.1em;
    transform:  translateX(-50%);
    z-index:  10;
}

.device.zone-gate .shape:after
{
    content: '';
    position: absolute;
    left: -1em;
    top: 1em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-top-color: gray;*/
    /*border-top-color: #00B8A8;*/
    border-top-color: #009f5c;
    /*transform:  translateY(0.25em);*/
    pointer-events:  none;
}

.device.zone_gate .shape:before
{
    background-color:  white;
    content:  '';
    position:  absolute;
    height:  2em;
    width:  0.1em;
    transform:  translateX(-50%);
    z-index:  10;
}

.device.zone_gate .shape:after
{
    content: '';
    position: absolute;
    left: -1em;
    top: 1em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    /*border-top-color: gray;*/
    /*border-top-color: #00B8A8;*/
    border-top-color: #009f5c;
    /*transform:  translateY(0.25em);*/
    pointer-events:  none;
}

.device.zone-gate.curr .shape:after
{
    border-top-color:  #91FF00;
}

.device.cct_receiver .shape
{
    height:  0;
    width:  0;
    border-left: 1.0em solid transparent;
    border-right: 1.0em solid transparent;
    border-top: 2.0em solid #3366ff;
    border-radius: 50%;
}

.device.cct_receiver.curr .shape
{
    background-color: #91FF00;
}

.device.station .shape
{
    /*background:  #9AC0CD;*/
    background:  #4B8EE1;
    height:  2em;
    width:  2em;
}

.device.station.curr .shape
{
    background-color:  #91FF00;
}

.device.stub .shape
{
    background:  #F5F5F5;
    height:  2em;
    outline:  0.2em solid #2F4F4F;
    width:  2em;
    transform:  scale(0.4, 1.1);
}

.device.stubfull .shape
{
    background:  #99ff33;
    height:  2em;
    outline:  0.2em solid #2F4F4F;
    width:  2em;
    transform:  scale(0.4, 1.1);
}

.device.stub.curr .shape
{
    background-color:  #91FF00;
}

/**
 * Device status lights
 */

.glyphicon.dev-status
{
    color:  #DCDCDC;
    font-size:  1.2em;
}

.glyphicon.dev-status.dev-status-locked
{
    color:  #1E90FF;
    text-shadow: 1px 1px 2px #87CEFA, 0 0 1em #87CEFA, 0 0 0.2em #87CEFA;
}

.glyphicon.dev-status.dev-status-locked.dev-status-manual-locked
{
    color:  #72E500;
    text-shadow: 1px 1px 2px #B2FF66, 0 0 1em #B2FF66, 0 0 0.2em #B2FF66;
}

.glyphicon.dev-status.dev-status-locked.dev-status-purge-locked
{
    color:  #9933ff;
    text-shadow: 1px 1px 2px #C233FF, 0 0 1em #C233FF, 0 0 0.2em #C233FF;
}

.glyphicon.dev-status.dev-status-locked.dev-status-manual-unlocked
{
    color:  white;
    text-shadow: 1px 1px 2px #B2FF66, 0 0 1em #B2FF66, 0 0 0.2em #B2FF66;
}

.glyphicon.dev-status.dev-status-xact
{
    color:  #3CB371;
    text-shadow: 1px 1px 2px #00FA9A, 0 0 1em #00FA9A, 0 0 0.2em #00FA9A;
}

.glyphicon.dev-status.dev-status-xact-cancel
{
    color:  white;
    text-shadow: 1px 1px 2px #00FA9A, 0 0 1em #00FA9A, 0 0 0.2em #00FA9A;
}

.glyphicon.dev-status.dev-status-assocprobs
{
    color:  #FFA500;
    text-shadow: 1px 1px 2px #FFD700, 0 0 1em #FFD700, 0 0 0.2em #FFD700;
}

.glyphicon.dev-status.dev-status-problem
{
    color:  #FF0000;
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.glyphicon.dev-status.dev-status-problem-warning
{
    color:  #FF9933;
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.glyphicon.dev-status.dev-status-problem-warning.dev-status-problem
{
    color:  #FF0000;
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.glyphicon.dev-status.dev-status-full-bin
{
    color:  #ead015;
    text-shadow: 1px 1px 2px #ead015, 0 0 1em #ead015, 0 0 0.2em #ead015;
}

.glyphicon.dev-status.dev-status-clear-problem
{
    color:  white;
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.glyphicon.dev-status.dev-status-purge
{
    color:  #9933FF;
    text-shadow: 1px 1px 2px #c993ff, 0 0 1em #c993ff, 0 0 0.2em #c993ff;
}

.glyphicon.dev-status.dev-status-log-in
{
    color:  #337ab7;
    text-shadow: 1px 1px 2px #70a8d8, 0 0 1em #70a8d8, 0 0 0.2em #70a8d8;
}

.glyphicon.dev-status.dev-status-log-out
{
    color:  white;
    text-shadow: 1px 1px 2px #70a8d8, 0 0 1em #70a8d8, 0 0 0.2em #70a8d8;
}

.glyphicon.dev-status.dev-status-command
{
    color:  #66AACC;
    text-shadow: 1px 1px 2px #66CCCC, 0 0 1em #66CCCC, 0 0 0.2em #66CCCC;
}

.glyphicon.dev-status.dev-status-saturation
{
    color:  #DAA520;
    text-shadow: 1px 1px 2px #F0E68C, 0 0 1em #F0E68C, 0 0 0.2em #F0E68C;
}

.glyphicon.dev-status.dev-status-config-set
{
    color:  #3a74a5;
    text-shadow: 1px 1px 2px #9fc8ea, 0 0 1em #9fc8ea, 0 0 0.2em #9fc8ea;
}

.glyphicon.dev-status.dev-status-system-start
{
    color:  #e0e0e0;
    text-shadow: 1px 1px 2px #5cb85c, 0 0 1em #5cb85c, 0 0 0.2em #5cb85c;
}

.glyphicon.dev-status.dev-status-system-hold
{
    color:  #e0e0e0;
    text-shadow: 1px 1px 2px #ec971f, 0 0 1em #ec971f, 0 0 0.2em #ec971f;
}

.glyphicon.dev-status.dev-status-system-stop
{
    color:  #e0e0e0;
    text-shadow: 1px 1px 2px #c9302c, 0 0 1em #c9302c, 0 0 0.2em #c9302c;
}

.glyphicon.dev-status.dev-status-online
{
    color:  #FF0000;
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.glyphicon.dev-status.dev-status-online
{
    color:  #0080FF;
    text-shadow: 1px 1px 2px #CCE5FF, 0 0 1em #CCE5FF, 0 0 0.2em #CCE5FF;
}

/**
 * Device status filter buttons.
 */

.btn .glyphicon.dev-status-locked
{
    color:  #1E90FF;
}

.btn .glyphicon.dev-status-manual-locked
{
    color:  #72E500;
}

.btn .glyphicon.dev-status-purge-locked
{
    color:  #9933ff;
}

.btn .glyphicon.dev-status-xact
{
    color:  #3CB371;
}

.btn .glyphicon.dev-status-purge
{
    color:  #9933ff;
}

.btn .glyphicon.dev-status-assocprobs
{
    color:  #FFA500;
}

.btn .glyphicon.dev-status-problem
{
    color:  #FF0000;
}

.btn .glyphicon.dev-status-problem-warning
{
    color:  #FF9933;
}

.btn .glyphicon.dev-status-full-bin
{
    color: #ead015;
}

/**
 * Device Details
 */

.device-status-list-toggle
{
    border-radius:  0.5em;
    font-weight:  bold;
    padding:  0.6em;
    text-decoration:  none;
    white-space:  nowrap;
}

.device-status-list-toggle.device-status-list-toggle-open
{
}

.device-status-list-toggle-container
{
    width:  100%;
}

.device-status-list-container
{
    position:  absolute;
    width:  375%;
    z-index:  30;
}

.device-status-list-container .pagination
{
    margin:  0;
}

.device-status-table-head-container table
{
    margin-bottom:  0 !important;
}

.device-status-table-body-container
{
    height:  58vh;
    overflow-y:  auto;
    margin-bottom:  0.5em;
}

.device-status-table-body-container.device-status-table-body-container-highlight
{
    outline:  0.2rem dashed rgb(51, 122, 183);
}

.device-status-table-body-container .device-status-filtered-command-popup
{
    background-color:  rgba(51, 122, 183, 0.2);
    width:  97.5%;
    height:  58vh;
    top:  0;
    margin-top:  4.4em;
    position:  absolute;
    z-index:  100;
}

.device-status-table-body-container .device-status-filtered-command-popup p
{
    color:  white;
    font-size:  1.5em;
    font-weight:  bold;
    margin-top:  45%;
    text-align:  center;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.selected-global-command-button
{
    background-color:  white;
    border-color:  #337ab7 !important;
    border-radius:  0.5em;
}

.device-status-table-body-container .device-status-global-command-options-popup-container
{
    background-color:  rgba(255, 255, 255, 0.6);
    width:  97.5%;
    height:  58vh;
    top:  0;
    margin-top:  4.4em;
    position:  absolute;
    z-index:  100;
}

.device-status-table-body-container .device-status-global-command-options-popup
{
    background-color:  white;
    border:  0.2rem solid #337ab7;
    border-radius:  0.5em;
    box-shadow: 0 1em 2em gray;
    margin-top:  0.5em;
    margin-right:  auto;
    margin-left:  auto;
    padding:  1em;
    padding-top:  0;
    width:  96%;
}

.device-status-table-body-container .device-status-global-command-options-popup-title
{
    padding-bottom:  0.5em;
    margin-bottom:  0.5em;
    text-align:  center;
}

.device-status-table-body-container .device-status-global-command-options-popup-title h4
{
    margin-bottom:  0;
}

.device-status-table-body-container .device-status-global-command-options-popup-subtitle
{
    font-size:  0.8em;
    text-align:  center;
}

.device-status-table-body-container .device-status-global-command-options-popup-body
{
}

.device-status-list-container.ng-hide-add,
.device-status-list-container.ng-hide-remove
{
    transition:  transform 0.5s linear;
}

.device-status-list-container.ng-hide
{
    transform:  translateX(-110%);
}

.device-status-table-container
{
    padding:  0.5em;
}

.device-status-table thead
{
    font-weight:  bold;
    text-align:  left;
}

.device-status-table thead th button
{
    vertical-align:  bottom;
}

.device-status-table th
{
    padding:  0 !important;
}

.device-status-entry
{
    border-left:  0.4em solid #E0E0E0;
    /*transition:  border-left-color 0.2s linear;*/
}

.device-status-entry td
{
    padding:  0 !important;
}

.device-status-entry.curr-dev
{
    border-left:  0.4em solid #337AB7;
}

.device-status-entry.curr-dev.offline
{
    border-left:  0.4em solid #808080;
}

.device-status-entry:not(.curr-dev) .device-status-base
{
    transform:  translateY(-0.8em);
}

.device-status-entry.favorite-dev
{
    border-left:  0.4em solid #00BFFF;
}

.device-status-entry.requested-offline
{
    background-color:  white;
    animation-duration: 0.6s;
    animation-name: flash-gray;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@-webkit-keyframes flash-gray
{
    from
    {
        background-color:  transparent;
    }

    to
    {
        background-color:  #D3D3D3;
    }
}

@keyframes flash-gray
{
    from
    {
        background-color:  transparent;
    }

    to
    {
        background-color:  #D3D3D3;
    }
}

.device-status-entry.offline
{
    background-color:  #D3D3D3;
}

.device-status-entry.offline .device-status-base .device.station .shape,
.device-status-entry.offline .device-status-base .device.blower .shape
{
    background-color:  #606060;
}

.device-status-entry.offline .device-status-base .device.diverter .shape
{
    border-bottom-color:  #606060;
}

.device-status-entry.offline .device-status-base .device.iz .shape
{
    border-bottom-color:  #606060;
}

.device-status-entry.offline .device-status-base .device.cct_receiver .shape
{
    border-top-color: #606060;
}

.device-status-entry.offline .device-status-base .device.iz .shape:after
{
    border-top-color:  #606060;
}

.device-status-entry.offline .device-status-base .device.zone-gate .shape
{
    border-bottom-color:  #606060;
}

.device-status-entry.offline .device-status-base .device.zone-gate .shape:after
{
    border-top-color:  #606060;
}

.device-status-title-bar
{
    background-color:  #E0E0E0;
    color:  white;
    font-weight:  bold;
    opacity:  0;
    /*transition:  opacity 0.2s linear;*/
}

.device-status-entry.curr-dev .device-status-title-bar
{
    background-color:  #337AB7;
    opacity:  1;
}

.device-status-entry.curr-dev.offline .device-status-title-bar
{
    background-color:  #808080;
}

.device-status-entry.favorite-dev .device-status-title-bar
{
    background-color:  #00BFFF;
}

.device-status-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.device-status-title-bar .btn-link.toggle-on
{
    color:  white;
}

.device-status-title-bar .btn-link:hover
{
    color:  white;
}

.device-status-command-curr
{
    background-color:  #e0e0e0;
    outline:  1px dashed lightgray;
}

.device-status-base
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  space-between;
    /*padding:  0.5em;*/
    padding-left:  0.5em;
    padding-right:  0.5em;
    /*transition:  transform 0.2s linear;*/
}

.device-status-base .device-status-device
{
    width:  20%
}

.device-status-base .device-status-name
{
    width:  40%;
}

.mini-device-status-title-bar
{
    background-color:  #C0C0C0;
    border-radius:  0.2em;
    color:  white;
    display:  inline-block;
    font-weight:  bold;
    margin-left:  0.5em;
    position:  relative;
}

.mini-device-status-title-bar.active
{
    background-color: #337AB7;
}

.mini-device-status-title-bar .left-bubble-arrow.active
{
    color: #337AB7;
}

/*.mini-device-status-title-bar:hover
{
    background-color:  #337AB7;
}

.mini-device-status-title-bar:hover .left-bubble-arrow
{
    color:  #337AB7;
}*/

.mini-device-status-title-bar .left-bubble-arrow
{
    color:  #C0C0C0;
    cursor:  default;
    display:  inline-block;
    position:  absolute;
    transform:  scaleX(-1) translateX(0.8em) translateY(0.2em);
}

.mini-device-status-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.mini-device-status-title-bar .btn-link.toggle-on
{
    color:  white;
}

.mini-device-status-title-bar .btn-link:hover
{
    color:  white;
}

.mini-device-status-title-bar .mini-device-status
{
    font-size:  0.8em;
    margin-right:  0.5em;
}

.device-conn-align-arrow
{
    color:  #C0C0C0;
    cursor:  default;
}

.device-conn-align-arrow-aligned
{
    color:  black;
}

.device-list-details
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  nowrap;
    justify-content:  center;
}

.device-list-details > *
{
    flex:  0 1 auto;
}

.device-list-details > .device-list-status-probs
{
    background: linear-gradient(to right, transparent 0%, red 50%,
                                transparent 100%);
    color:  white;
    font-weight:  bold;
    text-align:  center;
    margin-bottom:  0.3em;
    width:  100%;
}

.device-sensor
{
    background-color:  transparent;
    border:  0.1em solid gray;
    border-radius:  1em;
    height:  1em;
    width:  1em;
}

.device-sensor.device-sensor-on
{
    background-color:  #00CC00;
    box-shadow: 1px 1px 2px #91FF00, 0 0 1em #91FF00, 0 0 0.2em #91FF00;
}

.device-sensor.device-sensor-off
{
    background-color:  #C0C0C0;
}

/**
 * Device connections container
 */

.device-connections
{
    height:  15em;
    width:  100%;

    align-content:  space-around;
    align-items:  space-around;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  nowrap;
    justify-content:  space-around;
}

.device-connections > .device-group
{
    /*height:  100%;*/

    flex:  0 1 auto;

    align-content:  space-around;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  nowrap;
    justify-content:  space-around;
}

.device-connections > .device-group > *
{
    flex:  0 1 auto;
}

.device-group .port.aligned
{
    font-weight:  bold;
}

.device-details-tabs
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;
    justify-content:  space-around;
    width:  100%;
}

.device-details-tabs .device-details-tab
{
    border-radius:  4px;
    padding:  0.5em;
    margin:  0.5em;
    text-decoration:  none;
}

.device-details-tabs .device-details-tab:hover
{
    background-color:  #EEE;
}

.device-details-tabs .device-details-tab.device-details-tab-active
{
    background-color:  #337AB7;
    color:  white;
}

.device-details-tabs .device-details-tab.device-prob-tab
{
    color:  #FE0000;
    font-weight:  bold;
}

.device-details-tabs .device-details-tab.device-prob-tab.device-details-tab-active
{
    color:  white;
    background-color:  #FE0000 !important;
}

.device-details-tab-panels
{
    min-height:  13em;
    overflow:  none;
    width:  100%;
}

.device-details-tab-panels table td
{
    padding:  0.1em !important;
}

.device-details-tab-panels .device-details-carriers-tab-panel
{
    display:  flex;
    justify-content:  space-around;
    align-items:  stretch;
    width:  100%;
}

.device-details-tab-panels .device-details-carriers-tab-panel > div
{
    width:  45%;
}

.device-details-tab-panels .device-details-carriers-tab-panel .device-details-carriers-detected
{
    border-right:  1px solid #e0e0e0;
}

.device-details-tab-panels .device-details-carriers-tab-panel .device-details-carriers-not-detected .badge
{
    background-color:  #e0e0e0;
    color:  #777;
}

/**
 * TODO:  Using !important is a bit of a hack.  See if there's a way using
 *        the bootstrap classes with this new class to make it unnecessary.
 */

.device-list-details-row
{
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    padding:  0.5em;
}

/**
 * Loading indicator for history screen
 */

.history-loading-indicator
{
    position:  absolute;
    left:  0;
    top:  0;
    margin-top:  7em;
    width:  100%;
    height:  60vh;
}

.history-loading-indicator .loading-indicator
{
    margin-left:  auto;
    margin-right:  auto;
    margin-top:  15%;
    background-color:  rgba(255, 255, 255, 0.5);
    border-radius:  1em;
    padding:  0.5em;
    width:  18em;
}

.history-loading-indicator .loading-indicator .loading-text
{
    -webkit-animation:  loading 1s linear infinite alternate;
    animation:  loading 1s linear infinite alternate;
    font-weight:  bold;
    text-align:  center;
}

.history-loading-indicator .loading-indicator .loading-logo
{
    background-color:  #e0e0e0;
    border-radius:  2em;
    padding:  0.1em;
    width:  100%;
}

.history-loading-indicator .loading-indicator .loading-logo img
{
    background-color:  white;
    border-radius:  2em;
    height:  2em;
    width:  2em;
    -webkit-animation:  side-to-side 2s linear infinite alternate;
    animation:  side-to-side 2s linear infinite alternate;
}

@-webkit-keyframes loading
{
    from
    {
        transform:  scale(1, 1);
    }

    to
    {
        transform:  scale(1.25, 1.25);
    }
}

@keyframes loading
{
    from
    {
        transform:  scale(1, 1);
    }

    to
    {
        transform:  scale(1.25, 1.25);
    }
}

@-webkit-keyframes side-to-side
{
    from
    {
        transform:  translateX(0em) rotate(0deg);
    }

    to
    {
        transform:  translateX(15em) rotate(1080deg);
    }
}

@keyframes side-to-side
{
    from
    {
        transform:  translateX(0em) rotate(0deg);
    }

    to
    {
        transform:  translateX(15em) rotate(1080deg);
    }
}

/**
 * Main Display Panels
 */

.history
{
    min-height:  72vh;
}

.history.history-tab-loading
{
    opacity:  0.4;
}

.main
{
    min-height:  72vh;
}

.main-tab-container
{
    transition:  transform 0.5s linear;
}

.main-tab-container-shifted
{
    transform:  translateX(30%);
}

.main-tab-container-shifted > .panel > .panel-body > .main
{
    overflow-x:  auto;
    overflow-y:  hidden;
    width:  80%;
}

.main-row-shifted
{
    overflow-x:  hidden;
    overflow-y:  visible !important;
}

/**
 * Buildings Display
 */

.location
{
    padding:  1.5em;
}

.location .building
{
    align-items:  stretch;
    border:  1px solid #E0E0E0;
    display:  flex;
    flex-direction:  column-reverse;
    justify-content:  space-around;
    padding:  2em 1.5em 2em 1.5em;
}

.location .building:not(:first-child)
{
    margin-top:  2.5em;
}

.building .floor
{
    align-items:  stretch;
    background-color:  #E0E0E0;
    border:  1px solid #E0E0E0;
    display:  flex;
    flex-direction:  row;
    justify-content:  space-around;
    padding:  1.5em;
    position:  relative;
}

.building .description
{
    font-size:  1.2em;
    font-weight:  bold;
    position:  absolute;
    text-shadow: 1px 1px 2px black;
    transform:  translate(-2em, -2em) rotate(-10deg);
    z-index:  1;
}

.floor .room
{
    background-color:  white;
    border:  1px solid #E0E0E0;
    flex-grow:  1;
    padding:  1.5em;
    align-items:  stretch;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;
    justify-content:  space-around;
    position:  relative;
}

/**
 * Resource pool display
 */

.process
{
    border-left:  0.4em solid gray;
    margin-top:  0.5em;
    display:  flex;
    flex-direction:  column;
}

.process.process-user
{
    border-left:  0.4em solid #72E500;
}

.process.process-system
{
    border-left:  0.4em solid #1E90FF;
}

.process.process-purge
{
    border-left:  0.4em solid #9933ff;
}

.process.process-unidentified
{
    border-left:  0.4em solid #C61D1D;
}

.process.ng-enter,
.process.ng-leave,
.process.ng-move
{
  transition: 0.5s linear opacity;
}

.process.ng-enter,
.process.ng-move
{
  opacity: 0;
}

.process.ng-move.ng-move-active,
.process.ng-enter.ng-enter-active
{
  opacity: 1;
}

.process.ng-leave
{
  opacity: 1;
}

.process.ng-leave.ng-leave-active 
{
  opacity: 0;
  transition:  2s linear opacity;
}

.process-title-bar
{
    background-color:  gray;
    color:  white;
    font-weight:  bold;
}

.process.process-system .process-title-bar
{
    background-color:  #1E90FF;
}

.process.process-user .process-title-bar
{
    background-color:  #72E500;
}

.process.process-purge .process-title-bar
{
    background-color:  #9933ff;
}

.process.process-unidentified .process-title-bar
{
    background-color:  #C61D1D;
}

.process-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.process-title-bar .btn-link:hover
{
    color:  white;
}

.process-title-bar .process-id
{
    font-size:  0.8em;
}

.process-base
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    padding:  0.5em;
    padding-left:  3em;
    padding-right:  3em;
}

.process-base .device
{
    padding:  0.3em;
}

/**
 * Problems display
 */

.problem
{
    border-left:  0.4em solid #C61D1D;
    display:  flex;
    flex-direction:  column;
    margin-top:  0.5em;
}

.problem.problem-level-warning
{
    border-left:  0.4em solid #FF9933;
}

.problem.problem-level-severe
{
    border-left:  0.4em solid #C61D1D;
}

.problem.problem-level-inactive
{
    border-left:  0.4em solid #808080;
    background-color:  #D3D3D3;
}

.problem.ng-enter,
.problem.ng-leave,
.problem.ng-move
{
  transition: 0.5s linear all;
}

.problem.ng-enter,
.problem.ng-move
{
  opacity: 0;
  /*transform:  translateX(-100%);*/
}

.problem.ng-move.ng-move-active,
.problem.ng-enter.ng-enter-active
{
  opacity: 1;
  /*transform:  translateX(0);*/
}

.problem.ng-leave
{
  opacity: 1;
}

.problem.ng-leave.ng-leave-active 
{
  opacity: 0;
  transition:  2s linear opacity;
}

.problem-title-bar
{
    background-color:  #C61D1D;
    color:  white;
    font-weight:  bold;
}

.problem.problem-level-warning .problem-title-bar
{
    background-color:  #FF9933;
}

.problem.problem-level-severe .problem-title-bar
{
    background-color:  #C61D1D;
}

.problem.problem-level-inactive .problem-title-bar
{
    background-color:  #808080;
}

.problem-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.problem-title-bar .btn-link:hover
{
    color:  white;
}

.problem-title-bar .problem-time
{
    font-size:  0.8em;
}

.problem-base
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  space-between;
    padding:  0.5em;
}

.problem-base .options
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
    width:  10%;
}

.problem-base .problem-desc
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
    width:  75%;
}

.problem-base .problem-devices
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
    margin-left:  3em;
    width:  25%;
}

.problem-clear-options
{
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    padding:  0.5em;
}

.problem.problem-level-inactive .device.station .shape,
.problem.problem-level-inactive .device.blower .shape
{
    background-color:  #606060;
}

.problem.problem-level-inactive .device.diverter .shape
{
    border-bottom-color:  #606060;
}

.problem.problem-level-inactive .device.iz .shape
{
    border-bottom-color:  #606060;
}

.problem.problem-level-inactive .device.cct_receiver .shape
{
    border-top-color:  #606060;
}

.problem.problem-level-inactive .device.iz .shape:after
{
    border-top-color:  #606060;
}

.problem.problem-level-inactive .device.zone-gate .shape
{
    border-bottom-color:  #606060;
}

.problem.problem-level-inactive .device.zone-gate .shape:after
{
    border-top-color:  #606060;
}

.filtered-problem
{
    opacity:  0.5;
}

.filtered-problem .problem-base,
.filtered-problem .problem-clear-options
{
    display:  none;
}

/**
 * Stats report
 */

.history.report
{
    align-items:  stretch;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;
    justify-content:  space-around;
}

.history-report-item
{
    margin-top:  2em;
    max-height:  20em;
    min-height:  20em;
    width:  30%;
}

/**
 * Notifications
 */

.notifications-widget
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  wrap;

    top:  0;
    left:  50%;
    position:  fixed;
    margin-left:  -17em;
    z-index:  30;
    width:  34em;
}

.notifications-widget .notifications-toggle
{
    background-color:  rgba(128, 128, 128, 0.9);
    border-bottom-left-radius:  0.5em;
    border-bottom-right-radius:  0.5em;
    color:  rgba(255, 255, 255, 0.8);
    font-size:  1.5em;
    padding-left:  2em;
    padding-right:  2em;
}

.notifications-widget .notifications-toggle:hover
{
    color:  white;
}

.notifications
{
    align-items:  stretch;
    background-color:  rgba(128, 128, 128, 0.9);
    border-bottom-left-radius:  0.5em;
    border-bottom-right-radius:  0.5em;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  wrap;
    justify-content:  flex-start;
    padding-top:  0;
    padding-left:  0.5em;
    padding-bottom:  0;
    padding-right:  0.5em;
    width:  100%;
}

.notifications .notification
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;

    color:  white;
    font-size:  0.9em;
    font-weight:  bold;
    border:  1px solid transparent;
    min-height:  3em;
    padding:  0.5em;
}

.notifications .notification.notification-old
{
}

.notifications .notification.notification-normal .glyphicon
{
    text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
}

.notifications .notification.notification-conn .glyphicon
{
    text-shadow: 1px 1px 2px purple, 0 0 1em blue, 0 0 0.2em purple;
}

.notifications .notification.notification-fault .glyphicon
{
    text-shadow: 1px 1px 2px #FFA07A, 0 0 1em #FFA07A, 0 0 0.2em #FFA07A;
}

.notifications .notification.notification-xact .glyphicon
{
    text-shadow: 1px 1px 2px #00FA9A, 0 0 1em #00FA9A, 0 0 0.2em #00FA9A;
}

.notifications .notification:not(:last-child)
{
    border-bottom:  1px solid rgba(255, 255, 255, 0.5);
}

.notifications .notification > *:not(:last-child)
{
    padding-right:  0.5em;
}

.notifications .notification .notification-icon
{
    font-size:  1.2em;
}

.notification.ng-enter,
.notification.ng-leave,
.notification.ng-move
{
}

.notification.ng-enter
{
    transform:  translateY(-100%);
}

.notification.ng-move
{
}

.notification.ng-move.ng-move-active,
.notification.ng-enter.ng-enter-active
{
    transform:  translateY(0);
}

.notification.ng-leave.ng-leave-active 
{
}

/**
 * User notifications
 */

.user-notifications-widget
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  wrap;

    top:  40vh;
    left:  50%;
    position:  fixed;
    margin-left:  -20em;
    z-index:  30;
    width:  40em;
}

.user-notifications-widget .user-notifications
{
    align-items:  stretch;
    background-color:  rgba(128, 128, 128, 0.9);
    border-radius:  0.5em;
    display:  flex;
    flex-direction:  column;
    flex-wrap:  wrap;
    justify-content:  flex-start;
    padding-top:  0;
    padding-left:  0.5em;
    padding-bottom:  0;
    padding-right:  0.5em;
    width:  100%;
}

.user-notifications .user-notification
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;

    color:  white;
    font-size:  0.9em;
    font-weight:  bold;
    border:  1px solid transparent;
    min-height:  3em;
    padding:  0.5em;
}

.user-notifications .user-notification > *:not(:last-child)
{
    padding-right:  0.5em;
}

.user-notifications .user-notification-icon
{
    font-size:  1.2em;
    text-shadow: 1px 1px 2px blue, 0 0 1em blue, 0 0 0.2em blue;
}

/**
 * Device Filter
 */

.filter-description
{
    padding-top:  0.5em;
    padding-bottom:  0.5em;
}

.filter-description .filter-intro
{
}

.filter-description .filter-value
{
    background-color:  gray;
    border:  0.1em solid #E0E0E0;
    border-bottom-left-radius:  0.7em;
    border-top-left-radius:  0.7em;
    color:  white;
    cursor:  pointer;
    font-size:  0.9em;
    font-weight:  bold;
    margin-left:  1em;
    padding:  0.3em;
}

.filter-description .filter-value:hover
{
    background-color:  #E0E0E0;
}

/**
 * Generic toggle switch
 */

.toggle-switch
{
    background-color:  #CACACA;
    border-radius:  3em;
    cursor:  pointer;
    display:  inline-block;
    height:  1.5em;
    padding:  0;
    width:  3em;
}

.toggle-switch .toggle-switch-knob
{
    background-color:  white;
    border:  0.1em solid gray;
    border-radius:  50%;
    height:  100%;
    width:  50%;
}

.toggle-switch.toggle-switch-on
{
    background-color:  #5CB85C;
    transition:  all 0.1s;
}

.toggle-switch.toggle-switch-off
{
    background-color:  #CACACA;
    transition:  all 0.1s;
}

.toggle-switch.toggle-switch-on .toggle-switch-knob
{
    transform:  translateX(100%);
    transition:  all 0.1s;
}

.toggle-switch.toggle-switch-off .toggle-switch-knob
{
    transform:  translateX(0);
    transition:  all 0.1s;
}

/**
 * Live transactions page
 */

.xacts-tabs
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  nowrap;
    justify-content:  space-around;
    width:  100%;
}

.xacts-tabs .xacts-tab
{
    border-radius:  4px;
    padding:  0.5em;
    margin:  0.5em;
    text-decoration:  none;
}

.xacts-tabs .xacts-tab:hover
{
    background-color:  #EEE;
}

.xacts-tabs .xacts-tab.xacts-tab-active
{
    background-color:  #337AB7;
    color:  white;
}

.xacts-tabs .xacts-tab.xacts-tab-active .badge
{
    background-color:  white;
    color:  #337AB7;
}

/**
 * Live stats page.
 */

.stats-tabs
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  nowrap;
    justify-content:  space-around;
    width:  100%;
}

.stats-tabs .stats-tab
{
    border-radius:  4px;
    padding:  0.5em;
    margin:  0.5em;
    text-decoration:  none;
}

.stats-tabs .stats-tab:hover
{
    background-color:  #EEE;
}

.stats-tabs .stats-tab.stats-tab-active
{
    background-color:  #337AB7;
    color:  white;
}

/**
 * Pie chart
 */

.arc path
{
    stroke:  white;
}

.pie-text
{
    fill:  white;
    pointer-events: none;
    font-weight:  bold;
}

/**
 * Purge
 */

.purge
{
    border-left:  0.4em solid #9933FF;
    display:  flex;
    flex-direction:  column;
    margin-top:  0.5em;
}

.purge.ng-enter,
.purge.ng-leave,
.purge.ng-move
{
  transition: 0.5s linear all;
}

.purge.ng-enter,
.purge.ng-move
{
  opacity: 0;
  /*transform:  translateX(-100%);*/
}

.purge.ng-move.ng-move-active,
.purge.ng-enter.ng-enter-active
{
  opacity: 1;
  /*transform:  translateX(0);*/
}

.purge.ng-leave
{
  opacity: 1;
}

.purge.ng-leave.ng-leave-active 
{
  opacity: 0;
  transition:  2s linear opacity;
}

.purge-title-bar
{
    background-color:  #9933FF;
    color:  white;
    font-weight:  bold;
}

.purge-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.purge-title-bar .btn-link:hover
{
    color:  white;
}

.purge-title-bar .purge-time
{
    font-size:  0.8em;
}

.purge-unhealthy
{
    border-left:  0.4em solid #FF8400;
}

.purge-unhealthy .purge-title-bar
{
    background-color:  #FF8400;
}

.purge-root-device
{
    /*border-right: 1px solid #DDD;
    border-left: 1px solid #DDD;*/
    padding-left: 2em;
    padding-right: 2em;
}

.purge-base
{
    
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  start;
    padding:  0.5em;
    padding-right:  2em;

}

.purge-base .purge-action
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  space-between;
    padding:  0.5em;
}

.purge-base .purge-action .action-path
{
    width:  10%;
}

.purge-base .purge-action .action-path
{
    width:  85%;
    padding-left: 1em;
}

.purge-base .purge-action .glyphicon-arrow-right,.purge-timeline .glyphicon-arrow-right
{
    color:  gray;
    font-size:  1.3em;
    transform:  translateY(-0.25em);
}

.purge-meta
{
    align-content:  center;
    align-items:  stretch;
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    display:  flex;
    justify-content:  space-between;
    padding:  0.5em;
}

.purge-stats
{
    flex-basis:  auto;
    flex-grow:  1;
    margin-right: 0.5em;
}

.purge-timeline
{
    height:  25em;
    overflow-y:  scroll;
    /*width:  100%;*/
    flex-basis:  auto;
    flex-grow: 3;
}

.purge-timeline tr
{
    height:  3em;
}

.filtered-purge
{
    opacity:  0.5;
}

.filtered-purge .purge-base,
.filtered-purge .purge-meta
{
    display:  none;
}

/**
 * Clinical view
 */

.clinical-transaction-base-row .clinical-transaction-duration
{
    color:  white;
    font-weight:  bold;
    transition:  background-color 1s linear;
}

.clinical-transaction-base-row.clinical-transaction-young .clinical-transaction-duration
{
    background-color:  rgb(193, 209, 117);
}

.clinical-transaction-base-row.clinical-transaction-middle-age .clinical-transaction-duration
{
    background-color:  rgb(251, 184, 23);
}

.clinical-transaction-base-row.clinical-transaction-old .clinical-transaction-duration
{
    background-color:  rgb(220, 67, 38);
}

.clinical-transaction-base-row.clinical-transaction-finished .clinical-transaction-duration
{
    background-color:  gray;
}

.clinical-transaction-base-row .clinical-transaction-health
{
    text-align:  center;
}

.clinical-transaction-base-row .clinical-transaction-health .glyphicon
{
    animation:  pulsate 1s linear alternate infinite;
    color:  white;
    font-size:  1.2em;
    opacity:  0;
}

.clinical-transaction-base-row .clinical-transaction-health.clinical-transaction-unhealthy
{
    animation:  clinical-health-alert 1s linear alternate infinite;
    background-color:  #FF8400;
}

.clinical-transaction-base-row.clinical-transaction-finished .clinical-transaction-health.clinical-transaction-unhealthy
{
    animation:  none;
    background-color:  gray;
}

.clinical-transaction-base-row.clinical-transaction-finished .clinical-transaction-health.clinical-transaction-unhealthy .glyphicon
{
    animation:  none;
}

.clinical-transaction-base-row .clinical-transaction-health.clinical-transaction-unhealthy .glyphicon
{
    opacity:  1;
}

.clinical-transaction-base-row .clinical-transaction-priority
{
    position:  relative;
    text-align:  center;
    width:  2em;
}

.clinical-transaction-base-row .clinical-transaction-priority.is-priority
{
    background-color:  #32825a;
}

.clinical-transaction-base-row.clinical-transaction-finished .clinical-transaction-priority.is-priority
{
    background-color:  gray;
}

.clinical-transaction-base-row.clinical-transaction-finished .clinical-transaction-priority.is-priority .glyphicon
{
    animation:  none !important;
    color:  white !important;
}

.clinical-transaction-base-row .clinical-transaction-priority .glyphicon
{
    color:  #00c462;
    position:  absolute;
    left:  0;
    width:  100%;
}

.clinical-transaction-base-row .clinical-transaction-priority .glyphicon:first-child
{
    opacity:  0;
    transform:  translateY(0.2em);
}

.clinical-transaction-base-row .clinical-transaction-priority.is-priority .glyphicon:first-child
{
    animation-duration: 1.5s;
    animation-name: flash-priority-3;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3, jump-both);
    opacity:  1;
}

.clinical-transaction-base-row .clinical-transaction-priority .glyphicon:nth-child(2)
{
    opacity:  0;
    transform:  translateY(0.8em);
}

.clinical-transaction-base-row .clinical-transaction-priority.is-priority .glyphicon:nth-child(2)
{
    animation-duration: 1.5s;
    animation-name: flash-priority-2;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3, jump-both);
    opacity:  1;
}

.clinical-transaction-base-row .clinical-transaction-priority .glyphicon:last-child
{
    opacity:  0;
    transform:  translateY(1.4em);
}

.clinical-transaction-base-row .clinical-transaction-priority.is-priority .glyphicon:last-child
{
    animation-duration: 1.5s;
    animation-name: flash-priority-1;
    animation-iteration-count: infinite;
    animation-timing-function: steps(3, jump-both);
    opacity:  1;
}

@-webkit-keyframes flash-priority-1
{
    0%
    {
        color:  white;
    }

    50%
    {
        color:  #00c462;
    }

    100%
    {
        color:  #00c462;
    }
}

@keyframes flash-priority-1
{
    0%
    {
        color:  white;
    }

    50%
    {
        color:  #00c462;
    }

    100%
    {
        color:  #00c462;
    }
}

@-webkit-keyframes flash-priority-2
{
    0%
    {
        color:  #00c462;
    }

    50%
    {
        color:  white;
    }

    100%
    {
        color:  #00c462;
    }
}

@keyframes flash-priority-2
{
    0%
    {
        color:  #00c462;
    }

    50%
    {
        color:  white;
    }

    100%
    {
        color:  #00c462;
    }
}

@keyframes flash-priority-3
{
    0%
    {
        color:  #00c462;
    }

    50%
    {
        color:  #00c462;
    }

    100%
    {
        color:  white;
    }
}

@keyframes flash-priority-3
{
    0%
    {
        color:  #00c462;
    }

    50%
    {
        color:  #00c462;
    }

    100%
    {
        color:  white;
    }
}

.clinical-transaction-details-row td
{
    border-top:  1px solid transparent !important;
}

.clinical-transaction-details
{
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;
    justify-content:  flex-start;
}

.clinical-transaction-details-row
{
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
}

.clinical-transaction-details .clinical-transaction-event
{
    background-color:  #e0e0e0;
    border-radius:  0.2em;
    padding:  0.5em;
    margin:  0.5em;
}

.clinical-transaction-details .clinical-transaction-event table
{
    text-align:  center;
    width:  100%;
}

.clinical-transaction-details .clinical-transaction-event table th
{
    background-color:  rgba(255, 255, 255, 0.6);
    border-radius:  0.2em;
    text-align:  center !important;
}

.clinical-transaction-details .clinical-transaction-event table th,
.clinical-transaction-details .clinical-transaction-event table td
{
    padding-left:  0.5em;
    padding-right:  0.5em;
}

.clinical-transaction-event .clinical-event-time
{
    font-size:  0.8em;
    opacity:  0.7;
}

.clinical-transaction-details .clinical-transaction-arrow
{
    align-self:  center;
    color:  gray;
    font-size:  2em;
    margin:  0.5em;
}

.clinical-icon
{
    font-size:  1.2em;
    margin-right:  1em;
    transform:  translateY(0.2em);
}

.clinical-transaction-progress
{
    height:  4px;
    position:  relative;
    width:  100%;
    transition:  color 0.5s linear;
}

.clinical-transaction-progress-bar
{
    background-color:  white;
    display:  block;
    height:  100%;
    transition:  width 0.5s linear, color 0.5s linear;
}

.clinical-transaction-young .clinical-transaction-progress
{
    background-color:  rgba(193, 209, 117, 0.2);
}

.clinical-transaction-middle-age .clinical-transaction-progress
{
    background-color:  rgba(251, 184, 23, 0.2);
}

.clinical-transaction-old .clinical-transaction-progress
{
    background-color:  rgba(220, 67, 38, 0.2);
}

.clinical-transaction-finished .clinical-transaction-progress
{
    background-color:  rgba(128, 128, 128, 0.2);
}

.clinical-transaction-young .clinical-transaction-progress-bar
{
    background-color:  rgba(193, 209, 117, 0.8);
}

.clinical-transaction-middle-age .clinical-transaction-progress-bar
{
    background-color:  rgba(251, 184, 23, 0.8);
}

.clinical-transaction-old .clinical-transaction-progress-bar
{
    background-color:  rgba(220, 67, 38, 0.8);
}

.clinical-transaction-finished .clinical-transaction-progress-bar
{
    background-color:  rgba(128, 128, 128, 0.8);
}

.clinical-transaction-monitored-station
{
    font-weight:  bold;
}

.clinical-flag-input-one button, .clinical-flag-input-one .checkBoxContainer
{
    background-image:  linear-gradient(rgb(0, 219, 200), rgb(0, 172, 157)) !important;
    color:  white !important;
    font-weight:  bold;
}

.clinical-flag-input-one .multiSelectItem
{
    color:  white !important;
}

.clinical-flag-input-one .multiSelectItem.selected
{
    color:  black !important;
}

.clinical-flag-input-two button, .clinical-flag-input-two .checkBoxContainer
{
    background-image:  linear-gradient(rgb(99, 150, 237), rgb(79, 119, 188)) !important;
    color:  white !important;
    font-weight:  bold;
}

.clinical-flag-input-two .multiSelectItem
{
    color:  white !important;
}

.clinical-flag-input-two .multiSelectItem.selected
{
    color:  black !important;
}

.clinical-flag-input-three button, .clinical-flag-input-three .checkBoxContainer
{
    background-image:  linear-gradient(rgb(206, 92, 200), rgb(161, 74, 156)) !important;
    color:  white !important;
    font-weight:  bold;
}

.clinical-flag-input-three .multiSelectItem
{
    color:  white !important;
}

.clinical-flag-input-three .multiSelectItem.selected
{
    color:  black !important;
}

.clinical-transaction-flag-one
{
    color:  white;
    background-color:   rgb(0, 172, 157);
    font-weight:  bold;
}

.clinical-transaction-flag-two
{
    background-color:  rgb(79, 119, 188);
    color:  white;
    font-weight:  bold;
}

.clinical-transaction-flag-three
{
    background-color:   rgb(161, 74, 156);
    color:  white;
    font-weight:  bold;
}

@-webkit-keyframes pulsate
{
    from
    {
        transform:  scale(1, 1);
    }

    to
    {
        transform:  scale(1.5, 1.5);
    }
}

@keyframes pulsate
{
    from
    {
        transform:  scale(1, 1);
    }

    to
    {
        transform:  scale(1.5, 1.5);
    }
}

@-webkit-keyframes clinical-health-alert
{
    from
    {
        background-color:  #FF8400;
    }

    to
    {
        background-color:  #ffc400;
    }
}

@keyframes clinical-health-alert
{
    from
    {
        background-color:  #FF8400;
    }

    to
    {
        background-color:  #ffc400;
    }
}

/**
 * Time picker hack to make it consistent with the rest of the app.
 */

.timepicker input.form-control
{
    border-radius:  3px !important;
    height:  30px !important;
    margin-top:  1px;
}

.timepicker .btn
{
    font-size:  12px !important;
    padding-top:  5px !important;
}

/**
 * "None found" messages
 */

.transaction-none-found,
.purge-none-found,
.problem-none-found
{
    margin-top:  0.5em;
}

/**
 * Blower path
 */

.blower-path .glyphicon-arrow-right, .blower-path .glyphicon-arrow-left, .blower-path .glyphicon-minus
{
    color:  gray;
    font-size:  1.3em;
    transform:  translateY(-0.5em);
}

/**
 * Command line interface to control center
 */

.ctrl-center-command-line
{
    background-color:  black;
    font-family:  monospace;
    height:  40vh;
    max-height:  40vh;
    overflow-y:  scroll;
    width:  40em;
}

.ctrl-center-command-line-output
{
    background-color:  #202020;
    color:  #c0c0c0;
}

.ctrl-center-command-line-input
{
    background-color:  black;
    color:  white;
}

.ctrl-center-command-line-input input[type="text"]
{
    background-color:  black;
    border:  0 ;
    box-shadow:  none;
    outline:  0;
    width:  96%;
}

/*
 * Help link
 */

.help-link
{
    align-items:  flex-start;
    align-content:  flex-start;
    bottom:  0;
    position:  fixed;
    z-index:  0;
    display:  flex;
    flex-direction:  column;
    display: flex;
    justify-content: flex-start;
}

/**
 * User control panel
 */

.user-control-panel
{
    align-items:  flex-end;
    align-content:  flex-end;
    bottom:  0;
    right:  0;
    position:  fixed;
    z-index:  30;
    display:  flex;
    flex-direction:  column;
    pointer-events:  none;
}

.user-control-panel-panes
{
    margin-bottom:  0.5em;
    margin-right:  2.85em;
}

.user-control-panel-pane
{
    background-color:  white;
    border-radius:  0.5em;
    border:  2px solid #337ab7;
    padding:  1em;
    padding-top:  0;
    pointer-events:  all;
}

.user-control-panel-pane.user-control-panel-pane-important
{
    border-color:  #ff7b00;
}

.user-control-panel-pane > h4:first-child
{
    color:  #11283c;
    text-align:  center;
}

.user-control-panel-announcements
{
    height:  40vh;
    width:  25em;
}

.user-control-panel-announcements .user-control-panel-announcements-current
{
    height:  92%;
    overflow-y:  scroll;
}

.user-control-panel-announcements .user-control-panel-announcements-current table
{
    width:  100%;
}

.user-control-panel-announcements .user-control-panel-announcements-current table tr:not(:last-child) td
{
    padding-bottom:  0.5em;
}

.user-control-panel-announcements .user-control-panel-announcements-current table td
{
    vertical-align:  top;
}

.user-control-panel-announcements .user-control-panel-announcements-current .user-control-panel-announcement-message
{
    padding-left:  0.5em;
    width:  90%;
}


.user-control-panel-announcements .user-control-panel-announcements-announcement:not(.user-control-panel-announcement-active) .user-control-panel-announcement-message
{
    color:  gray;
}

.user-control-panel-users
{
    height:  40vh;
    width:  25em;
    overflow-y:  scroll;
}

.user-control-panel-users .user-control-panel-user
{
    margin-bottom:  0.5em;
}

.user-control-panel-users .user-control-panel-user-sessions
{
    color:  gray;
    font-size:  0.85em;
}

.user-control-panel-notifications
{
    height:  40vh;
    width:  25em;
    overflow-y:  scroll;
}

.user-control-panel-notifications .user-control-panel-notification,
.user-control-panel-base-notifications .user-control-panel-notification
{
    background-color:  white;
    border-radius:  0.5em;
    border:  2px solid #337ab7;
    cursor:  pointer;
    min-height:  3em;
    pointer-events:  all;
    padding:  0.5em;
    position:  relative;
    margin-right:  1em;
    text-align:  center;
}

.user-control-panel-notifications .user-control-panel-notification
{
    margin-top:  1.25em;
    width:  100%;
}

.user-control-panel-notifications .user-control-panel-notification-title,
.user-control-panel-base-notifications .user-control-panel-notification-title
{
    background-color:  white;
    border-radius:  0.5em;
    border:  2px solid #337ab7;
    padding-left:  0.5em;
    padding-right:  0.5em;
    position:  absolute;
    transform:  translateY(-90%);
    text-align:  center;
}

.user-control-panel-notifications .user-control-panel-notification-time,
.user-control-panel-base-notifications .user-control-panel-notification-time
{
    color:  #696969;
}

.user-control-panel-notifications .user-control-panel-notification-clear,
.user-control-panel-base-notifications .user-control-panel-notification-clear
{
    font-size:  0.8em;
    padding-right:  0.25em;
    right:  0;
    top:  0;
    position:  absolute;
    text-align:  center;
}

.user-control-panel-notification.user-control-panel-notification-normal,
.user-control-panel-notification.user-control-panel-notification-normal .user-control-panel-notification-title
{
    border-color:  #337ab7;
}

.user-control-panel-notification.user-control-panel-notification-normal .user-control-panel-notification-title .glyphicon
{
    color:  #337ab7;
}

.user-control-panel-notification.user-control-panel-notification-conn,
.user-control-panel-notification.user-control-panel-notification-conn .user-control-panel-notification-title
{
    border-color:  purple;
}

.user-control-panel-notification.user-control-panel-notification-conn .user-control-panel-notification-title .glyphicon
{
    color:  purple;
}

.user-control-panel-notification.user-control-panel-notification-xact,
.user-control-panel-notification.user-control-panel-notification-xact .user-control-panel-notification-title
{
    border-color:  #3CB371;
}

.user-control-panel-notification.user-control-panel-notification-xact .user-control-panel-notification-title .glyphicon
{
    color:  #3CB371;
}

.user-control-panel-notification.user-control-panel-notification-fault,
.user-control-panel-notification.user-control-panel-notification-fault .user-control-panel-notification-title
{
    border-color:  #FF0000;
}

.user-control-panel-notification.user-control-panel-notification-fault .user-control-panel-notification-title .glyphicon
{
    color:  #FF0000;
}

.user-control-panel-notification.user-control-panel-notification-system,
.user-control-panel-notification.user-control-panel-notification-system .user-control-panel-notification-title
{
    border-color:  #ff7b00; 
}

.user-control-panel-notification.user-control-panel-notification-system .user-control-panel-notification-title .glyphicon
{
    color:  #ff7b00;
}

.user-control-panel-notification.user-control-panel-notification-system .user-control-panel-notification-clear a
{
    color:  #ff7b00;
}

.user-control-panel-notification.user-control-panel-notification-old
{
    opacity:  0.7;
}

.user-control-panel-notification.user-control-panel-notification-old:hover
{
    opacity:  1;
}

.user-control-panel-menu-options
{
    align-items:  center;
    display:  flex;
    justify-content:  flex-end;
    padding-right:  2.35em;
}

.user-control-panel-menu-item
{
    background-color:  white;
    border-radius:  50%;
    border:  2px solid #b1cfe9;
    color:  gray;
    cursor:  pointer;
    margin-right:  0.5em;
    overflow:  hidden;
    position:  relative;
    height:  3em;
    width:  3em;
    text-align:  center;
    pointer-events:  all;
}

.user-control-panel-menu-item:hover
{
    border-color:  #337ab7;
    transform:  scale(1.2, 1.2);
    transform-origin:  center;
}

.user-control-panel-menu-item .user-control-panel-menu-item-icon
{
    font-size:  1.6em;
    top:  50%;
    transform:  translateY(-50%);
}

.user-control-panel-menu-item.user-control-panel-menu-item-active
{
    border-color:  #337ab7;
    color:  #11283c;
}

.user-control-panel-menu-item.user-control-panel-menu-item-important
{
    border-color:  #ffc65e;
}

.user-control-panel-menu-item.user-control-panel-menu-item-important.user-control-panel-menu-item-active
{
    border-color:  #ff7b00;
}

.user-control-panel-base
{
    display:  flex;
    justify-content:  flex-end;
}

.user-control-panel-base-notifications
{
    align-items:  center;
    display:  flex;
    justify-content:  flex-end;
    height:  7.5em;
    transform:  translateX(2em);
}

.user-control-panel-badge
{
    background-color:  rgba(255, 255, 255, 0.75);
    border:  0 solid transparent;
    border-radius:  50%;
    bottom:  0;
    left:  50%;
    color:  #337ab7;
    font-weight:  bold;
    position:  absolute;
    height:  1.5em;
    min-width:  1.5em;
    transform:  translateX(-50%);
    text-align:  center;
    text-shadow:  -1px -1px 0 white,
		           1px -1px 0 white,
		          -1px 1px 0 white,
		           1px 1px 0 white;
    -moz-user-select:  none;
    user-select:  none;
}

.user-control-panel-toggle.user-control-panel-toggle-important .user-control-panel-badge,
.user-control-panel-menu-item.user-control-panel-menu-item-important .user-control-panel-badge
{
    color:  #ff7b00;
}

.user-control-panel-username
{
    cursor:  default;
    color:  white;
    font-weight:  bold;
    font-size:  1.2em;
    position:  absolute;
    min-width:  9.5rem;
    right:  0.25em;
    bottom:  0.18em;
    white-space:  nowrap;
    overflow:  hidden;
    text-shadow: -1px -1px 0 #11283c,
                  1px -1px 0 #11283c,
                 -1px 1px 0 #11283c,
                  1px 1px 0 #11283c;
    text-transform:  lowercase;
    text-align:  center;
}

.user-control-panel-toggle
{
    position:  relative;
    height:  7.5em;
    width:  7.5em;
    overflow:  hidden;
    background: linear-gradient(135deg, transparent 0%, transparent 50% , rgba(51, 122, 183, 0.15) 51%, rgba(51, 122, 183, 0.15) 100%);
}

.user-control-panel-toggle.user-control-panel-toggle-hidden
{
    background:  none !important;
}

.user-control-panel-toggle.user-control-panel-toggle-important
{
    background: linear-gradient(135deg, transparent 0%, transparent 50% , rgba(255, 165, 0, 0.15) 51%, rgba(255, 165, 0, 0.15) 100%);
}

.user-control-panel-toggle.user-control-panel-toggle-important .user-control-panel-toggle-button
{
    border-color:  #ffc65e;
}

.user-control-panel-toggle.user-control-panel-toggle-new-notif.user-control-panel-toggle-important .user-control-panel-toggle-button
{
    border-color:  #ff7b00;
}

.user-control-panel-toggle.user-control-panel-toggle-new-notif .user-control-panel-toggle-button
{
    border-color:  #337ab7;
}

.user-control-panel-toggle .user-control-panel-show-hide 
{
    height:  7.5em;
    position:  absolute;
    right:  0.25em;
    top:  0;
}

.user-control-panel-toggle .user-control-panel-show-hide .user-control-panel-show-hide-toggle
{
    color:  #337ab7;
    cursor:  pointer;
    font-size:  1.2em;
    position:  relative;
    pointer-events:  all;
    top:  50%;
    transform:  translateY(-50%);
    text-shadow: -1px -1px 0 white,
                  1px -1px 0 white,
                 -1px 1px 0 white,
                  1px 1px 0 white;
}

.user-control-panel-toggle.user-control-panel-toggle-important .user-control-panel-show-hide .user-control-panel-show-hide-toggle
{
    color:  #ff7b00;
}

.user-control-panel-toggle.user-control-panel-toggle-active
{
    background: linear-gradient(135deg, transparent 0%, transparent 50% , rgba(51, 122, 183, 0.8) 51%, rgba(51, 122, 183, 0.8) 100%);
}

.user-control-panel-toggle.user-control-panel-toggle-important.user-control-panel-toggle-active
{
    background: linear-gradient(135deg, transparent 0%, transparent 50% , rgba(255, 165, 0, 0.8) 51%, rgba(255, 165, 0, 0.8) 100%);
}

.user-control-panel-toggle .user-control-panel-toggle-button
{
    background-color:  white;
    border-radius:  50%;
    border:  2px solid #b1cfe9;
    color:  gray;
    cursor:  pointer;
    margin-left:  auto;
    margin-right:  auto;
    overflow:  hidden;
    position:  relative;
    height:  4em;
    width:  4em;
    top:  50%;
    transform:  translateY(-50%);
    text-align:  center;
    pointer-events:  all;
}

.user-control-panel-toggle .user-control-panel-toggle-button:hover
{
    border-color:  #337ab7;
    transform:  translateY(-50%) scale(1.2, 1.2);
    transform-origin:  center;
}

.user-control-panel-toggle-button.user-control-panel-toggle-button-active
{
    color:  #11283c;
    border-color:  #337ab7;
}

.user-control-panel-toggle-button .user-control-panel-toggle-button-icon
{
    font-size:  3.5em;
    transform:  translateY(0.06em);
}

/**
 * Logger settings
 */

.logger-option .logger-level-select,.logger-option option
{
    background-color:  white;
    color:  black;
}

.logger-option .logger-level-select.INFO,.logger-option option[label=INFO]
{
    background-color:  lightblue;
}

.logger-option .logger-level-select.DEBUG,.logger-option option[label=DEBUG]
{
    background-color:  lightgreen;
}

.logger-option .logger-level-select.TRACE,.logger-option option[label=TRACE]
{
    background-color:  lime;
}

.logger-option .logger-level-select.WARN,.logger-option option[label=WARN]
{
    background-color:  yellow;
}

.logger-option .logger-level-select.ERROR,.logger-option option[label=ERROR]
{
    background-color:  orange;
}

.logger-option .logger-level-select.FATAL,.logger-option option[label=FATAL]
{
    background-color:  red;
    color:  white;
}

/**
 * Device pop up
 */

.device-popup
{
    position: absolute;           
    background: rgba(255, 255, 255, 0.8);   
    border:  0.5em solid #337AB7;      
    border-radius: 0.3em;           
    border-top:  0;
    top:  0;
    left:  0;
    min-width:  35em;
    max-width:  35em;
    z-index:  50;
}

.device-popup .device-status-title-bar
{
    background-color:  #337AB7;
    color:  white;
    font-weight:  bold;
    opacity:  1;
    transition:  opacity 0.2s linear;
}

/**
 * Jobs display
 */

.job
{
    border-left:  0.4em solid #004c99;
    display:  flex;
    flex-direction:  column;
    margin-top:  0.5em;
}

.job.ng-enter,
.job.ng-leave,
.job.ng-move
{
  transition: 0.5s linear all;
}

.job.ng-enter,
.job.ng-move
{
  opacity: 0;
  /*transform:  translateX(-100%);*/
}

.job.ng-move.ng-move-active,
.job.ng-enter.ng-enter-active
{
  opacity: 1;
  /*transform:  translateX(0);*/
}

.job.ng-leave
{
  opacity: 1;
}

.job.ng-leave.ng-leave-active 
{
  opacity: 0;
  transition:  2s linear opacity;
}

.job-title-bar
{
    background-color:  #004c99;
    color:  white;
    font-weight:  bold;
}

.job-title-bar .btn-link
{
    border-radius:  0em;
    color:  rgba(255, 255, 255, 0.7);
}

.job-title-bar .btn-link:hover
{
    color:  white;
}

.job-title-bar .job-time
{
    font-size:  0.8em;
}

.job-base
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    justify-content:  space-between;
    padding:  0.5em;
}

.job-base .job-desc
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
    width:  75%;
}

.job-base .job-devices
{
    align-content:  center;
    align-items:  center;
    display:  flex;
    flex-wrap:  wrap;
    justify-content:  space-between;
    margin-left:  3em;
    width:  25%;
}

.job-details
{
    background: linear-gradient(to bottom, transparent 0%, #F5F5F5 100%);
    padding:  0.5em;
}

.job-details .job-details-table td
{
    padding-left:  0.5em;
    padding-right:  0.5em;
}

.job-details .job-details-table td:first-child
{
    font-weight:  bold;
}

.filtered-job
{
    opacity:  0.5;
}

.filtered-job .job-base,
.filtered-job .job-details
{
    display:  none;
}

/**
 * Details tabs
 */

.details-tabs
{
    align-items:  center;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  nowrap;
    justify-content:  flex-start;
    width:  100%;
}

.details-tabs .details-tab
{
    border-radius:  4px;
    padding:  0.5em;
    margin:  0.5em;
    text-decoration:  none;
}

.details-tabs .details-tab:hover
{
    background-color:  #EEE;
}

.details-tabs .details-tab.details-tab-active
{
    background-color:  #337AB7;
    color:  white;
}

.details-tabs .details-tab.details-tab-active .badge
{
    background-color:  white;
    color:  #337AB7;
}

.details-tab-container
{
    min-height:  10em;
}

/**
 * Emergency stop
 */

.alert-emergency-stop
{
    animation-duration: 0.8s;
    animation-name: flash-emergency-stop;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    border-color:  #FE0000;
    background-color:  #FF3232;
    color:  white;
}

.alert-warning-db-down
{
    animation-duration: 0.8s;
    animation-name: flash-warning-db-down;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    border-color:  #ff6633;
    background-color:  #ff9933;
    color:  white;
}

.panel-emergency-stop
{
    border-color:  #FE0000;
}

@-webkit-keyframes flash-emergency-stop
{
    from
    {
        background-color:  #FF3232;
    }

    to
    {
        background-color:  orange;
    }
}

@keyframes flash-emergency-stop
{
    from
    {
        background-color:  #FF3232;
    }

    to
    {
        background-color:  orange;
    }
}

/**
 * Distances
 */

.distances
{
}

.distances .distance
{
}

.distances .distance.filtered-distance
{
    display:  none;
}

.distance .distance-diff
{
    font-weight:  bold;
}

.distance .distance-plus-minus
{
    font-size:  0.8em;
}

.distance .distance-plus-minus .glyphicon
{
    /**color:  #337ab7;**/
    color: grey;
    font-weight:  bold;
    text-shadow: 1px 1px 2px gray, 0 0 1em gray, 0 0 0.2em gray;
}

.distance.distance-diff-low .distance-diff
{
    background-color:  rgb(251, 184, 23);
    color:  white;
}

.distance.distance-diff-med .distance-diff
{
    background-color:  #f98417;
    color:  white;
}

.distance.distance-diff-high .distance-diff
{
    background-color:  rgb(220, 67, 38);
    color:  white;
}

.distance.distance-diff-no-traffic .distance-diff
{
    color:  rgb(220, 67, 38);
}

.distance.distance-diff-low .distance-plus-minus .glyphicon
{
    color:  rgb(251, 184, 23);
}

.distance.distance-diff-med .distance-plus-minus .glyphicon
{
    color:  #f98417;
}

.distance.distance-diff-high .distance-plus-minus .glyphicon
{
    color:  rgb(220, 67, 38);
}

/**
 * New Distances
 */

 .distance-diff
{
    font-weight:  bold;
}

.distance-plus-minus
{
    font-size:  0.8em;
}

.distance-diff.distance-diff-low
{
    background-color:  rgb(251, 184, 23);
    color:  white;
}

.distance-diff.distance-diff-med 
{
    background-color:  #f98417;
    color:  white;
}

.distance-diff.distance-diff-high
{
    background-color:  rgb(220, 67, 38);
    color:  white;
}

.distance-diff.distance-diff-no-traffic
{
    color:  rgb(220, 67, 38);
}

.distance-diff.distance-diff-low-negative
{
    background-color: plum;
    color: white;
}

.distance-diff.distance-diff-med-negative
{
    background-color: #76D7EA;
    color: white;
}

.distance-diff.distance-diff-high-negative
{
    background-color: #48AAAD;
    color: white;
}

.distance-diff-low .distance-plus-minus .glyphicon
{
    color:  rgb(251, 184, 23);
}

.distance-diff-med .distance-plus-minus .glyphicon
{
    color:  #f98417;
}

.distance-diff-high .distance-plus-minus .glyphicon
{
    color:  rgb(220, 67, 38);
}

.distance-diff-low-negative .distance-plus-minus .glyphicon
{
    color:  plum;
}

.distance-diff-med-negative .distance-plus-minus .glyphicon
{
    color:  #76D7EA;
}

.distance-diff-high-negative .distance-plus-minus .glyphicon
{
    color:  #48AAAD;
}

/**
 * System Map toolbar
 */

.sys-map-toolbar
{
    position:  relative;
    height:  0;
}

.sys-map-toolbar.sys-map-toolbar-left .sys-map-toolbar-content
{
    align-items:  flex-start;
    top:  0;
    left:  0;
}

.sys-map-toolbar.sys-map-toolbar-right .sys-map-toolbar-content
{
    align-items:  flex-end;
    top:  0;
    right:  0;
}

.sys-map-toolbar.sys-map-toolbar-center .sys-map-toolbar-content
{
    align-items:  flex-start;
    top:  0;
    left:  calc(50% - 6em);
    width:  12em;
}

.sys-map-toolbar.sys-map-toolbar-bottom-left .sys-map-toolbar-content
{
    align-items:  flex-start;
    top:  calc(72vh - 3.5em);
    left:  0;
}

.sys-map-toolbar.sys-map-toolbar-bottom-right .sys-map-toolbar-content
{
    align-items:  flex-start;
    top:  calc(72vh - 3.5em);
    right:  0;
}

.sys-map-toolbar .sys-map-toolbar-label
{
    color:  gray;
    font-weight:  bold;
    pointer-events:  none;
}

.sys-map-toolbar .sys-map-toolbar-content
{
    display:  flex;
    flex-direction:  column;
    position:  absolute;
}

.sys-map-zone-select.sys-map-toolbar-content-details
{
    display:  flex;
    flex-direction:  column;
    min-width:  15em;
}

.sys-map-xact-select.sys-map-toolbar-content-details
{
    display:  flex;
    flex-direction:  column;
    min-width: 22em;
}

.sys-map-toolbar .sys-map-toolbar-content-base
{
    background: rgba(255, 255, 255, 0.8);
    border: 0px;      
    border-radius: 0.3em;           
    margin-top:  0.5em;
    /*margin-bottom:  0.5em;*/
    padding:  0.5em;
}

.sys-map-toolbar .sys-map-toolbar-content-details
{
    background: rgba(255, 255, 255, 0.8);
    border: 0px;      
    border-radius: 0.3em;           
    margin-top:  0.5em;
    margin-bottom:  0.5em;
    padding:  0.5em;
    width:  auto;
}

.sys-map-toolbar .sys-map-toolbar-content-details .sys-map-toolbar-content-details-scroll
{
    overflow:  auto;
    display:  flex;
    flex-direction:  column;
    min-width: 22em;
}

.sys-map-toolbar .sys-map-toolbar-content-details.sys-map-zone-select .sys-map-toolbar-content-details-scroll
{
    max-height:  54vh;
    min-width:  15em;
}

.sys-map-toolbar .sys-map-toolbar-content-details.sys-map-xact-select .sys-map-toolbar-content-details-scroll
{
    max-height:  59vh;
    min-width:  22em;
}

.sys-map-toolbar button.sys-map-toolbar-button-active
{
    border-color:  #337ab7;
}

.sys-map-toolbar .sys-map-toolbar-tab
{
    color:  #337AB7;
    cursor:  pointer;
    border:  1px solid transparent;
    border-radius:  4px;
    display:  inline-block;
    padding:  0.5em;
    -moz-user-select:  none;
    user-select:  none;
}

.sys-map-toolbar .sys-map-toolbar-tab:hover
{
    background-color:  #eee;
}

.sys-map-toolbar .sys-map-toolbar-tab.sys-map-toolbar-tab-active
{
    color:  white;
    background-color:  #337AB7;
}

.sys-map-toolbar .sys-map-toolbar-tab.sys-map-toolbar-tab-inactive
{
    color:  gray;
    cursor:  default;
    background-color:  #eee;
}

.sys-map-toolbar .sys-map-toolbar-legend
{
    font-weight:  bold;
}

.sys-map-toolbar .sys-map-toolbar-legend td
{
    padding-left:  0.5em;
    padding-right:  0.5em;
    cursor:  default;
}

.sys-map-toolbar .sys-map-toolbar-legend .sys-map-toolbar-legend-item-fade
{
    opacity:  0.7;
}

.sys-map-toolbar .sys-map-xact-toolbar-tab
{
    color:  #3CB371;
    cursor:  pointer;
    border:  1px solid transparent;
    border-radius:  4px;
    display:  inline-block;
    padding:  0.5em;
    -moz-user-select:  none;
    user-select:  none;
}

.sys-map-toolbar .sys-map-xact-toolbar-tab:hover
{
    background-color:  #eee;
}

.sys-map-toolbar .sys-map-xact-toolbar-tab-xact
{
    border:  1px solid transparent;
    border-radius:  1em;
    color:  white;
    display:  inline-block;
    font-weight:  bold;
    flex-shrink:  0;
    padding:  0.1em;
    text-align:  center;
    min-width:  8em;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8),
                  1px -1px 0 rgba(0, 0, 0, 0.8),
                 -1px 1px 0 rgba(0, 0, 0, 0.8),
                  1px 1px 0 rgba(0, 0, 0, 0.8);
}

.sys-map-toolbar .sys-map-xact-toolbar-tab-xact:hover
{
    filter:  brightness(1.2);
}

.sys-map-toolbar .sys-map-xact-toolbar-tab-xact:hover + .glyphicon-play
{
    filter:  brightness(1.2);
}

.sys-map-toolbar .sys-map-xact-toolbar-tab-zone
{
    display:  inline-block;
    width:  auto;
}

.sys-map-toolbar .sys-map-xact-toolbar-tab .glyphicon-play
{
    transform:  translate(-0.3em, 0.15em);
}

.sys-map-toolbar .sys-map-xact-toolbar-tab.sys-map-xact-toolbar-tab-active
{
    color:  white;
    background-color:  #3CB371;
}

/**
 * System Map pop ups
 */

.sys-map-popup
{
    position:  relative;
    height:  0;
}

.sys-map-popup .sys-map-popup-background
{
    background-color:  rgba(255, 255, 255, 0.6);
    left:  0;
    top:  0;
    min-height:  72vh;
    position:  absolute;
    width:  100%;
}

.sys-map-popup .sys-map-popup-container
{
    position:  absolute;
    background-color:  white;
    border:  0.2rem solid #337ab7;
    border-radius:  0.5em;
    box-shadow: 0 1em 2em gray;
    left:  50%;
    padding:  1em;
    padding-top:  0;
    top:  5em;
    transform:  translateX(-50%);
    max-width:  75%;
    width:  75%;
}

.sys-map-popup.sys-map-popup-anchor-left .sys-map-popup-container
{
    transform:  translateX(-116%);
}

.sys-map-popup.sys-map-popup-anchor-right .sys-map-popup-container
{
    transform:  translateX(16%);
}

.sys-map-popup-container .sys-map-popup-title
{
    text-align:  center;
}

.sys-map-popup-container .sys-map-popup-title h4
{
    margin-bottom:  0;
}

.sys-map-popup-container .sys-map-popup-subtitle
{
    font-size:  0.8em;
    text-align:  center;
}

.sys-map-popup-container .sys-map-popup-content
{
    max-height:  56vh;
    min-height:  10em;
    overflow-x:  hidden;
    overflow-y:  auto;
}

.sys-map-popup.sys-map-xact-popup .sys-map-popup-container
{
    border-color:  #3CB371;
}

.sys-map-popup.sys-map-xact-popup .sys-map-popup-container .sys-map-popup-title .glyphicon-remove
{
    color:  #3CB371;
}

.sys-map-popup.sys-map-device-popup .sys-map-popup-container
{
    width:  42%;
}

.sys-map-popup.sys-map-device-popup .device-status-table-body-container
{
    height:  auto !important;
}

/**
 * System Map dashboard
 */

.sys-map-dashboard
{
    position:  relative;
    height:  0;
    width:  100%;
}

.sys-map-dashboard .sys-map-dashboard-content
{
    background-color:  white;
    display:  flex;
    flex-direction:  row;
    flex-wrap:  wrap;
    align-items:  flex-start;
    align-content:  flex-start;
    justify-content:  center;
    height:  72vh;
    overflow:  auto;
    top:  0;
    left:  0;
    padding-top:  3.5em;
}

.sys-map-dashboard .sys-map-dashboard-selection
{
    background-color:  white;
    border-width:  2px;
    border-color:  transparent;
    border-radius: 0.3em;           
    margin:  0.5em;
    min-height:  7em;
    min-width:  7em;
    -moz-user-select:  none;
    user-select:  none;
}

.sys-map-dashboard .sys-map-dashboard-selection-filtered
{
    opacity:  0.4;
}

.sys-map-dashboard .sys-map-dashboard-selection-zone
{
    background-color:  white;
    border-width:  2px;
    border-color:  transparent;
    border-radius: 0.3em;           
    cursor:  pointer;
    padding:  0.25em;
}

.sys-map-dashboard .sys-map-dashboard-selection-zone:hover
{
    background-color:  #eee;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-name
{
    text-align:  center;
    width:  100%;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-status
{
    border:  1px solid transparent;
    border-radius: 0.3em;           
    height:  4em;
    width:  4em;
    margin-left:  auto;
    margin-right:  auto;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xacts
{
    min-height:  4.25em;
    margin-bottom:  0.25em;
    display:  flex;
    flex-direction:  column-reverse;
    justify-content:  flex-start;
    align-content:  flex-start;
    text-align:  center;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact-counts
{
    font-size:  0.9em;
    font-weight:  bold;
    text-align:  center;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact-counts .sys-map-dashboard-selection-xact-counts-tab
{
    border-bottom:  2px solid transparent;
    cursor:  pointer;
    margin-left:  0.25em;
    margin-right:  0.25em;
    opacity:  0.7;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact-counts .sys-map-dashboard-selection-xact-counts-tab:hover
{
    border-bottom:  2px solid currentColor;
    opacity:  1;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact-counts .sys-map-dashboard-selection-xact-counts-tab.sys-map-dashboard-selection-xact-counts-tab-active
{
    border-bottom:  2px solid currentColor;
    opacity:  1;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact
{
    border:  1px solid transparent;
    border-radius:  1em;
    color:  white;
    cursor:  pointer;
    font-weight:  bold;
    flex-shrink:  0;
    margin-bottom:  0.25em;
    padding:  0.1em;
    width:  100%;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8),
                  1px -1px 0 rgba(0, 0, 0, 0.8),
                 -1px 1px 0 rgba(0, 0, 0, 0.8),
                  1px 1px 0 rgba(0, 0, 0, 0.8);
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact:hover
{
    filter:  brightness(1.2);
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-more
{
    cursor:  default;
    color:  #c0c0c0;
    height:  0;
    transform:  translateY(-1em);
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-xact:first-child
{
    margin-bottom:  0;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-status table
{
    width:  100%;
    text-align:  center;
}

.sys-map-dashboard .sys-map-dashboard-selection .sys-map-dashboard-selection-status table td
{
    padding:  0.25em;
}

.sys-map-xact-progress
{
    height:  3px;
    margin-left:  auto;
    margin-right:  auto;
    position:  relative;
    width:  80%;
}

.sys-map-xact-progress-bar
{
    background-color:  rgba(255, 255, 255, 0.5);
    display:  block;
    height:  100%;
}

/**
 * Device status table.
 */

.device-status-value-not-applic
{
    color:  #e0e0e0;
}

.device-status-sorted-by
{
    text-decoration:  underline;
}

.device-status-summary-entry.requested-offline
{
    background-color:  white;
    animation-duration: 0.6s;
    animation-name: flash-gray;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.device-status-summary-entry.offline
{
    background-color:  #D3D3D3;
}

.device-status-summary-entry.offline .device.station .shape,
.device-status-summary-entry.offline .device.blower .shape
{
    background-color:  #606060;
}

.device-status-summary-entry.offline .device.diverter .shape
{
    border-bottom-color:  #606060;
}

.device-status-summary-entry.offline .device.iz .shape
{
    border-bottom-color:  #606060;
}

.device-status-summary-entry.offline .device.cct_receiver .shape
{
    border-top-color:  #606060;
}

.device-status-summary-entry.offline .device.iz .shape:after
{
    border-top-color:  #606060;
}

.device-status-summary-entry.offline .device.zone-gate .shape
{
    border-bottom-color:  #606060;
}

.device-status-summary-entry.offline .device.zone-gate .shape:after
{
    border-top-color:  #606060;
}

/**
 * Ping test indicator
 */

.ping-result
{
    background-color:  transparent;
    border:  0.1em solid gray;
    border-radius:  1em;
    display:  inline-block;
    height:  1em;
    width:  1em;
}

.ping-result.ping-result-success
{
    background-color:  #00CC00;
    box-shadow: 1px 1px 2px #91FF00, 0 0 1em #91FF00, 0 0 0.2em #91FF00;
}

.ping-result.ping-result-checking
{
    background-color:  #C0C0C0;
}

.ping-result.ping-result-failure
{
    background-color:  #CC0000;
    box-shadow: 1px 1px 2px #ef3434, 0 0 1em #ef3434, 0 0 0.2em #ef3434;
}

/**
 * System config
 */

.system-config
{
    display:  flex;
    align-items:  flex-start;
}

.system-config .system-config-devices-menu
{
    width:  35%;
}

.system-config .system-config-devices-menu .system-config-devices-list-container
{
    height:  58vh;
    overflow-y:  scroll;
    margin-bottom:  0.5em;
    width:  100%;
}

.system-config .system-config-devices-menu .system-config-devices-list-container > table tr
{
    cursor:  pointer;
}

.system-config .system-config-devices-menu .system-config-device-zone
{
    color:  gray;
    font-size:  0.85em;
    font-weight:  bold;
    text-align:  center;
}

.system-config .system-config-selected-device
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    margin-top:  3em;
    margin-left:  2em;
    margin-right:  auto;
    min-width:  30%;
    max-width:  65%;

    background-color:  white;
    border:  0.2rem solid #337ab7;
    border-radius:  0.5em;
    box-shadow: 0 1em 2em gray;
    padding:  1em;
    padding-top:  0;
}

.system-config .system-config-selected-device .system-config-device-info
{
    width:  100%;
}

.system-config .system-config-selected-device .system-config-device-info h4
{
    text-align:  center;
}

.system-config .system-config-selected-device .system-config-device-info-subtitle
{
    color:  gray;
    font-size:  0.8em;
    text-align:  center;
}

.system-config .system-config-selected-device .system-config-device-conns
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    margin-top:  1em;
    margin-bottom:  0.5em;

    background-color:  rgba(0, 0, 0, 0.05);
    border:  0.2rem solid transparent;
    border-radius:  0.5em;
    padding:  1em;
}

.system-config .system-config-selected-device .system-config-device-conns .device
{
    cursor:  pointer;
}

.system-config .system-config-selected-device .system-config-device-conn
{
    display:  flex;
}

.system-config .system-config-selected-device .system-config-device-conn.system-config-selected-device-conn
{
    margin-top:  0.5em;
    margin-bottom:  0.5em;
}

.system-config .system-config-selected-device .system-config-device-conn.system-config-selected-device-conn .system-config-device-conn-device
{
    opacity:  1;
}

.system-config .system-config-selected-device .system-config-device-conn.system-config-selected-device-conn .device
{
    transform:  scale(1.5, 1.5);
}

.system-config .system-config-selected-device .system-config-device-conn-device
{
    align-items:  center;
    display:  flex;
    flex-direction:  column;
    opacity:  0.75;
}

.system-config .system-config-selected-device .system-config-device-conn-device:not(:last-child)
{
    margin-right:  1em;
}

.system-config .system-config-selected-device .system-config-device-conn-device:hover
{
    opacity:  1;
}

.system-config .system-config-selected-device .system-config-device-pipe
{
    color:  grey;
    cursor:  pointer;
    font-size:  0.85em;
    text-align:  center;
    transform: translate(0px,-5px);
}

.system-config .system-config-selected-device .system-config-device-ports
{
}

.system-config .system-config-selected-device .system-config-device-port
{
    color:  gray;
    cursor:  pointer;
    font-size:  0.85em;
    text-align:  center;
}

.system-config .system-config-selected-device .system-config-device-ports span{
    display: inline-block;
}

.system-config .system-config-selected-device .system-config-device-port .system-config-device-port-toggle button
{
    font-size:  0.8em;
    margin:  0;
    padding:  0;
}

.system-config .system-config-selected-device .system-config-device-port:not(:last-child)
{
    margin-bottom:  1em;
}

/**
 * Logging table
 */

.past-log-entries-container
{
    height:  58vh;
    overflow-y:  scroll;
    margin-bottom:  0.5em;
}

/**
 * General use icons
 */

.icon
{
    background-repeat:  no-repeat;
    background-size:  contain;
    display:  inline-block;
    vertical-align:  middle;
}

.icon.tech6-carrier-vertical
{
    background-image:  url('../images/tech6-carrier-45deg.svg');
    height:  1em;
    width:  1em;
}

.icon.tech6-carrier-vertical.b
{
    background-image:  url('../images/tech6-carrier-black-horizontal.svg');
}

.icon.tech6-carrier-vertical.c
{
    background-image:  url('../images/tech6-carrier-horizontal.svg');
}

.icon.tech6-carrier-vertical.g
{
    background-image:  url('../images/tech6-carrier-green-horizontal.svg');
}

.icon.tech6-carrier-vertical.p
{
    background-image:  url('../images/tech6-carrier-pink-horizontal.svg');
}

.icon.tech6-carrier-vertical.r
{
    background-image:  url('../images/tech6-carrier-red-horizontal.svg');
}

.icon.tech6-carrier-vertical.y
{
    background-image:  url('../images/tech6-carrier-yellow-horizontal.svg');
}

.icon.tech6-carrier-vertical.t
{
    background-image:  url('../images/tech6-carrier-transparent-horizontal.svg');
}

.icon.tech6-carrier-45deg
{
    background-image:  url('../images/tech6-carrier-45deg.svg');
    height:  1.25em;
    width:  1.25em;
}

.icon.tech6-carrier-45deg.b
{
    background-image:  url('../images/tech6-carrier-black-horizontal.svg');
}

.icon.tech6-carrier-45deg.c
{
    background-image:  url('../images/tech6-carrier-horizontal.svg');
}

.icon.tech6-carrier-45deg.g
{
    background-image:  url('../images/tech6-carrier-green-horizontal.svg');
}

.icon.tech6-carrier-45deg.p
{
    background-image:  url('../images/tech6-carrier-pink-horizontal.svg');
}

.icon.tech6-carrier-45deg.r
{
    background-image:  url('../images/tech6-carrier-red-horizontal.svg');
}

.icon.tech6-carrier-45deg.y
{
    background-image:  url('../images/tech6-carrier-yellow-horizontal.svg');
}

.icon.tech6-carrier-45deg.t
{
    background-image:  url('../images/tech6-carrier-transparent-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large
{
    background-image:  url('../images/tech6-carrier-horizontal.svg');
    height:  2em;
    width:  5.5em;
}

.icon.tech6-carrier-horizontal-large.b
{
    background-image:  url('../images/tech6-carrier-black-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.c
{
    background-image:  url('../images/tech6-carrier-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.g
{
    background-image:  url('../images/tech6-carrier-green-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.p
{
    background-image:  url('../images/tech6-carrier-pink-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.r
{
    background-image:  url('../images/tech6-carrier-red-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.y
{
    background-image:  url('../images/tech6-carrier-yellow-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.t
{
    background-image:  url('../images/tech6-carrier-transparent-horizontal.svg');
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected
{
    opacity:  0.35;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed
{
    opacity:  0.35;
    width: 5.5em;
    height: 2em;
    position: relative;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #000000;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #000000;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.b:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #404040;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.b:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #404040;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.g:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #6c8548;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.g:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #6c8548;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.c:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #2b5d90;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.c:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #2b5d90;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.p:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #d1889a;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.p:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #d1889a;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.r:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #920001;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.r:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #920001;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.y:after
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #ccac00;
    position: absolute;
    transform: rotate(45deg) translate(1px, -12px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large.carrier-not-detected-removed.y:before
{
    content: '';
    height: 3.4em;
    border-left: 3px solid #ccac00;
    position: absolute;
    transform: rotate(-45deg) translate(11px, 0px);
    left: 28px;
}

.icon.tech6-carrier-horizontal-large .carrier-label
{
    color:  white;
    display:  inline-block;
    font-weight:  bold;
    text-align:  center;
    width:  100%;
    transform:  translateX(-50%);
    text-shadow: -1px -1px 0 #11283c,
                  1px -1px 0 #11283c,
                 -1px 1px 0 #11283c,
                  1px 1px 0 #11283c;
}

.badge.carrier-not-detected
{
    background-color:  #e0e0e0;
    color:  #777;
}

/**
 * Auto diagnostic.
 */

.auto-diag .auto-diag-status
{
    display:  block;
    font-weight:  bold;
    margin-bottom:  0.5em;
    text-align:  center;
    width:  100%;
}

.auto-diag .auto-diag-progress
{
    border-radius:  0.2em;
    background-color:  #e0e0e0;
    position:  relative;
    overflow-x:  hidden;
    height:  1em;
    margin-left:  auto;
    margin-right:  auto;
    width:  90%;
}

.auto-diag .auto-diag-progress .auto-diag-progress-complete
{
    background-color:  #63a0d4;
    position:  absolute;
    height:  100%;
    width:  0;
    left:  0;
    top:  0;
}

.auto-diag .auto-diag-progress .auto-diag-progress-remaining
{
    background-color:  #e0e0e0;
    position:  absolute;
    height:  100%;
    width:  100%;
    right:  0;
    top:  0;
}


.auto-diag .auto-diag-progress .auto-diag-start-hover
{
    background-color:  rgba(255, 255, 255, 0.75);
    border-radius:  50%;
    position:  absolute;
    height:  0.6em;
    width:  0.6em;
    margin-left:  0.2em;
    top:  50%;
    left:  0;
    transform:  translateY(-50%);
}

.auto-diag .auto-diag-progress .auto-diag-end-hover
{
    background-color:  rgba(255, 255, 255, 0.75);
    border-radius:  50%;
    position:  absolute;
    height:  0.6em;
    width:  0.6em;
    margin-right:  0.2em;
    top:  50%;
    right:  0;
    transform:  translateY(-50%);
}