/*    Assets*/

.asset,
.place,
header.group {
    margin: 10px auto;
    position: relative;
    width: 360px;
    cursor: pointer;
}
.asset,
.place {
    min-height: 50px;
    border: 1px solid #cccccc;
    cursor: pointer;
    background: #fff;
}
.asset:first-child,
.place:first-child {
    margin-top: 0;
}
.asset-selector, .place .icon-graphic {
    width: 25px;
    background-repeat: no-repeat;
    /*position: absolute;
    top: 0;
    bottom: 0;
    left: 0;*/
    display: inline-block;
    vertical-align: top;
}
.asset-selector .icon-graphic,
.asset-popup .icon-graphic,
table.standard .icon-graphic, #breadcrumb .icon graphic, .asset-icon.icon-graphic {
    height: 18px;
    width: 25px;
    background-image: url(../images/assets-sprite.png);
}
.icon-out-of-service:before {
  font-size: 80%;
}

/*
Do Not Remove these are used to determine the color of the backgrounds for the map markers and if we wish to use in the future they are consistent
.asset-selector {
    background-color: #d8e7c6;
}
.stopped .asset-selector {
    background-color: #e3babb;
}
.outofservice .asset-selector {
    background-color: #EAEAEA;
}
.updatedue .asset-selector,
.privacy .asset-selector {
    background-color: #BAE5FF;
}*/
.asset-selector input {
    position: relative;
    top: 2px;
    left: 6px;
}
.asset dl,
.place dl {
    width: 90%;
    font-size: 90%;
    padding-top: 1px;
    display: inline-block;
    vertical-align: top;
}
.asset dt,
.place dt {
    font-weight: bold;
    max-width: 70%;
    display: inline-block;
    padding-bottom: 6px;
}
.asset.outofservice dt,
.asset.outofservice dd {
    color: #666;
}
.asset .name {
    margin-left: -3px;
}
.asset .speed {
    display: inline-block;
    float: right;
    margin-right: 20px;
    font-size: 90%;
}
.asset .location, .place .location {
    font-size: 11px;
    width: 295px;
    padding:  2px 0 3px 0;
}
.asset .status-icon,
.asset-popup .status-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 27px;
    text-align: center;
    color: #fff;
    font-size: 85%;
    padding-top: 7px;
}
.asset a.cog,
.asset-popup a.cog, .place a.cog, a.lock {
    display: inline-block;
    text-decoration: none;
    width: 23px;
    cursor: pointer;
    padding-left: 2px;
}
.asset a.cog, .place a.cog, .place a.lock {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 19px;
}
.place a.lock {
    right: 23px;
}
a.cog:hover,
.asset a.cog.active,
.asset-popup a.cog:hover,
.asset-popup a.cog.active {
    background: #cccccc;
}
a.cog .icon {
    display: inline-block;
    width: 18px;
    font-size: 95%;
}
a.cog .icon-arrow-down22,
a.cog .icon-arrow-right22 {
    color: #7d7d7d;
}
.status-icon {
    background-color: #78b330;
}
.asset.active .icon-lock {
    text-align: center;
    display: block;

}
.icon-lock, .asset.locked .icon-lock:hover  {
  color: #b2b2b2;
}
a.cog:hover .icon, a.lock:hover .icon, .icon-lock:hover {
    color: #333;
}
.asset.locked .icon-lock, .place.locked .icon-lock {
    color: #666;
}
.stopped .status-icon {
    background-color: #b80d07;
}
.updatedue .status-icon,
.privacy .status-icon {
    background-color: #64a8d2;
}
.outofservice .status-icon {
    background-color: #A0A0A0;
}
.asset:hover, .asset.active, .place:hover, .place.active {
    border: 1px solid #78b330;
    border-left-width: 2px;
}
.place.active {
  background-color: #FFF7ED;
}
.place:hover {
  border-left-width: 1px;
}
.asset.stopped:hover, .asset.stopped.active {
    border-color: #b80d07;
}
.asset.outofservice:hover,
.asset.privacy:hover, .asset.outofservice.active,
.asset.privacy.active {
    border-color: #666;
}
.asset.updatedue:hover,
.asset.privacy:hover, .asset.updatedue.active,
.asset.privacy.active {
    border-color: #0493EB;
}
.asset.outofservice:hover .asset-selector,
.asset.privacy:hover .asset-selector,
.asset.active.outofservice .asset-selector,
.asset.active.privacy .asset-selector {
    border-left: none;
    width: 25px;
}
.place.active, .place:hover {
  border-color: #f28c0c;
}
.icon-star.favorite {
    color: #b0b0b0;
    font-size: 110%;
}
.icon-star.favorite:hover {
    color: #f2df06;
}
/* Asset Alerts*/

dl.asset-alerts {
    background: #f6f5f5;
    height: 19px;
    margin: 0 0 0 27px;
    width: 92%;
    padding: 0 5px;
    font-size: 12px;
}
.asset-alerts dd {
    display: inline-block;
    padding-top: 2px;
    margin-right: 4px;
}
dl.asset-alerts .icon {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
}
dl.asset-alerts .battery .icon,
dl.asset-alerts .icon-notconnected,
dl.asset-alerts .icon-plug {
    font-size: 16px;
}
.asset-alerts .icon-battery-full {
    color: #78B330;
}
.asset-alerts .icon-battery-mid {
    color: #FF9800;
}
.asset-alerts .icon-warning,
.asset-alerts .icon-battery-low,
.asset-alerts .icon-notconnected,
.asset-alerts .icon-plug {
    color: #b80d07!important;
}
.asset-alerts .driver {
    color: #7c7d7d;
}
/*    Asset icon matrix*/

.art-truck .icon-graphic {
    background-position: 1px 4px;
}
.art-truck.stopped .icon-graphic {
    background-position: -24px 4px;
}
.art-truck .icon-graphic.grey {
    background-position: -50px 4px;
}
.car .icon-graphic {
    background-position: 2px -16px;
}
.car.stopped .icon-graphic {
    background-position: -24px -16px;
}
.car .icon-graphic.grey {
    background-position: -50px -16px;
}
.bus .icon-graphic {
    background-position: 2px -38px;
}
.bus.stopped .icon-graphic {
    background-position: -24px -38px;
}
.bus .icon-graphic.grey {
    background-position: -50px -38px;
}
.plant .icon-graphic {
    background-position: 2px -62px;
}
.plant.stopped .icon-graphic {
    background-position: -24px -62px;
}
.plant .icon-graphic.grey {
    background-position: -50px -62px;
}
.person .icon-graphic {
    background-position: 2px -86px;
}
.person.stopped .icon-graphic {
    background-position: -24px -86px;
}
.person .icon-graphic.grey {
    background-position: -50px -86px;
}
.boat .icon-graphic {
    background-position: 2px -118px;
}
.boat.stopped .icon-graphic {
    background-position: -24px -118px;
}
.boat .icon-graphic.grey {
    background-position: -50px -118px;
}
.caravan .asset-selector .icon-graphic {
    background-position: 2px -145px;
}
.caravan.stopped .icon-graphic {
    background-position: -24px -145px;
}
.caravan .icon-graphic.grey {
    background-position: -50px -145px;
}
.motorbike .icon-graphic {
    background-position: 2px -176px;
}
.motorbike.stopped .icon-graphic {
    background-position: -24px -176px;
}
.motorbike .icon-graphic.grey {
    background-position: 50px -176px;
}
.truck .asset-selector .icon-graphic {
    background-position: 1px -198px;
}
.truck.stopped .icon-graphic {
    background-position: -24px -198px;
}
.truck .icon-graphic.grey {
    background-position: -50px -198px;
}
.van .icon-graphic {
    background-position: 1px -227px;
}
.van.stopped .icon-graphic {
    background-position: -24px -227px;
}
.van .icon-graphic.grey {
    background-position: -50px -227px;
}
.agriculture .icon-graphic {
    background-position: 1px -255px;
}
.agriculture.stopped .icon-graphic {
    background-position: -24px -255px;
}
.agriculture .icon-graphic.grey {
    background-position: -50px -255px;
}
.trailer .icon-graphic {
    background-position: 1px -284px;
}
.trailer.stopped .icon-graphic {
    background-position: -24px -284px;
}
.trailer .icon-graphic.grey {
    background-position: -50px -284px;
}
.container .icon-graphic {
    background-position: 1px -308px;
}
.container.stopped .icon-graphic {
    background-position: -24px -308px;
}
.container .icon-graphic.grey {
    background-position: -50px -308px;
}
.art-truck.updatedue .icon-graphic,
.art-truck.privacy .icon-graphic {
    background-position: -75px 4px;
}
.car.updatedue .icon-graphic,
.car.privacy .icon-graphic {
    background-position: -75px -16px;
}
.bus.updatedue .icon-graphic,
.bus.privacy .icon-graphic {
    background-position: -75px -38px;
}
.plant.updatedue .icon-graphic,
.plant.privacy .icon-graphic {
    background-position: -75px -62px;
}
.person.updatedue .icon-graphic,
.person.privacy .icon-graphic {
    background-position: -75px -86px;
}
.boat.updatedue .icon-graphic,
.boat.privacy .icon-graphic {
    background-position: -75px -118px;
}
.caravan.updatedue .icon-graphic,
.caravan.privacy .icon-graphic {
    background-position: -75px -145px;
}
.motorbike.updatedue .icon-graphic,
.motorbike.privacy .icon-graphic {
    background-position: -75px -176px;
}
.truck.updatedue .icon-graphic,
.truck.privacy .icon-graphic {
    background-position: -75px -198px;
}
.van.updatedue .icon-graphic,
.van.privacy .icon-graphic {
    background-position: -75px -227px;
}
.agriculture.updatedue .icon-graphic,
.agriculture.privacy .icon-graphic {
    background-position: -75px -255px;
}
.trailer.updatedue .icon-graphic,
.trailer.privacy .icon-graphic {
    background-position: -75px -284px;
}
.container.updatedue .icon-graphic,
.container.privacy .icon-graphic {
    background-position: -75px -308px;
}
.art-truck.outofservice .icon-graphic {
    background-position: -103px 4px;
}
.car.outofservice .icon-graphic {
    background-position: -103px -16px;
}
.bus.outofservice .icon-graphic {
    background-position: -103px -38px;
}
.plant.outofservice .icon-graphic {
    background-position: -103px -62px;
}
.person.outofservice .icon-graphic {
    background-position: -103px -86px;
}
.boat.outofservice .icon-graphic {
    background-position: -103px -118px;
}
.caravan.outofservice .icon-graphic {
    background-position: -103px -145px;
}
.motorbike.outofservice .icon-graphic {
    background-position: -103px -176px;
}
.truck.outofservice .icon-graphic {
    background-position: -103px -198px;
}
.van.outofservice .icon-graphic {
    background-position: -103px -227px;
}
.agriculture.outofservice .icon-graphic {
    background-position: -103px -255px;
}
.trailer.outofservice .icon-graphic {
    background-position: -103px -284px;
}
.container.outofservice .icon-graphic {
    background-position: -103px -308px;
}
/*Asset Group*/

header.group,
.group-controls {
    height: 20px;
    overflow: hidden;
}
header.group {
    background: #c0e8ec;
    border: none;
    margin: 5px auto;
}
header.group.toplvl {
    background: #5FC7D0;
    height: 25px;
    color: #fff;
}
header.group.toplvl .group-controls {
    height: 25px;
}
header.group.toplvl .group-controls a {
    padding-top: 5px;
}
header.group.toplvl h5 {
    font-weight: bold;
    line-height: 180%;
}
header.group:hover {
    -webkit-animation: fade-color-teal .5s;
    animation: fade-color-teal .5s;
    background: #ace1e5;
}
header.group.toplvl:hover {
    background: #5FC7D0;
}
header.group .trigger-header {
    display: inline-block;
    width: 280px;
    cursor: pointer;
}
header.group input {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 7px;
}
header.group h5 {
    font-weight: normal;
    display: inline-block;
    margin: 2px 0 0 5px;
    vertical-align: middle;
    font-size: 90%;
}
header.group .badge {
    background: #3698dc;
    font-size: 11px;
    padding: 2px 5px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
header.group.toplvel .badge {
    margin-top: 2px;
}
.group-controls {
    float: right;
}
.group-controls a {
    background: #90d7de;
    width: 22px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding-top: 2px;
    height: 100%;
}
.group-controls a:hover {
    background: #02b1c2;
}
.group-controls .cog {
    width: 30px;
}
.group-controls a.cog .icon-arrow-down22 {
    color: #fff;
}
.group-controls a.cog:hover .icon {
    color: #fff;
}
/*Asset popup*/

.asset-popup {
    background: #fff;
    width: 265px;
    position: absolute;
    border: 1px solid #666;
    border-top: none;
    font-size: 115%;
    /*display: none;*/
}
.journey-popup {
    background: #fff;
    width: 100%;
    font-size: 100%;
    /*display: none;*/
}
.asset-popup header {
    position: relative;
    height: 18px;
    background: #eaefd2;
    padding: 0 0 0 2px;
    border: none;
}
.asset-popup.stopped header {
    background: #EFD2D2;
}
.asset-popup .asset-icon {
    width: 25px;
    display: inline-block;
    vertical-align: top;
}
.asset-popup .asset-name {
    font-weight: bold;
    font-size: 85%;
    display: inline-block;
    vertical-align: top;
}
.popup-close {
    display: inline-block;
    width: 22px;
    color: #000;
    text-align: center;
    background: #dde5b5;
    font-weight: bold;
    float: right;
    margin-right: 18px;
    line-height: 110%;
    height: 100%;
    font-size: 95%;
}
.popup-close:hover {
    background: #C2CD84;
    color: #000;
    text-decoration: none;
}
.asset-popup table {
    font-size: 85%;
    width: 100%;
}
.asset-popup table td {
    padding: 3px 0;
    vertical-align: top;
}
.asset-popup table .icon {
    text-align: center;
    font-size: 15px;
    color: #585858;
    width: 28px;
}
.asset-popup table a {
    text-decoration: underline;
}
.asset-popup dl.asset-alerts {
    margin: 5px 0 0 0;
    width: 100%;
    height: 25px;
}
.asset-controls {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 25px;
    margin: 0;
}
.asset-controls a {
    width: 25px;
    height: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border: none;
    font-size: 115%;
    line-height: 165%;
}
.asset-controls a.asset-show {
    background: #dddddd;
    color: #585858;
    font-size: 115%;
    line-height: 165%;
}
.asset-controls a:hover.asset-show {
    background: #3698dc;
    color: #fff;
}
.asset-controls a.cog {
    background: #fff;
    width: 27px;
    text-align: left;
}
.asset-popup .actions-menu {
    left: 263px;
    top: 153px;
}
.asset-popup.stopped:before {
    border-color: #EFD2D2;
}
/*Places*/

.place .icon-graphic {
    background-image: url(../images/places-small-sprite.png);
    height: 23px;
    width: 21px;
}
.place {
    padding-bottom: 4px!important;
}
.place dl{ 
  padding-top: 4px;
}
.place .icon-graphic {
     margin: 4px 0px -2px 3px;
}
.place a.cog, .place a.lock {
    right: 0;
    top:0;
    width: 25px;
    padding: 4px 10px 0 3px;
    height: 100%;
}
  .place a.lock {
    right: 25px;
  }s
/*    Places icon matrix*/

.airport .icon-graphic {
    background-position: 0 0;
}
.cafe .icon-graphic {
    background-position: 0 -73px;
}
.construction .icon-graphic {
    background-position: 0 -146px;
}
.factory .icon-graphic {
    background-position: 0 -219px;
}
.garage .icon-graphic {
    background-position: 0 -292px;
}
.golf .icon-graphic {
    background-position: 0 -365px;
}
.gym .icon-graphic {
    background-position: 0 -438px;
}
.home .icon-graphic {
    background-position: 0 -511px;
}
.hospital .icon-graphic {
    background-position: 0 -584px;
}
.hotel .icon-graphic {
    background-position: 0 -657px;
}
.landfill .icon-graphic {
    background-position: 0 -730px;
}
.office .icon-graphic {
    background-position: 0 -803px;
}
.parking .icon-graphic {
    background-position: 0 -876px;
}
.petrol .icon-graphic {
    background-position: 0 -949px;
}
.recycle .icon-graphic {
    background-position: 0 -1022px;
}
.restaurant .icon-graphic {
    background-position: 0 -1095px;
}
.school .icon-graphic {
    background-position: 0 -1168px;
}
.stadium .icon-graphic {
    background-position: 0 -1241px;
}
.supermarket .icon-graphic {
    background-position: 0 -1314px;
}
.university .icon-graphic {
    background-position: 0 -1387px;
}

.asset-list-dim {
    width: 375px;
}