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

.noise-chart-component {
   clear: both;
   float: left;
   width: 100%;
}
.noise-chart-component > .chart-grid {
   height: 150px;
   width: 100%;
}


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



/* =================== *
 * ## Color palette ##
 * =================== */

[data-palette="airline"] {
   display: none;
}

[data-palette="noiselevel"] {
   border-spacing: 0;
}

.casper-palette-label.min,
.casper-palette-label.max {
   float: left;
   margin-top: 4px;
   width: 50%;
}
.casper-palette.gradient .casper-palette-label.min {
   text-align: left;
}
.casper-palette.gradient .casper-palette-label.max {
   text-align: right;
}

.casper-palette-label.max:after {
   content: " dB(A)";
}

[data-palette="noiselevel"] .casper-palette:after {
  content: "";
  clear: both;
  display: table;
}

[data-palette="noiselevel"] .casper-palette-item {
   margin-right: 0;
   float: left;
}

.casper-palette-swatch {
   margin-top: 4px;
}

[data-palette="noiselevel"] .casper-palette-swatch {
   border: none;
   height: 10px;
   margin-top: 6px;
}


/* ======================= *
 * ## Display Component ##
 * ======================= */

.display-component { padding-top: 50px; }


/* =========================== *
 * ## Flighttracking Header ##
 * =========================== */

.flighttracking-header { height: 50px; }
.flighttracking-menu.gui-menu { padding-top: 50px; }

.flighttracking-header .header-container { padding-right: 170px; }
.flighttracking-header .logo-container.client-logo { width: 170px; }

.flighttracking-header .logo-container.client-logo .logo {
   height: 100%;
   width: 100%
}

.flighttracking-header .logo-container.client-logo .logo .icon { height: 100%; }
.flighttracking-header .overflow-container { top: 50px; }
.flighttracking-header .overflow-container .border-container { height: 0; }
.flighttracking-header .overflow-container .gradient-container { border: 0; }


/* =========================== *
 * ## Flight Info Component ##
 * =========================== */

.flight-info-component.departure .flight-info-row.destination,
.flight-info-component.destination .flight-info-row.departure {
   display: none;
}


/* =========== *
 * ## Guide ## 
 * =========== */
 
.guide-text .menu-list-bg > .gradient-container { opacity: 1; }


/* ===================== *
 * ## Hover Label (Menu)
 * ===================== */

.main-menu .role-hover-label .background-container .gradient.dark { opacity: 0; }


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

.popup-container .header .role-title { border-bottom: 2px solid rgba(107,10,93,.85); }


/* ========= *
 * ## Map ##
* ========== */

.show-labels .casper-aircraft-layer .casper-vehicle:after { width: 65px; }
.show-labels .casper-aircraft-layer .casper-vehicle[data-rocd="ASC"]:after { content: attr(data-callsign) " \25B2"; }
.show-labels .casper-aircraft-layer .casper-vehicle[data-rocd="DESC"]:after { content: attr(data-callsign) " \25BC"; }


/* =================== *
 * ## ListComponent ##
 * =================== */

.flight-filter-list .list-cell.center-on-flight {
   cursor: pointer;
   width: 20px;
}
.flight-filter-list .list-cell.center-on-flight .icon {
   pointer-events: none;
   width: 10px;
}


/* ==================== *
 * ## Location Layer ##
 * ==================== */

.locations-layer .location-container .map-icon-container .range {
   background-color: transparent;
}

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


/* ================== *
 * ## Location Tab ##
 * ================== */

.location-interactive-button {
   height: 44px;
   left: 50%;
   width: 44px;

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

.location-tab .gui-setting.group-checkbox {
   height: 30px;
   margin-top: 0px;
   width: 100%;
}

.location-tab .gui-setting.group-checkbox .label { z-index: 0; }
.location-tab .gui-setting.group-checkbox .button {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
}


/* ======================= *
 * ## TrackPoints Layer ##
 * ======================= */

.plot-container .map-icon-label { transform: translate(-50%, -15px); }