/* PageMap page */
gtn650-element #PageMap {
    position: relative;
}
/* Compass */
gtn650-element #PageMap #MAP_Compass {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
gtn650-element #PageMap #MAP_Compass[state=active] {
    display: flex;
}
gtn650-element #PageMap #MAP_Compass img {
    display: block;
    height: 40vw;
}
/* Banana */
gtn650-element #PageMap #MapBanana {
    display: none;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
    display: none;
    pointer-events: none;
    transition: 0.5s ease-in-out;
}
gtn650-element #PageMap #MapBanana[state=active] {
    display: block;
}
/* HDG */
gtn650-element #PageMap #MapHdg {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: rotate(0deg) translateY(-50%);
}
gtn650-element #PageMap #MapHdg[state=active] {
    display: flex;
}
gtn650-element #PageMap #MapHdg >div{
    width: 0;
    height: 100%;
    margin-left: 2px;
    border-left: 2px dashed yellow;
    background: black;
}

/* Fuel Ring */
gtn650-element #PageMap #MapFuelRing {
    position: absolute;
    overflow: hidden;
    display: none;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
gtn650-element #PageMap #MapFuelRing[state=active] {
    display: block;
}

gtn650-element #PageMap #MapFuelRingFull, gtn650-element #PageMap #MapFuelRingReserve {
    position: absolute;
    border-radius: 50%;
    display: none;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}
gtn650-element #PageMap #MapFuelRingFull {
    border: 2px solid yellow;
}
gtn650-element #PageMap #MapFuelRingReserve {
    border: 4px dashed yellowgreen;
}
gtn650-element #PageMap #MapFuelRingFullLabel, gtn650-element #PageMap #MapFuelRingReserveLabel {
    border: 1px solid grey;
    background-color: black;
    font-size: 2vw;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0.4vw;
    padding-right: 0.4vw;
    margin-left: -2vw;
}

/* Destination Runways */
gtn650-element #PageMap #MapRunwayLines {
    display: none;
    position: absolute;
    pointer-events: none;
    height: 100%;
    width: 100%;
}
gtn650-element #PageMap #MapRunwayLines[state=active] {
    display: block;
}
gtn650-element #PageMap #MapRunwayLines >div{
    width: 0;
    height: 300%;
    margin-left: -1px;
    border-left: 2px dashed white;
    background: black;
    transform-origin: 0 0;
    position: absolute;
}


/* TrackVector */
gtn650-element #PageMap #MapTrackVector {
    display: none;
    position: absolute;
    pointer-events: none;
    height: 100px;
    width: 0;
    margin-left: -1px;
    border-left: 2px dashed cyan;
    transform-origin: 1px 0;
    background: black;
}
gtn650-element #PageMap #MapTrackVector[state=active] {
    display: block;
}
gtn650-element #PageMap #MapTrackVectorArrow {
    position : relative;
    border: solid cyan;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    bottom: -100%;
    right: 5px;
}


/* Map field page index */
gtn650-element #PageMap #MapFieldPageIndex {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    height: 1.5%;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 1;
}
gtn650-element #PageMap #MapFieldPageIndex[state=active] {
    display: flex;
}
gtn650-element #PageMap #MapFieldPageIndex >div {
    width: 5%;
    height: 100%;
    background-color: #a0a0a0;
    margin: 0 1vw 0 1vw;
}
gtn650-element #PageMap #MapFieldPageIndex >div[state=active] {
    background-color: #a0f000;
}


/* Cursor */
gtn650-element #PageMap #MainMap_Cursor {
    width: 8%;
    display: none;
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    pointer-events: none;
}
gtn650-element #PageMap #MainMap_Cursor[state=active] {
    display: block;
}
gtn650-element #PageMap #MainMap_Cursor img {
    width: 100%;
    margin: 0;
    display: block;
}

gtn650-element #PageMap #MapGSI {
    position: absolute;
    bottom: 37%;
    right: 0;
    width: 4%;
    height: 35%;
    background-color: black;
    overflow: hidden;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.3vw solid #A0A0A0;
    border-right-width: 0;
}

gtn650-element #PageMap #MapPanMode {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 23%;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
gtn650-element .Map_North {
    width: 7%;
    position: absolute;
    left: 5%;
    top: 25%;
    z-index: 3;
}
gtn650-element .Map_North[mode=pan] {
    top: 2%;
}
gtn650-element .Map_North img {
    width: 100%;
    margin: 0;
    display: block;
}
gtn650-element .Map_TrackMode {
    position: absolute;
    left: 1%;
    top: 45%;
    z-index: 3;
    color: black;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: black;
    width: 14%;
    text-align: center;
}
gtn650-element .Map_TrackMode[mode=pan] {
    top: 22%;
}
gtn650-element #Map_Range {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 13.7%;
    position: absolute;
    right: 2%;
    bottom: 25%;
    z-index: 3;
}
gtn650-element #Map_Range img {
    width: 100%;
    margin: 0;
    display: block;
}
gtn650-element #Map_Range .Map_RangeValue {
    background-color: black;
    line-height: 2vw;
    font-size: 2vw;
    text-align: center;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 3%;
    color: #fbfbfb;
}
gtn650-element #Map_Range[mode=auto] .Map_RangeValue {
    color: #00fb00;
    background-color: #505050;
}
gtn650-element #Map_Range .Map_RangeValue span {
    font-size: 1vw;
    padding-left: 4%;
}

/* Edit button */
gtn650-element #PageMap #MapPanMode > div:nth-child(1) {
    width: 27%;
}
/* Pan mode area */
gtn650-element #PageMap #MapPanMode > div:nth-child(2) {
    flex-grow: 1;
}
/* Waypoint info */
gtn650-element #PageMap #MapPanMode > div:nth-child(3) {
    width: 28%;
}
/* Next button */
gtn650-element #PageMap #MapPanMode > div:nth-child(4) {
    width: 15%;
}
gtn650-element #PageMap #MapPanMode .buttonsContainer {
    height: 98%;
}
gtn650-element #PageMap #MapPanMode .gradientButton {
    height: 100%;
    width: 100%;
}
/* Next button title */
gtn650-element #PageMap #MapPanMode > div:nth-child(4) .gradientButton .title {
    font-size: 2vw;
}


/* Pan area title */
gtn650-element #PageMap #MapPanData > div:nth-child(1) {
    width: 100%;
    text-align: center;
    color: #fbfbfb;
}
/* Pan area BRG and DIS + ETE and ELEV*/
gtn650-element #PageMap #MapPanData > div:nth-child(2), gtn650-element #PageMap #MapPanData > div:nth-child(3) {
    display: block;
}
/* Pan area all fields */
gtn650-element #PageMap #MapPanData #MapPanDataBrg, gtn650-element #PageMap #MapPanData #MapPanDataDis, gtn650-element #PageMap #MapPanData #MapPanDataEte, gtn650-element #PageMap #MapPanData #MapPanDataElev {
    padding-left: 2%;
    overflow: hidden;
}
/* Pan area all fields values*/
gtn650-element #PageMap #MapPanData .value {
    color: #fbfbfb;
}
/* Pan area all fields units*/
gtn650-element #PageMap #MapPanData .unit {
    font-size: 1.5vw;
    padding-left: 2%;
}
/* Wind arrow*/
gtn650-element #PageMap .windArrow {
    display: block;
    position: absolute;
    right: 1vw;
    top: 2vw;
    height: 4vw;
    transform-origin: 50% 50%;
}

/* Waypoint info title */
gtn650-element #PageMap #MapPanMode #MapPanWpInfo .title {
    font-size: 2vw;
}
/* Waypoint info ident */
gtn650-element #PageMap #MapPanMode #MapPanWpInfo #MapPanWpInfoIdent {
    font-size: 2vw;
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    font-size: 3vw;
}
/* Waypoint info img */
gtn650-element #PageMap #MapPanMode #MapPanWpInfo #MapPanWpInfoLogo {
    display: block;
    position: absolute;
    bottom: 5%;
    height: 5vw;
}
gtn650-element #PageMap #MapPanMode #MapPanWpInfo[state=pointer] #MapPanWpInfoIdent {
    font-size: 2.5vw;
    bottom: 5%;
}

/* Map fields */
gtn650-element #PageMap #MapFields {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 4;
}
gtn650-element #PageMap #MapFields[mode=hide] {
    display: none;
}
gtn650-element #PageMap #MapFields[mode=normal] {
    display: block;
    background-color: #00000000;
    pointer-events: none;
}
gtn650-element #PageMap #MapFields[mode=edit] {
    display: block;
    background-color: #000000a0;
    animation: slideRightIn 200ms;
}
gtn650-element #PageMap #MapFields #MapFieldTitle {
    display: none;
    width: 100%;
    position: relative;
    top: 50%;
    left: 0;
    text-align: center;
    font-size: 5vw;
}
gtn650-element #PageMap #MapFields[mode=edit] #MapFieldTitle {
    display: block;
}
gtn650-element #PageMap #MapFields .MapField {
    position: absolute;
    width: 27%;
    height: 25%;
    max-height: 11vw;
}
gtn650-element #PageMap #MapFields[mode=edit] .MapField, gtn650-element #PageMap #MapFields .MapField[display=button] {
    height: 25%;
}
gtn650-element #PageMap #MapFields .MapField:nth-child(1) {
    top: 0;
    left: 0;
}
gtn650-element #PageMap #MapFields .MapField:nth-child(2) {
    top: 0;
    right: 0;
}
gtn650-element #PageMap #MapFields .MapField:nth-child(3) {
    bottom: 0;
    left: 0;
}
gtn650-element #PageMap #MapFields .MapField:nth-child(4) {
    bottom: 0;
    right: 0;
}

gtn650-element #PageMap .MapField .buttonsContainer, gtn650-element #PageMap #MapFields .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #PageMap #MapFields[mode=edit] .MapField .gradientButton {
    pointer-events: auto;
}
gtn650-element #PageMap #MapFields[mode=normal] .MapField[display=text] .buttonsContainer {
    background: none;
    border: none;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=notopo] .MapField[display=text] .buttonsContainer {
    background-color: #80808080;
    border-radius: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=topo] .MapField[display=text] .buttonsContainer {
    background-color: #00000060;
    border-radius: 0;
}
gtn650-element #PageMap #MapFields[mode=normal] .MapField[display=text] .gradientButton {
    pointer-events: auto;
    background: none;
    background-color: #00000000;
    color: black;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
gtn650-element #PageMap #MapFields .MapField[display=text] .gradientButton .title{
    font-size: 3vw;
    top: 0.5vw;
}
gtn650-element #PageMap #MapFields .MapField[display=text] .gradientButton .value{
    font-size: 5.5vw;
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    height: 45%;
}
gtn650-element #PageMap #MapFields[mode=normal] .MapField[display=text] .gradientButton .value{
    -webkit-text-stroke-width: 1.2px;
}
gtn650-element #PageMap #MapFields[mode=edit] .MapField[display=text] .gradientButton .value{
    bottom: 5%;
}
gtn650-element #PageMap #MapFields .MapField[display=text] .gradientButton .unit {
    font-size: 2.5vw;
    padding-left: 2%;
    -webkit-text-stroke-width: 1px;
    position: relative;
    bottom: 5%;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=notopo] .MapField[display=text] .gradientButton .title {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=notopo] .MapField[display=text] .gradientButton .value {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=notopo] .MapField[display=text] .gradientButton .unit {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=topo] .MapField[display=text] .gradientButton .title {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=topo] .MapField[display=text] .gradientButton .value {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields[mode=normal][highlight=topo] .MapField[display=text] .gradientButton .unit {
    -webkit-text-stroke-width: 0;
}
gtn650-element #PageMap #MapFields .MapField[display=button] .gradientButton img {
    height: 5.5vw;
    padding-top: 0.5vw;
}
gtn650-element #PageMap #MapFields[mode=normal] .MapField[display=button] .gradientButton {
    pointer-events: auto;
}
gtn650-element #PageMap #MapFields .MapField .extra {
    width: 100%;
    height: 100%;
    position: relative;
}

gtn650-element #SelectMapFields {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    animation: slideTopIn 200ms;
}
gtn650-element #SelectMapFields .content{
    width: 99%;
    margin: 1% 0 0 1%;
    height: 92%;
    overflow: hidden;
    display: flex;
}
/* Left buttons */
gtn650-element #SelectMapFields .SelectMapFieldsButtons {
    height: 100%;
    width: 21%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/* Page container */
gtn650-element #SelectMapFields .container {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #004d8d;
    border: solid #004d8d;
    border-width: 0.3vw;
    border-radius: 0 2.5vw 2.5vw 0;
}
/* Page */
gtn650-element #SelectMapFields .SelectMapFieldsInsidePage {
    width: 100%;
    height: 100%;
    background-color: black;
    border: solid #d9f1fd;
    border-width: 1vw;
    border-radius: 2.5vw;
    padding: 2%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #SelectMapFields .SelectMapFieldsInsidePage[state=Inactive] {
    display: none;
}

gtn650-element #SelectMapFields .buttonsContainer {
    width: 96%;
    height: 19%;
}
gtn650-element #SelectMapFields .gradientButton {
    width: 100%;
    height: 100%;
}

gtn650-element #SelectMapFields .SelectMapFieldsButton {
    width: 100%;
    height: 31%;
    background: linear-gradient(to right, #7c9ebb 0%, #5180ad 70%, #004d8d 100%);
    border: solid #004d8d;
    border-width: 0.3vw 0 0.3vw 0.3vw;
    border-radius: 1vw 0 0 1vw;
    position: relative;
}
gtn650-element #SelectMapFields .SelectMapFieldsButton[state=Inactive]:Hover:Active {
    background: linear-gradient(to right, #d9f1fd 0%, #5180ad 100%);
}
gtn650-element #SelectMapFields .SelectMapFieldsButton[state=Active] {
    background: none;
    background-color:#d9f1fd;
}
gtn650-element #SelectMapFields .SelectMapFieldsButton[state=Active]::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20%;
    background-color: #d9f1fd;
    width: 22%;
    height: 100%;
}

gtn650-element #SelectMapFields .SelectMapFieldsButton .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: black;
    font-size: 2.5vw;
}

gtn650-element #SelectMapFields .selectList_Lines {
    height: 98%;
    margin: 1%;
    width: 98%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}
gtn650-element #SelectMapFields .selectList_Lines .buttonsContainer {
    height: 32%;
    width: 98%;
}

/* Map menu */
gtn650-element #MapMenuContainer{
    display: none;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
}
gtn650-element #MapMenuContainer[state=Active] {
    display: block;
    animation: slideBottomIn 200ms;
}
gtn650-element #MapMenu {
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    border: solid #565656;
    border-width: 0.4vw 0.4vw 0 0.4vw;
    border-radius: 1.5vw 1.5vw 0 0;
    overflow: hidden;
}
gtn650-element #MapMenu .title {
    font-size: 4vw;
    color: #fbfbfb;
}
gtn650-element #MapMenu .buttonsContainer {
    width: 16vw;
    height: 10vw;
    margin: 1vw 0.4vw 1vw 0.4vw;
}
gtn650-element #MapMenu .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #MapMenu .gradientButton .title {
    font-size: 2.5vw;
    color: #a7aec7;
}
/* Right part (detail)*/
gtn650-element #MapMenu >div:nth-child(2){
    min-width: 12vw;
}
/* Left part */
gtn650-element #MapMenu >div:first-child{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1% 3% 1% 2%;
}
gtn650-element #MapMenu >div:first-child >div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 80%;
}
gtn650-element #MapMenu >div:first-child >div:last-child >div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Map overlays */
gtn650-element #MapMenu #MapMenuOverlaysMenu {
    display: none;
    justify-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    overflow: hidden;
}
gtn650-element #MapMenu[displayOverlays=Yes] #MapMenuOverlaysMenu {
    display: flex;
}
gtn650-element #MapMenu #MapMenuOverlaysMenu .title {
    width: 100%;
    text-align: center;
    margin-top: 1%;
}

/* Map overlay buttons */
gtn650-element #MapMenu #MapMenuOverlaysMenu .MapMenuOverlayButtons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
gtn650-element #MapMenu #MapMenuOverlaysMenu .buttonsContainer {
    width: 22vw;
    height: 8vw;
    margin: 0;
}
gtn650-element #MapMenu #MapMenuOverlaysMenu .MapMenuOverlayButtons .titleVertCenter {
    top: 30%;
}


/* Map detail */
gtn650-element #MapMenuDetail {
    border: solid #2a3845;
    border-width: 0.3vw;
    border-radius: 0.8vw;
    display: flex;
    background-color: black;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
/* Title */
gtn650-element #MapMenuDetail >div:first-child {
    width: 100%;
    text-align: center;
    background-color: black;
    overflow: hidden;
}
/* Slider part */
gtn650-element #MapMenuDetail >div:last-child {
    flex-grow: 1;
    width: 96%;
    background: linear-gradient(#151f2a 0%, #0b1117 10%, black 100%);
    overflow: hidden;
    margin: 0 0 3% 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #MapMenuDetail .container {
    flex-grow: 1;
    background: linear-gradient(#00ffff 0%, #005fdf 100%);
    margin: 10% 0 10% 0;
    width: 80%;
    position: relative;
}
gtn650-element #MapMenuDetail .container .step {
    width: 121%;
    margin-left: -11%;
    height: 0.5vw;
    background: linear-gradient(to right, black 0%, #b9d2eb 25%, #b9d2eb 50%, #b9d2eb 75%, black 100%);
    position: absolute;
    z-index: 1;
}
gtn650-element #MapMenuDetail .container .step:nth-child(1) {
    top: 0;
}
gtn650-element #MapMenuDetail .container .step:nth-child(2) {
    top: 33.33%;
}
gtn650-element #MapMenuDetail .container .step:nth-child(3) {
    bottom: 33.33%;
}
gtn650-element #MapMenuDetail .container .step:nth-child(4) {
    bottom: 0;
}

/* Cursor */
gtn650-element #MapMenuDetail .container .cursor {
    width: 125%;
    margin-left: -12%;
    height: 2vw;
    background: linear-gradient(#006060 0%, #00e8f5 100%);
    position: absolute;
    top: 0;
    border: solid #00ffff;
    border-width: 0.2vw;
    border-radius: 0.5vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 4%;
    z-index: 2;
}
gtn650-element #MapMenuDetail .container[mode=transition] .cursor {
    transition: transform 0.2s ease;
}

/* Cursor vertical bars */
gtn650-element #MapMenuDetail .container .cursor >div {
    height: 70%;
    width: 0.3vw;
    background: linear-gradient(#00e8f5 0%, black 100%);
}

/* Background */
gtn650-element #MapMenuDetail .container .background {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #303030;
    height: 0;
    z-index: 0;
}
gtn650-element #MapMenuDetail .container[mode=transition] .background {
    transition: all 0.2s ease;
}

/* map Icons */
gtn650-element #PageMap #MapIconsContainer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}
gtn650-element #PageMap #MapIcons {
    background: black;
    padding: 0.5vw;
    border: solid #a6a6a6;
    border-width: 0.2vw 0.2vw 0 0.2vw;
    border-radius: 1vw 1vw 0 0;
}
gtn650-element #PageMap #MapIcons[mode=hide] {
    display: none;
}

gtn650-element #PageMap #MapIcons .Map_Icon img {
    height: 3vw;
}
gtn650-element #PageMap #MapIcons #MainMap_IconTraffic[mode=hide] {
    display: none;
}

/* OBS Angle */
gtn650-element #PageMap #MapObsAngle {
    width: 12%;
    height: 12%;
    position: absolute;
    right: 0;;
    bottom:35%;
    display:none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #00000060;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: black;
    font-size: 3vw;
}
gtn650-element #PageMap #MapObsAngle[state=Active] {
    display:flex;
}
gtn650-element #PageMap #MapObsAngle .value {
    font-size: 3.5vw;
    padding-left: 0.5vw;
}

/* GSI */
gtn650-element #PageMap #MapGSI[state=active] {
    display: flex;
}
gtn650-element #PageMap #MapGSI .content {
    width: 80%;
    height: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #PageMap #MapGSI .content .mark{
    width: 90%;
    height: 2%;
    background-color: #A0A0A0;
}
gtn650-element #PageMap #MapGSI #MapGSICursor {
    width: 70%;
    height: 8%;
    transform: translateY(0);
    background-color: yellow;
    position: absolute;
}
gtn650-element #PageMap #MapGSI #MapGSICursor[mode=rnav] {
    background-color: magenta;
}

/* Visual button */
gtn650-element #PageMap #MapVisualButtonContainer.buttonsContainer {
    width: 18vw;
    height: 10vw;
    position: absolute;
    left: 1vw;
    bottom: 0;
    z-index: 5;
    display: none;
}
gtn650-element #PageMap #MapVisualButtonContainer[state=active] {
    display: block;
}
gtn650-element #PageMap #MapVisualButtonContainer .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #PageMap #MapVisualButtonContainer img {
    max-height: 60%;
}

/* PageDefaultNav */
gtn650-element #MainPart[state=PageDefaultNav] #PageDefaultNav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1%;
    width: 98%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] {
    border: solid #565656;
    border-width: 0.4vw;
    border-radius: 1.5vw;
    background-color: black;
    animation: slideRightIn 200ms;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav >div{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav >div:first-child{
    margin-bottom: 2%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField {
    width: 33%;
}
/* Wind arrow*/
gtn650-element #PageDefaultNav .windArrow {
    display: block;
    position: absolute;
    right: 2vw;
    top: 1vw;
    height: 4vw;
    transform-origin: 50% 50%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] .MapField, gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=button] {
    height: 25%;
}

gtn650-element #PageDefaultNav .MapField .buttonsContainer {
    height: 8.5vw;
    margin: 2%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] .MapField .buttonsContainer, gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] .gradientButton {
    height: 10.5vw;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] .MapField .gradientButton {
    pointer-events: auto;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=normal] .MapField[display=text] .buttonsContainer {
    background: none;
    border: none;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=normal] .MapField[display=text] .gradientButton {
    pointer-events: none;
    background: none;
    background-color: #00000000;
    color: black;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: black;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=text] .gradientButton .title{
    font-size: 2.8vw;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=text] .gradientButton .value{
    font-size: 5vw;
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=normal] .MapField[display=text] .gradientButton .value{
    -webkit-text-stroke-width: 1.5px;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=edit] .MapField[display=text] .gradientButton .value{
    bottom: 5%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=text] .gradientButton .unit {
    font-size: 2.5vw;
    padding-left: 2%;
    -webkit-text-stroke-width: 1px;
    position: relative;
    bottom: 5%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=button] .gradientButton img {
    height: 4vw;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField[display=button] .gradientButton .title {
    bottom: 10%;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav[mode=normal] .MapField[display=button] .gradientButton {
    pointer-events: auto;
}
gtn650-element #PageDefaultNav #MapFieldsDefNav .MapField .extra {
    width: 100%;
    height: 100%;
    position: relative;
}


/* CDI part */
gtn650-element #PageDefaultNav #MapCDI {
    width: 98%;
    margin: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
gtn650-element #PageDefaultNav #MapCDI[mode=edit] {
    opacity: 0.4;
    pointer-events: none;
}
gtn650-element #PageDefaultNav #MapCDI >div:first-child{
    width: 100%;
}
gtn650-element #PageDefaultNav #MapCDI[mode=edit] >div:first-child{
    display: none;
}
gtn650-element #PageDefaultNav #MapCDI >div:first-child .gradientButton {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 3vw;
    padding: 0.5vw;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIToArrow, gtn650-element #PageDefaultNav #MapCDI #MapCDINextArrow {
    height: 2vw;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDITo {
    color: magenta;
}


gtn650-element #PageDefaultNav #MapCDI >div:last-child {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #PageDefaultNav #MapCDI >div:last-child >div:nth-child(2){
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 4%;
    padding-right: 4%;
    align-items: center;
    position: relative;
    height: 4.5vw;
    background-color: black;
    margin: 1vw;
}
gtn650-element #PageDefaultNav #MapCDI .mark {
    padding-bottom: 2%;
    text-align: center;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIToFrom {
    height: 100%;
    position: absolute;
    top: 0.5vw;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIToFrom svg {
    display: block;
    margin-left:auto;
    margin-right:auto;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIToFrom[mode=from] {
    transform: rotate(180deg);
    top: 0;
    bottom: 0.7vw;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIToFrom .triangle{
    fill: #fbfbfb;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotLeft, gtn650-element #PageDefaultNav #MapCDI #MapCDIBotRight {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 30%;
    font-size: 2.5vw;
    color: #fbfbfb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotLeft span, gtn650-element #PageDefaultNav #MapCDI #MapCDIBotRight span{
    font-size: 1.5vw;
    padding-left: 0.3vw;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotLeft {
    left: 12%;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotLeft img, gtn650-element #PageDefaultNav #MapCDI #MapCDIBotRight img {
    height: 1.8vw;
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotLeft img {
    transform: rotate(180deg);
}
gtn650-element #PageDefaultNav #MapCDI #MapCDIBotRight {
    right: 12%;
}
gtn650-element  #PageDefaultNav #MapCDI #MapCDICursor {
    position: absolute;
    height: 100%;
    width: 2%;
    left: 0;
    background-color: magenta;
    z-index: 1;
}
gtn650-element #PageDefaultNav #MapCDI .contextualButtonContainer .buttonsContainer {
    height: 11vw;
    width: 12vw;
}
gtn650-element #PageDefaultNav #MapCDI .contextualButtonContainer .buttonsContainer .gradientButton {
    height: 100%;
    width: 100%;
}
gtn650-element #PageDefaultNav #MapCDI .contextualButtonContainer .buttonsContainer .gradientButton img {
    width: 100%;
}

/* Default Nav menu */
gtn650-element #DefaultNavMenuContainer{
    display: none;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
}
gtn650-element #DefaultNavMenuContainer[state=Active] {
    display: block;
    animation: slideRightIn 200ms;
}
gtn650-element #DefaultNavMenu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    border: solid #565656;
    border-width: 0.4vw 0.4vw 0 0.4vw;
    border-radius: 1.5vw 1.5vw 0 0;
    overflow: hidden;
}
gtn650-element #DefaultNavMenu .title {
    font-size: 3vw;
    color: #fbfbfb;
    margin: 1%;
}
gtn650-element #DefaultNavMenu >div:last-child{
    display: flex;
    justify-content: center;
}
gtn650-element #DefaultNavMenu .buttonsContainer {
    width: 20vw;
    height: 11vw;
    margin: 1vw 2vw 1vw 2vw;
}
gtn650-element #DefaultNavMenu .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #DefaultNavMenu .gradientButton .title {
    font-size: 2.5vw;
    color: #a7aec7;
}



/* Traffic page */
gtn650-element #PageTraffic {
    position: relative;
    background-color: #242424;
    background-image: url("../../Images/traffic_compass.png"), url("../../Images/traffic_compass.png");
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 30%, 60%;
}
gtn650-element #PageTraffic .Traffic_Title {
    position:absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 6vw;
    background-color: black;
    display: flex;
    align-items: center;
    color: #fbfbfb;
}
gtn650-element #PageTraffic .Traffic_Title img {
    height: 4vw;
}
gtn650-element #PageTraffic .Traffic_Title.smallBoxBorder {
    border-width: 0 0.3vw 0.3vw 0;
    border-radius: 0 0 1.5vw 0;
}
gtn650-element #PageTraffic .Traffic_Hdg {
    position:absolute;
    top: 0;
    right: 0;
    width: 17%;
    height: 6vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbfbfb;
}
gtn650-element #PageTraffic .Traffic_Hdg.smallBoxBorder {
    border-width: 0 0 0.3vw 0.3vw;
    border-radius: 0 0 0 1.5vw;
}

gtn650-element #PageTraffic .Traffic_RangeValue {
    position: absolute;
    font-size: 3vw;
    color: black;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
gtn650-element #PageTraffic .Traffic_RangeValue span {
    font-size: 2vw;
}
gtn650-element #PageTraffic #Traffic_RangeValue1 {
    bottom: 18%;
    left: 21%;
}
gtn650-element #PageTraffic #Traffic_RangeValue2 {
    bottom: 33%;
    left: 35%;
}




/* Terrain page */
gtn650-element #PageTerrain {
    position: relative;
}
gtn650-element #PageTerrain .Terrain_Title {
    position:absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 6vw;
    background-color: black;
    display: flex;
    align-items: center;
    color: #fbfbfb;
}
gtn650-element #PageTerrain .Terrain_Title img {
    height: 4vw;
}
gtn650-element #PageTerrain .Terrain_Title.smallBoxBorder {
    border-width: 0 0.3vw 0.3vw 0;
    border-radius: 0 0 1.5vw 0;
}
gtn650-element #PageTerrain .Terrain_Hdg {
    position:absolute;
    top: 0;
    right: 0;
    width: 16%;
    height: 6vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fbfbfb;
}
gtn650-element #PageTerrain .Terrain_Hdg.smallBoxBorder {
    border-width: 0 0 0.3vw 0.3vw;
    border-radius: 0 0 0 1.5vw;
}

gtn650-element #PageTerrain .Terrain_RangeValue {
    position: absolute;
    font-size: 2.5vw;
    color: black;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: 2;
}
gtn650-element #PageTerrain .Terrain_RangeValue span {
    font-size: 1.7vw;
}
gtn650-element #PageTerrain #Terrain_RangeValue1 {
    top: 18%;
    left: 23%;
}
gtn650-element #PageTerrain #Terrain_RangeValue2 {
    top: 33%;
    left: 35%;
}
gtn650-element #PageTerrain[mode=arc] #Terrain_RangeValue1 {
    top: 50%;
    left: 88%;
}
gtn650-element #PageTerrain[mode=arc] #Terrain_RangeValue2 {
    top: 75%;
    left: 63%;
}

gtn650-element #PageTerrain .Terrain_Compass {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
gtn650-element #PageTerrain .Terrain_Compass[state=disabled] {
    display: none;
}
gtn650-element #PageTerrain #Terrain_Compass1 img {
    display: block;
    width: 60%;
}
gtn650-element #PageTerrain #Terrain_Compass2 img {
    display: block;
    width: 30%;
}
gtn650-element #PageTerrain #Terrain_Arc {
    position: absolute;
    top: 0%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
gtn650-element #PageTerrain #Terrain_Arc[state=disabled] {
    display: none;
}
gtn650-element #PageTerrain #Terrain_Arc img {
    display: block;
    width: 75%;
}
gtn650-element #PageTerrain .Map_North {
    top: 15%;
}

/* Terrain menu */
gtn650-element #TerrainMenuContainer{
    display: none;
    background-color: #00000080;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 6;
}
gtn650-element #TerrainMenuContainer[state=Active] {
    display: block;
    animation: slideBottomIn 200ms;
}
gtn650-element #TerrainMenu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(#2c302c 0%, #0c100c 10%, #080708 100%);
    border: solid #565656;
    border-width: 0.4vw 0.4vw 0 0.4vw;
    border-radius: 1.5vw 1.5vw 0 0;
    overflow: hidden;
}
gtn650-element #TerrainMenu >div.title {
    font-size: 3vw;
    color: #fbfbfb;
    width: 100%;
    padding: 1vw;
    text-align: center;
}
/* Content */
gtn650-element #TerrainMenu >div:last-child {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
gtn650-element #TerrainMenu .groupBox {
    margin-top: 2vw;
    padding: 0.3vw;
    padding-top: 0.5vw;
}
gtn650-element #TerrainMenu .groupBoxTitle {
    font-size: 2.4vw;
}
gtn650-element #TerrainMenu .buttonsContainer {
    width: 13.8vw;
    height: 8.5vw;
    margin: 1vw 0.3vw 0 0.3vw;
    display: inline-block;
}
gtn650-element #TerrainMenu .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #TerrainMenu .gradientButton .title {
    font-size: 2.3vw;
    color: #a7aec7;
    top: 40%;
}
/* Legend */
gtn650-element #PageTerrain #Terrain_Legend {
    position: absolute;
    display: none;
    left: 0;
    bottom: 0;
    width: 18%;
    height: 45%;
    background-color: black;
}
gtn650-element #PageTerrain #Terrain_Legend .title {
    margin-bottom: 0.5vw;
}
gtn650-element #PageTerrain #Terrain_Legend[state=Active] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
gtn650-element #PageTerrain #Terrain_Legend .legendItem {
    width: 90%;
    height: 20%;
    margin: 0 0 0 0;
    border: solid #565656;
    border-width: 0.3vw;
    border-radius: 1vw;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(2) {
    background-color: #ac0f10;
    border-radius: 1vw 1vw 0 0;
    border-color: #ac0f10;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(3) {
    background-color: #b2ba0f;
    border-radius: 0;
    border-color: #b2ba0f;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(4) {
    background-color: #087d04;
    border-radius: 0;
    border-color: #087d04;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(5) {
    background-color: black;
    border-radius: 0 0 1vw 1vw;
    border-top-width: 0;
}
gtn650-element #PageTerrain #Terrain_Legend .legendItemText {
    position: absolute;
    width: 100%;
    text-align: center;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(6) {
    bottom: 67%;
    font-size: 2.1vw;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(7) {
    bottom: 54%;
    font-size: 2.4vw;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(8) {
    bottom: 34%;
    font-size: 2.4vw;
}
gtn650-element #PageTerrain #Terrain_Legend >div:nth-child(9) {
    bottom: 15%;
    font-size: 2.4vw;
}
/* GSL display */
gtn650-element #PageTerrain .Terrain_GSL {
    position: absolute;
    top: 12%;
    right: 1%;
    font-size: 3.5vw;
    -webkit-text-fill-color: #fbfbfb;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
gtn650-element #PageTerrain .Terrain_GSL >div:first-child {
    font-size: 3vw;
    -webkit-text-fill-color: #a7aec7;
    margin-bottom: 1.5vw;
    margin-top: 1.5vw;
}
gtn650-element #PageTerrain #Terrain_GSL span {
    font-size: 3vw;
    padding-left: 2%;
}

/* Weather radar page */
gtn650-element #PageWeatherRadar {
    position: relative;
    background-color: black;
}
gtn650-element #PageWeatherRadar .WeatherRadar_Title {
    position:absolute;
    top: 0;
    left: 0;
    width: 24%;
    height: 6vw;
    background-color: black;
    display: flex;
    align-items: center;
    color: #fbfbfb;
}
gtn650-element #PageWeatherRadar .WeatherRadar_Title img {
    height: 4vw;
}
gtn650-element #PageWeatherRadar .WeatherRadar_Title.smallBoxBorder {
    border-width: 0 0.3vw 0.3vw 0;
    border-radius: 0 0 1.5vw 0;
}
gtn650-element #PageWeatherRadar .WeatherRadar_Stab {
    position:absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 6vw;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1%;
    padding-right: 2%;
}
gtn650-element #PageWeatherRadar .WeatherRadar_Stab >div:last-child{
    color: #fbfbfb;
}

gtn650-element #PageWeatherRadar .WeatherRadar_Stab.smallBoxBorder {
    border-width: 0 0 0.3vw 0.3vw;
    border-radius: 0 0 0 1.5vw;
}

gtn650-element #PageWeatherRadar .buttons {
    position: absolute;
    width: 88%;
    height: 30%;
    bottom: 1%;
    right: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #PageWeatherRadar .buttons >div {
    width: 100%;
    height: 49%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
gtn650-element #PageWeatherRadar .buttons >div:first-child >div:first-child {
    height: 100%;
    width: 45%;
    display: flex;
}
gtn650-element #PageWeatherRadar .buttons >div:first-child >div:last-child {
    height: 100%;
    width: 45%;
    display: flex;
    justify-content: flex-end;
}
gtn650-element #PageWeatherRadar .buttonsContainer {
    height: 100%;
    padding: 0.1vw;
}
gtn650-element #PageWeatherRadar .buttons >div:first-child .buttonsContainer {
    width: 45%;
}
gtn650-element #PageWeatherRadar .buttons >div:last-child .buttonsContainer {
    width: 33%;
}
gtn650-element #PageWeatherRadar .gradientButton {
    width: 100%;
    height: 100%;
}
gtn650-element #PageWeatherRadar .gradientButton .title {
    bottom: 55%;
    max-height: 40%;
    font-size: 2.0vw;
}
gtn650-element #PageWeatherRadar .gradientButton .titleTopCenter {
    font-size: 2.0vw;
}
gtn650-element #PageWeatherRadar .gradientButton .titleVertCenter2lines {
    top: 35%;
    font-size: 2.0vw;
}
gtn650-element #PageWeatherRadar .gradientButton .value {
    position: absolute;
    bottom: 5%;
    width: 100%;
    text-align: center;
    font-size: 2.5vw;
}
gtn650-element #PageWeatherRadar #PageWeatherRadarAirplaneH {
    position: absolute;
    left: 46.6%;
    bottom: 15%;
}
gtn650-element #PageWeatherRadar #PageWeatherRadarAirplaneH img {
    width: 5vw;
}
gtn650-element #PageWeatherRadar #PageWeatherRadarAirplaneV {
    position: absolute;
    left: 8%;
    bottom: 55.0%;
}
gtn650-element #PageWeatherRadar #PageWeatherRadarAirplaneV img {
    width: 9vw;
}



