/* ================ *
 * ## Casper Map ##
 * ================ */
.casper-map {
   float: left;
   height: 100%;
   width: 100%;
}

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

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

.casper-map.map-interaction .casper-map-layers .casper-map-layer:not(.casper-map-interaction-layer),
.casper-map.map-interaction .casper-map-layers .casper-map-layer:not(.casper-map-interaction-layer) *,
.casper-map.map-interaction .leaflet-control {
   pointer-events: none !important;
}

.f3-rendered .casper-map .leaflet-container {
   font-family: Officina !important;
}

/* ============= *
 * ## Leaflet ##
 * ============= */
 
.leaflet-container img.leaflet-image-layer { user-select: none; }

.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);
}

.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%);
   -webkit-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;
   position: absolute;
   width: 40px;
   height: 40px;
   top: -20px;
   left: -20px;

   opacity: 1;
   transition: opacity .25s;
   -webkit-transition: opacity .25s;
}

.cActive .casper-vehicle { pointer-events: all; }
.cInactive .casper-vehicle { pointer-events: none; }

.casper-vehicle.data-off-map {
   display: none;
   pointer-events: none;
}


.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 {
   opacity: 0;
   pointer-events: none !important;
}

/* ========================== *
 * ## Casper Vehicle Label ##
 * ========================== */

.casper-vehicle-label {
   margin-bottom: 10px;
}

.casper-vehicle-label,
.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;
}


/* ## higlight / selected ## */
.casper-vehicle.highlight .casper-vehicle-label,
.casper-vehicle.selected .casper-vehicle-label { opacity: 1; }


/* ## label row container ## */
.casper-vehicle-label .label-row-container { overflow: hidden; }


/* ## label rows ## */
.casper-vehicle-label .label-row-container,
.casper-vehicle-label .label-row {
   clear: both;
   position: relative;
}

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

.casper-vehicle-label .label-row.content {
   display: table;
   margin-top: 5px;
}

.casper-vehicle-label .label-row.header {
   line-height: 15px;
   vertical-align: top;
   left: 0;
}

.casper-vehicle-label .label-row.header .label-row-label { width: auto; }
.casper-vehicle-label .label-row.header .label-row-value {
   font-weight: bold;
   text-transform: uppercase;
}

.casper-vehicle-label .label-row.content > .label-row {
   display: table-row;
}

.casper-vehicle-label .label-row.content > .label-row .label-row-label,
.casper-vehicle-label .label-row-content > .label-row .label-row-vehicle {
   display: table-cell;
}

.casper-vehicle-label .label-row .label-row-label {
   font-weight: bold;
   vertical-align: top;
}
.casper-vehicle-label .label-row .label-row-value,
.casper-vehicle-label .label-row .label-row-value + .label-row-value-affix { padding-left: 4px; }


/* ================= *
 * ## Show labels ##
 * ================= */

.casper-aircraft-layer.show-label-all .casper-vehicle:before,
.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;
}

.casper-aircraft-layer.show-label-all .casper-vehicle:after,
.show-labels .casper-vehicle:after {
   background-color: #fff;
   content: attr(data-callsign);
   font-size: 10px;
   font-weight: bold;
   left: 50%;
   padding: 3px;
   position: absolute;
   text-align: center;
   top: -20px;
   width: 56px;
   white-space: nowrap;

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

.transparent-labels .casper-aircraft-layer.show-label-all .casper-vehicle:after,
.transparent-labels .casper-vehicle:after {
   background-color: rgba(255,255,255,0.5);
}

.transparent-labels .casper-aircraft-layer.show-label-all .casper-vehicle:before,
.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%);
}

.casper-aircraft-layer.show-label-none .casper-vehicle-label { display: none !important; }