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

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

.display-component.cInactiveToActive,
.display-component.cActiveToInactive {
   transition-property: 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;
}

.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: 406px;

   transition: padding-left .33s
}

.flighttracking-header .header-container .datetime-container {
   opacity: 1;
   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%);
}

.flighttracking-header .logo-container .logo .icon  { padding: 10px; }

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

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

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

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


/** Meteo Container **/
.flighttracking-header .meteo-container {
   height: 100%;
   left: 0;
   padding: 12px 0;
   position: absolute;
   top: 0;
   transform: translate(56px, 0);
   width: 350px;
   z-index: 2;

   transition: transform .33s;
}

.flighttracking-header .meteo-component .container {
   align-items: center;
   display: flex;
}
.flighttracking-header .meteo-component .meteo-elemen { flex: 1 0 auto; }

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

.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;
   white-space: nowrap;
}

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

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

/** track period **/
.flighttracking-header .header-container .track-period-container {
   cursor: pointer;
   left: 50%;
   opacity: 1;
   position: absolute;
   top: 50%;

   transform: translate(-50%, -50%);
   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 .component-container .border-container,
.flighttracking-header .fill-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 .component-container .border-container .border,
.flighttracking-header .fill-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 .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);
}
.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;
}
.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); }
.flighttracking-header .role-hover-label.align-left .content-container { transform: translate(0, 60px); }
.flighttracking-header .role-hover-label.align-right .content-container { 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%); }

.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); }
.gui-component.menu-expanded .display-component > .display-container > .background-container .background { transform: translate(-200px, -52px); }

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

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

.gui-component.menu-expanded .flighttracking-header .meteo-container { transform: translate(200px, 0); }


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

.gui-newsitem-component {
   bottom: 20px;
   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%;
}

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

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

.gui-newsitem-component .content-container .role-news-items {
   padding-bottom: 40px;
   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;
}

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


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

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



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

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

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

.track-period-container .track-period-display {
   left: 50%;
   transform: translate(-50%,0);
}

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