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

.splash-guide-popup-component .busy-logo { border-width: 0; }
.splash-guide-popup-component .role-continue-btn {
   border-radius: 16px;
   height: 32px;
   float: left;
   left: 50%;
   pointer-events: all;
   position: relative;
   top: 50%;
   width: 32px;

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

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

.casper-tab { padding: 7px; }

.casper-tab .swiper-navigation {
   bottom: 10px;
   z-index: 2;
}

.casper-tab-section.scroll-enabled .content { padding-right: 10px; }


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

.display-component {
   height: 100%;
   padding-top: 52px;
   position: absolute;
   top: 0;

   transform: translate(56px, 0);
   transition-property: transform;
   transition-duration: .33s;

   -webkit-transform: translate(56px, 0);
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: .33s;
}

.display-component.cInactiveToActive,
.display-component.cActiveToInactive {
   transition-property: transform, width;
   -webkit-transition-property: -webkit-transform, width;
}

.display-component.cActiveBefore,
.display-component.cInactiveTransition,
.display-component.cInactive {
   opacity: 1;
   width: 0;
}

.display-component.cActiveTransition,
.display-component.cActive,
.display-component.cInactiveBefore { width: 350px; }

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

.display-component > .display-container .background-container,
.display-component > .display-container .content-container {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.display-component > .display-container > .background-container {
   overflow: hidden;
   pointer-events: none;
   top: 0;
   z-index: 0;
}
.display-component > .display-container > .background-container .border {
   border-right: 1px solid rgba(0,0,0,.2);
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.display-component > .display-container > .content-container {
   pointer-events: all;
   z-index: 1;
}

.display-component > .display-container > .background-container .background {
   height: 100vh;
   left: -0;
   position: absolute;
   top: -0;
   width: 100vw;
   z-index: 1;

   transform: translate(-56px, -52px);
   transition: transform .33s;

   -webkit-transform: translate(-56px, -52px);
   -webkit-transition: -webkit-transform .33s;
}

.display-component > .display-container > .background-container .background #shapes { fill: rgba(0,0,0,.01); }
.display-component > .display-container > .background-container .background #lines {
   stroke: rgba(0,0,0,.02);
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .display-component > .display-container > .background-container .background #lines,
.br-ie .display-component > .display-container > .background-container .background #lines { stroke-width: 0px; }

.display-component > .display-container > .background-container .background #lines > path { vector-effect: inherit; }


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

.flighttracking-date-time-menu .groups-container { max-width: 200px; }


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

/** Header Container **/
.flighttracking-header .header-container {
   padding-left: 56px;

   transition: padding-left .33s;
   -webkit-transition: padding-left .33s;
}

.flighttracking-header .header-container .datetime-container {
   opacity: 1;

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

/** Logo Container **/
.flighttracking-header .logo-container {
   height: 100%;
   overflow: hidden;
   position: absolute;
   z-index: 2;
}

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

.flighttracking-header .logo-container .logo .icon,
.flighttracking-header .logo-container .logo .text {
   position: absolute;
   top: 50%;

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

.flighttracking-header .logo-container .logo .icon  {
   height: 100%;
   padding: 10px;
   width: 100%;
}

/* ## casper logo ## */
.flighttracking-header .logo-container.casper-logo {
   left: 0;
   width: 56px;

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

.flighttracking-header .logo-container.casper-logo .logo {
   max-width: 54px;
}

.flighttracking-header .logo-container.casper-logo .logo .icon {
   left: 50%;
   width: 100%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
}

.flighttracking-header .logo-container.casper-logo .logo .text {
   height: 24px;
   left: 0;
   opacity: 0;
   transform: translate(72px, -50%);
   transition-property: opacity, transform;
   transition-duration: .33s;

   -webkit-transform: translate(72px, -50%);
   -webkit-transition-property: opacity, -webkit-transform;
   -webkit-transition-duration: .33s;
}

/* ## client logo ## */
.flighttracking-header .logo-container.client-logo { right: 0; }

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

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


/** Meteo Container **/
.flighttracking-header .meteo-container {
   flex: 0 1 350px;
   height: 100%;
   padding: 12px 0;
   position: relative;
   z-index: 2;
}

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

.flighttracking-header .meteo-component .role-visual svg,
.flighttracking-header .meteo-component .role-windDirVisual svg,
.flighttracking-header .meteo-component .role-windSpeedVisual svg {
   height: 100%;
   width: 28px;
}

.flighttracking-header .meteo-component {
   left: 50%;
   pointer-events: none;

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

.flighttracking-header .meteo-component .meteo-element { margin-left: 10px; }
.flighttracking-header .meteo-component .meteo-element:first-child { margin-left: 0px; }

.flighttracking-header .meteo-component .role-temperature {
   font-size: 20px;
   line-height: 28px;
}

.flighttracking-header .meteo-component .role-windDir,
.flighttracking-header .meteo-component .role-windSpeed {
   text-transform: lowercase;
}

.flighttracking-header .meteo-component .role-windDir {
   height: auto;
   line-height: 14px;
   top: 50%;

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

.flighttracking-header .meteo-container .role-windDir span {
   float: left;
   position: relative;
}
.flighttracking-header .meteo-container .role-windDir span + span { margin-left: 5px; }
.flighttracking-header .meteo-container .role-windDir span + span + span {
   clear: both;
   margin-left: 0;
}

.flighttracking-header .meteo-component .role-windSpeed {
   line-height: 28px;
   white-space: nowrap;
}

.flighttracking-header .meteo-component .role-windDirVisual,
.flighttracking-header .meteo-component .role-windSpeedVisual {
   margin-left: 20px;
}

.flighttracking-header .meteo-component .role-windSpeedVisual {
   margin-left: 10px;
   width: 32px;
}

.flighttracking-header .meteo-component .role-windSpeedVisual .weather-vane-pole { opacity: .5; }
.flighttracking-header .meteo-component .role-windSpeedVisual #rope { stroke-width: 1px; }

/** Fill container **/
.flighttracking-header .fill-container {
   flex: 1;
}

/** track period **/
.flighttracking-header .header-container .track-period-container {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: center;
   opacity: 1;
   position: absolute;
   top: 50%;
   width: 100%;

   transform: translate(0, -50%);
   transition: opacity .33s, top .33s;

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

.flighttracking-header .header-container .track-period-container.track-preset-none {
   opacity: 0;
   top: -50%;
}

.flighttracking-header .header-container .track-period-container.track-preset-none + .datetime-container {
   opacity: 1;
   top: 50%;
}

.flighttracking-header .header-container .track-period-container.track-preset-valid + .datetime-container {
   opacity: 0;
   top: 150%;
}


/** Borders **/
.flighttracking-header .header-flex-container .border-container,
.flighttracking-header .logo-container .border-container,
.flighttracking-header .meteo-container .border-container {
   height: 100%;
   padding: 10px 0;
   position: absolute;
   right: 0;
   top: 0;
   width: 1px;
   z-index: 3;
}

.flighttracking-header .header-flex-container .border-container .border,
.flighttracking-header .logo-container .border-container .border,
.flighttracking-header .meteo-container .border-container .border {
   float: left;
   height: 100%;
   opacity: .5;
   position: relative;
   width: 100%;
}

.flighttracking-header .logo-container.client-logo .border-container { left: 0; }

.flighttracking-header .role-hover-label.inactive .label-container .label { opacity: .75; }


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

.features-list { z-index: 1 }

.features-list .feature {
   height: 48px;
   line-height: 48px;
}

.features-list .feature .image {
   padding: 8px 12px;
   width: 48px;
}
.features-list .feature.expand .image { padding: 14px 6px; }
.features-list .feature.expand .image .line-container { padding-left: 0px; }

.features-list .feature .image .icon {
   height: 100%;
   width: 100%;
}

.guide-text .menu-list-bg {
   height: 100%;
   opacity: .9;
   overflow: hidden;
   position: absolute;
   right: 0;
   width: 50px;
   z-index: 0;
}

.guide-text .menu-list-bg > .gradient-container,
.guide-text .menu-list-bg > .visual-container,
.guide-text .menu-list-bg .gradient {
   height: 100%;
   width: 100%;
}

.guide-text .menu-list-bg .gradient {
   float: left;
   position: relative;
}

.guide-text .menu-list-bg > .gradient-container,
.guide-text .menu-list-bg > .visual-container {
   left: 0;
   position: absolute;
   top: 0;
}

.guide-text .menu-list-bg > .gradient-container {
   opacity: .75;
   z-index: 1;
}
.guide-text .menu-list-bg > .visual-container { z-index: 2; }
.guide-text .menu-list-bg > .visual-container .visual { height: 100%; }
.guide-text .menu-list-bg > .visual-container .visual #shapes { opacity: .04; }
.guide-text .menu-list-bg > .visual-container .visual #lines {
   opacity: .15;
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

.br-edge .guide-text .menu-list-bg > .visual-container .visual #lines,
.br-ie .guide-text .menu-list-bg > .visual-container .visual #lines { stroke-width: 0px; }

.guide-text .menu-list-bg > .visual-container .visual #lines > path { vector-effect: inherit; }

/**
 * buttons
 */
.guide-container .guide-pc-button-container {
   height: 40px;
   width: 40px;
}

.guide-container .guide-pc-button-container .guide-button { padding: 8px; }
.guide-container .guide-pc-button-container .guide-button svg {
   position: relative;
   z-index: 1;
}

.guide-container .guide-pc-button-container .guide-button-bg-dark {
   height: 100%;
   left: 0;
   opacity: .75;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;
}


/* ============== *
 * ## Hover Label
 * ============== */

.gui-component .role-hover-label,
.gui-component .role-hover-label .content-container {
   left: 0;
   position: absolute;
   top: 0;
}

.gui-component .role-hover-label {
   height: 40px;

   transform: translate(-9999px,-9999px);
   -webkit-transform: translate(-9999px,-9999px);
}
.gui-component .role-hover-label.small-label { height: 30px; }

.gui-component .role-hover-label .content-container {
   border-radius: 20px;
   height: 100%;
   opacity: 0;
   overflow: hidden;
   padding: 0 20px;
   pointer-events: all;

   transition: opacity .33s;
   -webkit-transition: opacity .33s;
}
.gui-component .role-hover-label.small-label .content-container {
   border-radius: 15px;
   padding: 0 15px;
}

.gui-component .role-hover-label.hide-label .content-container { opacity: 0; }
.gui-component .role-hover-label.show-label .content-container { opacity: 1; }
.gui-component.menu-expanded .role-hover-label .content-container { opacity: 0; }

.gui-component .role-hover-label .background-container,
.gui-component .role-hover-label .label-container {
   pointer-events: none;
}

.gui-component .role-hover-label .label-container,
.gui-component .role-hover-label .label-container .label {
   height: 100%;
   float: left;
   position: relative;
}

.gui-component .role-hover-label .label-container { z-index: 1; }
.gui-component .role-hover-label .label-container .label {
   font-size: 10px;
   line-height: 40px;
   text-transform: uppercase;
   white-space: nowrap;
}
.gui-component .role-hover-label.small-label .label-container .label { line-height: 30px; }

.gui-component .role-hover-label .background-container,
.gui-component .role-hover-label .background-container .gradient {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.gui-component .role-hover-label .background-container { z-index: 0; }

.gui-component .role-hover-label .background-container .gradient-container,
.gui-component .role-hover-label .background-container .visual {
   height: 100vh;
   opacity: .9;
   position: absolute;
   width: 100vw;
}

.gui-component .role-hover-label .background-container .gradient.light { z-index: 0; }

.gui-component .role-hover-label .background-container .gradient-container { z-index: 0; }
.gui-component .role-hover-label .background-container .visual { z-index: 2; }

.gui-component .role-hover-label .background-container .visual #shapes { fill: rgba(255,255,255,.04); }
.gui-component .role-hover-label .background-container .visual #lines {
   stroke: rgba(255,255,255,.15);
   stroke-width: 1px;
   vector-effect: non-scaling-stroke;
}

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

.gui-component .role-hover-label .background-container .visual #lines > path { vector-effect: inherit; }


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

.flighttracking-header .role-hover-label.align-center .content-container {
   transform: translate(-50%, 60px);
   -webkit-transform: translate(-50%, 60px);
}
.flighttracking-header .role-hover-label.align-left .content-container {
   transform: translate(0, 60px);
   -webkit-transform: translate(0, 60px);
}
.flighttracking-header .role-hover-label.align-right .content-container {
   transform: translate(-100%, 60px);
   -webkit-transform: translate(-100%, 60px);
}

.flighttracking-header .role-hover-label .background-container .gradient-container,
.flighttracking-header .role-hover-label .background-container .visual { top: -60px; }

.flighttracking-header .role-hover-label.align-center .background-container .gradient-container,
.flighttracking-header .role-hover-label.align-center .background-container .visual { left: 50%; }

.flighttracking-header .role-hover-label.align-left .background-container .gradient-container,
.flighttracking-header .role-hover-label.align-left .background-container .visual { left: 0; }

.flighttracking-header .role-hover-label.align-right .background-container .gradient-container,
.flighttracking-header .role-hover-label.align-right .background-container .visual { left: 100%; }


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

.main-menu .role-hover-label .content-container {
   transform: translate(66px, -50%);
   -webkit-transform: translate(66px, -50%);
}

.main-menu .role-hover-label .background-container .gradient-container,
.main-menu .role-hover-label .background-container .visual {
   left: -66px;
   top: 50%;
}

.main-menu .role-hover-label .background-container .gradient.dark {
   opacity: .75;
   z-index: 1;
}

.main-menu .role-hover-label.inactive .label-container .label { opacity: .5; }


/* =================== *
 * ## GUI Component ##
 * =================== */

.gui-container > .gui-component {
   height: 100%;
   pointer-events: none;
   position: absolute;
   width: 100%;
   z-index: 0;
}


/* ============================================== *
 * ## GUI Component - Menu Expanded Overwrites ##
 * ============================================== */

.gui-component.menu-expanded .display-component { 
   transform: translate(200px, 0);
   -webkit-transform: translate(200px, 0);
}
.gui-component.menu-expanded .display-component > .display-container > .background-container .background {
   transform: translate(-200px, -52px);
   -webkit-transform: translate(-200px, -52px);
}

.gui-component.menu-expanded .flighttracking-header .header-container { padding-left: 200px; }

.gui-component.menu-expanded .flighttracking-header .casper-logo { width: 200px; }
.gui-component.menu-expanded .flighttracking-header .casper-logo .text {
   opacity: 1;

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


/* =============== *
 * ## Guide Tab ##
 * =============== */

.guide-tab .content-container .content .section-sub-header:not(:first-child) { margin-top: 24px; }


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

.popup-container .language-container,
.popup-container .language-container .language-button-container {
   display: flex;
   flex-direction: row;
}

.popup-container .language-container .language-button-container {
   flex: 1;
   justify-content: center;
   margin-bottom: 10px;
}

.popup-container .language-container .language-button {
   height: 40px;
   margin-top: 30px;
   pointer-events: all;
   position: relative;
   width: 40px;
}

.popup-container .language-container .language-button .icon-container {
   border-radius: inherit;
   overflow: hidden;
}

.popup-container .language-container .language-button .icon-container .icon {
   height: 100%;
   left: 50%;
   padding: 0;
   width: auto;

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

.popup-container .language-container .language-button .label-container {
   left: 50%;
   position: absolute;
   top: -30px;

   transform: translate(-50%, 0);
}
.popup-container .language-container .language-button .label-container .label { white-space: nowrap; }


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

.list-component .list-row .list-cell {
   padding: 0 8px;
   position: relative;
   white-space: nowrap;
}

.list-component .role-list-container .list-row .list-cell { line-height: 20px; }

.list-component .list-row .list-cell:first-child { border-radius: 10px 0 0 10px; }
.list-component .list-row .list-cell:last-child { border-radius: 0 10px 10px 0; }


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

.gui-map-controls-component { top: 52px; }


/* ================== *
 * ## Settings Tab ##
 * ================== */

.settings-tab .content-container .content .section-sub-header:not(:first-child) { margin-top: 24px; }


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

.speed-slider-container {
   float: left;
   height: 50px;
   position: relative;
   width: 300px;
}

.slider-component {
   margin-bottom: 5px;
   padding: 0 30px;
}

.slider-component .slider-label { font-size: 12px; }

.slider-component .slider-button {
   height: 36px;
   width: 36px;
}
.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: 14px;
}
.slider-button .slider-button-text { line-height: 34px; }


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

.splash-guide-popup-component .busy-loading .overflow .text { font-size: 24px; }
.splash-guide-popup-component .role-content,
.splash-guide-popup-component .role-locale-body {
   text-align: center;
}

.splash-guide-popup-component .role-locale-button {
   cursor: pointer;
   float: left;
   font-size: 16px;
   left: 50%;
   pointer-events: all;
   position: absolute;
   top: 50%;
   white-space: nowrap;

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

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

.swiper-navigation {
   height: 30px;
   position: absolute;
   width: 100%;
}

.swiper-navigation .swiper-pagination {
   height: 12px;
   left: 50%;
   line-height: 12px;
   position: absolute;
   top: 50%;

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

.swiper-navigation .navigation-button {
   height: 100%;
   position: absolute;
   width: 30px;
}
.swiper-disabled .swiper-navigation .navigation-button { display: none; }

.swiper-navigation .navigation-button .icon { padding: 9px; }

.swiper-navigation .role-prev,
.swiper-navigation .role-swipe-prev { left: 10px; }
.swiper-navigation .role-next,
.swiper-navigation .role-swipe-next { right: 10px; }

.swiper-navigation .navigation-button.swiper-button-disabled {
   border-style: solid;
   border-width: 1px;
   cursor: default;
}

.swiper-pagination .swiper-pagination-bullet { margin: 0 4px;}

/* ========================== *
 * ## Track Period Display ##
 * ========================== */

.track-period-container .track-period-display,
.track-period-container .track-period-display .period-date,
.track-period-container .track-period-display .period-time {
   float: left;
   position: relative;
   white-space: nowrap;
}

.track-period-container .track-period-display {
   display: flex;
   flex-direction: row;
}

.track-period-container.track-same-day .from.period-time { padding-left: 20px; }
.track-period-container.track-same-day .upto.period-time { padding-left: 15px; }
.track-period-container.track-same-day .upto.period-time:after {
   content: "-";
   left: 5px;
   position: absolute;
   top: 0;
}

.track-period-container .from.period-time,
.track-period-container .upto.period-time { padding-left: 10px; }
.track-period-container .upto.period-date { padding-left: 24px; }
.track-period-container .upto.period-date:after {
   content: "-";
   left: 10px;
   position: absolute;
   top: 0;
}


/* ============= *
 * ## Leaflet ##
 * ============= */

.leaflet-control-container .leaflet-bottom.leaflet-left { left: 65px; }