
@font-face {
    font-family: "Roboto";
    src: url("/Fonts/RobotoMono-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal; }
  
@font-face {
    font-family: "Roboto-Light";
    src: url("/Fonts/RobotoMono-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal; }
  
@font-face {
    font-family: "Roboto-Bold";
    src: url("/Fonts/RobotoMono-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: "DejaVuSans-SemiBold";
    src: url("/Pms50/gtn750/Pages/VCockpit/Instruments/NavSystems/GPS/GTN750/Fonts/DejaVuSans-SemiBold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    }
        
@keyframes FlashVisibility {
    5%, 25% {
        visibility: hidden;
    }
    35%, 95% {
        visibility: visible;
    }
}

@keyframes slideLeftIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes slideRightIn {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}
@keyframes slideTopIn {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}

@keyframes slideBottomIn {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0%); }
}

@keyframes slideCenterIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Leaflet flashing on MSFS 2024 if we keep the mix-blend-mode */
.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: unset !important;
}



gtn750-element {
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
}

gtn750-element #MainframeGtn {
    width: 100%;
    height: 100vh;
    font-family: DejaVuSans-SemiBold;
    font-size: 2.5vh;
    line-height: 3vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #a7aec7;
    position: relative;
}

/* Init screen */
gtn750-element #MainframeGtn #InitScreen {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 4vh;
    line-height: 5vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
gtn750-element #MainframeGtn #InitScreen #InitScreenLogo img {
    width: 50vh;
}
gtn750-element #MainframeGtn #InitScreen #InitScreenTopInfo {
    margin-top: 3vh;
    text-align: center;
}
gtn750-element #MainframeGtn #InitScreen #InitScreenBottomInfo {
    margin-bottom: 3vh;
    text-align: center;
    font-size: 2.5vh;
}
gtn750-element #MainframeGtn #Brightness {
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

gtn750-element #MainframeGtn #VirtualMouse {
    z-index: 30;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 3vh;
    height: 3vh;
    display: none;
    background-color: white;
    border-radius: 50%;
    border: solid black;
    border-width: 0.5vh 0.5vh 0.5vh 0.5vh;
}
gtn750-element #MainframeGtn #VirtualMouse[state=Active] {
    display: block;
}


/* Main parts design */
gtn750-element #RadioPart {
    width: 100%;
    height: 17.5vh;
    background: linear-gradient(black, #333d47);
    border: solid #a8c6c6;
    border-width: 0 0 0.5vh 0;
    display: flex;
    overflow: hidden;
}

gtn750-element #MainPart {
    width: 100%;
    height: 69vh;
    background-color: #262834;
    position: relative;
    overflow: hidden;
}
gtn750-element #MainPart[state=PageUtilitiesCleanScreen] {
    height: 100%;
    position: absolute;
    z-index: 29;
    top: 0;
    left: 0;
}
gtn750-element #MainPart .page {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    left: 0;
}
gtn750-element #MainPart .page[state=Active], gtn750-element #MainPart .pageMenu[state=Active] {
    animation: slideRightIn 200ms;
}

/* Popup */
gtn750-element .popup {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    width: auto;
    height: auto;
    display: none;
    background-color: black;
    z-index: 2;
}
gtn750-element .popup[state=Active] {
    display: block;
}
gtn750-element .popup .WindowTitle {
    font-size: 3vh;
    width: 100%;
    text-align: center;
}
gtn750-element .popup.FullScreenBorder {
    width: 100%;
    height: 100%;
    border: solid #565656;
    border-width: 0 0.4vh 0.4vh 0.4vh;
    border-radius: 0 0 1.5vh 1.5vh;
    margin: 0;
}

gtn750-element #MainPart[state=HomeMenu] #HomeMenu,
gtn750-element #MainPart[state=WeatherMenu] #WeatherMenu,
gtn750-element #MainPart[state=NearestMenu] #NearestMenu,
gtn750-element #MainPart[state=WaypointInfoMenu] #WaypointInfoMenu,
gtn750-element #MainPart[state=ServicesMenu] #ServicesMenu,
gtn750-element #MainPart[state=UtilitiesMenu] #UtilitiesMenu,
gtn750-element #MainPart[state=SystemMenu] #SystemMenu,
gtn750-element #MainPart[state=SetupMenu] #SetupMenu,
gtn750-element #MainPart[state=PageMap] #PageMap,
gtn750-element #MainPart[state=PageTraffic] #PageTraffic,
gtn750-element #MainPart[state=PageTerrain] #PageTerrain,
gtn750-element #MainPart[state=PageCharts] #PageCharts,
gtn750-element #MainPart[state=PageFlighPlan] #PageFlighPlan,
gtn750-element #MainPart[state=PageFlightPlanCatalog] #PageFlightPlanCatalog,
gtn750-element #MainPart[state=PageProcs] #PageProcs,
gtn750-element #MainPart[state=PageWaypointInfoAirport] #PageWaypointInfoAirport,
gtn750-element #MainPart[state=PageWaypointInfoIntersection] #PageWaypointInfoIntersection,
gtn750-element #MainPart[state=PageWaypointInfoVOR] #PageWaypointInfoVOR,
gtn750-element #MainPart[state=PageWaypointInfoVRP] #PageWaypointInfoVRP,
gtn750-element #MainPart[state=PageWaypointInfoNDB] #PageWaypointInfoNDB,
gtn750-element #MainPart[state=PageWaypointInfoUserWaypoint] #PageWaypointInfoUserWaypoint,
gtn750-element #MainPart[state=PageWaypointInfoCreateWaypoint] #PageWaypointInfoCreateWaypoint,
gtn750-element #MainPart[state=PageWaypointInfoImportWaypoints] #PageWaypointInfoImportWaypoints,
gtn750-element #MainPart[state=PageWeatherSirius] #PageWeatherSirius,
gtn750-element #MainPart[state=PageWeatherFIS] #PageWeatherFIS,
gtn750-element #MainPart[state=PageWeatherConnext] #PageWeatherConnext,
gtn750-element #MainPart[state=PageWeatherStormscope] #PageWeatherStormscope,
gtn750-element #MainPart[state=PageWeatherRadar] #PageWeatherRadar,
gtn750-element #MainPart[state=PageNearestAirport] #PageNearestAirport,
gtn750-element #MainPart[state=PageNearestIntersection] #PageNearestIntersection,
gtn750-element #MainPart[state=PageNearestVOR] #PageNearestVOR,
gtn750-element #MainPart[state=PageNearestVRP] #PageNearestVRP,
gtn750-element #MainPart[state=PageNearestNDB] #PageNearestNDB,
gtn750-element #MainPart[state=PageNearestUserWaypoint] #PageNearestUserWaypoint,
gtn750-element #MainPart[state=PageNearestAirspace] #PageNearestAirspace,
gtn750-element #MainPart[state=PageNearestARTCC] #PageNearestARTCC,
gtn750-element #MainPart[state=PageNearestFSS] #PageNearestFSS,
gtn750-element #MainPart[state=PageNearestWXFREQ] #PageNearestWXFREQ,
gtn750-element #MainPart[state=PageServicesPhone] #PageServicesPhone,
gtn750-element #MainPart[state=PageServicesSMSText] #PageServicesSMSText,
gtn750-element #MainPart[state=PageServicesMusic] #PageServicesMusic,
gtn750-element #MainPart[state=PageServicesPositionReports] #PageServicesPositionReports,
gtn750-element #MainPart[state=PageServicesContacts] #PageServicesContacts,
gtn750-element #MainPart[state=PageUtilitiesVNAV] #PageUtilitiesVNAV,
gtn750-element #MainPart[state=PageUtilitiesTripPlanning] #PageUtilitiesTripPlanning,
gtn750-element #MainPart[state=PageUtilitiesFuelPlanning] #PageUtilitiesFuelPlanning,
gtn750-element #MainPart[state=PageUtilitiesDALTTASWinds] #PageUtilitiesDALTTASWinds,
gtn750-element #MainPart[state=PageUtilitiesATC] #PageUtilitiesATC,
gtn750-element #MainPart[state=PageUtilitiesRAIMPrediction] #PageUtilitiesRAIMPrediction,
gtn750-element #MainPart[state=PageUtilitiesFlightTimers] #PageUtilitiesFlightTimers,
gtn750-element #MainPart[state=PageUtilitiesScheduledMessages] #PageUtilitiesScheduledMessages,
gtn750-element #MainPart[state=PageUtilitiesChecklists] #PageUtilitiesChecklists,
gtn750-element #MainPart[state=PageUtilitiesMap] #PageUtilitiesMap,
gtn750-element #MainPart[state=PageUtilitiesAutopilot] #PageUtilitiesAutopilot,
gtn750-element #MainPart[state=PageUtilitiesLogs] #PageUtilitiesLogs,
gtn750-element #MainPart[state=PageUtilitiesCleanScreen] #PageUtilitiesCleanScreen,
gtn750-element #MainPart[state=PageSystemSystemStatus] #PageSystemSystemStatus,
gtn750-element #MainPart[state=PageSystemGPSStatus] #PageSystemGPSStatus,
gtn750-element #MainPart[state=PageSystemExternalLRUs] #PageSystemExternalLRUs,
gtn750-element #MainPart[state=PageSystemAlerts] #PageSystemAlerts,
gtn750-element #MainPart[state=PageSystemUnits] #PageSystemUnits,
gtn750-element #MainPart[state=PageSystemAudio] #PageSystemAudio,
gtn750-element #MainPart[state=PageSystemBacklight] #PageSystemBacklight,
gtn750-element #MainPart[state=PageSystemConnextSetup] #PageSystemConnextSetup,
gtn750-element #MainPart[state=PageSystemUserFields] #PageSystemUserFields,
gtn750-element #MainPart[state=PageSystemSetupComNav] #PageSystemSetupComNav,
gtn750-element #MainPart[state=PageSystemSetupMetar] #PageSystemSetupMetar,
gtn750-element #MainPart[state=PageSystemSetupCharts] #PageSystemSetupCharts,
gtn750-element #MainPart[state=PageSystemSetupOptions] #PageSystemSetupOptions,
gtn750-element #MainPart[state=PageSystemSetupChecklists] #PageSystemSetupChecklists,
gtn750-element #MainPart[state=PageSystemSetupSimBrief] #PageSystemSetupSimBrief,
gtn750-element #MainPart[state=PageSystemSetupLicense] #PageSystemSetupLicense {
    display: block;
}

gtn750-element #ButtonBarPart {
    width: 100%;
    height: 10vh;
    background: linear-gradient(#2f3943, #020810);
    position: relative;
}

gtn750-element #AnnunciationPart {
    width: 100%;
    height: 3.5vh;
    background: linear-gradient(#2c302c 0%, #0c100c 50%, #080708 100%);
    border-top: 0.2vh solid #565656;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 3vh;
}


/* General classes */

/* Container for buttons (sometimes several buttons in same container) */
gtn750-element .buttonsContainer {
    border: solid #3b4753;
    border-width: 0.3vh;
    border-radius: 1vh;
    background-color: black;
    padding: 0.3vh;
}
gtn750-element .buttonsContainer.rounded {
    border-radius: 50%;
}
gtn750-element .buttonsContainer.noborder {
    border: none;
}

/* Gradient button */
gtn750-element .gradientButton {
    position: relative;
    font-size: 2.5vh;
    line-height: 2.5vh;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(53,70,87,1) 100%);
    text-align: center;
    overflow: hidden;
    border-radius: 0.5vh;
}
gtn750-element .gradientButton:Hover:Active {
    background: linear-gradient(0deg, #0f3170 0%, #2f5a95 55%, #78cef3 100%);
}
gtn750-element .gradientButton:Hover {
    background: linear-gradient(0deg, #001120 0%, #0f3a55 55%, #184e73 100%);
}
gtn750-element .gradientButton[state=Disabled] {
    opacity: 0.4;
    background-color: black;
    pointer-events: none;
}
gtn750-element .gradientButton[state=NoAction] {
    pointer-events: none;
    background: none;
}
gtn750-element .gradientButton[state=Hidden] {
    display: hidden;
}
gtn750-element .gradientButton[state=Invisible] {
    visibility: hidden;
}
gtn750-element .gradientButton.rounded {
    border-radius: 50%;
}
gtn750-element .gradientButton .img {
    position: absolute;
    right: 0;
    left: 0;
    max-height: 65%;
    height: auto;
    bottom: auto;
    max-width: 80%;
    top: 2%;
    display: inline-block;
    margin: auto;
}
gtn750-element .gradientButton .imgBottomCenter {
    top: 54%;
    bottom: auto;
}
gtn750-element .gradientButton .imgTopCenter {
    top: auto;
    bottom: 54%;
}
gtn750-element .gradientButton .imgVertCenter {
    top: 0;
    bottom: 0;
}
gtn750-element .gradientButton .imgSmallLeft {
    max-width: 25%;
    left: 7%;
    right: auto;
}
gtn750-element .gradientButton .title {
    position: absolute;
    max-height: 33%;
    width: 100%;
    bottom: 4%;
    top: auto;
    text-align: center;
    color: #a7aec7;
    background: none;
    vertical-align: bottom;
}
gtn750-element .gradientButton .titleTop {
    top: 5%;
    bottom: auto;
}
gtn750-element .gradientButton .titleTopCenter {
    top: auto;
    bottom: 54%;
}
gtn750-element .gradientButton .titleBottomCenter {
    top: 54%;
    bottom: auto;
}
gtn750-element .gradientButton .titleVertCenter {
    top: 50%;
    transform: translateY(-50%);
}
gtn750-element .gradientButton .titleVertCenter2lines {
    top: 50%;
    transform: translateY(-90%);
}
gtn750-element .gradientButton .titleRightOfImage {
    right: 5%;
    text-align: left;
    width: 60%;
}
gtn750-element .gradientButton .titleLeft {
    left: 5%;
    text-align: left;
}
gtn750-element .gradientButton .titleRight {
    right: 5%;
    text-align: right;
}
gtn750-element .gradientButton .statusBar {
    position: absolute;
    bottom: 5%;
    left: 50%;
    height: 1vh;
    width: 60%;
    background-color: #393939;
    transform: translateX(-50%);
}
gtn750-element .gradientButton[state=Active] .statusBar {
    background-color: #5fe90e;
}

gtn750-element .groupBox {
    position: relative;
    border: solid #565656;
    border-width: 0.3vh;
    border-radius: 1.5vh;
    padding: 0.9vh;
    padding-top: 1.5vh;
}
gtn750-element .groupBoxTitle {
    position: absolute;
    top: -1.9vh;
    background-color: black;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 1vh;
    padding-right: 1vh;
    white-space: nowrap;
}

gtn750-element .largeBoxBorder {
    border: solid #565656;
    border-width: 0.4vh;
    border-radius: 1.5vh;
}
gtn750-element .smallBoxBorder {
    border: solid #565656;
    border-width: 0.2vh;
    border-radius: 1.5vh;
}
gtn750-element .mapBoxBorder {
    border: solid #8fa6b2;
    border-width: 1vh;
    border-radius: 2.5vh;
    overflow: hidden;
}

/* Page menu */

gtn750-element #MainPart .pageMenu {
    background-color: #262834;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
}
gtn750-element .pageMenu .WindowTitle {
    position: absolute;
    top: 2%;
}
gtn750-element #MainPart .pageMenu .menuElements {
    position: absolute;
    height: 90%;
    top: 10%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
}
gtn750-element #MainPart .pageMenu .menuElements .buttonsContainer {
    margin: 2.5vh 1.5vh 1.5vh 1.5vh;
}
gtn750-element #MainPart #WeatherMenu .menuElements .buttonsContainer, gtn750-element #MainPart #ServicesMenu .menuElements .buttonsContainer {
    margin: 5vh 3vh 3vh 3vh;
}
gtn750-element #MainPart #WaypointInfoMenu .menuElements .buttonsContainer, gtn750-element #MainPart #SystemMenu .menuElements .buttonsContainer {
    margin: 2.5vh 3vh 1.5vh 3vh;
}
gtn750-element #MainPart .pageMenu .gradientButton {
    width: 16.5vh;
    min-width: 16.5vh;
    height: 14vh;
}
gtn750-element #MainPart .pageMenu .gradientButton .title {
    font-size: 2.5vh;
}
gtn750-element #MainPart .pageMenu .gradientButton .img {
    max-width: 100%;
    width: 100%;
}

/* Page */
gtn750-element #MainPart .pageMenu .windowTitle, gtn750-element #MainPart .page .windowTitle, gtn750-element #MainPart .popup .windowTitle {
    display: flex;
    justify-content: center;
    align-items: center;
}

gtn750-element #MainPart .pageMenu .windowTitle .pageTitleImg, gtn750-element #MainPart .page .windowTitle .pageTitleImg, gtn750-element #MainPart .popup .windowTitle .pageTitleImg {
    max-width: 8vh;
    width: 8vh;
}

gtn750-element #MainPart .pageMenu .windowTitle .pageTitle, gtn750-element #MainPart .page .windowTitle .pageTitle, gtn750-element #MainPart .popup .windowTitle .pageTitle {
    font-size: 3vh;
    padding-left: 1vh;
}


/* Button part */
gtn750-element #ButtonBarPart .gradientButton .title {
    font-size: 3vh;
    line-height: 3vh;
}

/* Contextual buttons */
gtn750-element #ButtonBarPartLeft {
    width: 70%;
    height: 94%;
    position: absolute;
    left: 0;
    top: 3%;
    display: flex;
    justify-content: space-between;
}
gtn750-element #ButtonBarPartRight {
    width: 23.5%;
    height: 94%;
    position: absolute;
    right: 0;
    top: 3%;
}
gtn750-element #ButtonBarPart[mode=DirectTo] #ButtonBarPartRight {
    width: 33.5%;
}
gtn750-element #ButtonBarPart #ButtonBarPartLeft .contextualButtonContainer, gtn750-element #ButtonBarPart .buttonsContainer {
    height: 100%;
}
gtn750-element #ButtonBarPart #ButtonBarPartLeft .contextualButtonContainer {
    width: 17.5%;
}
gtn750-element #ButtonBarPart #ButtonBarPartRight .contextualButtonContainer {
    width: 100%;
}
gtn750-element #ButtonBarPart .gradientButton {
    height: 100%;
}
gtn750-element #ButtonBarPart .gradientButton .title{
    font-size: 2.5vh;
}
gtn750-element #ButtonBarPart .gradientButton .img{
    min-width: 90%;
}
gtn750-element #ButtonBarPart .gradientButton .contextualButtonENTER .img, gtn750-element #ButtonBarPart .gradientButton .contextualButtonSAVEALT .img, gtn750-element #ButtonBarPart .gradientButton .contextualButtonUPDATE .img {
    top: 40%;
    bottom: auto;
    min-width: 70%;
    max-width: 70%;
}
gtn750-element #ButtonBarPart .gradientButton .contextualButtonDTO_ACTIVATE .img,  #ButtonBarPart .gradientButton .contextualButtonDTO_REMOVE .img {
    min-width: 70%;
    max-width: 70%;
}
gtn750-element #ButtonBarPart .gradientButton .contextualButtonENTER .title, gtn750-element #ButtonBarPart .gradientButton .contextualButtonSAVEALT .title, gtn750-element #ButtonBarPart .gradientButton .contextualButtonUPDATE .title {
    top: auto;
    bottom: 54%;
}


gtn750-element #ContextualButtonSingle {
    height: 100%;
    width: 100%;
}
gtn750-element #ContextualButtonDouble {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
}
gtn750-element #ContextualButtonDouble .gradientButton {
    flex-grow: 1;
}
gtn750-element #ContextualButtonDouble .VerticalSep {
    height: 100%;
    width: 0.8vh;
    background-color: #728190;
}

/* Annunciation buttons */
@keyframes blinkingBeaconMM {
    0%		{ background-color: #fba00f; color: #133658;}
    45%		{ background-color: #fba00f; color: #133658;}
    55%		{ background-color: #050606; color: #3390af;}
    100%    { background-color: #050606; color: #3390af;}
}
@keyframes blinkingBeaconIM {
    0%		{ background-color: #feffff; color: #133658;}
    45%		{ background-color: #feffff; color: #133658;}
    55%		{ background-color: #050606; color: #3390af;}
    100%    { background-color: #050606; color: #3390af;}
}
@keyframes blinkingBeaconOM {
    0%		{ background-color: #70a8d5; color: #133658;}
    45%		{ background-color: #70a8d5; color: #133658;}
    55%		{ background-color: #050606; color: #3390af;}
    100%    { background-color: #050606; color: #3390af;}
}
gtn750-element #AnnunciationPart .AnnunciationElement {
    border-right: 0.2vh solid #565656;
    overflow: hidden;
    padding-top: 0.5%;
}
gtn750-element #AnnunciationPart #AnnunciationAlert {
    width: 17%;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=alert]{
    background-color: #fbfbfb;
    color: black;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=beaconIM]{
    animation: blinkingBeaconIM 0.250s infinite;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=beaconMM]{
    animation: blinkingBeaconMM 0.333s infinite;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=beaconOM]{
    animation: blinkingBeaconOM 0.750s infinite;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=trafficRA]{
    background-color: #ff0000;
    color: black;
}
gtn750-element #AnnunciationPart #AnnunciationAlert[state=trafficTA]{
    background-color: #e38c56;
    color: black;
}
gtn750-element #AnnunciationPart #AnnunciationPhase {
    width: 15%;
    color: #00fb00;
}
gtn750-element #AnnunciationPart #AnnunciationStatus {
    width: 8%;
    color: #00fb00;
    font-size: 2vh;
}
gtn750-element #AnnunciationPart #AnnunciationCDI {
    width: 13%;
    color: #00fb00;
}
gtn750-element #AnnunciationPart #AnnunciationCDI[state=GPS] {
    color: #fb00fb;
}
gtn750-element #AnnunciationPart #AnnunciationCDI[state=VLOC] {
    color: #00fb00;
}
gtn750-element #AnnunciationPart #AnnunciationOBS {
    width: 12%;
    color: #00fb00;
}
gtn750-element #AnnunciationPart #AnnunciationKnob {
    flex-grow: 1;
    color: #bdbdbd;
    text-align: right;
    border-right: 0;
    font-size: 2vh;
}
@keyframes blinkingMessage{
    0%, 49%	{ color: white; background-color: black}
    50%, 100%	{ color: black; background-color: white}
}
gtn750-element #AnnunciationPart[state=message] #AnnunciationKnob {
    color: black;
    background-color: white;
    font-size: 3vh;
    padding-right: 1vh;
    padding-top: 1vh;
    position: relative;
    bottom: 1vh;
    min-height: 5vh;
    z-index: 5;
    animation: blinkingMessage 1s infinite;
}
gtn750-element #AnnunciationPart #AnnunciationImg img {
    height: 4vh;
    padding: 0.5vh;
    padding-bottom: 1vh;
}
gtn750-element #AnnunciationPart[state=message] #AnnunciationImg img {
    display: none;
}


/* Confirmation window */
gtn750-element #confirmWindow.popup[state=Active] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.50);
    z-index: 10;
    animation: slideTopIn 200ms;

}
gtn750-element #confirmWindow .confirmWindowPopup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    height: 40vh;
    z-index: 11;
    background: linear-gradient(#2c302c 0%, #0c100c 20%, #080708 100%);
    box-shadow: -1.5vh 1vh 1vh black;
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    overflow: hidden;
}
gtn750-element #confirmWindow .buttonsContainer {
    width: 35%;
    height: 20%;
    margin-bottom: 1vh;
    margin-top: 1vh;
}
gtn750-element #confirmWindow .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #confirmWindow #confirmWindowMessage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 4vh;
    line-height: 4.5vh;
    min-height: 10vh;
    width: 90%;
    text-align: center;
    color: #fbfbfb;
    height: 75%;
}
gtn750-element #confirmWindow .gradientButton .title {
    font-size: 4vh;
}


/* Working window */
gtn750-element #workingWindow.popup[state=Active] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.50);
    z-index: 10;
    animation: slideTopIn 200ms;
}
gtn750-element #workingWindow .workingWindowPopup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    height: 40vh;
    z-index: 11;
    background: linear-gradient(#2c302c 0%, #0c100c 20%, #080708 100%);
    box-shadow: -1.5vh 1vh 1vh black;
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    overflow: hidden;
}
gtn750-element #workingWindow #workingWindowMessage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 4vh;
    line-height: 4.5vh;
    min-height: 10vh;
    width: 90%;
    text-align: center;
    color: #fbfbfb;
    height: 75%;
}

/* Select list window */
gtn750-element .selectList_LinesContainer {
    height: 90%;
    width: 98%;
    margin: auto;
    padding-bottom: 1%;
    padding-top: 1%;
    overflow: hidden;
    background-color: black;
}
gtn750-element .selectList_Lines {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}
gtn750-element .selectList_Lines::-webkit-scrollbar {
    width: 2vh;
}
gtn750-element .selectList_Lines::-webkit-scrollbar-track {
    background: none;
}
gtn750-element .selectList_Lines::-webkit-scrollbar-thumb {
    background:  #8b8b8b;
}
gtn750-element .selectList_Lines .buttonsContainer {
    height: 19%;
    margin: 1% 1.5% 0 1.5%;
    width: 97%;
}
gtn750-element .selectList_Lines .buttonsContainer[state=Inactive] {
    display: none;
}
gtn750-element .selectList_Lines .buttonsContainer[state=Active] {
    display: block;
}
gtn750-element .selectList_Lines .gradientButton {
    height: 100%;
    width: 100%;
}

/* Procedure select list window */
gtn750-element #popupSelectList.popup[state=Active] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.50);
    z-index: 10;
    animation: slideTopIn 200ms;
}
gtn750-element #popupSelectList .popupSelectListContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 80%;
    z-index: 11;
    background: linear-gradient(#2c302c 0%, #0c100c 20%, #080708 100%);
    box-shadow: -1.5vh 1vh 1vh black;
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    overflow: hidden;
    padding-top: 1%;
}
/* Airway exit select list window */
gtn750-element #airwayExitSelectList.popup[state=Active] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.50);
    z-index: 10;
    animation: slideTopIn 200ms;
}
gtn750-element #airwayExitSelectList .airwayExitSelectListContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 80%;
    z-index: 11;
    background: linear-gradient(#2c302c 0%, #0c100c 20%, #080708 100%);
    box-shadow: -1.5vh 1vh 1vh black;
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0.4vh 0.4vh;
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    overflow: hidden;
    padding-top: 1%;
}
gtn750-element #airwayExitSelectList .airwayExitSelectListContainer >div:last-child{
    display: flex;
    justify-content: space-between;
    width: 98%;
    height: 95%;
}
gtn750-element #airwayExitSelectList .airwayExitSelectListContainer >div:last-child >div:first-child{
    width: 11vh;
    height: 11vh;
    margin-top: 5vh;
}
gtn750-element #airwayExitSelectList .airwayExitSelectListContainer >div:last-child >div:first-child .gradientButton{
    width: 100%;
    height: 100%;
}
gtn750-element #airwayExitSelectList .selectList_LinesContainer {
    width: 80%;
}


/* License page */
gtn750-element #PageSystemSetupLicense .groupBox {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 7% 0 0 5%;
    height: 30%;
}
gtn750-element #PageSystemSetupLicense .groupBoxTitle {
    background-color: #262834;
}
gtn750-element #PageSystemSetupLicense >div:last-child {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
gtn750-element #PageSystemSetupLicense .buttonsContainer {
    width: 45%;
    height: 10vh;
    margin-top: 3%;
}
gtn750-element #PageSystemSetupLicense .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupLicense .gradientButton .title {
    font-size: 3vh;
}

/* Setup Metar */
gtn750-element #PageSystemSetupMetar .groupBox {
    display: flex;
    justify-content: center;
    width: 96%;
    margin: 7% 0 2% 2%;
}
gtn750-element #PageSystemSetupMetar .groupBoxTitle {
    background-color: #262834;
}
gtn750-element #PageSystemSetupMetar .buttonsContainer {
    width: 45%;
    height: 12vh;
    margin-top: 5%;
}
gtn750-element #PageSystemSetupMetar .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupMetar .gradientButton .title {
    font-size: 3vh;
}
gtn750-element #PageSystemSetupMetar >div:nth-child(3) {
    width: 100%;
    text-align: center;
    font-size: 3vh;
    margin-bottom: 3%;
}
gtn750-element #PageSystemSetupMetar >div:nth-child(4) {
    width: 100%;
    text-align: center;
    color: #fbfbfb;
}
gtn750-element #PageSystemSetupMetar >div:last-child {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}


/* COM NAV setup page */
gtn750-element #PageSystemSetupComNav >div:nth-child(2) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
gtn750-element #PageSystemSetupComNav .buttonsContainer {
    width: 40%;
    height: 11vh;
    margin-top: 5%;
}
gtn750-element #PageSystemSetupComNav .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupComNav .gradientButton .titleTop {
    top: 10%;
}
gtn750-element #PageSystemSetupComNav .gradientButton .value {
    position: absolute;
    bottom: 20%;
    width: 100%;
    font-size: 3.5vh;
}

/* Checklists setup page */
gtn750-element #PageSystemSetupChecklists >div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
gtn750-element #PageSystemSetupChecklists .buttonsContainer {
    width: 60%;
    height: 11vh;
    margin-top: 5%;
}
gtn750-element #PageSystemSetupChecklists .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00000080;
    z-index: 3;
    display: none;
}
gtn750-element #MainPart #PageSystemSetupChecklists.page #SetupChecklistsSelectChecklist .windowTitle {
    justify-content: center;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist[state=Inactive] {
    display: none;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist[state=Active] {
    display: flex;
    justify-content: center;
    animation: slideTopIn 200ms;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist .selectList_LinesContainer {
    width: 80%;
    height: 77%;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist .selectList_Lines {
    width: 100%;
    height: 92%;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist .buttonsContainer {
    margin-top: 1%;
    height: 19%;
    width: 97%;
    margin: 1% 1.5% 0 1.5%;
}
gtn750-element #PageSystemSetupChecklists #SetupChecklistsSelectChecklist .gradientButton .titleVertCenter {
    top: 35%;
}


/* SimBrief setup page */
gtn750-element #PageSystemSetupSimBrief >div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
gtn750-element #PageSystemSetupSimBrief .buttonsContainer {
    width: 50%;
    height: 11vh;
    margin-top: 5%;
}
gtn750-element #PageSystemSetupSimBrief .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupSimBrief .gradientButton .value {
    position: absolute;
    bottom: 20%;
    width: 100%;
    font-size: 3.5vh;
}


/* Setup Charts */
gtn750-element #PageSystemSetupCharts .groupBox {
    display: flex;
    justify-content: center;
    width: 96%;
    margin: 5% 0 2% 2%;
}
gtn750-element #PageSystemSetupCharts .groupBoxTitle {
    background-color: #262834;
}
gtn750-element #PageSystemSetupCharts .buttonsContainer {
    width: 45%;
    height: 8vh;
    margin-top: 3%;
    margin-left: 2%;
}
gtn750-element #PageSystemSetupCharts .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupCharts .gradientButton .title {
    font-size: 3vh;
}
gtn750-element #PageSystemSetupCharts >div:nth-child(3) {
    margin-left: 2%;
}
gtn750-element #PageSystemSetupCharts #NavigraphStatus {
    color: green;
}

gtn750-element #PageSystemSetupCharts #ChartQrCodeContainer {
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 40%;
}

gtn750-element #PageSystemSetupCharts #ChartQrCodeString {
    margin-top: 2%;
    margin-left: 2%;
    font-size: 2vh;
    width: 55%;
}

gtn750-element #PageSystemSetupCharts #ChartQrCodeUrl {
    margin-top: 2%;
    margin-left: 2%;
    width: 53%;
    font-size: 2vh;
    word-break: break-all;
    color: yellow;
}
gtn750-element #PageSystemSetupCharts #ChartQrCodeVerificationCode {
    margin-top: 2%;
    margin-left: 2%;
    width: 53%;
    font-size: 2vh;
    word-break: break-all;
}

gtn750-element #PageSystemSetupCharts #ChartQrCode {
    width: 95%;
}


/* Backlight */
gtn750-element #PageSystemBacklight .page {
    position: relative;
}
gtn750-element #PageSystemBacklight >div:nth-child(2), gtn750-element #PageSystemBacklight >div:nth-child(3) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    margin: auto;
    margin-top: 10vh;
    background-color: black;
    padding: 0.5vh;
}
 gtn750-element #PageSystemBacklight >div:nth-child(3) {
    margin-top: 8vh;
}

gtn750-element #PageSystemBacklight .buttonsContainer {
    width: 11vh;
    height: 11vh;
    margin-top: 5%;
    margin-left: 2%;
    margin: 0;
}
gtn750-element #PageSystemBacklight #SystemBacklightMitigationBlock .buttonsContainer {
    width: 30vh;
    margin: 0;
}
gtn750-element #PageSystemBacklight #SystemBacklightMitigationBlock .gradientButton .titleTop {
    top: 1vh;
}
gtn750-element #PageSystemBacklight #SystemBacklightMitigationBlock .gradientButton .value {
    position: absolute;
    bottom: 2vh;
}

gtn750-element #PageSystemBacklight .gradientButton {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
gtn750-element #PageSystemBacklight #SystemBacklightDec img, gtn750-element #PageSystemBacklight #SystemBacklightInc img {
    width: 90%;
}
gtn750-element #PageSystemBacklight #SystemBacklightBrightness {
    height: 11vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-left: 4vh;
    padding-right: 4vh;
}
gtn750-element #PageSystemBacklight .value {
    color: #fbfbfb;
    font-size: 5vh;
}

gtn750-element #PageSystemBacklight #SystemBacklightTestPattern {
    display: flex;
    width: 100%;
    height: 15vh;
    position: absolute;
    bottom: 0;
    background-color: black;
}

gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div {
    flex-grow: 1;
    height: 100%;
    background-color: white;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(1) {
    opacity: 0;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(2) {
    opacity: 0.1;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(3) {
    opacity: 0.2;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(4) {
    opacity: 0.3;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(5) {
    opacity: 0.4;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(6) {
    opacity: 0.5;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(7) {
    opacity: 0.6;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(8) {
    opacity: 0.7;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(9) {
    opacity: 0.8;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(10) {
    opacity: 0.9;
}
gtn750-element #PageSystemBacklight #SystemBacklightTestPattern >div:nth-child(11) {
    opacity: 1;
}

/* User fields */
gtn750-element #PageSystemUserFields #PageSystemUserFieldsContent {
    display: flex;
    flex-direction: column;
    align-items: center;
}
gtn750-element #PageSystemUserFields #PageSystemUserFieldsContent >div:first-child {
    margin-top: 10%;
    margin-bottom: 30%;
    font-size: 2.8vh;
}
gtn750-element #PageSystemUserFields #PageSystemUserFieldsContent .buttonsContainer {
    width: 30%;
    height: 12vh;
}
gtn750-element #PageSystemUserFields #PageSystemUserFieldsContent .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemUserFields #PageSystemUserFieldsContent .gradientButton .titleVertCenter2lines {
    font-size: 3.5vh;
    line-height: 4.5vh;
    top: 40%;
}

/* Setup Options */
gtn750-element #PageSystemSetupOptions #setupOptionsContent {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    height: 90%;
    margin-top: 3%;
    overflow-x: hidden;
    overflow-y: scroll;
}
gtn750-element #PageSystemSetupOptions #setupOptionsContent::-webkit-scrollbar {
    width: 2vh;
}
gtn750-element #PageSystemSetupOptions #setupOptionsContent::-webkit-scrollbar-track {
    background: none;
}
gtn750-element #PageSystemSetupOptions #setupOptionsContent::-webkit-scrollbar-thumb {
    background:  #8b8b8b;
}
gtn750-element #PageSystemSetupOptions .buttonsContainer {
    width: 45%;
    height: 10vh;
    margin-top: 2%;
}
gtn750-element #PageSystemSetupOptions .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #PageSystemSetupOptions .gradientButton .titleTop {
    top: 10%;
}
gtn750-element #PageSystemSetupOptions .gradientButton .value {
    position: absolute;
    bottom: 20%;
    width: 100%;
    font-size: 3.5vh;
}


gtn750-element #optionsSafeTaxiOptionsContainer{
    display: none;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
gtn750-element #optionsSafeTaxiOptionsContainer[state=Active] {
    display: block;
    animation: slideBottomIn 200ms;
}
gtn750-element #optionsSafeTaxiOptionsContent {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0 0.4vh;
    border-radius: 1.5vh 1.5vh 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
gtn750-element #optionsSafeTaxiOptionsContent >div {
    width: 100%;
}
gtn750-element #optionsSafeTaxiOptionsContent >div.title {
    font-size: 4vh;
    color: #fbfbfb;
    width: 100%;
    padding: 1.5vh;
    text-align: center;
}
gtn750-element #optionsSafeTaxiOptionsContent .buttonsContainer {
    width: 25vh;
    height: 11vh;
    margin: 1vh;
    display: inline-block;
}
gtn750-element #optionsSafeTaxiOptionsContent .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #optionsSafeTaxiOptionsContent >div:last-child {
    display: flex;
    justify-content: space-around;
}




gtn750-element #optionsMenuContainer{
    display: none;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
gtn750-element #optionsMenuContainer[state=Active] {
    display: block;
    animation: slideBottomIn 200ms;
}
gtn750-element #optionsMenuContent {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    border: solid #565656;
    border-width: 0.4vh 0.4vh 0 0.4vh;
    border-radius: 1.5vh 1.5vh 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
gtn750-element #optionsMenuContent >div {
    width: 100%;
}
gtn750-element #optionsMenuContent >div.title {
    font-size: 4vh;
    color: #fbfbfb;
    width: 100%;
    padding: 1.5vh;
    text-align: center;
}
gtn750-element #optionsMenuContent .buttonsContainer {
    width: 25vh;
    height: 11vh;
    margin: 1vh;
    display: inline-block;
}
gtn750-element #optionsMenuContent .gradientButton {
    width: 100%;
    height: 100%;
}
gtn750-element #optionsMenuContent >div:last-child {
    display: flex;
    justify-content: space-around;
}



/* System Info */
gtn750-element #PageSystemSystemStatus .title {
    margin-top: 2vh;
    margin-bottom: 0.5vh;
    color: #fbfbfb;
    display: flex;
    justify-content: center;
}

gtn750-element #PageSystemSystemStatus .groupBox {
    width: 76%;
    margin: auto;
    background-color: black;
}

gtn750-element #PageSystemSystemStatus .line {
    width: 96%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 1vh;
}

