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

/* ==================== *
 * ## 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; } 

._rc {
   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);
   -webkit-transition: height 0.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;
 }


/* ====================== *
 * ## Casper Component ##
 * ====================== */

.casper-component.cInactiveToActive,
.casper-component.cActiveToInactive {
   transition-duration: .5s !important;
   transition-timing-function: ease-in-out !important;
   transition-property: opacity;
}

.casper-component.cActiveBefore {
   display: block;
   opacity: 0;
}
.casper-component.cActiveTransition { opacity: 1; }
.casper-component.cActive { opacity: 1; }

.casper-component.cInactiveBefore {
   display: block;
   opacity: 1;
}
.casper-component.cInactiveTransition { opacity: 0; }
.casper-component.cInactive { display: none; }

/*
 * 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;
   -webkit-transform: translateZ(0);
   //-webkit-font-smoothing: antialiased;
}

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

/*
 * Misc
 */

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

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

/*
 * 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;
}

/**
 * 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;
}
.period-panel .datetime-picker[data-role='picker'].closed {
   opacity: 0;
   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;
}
input[data-list] + .input-list[data-input].open {
   transition: height .25s, opacity .05s;
}

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

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

.hidden { display: none !important; }
.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%);
}
.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 Layers ##
 * =================== */

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

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

/* ================ *
 * ## Icon Layer ##
 * ================ */

.map-icon-container {
   position: absolute;
   transform: translate(-50%, -50%);
}

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

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

.map-icon-label {
   background-color: #FFF;
   border: 1px solid #C6C6C6;
   border-radius: 5px;
   bottom: 0%;
   box-shadow: 0px 3px 3px rgba(0,0,0,.2);
   /* color: #000; */
   font-size: 80%;
   left: 50%;
   min-width: 50px;
   opacity: 0;
   padding: 5px;
   position: absolute;
   text-align: center;
   transform: translate(-50%, -30px);
   transform-origin: center bottom;
   transition: bottom .5s, opacity .25s, transform .5s;
   transition-timing-function: ease-in-out;
   user-select: none;
   width: auto;
   z-index: 2;

   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
}

.map-icon-label:before {
   bottom: -7px;
   box-shadow: -3px 3px 3px rgba(0,0,0,.2);
   content: "";
   height: 12px;
   left: 50%;
   position: absolute;
   transform-origin: center center;
   transform: translate(-50%,0) rotate(-45deg);
   width: 12px;
}

.map-icon-label:after {
   border-style: solid;
   border-width: 8px 8px 0 8px;
   border-color: rgba(255,255,255,1) transparent transparent transparent;
   bottom: -8px;
   content: "";
   height: 0;
   left: 50%;
   position: absolute;
   width: 0;
   transform: translate(-50%,0);
}

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

.map-icon-container.highlight .map-icon-label,
.map-icon-container.selected .map-icon-label {
   opacity: 1;
   transform: translate(-50%, -15px);
}

.map-icon,
.map-icon-hitbox {
   cursor: pointer;
   pointer-events: all;
}

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

.map-icon.map-icon-clickable,
.map-icon.map-icon-hovertable {
   cursor: pointer;
}


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

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

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

   transform-origin: 30px 80px;

   height: 90px;
   width: 60px;
}

.nmt-icon-label {
   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);
}


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

.air-space-icon-container {
   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-track-layer .track-image {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;

   transition: opacity .25s;
}

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

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

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

.casper-track-layer .busy-logo #circleBorder {
   stroke-width: 7px;
}

.casper-track-layer.component-busy .busy-logo { opacity: 1; }



/* ===================== *
 * ## 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 {
   opacity: 1;
   transition: opacity .3s;
   z-index: 0;
}
.casper-chart-component .role-HC,
.casper-chart-component .chart-title.no-title + .role-HC { height: 200px; }

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

.casper-chart-component .chart-no-data {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}
.casper-chart-component .chart-no-data {
   text-align: center;
   z-index: 2;
}
.casper-chart-component .role-busy {
   height: 50px;
   width: 50px;
}

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


/* ======================== *
 * ## DropDown Component ##
 * ======================== */
/*
.dropdown-component {
   float: left;
}

.dropdown-component .dropdown-button {
   float: left;
   position: relative;
}

.dropdown-button .button-visual,
.dropdown-button .button-label-container {
   display: inline-block;
   position: relative;
}

.dropdown-button.align-left .button-visual,
.dropdown-button.align-left .button-label-container {
   float: left;
}

.dropdown-button.align-right .button-visual,
.dropdown-button.align-right .button-label-container {
   float: right;
}

.dropdown-component.list-closed .option-list { opacity: 0; }
.dropdown-component.list-open .option-list { opacity: 1; }
.dropdown-component.list-open .option-list-item { pointer-events: all; }

.dropdown-component .option-list {
   pointer-events: none;
   position: absolute;
}

.option-list.position-bottom,
.option-list.position-top {
   //width: 100%;
}

.option-list.position-left,
.option-list.position-right {
   height: 100%;
}

.option-list.align-left.position-bottom,
.option-list.align-left.position-top { 
   left: 0;
}

.option-list.align-right.position-bottom,
.option-list.align-right.position-top {
   right: 0;
}

.option-list.position-bottom {
   margin-top: 10px;
   top: 100%;
}

.option-list.position-left {
   margin-right: 10px;
   right: 100%;
   top: 0;
}

.option-list.position-right {
   left: 100%;
   margin-left: 10px;
   top: 0;
}

.option-list.position-top {
   bottom: 100%;
   left: 0px;
   margin-bottom: 10px;
}

.option-list .option-list-item {position: relative; }
.option-list.align-left .option-list-item { float: left; }
.option-list.align-right .option-list-item { float: right; }

.option-list.position-bottom .option-list-item,
.option-list.position-top .option-list-item {
   clear: both;
}

.option-list.position-bottom .option-list-item:not(:first-child) { margin-top: 15px; }
.option-list.position-top .option-list-item:not(:last-child) { margin-bottom: 15px; }

.option-list.position-left .option-list-item { float: right; }

.option-list-item .gui-menu-button,
.option-list-item .gui-menu-label {
   pointer-events: none
}

.option-list-item .gui-menu-label {
   position: relative;
   white-space: nowrap;
}
*/

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

.dropdown-component .display-wrapper {
   height: 30px;
   display: flex;
   flex-direction: row;
   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%;
   padding: 5px;
   width: 30px;
}

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

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

.dropdown-component.list-open .list-toggle .icon { 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 .role-list .list-container,
.dropdown-component .role-listitems {
   float: left;
   min-width: 100%;
   position: relative;
}

.dropdown-component .role-list .list-container {
   overflow: hidden;
   transition: height .33s;
   z-index: 1;
}

.dropdown-component .role-list .tip-container {
   height: 15px;
   overflow: hidden;
   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;
}

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


.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;
   text-transform: capitalize;
   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 -> 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%;
   transform: translate(-50%,-50%);
   //transition: opacity .3s;
   z-index: 9999;
}

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


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

@keyframes busy_logo_svg {
   0% { transform: rotate(0deg); }
   100% { 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%;
   transform: translate(-50%, -50%);
   transition: height, width;
   transition-duration: .1s;
   transition-delay: .2s;
   width: 0px;
}

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

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

.busy-logo.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;
   transition-duration: .25s;
   transition-property: opacity;
   transform-origin: 50% 50%;
   vector-effect: inherit;
}
.busy-logo .edges #vertical { transition-delay: .1s; }

.busy-logo.fade.in .edges #horizontal { opacity: 1; }
.busy-logo.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.fade.in .busy-logo {
   right: 100%;
   transition: right 1s ease-out 1s;
}
.busy-loading.fade.out .busy-logo {
   opacity: 0;
   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.fade .overflow.loading {
   transition-duration: 1s;
   transition-property: left;
   transition-timing-function: ease-out;
}
.busy-loading.fade.in .overflow.loading {
   left: 0px;
   transition-delay: 1s;
}


.busy-loading .overflow.continue {
   cursor: pointer;
   opacity: 0;
   margin-right: 10px;
   right: 0px;
   transform: translate(-40px,0px);
}
.busy-loading.fade .overflow.continue {
   transition-duration: 1s;
   transition-property: right;
   transition-timing-function: ease-out;
}
.busy-loading.fade.out .overflow.continue {
   opacity: 1;
   transition-duration: 1s, .25s;
   transition-property: right, opacity;
   transition-timing-function: ease-out, ease-in-out;
}
.busy-loading.fade.in .overflow.continue {
   right: 100%;
   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.fade .overflow .text {
   transition-duration: 1s;
   transition-timing-function: ease-out;
}
.busy-loading.fade.in .overflow .text { transition-delay: 1s; }

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

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

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

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

.busy-loading.fade .busy-logo .edges #horizontal { opacity: 1; }
.busy-loading.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-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-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);
}

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

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


/* ======================= *
 * ## 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;
}


/* =============== *
 * ## 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;
}

.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; }
.meteo-wind-speed-visual[data-windspeed='1'] .weather-vane.on { transform: rotate(40deg); }
.meteo-wind-speed-visual[data-windspeed='1'] .weather-vane.off { transform: rotate(36deg); }

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

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

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

.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane { transition-duration: .5s; }
.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane.on { transform: rotate(-39.5deg); }
.meteo-wind-speed-visual[data-windspeed='5'] .weather-vane.off { 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;
}

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

.popup-component .popup-container {
   background-color: #FFF;
   //border-radius: 0 0 5px 5px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 325px;

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

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

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

.popup-component.cancellable .popup-container .footer { display: block; }
.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-layer-element .label-container {
   bottom: 100%;
   height: 100%;
   opacity: 0;
   width: 100%;

   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;
   transform: translate(-50%,-10px);
   transition: bottom .25s;
   white-space: nowrap;
}

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

.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: 20px;
   width: 20px;
} 

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

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

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

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