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

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

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

.flighttracking-header { height: 100px; }

.flighttracking-header .holdings-container {
   flex: 1 0 100%;
   position: relative;
   z-index: 2;
}

.flighttracking-header .fill-container,
.flighttracking-header .holdings-container,
.flighttracking-header .meteo-container {
   height: 50%;
}

.flighttracking-header .holdings-container { padding-left: 350px; }

.flighttracking-header .holdings-container .holdings-overview {
   align-items: center;
   display: flex;
   float: left;
   left: 50%;
   line-height: 24px;
   position: relative;
   top: 50%;

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

.flighttracking-header .holdings-container .border-container {
   height: 1px;
   padding: 0 10px;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 3;
}

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

.flighttracking-header .holdings-overview .icon {
   height: 24px;
   margin-right: 10px;
   width: 24px;
}

.flighttracking-header .holdings-overview .holding-info {
   display: flex;
}

.flighttracking-header .holding-info .holding-stack-info { margin-left: 10px; }
.flighttracking-header .holding-info .holding-stack-info .background {
   border-radius: 14px;
   padding: 2px 6px;
}

.flighttracking-header .holding-info .holding-stack-info .trend { padding-left: 5px; }

.flighttracking-header .holding-info .holding-stack-info .t_inc .trend:after { content: "\25B2"; }
.flighttracking-header .holding-info .holding-stack-info .t_dec .trend:after { content: "\25BC"; }

.flighttracking-header .holding-info .holding-stack-info .encapsulate {
   margin-left: 5px;
}

.flighttracking-header .overflow-container { top: 100px; }

/* ========================= *
 * ## Flighttracking Menu ##
 * ========================= */

.flighttracking-menu.gui-menu { padding-top: 100px; }


/* ================= *
 * ## Hover label ##
 * ================= */

.gui-component .role-hover-label { margin-top: 50px; }


/* ======================== *
 * ## Hover label (menu) ##
 * ======================== */

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


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

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


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

.language-container {
   float: left;
   height: 40px;
   margin-bottom: 10px;
   margin-top: 40px !important;
   position: relative;
   width: 100%;
}

.language-container .language-button-container {
   display: none;
   float: left;
   height: 100%;
   position: relative;
   width: 50%;
}


.splash-guide-popup-component[data-language="en_US"] #HU,
.splash-guide-popup-component[data-language="en_US"] #CH,
.splash-guide-popup-component[data-language="hu_HU"] #UK,
.splash-guide-popup-component[data-language="hu_HU"] #CH,
.splash-guide-popup-component[data-language="zh_CN"] #UK,
.splash-guide-popup-component[data-language="zh_CN"] #HU {
   display: block;
}

.language-container .language-button {
   height: 100%;
   left: 50%;
   pointer-events: all;
   position: absolute;
   width: 40px;  

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

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

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


.language-container .language-button .icon-container {
   border-radius: inherit;
   float: left;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
}

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

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