.casper-map { height: 100%; }
.casper-map.map-element-highlight { cursor: pointer; }

.casper-map-tiles.leaflet-container {
   cursor: inherit;
}

.leaflet-container .leaflet-control-attribution {
   background: none;
   font-size: 10px;
   position: absolute;
   bottom: 0;
   right: 10px;
   white-space: nowrap;
   line-height: 10px;
}

.leaflet-container .leaflet-control-attribution:hover {
   background: rgba(255,255,255,0.7);
}

.leaflet-control-container .leaflet-bottom .leaflet-control-scale { margin-bottom: 15px; }
.leaflet-control-container .leaflet-right .leaflet-control-scale { margin-right: 9px; }

.casper-map-label, .casper-map-pointer {
   background-color: #fff;
   border: 1px solid #C6C6C6;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   left: 0px;
   padding: 0.4em;
   top: 0px;

   //cursor: url(closedhand.cur), default;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.casper-map-label {
   border-radius: 4px;
   color: #000;
   font-size: 80%;
   min-width: 50px;
   text-align: center;
   width: auto;
   z-index: 999;
}
.casper-map-pointer {
   border-radius: 10px;
   height: 10px;
   width: 10px;
   z-index: 9998;

   transform: translate(-50%, -50%);
}

.casper-map-label .anchor {
   position: absolute;
   bottom: -15px;
   left: 50%;
}

.left.casper-map-label .anchor {
   left: 10px;
}

.right.casper-map-label .anchor {
   left: auto;
   right: 10px;
}

.casper-map-label .tip {
   position: absolute;
   margin-left: -6px;
   width: 12px;
   height: 12px;
   overflow: hidden;
   pointer-events: none;
}
.bottom.casper-map-label .tip {
   bottom: -11px;
   left: 50%;
}
.top.casper-map-label .tip {
   top: -11px;
   left: 50%;
}

.fixed.casper-map-label .tip {
   display: none;
}

.left.casper-map-label .tip {
   left: 10px;
}

.right.casper-map-label .tip {
   left: auto;
   right: 10px;
}

.casper-map-label .tip:after {
   position: absolute;
   left: 1px;
   width: 7px;
   height: 7px;
   content: "";
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   background-color: white;
   border: 1px solid #C6C6C6;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
.bottom.casper-map-label .tip:after {
   top: -4px;
}
.top.casper-map-label .tip:after {
   top: 4px;
}

.casper-map-label .rubber-band {
   border-top: 1px solid rgba(0,0,0,0.5);
   position: absolute;
   -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
   transform-origin: 0 0;
   pointer-events: none;
   left: 50%;
   top: 50%;
}

.casper-map-label .t.rubber-band {
   top: 1px;
}

.casper-map-label .r.rubber-band {
   left: 100%;
}

.casper-map-label .b.rubber-band {
   top: 100%;
}

.casper-map-label .l.rubber-band {
   left: 1px;
}

.casper-sprite {
   pointer-events: none;
   -webkit-transform-origin: 100 100;  /* casper-sprite.width / 2 */
   -moz-transform-origin: 100 100;
   -ms-transform-origin: 100 100;
   transform-origin: 100 100;
   position: absolute;
   left: -80px;                        /* (casper-sprite.width - casper-vehicle.width) / 2 */
   top: -80px;
}

.casper-vehicle {
   cursor: pointer;
   pointer-events: all;
   position: absolute;
   width: 40px;
   height: 40px;
   top: -20px;
   left: -20px;
}

.casper-vehicle,
.casper-vehicle:active,
.casper-vehicle:focus {
   background-image: none;
   box-shadow: none;
   outline: none;

   -webkit-box-shadow: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.selected.casper-vehicle {
   z-index: 1;
}

.highlighted.casper-vehicle {
   z-index: 2;
}

.casper-vehicle:hover {
   z-index: 3;
}

.ghost-gap.casper-vehicle {
   opacity: 0.5;
}

.ghost-keep.casper-vehicle {
   opacity: 0.75;
}

.ghost-end.casper-vehicle {
   display: none;
}

.show-labels .casper-vehicle:before {
   top: -2px;
   left: 50%;
   border: solid transparent;
   content: "";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-top-color: #f9f9f9;
   border-width: 6px;
   margin-left: -6px;
}

.show-labels .casper-vehicle:after, .casper-vehicle-label {
   content: attr(data-callsign);
   white-space: nowrap;
   color: #000;
   font-size: 10px;
   background-color: #fff;
   position: absolute;
   left: 50%;
}

.casper-vehicle-label {
   padding: 5px 10px;
   bottom: 40px;
   line-height: 13px;
   pointer-events: none;
   display: none;
   z-index: 1;

   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);

   //-webkit-font-smoothing: antialiased;
}
.casper-vehicle-label > * { pointer-events: none; }

.casper-vehicle.selected .casper-vehicle-label {
   cursor: pointer;
   pointer-events: all;
}

.casper-vehicle-label > span {
   clear: both;
   float: left;
}

.casper-vehicle-label:after, .casper-vehicle-label:before {
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.casper-vehicle-label:after {
   border-top-color: #fff;
   border-width: 6px;
   margin-left: -6px;
}

.highlight .casper-vehicle-label {
   //background-color: #5f7165;
   display: block;
   color: #fff;
}

.highlight .casper-vehicle-label:before {
   border-top-color: #cdcbcb;
   border-width: 6px;
   margin-left: -6px;
}

.highlight .casper-vehicle-label:after { //border-top-color: #5f7165; }

.selected .casper-vehicle-label { display: block; }
.casper-vehicle-label .label-row { clear: both; }
.label-row .label-row-label,
.label-row .label-row-value { display: inline-block; }

.label-row.header {
   height: 20px;
   line-height: 15px;
   vertical-align: top;
}
.label-row.header .label-row-label { width: auto; }
.label-row.header .label-row-value {
   font-weight: bold;
   text-transform: uppercase;
}

.label-row .label-row-label {
   font-weight: bold;
   width: 50px;
}
.label-row .label-row-value { padding-left: 5px; }

.show-labels .casper-vehicle:after {
   font-weight: bold;
   text-align: center;
   width: 56px;
   padding: 3px;
   top: -20px;

   transform: translate(-50%,0);
}

.transparent-labels .casper-vehicle:after {
   background-color: rgba(255,255,255,0.5);
}

.transparent-labels .casper-vehicle:before {
   border-top-color: rgba(255,255,255,0.5);
}

.high-contrast img.leaflet-tile, .high-contrast .leaflet-google-layer .gm-style > div > div > div > div > div {
   -webkit-filter: contrast(150%) saturate(0%);
   -moz-filter: contrast(150%) saturate(0%);
   -ms-filter: contrast(150%) saturate(0%);
   filter: contrast(150%) saturate(0%);
}