/* ================== *
 * ## Core styling ##
 * ================== */

html { box-sizing: border-box; }

body {
   padding: 0;
   margin: 0;
}

body.hideAddressBar { padding-bottom: 50px; }

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;              /* Hides the ugly blue highlight when tapping on divs */
}

*:focus { outline: 0; }
b { font-weight: bold; }
svg:not(:root) { fill-rule: evenodd; }


.encapsulate:after { content: ")"; }
.encapsulate:before { content: "("; }


/* ========== *
 * ## Flex ##
 * ========== */

.flex-center-content,
.flex-column,
.flex-row {
   display: flex;
}

.flex-column { flex-direction: column !important; }
.flex-grow { flex: 1 !important; }
.flex-row { flex-direction: row !important; }
.flex-shrink { flex: 0 !important; }

.flex-center-content {
   align-items: center;
   justify-content: center;
}

/* ========= *
 * ## Gap ##
 * ========= */

.gap-5 {    gap: 5px; }
.gap-10 {   gap: 10px; }
.gap-20 {   gap: 20px; }
.gap-40 {   gap: 40px; }
.gap-text { gap: 2px; }


/* ========== *
 * ## Grid ##
 * ========== */

.grid-column-2,
.grid-row-2 {
   display: grid;
}

.grid-column-2 {  grid-template-columns: 1fr 1fr; }
.grid-row-2 {     grid-template-rows: 1fr 1fr; }

/* =============== *
 * ## Grid Grap ##
 * =============== */

.grid-column-gap-5 {    column-gap: 5px; }
.grid-column-gap-10 {   column-gap: 10px; }
.grid-column-gap-20 {   column-gap: 20px; }
.grid-column-gap-40 {   column-gap: 40px; }

.grid-row-gap-5 {       row-gap: 5px; }
.grid-row-gap-10 {      row-gap: 10px; }
.grid-row-gap-20 {      row-gap: 20px; }
.grid-row-gap-40 {      row-gap: 40px; }

.grid-gap-5 {
   column-gap: 5px;
   row-gap: 5px;
}
.grid-gap-10 {
   column-gap: 10px;
   row-gap: 10px;
}
.grid-gap-20 {
   column-gap: 20px;
   row-gap: 20px;
}
.grid-gap-40 {
   column-gap: 40px;
   row-gap: 40px;
}


/* ======== *
 * ## F3 ##
 * ======== */

.force-hide {
   display: none !important;
   pointer-events: none !important;
}


/* ==================== *
 * ## Text Transform ##
 * ==================== */

.tt-lowercase { text-transform: lowercase !important; }
.tt-none { text-transform: none !important; }
.tt-uppercase { text-transform: uppercase !important; }


/* ====================== *
 * ## Casper Map Tiles ##
 * ====================== */

.casper-map-tiles {
   z-index: 0;
}


/* ====================== *
 * ## Casper Map Layer ##
 * ====================== */

.casper-map-layer.cActive,
.casper-label-layer.cActive {
   opacity: 1;
}
.casper-map-layer.cInactive,
.casper-label-layer.cInactive {
   opacity: 0;
}


/* ==================== *
 * ## Cookie Consent ##
 * ==================== */

#cc-window .cc-window-message > a {
   pointer-events: all;
}


/* ==================== *
 * ## Pointer Events ##
 * ==================== */
 
.pe-all,
.pe-single-all { pointer-events: all; }
.pe-none,
.pe-single-none { pointer-events: none; }

.pe-single-all > * { pointer-events: none; }
.pe-single-none > * { pointer-events: all; } 

._rbb {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}


/* ================== *
 * ## SVG Elements ##
 * ================== */

#busy {
   display: none !important;
}

/*
 * Exception error message
 */

#error, noscript, #upgrade {
   z-index: 9999;
   width: 100%;
   box-sizing: border-box;
   padding-left: 10px;
   line-height: 35px;
   top: 0;
   height: 0;
   overflow: hidden;
   position: fixed;
   box-shadow: 1px 2px 4px rgba(0,0,0,0.3);

   transition: height .5s linear;
   -webkit-transition: height .5s linear;
}

#error.active, #upgrade.active, noscript {
   height: 37px;
}

#error {
   background-color: rgb(255,181,86);
}

#upgrade, noscript {
   background-color: #EA5050;
   color: #fff;
}

#upgrade a {
   color: blue;
}

/* ============================ *
 * ## External CSS Overwrite ##
 * ============================ */

 .swiper-wrapper {
   -webkit-box-sizing: inherit !important;
   -moz-box-sizing: inherit !important;
   box-sizing: inherit !important;
 }

/*
 * Flex helpers
 */

.flex-container {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
}

.flex-horizontal, .flex-longest-side {
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -ms-flex-direction: row;
   flex-direction: row;
}

.flex-vertical, .flex-shortest-side {
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-flex-direction: column;
   flex-direction: column;
}

.flex-container > *, .flex-container > .flex-filled {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
}

.flex-container > .header, .flex-container > .footer, .flex-container > .flex-fixed {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
}

/*
 * Tooltips
 */
.casper-tooltip {
   display: inline-block;
   cursor: help;
   position: relative;

   transform: translateZ(0);
   -webkit-transform: translateZ(0);
}

.casper-tooltip:after {
   content: "";
   border-bottom: 1px dashed #5f7165;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
}

.casper-tooltip-content {
   background-color: #fff;
   border: 1px solid #cdcbcb;
   white-space: nowrap;
   font-size: 12px;
   bottom: 100%;
   display: none;
   left: -50%;
   margin-bottom: 15px;
   opacity: 0;
   padding: 5px 10px;
   pointer-events: none;
   position: absolute;

   -webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
   -ms-transform: translateY(10px);
   transform: translateY(10px);

   -webkit-transition: opacity .25s ease-out, -webkit-transform .25s ease-out;
   -moz-transition: opacity .25s ease-out, -moz-transform .25s ease-out;
   -ms-transition: opacity .25s ease-out, -ms-transform .25s ease-out;
   transition: opacity .25s ease-out, transform .25s ease-out;
}

.casper-tooltip-content:after {
   border-bottom: 1px solid #cdcbcb;
   border-right: 1px solid #cdcbcb;
   background-color: #fff;
   bottom: -7px;
   content: "";
   left: 50%;
   margin-left: -7px;
   position: absolute;
   width: 14px;
   height: 14px;

   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);

   -webkit-transform-origin: 7px 7px;
   -moz-transform-origin: 7px 7px;
   -ms-transform-origin: 7px 7px;
   transform-origin: 7px 7px;

   z-index: -1;
}

.casper-tooltip-content span.casper-tooltip-label {
   font-weight: bold;
}

.expanded.casper-tooltip {
   z-index: 9999;
}

.expanded.casper-tooltip .casper-tooltip-content {
   opacity: 1;
   display: block;
   pointer-events: auto;

   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}

.top.casper-tooltip-content {
   bottom: auto;
   top: 100%;
   margin-top: 15px;
}

.top.casper-tooltip-content:after {
   bottom: auto;
   top: -7px;

   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.left.casper-tooltip-content {
   left: 0;
}

.left.casper-tooltip-content:after {
   left: 10px;
   margin-left: 0;
}

.right.casper-tooltip-content {
   left: auto;
   right: 0;
}

.right.casper-tooltip-content:after {
   left: auto;
   right: 10px;
   margin-left: 0;
}

.flight-details .casper-tooltip-content {
   width: 260px;
}
.flight-details .casper-tooltip-content > div {
   width: 240px;
}

/* ======================================= *
 * ## Empty Dynamic Template Attributes ##
 * ======================================= */

[data-empty] { display: none !important }
[data-empty=""],
[data-not-null="null"],
[data-not-undefined="undefined"],
[data-not-zero="0"] {
   display: inherit !important;
}

[data-not-empty=""],
[data-not-null="null"],
[data-not-undefined="undefined"],
[data-not-zero="0"] {
   display: none !important;
}

[data-empty-placeholder=""]:after,
[data-null-placeholder="null"]:after,
[data-undefined-placeholder="undefined"]:after,
[data-zero-placeholder="0"]:after {
   content: attr(data-placeholder);
}


/* =============================== *
 * ## Closest Point of Approach ##
 * =============================== */

.cpa-display-component { pointer-events: none; }
.cpa-display-component .info-table .info-cell { line-height: 16px; }
.cpa-display-component .info-table .info-cell:first-child { white-space: nowrap }
.cpa-display-component .info-table .info-cell + .info-cell {
   padding-left: 10px;
   width: 100%;
}

.cpa-display-component .role-inactive {
   left: 50%;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 50%;
   width: 90%;

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

.cpa-display-component .data-container,
.cpa-display-component .visual-container {
   opacity: 1;
}

.cpa-display-component .data-container,
.cpa-display-component .role-inactive,
.cpa-display-component .visual-container {
   transition: opacity .25s;
   -webkit-transition: opacity .25s;
}

/* ## inactive ## */
.cpa-display-component.cpa-inactive .role-inactive { opacity: 1; }
.cpa-display-component.cpa-inactive .data-container { opacity: .1; }
.cpa-display-component.cpa-inactive .visual-container { opacity: .1; }


/* =============================== *
 * ## Flight Distance Component ##
 * =============================== */

.flight-distance-component,
.flight-distance-component .data-container,
.flight-distance-component .display-container,
.flight-distance-component .visual-container {
   float: left;
   position: relative;
   width: 100%;
}

.flight-distance-component .data-container { font-size: 12px; }
.flight-distance-component .display-container { height: 120px; }
.flight-distance-component .visual-container { 
   padding: 20px  0;
}

/* ## lines ## */
.flight-distance-component .line-container {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;
}

.flight-distance-component .line-container .line {
   background-color: #646464;
   height: 1px;
   position: absolute;
   right: 0;
}

.flight-distance-component .line-container .line-1 {
   bottom: 0;
   opacity: .4;
   width: 100%;
}
.flight-distance-component .line-container .line-2 {
   bottom: 7.5%;
   opacity: .2;
   width: 90%;
}
.flight-distance-component .line-container .line-3 {
   bottom: 15%;
   opacity: .1;
   width: 80%;
}

/* ## display ## */
.flight-distance-component .role-display {
   height: 100%;
   margin-right: 50px;
   position: absolute;
   right: 0;
   top: 0;
}

.flight-distance-component .role-distance-curve {
   float: right;
   height: 100%;
   opacity: .5;
   position: relative;
   width: 100%;
   z-index: 0;
}

.flight-distance-component .diag-dist-container,
.flight-distance-component .diag-dist-container .pivot_1,
.flight-distance-component .horz-dist-container,
.flight-distance-component .horz-dist-container .pivot_1,
.flight-distance-component .role-from-display,
.flight-distance-component .to-display-container,
.flight-distance-component .to-display-container .bone,
.flight-distance-component .to-display-container .pivot_1,
.flight-distance-component .to-display-container .role-to-display,
.flight-distance-component .vert-dist-container,
.flight-distance-component .vert-dist-container .pivot {
   bottom: 0;
   position: absolute;
   right: 0;

   transform-origin: bottom right;
   -webkit-transform-origin: bottom right;
}

.flight-distance-component .diag-dist-container,
.flight-distance-component .diag-dist-container .pivot,
.flight-distance-component .horz-dist-container,
.flight-distance-component .horz-dist-container .pivot_1,
.flight-distance-component .to-display-container,
.flight-distance-component .to-display-container .pivot {
   height: 1px;
   width: 1px;
}

.flight-distance-component .diag-dist-container .pivot_2,
.flight-distance-component .to-display-container .pivot_2 {
   left: 0;
   position: absolute;
}

.flight-distance-component .role-display .display-container .altitude,
.flight-distance-component .role-display .display-container .degrees,
.flight-distance-component .role-dist-diagonal .distance,
.flight-distance-component .role-dist-horizontal .distance,
.flight-distance-component .role-dist-vertical .altitude {
   font-size: 10px;
   white-space: nowrap;
}


/* ## transitions ## */
.flight-distance-component .diag-dist-container .bone,
.flight-distance-component .diag-dist-container .pivot,
.flight-distance-component .horz-dist-container .bone,
.flight-distance-component .horz-dist-container .pivot,
.flight-distance-component .horz-dist-container .role-dist-horizontal,
.flight-distance-component .to-display-container .bone,
.flight-distance-component .to-display-container .pivot,
.flight-distance-component .vert-dist-container .bone,
.flight-distance-component .vert-dist-container .pivot,
.flight-distance-component .vert-dist-container .role-dist-vertical {
   transition-duration: .33s;
   transition-timing-function: linear;

   -webkit-transition-duration: .33s;
   -webkit-transition-timing-function: linear;
}

.flight-distance-component .diag-dist-container .bone,
.flight-distance-component .horz-dist-container .bone,
.flight-distance-component .to-display-container .bone,
.flight-distance-component .vert-dist-container .bone {
   transition-property: height, bottom;
   -webkit-transition-property: height, bottom;
}

.flight-distance-component .diag-dist-container .pivot,
.flight-distance-component .horz-dist-container .pivot,
.flight-distance-component .to-display-container .pivot,
.flight-distance-component .vert-dist-container .pivot {
   transition-property: transform;
   -webkit-transition-property: -webkit-transform;
}

.flight-distance-component .horz-dist-container .role-dist-horizontal {
   transition-property: left;
   -webkit-transition-property: left;
}
.flight-distance-component .vert-dist-container .role-dist-vertical {
   transition-property: top, left; 
   -webkit-transition-property: top, left; 
}


/* ## From Display ## */
.flight-distance-component .role-from-display {
   height: 30px;
   width: 30px;
   z-index: 1;

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

.flight-distance-component .role-from-display:before {
   background-color: #FFF;
   border-radius: 50%;
   content: "";
   height: 150%;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 150%;
   z-index: -1;

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


/* ## To Display ## */
.flight-distance-component .to-display-container { z-index: 2; }
.flight-distance-component .to-display-container .bone { height: 120px; }
.flight-distance-component .to-display-container .pivot_1 {
   transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
}
.flight-distance-component .to-display-container .pivot_2 {
   top: 0;

   transform: rotate(-270deg);
   -webkit-transform: rotate(-270deg);
}

.flight-distance-component .to-display-container .role-to-display {
   height: 20px;
   width: 30px;
}

.flight-distance-component .role-display .display-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.flight-distance-component .role-display .display-container .altitude {
   height: 10px;
   line-height: 10px;
   margin-right: 5px;
   position: absolute;
   right: 100%;
   top: 50%;

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

.flight-distance-component .role-display .display-container .degrees {
   bottom: 100%;
   height: 10px;
   left: 0;
   line-height: 10px;
   margin-bottom: 5px;
   position: absolute;
   text-align: center;
   width: 100%;
}

.flight-distance-component .role-display .display-container .icon {
   float: left;
   height: 100%;
   padding: 2px;
   position: relative;
   width: 100%;
}


/* ## Angled Distances ## */
.flight-distance-component .diag-dist-container .bone,
.flight-distance-component .horz-dist-container .bone,
.flight-distance-component .vert-dist-container .bone {
   bottom: 0;
   position: absolute;
   right: 0;
   width: 2px;

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


.flight-distance-component .diag-dist-container .pointer,
.flight-distance-component .horz-dist-container .pointer,
.flight-distance-component .vert-dist-container .pointer {
   background-color: #646464;
   border-radius: 50%;
   height: 8px;
   left: 50%;
   position: absolute;
   width: 8px;
   
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
}

.flight-distance-component .diag-dist-container + .vert-dist-container .pointer_1 { display: none; }

.flight-distance-component .horz-dist-container .role-dist-horizontal:after,
.flight-distance-component .vert-dist-container .role-dist-vertical:after {
   background-color: #646464;
   content: "";
   position: absolute;
}


/* ## Diagonal Distance ## */
.flight-distance-component .diag-dist-container { z-index: 3; }
.flight-distance-component .diag-dist-container .pivot_1 {
   transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
}
.flight-distance-component .diag-dist-container .pivot_2 {
   top: 40%;

   transform: rotate(-270deg);
   -webkit-transform: rotate(-270deg);
}

.flight-distance-component .diag-dist-container .bone {
   background: linear-gradient(0deg, rgba(100,100,100,0) 25%,#646464 100%);
}
.flight-distance-component .horz-dist-container .bone {
   background: #646464;
}

.flight-distance-component .diag-dist-container .role-dist-diagonal {
   bottom: 0;
   left: 0;
   margin: 0 0 5px 5px;
   position: absolute;
}

.flight-distance-component .diag-dist-container .pointer { top: 0; }


/* ## Horizontal Distance ## */
.flight-distance-component .horz-dist-container .pivot_1 {
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
}

.flight-distance-component .horz-dist-container .role-dist-horizontal {
   top: 100%;

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

.flight-distance-component .horz-dist-container .role-dist-horizontal:after {
   height: 7px;
   left: 50%;
   top: 0;
   width: 2px;

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

.flight-distance-component .horz-dist-container .role-dist-horizontal .distance { margin-top: 10px; }


/* ## Vertical Distance ## */
.flight-distance-component .vert-dist-container .bone { background-color: #646464; }

.flight-distance-component .vert-dist-container .pivot_1 {
   transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
}
.flight-distance-component .vert-dist-container .pivot_2 {
   transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
}
.flight-distance-component .vert-dist-container .pointer_1 { top: 100%; }
.flight-distance-component .vert-dist.container .pointer_2 { top: 0; }

.flight-distance-component .horz-dist-container .role-dist-horizontal,
.flight-distance-component .vert-dist-container .role-dist-vertical {
   left: 0;
   position: absolute;
}

.flight-distance-component .vert-dist-container .role-dist-vertical {
   padding-right: 12px;

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

.flight-distance-component .vert-dist-container .role-dist-vertical:after {
   height: 2px;
   right: 0;
   top: 50%;
   width: 7px;

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


/* =============== *
 * ## CPA layer ##
 * =============== */

.casper-cpa-layer .role-marker {
   position: absolute;

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

/*
 * Home marker
 */
#home-marker {
   min-width: 30px;
   width: 30px;
   height: 30px;
   margin-left: -15px;
   margin-top: -30px;
   background-color: #0081B7;
   padding: 4px 0;
}

#home-marker:before {
   font-family: icomoon;
   content: "\e620";
   font-size: 25px;
   line-height: 20px;
   color: #fff;
}

#home-marker .tip {
   display: block;
}

#home-marker .tip:after {
   background-color: #0081B7;
}

/**
 * SVG
 */
.svg-button {
   cursor: pointer;
}
.casper-nmt-icon {
   cursor: pointer;
   display: block;
   pointer-events: all;

   transform-origin: 0px 0px;
   -webkit-transform-origin: 0px 0px;
}

/**
 * Period Panel
 */
.period-panel .period-editor {
   float: left;
   position: relative;
   width: 100%;
}

.period-panel .period-editor > .date-editor-container {
   float: inherit;
   position: inherit;
   width: 50%;
}

.period-panel .period-editor > .from-editor-container {
   padding-right: 2.5%;
}

.period-panel .period-editor > .upto-editor-container {
   padding-left: 2.5%;
}

.period-panel .from-editor,
.period-panel .upto-editor {
   background-color: #FFFFFF;
   border-radius: 3px;
   float: inherit;
   padding: 5px 30px 5px 5px;
   position: inherit;
   width: 100%;
}

.period-panel .from-editor > .datetime-input,
.period-panel .upto-editor > .datetime-input {
   border-width: 0px;
   font-size: 10pt;
   height: 20px;
   margin-right: 30px;
   text-align: right;
   width: 100%;
}

.period-panel .from-editor > .datetime-input:focus,
.period-panel .upto-editor > .datetime-input:focus {
   outline: none;
}

.period-panel .from-editor > .datetime-button,
.period-panel .upto-editor > .datetime-button {
   background-color: #3A443C;
   border-radius: 3px;
   height: 20px;
   padding: 3px;
   position: absolute;
   right: 5px;
   top: 5px;
   width: 20px;

   fill: #FFFFFF;
}

.period-panel .datetime-picker[data-role='picker'] {
   clear: both;
   float: left;
   height: 0px;
   position: relative;
   width: 47.5%;
   z-index: 9999;
}
.period-panel .datetime-picker[data-role='picker'][data-picker='from'] { margin-left: 0px; }
.period-panel .datetime-picker[data-role='picker'][data-picker='upto'] { margin-left: 52.5%; }

.period-panel .datetime-picker[data-role='picker'].open {
   opacity: 1;

   transition: margin-left 0.5s, opacity 0.5s;
   -webkit-transition: margin-left 0.5s, opacity 0.5s;
}
.period-panel .datetime-picker[data-role='picker'].closed {
   opacity: 0;

   transition: opacity 0.5s;
   -webkit-transition: opacity 0.5s;
}

/**
 * ZoomControl
 */
#map .control-container {
   position: absolute;
   right: 0;
   top: 0;
}

#map .control-container .control-button {
   box-sizing: border-box;
   clear: both;
   float: left;
   position: relative;
}

/**
 * Login Panel
 */
.login-panel .container {
   float: left;
   position: relative;
   width: 100%;
}

/**
 * Casper Button
 */
.casper-button {
   cursor: pointer;
   position: relative;
}

/**
 * Input list
 */
input[data-list] + .input-list[data-input] {
   float: left;
   overflow: hidden;
   position: relative;
   z-index: 999;
}

input[data-list] + .input-list[data-input].closed {
   height: 0;
   opacity: 0;

   transition: height .25s, opacity .05s ease .2s;
   -webkit-transition: height .25s, opacity .05s ease .2s;
}
input[data-list] + .input-list[data-input].open {
   transition: height .25s, opacity .05s;
   -webkit-transition: height .25s, opacity .05s;
}

.input-list-option {
   cursor: pointer;
   float: left;
   position: relative;
   width: 100%;
}

.input-list-option * { pointer-events: none; }

.input-list-option.hidden { display: none !important; }
.input-list-option.invisible { opacity: 0 !important; }


/* ===================== *
 * ## Photo Component ##
 * ===================== */

.photo-component,
.photo-component .role-photo-img {
   float: left;
   position: relative;
}

.role-photo-img { display: block; }
.role-photo-img.scaleToHeight {
   height: 100%;
   width: auto;
}
.role-photo-img.scaleToWidth {
   height: auto;
   width: 100%;
}
.role-photo-img.scaleToHeightWidth {
   height: 100%;
   width: 100%;
}

.role-photo-backup,
.role-photo-none {
   display: none;
   font-size: 25px;
   height: 30px;
   line-height: 30px;
   opacity: .5;
   position: absolute;
   text-align: center;
   top: 50%;
   width: 100%;

   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}
.backup-photo .role-photo-backup,
.no-photo .role-photo-none { display: block; }

.role-photo-reference {
   float: left;
   padding-top: 5px;
   position: relative;
   text-align: right;
   width: 100%;
}
.role-photo-reference a {
   font-size: 10px;
   text-decoration: none;
}
.backup-photo .role-photo-reference,
.no-photo .role-photo-reference { display: none; }


/* ============================== *
 * ## Aircraft Photo Component ##
 * ============================== */

.aircraft-photo-component.backup-photo .role-photo-none { display: block; }


/* ============================ *
 * ## Airline Logo Component ##
 * ============================ */

.airline-logo-component.backup-photo .role-photo-none { display: block; }


/* =================== *
 * ## Casper Map Layers ##
 * =================== */

.casper-map-labels { z-index: 2; }
.casper-map-layers { z-index: 1; }

.casper-map-labels,
.casper-map-labels .casper-label-layer,
.casper-map-layers,
.casper-map-layers .casper-map-layer {
   height: 100%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
}

.casper-map-layers .casper-map-layer.inactive { display: none !important; }

.casper-map-layer .busy-logo { border-width: 0; }
.casper-aircraft-layer > [data-role="label"] { display: none; }


/* ===================================== *
 * ## Casper Map Layers -> Icon Layer ##
 * ===================================== */

.casper-info-graphic-layer[data-show-icon] .role-icon_container > .map-icon-container { display: none; }
.casper-info-graphic-layer[data-show-icon="all"] .role-icon_container > .map-icon-container,
.casper-info-graphic-layer[data-show-icon="selected"] .role-icon_container > .map-icon-container.select {
   display: block;
}

.casper-label-layer[data-show-icon] .role-label_container > .map-icon-container { display: none; }
.casper-label-layer[data-show-icon="all"] .role-label_container > .map-icon-container,
.casper-label-layer[data-show-icon="selected"] .role-label_container > .map-icon-container.select {
   display: block;
}

.map-bone,
.map-bone-container {
   height: 1px;
   position: absolute;
   top: 0;
   width: 1px;
}

.map-bone {
   left: 0;
   transform-origin: top left;
   -webkit-transform-origin: top left;
}
.map-bone-container {
   left: 100%;
}

.map-icon-container,
.map-shape-container {
   position: absolute;

   transform: translate(-50%, -50%);
   transform-origin: left top;
   
   -webkit-transform: translate(-50%, -50%);
   -webkit-transform-origin: left top;
}

.map-icon-container.highlight .map-icon-label,
.map-icon-container.selected .map-icon-label {
   opacity: 1;
}

.map-icon-container .map-icon-img {
   float: left;
   pointer-events: all;
   position: relative;
}

.map-icon-hitbox {
   height: 50%;
   left: 50%;
   opacity: 0;
   position: absolute;
   top: 50%;
   width: 50%;
   z-index: 1;

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

.map-icon-label-container,
.map-shape-label-container {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 2;
}

.map-icon-label,
.map-shape-label {
   border-style: solid;
   border-width: 1px;
   border-radius: 5px;
   bottom: 0%;
   box-shadow: 0px 3px 3px rgba(0,0,0,.2);
   font-size: 10px;
   left: 50%;
   min-width: 50px;
   opacity: 0;
   padding: 5px 7px;
   position: absolute;
   user-select: none;
   width: auto;
   white-space: nowrap;
   z-index: 2;

   transform: translate(-50%, -30px);
   transform-origin: center bottom;
   transition: bottom .25s, opacity .25s, transform .5s;
   transition-timing-function: ease-in-out;
   
   -webkit-transform: translate(-50%, -30px);
   -webkit-transform-origin: center bottom;
   -webkit-transition: bottom .25s, opacity .25s, transform .5s;
   -webkit-transition-timing-function: ease-in-out;
}

.map-icon-label:after,
.map-shape-label:after {
   bottom: -6px;
   border-style: solid;
   border-width: 0 0 1px 1px;
   box-shadow: -3px 3px 3px rgba(0,0,0,.2);
   content: "";
   height: 10px;
   left: 50%;
   position: absolute;
   width: 10px;

   transform-origin: center center;
   transform: translate(-50%,0) rotate(-45deg);

   -webkit-transform-origin: center center;
   -webkit-transform: translate(-50%,0) rotate(-45deg);
}

.map-icon-label:before,
.map-shape-label:before {
   border-style: solid;
   border-width: 7px 7px 0 7px;
   border-color: rgba(255,255,255,1) transparent transparent transparent;
   bottom: -7px;
   content: "";
   height: 0;
   left: 50%;
   position: absolute;
   width: 0;

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

.map-icon-label .table { margin-bottom: 0; }

.map-icon-label .map-icon-label-content td,
.map-icon-label .map-icon-label-content th {
   padding: 0;
   border-top: none;
}

.map-icon-label .map-icon-label-content th { border-bottom: none; }
.map-icon-label .map-icon-label-content td.content-value { padding-left: 5px; }


.map-icon-label .title,
.map-shape-label .title {
   font-weight: bold;
   white-space: nowrap;
}

.map-icon-label .table-header.header { display: none; }
.map-icon-label table { line-height: 15px; }
.map-icon-label .table-content thead tr th { text-align: left; }
.map-icon-label .table-content tbody tr td:last-child { padding-left: 5px; }

/* ## icon container ## */
.map-icon-container.highlight .map-icon-label-tether,
.map-icon-container.select .map-icon-label-tether,
.map-shape-container.highlight .map-icon-label-tether,
.map-shape-container.select .map-icon-label-tether {
   transition: opacity .25s .5s;
   -webkit-transition: opacity .25s .5s;
}

/* ## icon ## */
.map-icon,
.map-icon-hitbox {
   cursor: pointer;
   pointer-events: all;
}
.cInactive .map-icon,
.cInactive .map-icon-hitbox {
   pointer-events: none !important;
}

.map-icon {
   z-index: 1;

   transition: transform .5s ease-in-out;
   -webkit-transition: transform .5s ease-in-out;
}
.map-icon > * { pointer-events: none; }

/* ## interaction ## */
.map-icon.map-icon-clickable,
.map-icon.map-icon-hovertable {
   cursor: pointer;
}

.casper-label-layer.show-label-all .map-icon-container .map-icon-label,
.casper-info-layer.show-label-all .map-icon-container .map-icon-label-tether,
.casper-label-layer.show-label-all .map-shape-container .map-shape-label,
.casper-label-layer.show-label-all .map-shape-container .map-shape-label-tether {
   opacity: 1 !important;
}

.casper-label-layer.show-label-interactive .map-icon-container.highlight .map-icon-label,
.casper-info-layer.show-label-interactive .map-icon-container.highlight .map-icon-label-tether,
.casper-label-layer.show-label-interactive .map-icon-container.select .map-icon-label,
.casper-info-layer.show-label-interactive .map-icon-container.select .map-icon-label-tether,
.casper-label-layer.show-label-interactive .map-shape-container.highlight .map-shape-label,
.casper-label-layer.show-label-interactive .map-shape-container.highlight .map-shape-label-tether,
.casper-label-layer.show-label-interactive .map-shape-container.select .map-shape-label,
.casper-label-layer.show-label-interactive .map-shape-container.select .map-shape-label-tether {
   opacity: 1;
}

.casper-label-layer.show-label-none .map-icon-container .map-icon-label,
.casper-info-layer.show-label-none .map-icon-container .map-icon-label-tether,
.casper-label-layer.show-label-none .map-shape-container .map-shape-label,
.casper-label-layer.show-label-none .map-shape-container .map-shape-label-tether {
   opacity: 0 !important;
}


.casper-label-layer.cActive.labels-draggable.show-label-all .casper-layer-label .map-icon-label-container .map-icon-label,
.casper-label-layer.cActive.labels-draggable.show-label-interactive .casper-layer-label.select .map-icon-label-container .map-icon-label,
.casper-label-layer.cActive.labels-draggable.show-label-all .casper-layer-label .map-shape-label-container .map-shape-label,
.casper-label-layer.cActive.labels-draggable.show-label-interactive .casper-layer-label.select .map-shape-label-container .map-shape-label{
   cursor: all-scroll;
   pointer-events: all;
}

.casper-map-layer.labels-draggable .map-icon-label-container .map-icon-label > *,
.casper-map-layer.labels-draggable .map-shape-label-container .map-shape-label > * {
   pointer-events: none;
}

.map-icon-label-tether,
.map-shape-label-tether {
   height: 100%;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   width: 100%;

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

.map-icon-label-tether .anchor-point,
.map-shape-label-tether .anchor-point {
   height: 1px;
   position: absolute;
   width: 1px;
}

.map-icon-label-tether .anchor-icon,
.map-icon-label-tether .tether-line,
.map-shape-label-tether .anchor-shape,
.map-shape-label-tether .tether-line{
   left: 50%;
   top: 50%;
}

.map-icon-label-tether .anchor-label,
.map-shape-label-tether .anchor-label {
   left: 50%;
}

.map-icon-label-tether .anchor-label { bottom: calc(100% + 16px); }
.map-shape-label-tether .anchor-label { bottom: calc(100% + 22px); }

.map-icon-label-tether .tether-line,
.map-shape-label-tether .tether-line {
   height: 1px;
   position: absolute;

   transform: rotate(-90deg);
   transform-origin: left center;
   
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: left center;
}


/* ========================= *
 * ## Noise Monitor Layer ##
 * ========================= */

.nmt-icon-container {
   transform: translate(-30px, -80px);
   -webkit-transform: translate(-30px, -80px);
}

.nmt-icon {
   height: 90px;
   width: 60px;

   transition-duration: .5s;
   transition-property: transform, fill;
   transition-timing-function: ease-in-out;

   transform-origin: 30px 80px;

   -webkit-transition-duration: .5s;
   -webkit-transition-property: -webkit-transform, fill;
   -webkit-transition-timing-function: ease-in-out;

   -webkit-transform-origin: 30px 80px;
}

.nmt-icon-label {
   text-align: center;
   white-space: nowrap;
}

.nmt-icon #noise_level {
   font-weight: bold;
   font-size: 25px;
   text-anchor: middle;
}

.nmt-icon #shadow {
   fill: rgba(0,0,0,0.25);
}


/* ========================= *
 * ## NMT Positions Layer ##
 * ========================= */

.nmt-positions-layer .map-icon-label-tether .anchor-icon,
.nmt-positions-layer .map-icon-label-tether .tether-line {
   left: 0;
   top: -25%;
}

.nmt-positions-layer .map-icon-label-tether .anchor-label {
   bottom: calc(150% + 10px);
   left: 0;
}


/* ===================== *
 * ## Air Space Layer ##
 * ===================== */

.air-space-icon-container {
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
}

.air-space-icon {
   height: 50px;
   overflow: visible;
   width: 50px;
}

.air-space-icon #flyover #ring {
   stroke: #646464;
   stroke-width: 4px;
}

/* ================= *
 * ## Track Layer ##
 * ================= */

.casper-tracks-layer .track-image {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;

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

.casper-tracks-layer .track-image.hide { opacity: 0; }
.casper-tracks-layer .track-image.show { opacity: 1; }

.casper-tracks-layer .busy-logo {
   height: 100px;
   padding: 10px;
   width: 100px;
}

.casper-tracks-layer .busy-logo.busy-fade.in .center {
   height: 50%;
   width: 50%;
}

.casper-tracks-layer .busy-logo #circleBorder { stroke-width: 7px; }
.casper-tracks-layer.component-busy .busy-logo { opacity: 1; }

.casper-tracks-layer .map-icon-label-container {
   height: 1px;
   width: 1px;
}

.casper-tracks-layer .map-icon-label-container .map-icon-label {
   pointer-events: none;
   transform: translate(-50%, -15px);
   -webkit-transform: translate(-50%, -15px);
}



/* ===================== *
 * ## Chart Component ##
 * ===================== */

.casper-chart-component,
.casper-chart-component .chart-container,
.casper-chart-component .chart-title,
.casper-chart-component .role-HC {
   float: left;
   position: relative;
   width: 100%;
}

.casper-chart-component .role-HC-export {
   opacity: 0;
   pointer-events: none;
   position: absolute;
}

.f3-rendered .role-HC {
   opacity: 1;
   z-index: 0;

   transition: opacity .3s;
   -webkit-transition: opacity .3s;
}

.casper-chart-component .role-HC .highcharts-container,
.f3-rendered .role-HC .highcharts-container,
.f3-rendered .role-HC .highcharts-container svg {
    width: 100% !important;
    height: 100% !important;
    font-family: Officina !important
}
.f3-rendered .role-HC .highcharts-container svg path { stroke-width: 1; }

.casper-chart-component .role-HC .highcharts-container svg {
    width: 100%;
    height:100%;
}

.casper-chart-component .chart-title + .role-HC { height: 175px; }
.casper-chart-component .chart-title.no-title { display: none; }

.casper-chart-component .role-no-data {
   left: 50%;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 50%;

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

.casper-chart-component .role-no-data {
   text-align: center;
   z-index: 2;
}

.casper-chart-component .role-busy {
   height: 50px;
   width: 50px;
}

.casper-chart-component.chart-no-data .role-no-data { opacity: 1; }
.casper-chart-component.component-busy .role-HC { opacity: .1; }

.casper-chart-component.no-legend-interaction .highcharts-legend .highcharts-legend-item { pointer-events: none !important; }

/* =========================== *
 * ## Harmonica Index Chart ##
 * =========================== */

.casper-chart-component .harmonica-index-chart .his_event .highcharts-point { clip-path: polygon(0 100%, 50% 0, 100% 100%); }


/* ======================== *
 * ## Dropdown Component ##
 * ======================== */

.dropdown-component,
.dropdown-component .display-wrapper {
   float: left;
   position: relative;
   width: 100%; /* testing */
}

.dropdown-component .display-wrapper {
   display: flex;
   flex-direction: row;
   height: 100%;
   width: 100%;
}
.dropdown-component.reverse .display-wrapper { flex-direction: row-reverse; }

.dropdown-component .display-wrapper .role-button {
   cursor: pointer;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 2;
}

.dropdown-component .display-wrapper .list-toggle {
   height: 100%;
   width: 100%;
}

.dropdown-component .list-toggle .icon {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;

   transform: rotate(0deg);
   transition: transform .33s, fill .33s;

   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform .33s, fill .33s;
}

.dropdown-component.list-open .list-toggle .icon {
   transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
}

.dropdown-component .display-wrapper .display-container {
   height: 100%;
   flex: 1;
   position: relative;
}

.dropdown-component .role-list,
.dropdown-component .role-list .tip-container {
   left: 0;
   position: absolute;
   width: 100%;
}

.dropdown-component .role-list {
   padding-right: 0;
   top: 100%;
}
.dropdown-component.list-closed .role-list { pointer-events: none; }

.dropdown-component .role-list .list-container,
.dropdown-component .role-listitems {
   float: left;
   min-width: 100%;
   position: relative;
}

.dropdown-component .role-list .list-container {
   overflow: hidden;
   z-index: 1;

   transition: height .33s;
   -webkit-transition: height .33s;
}

.dropdown-component .role-list .tip-container {
   height: 15px;
   overflow: hidden;
   pointer-events: none;
   top: 0;
   z-index: 2;
}

.dropdown-component .role-list .tip {
   height: 10px;
   left: 20px;
   position: absolute;
   top: 0;
   width: 10px;
   z-index: 0;
   
   transform: translate(-50%,-50%) rotate(45deg);
   transition: top .33s;
   
   -webkit-transform: translate(-50%,-50%) rotate(45deg);
   -webkit-transition: top .33s;
}

.dropdown-component .role-listitems { overflow-y: auto; }

.dropdown-component.t-align-center .role-list .tip { left: 50%; }
.dropdown-component.t-align-right .role-list .tip {
   left: auto;
   right: 20px;
}

.dropdown-component.t-align-right .role-list .tip {
   transform: translate(50%,-50%) rotate(45deg);
   -webkit-transform: translate(50%,-50%) rotate(45deg);
}


.dropdown-component .role-display,
.dropdown-component .role-listitems .list-item[data-value],
.dropdown-component .role-placeholder {
   line-height: 30px;
   padding: 0 10px;
}

.dropdown-component .role-display,
.dropdown-component .role-placeholder {
   height: 100%;
   width: 100%;
}

.dropdown-component .role-display {
   position: relative;
   z-index: 0;
}
.dropdown-component .role-placeholder {
   display: none;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
}

.dropdown-component.show-placeholder .role-display { display: none; }
.dropdown-component.show-placeholder .role-placeholder { display: block; }

.dropdown-component .role-listitems .list-item[data-value] { cursor: pointer; }

.dropdown-component .role-listitems .list-item[data-value].empty-value,
.dropdown-component .role-listitems .list-item[data-value].null-value {
   color: transparent;
}


/* ==================================== *
 * ## Dropdown Component -> Checkbox ##
 * ==================================== */

.dropdown-component .group-checkbox .role-button { width: 100%; }
.dropdown-component .group-checkbox .role-button .icon { width: 12px; }
.dropdown-component .group-checkbox .role-label { padding-left: 30px; }


/* ========================== *
 * ## Runway Use Component ##
 * ========================== */

.runway-use-component .runways-svg {
   height: 100%;
   width: 100%;
}
.runway-use-component .runways-svg  path { fill: #EEE; }
.runway-use-component .runways-svg  line {
   stroke: #EEE;
   stroke-width: 1px;
}

.runway-use-component #active > g,
.runway-use-component #active > g .inbound,
.runway-use-component #active > g .outbound,
.runway-use-component #active > g #pylons {
   display: none;
}

.runway-use-component #active > g.inbound,
.runway-use-component #active > g.inbound .inbound,
.runway-use-component #active > g.outbound,
.runway-use-component #active > g.outbound .outbound,
.runway-use-component #active > g.closed,
.runway-use-component #active > g.closed #pylons {
   display: block;
}

.runway-use-component #active #label text { font-size: 5px; }

.runway-use-component .runways-svg #ac,
.runway-use-component .runways-svg #pylon { fill: inherit; }


/* ================ *
 * ## info table ##
 * ================ */

.info-table { display: table; }
.info-table .info-row { display: table-row; }
.info-row .info-cell { 
   display: table-cell;
   vertical-align: top;
}

/* ========== *
 * ## Busy ##
 * ========== */

.role-busy {
   position: absolute;
   left: 50%;
   opacity: 0;
   pointer-events: none;
   top: 50%;
   z-index: 9999;

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

.component-busy .role-busy { opacity: 1; }


/* =============== *
 * ## Busy Logo ##
 * =============== */

@keyframes busy_logo_svg {
   0% { 
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
   }
   100% { 
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
   }
}

.busy-logo {
   border-style: solid;
   border-width: 1px;
   border-radius: 50%;
   padding: 5px;
}

.busy-logo .center {
   border-radius: 50%;
   height: 0px;
   left: 50%;
   opacity: .75;
   position: absolute;
   top: 50%;
   width: 0px;

   transform: translate(-50%, -50%);
   transition: height, width;
   transition-duration: .1s;
   transition-delay: .2s;

   -webkit-transform: translate(-50%, -50%);
   -webkit-transition: height, width;
   -webkit-transition-duration: .1s;
   -webkit-transition-delay: .2s;
}

.busy-logo.busy-fade.in .center {
   height: 50%;
   width: 50%;
}

.busy-logo .edges {
   height: 100%;
   overflow: visible;
   padding: 1px;
   width: 100%;

   transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
}

.busy-logo.busy-fade.in .edges {
   animation-name: busy_logo_svg;
   animation-iteration-count: infinite;
   animation-duration: 1.5s;
   animation-delay: .5s;
}

.busy-logo #circleBorder {
   stroke-width: 3px;
   vector-effect: non-scaling-stroke;
}

.busy-logo .edges #horizontal,
.busy-logo .edges #vertical {
   opacity: 0;
   vector-effect: inherit;

   transform-origin: 50% 50%;
   transition-duration: .25s;
   transition-property: opacity;

   -webkit-transform-origin: 50% 50%;
   -webkit-transition-duration: .25s;
   -webkit-transition-property: opacity;
}
.busy-logo .edges #vertical { 
   transition-delay: .1s; 
   -webkit-transition-delay: .1s; 
}

.busy-logo.busy-fade.in .edges #horizontal { opacity: 1; }
.busy-logo.busy-fade.in .edges #vertical { opacity: .5; }

.busy-loading {
   height: 40px;
   opacity: 1;
   overflow: hidden;
   padding-left: 50px;
   padding-right: 10px;
   position: absolute;
   top: 50%;
   width: 100%;
}

.busy-loading .loading-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}


.busy-loading .busy-logo {
   height: 40px;
   opacity: 1;
   position: absolute;
   right: 0;
   top: 0;
   width: 40px;
}
.busy-loading.busy-fade.in .busy-logo {
   right: 100%;

   transition: right 1s ease-out 1s;
   -webkit-transition: right 1s ease-out 1s;
}
.busy-loading.busy-fade.out .busy-logo {
   opacity: 0;

   transition: right 1s ease-out, opacity .25s ease-out 1.25s;
   -webkit-transition: right 1s ease-out, opacity .25s ease-out 1.25s;
}


.busy-loading .overflow {
   height: 100%;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
}
.busy-loading .overflow.loading {
   margin-left: 10px;
   left: 100%;
}
.busy-loading.busy-fade .overflow.loading {
   transition-duration: 1s;
   transition-property: left;
   transition-timing-function: ease-out;

   -webkit-transition-duration: 1s;
   -webkit-transition-property: left;
   -webkit-transition-timing-function: ease-out;
}
.busy-loading.busy-fade.in .overflow.loading {
   left: 0px;

   transition-delay: 1s;
   -webkit-transition-delay: 1s;
}


.busy-loading .overflow.continue {
   cursor: pointer;
   opacity: 0;
   margin-right: 10px;
   right: 0px;

   transform: translate(-40px,0px);
   -webkit-transform: translate(-40px,0px);
}
.busy-loading.busy-fade .overflow.continue {
   transition-duration: 1s;
   transition-property: right;
   transition-timing-function: ease-out;

   -webkit-transition-duration: 1s;
   -webkit-transition-property: right;
   -webkit-transition-timing-function: ease-out;
}
.busy-loading.busy-fade.out .overflow.continue {
   opacity: 1;

   transition-duration: 1s, .25s;
   transition-property: right, opacity;
   transition-timing-function: ease-out, ease-in-out;
   
   -webkit-transition-duration: 1s, .25s;
   -webkit-transition-property: right, opacity;
   -webkit-transition-timing-function: ease-out, ease-in-out;
}
.busy-loading.busy-fade.in .overflow.continue {
   right: 100%;

   transition-delay: 1s;
   -webkit-transition-delay: 1s;
}


.busy-loading .overflow .text {
   height: 100%;
   font-size: 28px;
   line-height: 40px;
   position: absolute;
   text-align: center;
   top: 0;
   width: 100%;
}
.busy-loading.busy-fade .overflow .text {
   transition-duration: 1s;
   transition-timing-function: ease-out;

   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease-out;
}
.busy-loading.busy-fade.in .overflow .text {
   transition-delay: 1s;
   -webkit-transition-delay: 1s;
}

.busy-loading .overflow.loading .text {
   padding-right: 60px;
   right: 100%;
}
.busy-loading.busy-fade .overflow.loading .text {
   transition-property: right;
   -webkit-transition-property: right;
}
.busy-loading.busy-fade.in .overflow.loading .text { right: 0px; }

.busy-loading .overflow.continue .text {
   left: 0;
   padding-left: 60px;
}
.busy-loading.busy-fade .overflow.continue .text {
   transition-property: left;
   -webkit-transition-property: left;
}
.busy-loading.busy-fade.in .overflow.continue .text { left: 100%; }

.busy-loading.busy-fade .busy-logo .center {
   height: 40%;
   width: 40%;
}

.busy-loading.busy-fade .busy-logo .edges {
   animation-name: busy_logo_svg;
   animation-duration: 1.5s;
   animation-delay: 2s;
}
.busy-loading.busy-fade.in .busy-logo .edges { animation-iteration-count: infinite; }
.busy-loading.busy-fade.out .busy-logo .edges { animation-iteration-count: 1; }

.busy-loading.busy-fade .busy-logo .edges #horizontal { opacity: 1; }
.busy-loading.busy-fade .busy-logo .edges #vertical { opacity: .25; }

.busy-loading .role-busy-continue { pointer-events: all; }


/* ====================== *
 * ## Legend Component ##
 * ====================== */

.legend-component,
.legend-component .legend-item-group,
.legend-item .legend-item-color,
.legend-item .legend-item-label-container,
.legend-item-label-container .legend-item-label,
.legend-component .role-description,
.legend-component .role-legend-container,
.legend-component .role-title {
   width: 100%;
}

.legend-component,
.legend-component .legend-item-group,
.legend-item-group .legend-item,
.legend-item .legend-item-color,
.legend-item .legend-item-label-container,
.legend-item-label-container .legend-item-label,
:not(.legend-group-gradient) > .legend-item .legend-item-label,
.legend-component .role-description,
.legend-component .role-legend-container,
.legend-component .role-title {
   float: left;
   position: relative;
}

.legend-component .legend-item-group + .legend-item-group { margin-top: 10px; }

.legend-item:not(.legend-item-first) { padding-left: 1px; }

.legend-item .legend-item-color,
.legend-item .legend-item-label-container {
   height: 12px;
}

.legend-item .legend-item-label-container { margin-top: 4px; }

.legend-item .legend-item-label {
   font-size: 10px;
   line-height: 12px;
}

.legend-group-gradient > .legend-item .legend-item-label {
   top: 0;
   position: absolute;
}

.legend-group-gradient .legend-item .legend-item-label:not(.legend-label-first):not(.legend-label-last) {
   left: 0;
   text-align: center;

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

.legend-group-gradient .legend-item .legend-item-label.legend-label-first {
   left: 0;
   text-align: left;
}
.legend-group-gradient .legend-item .legend-item-label.legend-label-last {
   right: 0;
   text-align: right;
}

.legend-group-solid .legend-item .legend-item-label { text-align: right; }

/* Removed by RM to make map legend somewhat smaller.

.legend-component .role-description,
.legend-component .role-title {
   margin-bottom: 4px;
}

.legend-component .role-title {
   font-weight: bold;
   line-height: 20px;
}

.legend-component .role-description {
   font-size: 12px;
   line-height: 14px;
}
*/
.legend-component .role-title {
   line-height: 20px;
}


/* ======================= *
 * ## Noise Level Chart ##
 * ======================= */

.noise-level-chart .highcharts-xaxis-grid .highcharts-grid-line:first-child,
.noise-level-chart .highcharts-xaxis-grid .highcharts-grid-line:last-child {
   stroke: #ccd6eb;
}

/* =================== *
 * ## Flight panels ##
 * =================== */

.flight-item .padded-line {
   display: flex;
   white-space: nowrap;
   max-width: 210px;
}

.flight-item .flight-alt {
   padding-left: 3px;
}

.flight-item .flight-line {
   text-overflow: ellipsis;
   overflow: hidden;
}

/* =============== *
 * ## CPA-layer ##
 * =============== */

.casper-cpa-layer .role-line {
   left: 0;
   overflow: visible;
   position: absolute;
   stroke: #FF00FF;
   stroke-width: 1px;
   top: 0;
}



/* ===================== *
 * ## Meteo Component ##
 * ===================== */

.meteo-component .meteo-wind-speed-visual svg {
   height: 100%;
   left: 45%;
   position: absolute;
   top: 0;
   width: 100%;
}

.meteo-component .weather-vane {
   stroke-width: 2px;
   transform: rotate(45deg);
   transform-origin: 5% 10%;

   transition-timing-function: ease-in-out;

   -webkit-transform: rotate(45deg);
   -webkit-transform-origin: 5% 10%;

   -webkit-transition-timing-function: ease-in-out;
}

.meteo-component .weather-vane #rope { stroke-width: 1px; }

.meteo-visual-svg defs mask #cloudPlus { fill: #808080; }
.meteo-visual-svg #cloudPlus #inner { display: none; }

.meteo-wind-speed-visual[data-windspeed='1'] .weather-vane { 
   transition-duration: 2s;
   -webkit-transition-duration: 2s;
}
.meteo-wind-speed-visual[data-windspeed='1'] .weather-vane.on {
   transform: rotate(40deg);
   -webkit-transform: rotate(40deg);
}
.meteo-wind-speed-visual[data-windspeed='1'] .weather-vane.off {
   transform: rotate(36deg);
   -webkit-transform: rotate(36deg);
}

.meteo-wind-speed-visual[data-windspeed='2'] .weather-vane { 
   transition-duration: 1.5s;
   -webkit-transition-duration: 1.5s;
}
.meteo-wind-speed-visual[data-windspeed='2'] .weather-vane.on { 
   transform: rotate(22deg);
   -webkit-transform: rotate(22deg);
}
.meteo-wind-speed-visual[data-windspeed='2'] .weather-vane.off {
   transform: rotate(18deg);
   -webkit-transform: rotate(18deg);
}

.meteo-wind-speed-visual[data-windspeed='3'] .weather-vane { 
   transition-duration: 1s;
   -webkit-transition-duration: 1s;
}
.meteo-wind-speed-visual[data-windspeed='3'] .weather-vane.on {
   transform: rotate(1.5deg);
   -webkit-transform: rotate(1.5deg);
}
.meteo-wind-speed-visual[data-windspeed='3'] .weather-vane.off {
   transform: rotate(-1.5deg);
   -webkit-transform: rotate(-1.5deg);
}

.meteo-wind-speed-visual[data-windspeed='4'] .weather-vane { 
   transition-duration: .75s; 
   -webkit-transition-duration: .75s; 
}
.meteo-wind-speed-visual[data-windspeed='4'] .weather-vane.on { 
   transform: rotate(-19deg);
   -webkit-transform: rotate(-19deg);
}
.meteo-wind-speed-visual[data-windspeed='4'] .weather-vane.off { 
   transform: rotate(-21deg); 
   -webkit-transform: rotate(-21deg); 
}

.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane { 
   transition-duration: .5s; 
   -webkit-transition-duration: .5s; 
}
.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane.on { 
   transform: rotate(-39.5deg); 
   -webkit-transform: rotate(-39.5deg); 
}
.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane.off { 
   transform: rotate(-40.5deg); 
   -webkit-transform: rotate(-40.5deg); 
}


/* ===================== *
 * ## Popup Component ##
 * ===================== */

.popup-component {
   height: 100vh;
   left: 0;
   opacity: 1;
   pointer-events: all;
   position: absolute;
   top: 0;
   width: 100vw;
}

.popup-component.cInactiveToActive,
.popup-component.cActiveToInactive {
   transition-duration: .125s !important;
   -webkit-transition-duration: .125s !important;
}

.popup-component .role-blocker {
   background-color: rgba(0,0,0,.33);
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.popup-component .popup-container {
   left: 50%;
   position: absolute;
   top: 50%;
   width: 325px;

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

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

.popup-container .header,
.popup-container .footer,
.popup-container .content-container,
.popup-container .content-container .content-section,
.popup-container .guide-button-container,
.popup-container .location-button-container,
.popup-container .role-content,
.popup-container .role-buttons-container {
   float: left;
   position: relative;
   width: 100%;
}

.popup-container .guide-button-container {
   display: flex;
   justify-content: center;
}

.popup-container > .header { height: 30px; }
.popup-container > .footer {
   display: none;
   height: 50px;
   margin-top: 0 !important;
}

.popup-container > .header .role-title {
   height: 100%;
   font-size: 16px;
   line-height: 30px;
   position: absolute;
   text-align: center;
   width: 100%;
}

.popup-container > .footer .role-cancel {
   height: 30px;
   left: 50%;
   pointer-events: all;
   position: absolute;
   top: 50%;
   width: 30px;

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

.popup-container .guide-button-container .role-button,
.popup-container .location-button-container .role-button {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.popup-container .guide-button-container .gui-menu-button,
.popup-container .location-button-container .gui-menu-button {
   cursor: pointer;
   float: left;
   height: 40px;
   margin-bottom: 30px;
   margin-top: 10px;
   pointer-events: all;
   position: relative;
   width: 40px;
}

.popup-container .guide-button-container .gui-menu-button .label,
.popup-container .location-button-container .gui-menu-button .label {
   font-size: 12px;
   left: 50%;
   line-height: 12px;
   margin-top: 15px;
   position: absolute;
   text-transform: uppercase;
   top: 100%;

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

.popup-component.cancellable .popup-container .footer {
   display: flex;
   justify-content: center;
}
.popup-container .footer .role-cancel .icon { padding: 8px; }
.popup-container .role-button-containers.no-buttons { display: none; }


/* ====================== *
 * ## InfoGraphicLayer ##
 * ====================== */

.casper-info-layer .casper-layer-element,
.casper-layer-element .label-container { position: absolute; }

.casper-info-layer .casper-layer-element.highlight { z-index: 9999 !important; }

.casper-info-layer .role-icon_container,
.casper-label-layer .role-label_container {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.casper-layer-element .label-container {
   bottom: 100%;
   height: 100%;
   opacity: 0;
   width: 100%;

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

.casper-info-layer.show-label-all .casper-layer-element .label-container { opacity: 1 !important; }
.casper-info-layer.show-label-interactive .casper-layer-element.highlight .label-container,
.casper-info-layer.show-label-interactive .casper-layer-element.select .label-container { opacity: 1; }
.casper-info-layer.show-label-none .casper-layer-element .label-container { opacity: 0 !important; }

.casper-layer-element .label-container .label {
   border-style: solid;
   border-width: 1px;
   font-size: 10px;
   padding: 5px;
   position: absolute;
   text-align: center;
   white-space: nowrap;

   transform: translate(-50%,-10px);
   transition: bottom .25s;

   -webkit-transform: translate(-50%,-10px);
   -webkit-transition: bottom .25s;
}

.casper-layer-element .label-container .label:after,
.casper-layer-element .label-container .label:before {
   content: "";
   height: 8px;
   left: 50%;
   position: absolute;
   top: 100%;
   width: 8px;

   transform: translate(-50%, -50%) rotate(45deg);
   -webkit-transform: translate(-50%, -50%) rotate(45deg);
}

.casper-layer-element .label-container .label:after {
   border-style: solid;
   border-width: 0 1px 1px 0;
   z-index: 1;
}

.casper-layer-element .label-container .label:before {
   z-index: 0;
}


/* ============================== *
 * ## Casper Track Point Layer ##
 * ============================== */

.casper-track-points-layer .plot-container {
   height: 5px;
   width: 5px;
} 

.casper-track-points-layer .plot-icon-container {
   cursor: pointer;
   height: 100%;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 100%;

   transform-origin: top left;
   transition: transform .25s;

   -webkit-transform-origin: top left;
   -webkit-transition: transform .25s;
}

.casper-track-points-layer[data-showinvalid="false"] .map-icon-label-container[data-flag="MANUAL"] .map-icon-label,
.casper-track-points-layer[data-showinvalid="false"] .map-icon-label-container[data-flag="OUTLIER"] .map-icon-label,
.casper-track-points-layer[data-showinvalid="false"] .plot-container[data-flag="MANUAL"] .plot-icon-container,
.casper-track-points-layer[data-showinvalid="false"] .plot-container[data-flag="OUTLIER"] .plot-icon-container {
   display: none !important;
}

.casper-track-points-layer[data-showlabelsonly="true"] .plot-icon-container { display: none !important; }

.casper-track-points-layer .plot-icon-container .map-icon {
   border: 1px solid rgba(100,100,100,.75);
   border-radius: 50%;
   float: left;
   height: 100%;
   position: relative;
   width: 100%;

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


/* ================================================ *
 * ## Search Location Autocomplete List (Google) ##
 * ================================================ */

.search-location-autocomplete-list,
.search-location-autocomplete-container {
   float: left;
   position: relative;
   width: 100%;
}

.search-location-autocomplete-list { overflow: hidden; }

.search-location-autocomplete-container .pac-container {
   border-top: none;
   box-shadow: none;
   display: block !important;
   float: left;
   left: 0 !important;
   position: relative !important;
   top: 0 !important;
   width: 100% !important;
}
.search-location-autocomplete-container .pac-container:after,
.pac-container .pac-item .pac-icon {
   display: none !important;
}


/* ============== *
 * ## Checkbox ##
 * ============== */

.group-checkbox .role-label[pseudo-content]:after,
.radio-checkbox .role-label[pseudo-content]:after {
   content: " (" attr(pseudo-content) ")";
   left: 100%;
   padding-left: 5px;
   position: absolute;
   top: 0px;
}


/* ============================== *
 * ## Map Interaction Distance ##
 * ============================== */

.mi-distance-container .map-icon-label {
   bottom: 100%;
   left: 0;
}

.mi-distance-container .map-icon .icon {
   background-color: #FF00FF;
   border: 2px solid #000000;
   position: relative;
   height: 10px;
   width: 10px;

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

.mi-distance-container .map-icon-label { opacity: 1; }
.mi-distance-container .map-icon-label span { text-transform: uppercase; }

.mi-distance-container,
.mi-distance-container .map-icon { pointer-events: none; }


/* ==================== *
 * ## List Component ##
 * ==================== */

.list-component {
   display: table;
   width: 100%;
}
.list-component .list-row {
   display: table-row;
   user-select: none;
}
.list-component .list-cell {
   display: table-cell;
   overflow: hidden;

   transition-property: width, max-width;
   transition-duration: .5s;
}

.list-component .list-cell.clickable { pointer-events: all }
.list-component .list-cell.clickable > * { pointer-events: none; }

.list-component .role-list-header {
   display: table-header-group;
   opacity: 0;
}

.list-component .role-list-header-visual {
   position: relative;
   float: left;
}

.list-component .role-list-container { display: table-row-group; }
.list-component .role-list-footer { display: table-footer-group; }
.list-component .role-list-scroller {
   float: left;
   overflow-y: auto;
   position: relative;
   width: 100%;
}

.list-component .role-list-header .list-cell { line-height: 0px; }
.list-component .role-list-header .list-cell > div {
   float: left;
   position: relative;
}

.list-component .list-cell-closed {
   padding: 0 !important;
   max-width: 0 !important;
   width: 0 !important;
}


/* ========================== *
 * ## Pagination Component ##
 * ========================== */

.pagination-component {
   display: flex;
   flex-direction: row;
   user-select: none;
}

.pagination-component.no-values,
.pagination-component.single-value {
   display: none !important;
}

.pagination-component .display,
.pagination-component .role-next,
.pagination-component .role-prev {
   height: 100%;
}

.pagination-component .role-next .icon,
.pagination-component .role-prev .icon {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}


/* ============================ *
 * ## RangeSelectorComponent ##
 * ============================ */

.range-selector-component.direction-horizontal {
   flex-direction: row;
}

.range-selector-component.direction-vertical {
   flex-direction: column;
}


/* ===================== *
 * ## Locations Layer ##
 * ===================== */

.locations-layer.interactive_active {
   cursor: crosshair;
   pointer-events: all;
   z-index: 9999;
}

.locations-layer .location-container .map-icon-container .icon,
.locations-layer .location-container .map-icon-container .range,
.locations-layer .location-container .map-icon-container .range:after {
   border-radius: 50%;
   left: 0;
   position: absolute;
   top: 0;
}

.locations-layer .location-container .map-icon-container .icon,
.locations-layer .location-container .map-icon-container .range {
   transform: translate(-50%,-50%);
}

.locations-layer .location-container .map-icon-container .icon,
.locations-layer .location-container .map-icon-container .range:after {
   border-style: solid;
   border-width: 1px;
}

.locations-layer .location-container .map-icon-container .icon {
   height: 10px;
   width: 10px;
   z-index: 1;

   transform-origin: top left;
}

.locations-layer .location-container .map-icon-container .ranges {
   pointer-events: none;
   position: relative;
   z-index: 0;
}

.locations-layer .location-container .map-icon-container .range { opacity: .5; }
.locations-layer .location-container .map-icon-container .range:after { 
   content: "";
   height: 100%;
   width: 100%
}


/* ====================== *
 * ## Location Overlay ##
 * ====================== */

.location-label-container {
   position: absolute;
   min-width: 20px;

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

.location-label {
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   border-style: solid;
   border-radius: 4px;
   border-width: 1px;
   left: 0px;
   padding: 0.4em;
   position: absolute;
   top: -6px;
   z-index: 9999;

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

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

.location-label .tip:after {
   border-style: solid;
   border-width: 1px;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   content: "";
   left: 0px;
   height: 12px;
   position: absolute;
   top: -6px;
   width: 12px;
   
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.f3-rendered .location-label {
   width: calc(20px + 0.8em);
   height: calc(20px + 0.8em);
}

.location-label .svg-icon {
   height: 20px;
   width: 20px;
}


/* ====================== *
 * ## Airspace Overlay ##
 * ====================== */

.airspace-layer .airspace-icon-container .map-icon-container {
   height: 18px;
   width: 18px;
}

.airspace-layer .airspace-icon-container .map-icon-container #RP {
   transform: scale(0.8);
   stroke-width: 6px;
}

.airspace-layer .airspace-icon-container .map-icon-container .map-icon {
   height: 100%;
   overflow: visible;
   width: 100%;
}

.airspace-layer .airspace-icon-container .map-icon-label-container .map-icon-label {
   left: calc(100% + 5px);
   top: -11px;
}

.airspace-layer #DME #outer_rect,
.airspace-layer #EH #inner,
.airspace-layer #EH #outer,
.airspace-layer #flyover #ring,
.airspace-layer #LC #outer,
.airspace-layer #RP,
.airspace-layer #VOR #outer,
.airspace-layer #VORDME #outer_hex,
.airspace-layer #VORDME #outer_rect,
.airspace-layer #VORTAC #outer {
   stroke-width: 5px;
}


/* ================ *
 * ## Grid Layer ##
 * ================ */

.casper-grid-layer .role-canvas {
   left: 50%;
   position: absolute;
   top: 50%;

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

.casper-grid-layer .role-label-container {
   height: 100%;
   left: 0;
   position: absolute;
   width: 100%;
   top: 0;

   z-index: 1;
}

.casper-grid-layer .role-label-container .grid-label {
   font-size: 14px;
   padding-left: 5px;
   padding-top: 5px;
   position: absolute;
   white-space: nowrap;
}

.casper-grid-layer .role-label-container .grid-label.label-lat { top: 0; }
.casper-grid-layer .role-label-container .grid-label.label-lng { left: 0; }

/* =============== *
 * ## Language  ##
 * =============== */

span[lang] { display: none; }
html[lang='da_DK'] span[lang='da_DK'] { display: inline-block; }
html[lang='da_DK'] span[lang='da_DK'] ~ span:not([lang]) { display: none; }
html[lang='en_GB'] span[lang='en_GB'] { display: inline-block; }
html[lang='en_GB'] span[lang='en_GB'] ~ span:not([lang]) { display: none; }
html[lang='en_NZ'] span[lang='en_NZ'] { display: inline-block; }
html[lang='en_NZ'] span[lang='en_NZ'] ~ span:not([lang]) { display: none; }
html[lang='en_US'] span[lang='en_US'] { display: inline-block; }
html[lang='en_US'] span[lang='en_US'] ~ span:not([lang]) { display: none; }
html[lang='fr_CH'] span[lang='fr_CH'] { display: inline-block; }
html[lang='fr_CH'] span[lang='fr_CH'] ~ span:not([lang]) { display: none; }
html[lang='fr_FR'] span[lang='fr_FR'] { display: inline-block; }
html[lang='fr_FR'] span[lang='fr_FR'] ~ span:not([lang]) { display: none; }
html[lang='hu_HU'] span[lang='hu_HU'] { display: inline-block; }
html[lang='hu_HU'] span[lang='hu_HU'] ~ span:not([lang]) { display: none; }
html[lang='nl_BE'] span[lang='nl_BE'] { display: inline-block; }
html[lang='nl_BE'] span[lang='nl_BE'] ~ span:not([lang]) { display: none; }
html[lang='nl_NL'] span[lang='nl_NL'] { display: inline-block; }
html[lang='nl_NL'] span[lang='nl_NL'] ~ span:not([lang]) { display: none; }
html[lang='zh_CN'] span[lang='zh_CN'] { display: inline-block; }
html[lang='zh_CN'] span[lang='zh_CN'] ~ span:not([lang]) { display: none; }