html {
   /* http://stackoverflow.com/a/24376696 */
   width: 100%;
   height: 100%;
   position: fixed;
}

body {
   height: 100%;
}

/*@import url(//fonts.googleapis.com/css?family=Maven+Pro:400,700);*/
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,700);
@import url(//fonts.googleapis.com/css?family=Roboto+Mono:300,400,700);

body, td, input, select {
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: 300;
   letter-spacing: .25px;
}

/* Fix to move the Google Maps logo to a visible location */
#map div div a[target='_blank'] div {
   float: left;
   margin-left: 60px;
   position: relative;
}


/* ================ *
 * ## Animations ##
 * ================ */

@keyframes fade_in {
   0%    {
      opacity: 0;

      transform: scale(.8) translate(-50%,-50%);
      -webkit-transform: scale(.8) translate(-50%,-50%);
   }
   75% {
      opacity: 1;

      transform: scale(1.01) translate(-50%,-50%);
      -webkit-transform: scale(1.01) translate(-50%,-50%);
   }
   100%  {
      opacity: 1;

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

@keyframes fade_out {
   0%    {
      opacity: 1;

      transform: scale(1) translate(-50%,-50%);
      -webkit-transform: scale(1) translate(-50%,-50%);
   }
   25% {
      opacity: 1;
   }
   100%  {
      opacity: 0;

      transform: scale(.8) translate(-50%,-59%);
      -webkit-transform: scale(.8) translate(-50%,-59%);
   }
}


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

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

   -webkit-transition-duration: .5s !important;
   -webkit-transition-timing-function: ease-in-out !important;
   -webkit-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; }


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

.casper-chart-component .role-HC,
.casper-chart-component .chart-title.no-title + .role-HC { 
   height: 190px; 
}


/* =================== *
 * ## circle border ##
 * =================== */

.circle-border { 
   overflow: visible;
   pointer-events: none
}
.circle-border #circleBorder {
   vector-effect: non-scaling-stroke;
}
.circle-border #circleBorder #horizontal,#circleBorder #horizontal #left, #circleBorder #horizontal #right,
.circle-border #circleBorder #vertical, #circleBorder #vertical #top, #circleBorder #vertical #bottom {
   vector-effect: inherit;
}

.circle-border #circleBorder #horizontal { opacity: .75; }
.circle-border #circleBorder #vertical { opacity: .25; }


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

.cpa-display-component { pointer-events: none; }
.cpa-display-component .info-table .info-cell { line-height: 16px; }

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

/* ======================== *
 * ## DropDown Component ##
 * ======================== */

.dropdown-component {
   float: left;
   pointer-events: none;
}

.dropdown-component .dropdown-button {
   display: flex;
   position: relative;
}

.dropdown-component .dropdown-button.align-left {
   flex-direction: row;
   margin-left: 5px;
}
.dropdown-component .dropdown-button.align-right {
   flex-direction: row-reverse;
   margin-right: 5px;
}

.dropdown-component .dropdown-button .button-visual {
   pointer-events: all;
   position: relative;
   transition: height .25s, margin .25s, width .25s;
   -webkit-transition: height .25s, margin .25s, width .25s;
}

.dropdown-component.list-closed .dropdown-button .button-visual {
   height: 40px;
   margin: 0px;
   width: 40px;
}
.dropdown-component.list-open .dropdown-button .button-visual {
   height: 30px;
   margin: 5px;
   width: 30px;
}

/* ## Button Label Container ## */
.dropdown-button .button-label-container {
   line-height: 40px;
   opacity: 1;
}
.list-closed .dropdown-button .button-label-container {
   cursor: pointer;
   pointer-events: all;
}
.list-open .dropdown-button .button-label-container {
   opacity: 0;
   pointer-events: none;
}

.dropdown-button.align-left .button-label-container {
   padding-left: 10px;

   transition: padding-left .5s, opacity .25s;
   -webkit-transition: padding-left .5s, opacity .25s;
}
.list-open .dropdown-button.align-left .button-label-container { padding-left: 0px; }

.dropdown-button.align-right .button-label-container {
   padding-right: 10px;

   transition: padding-right .5s, opacity .25s;
   -webkit-transition: padding-right .5s, opacity .25s;
}
.list-open .dropdown-button.align-right .button-label-container { padding-right: 0px; }


/* ## Option List ## */
.dropdown-component .option-list {
   pointer-events: none;
   position: absolute;
}

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


.dropdown-component .option-list.align-left { padding-left: 5px; }
.dropdown-component .option-list.align-right { padding-right: 5px; }


/* ## Option LIst -> Option List Item ## */
.dropdown-component .option-list .option-list-item {
   display: flex;
   position: relative;
}
.dropdown-component .option-list .option-list-item.align-left { flex-direction: row; }
.dropdown-component .option-list .option-list-item.align-right { flex-direction: row-reverse }

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

.option-list.position-bottom .option-list-item {
   transition: margin-top .25s, opacity .25s;
   -webkit-transition: margin-top .25s, opacity .25s;
}
.option-list.position-bottom .option-list-item:nth-child(2) {
   transition-delay: .1s;
   -webkit-transition-delay: .1s;
}
.option-list.position-bottom .option-list-item:nth-child(3) {
   transition-delay: .2s;
   -webkit-transition-delay: .2s;
}

.dropdown-component.list-closed .option-list.position-bottom .option-list-item:not(:first-child) { margin-top: 45px; }
.dropdown-component.list-closed .option-list.position-bottom .option-list-item:first-child { margin-top: 30px; }

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

.option-list.position-top .option-list-item {
   transition: margin-bottom .25s, opacity .25s;
   -webkit-transition: margin-bottom .25s, opacity .25s;
}
.option-list.position-top .option-list-item:nth-child(2) {
   transition-delay: .1s;
   -webkit-transition-delay: .1s;
}
.option-list.position-top .option-list-item:nth-child(1) {
   transition-delay: .2s;
   -webkit-transition-delay: .2s;
}

.dropdown-component.list-closed .option-list.position-top .option-list-item:not(:last-child) { margin-bottom: 45px; }
.dropdown-component.list-closed .option-list.position-top .option-list-item:last-child { margin-bottom: 30px; }

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


/* ## Option List Item -> GUi Menu Button ## */
.option-list-item .gui-menu-button {
   height: 40px;
   pointer-events: all;
   position: absolute;
   top: 0px;
   width: 40px;
   z-index: 1;
}
.option-list-item .gui-menu-button,
.option-list-item .gui-menu-button.inactive {
   cursor: pointer;
}

.option-list.align-left .option-list-item .gui-menu-button { left: 0px; }
.option-list.align-right .option-list-item .gui-menu-button { right: 0px; }


.option-list-item .gui-menu-label {
   border: 1px solid rgba(111,111,111,.25);
   border-radius: 20px;
   height: 40px;
   line-height: 38px;
   pointer-events: none;
   z-index: 0;
}
.list-open .option-list-item .gui-menu-label {
   cursor: pointer;
   pointer-events: all;
}

.option-list-item.align-left .gui-menu-label {
   float: left;
   margin-left: 20px;
   padding-left: 25px;
   padding-right: 10px;
}

.option-list-item.align-right .gui-menu-label {
   float: right;
   margin-right: 20px;
   padding-left: 10px;
   padding-right: 25px;
}

/* ## Display Container ## */
.dropdown-component .display-wrapper .display-container {
   background-color: rgba(100,100,100,.1);
   border-color: rgba(100,100,100,.1);
   border-radius: 15px;
   border-style: solid;
   border-width: 1px;
   float: left;
   margin-right: 10px;
   padding-left: 10px;
   padding-right: 10px;
   width: 100%;

   transition-delay: .15s;
   transition-duration: .15s, .15s;
   transition-property: background-color, border-radius;

   -webkit-transition-delay: .15s;
   -webkit-transition-duration: .15s, .15s;
   -webkit-transition-property: background-color, border-radius;
}

.dropdown-component.list-open .display-wrapper .display-container {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
}

/* ## List Toggle ## */
.dropdown-component .display-wrapper .list-toggle { padding: 0; }
.dropdown-component .display-wrapper .list-toggle .gui-menu-button {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.dropdown-component .display-wrapper .list-toggle .gui-menu-button .icon {
   padding: 7px;
   opacity: .9;
   stroke-width: 5px;
}

.dropdown-component .role-list {
   margin-top: 5px;
   padding-right: 40px;
}

.dropdown-component .role-list .list-container {
   transition-duration: .15s;
   transition-property: height;

   -webkit-transition-duration: .15s;
   -webkit-transition-property: height;
}
.dropdown-component.list-open .role-list .list-container { 
   transition-delay: .3s;
   -webkit-transition-delay: .3s;
}

.dropdown-component .role-listitems {
   background-color: rgba(100,100,100,.1);
   border-color: rgba(100,100,100,.1);
   border-bottom-left-radius: 15px;
   border-style: solid;
   border-width: 0 1px 1px 1px;
   max-height: 125px;
   overflow: auto;
}

.dropdown-component .role-listitems .list-item {
   border-color: rgba(100,100,100,.1);
   border-style: solid;
   border-width: 1px 0 0 0;
}


.dropdown-component .role-listitems .list-item[data-value] {
   font-size: 12px;
   line-height: 24px;
}

/* =================================== *
 * ## Flighttracking Date Time Menu ##
 * =================================== */

.flighttracking-date-time-menu.section-menu { bottom: 10px; }
.flighttracking-date-time-menu.section-menu .menu-button {
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
}

.flighttracking-date-time-menu .groups-container {
   height: 40px;
   max-width: 300px;
   width: 70vw;

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

.flighttracking-date-time-menu .groups-container .group-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.flighttracking-date-time-menu .group-container .menu-button {
   height: 40px;
   position: absolute;
   width: 40px;
}
.flighttracking-date-time-menu .group-container .menu-button.group-index-0 { left: 0; }
.flighttracking-date-time-menu .group-container .menu-button.group-index-1 { left: 33.33%; }
.flighttracking-date-time-menu .group-container .menu-button.group-index-2 { left: 66.67%; }
.flighttracking-date-time-menu .group-container .menu-button.group-index-3 { left: 100%; }
.flighttracking-date-time-menu .group-container .menu-button .icon-container .icon { padding: 10px; }

.flighttracking-date-time-menu .menu-button .label-container {
   bottom: 100%;
   height: 16px;
   left: 50%;
   margin-bottom: 10px;
   padding: 0;
   position: absolute;
   width: auto;
}

.flighttracking-date-time-menu .menu-button .label-container .label {
   float: left;
   font-size: 12px;
   height: 100%;
   line-height: 16px;
   text-align: center;
   text-transform: uppercase;
   position: relative;
   white-space: nowrap;

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


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

.flight-info-component .summary-photo,
.flight-info-component .details-photo,
.flight-info-component .airline-logo {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
 }

.flight-info-component .airline-logo { height: 100px; }
.flight-info-component .airline-logo .role-photo-img {
   left: 50%;
   max-height: 100%;
   max-width: 100%;
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
}

.flight-info-component .photo-component .role-photo-creditation {
   left: 0;
   margin-top: 5px;
   position: absolute;
   top: 100%;
   width: 100%;
}


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

.flighttracking-header {
   float: left;
   height: 52px;
   pointer-events: all;
   position: relative;
   width: 100%;
}

.flighttracking-header .circle-border {
   height: 100%;
   left: 0;
   padding: 1px;
   position: absolute;
   stroke-width: 2px;
   top: 0;
   width: 100%;
}

.flighttracking-header .header-container {
   height: 100%;
   left: 0;
   padding-right: 54px;
   position: absolute;
   top: 0;
   width: 100%;
}

.flighttracking-header .overflow-container {
   position: absolute;
   top: 52px;              /*.flighttracking-header:height*/
   z-index: 2;
}

.flighttracking-header .overflow-container.closed {
   height: 0px;
   width: 0px;
}

.flighttracking-header .background-container,
.flighttracking-header .overflow-container .gradient-container {
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
}

.flighttracking-header .overflow-container .gradient-container {
   border-radius: 0 0 20px 20px;
   border-width: 0 2px 2px 2px;
   border-style: solid;
}

.flighttracking-header .background-container { 
   opacity: .9;
   z-index: 0;
}

.flighttracking-header .background-container .gradient,
.flighttracking-header .background-container .visual {
   height: 100vh;
   position: absolute;
   width: 100vw;
}

.flighttracking-header .header-container .gradient,
.flighttracking-header .header-container .visual {
   left: 0;
   top: 0;
}

.flighttracking-header .overflow-container .gradient,
.flighttracking-header .overflow-container .visual {
   top: -52px;             /*Negative .flighttracking-header:height*/
}

.flighttracking-header .background-container .gradient { z-index: 0; }
.flighttracking-header .background-container .visual { z-index: 2; }

.flighttracking-header .background-container .visual #shapes { opacity: .03; }
.flighttracking-header .background-container .visual #lines {
   opacity: .06;
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .flighttracking-header .background-container .visual #lines,
.br-ie .flighttracking-header .background-container .visual #lines { stroke-width: 0px; }

.flighttracking-header .background-container .visual #lines > path { vector-effect: inherit; }

.flighttracking-header .component-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.flighttracking-header .component-container .control-container {
   display: flex;
   flex-direction: row;
   height: 32px;
   left: 100%;
   position: absolute;
   top: 50%;

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

.flighttracking-header .control-button {
   cursor: pointer;
   float: left;
   height: 100%;
   margin-left: 10px;
   position: relative;
   width: 32px;
}
.flighttracking-header .control-button.role-speed-button { margin-left: 20px; }
.flighttracking-header .control-button:first-child { margin-left: 0; }

.flighttracking-header .control-button > svg {
   height: 100%;
   width: 100%;
}

.flighttracking-header .fill-container {
   float: left;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 1;
}
.flighttracking-header .fill-container > .component-container {
   left: 50%;
   width: 300px;

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

.flighttracking-header .overflow-container .border-container {
   height: 2px;
   left: 0;
   position: absolute;
   top: -2px;
   width: 100%;
   z-index: 2;
}

.flighttracking-header .overflow-container .border-container .border {
   height: 100%;
   opacity: .9;
   position: absolute;
   top: 0;
   width: 100vw;
}
.flighttracking-header .overflow-container .border-container .border.left {
   left: 2px;

   transform: translate(-100%,0);
   -webkit-transform: translate(-100%,0);
}
.flighttracking-header .overflow-container .border-container .border.right {
   left: 100%;

   transform: translate(-2px, 0);
   -webkit-transform: translate(-2px, 0);
}

.flighttracking-header .overflow-container .component-container { overflow: hidden; }

.flighttracking-header .role-live-button,
.flighttracking-header .role-live-button .label {
   float: left;
   position: relative;
}

.flighttracking-header .role-live-button {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   height: 28px;
   top: 50%;
   z-index: 1;

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

.flighttracking-header .role-live-button .icon {
   height: 100%;
   padding: 5px 0;
   width: 24px;
}

.flighttracking-header .role-live-button .label {
   line-height: 28px;
   text-transform: uppercase;
}

.flighttracking-header .role-live-button .icon,
.flighttracking-header .role-live-button .label {
   opacity: 1;

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

.flighttracking-header .role-live-button.cinactive .icon,
.flighttracking-header .role-live-button.cinactive .label { opacity: .5; }


.flighttracking-header .role-play-pause-button > .play-control { padding: 9px; }
.flighttracking-header .role-play-pause-button > .play-control > * { display: none; }

.flighttracking-header .role-play-pause-button.cPlaying #pauseThin,
.flighttracking-header .role-play-pause-button.cPaused #playThin {
   display: block;
}

.flighttracking-header .role-speed-label {
   float: left;
   line-height: 32px;
   position: relative;
   text-align: center;
   width: 100%;
}

.flighttracking-header [data-value="1"] .role-speed-label { padding-right: 2px; }
.flighttracking-header [data-value="10"] .role-speed-label,
.flighttracking-header [data-value="25"] .role-speed-label,
.flighttracking-header [data-value="50"] .role-speed-label {
   font-size: 12px;
}
.flighttracking-header [data-value="100"] .role-speed-label { font-size: 10px; }

.flighttracking-header .role-skipback-button .skipback-control > svg {
   height: 100%;
   padding: 9px 0;
   position: absolute;
}
.flighttracking-header .role-skipback-button .skipback-control > svg:first-child { left: 4px; }
.flighttracking-header .role-skipback-button .skipback-control > svg:last-child { right: 6px; }

.flighttracking-header .header-container .datetime-container {
   cursor: pointer;
   display: flex;
   justify-content: center;
   left: 0;
   pointer-events: all;
   position: absolute;
   top: 50%;
   width: 100%;
   z-index: 0;

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

.flighttracking-header .header-container .role-date-time-display {
   float: left;
   position: relative;
   white-space: nowrap;
}


/* ============================= *
 * ## Flight Search Component ##
 * ============================= */


/* ===================================== *
 * ## Flight Display Search Component ##
 * ===================================== */

.flight-display-search-component .search-filter-type-container {
   float: left;
   padding-top: 10px;
   position: relative;
   width: 100%;
}

.flight-display-search-component .search-location-label { 
   float: left;
   font-size: 12px;
   line-height: 12px;
   margin-bottom: 6px;
   position: relative;
   text-align: center;
   width: 100%;
}

.search-filter-type-container .search-filter-type {
   float: left;
   position: relative;
   width: 50%;
}

.search-filter-type-container .gui-menu-button {
   height: 30px;
   position: relative;
   width: 30px;
}

.search-filter-type-container .gui-menu-button .icon { padding: 8px; }

.search-filter-type-container .left .gui-menu-button { float: left; }
.search-filter-type-container .right .gui-menu-button { float: right; }

.search-filter-type-container .gui-menu-button .role-label {
   height: 30px;
   line-height: 30px;
   position: absolute;
}

.search-filter-type-container .left .gui-menu-button .role-label {
   left: 30px;
   margin-left: 5px;
   text-align: left;
}

.search-filter-type-container .right .gui-menu-button .role-label {
   margin-right: 5px;
   right: 30px;
   text-align: right;
}


/* ======================== *
 * ## Flight Filter List ##
 * ======================== */

.flight-filter-list {
   font-size: 11px;
   float: left;
   position: relative;
   width: 100%;
}

.flight-filter-list .role-list-header .list-cell,
.flight-filter-list .role-list-header-visual .list-cell {
   font-weight: bold;
   text-transform: uppercase;
   white-space: nowrap;
}


/* =================== *
 * ## GUI container ##
 * =================== */

.gui-container {
   height: 100%;
   pointer-events: none;
   width: 100%;
   z-index: 1001; /* above Leaflet's GUI */
}

.gui-container .casper-component { z-index: 1; }


/* ==================== *
 * ## GUI background ##
 * ==================== */

.gui-background {
   float: left;
   height: 100%;
   position: relative;
   overflow: hidden;
   width: 100%;
   z-index: 0;
}

.gui-background-container {bottom: 0;height: 100vh;
   left: 0;
   position: absolute;
   width: 100vw;
}

.gui-background-visual {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.gui-background-visual #shapes {
   fill: rgba(255,255,255,.03);
}

.gui-background-visual #lines {
   stroke: rgba(255,255,255,.06);
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .gui-background-visual #lines,
.br-ie .gui-background-visual #lines { stroke-width: 0px; }

.gui-background-visual #lines > path {
   vector-effect: inherit;
}


 /* ================ *
  * ## GUI button ##
  * ================ */

.gui-menu-button {
   border-style: solid;
   border-radius: 22px;
   border-width: 1px;
   box-shadow: 0px 3px 3px 0px rgba(0,0,0,.4);
   cursor: pointer;opacity: 1;

   transition: background .25s, border .25s, height .25s, width .25s;
   -webkit-transition: background .25s, border .25s, height .25s, width .25s;
}

.gui-menu-button,
.gui-menu-button:active,
.gui-menu-button:focus {
   outline: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.gui-menu-button .role-button {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.gui-menu-button.inactive,
.gui-menu-button.disabled { cursor: default; }

.gui-menu-button.disabled {
   cursor: default;
   opacity: .5;
}

.gui-menu-button .circle-border,
.gui-menu-button .icon {
   height: 100%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
}

.gui-menu-button .circle-border {
   padding: 3px;
   stroke-width: 2px;
}

.gui-menu-button .icon { padding: 11px; }
.gui-menu-button.icon-large .icon { padding: 7px; }
.gui-menu-button .icon.icon-columnChart { padding: 7px; }


/* =========================== *
 * ## GUI Menu Button Icons ##
 * =========================== */

.icon #tracks #line { stroke-width: 5px; }

.icon-runwayUse .gui-menu-button .icon { padding: 7px; }
.icon-runwayUse .gui-menu-button .icon #runway { opacity: .75; }
.icon-runwayUse .gui-menu-button .icon #runway #center { opacity: .5; }


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

.info-row .info-cell.label {
   font-weight: bold;
   padding-right: 10px;
   text-transform: uppercase;
   white-space: nowrap;
}
.info-cell.value { width: 50%; }
.info-cell.value:first-child { padding-right: 6px; }
.info-cell.label + .info-cell.value { width: 100%; }


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

.casper-map-layer {           z-index: 0; }
.casper-map-layer#runways {   z-index: 1; }
.casper-track-layer {         z-index: 2; }
.casper-track-points-layer {  z-index: 3; }
.casper-cpa-layer {           z-index: 4; }
.casper-trail-layer {         z-index: 5; }
.casper-location-layer {      z-index: 6; }
.casper-noise-dot-layer {     z-index: 7; }
.casper-noise-monitor-layer { z-index: 8; }
.casper-aircraft-layer {      z-index: 10; }


/* ====================== *
 * ## Map Layer Labels ##
 * ====================== */

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


.datetime-editor {
   background-color: #f9f9f9;
   position: relative;
   min-height: 40px;
   z-index: 1;
}


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

.list-component .list-cell { padding: 0 10px; }
.list-component .list-cell:first-child { padding-left: 0; }
.list-component .list-cell:last-child { padding-right: 0; }

.list-component .trend[data-trend="1"]:after { content: "\25B2"; }
.list-component .trend[data-trend="2"]:after { content: "\25BC"; }

.list-component[data-highlight] .role-list-container .list-row,
.list-component[data-select] .role-list-container .list-row {
   cursor: pointer;
}


/* ==================== *
 * ## Locations List ##
 * ==================== */

.locations-list {
   font-size: 11px;
   float: left;
   position: relative;
   width: 100%;
}

.locations-list .role-list-header .list-cell,
.locations-list .role-list-header-visual .list-cell {
   font-weight: bold;
   text-transform: uppercase;
   white-space: nowrap;
}

.locations-list.list-component .role-list-container .list-row .list-cell { line-height: 11px; }
.locations-list.list-component .list-row .list-cell { padding: 0 5px; }

.locations-list .list-cell.delete-location {
   cursor: pointer;
   width: 20px;
}

.locations-list .list-row.select .list-cell { font-weight: bold; }
.locations-list .list-row.select .list-cell.delete-location .icon { stroke-width: 5px; }
.locations-list .list-row.select .list-cell.delete-location:hover .icon { stroke-width: 10px; }

.locations-list .list-cell.delete-location .icon {
   pointer-events: none;
}


/* =========== *
 * ## Login ##
 * =========== */

.login {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -100px;
   margin-top: -100px;
   width: 200px;
   height: 200px;
}

.login-form {
   padding: 50px 20px 10px;
}

.login-form:before {
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   text-align: center;
   width: 100%;
   height: 40px;
   background-color: #5f7165;
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
   color: #fff;
   background-repeat: no-repeat;
   background-position: 15px 50%;
   background-image: url(../../../../images/casper_logo.svg);
}

.login-form-row {
   margin: 5px 0;
}

.forgot-password-link {
   display: none;
}

.login-button {
   float: right;
   margin: 5px 5px 0 0;
}

.login input[type="text"], .login input[type="password"] {
   width: 160px;
}

/**
 * gui
 */
.gui-container {
   left: 0;
   position: absolute;
   top: 0;
}

/**
 * tabs
 */
.tab-container {
   height: 100%;
   width: 100%;
}

/**
 * User Management Panel
 */

.user-list-container, .user-list,
.user-header, .user-row, .user-cell {
   float: left;
   position: relative;
}

.user-list { 
   background-color: #FFF;
   border: 1px solid #e6e6e6;
   width: 100%;
}

.user-header, .user-row {
   clear: both;
   line-height: 24px;
   width: 100%;
}
.user-header {
   height: 32px;
   margin-bottom: 5px;
}
.user-row:nth-child(odd) {
   background-color: rgba(0,0,0,.05);
}

.user-cell[data-cell] > .container {
   float: left;
   height: 100%;
   line-height: inherit;
   padding: 4px 3px;
   position: relative;
   width: 100%;
}

.user-cell[data-cell] .user-input {
   display: block;
   min-height: 100%;
   outline-color: #5f7165;
   width: 100%;
}
.user-cell[data-cell] .user-input.error {
   border-color: rgba(255,0,0,.5) !important;
   color: #FF0000 !important;
   outline-color: #FF0000 !important;
}

.user-cell[data-cell='actions'] .action-button-container {
   float: left;
   position: relative;
   width: auto;
}

.action-button-container > .svg-button {
   float: left;
   padding: 4px;
   position: relative;
   width: 24px;

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

.user-row:not(.user-edit) .user-input,
.user-row.user-edit .user-cell .user-value {
   display: none;
}

.action-button-container [data-edit-role='edit'] #save,
.action-button-container [data-edit-role='save'] #edit {
   display: none;
}

.action-button-container [data-edit-role='edit'] #edit #diagonal { opacity: .25; }
.action-button-container [data-edit-role='edit'] #edit #lines { opacity: .75; }

.action-button-container [data-edit-role='save'] #save #textBackground,
.action-button-container [data-edit-role='save'] #save #diskBackground {
   display: none;
}

/**
 * Stand Editor
 */
.stand-editor-container, .stand-editor-types, .stand-editor-type,
.stand-editor-type > .header,
.stand-editor-type > .content,
.stand-editor-type > .content .button-container,
.stand-editor-type > .output {
   float: left;
   position: relative;
}

.stand-editor-container .input-container > input {
   display: block;
   min-height: 100%;
   outline-color: #5f7165;
   width: 100%;
}

/**
 * Login Panel
 */

.login-panel {
   box-shadow: 0 0 4px rgba(0,0,0,.2);
   left: 50%;
   padding: 3px;
   position: absolute;
   top: 50%;
   width: 300px;

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

/**
 * Location Component
 */
.location-component {
   float: left;
   //height: 100px;
   position: relative;
   width: 100%;
}

.location-component .button-container {
   float: left;
   height: 50px;
   position: relative;
   width: 100%;
}

.location-component .button-container .gui-menu-button {
   border-radius: 25px;
   height: 100%;
   width: 50px;
}

.location-component .message-container {
   display: none;
   float: left;
   font-size: 10px;
   line-height: 14px;
   margin-top: 10px;
   position: relative;
   text-align: center;
   width: 100%;
}

.login-component .fl-input-label,
.search-location-component .search-location-label,
.current-location-component .current-location-label {
   float: left;
   font-size: 12px;
   line-height: 12px;
   margin-bottom: 6px;
   position: relative;
   text-align: center;
   width: 100%;
}

.login-component .fl-input-wrapper + .fl-input-label { margin-top: 20px; }

/* =============================== *
 * ## Search Location Component ##
 * =============================== */

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

.search-location-autocomplete-container { margin-top: 2px; }

.search-location-input,
.search-location-autocomplete-list {
   padding-right: 50px;
}

.fl-input-wrapper { height: 30px; }
.search-location-input { height: 40px; }

.search-location-input .gui-menu-button.location-search {
   height: 40px;
   position: absolute;
   right: 0;
   top: 50%;
   width: 40px;

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

.fl-input-wrapper .fl-input-container,
.search-location-input .input-container {
   border: 1px solid rgba(100,100,100,.1);
   border-radius: 20px;
   float: left;
   height: 100%;
   padding-left: 10px;
   padding-right: 40px;
   position: relative;
   width: 100%;

   transition: background-color .25s, border-radius .25s;
   transition-delay: .25s;

   -webkit-transition: background-color .25s, border-radius .25s;
   -webkit-transition-delay: .25s;
}

.fl-input-wrapper .fl-input-container.focus,
.search-location-input .input-container.focus { background-color: rgba(205,205,205,1); }


.fl-input-wrapper .fl-input-container,
.search-location-autocomplete-container .pac-container,
.search-location-input .input-container {
   background-color: rgba(100,100,100,.1);
}

.fl-input-container .fl-input,
.input-container .location-input {
   background: none;
   border: none;
   height: 100%;
   font-size: 15px;
   outline: none;
   text-overflow: ellipsis;
   width: 100%;
}

.input-container .location-input-clear {
   height: 30px;
   position: absolute;
   right: 5px;
   top: 50%;
   width: 30px;

   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}
.input-container .location-input-clear .icon { padding: 8px; }
.input-container .location-input-clear .circle-border: { stroke-width: 1px; }

.search-location-autocomplete-container .pac-container {
   border-radius: 0px 0px 10px 10px;
   border-top: none;
   box-shadow: none;
   display: block !important;
   float: left;
   font-family: 'Maven Pro', sans-serif;
   left: 0px !important;
   position: relative !important;
   top: 0px !important;
   width: 100% !important;
}
.search-location-autocomplete-container .pac-container:after { display: none !important; }

.search-location-autocomplete-list {
   max-height: 0px;
   overflow: hidden;

   transition: max-height .25s;
   -webkit-transition: max-height .25s;
}

.pac-container .pac-item {
   border-left: 1px solid rgba(100,100,100,.1);
   border-right: 1px solid rgba(100,100,100,.1);
   border-top: 1px solid rgba(100,100,100,.1);
   padding: 0 10px;
}

.pac-container .pac-item:last-child { border-bottom: 1px solid rgba(100,100,100,.1); }
.pac-container .pac-item .pac-icon { display: none; }
.pac-container .pac-item span { color: #646464; }


.search-location-autocomplete.input-searching .search-location-input .input-container {
   border-radius: 20px 20px 0px 0px;

   transition-delay: 0s;
   -webkit-transition-delay: 0s;
}
.search-location-autocomplete.input-searching .search-location-autocomplete-list {
   max-height: 200px;

   transition-delay: .25s;
   -webkit-transition-delay: .25s;
}
.search-location-autocomplete.input-searching .input-container .location-input,
.search-location-autocomplete.input-searched .input-container .location-input {
   font-weight: bold;
   text-transform: capitalize;
}

/* ================================ *
 * ## Current Location Component ##
 * ================================ */

.current-location-component {
   margin-top: 30px;
}

.current-location-component .gui-menu-button.location-current {
   left: 50%;
   position: absolute;

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


/* ================ *
 * ## Casper Tab ##
 * ================ */

.casper-tab {
   bottom: 0;
   left: 50%;
   max-width: 400px;
   padding: 40px 7px 7px 7px;
   position: absolute;
   width: 100%;

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

.casper-tab-full { height: 100%; }
.casper-tab .swiper-pagination {
   bottom: 10px;
   height: 12px;
   line-height: 12px;
}

.casper-tab-container-border {
   border: 2px solid rgba(255,255,255,.5);
   border-radius: 15px;
   float: left;
   height: 100%;
   padding: 3px;
   position: relative;
   width: 100%;
}

.casper-tab-container,
.casper-tab-container-fill,
.casper-tab-content,
.casper-tab-section-container {
   height: 100%;
}

.casper-tab-container {
   padding-top: 10px;
   position: relative;
}

.casper-tab-container-fill {
   border-radius: 10px;
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;

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

.cActiveTransition .casper-tab-container-fill,
.cActive .casper-tab-container-fill,
.cInactiveBefore .casper-tab-container-fill {
   opacity: 1;
}

.casper-tab-content.swiper-container-pagination { padding-bottom: 44px; }

.casper-tab-section-container > .casper-tab-section {
   padding: 0px 11px 10px 11px;
   pointer-events: none;

   transition: padding-bottom .5s;
   -webkit-transition: padding-bottom .5s;
}

.casper-tab-section.scroll-enabled { padding-bottom: 15px; }
.casper-tab-section.scroll-enabled.scrolled { padding-bottom: 10px; }

.casper-tab-section > .section-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.section-container > .content-container {
   float: left;
   position: relative;
}

.section-container > .content-container,
.section-container > .header {
   width: 100%;
}

.section-container > .header {
   left: 0;
   position: absolute;
   top: 0;
}

.gui-newsitem-component .casper-message .header.title,
.section-container > .header.title,
.section-container > .header > .title {
   font-size: 20px;
   line-height: 25px;
   text-align: center;
}

.section-container > .header > .subtitle {
   font-size: 15px;
   height: 20px;
   line-height: 20px;
}

.section-container .content-container {
   height: 100%;
   padding-top: 25px;
}

.section-container .header:not(.title) + .content-container { padding-top: 50px; }

.content-container .content-scroll-container,
.content-scroll-container .content {
   float: left;
   position: relative;
   width: 100%;
}

.content-container .content-scroll-container {
   height: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
   pointer-events: all;
}

.casper-tab.cActive .content-container .content-scroll-container { overflow-y: auto; }

.content-scroll-indicator {
   background-color: rgba(100,100,100,.25);
   bottom: 0px;
   height: 1px;
   opacity: 0;
   position: absolute;
   width: 100%;
   z-index: 9999;

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

.casper-tab-section.scroll-enabled .content-scroll-indicator { opacity: 1; }
.casper-tab-section.scroll-enabled.scrolled .content-scroll-indicator { opacity: 0; }

.content-scroll-indicator .arrow-container {
   height: 34px;
   left: 50%;
   position: absolute;
   top: 0;
   width: 34px;

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

.arrow-container .arrow {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;

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

.arrow-container .arrow .icon {
   fill: rgba(100,100,100,.75);
   height: 12px;
   position: absolute;
   top: 50%;

   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}
.arrow-container .arrow .icon.bottom { left: 9px; }
.arrow-container .arrow .icon.top { right: 11px; }

.arrow-container .outer-border {
   border-radius: 50%;
   float: left;
   height: 100%;
   padding: 4px;
   position: relative;
   width: 100%;
   z-index: 0;
}

.arrow-container .outer-border:after {
   content: "";
   height: 100%;
   left: 50%;
   position: absolute;
   top: 0;
   width: 4px;

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

.outer-border .inner-border {
   border: 1px solid rgba(100,100,100,.25);
   border-radius: 50%;
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.content-container .content .section-description-container,
.content-container .content .section-description {
   float: left;
   position: relative;
   width: 100%;
}

.content-container .content .section-description-container { min-height: 54px; }

.content-container .content .section-description {
   font-size: 10px;
   line-height: 12px;
}

.content-container .content .section-sub-header {
   background-color: rgba(100,100,100,.1);
   clear: both;
   float: left;
   font-size: 12px;
   margin: 18px 0 12px 0;
   padding: 6px 0;
   position: relative;
   text-align: center;
   width: 100%;
}
.content-container .content .section-sub-header:before {
   background-color: rgba(100,100,100,.25);
   content: "";
   height: 1px;
   left: 0;
   position: absolute;
   top: -6px;
   width: 100%;
}

.content-container .content .section-sub-header.period {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.content-container .content .section-sub-header.period .title {
   flex: 1 0 100%;
   order: 1;
}

.content-container .content .section-sub-header.period .from,
.content-container .content .section-sub-header.period .upto {
   padding: 0 5px;
}

.content-container .content .section-sub-header.period .from { order: 2; }
.content-container .content .section-sub-header.period .separator { order: 3; }
.content-container .content .section-sub-header.period .upto { order: 4; }

.content-container .content .section-sub-header .title { font-weight: bold; }
.content-container .content .section-sub-header .encapsulate { padding-left: 5px; }
.content-container .content .section-sub-header .section-sub-header-line {
   float: left;
   line-height: 16px;
   position: relative;
   text-align: center;
   width: 100%;
}

.content-container .content .sub-text {
   float: left;
   font-size: 12px;
   position: relative;
}

.content-container .content > * {
   margin-top: 10px;
}

.info-table.section-description .info-row { height: 12px; }
.info-table.section-description .info-row.labels:not(:first-child) .info-cell { padding-top: 6px; }

.noise-tab-icon rect { display: none; }

.info-table.section-description.singular .info-row.labels { height: 14px; }


/* ============================
 * ## Casper See Through Tab ##
 * ============================ */

//.casper-see-through-tab .casper-tab-container-border { border: none; }
.casper-see-through-tab .casper-tab-container {
   background: none;
   padding-bottom: 0px;
}

.casper-see-through-tab .section-container .content-scroll-container { overflow: hidden; }

.casper-see-through-tab .section-container .content {
   padding-bottom: 50px;
   position: absolute;
   top: 50%;
   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}
.casper-see-through-tab .content-container .content > *:first-child { margin-top: 0; }


/* ============================= *
 * ## noise monitor component ##
 * ============================= */

.nmt-component {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
}
.nmt-component .header,
.nmt-component .header > div {
   float: left;
   position: relative;
   width: 100%;
}
.nmt-component .header > div {
   clear: both;
   text-align: center;
}
.nmt-component .header > .name {
   font-size: 18px;
   line-height: 20px;
   margin-bottom: 4px;
}
.nmt-component .header > .location {
   font-size: 14px;
   line-height: 16px;
}


/* ============================ *
 * ## flight info components ##
 * ============================ */

.flight-info-component .header,
.flight-info-component .content {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
}

.flight-info-component,
.flight-info-component .flight-info-table {
   float: left;
   position: relative;
   width: 100%;
}

.flight-info-component .flight-info-table { display: table; }

.flight-info-table .flight-info-row {
   display: table-row;
   font-size: 13px;
   line-height: 15px;
   min-height: 20px;
   width: 100%;
}

.flight-info-row .flight-info-value,
.flight-info-row .flight-info-label {
   display: table-cell;
   font-size: inherit;
   padding-top: 10px;
   vertical-align: top;
}

.flight-info-row:first-child .flight-info-value,
.flight-info-row:first-child .flight-info-label {
   padding-top: 0px;
}

.flight-info-row .flight-info-label {
   font-weight: bold;
   padding-right: 10px;
   white-space: nowrap;
}
.flight-info-row .flight-info-value {
   white-space: normal;
   width: 100%;
}


/* ================== *
 * ## DropDownList ##
 * ================== */

.drop-down-list,
.drop-down-list [data-role='valueDisplay'] {
   height: 100%;
   width: 100%;
}

.drop-down-list [data-role='valueList'] {
   position: absolute;
   top: 100%;

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

.drop-down-list.list-closed [data-role='valueList'] { opacity: 0; }
.drop-down-list.list-open [data-role='valueList'] { opacity: 1; }

.drop-down-list [data-role='valueList'] > div {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
}

.drop-down-list .list-value { pointer-events: all; }
.drop-down-list .list-value > * { pointer-events: none; }


/* ===================== *
 * ## Route Component ##
 * ===================== */

.route-component {
   float: left;
   height: 200px;
   position: relative;
   width: 100%;
}

.route-component [data-role="route"] {
   float: left;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
}

.route-component [data-role="canvas"] {
   height: 100%;
   position: absolute;
   width: 100%;
   z-index: 9999;
}

.route-component [data-role="map"] {
   transform-origin: left top;
   transition: width, height, transform;
   transition-duration: .5s;
   transition-timing-function: linear;

   -webkit-transform-origin: left top;
   -webkit-transition: width, height, -webkit-transform;
   -webkit-transition-duration: .5s;
   -webkit-transition-timing-function: linear;
}

.route-component .route-info {
   float: left;
   margin-top: 10px;
   position: relative;
   width: 100%;
}


/* ================= *
 * ## GUI setting ##
 * ================= */

.gui-setting,
.gui-state {
   clear: both;
   float: left;
   position: relative;
}
.gui-setting.disabled,
.gui-state.disabled {
   opacity: .5;
}

.gui-setting .label, .gui-setting .button,
.gui-state .label, .gui-state .button {
   cursor: pointer;
   float: left;
   max-width: 225px;
   pointer-events: all;
   position: relative;
}
.gui-setting.disabled .label, .gui-setting.disabled .button,
.gui-state.disabled .label, .gui-state.disabled .button {
   pointer-events: none;
}

.gui-setting .label,
.gui-state .label {
   line-height: 15px;
   top: 50%;

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

.gui-setting .button,
.gui-state .button {
   height: 100%;
   padding: 2px;
   width: 30px;
}

.gui-setting .button .circle-border,
.gui-state .button .circle-border {
   height: 100%;
   padding: 1px;
   width: 100%;
}

.gui-setting .button #circleBorder,
.gui-state .button #circleBorder {
   stroke-width: 2px;
}


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

.checkbox [data-role='button'] .check,
.group-checkbox [data-role='button'] .check {
   height: 100%;
   left: 0;
   opacity: 0;
   padding: 15px;
   position: absolute;
   top: 0;
   width: 100%;

   transition: opacity .5s, padding .5s;
   -webkit-transition: opacity .5s, padding .5s;
}
.checkbox.checked [data-role='button'] .check,
.group-checkbox.checked [data-role='button'] .check {
   opacity: .75;
   padding: 8px;
}


/* ================== *
 * ## Radio Button ##
 * ================== */

.radio-button [data-role='button'] .checked-circle {
   height: 100%;
   left: 0;
   opacity: 0;
   padding: 15px;
   position: absolute;
   top: 0;
   width: 100%;

   transition: opacity .5s, padding .5s;
   -webkit-transition: opacity .5s, padding .5s;
}

.radio-button.checked [data-role='button'] .checked-circle {
   opacity: 1;
   padding: 7px;
}

.radio-button [data-role='button'] .checked-circle .circle {
   border-radius: 100%;
   height: 100%;
   opacity: .75;
   position: relative;
   width: 100%;
}


/* ================= *
 * ## Setting Tab ##
 * ================= */

.settings-tab .casper-tab-container .casper-tab-bounding-box-container > div:nth-last-child(n+3) {
   margin-bottom: 0px;
}
.settings-tab .casper-tab-container .casper-tab-bounding-box-container > div:nth-last-child(n+2) {
   border-bottom: none;
   padding-bottom: 0px;
}

.settings-tab .gui-button.gui-setting,
.settings-tab .gui-button.gui-state {
   height: 30px;
   margin-top: 0px;
   width: 100%;
}

.settings-tab .gui-button.gui-setting .label,
.settings-tab .gui-button.gui-state .label {
   z-index: 0;
}

.settings-tab .gui-button.gui-setting .button,
.settings-tab .gui-button.gui-state .button {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
}

.settings-header {
   clear: both;
   float: left;
   font-weight: bold;
   height: 20px;
   line-height: 20px;
   width: 100%;
}


/* ============ *
 * ## Slider ##
 * ============ */

.slider-component {
   height: 100%;
   float: left;
   padding: 0 20px;
   position: relative;
   width: 100%;
}

.slider-component .container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.slider-component .slider-area {
   background-color: rgba(255,255,255,.25);
   border: 1px solid rgba(255,255,255,.33);
   border-radius: 3px;
   height: 6px;
   left: 0;
   position: absolute;
   top: 50%;
   width: 100%;

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

.slider-component .slider-button {
   box-shadow: 0px 3px 3px 0px rgba(0,0,0,.3);
   height: 40px;
   left: 0;
   pointer-events: all;
   position: absolute;
   top: 50%;
   width: 40px;
   z-index: 1;

   transform: translate(-50%,-50%);
   transition: left .5s;

   -webkit-transform: translate(-50%,-50%);
   -webkit-transition: left .5s;
}
.slider-component .slider-button.slider-dragging {
   transition: left 0s;
   -webkit-transition: left 0s;
}

.slider-button .slider-button-text,
.slider-button .circle-border {
   height: 100%;
   pointer-events: none;
   width: 100%;
}

.slider-button .slider-button-text {
   font-size: 16px;
   line-height: 40px;
   position: relative;
   text-align: center;
}

.slider-component .slider-label {
   bottom: 6px;
   height: 10px;
   line-height: 10px;
   opacity: 1;
   pointer-events: none;
   position: absolute;
   z-index: 0;

   transform: translate(-50%, -100%);
   transition: bottom .25s, opacity .25s;

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

.slider-component .slider-label.cActive {
   bottom: 0px;
   opacity: 0;
}

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

.meteo-wind-direction-visual {
   opacity: 1;

   transition: opacity .5s;
   -webkit-transition: opacity .5s;
}
.meteo-wind-direction-visual.wind-direction-variable { opacity: .5; }
.meteo-wind-direction-visual.wind-direction-variable #winddir #pointer { display: none; }


/* ================== *
 * ## Section menu ##
 * ================== */

.section-menu {
   bottom: 40px;
   left: 50%;
}

.section-menu {
    position: absolute;
    z-index: 999;
}

.section-menu .menu-button {
    height: 30px;
    width: 30px;
}
.section-menu .menu-button .icon-container .icon { padding: 8px; }


/* =================== *
 * ## Splash Screen ##
 * =================== */

.splash-screen-component {
   height: 100%;
   left: 0;
   padding-top: 40px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0 !important;
}

.splash-screen-component.cActiveTransition,
.splash-screen-component.cActive,
.splash-screen-component.cInactiveBefore {
   opacity: .9;
}

.splash-screen-component .logo {
   filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.25));
   left: 50%;
   max-height: 100px;
   max-width: 50%;
   opacity: 0;
   position: absolute;
   top: 20%;
   width: 300px;
   z-index: 1;

   transform: translate(-50%, -50%);
   transition: max-height .5s, max-width .5s, opacity .5s, top .5s;

   -webkit-transform: translate(-50%, -50%);
   -webkit-transition: max-height .5s, max-width .5s, opacity .5s, top .5s;
}
.splash-screen-component.cActive .logo { opacity: .25; }

[data-current-location="splash-guide"] .splash-screen-component .logo,
[data-current-location="homescreen"] .splash-screen-component .logo {
   margin-top: 0px;
   top: 20%;

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

[data-current-location="splash-guide"] .splash-screen-component .logo { opacity: 1; }
[data-current-location="homescreen"] .splash-screen-component .logo {
   max-height: 60px;
   max-width: 50%;
   opacity: .75;
}


/* ================== *
 * ## Splash Guide ##
 * ================== */

.splash-guide-tab .content-container { padding-top: 60px; }

.splash-guide-tab .content {
   height: 100%;
   overflow: visible;
}
.splash-guide-tab .content > * { margin-top: 0px; }

.splash-guide-tab .busy-loading {
   bottom: 0px;
   margin-top: -5px;
   opacity: 0;
   top: auto;
}
.splash-guide-tab.cActive .busy-loading {
   margin-top: 0px;
   opacity: 1;
}

.splash-guide-tab.cActiveToInactive .busy-loading,
.splash-guide-tab.cInactiveToActive .busy-loading,
.splash-guide-tab.cInactive .busy-loading {
   margin-top: -5px;

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

.splash-guide-tab .busy-logo {
   background: none;
   overflow: visible;
   padding: 0px;
}

.splash-guide-tab .busy-logo .center {
   height: 40%;
   width: 40%;
}
.splash-guide-tab .busy-logo.fade.in .edges #vertical { opacity: .25; }

.splash-guide-tab .busy-loading.fade.out .busy-logo { right: 50%; }
//.splash-guide-tab .busy-loading .overflow.continue { display: none; }

.splash-guide-tab .busy-loading.fade .overflow.loading {
   transition-duration: 1s, .5s;
   transition-property: left, opacity;

   -webkit-transition-duration: 1s, .5s;
   -webkit-transition-property: left, opacity;
}
.splash-guide-tab .busy-loading.fade.out .overflow.loading {
   left: 50%;
   opacity: 0;
}
.splash-guide-tab .busy-loading.fade.out .overflow.loading .text { right: 0px; }

.splash-guide-tab .busy-loading.fade.out .busy-logo { right: 0; }
.splash-guide-tab .busy-loading .overflow.continue { display: block; }

.splash-guide-tab .busy-loading.fade .overflow.loading {
   transition-duration: 1s;
   transition-property: left;

   -webkit-transition-duration: 1s;
   -webkit-transition-property: left;
}
.splash-guide-tab .busy-loading.fade.out .overflow.loading { left: 100%; }
.splash-guide-tab .busy-loading.fade.out .overflow.loading .text { right: 100%; }

.splash-guide-tab .splash-content {
   left: 0;
   margin-top: -5px;
   opacity: 0;
   position: absolute;
   top: 50%;
   width: 100%;

   transform: translate(0,-50%);
   transition-delay: .5s;
   transition-duration: .5s;
   transition-property: margin-top, opacity;

   -webkit-transform: translate(0,-50%);
   -webkit-transition-delay: .5s;
   -webkit-transition-duration: .5s;
   -webkit-transition-property: margin-top, opacity;
}

.splash-guide-tab.cActive .splash-content {
   margin-top: 0;
   opacity: 1;
}

.splash-guide-tab .splash-content .intro,
.splash-guide-tab .splash-content .locale {
   font-size: 16px;
   text-align: center;
}

.splash-guide-tab .splash-content .locale {
   border-top: 1px solid #FFF;
   display: none;
   margin-top: 20px;
   padding-top: 20px;
}

.splash-guide-tab .splash-content .intro a {
   pointer-events: all;
   text-decoration: none;
}

.splash-guide-tab .splash-content .locale .footer { padding-top: 20px; }
.splash-guide-tab .splash-content .locale .footer .role-locale-button { cursor: pointer; }


/* ================= *
 * ## Help Guides ##
 * ================= */

.guide-content {
   font-size: 12px;
}

.guide-text,
.guide-container,
.guide-container > .guide-container-label,
.guide-legend,
.features-list,
.features-list .feature,
.features .label {
   float: left;
   position: relative;
   width: 100%;
}

.guide-text,
.guide-text + .guide-text,
.guide-text + .guide-image {
   margin-top: 10px;
}

.guide-text + .guide-container,
.guide-container + .guide-text,
.guide-text + .guide-legend,
.guide-legend + .guide-text,
.guide-legend + .guide-legend {
   margin-top: 20px;
}
.guide-container > .guide-container-label {
   clear:both;
   height: 12px;
   line-height: 12px;
   font-size: 10px;
   margin-top: 10px;
   text-align: center;
}

.guide-text ul li + li { margin-top: 5px; }

/**
 * buttons
 */
.guide-container .guide-button-container {
   height: 40px;
   left: 50%;
   position: relative;
   width: 40px;

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

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

.guide-container .guide-button-container .guide-button.main-menu-button .icon { padding: 5px; }
.guide-container .guide-button-container .guide-button.main-menu-button .circle-border { display: none; }

/**
 * location
 */
.guide-container .location-container {
   float: left;
   height: 40px;
   position: relative;
   width: 100%;
}

.guide-container .location-label-container {
   bottom: 0;
   left: 50%;

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

.guide-container .current-location-button {
   height: 40px;
   position: relative;
   width: 100%;
}

/**
 * features
 */
.features-list {
   margin: 0;
   padding-left: 20px;
}

.feature .label,
.feature .image {
   cursor: default;
   position: absolute;
   top: 50%;

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

.feature .image {
   height: 100%;
   right: 0px;
}

.feature .image.runway-use .icon { padding: 7px; }

.feature .label {
   font-size: 14px;
   font-weight: bold;
   left: 0;
   line-height: 20px;
   padding-left: 5px;
   padding-right: 60px;
   width: 100%;
}

/**
 * Aircraft Types
 */
.aircraft-types .aircraft-type {
   float: left;
   padding: 0 5px;
   position: relative;
   width: 25%;
}

.aircraft-type .icon,
.aircraft-type .label {
   float: left;
   position: relative;
   width: 100%;
}

.aircraft-type .icon { height: 50px; }
.aircraft-type .label {
   font-size: 10px;
   font-weight: bold;
   margin-top: 5px;
   text-align: center;
}

/**
 * legend
 */

.guide-legend .title,
.guide-legend .item-container {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
}

.guide-legend .item-container { margin-top: 5px; }

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

.item .color { height: 10px; }
.item .label {
   font-size: 10px;
   line-height: 20px;
}

.item-container .item,
.item .color,
.solid .item .label {
   float: left;
   position: relative;
}

.item .color,
.solid .item .label {
   clear: both;
   width: 100%;
}

.item-container .item:first-child { padding-left: 0; }
.item-container .item:last-child { padding-right: 0; }

.solid .item-container .item { padding: 0 1px; }
.gradient .item-container { margin-bottom: 20px; }
.gradient .item-container .item { padding: 0 1px 0 0; }

.gradient .item .label {
   left: 0;
   position: absolute;
   top: 10px;

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

.gradient .item .label + .label {
   left: initial;
   right: 0;
}

.gradient .item:first-child .label,
.gradient .item:last-child .label:last-child {
   transform: none;
   -webkit-transform: none;
}


/* ==================== *
 * ## Flight Counter ##
 * ==================== */

.flight-counter-component,
.flight-counter-component .totals-container {
   float: left;
   position: relative;
   width: 100%;
}

.flight-counter-component .totals-container { height: 150px; }

.flight-counter-component .total-container .total,
.flight-counter-component .total .amount-container {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.flight-counter-component .total-container + .total-container .total { border-left: 1px solid rgba(100,100,100,.25); }

.flight-counter-component .total-container .label {
   bottom: 0;
   height: 26px;
   line-height: 26px;
   position: absolute;
   text-align: center;
   width: 100%;
}

.flight-counter-component .total .amount-container {
   border-bottom: 1px solid rgba(100,100,100,.25);
}

.flight-counter-component .total .amount-container .amount {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.flight-counter-component .total .amount-container .amount .shape {
   bottom: 0;
   height: 0;
   position: absolute;
   width: 100%;

   transition: height .25s ease-in-out;
}

.flight-counter-component .total .amount-container .amount .text {
   height: 26px;
   line-height: 26px;
   position: absolute;
   text-align: center;
   width: 100%;

   transition: bottom .25s ease-in-out;
}

.flight-counter-component .total .visual {
   height: 100%;
   position: absolute;
   top: 0;
   width: 50%;
}


/* ======================== *
 * ## FlightType Counter ##
 * ======================== */

.flighttype-counter-component .totals-container .total-container {
   float: left;
   height: 100%;
   padding-bottom: 26px;
   padding-top: 26px;
   position: relative;
   width: 50%;
}

.flighttype-counter-component .total-container.flighttype-inbound .total { padding-right: 5px; }
.flighttype-counter-component .total-container.flighttype-outbound .total { padding-left: 5px; }

.flighttype-counter-component .flighttype-inbound .total .amount-container { padding-left: 50%; }
.flighttype-counter-component .flighttype-outbound .total .amount-container { padding-right: 50%; }

.flighttype-counter-component .flighttype-inbound .total .visual { left: 0; }
.flighttype-counter-component .flighttype-outbound .total .visual { right: 0; }

.flighttype-counter-component .total .visual { padding: 18px; }
.flighttype-counter-component .total .visual .airplane {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}


/* ======================= *
 * ## Casper Detour Tab ##
 * ======================= */

.casper-detour-tab .role-continue {
   bottom: 16px;
   cursor: pointer;
   font-size: 28px;
   height: 40px;
   left: 0;
   position: absolute;
   text-align: center;
   width: 100%;
   z-index: 9999;
}


/* ========================= *
 * ## Date Time Component ##
 * ========================= */

.date-time-tab .casper-tab-container {
   padding-bottom: 130px !important;
}

.date-time-tab .section-container .content-container { padding-top: 35px; }
.date-time-tab .content-container > .content {
   height: 100%;
   overflow: hidden;
   padding-top: 0;
}
.date-time-tab .content-container .content > * { margin-top: 0; }

.date-time-component,
.date-time-component .editor-container .editor-content,
.date-time-component .editor-container .visual,
.date-time-component .editor-content .editor-wrapper,
.date-time-component .editor-wrapper .editor,
.date-time-component .time-editor .sep-container,
.date-time-component .time-editor .time-part,
.date-time-component .time-editor .value-wheel {
   float: left;
   position: relative;
}

.date-time-component,
.date-time-component .editor-container .editor-content,
.date-time-component .editor-content .editor-wrapper {
   height: 100%;
   width: 100%;
}

.date-time-component .editor-container {
   height: 50%;
   left: 0;
   position: absolute;
   width: 100%;

   transition-property: height, padding-bottom;
   transition-duration: .33s;
   transition-timing-function: linear;

   -webkit-transition-property: height, padding-bottom;
   -webkit-transition-duration: .33s;
   -webkit-transition-timing-function: linear;
}

.date-time-component .editor-container .editor-content {
   height: 100%;
   z-index: 0;
}

.date-time-component .editor-wrapper,
.date-time-component .visual-wrapper {
   transition-property: opacity;
   transition-duration: .33s;
   transition-timing-function: linear;

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

.date-time-component .editor-wrapper { opacity: 0; }
.date-time-component .visual-wrapper { opacity: 1; }

.date-time-component .editor-wrapper .editor { pointer-events: all; }

.date-time-component .editor-container .visual-wrapper {
   height: 40px;
   left: 0;
   pointer-events: all;
   position: absolute;
   width: 100%;
   z-index: 1;
}

.date-time-component .editor-container .visual {
   cursor: pointer;
   height: 100%;
   left: 50%;
   position: relative;

   transform: translate(-50%,0);
   -webkit-transform: translate(-50%,0);
}
.date-time-component .editor-container .visual > * { pointer-events: none }

/* date editor */
.date-time-component .date-editor {
   padding-bottom: 0;
   top: 0;
   z-index: 0;
}
.date-time-component .date-editor .editor-content { padding-bottom: 40px; }
.date-time-component .date-editor .editor {
   top: 50%;
   width: 100%;

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

.date-time-component .date-editor .pika-single { border-width: 0; }

.date-time-component .date-editor .visual-wrapper { bottom: 0; }

/* time editor */
.date-time-component .time-editor {
   bottom: 0;
   padding-top: 0;
   z-index: 1;
}

.date-time-component .time-editor .editor-content {
   border-style: solid;
   border-width: 1px 0 0 0;
   padding-top: 40px;
}

.date-time-component .time-editor .editor {
   height: 200px;
   left: 50%;
   top: 50%;

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

.date-time-component .time-editor .visual-wrapper { top: 0; }

.date-time-component .time-editor .value-wheel,
.date-time-component .time-editor .sep-container,
.date-time-component .time-editor .time-part,
.date-time-component .time-editor .value-wheel .swiper-container { height: 100%; }

.date-time-component .time-editor .value-wheel.t-code-p .swiper-container,
.date-time-component .time-editor .value-wheel.t-code-P .swiper-container {
   height: 20%;
   top: 50%;

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

.date-time-component .time-editor .value-wheel.t-code-p .swiper-container,
.date-time-component .time-editor .value-wheel.t-code-P .swiper-container {
   overflow: visible;
}

.date-time-component .time-editor .value-wheel .time-button {
   left: 50%;
   position: absolute;
   width: 28px;
}

.date-time-component .time-editor .value-wheel .time-button .icon-container,
.date-time-component .time-editor .value-wheel .time-button .icon {
   height: 100%;
   position: relative;
   width: 100%;
}

.date-time-component .time-editor .value-wheel .time-button .icon { 
   transition: fill .25s;
   -webkit-transition: fill .25s;
}

.date-time-component .time-editor .value-wheel .swiper-btn-prev {
   bottom: 100%;
   margin-bottom: 5px;

   transform: translate(-50%, 0);
   -webkit-transform: translate(-50%, 0);
}
.date-time-component .time-editor .value-wheel .swiper-btn-next {
   margin-top: 5px;
   top: 100%;

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

.date-time-component .time-editor .sep-container { width: 15px; }
.date-time-component .time-editor .value-wheel,
.date-time-component .time-editor .time-part { width: 60px; }

.date-time-component .time-editor .value-wheel { cursor: pointer; }
.date-time-component .time-editor .sep-container { pointer-events: none; }

.date-time-component .time-editor .sep-container .sep-text {
   height: 40px;
   left: 0;
   position: absolute;
   top: 50%;
   width: 100%;

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

.date-time-component .date-editor .visual,
.date-time-component .time-editor .sep-container .sep-text,
.date-time-component .time-editor .time-part,
.date-time-component .time-editor .value-wheel .swiper-slide {
   line-height: 40px;
   text-align: center;
}

.date-time-component .date-editor .visual { font-size: 18px; }

.date-time-component .time-editor .time-part,
.date-time-component .time-editor .value-wheel .swiper-slide-active {
   font-size: 24px;
}

/* modes */
.date-time-component.dt-mode-date .date-editor,
.date-time-component.dt-mode-time .time-editor {
   height: 100%;
}

.date-time-component.dt-mode-date .time-editor,
.date-time-component.dt-mode-time .date-editor {
   height: 40px;
}

.date-time-component.dt-mode-date .date-editor .editor-wrapper,
.date-time-component.dt-mode-time .time-editor .editor-wrapper {
   opacity: 1;
}

.date-time-component.dt-mode-date .time-editor .editor-wrapper,
.date-time-component.dt-mode-time .date-editor .editor-wrapper {
   opacity: 0;
}

.date-time-component.dt-mode-date .time-editor .editor-wrapper .editor,
.date-time-component.dt-mode-time .date-editor .editor-wrapper .editor {
   pointer-events: none !important;
}


.date-time-component.dt-mode-date .date-editor { padding-bottom: 40px; }
.date-time-component.dt-mode-date .date-editor .editor-content { padding-bottom: 0; }

.date-time-component.dt-mode-date .date-editor .visual-wrapper,
.date-time-component.dt-mode-time .time-editor .visual-wrapper {
   opacity: 0;
}

.date-time-component.dt-mode-time .time-editor { padding-top: 40px; }
.date-time-component.dt-mode-time .time-editor .editor-container { padding-top: 0; }



/* ================ *
 * ## Homescreen ##
 * ================ */

.home-screen-tab .content {
   height: 100%;
   overflow: visible;
}

.home-screen-tab .homescreen-content {
   left: 0;
   margin-top: -5px;
   opacity: 0;
   position: absolute;
   top: 50%;
   width: 100%;

   transform: translate(0,-50%);
   transition-delay: .5s;
   transition-duration: .5s;
   transition-property: margin-top, opacity;

   -webkit-transform: translate(0,-50%);
   -webkit-transition-delay: .5s;
   -webkit-transition-duration: .5s;
   -webkit-transition-property: margin-top, opacity;
}

.home-screen-tab.cActive .homescreen-content {
   margin-top: 0;
   opacity: 1;
}

.homescreen-content .role-continue,
.homescreen-content .role-text ul { margin-bottom: 2em; }

.homescreen-content .device-action-icon-span {
   display: inline-block;
   vertical-align: middle;
}

.homescreen-content .device-action-icon { border-radius: 4px; }
.homescreen-content .device-action-icon.android,
.homescreen-content .device-action-icon.ios7 {
   overflow: visible;
   stroke-width: 5px;
}

.homescreen-content .device-action-icon.android {
   height: 16px;
   width: 16px;
}

.homescreen-content .device-action-icon.ios6,
.homescreen-content .device-action-icon.ios7 {
   height: 20px;
   width: 20px;
}


/* ============== *
 * ## Help Tab ##
 * ============== */

.help-tab .legend-component { margin-top: 20px; }
.help-tab .legend-component .role-title { font-weight: bold; }

.help-important { font-weight: bold; }
.help-small { font-size: 10px; }

#fullscreenTester {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100vw;
   pointer-events: none;
   opacity: 0;
}


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

.gui-map-controls-component {
   position: absolute;
   left: 0;
   margin-top: 10px;
   top: 100%;
   width: 100%;
}

.gui-map-controls-left,
.gui-map-controls-right {
   position: absolute;
   top: 0;
   width: 40px;
}

.gui-map-controls-left { left: 5px; }
.gui-map-controls-right { right: 5px; }

.gui-map-controls-container,
.gui-map-controls-container .gui-map-control-button {
   float: left;
   position: relative;
   width: 100%;
}

.gui-map-controls-container .gui-map-control-button { margin-top: 10px; }
.gui-map-controls-container .gui-map-control-button:first-child { margin-top: 0px; }

.gui-map-controls-container .control-zoom-button,
.gui-help-container .gui-help-button,
.gui-info-container .gui-info-button,
.gui-messages-container .gui-messages-button {
   height: 30px;
   margin-left: 5px;
   margin-right: 5px;
   pointer-events: all;
   width: 30px;
}

.gui-message-container .gui-message-button {
   height: 40px;
   width: 40px;
}

.gui-map-controls-container .control-zoom-button .icon {
   padding: 9px;
   stroke-width: 5px;
}
.gui-help-container .gui-help-button .icon,
.gui-info-container .gui-info-button .icon,
.gui-messages-container .gui-messages-button .icon { padding: 8px; }
.gui-message-container .gui-message-button .icon { padding: 10px; }

.gui-help-container { margin-top: 20px; }
.gui-info-container,
.gui-messages-container { margin-top: 10px; }


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

.content-container .content .nmt-info-component .section-description {
   max-height: 26px;
   min-height: 26px;
}


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

.gui-container .canvas-timeline-chart,
.gui-container .noise-level-canvas-chart {
   height: 200px;
   padding-bottom: 20px;
}


/* ===================== *
 * ## Section Content ##
 * ===================== */

.section-content {
   float: left;
   padding: 0 5px;
   position: relative;
   width: 100%;
}

.section-content ul li {
   font-size: 12px;
   line-height: 16px;
}

.section-content a { text-decoration: none; }


/* ============= *
 * ## Pikaday ##
 * ============= */

.pika-single .is-today .pika-button {
   border-radius: 3px;
   font-weight: bold;
}

.pika-single .is-selected .pika-button { box-shadow: none; }
.pika-single .pika-button:hover { font-weight: bold; }


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

.popup-component .popup-container {
   opacity: 0;

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

.popup-component.cActive .popup-container {
   opacity: 1;
}

.popup-component.cInactiveBefore .popup-container {
   opacity: 1;
}

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

.popup-container .header .role-title {
   border-bottom: 2px solid rgba(40,125,179,.85);
   z-index: 1;
}

.popup-container .content-container { padding: 0 10px; }

.popup-container .content-container .content-section,
.popup-container .role-buttons-container,
.popup-container .role-content,
.popup-container .role-locale-body {
   border-bottom: 1px solid rgba(100,100,100,.25);
   margin-top: 0;
   padding: 20px 0;
}

.popup-container .role-buttons-container { display: table; }
.no-buttons .popup-container .role-buttons-container { display: none; }
.popup-container .button-container { display: table-cell; }

.popup-container .role-buttons-container[data-num-buttons="2"] .button-container { width: 50%; }
.popup-container .role-buttons-container[data-num-buttons="3"] .button-container { width: 33.3%; }
.popup-container .role-buttons-container[data-num-buttons="4"] .button-container { width: 25%; }

.popup-container .button-container .popup-button { pointer-events: all; }

.popup-container .button-container .label-container {
   float: left;
   position: relative;
   width: 100%;
}

.popup-container .button-container .label-container .label {
   float: left;
   position: relative;
   text-align: center;
   width: 100%;
}

.popup-container .button-container .gui-menu-button {
   float: left;
   height: 30px;
   left: 50%;
   margin-top: 10px;
   position: relative;
   width: 30px;

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

.popup-container .button-container .gui-menu-button .icon { padding: 8px; }


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

.casper-vehicle.highlight .casper-vehicle-label:before {
   border-top-color: rgba(40,125,179,1);
}


/* ==================== *
 * ## Inactive Popup ##
 * ==================== */

.inactive-popup .role-buttons-container { height: auto; }
.inactive-popup .role-buttons-container .popup-button {
   clear: both;
   float: left;
   left: 0;
   margin: 5px 0 5px 50%;
   position: relative;
   top: 0;

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

.inactive-popup .role-buttons-container .popup-button .icon { padding: 8px; }
.inactive-popup .role-buttons-container .label {
   clear: both;
   float: left;
   position: relative;
   text-align: center;
   width: 100%;
}


/* ================== *
 * ## Newsitem Tab ##
 * ================== */

.casper-newsitem-tab .section-container > .header.title { font-size: 18px; }


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

.noise-level-period-label {
   float: left;
   font-size: 12px;
   padding: 0 5px;
   position: relative;
   width: 50%;
}

.noise-level-period-label + .noise-level-period-label { text-align: right; }

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

.runway-use-component {
   float: left;
   position: relative;
   width: 100%;
}

.runway-use-component .role-situation .info-cell.value .rwy:before {
   border-radius: 50%;
   content: "";
   height: 10px;
   left: 0;
   position: absolute;
   top: 50%;
   width: 10px;

   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}
.runway-use-component .role-situation .info-row.inbound .info-cell.value .rwy:before { background-color: #FFC000; }
.runway-use-component .role-situation .info-row.outbound .info-cell.value .rwy:before { background-color: #65B1E6; }

.runway-use-component .role-situation .info-cell.value .rwy {
   float: left;
   line-height: 18px;
   padding-left: 15px;
   position: relative;
}
.runway-use-component .role-situation .info-cell.value .rwy:not(:first-child) { margin-left: 15px; }
.runway-use-component .role-situation .info-cell.value .rwy span.code {
   font-size: 11px;
   font-style: italic;
   padding-left: 3px;
}

.runway-use-component.no-runway-use-data .role-description,
.runway-use-component.no-runway-use-data .role-explanation,
.runway-use-component.no-runway-use-data .role-legend,
.runway-use-component.no-runway-use-data .role-situation {
   display: none;
}


/* ================== *
 * ## Speed Slider ##
 * ================== */

.speed-slider-component[data-value="1"] .slider-button-text,
.speed-slider-component[data-value="2"] .slider-button-text,
.speed-slider-component[data-value="5"] .slider-button-text,
.speed-slider-component[data-value="10"] .slider-button-text,
.speed-slider-component[data-value="25"] .slider-button-text,
.speed-slider-component[data-value="50"] .slider-button-text {
   font-size: 16px;
}

.speed-slider-component[data-value="100"] .slider-button-text { font-size: 11px; }


/* =============== *
 * ## SVG Icons ##
 * =============== */

#calendarPeriod #background #lower { opacity: .25; }
#winddir #ring { opacity: .5; }


/* ============ *
 * ## Swiper ##
 * ============ */

.swiper-pagination .swiper-pagination-bullet { opacity: .5; }
.swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }


/* ============================ *
  * ## Track Preset Component ##
  * ============================ */

.track-preset-component {
   float: left;
   position: relative;
   width: 100%;
}

.track-preset-component .radio-button {
   float: left;
   height: 30px;
   margin-bottom: 10px;
   position: relative;
   width: 100%;
}

.track-preset-component .radio-button .label { padding-left: 10px; }
.track-preset-component .radio-button .times {
   float: right;
   height: 100%;
   line-height: 30px;
   position: relative;
}


/* ================= *
 * ## value wheel ##
 * ================= */

.value-display .value:first-child, .value-display .value:last-child { font-size: 10px; }


/* =================================== *
 * ## GUI Message / Popup Component ##
 * =================================== */

.gui-newsitem-component {
   bottom: 20px;
   overflow: hidden;
   pointer-events: all;
   position: absolute;
   right: 20px;
   width: 300px;
}

.gui-newsitem-component .content-container,
.gui-newsitem-component .header-container,
.popup-component .content-container,
.popup-component .header-container {
   clear: both;
   float: left;
   overflow: hidden;
   pointer-events: none;
   position: relative;
   width: 100%;
}

.popup-component .content-container a {
   pointer-events: all;
   text-decoration: none;
}

.gui-newsitem-component .content-container,
.popup-component .content-container {
   border-style: solid;
   border-width: 0 1px 1px 1px;
   padding: 7px;
}

.gui-newsitem-component .header-container,
.popup-component .header-container {
   border-style: solid;
   border-width: 0 0 1px 0;
   height: 32px;
}

.gui-newsitem-component .content-container .content-border,
.gui-newsitem-component .content-container .content-fill,
.gui-newsitem-component .content-container .role-body,
.gui-newsitem-component .header-container .role-header,
.popup-component .content-container .content-border,
.popup-component .content-container .content-fill,
.popup-component .header-container .role-header {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
   z-index: 1;
}

/* ## content container ## */
.gui-newsitem-component .content-container .content-border,
.popup-component .content-container .content-border {
   border: 2px solid rgba(255,255,255,.5);
   border-radius: 15px;
   padding: 3px;
}
.popup-component .content-container .content-border + .content-border { margin-top: 10px; }

.gui-newsitem-component .content-container .content-fill,
.popup-component .content-container .content-fill {
   border-radius: 10px;
   padding: 0 11px 0px 11px;
}

.popup-component .content-container .content {
   float: left;
   position: relative;
   width: 100%;
}

.gui-newsitem-component .content-container .role-body a {
   cursor: pointer;
   pointer-events: all;
}

.gui-newsitem-component .content-container .role-news-items {
   padding-bottom: 50px;
   pointer-events: none;
}
.gui-newsitem-component .content-container .swiper-container { pointer-events: all; }
.gui-newsitem-component .role-news-items .casper-message a {
   cursor: pointer;
   pointer-events: all;
}

.gui-newsitem-component .content-container .role-news-items .newsitem .header {
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

/* ## header container ## */
.gui-newsitem-component .header-container .role-header,
.popup-component .header-container .role-header {
   line-height: 32px;
   text-align: center;
}

/* ## background container ## */
.gui-newsitem-component .background-container,
.popup-component .background-container {
   height: 100vh;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100vw;
   z-index: 0;
}

.gui-newsitem-component .background-container .gradient,
.gui-newsitem-component .background-container .visual,
.popup-component .background-container .gradient,
.popup-component .background-container .visual {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.gui-newsitem-component .background-container .visual,
.popup-component .background-container .visual { z-index: 1; }

.gui-newsitem-component .background-container .visual #lines,
.popup-component .background-container .visual #lines {
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .gui-newsitem-component .background-container .visual #lines,
.br-edge .popup-component .background-container .visual #lines,
.br-ie .gui-newsitem-component .background-container .visual #lines,
.br-ie .popup-component .background-container .visual #lines { stroke-width: 0px; }

.gui-newsitem-component .background-container .visual #lines > path,
.popup-component .background-container .visual #lines > path { vector-effect: inherit; }

/** header background **/
.gui-newsitem-component .role-header-bg .gradient,
.popup-component .background-container .gradient, {z-index: 0; }

.gui-newsitem-component .role-header-bg .visual #shapes,
.popup-component .role-header-bg .visual #shapes { opacity: .03; }
.gui-newsitem-component .role-header-bg .visual #lines,
.popup-component .role-header-bg .visual #lines { opacity: .06; }

/** Content background **/
.gui-newsitem-component .role-content-bg .visual #shapes,
.popup-component .role-content-bg .visual #shapes { fill: rgba(0,0,0,.02); }
.gui-newsitem-component .role-content-bg  .visual #lines,
.popup-component .role-content-bg .visual #lines { stroke: rgba(0,0,0,.03); }

.gui-newsitem-component .content-container .content-fill { padding-bottom: 30px; }

.gui-newsitem-component .newsitem-container .body {
   max-height: 200px;
   overflow-y: auto;
   pointer-events: all;
}
.gui-newsitem-component .newsitem-container .body * { pointer-events: none; }
.gui-newsitem-component .newsitem-container .body a { pointer-events: all; }


.gui-newsitem-component .newsitem-menu {
   bottom: 25px;
   left: 50%;
   position: absolute;
}

.gui-newsitem-component .newsitem-menu .menu-button {
   height: 30px;
   width: 30px;
}

.gui-newsitem-component .newsitem-menu .menu-button .icon-container .icon { padding: 8px; }

.gui-newsitem-component .role-header,
.gui-newsitem-component .role-body {
   z-index: 1;
}

.gui-newsitem-component .section-menu { bottom: 35px; }
.gui-newsitem-component .swiper-navigation { bottom: 10px; }


/* ===================== *
 * ## Login Component ##
* ====================== */

.login-component {
   left: 50%;
   position: absolute;
   top: 50%;
   width: 300px;

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

.login-component .content {
   float: left;
   padding: 30px 0 15px 0;
   position: relative;
   width: 100%;
   z-index: 1;
}

.login-component .header,
.login-component .footer {
   height: 30px;
   left: 0;
   line-height: 30px;
   position: absolute;
   width: 100%;
   z-index: 2;
}

.login-component .header {
   height: 30px;
   pointer-events: none;
   top: -1px;
}

.login-component .footer {
   bottom: -1px;
   height: 15px;
}

.login-component .background-container,
.login-component .gradient-container,
.login-component .visual-container {
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;
}

.login-component .background-container .gradient,
.login-component .gradient-container .gradient,
.login-component .visual-container .visual {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.login-component .background-container .gradient { z-index: 1; }
.login-component .visual-container .visual { z-index: 2; }

.login-component .visual-container .visual #shapes path { opacity: .03; }
.login-component .visual-container .visual #lines {
   opacity: .06;
   stroke-width: .5px;
   vector-effect: non-scaling-stroke;
}

.login-component .header .title { text-align: center; }

.login-component .role-form,
.login-component .role-form .login-elements {
   float: left;
   position: relative;
   width: 100%;
}

.login-component .role-form { padding: 0 20px; }
.login-component .role-form .login-elements {
   padding: 10px 20px;
   z-index: 1;
}

.login-component .login-button-container {
   border-top: 1px solid rgba(100,100,100,.25);
   float: left;
   margin-top: 10px;
   padding-top: 10px;
   position: relative;
   text-align: center;
   width: 100%;
}

.login-component .login-button-container .role-submit {
   border-radius: 15px;
   cursor: pointer;
   height: 30px;
   float: left;
   font-size: 16px;
   left: 50%;
   line-height: 30px;
   padding: 0 15px;
   position: relative;
   text-transform: uppercase;
   
   transform: translate(-50%, 0);
}


/* ==================== *
 * ## Holding Stacks ##
 * ==================== */

.holding-stacks-tab .content-scroll-container > .content {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.holding-stacks-tab .content-scroll-container > .content .holding-stack-list {
   flex-grow: 1;
}


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

.runway-use-info-container {
   font-size: 12px;
}


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

.runway-use-component .explanation-container,
.runway-use-component .role-explanation,
.runway-use-component .role-situation,
.runway-use-component .role-visualContainer,
.runway-use-component .visual-container {
   float: left;
   position: relative;
   width: 100%;
}

.runway-use-component .role-legend {
   display: flex;
   float: left;
   justify-content: space-evenly;
   position: relative;
   width: 100%;
}

.runway-use-component .role-legend .legend-item {
   font-size: 12px;
   line-height: 20px;
   padding-left: 20px;
   position: relative;
}

.runway-use-component .role-legend .legend-item:after {
   border-radius: 50%;
   content: "";
   height: 10px;
   left: 10px;
   position: absolute;
   top: 10px;
   width: 10px;

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

.runway-use-component .section-sub-header span.period { padding: 0 6px; }

.runway-use-component .visual-container {
   height: 200px;

   transition: padding-right .5s;
   -webkit-transition: padding-right .5s;
}

.runway-use-component .role-visualContainer {
   height: 100%;
   opacity: 1;

   transform: translate(0,0);
   transition-property: transform;
   transition-duration: 0s;

   -webkit-transform: translate(0,0);
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 0s;
}

.runway-use-component.transitioning .role-visualContainer {
   transition-duration: .5s;
   -webkit-transition-duration: .5s;
}
.runway-use-component.transitioning .role-visualContainer.transition-next {
   transform: translate(-100%,0);
   -webkit-transform: translate(-100%,0);
}
.runway-use-component.transitioning .role-visualContainer.transition-prev {
   transform: translate(100%,0);
   -webkit-transform: translate(100%,0);
}


.runway-use-component .role-visualContainer .role-visualCurr,
.runway-use-component .role-visualContainer .role-visualNext,
.runway-use-component .role-visualContainer .role-visualPrev {
   height: 100%;
   padding-right: 25px;
   position: absolute;
   top: 0;
   width: 100%;
}

.runway-use-component .role-visualContainer .role-visualCurr { left: 0; }
.runway-use-component .role-visualContainer .role-visualNext { left: 100%; }
.runway-use-component .role-visualContainer .role-visualPrev { left: -100%; }

.runway-use-component .visual-container .role-noRunwayUse {
   font-size: 18px;
   left: 0;
   padding-right: 50px;
   position: absolute;
   text-align: center;
   top: 50%;
   transform: translate(0,-50%);
   transition: padding-right .5s;
   width: 100%;
   z-index: 1;

   -webkit-transform: translate(0,-50%);
   -webkit-transition: padding-right .5s;
}

.runway-use-component.no-runway-use-data .visual-container { padding-right: 0px; }
.runway-use-component.no-runway-use-data .visual-container .role-noRunwayUse { padding-right: 0px; }
.runway-use-component.no-runway-use-data .visual-container .role-visualContainer { opacity: .5; }

.runway-use-component .role-explanation {
   font-size: 12px;
   min-height: 100px;
}

.runway-use-component .meteo-container {
   opacity: 1;
   position: absolute;
   right: 0;
   top: 50%;
   width: 64px;

   transform: translate(0,-50%);
   transition: opacity .5s, width .5s;

   -webkit-transform: translate(0,-50%);
   -webkit-transition: opacity .5s, width .5s;
}

.runway-use-component.no-runway-use-data .meteo-container {
   opacity: 0;
   width: 0px;
}

.runway-use-component .situation-button {
   cursor: pointer;
   height: 16px;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 16px;

   transition: opacity .5s;
   -webkit-transition: opacity .5s;
}
.runway-use-component .situation-button.active { opacity: 1; }
.runway-use-component .situation-button.inactive { opacity: .25; }
.runway-use-component .situation-button.disabled { display: none; }

.runway-use-component .situation-button,
.runway-use-component .situation-button:active,
.runway-use-component .situation-button:focus {
   outline: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.situation-button.role-prev {
   left: 0;
   margin-left: 6px;
}
.situation-button.role-next {
   margin-right: 6px;
   right: 0;
}


/* ========================= *
 * ## Runway Use Feedback ##
 * ========================= */

.runway-use-component .feedback-container,
.runway-use-component .feedback-container .feedback-btn-container,
.runway-use-component .feedback-container .feedback-header,
.runway-use-component .feedback-container .feedback-info {
   float: left;
   position: relative;
   width: 100%;
}

.runway-use-component .feedback-container .feedback-info {
   padding: 12px 6px 0 6px;
   font-size: 12px;
}
.runway-use-component .feedback-container .feedback-info ul { padding-left: 24px; }

.runway-use-component .feedback-btn-container .feedback-btn-button-container {
   float: left;
   height: 40px;
   position: relative;
   width: 33.3%;
}

.runway-use-component .feedback-btn-button-container .gui-menu-button {
   height: 40px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 40px;

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

.feedback-btn.role-feedbackBad .icon { transform: rotate(180deg); }


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

.runway-use-component .meteo-component {
   //border-left: 1px solid rgba(100,100,100,.25);
   height: 100%;
   padding-right: 24px;
}

.runway-use-component .meteo-component,
.runway-use-component .meteo-component .meteo-wind-speed-visual,
.runway-use-component .meteo-component .role-visualContainer,
.runway-use-component .meteo-component .winddir-container {
   float: left;
   position: relative;
   width: 100%;
}

.runway-use-component .meteo-component .meteo-wind-speed-visual,
.runway-use-component .meteo-component .role-visual,
.runway-use-component .meteo-component .role-visualContainer,
.runway-use-component .meteo-component .winddir-container { clear: both; }

.runway-use-component .meteo-component .meteo-wind-speed-visual,
.runway-use-component .meteo-component .role-visual,
.runway-use-component .meteo-component .role-visualContainer { margin-bottom: 20px; }

.runway-use-component .meteo-component .meteo-wind-speed-visual,
.runway-use-component .meteo-component .meteo-wind-direction-visual,
.runway-use-component .meteo-component .role-visual,
.runway-use-component .meteo-component .role-visualContainer {
   height: 40px;
}

.meteo-component .winddir-container .role-windDirVisual,
.meteo-component .winddir-container .role-windDir {
   clear: both;
   float: left;
   position: relative;
   width: 100%;
}

.meteo-component .winddir-container .role-windDirVisual { margin-bottom: 5px; }
.meteo-component .winddir-container .role-windDirVisual svg {
   transform: rotate(0deg);
   transition: transform .5s;
}

.meteo-component .winddir-container .role-windDir {
   font-size: 16px;
   line-height: 20px;
   text-align: center;
}

.meteo-component .weather-vane-pole { fill: rgba(0,0,0,.33); }
.meteo-component .weather-vane { stroke: rgba(0,0,0,.33); }


/* ================ *
 * ## Highcharts ##
 * ================ */

.highcharts-container svg text { font-family: 'Roboto', sans-serif; }
.highcharts-container svg text .highcharts-text-outline { /display: none; }


/* ============================ *
 * ## Vertical Profile Chart ##
 * ============================ */

.content-container .content > .vp-chart {
   margin-top: 0;
   overflow: hidden;
}


/* ======================= *
 * ## Near Home Airport ##
 * ======================= */

.near-home-airport-description {
   font-size: 12px;
}

.near-home-airport-tab .casper-tab-section-container {
   padding-bottom: 50px;
}

.near-home-airport-tab .option-list-item .gui-menu-label {
   background: var(--white);
}

/* ============ *
 * ## Layers ##
 * ============ */

.airports-layer .airport-icon-container {
   height: 28px;
   width: 28px;
}

.airports-layer .airport-icon-container .map-icon {
   height: 100%;
   padding: 6px;
   position: absolute;
   width: 100%;
}

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

.airports-layer .airport-icon-container .map-icon { fill: #FFF; }

.airports-layer .airport-icon-container .bg {
   border-radius: 50%;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;

   background-color: #7BB03E;
}

.airport-layer { z-index: 6; }