body {
    font-family: 'Lato', sans-serif;
}

.wrapper{
    min-width: 1024px;
    min-height: 768px;
}

#uasTimer {
    position: fixed;
    left: 70%;
}

#loader {
    position: absolute;
    left: 46.5%;
    top:90%;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    display: none;
}

#detailedAnimationButton
{
    top: 85%;
    left: 80.7%;
    visibility: hidden;
    opacity: 0;
    position: fixed;


}
.infrastructure{
    position: fixed;
    width: 90%;
    height: 64%;
    top: 15%;
    left: 5%;
    background: linear-gradient(#95c7c9, #eef8f7);
    overflow: hidden;
}

#backgroundBox{
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    z-index: -50;
    background: linear-gradient(#b7d544, #8cb23e);
    display: block;
}

.greenCurve{
    position: fixed;
    width: 90%;
    height: 3%;
    top: 44%;
    left: 5%;
    background-repeat: no-repeat;
    z-index: -54;
}

.zoom{
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.zoom:hover{
    transform: scale(1.2);
    cursor: pointer;
    z-index: 10;
}

/*Building icons start*/
#CA{
    position: fixed;
    bottom: 24%;
    left: 21%;
    max-width: 11%;
    max-height: 20%;
    z-index: -1;
}

#CMAP{
    position: fixed;
    max-width: 11%;
    max-height: 20%;
    z-index: -2;
}

#VCS, #eram, #stars{
    position: fixed;
    max-width: 11%;
    max-height: 20%;
    z-index: -3;
}

#tdls{
    position: fixed;
    max-width: 11%;
    max-height: 20%;
    z-index: -4;
}

#NADIN{
    position: fixed;
    max-width: 11%;
    max-height: 20%;
    z-index: -2;
}


#rcag{
    position: fixed;
    bottom: 44.5%;
    left: 28%;
    max-width: 10%;
    max-height: 22%;
    z-index: 2;
}

#foc{
    position: fixed;
    bottom: 20.5%;
    right: 48%;
    max-width: 10%;
    max-height: 23%;
    z-index: 0;
}

#faaHQ{
    position: fixed;
    bottom: 25%;
    right: 17%;
    max-width: 11%;
    max-height: 20%;
    z-index: -1;
}

#artcc{
    position: fixed;
    bottom: 35.5%;
    right: 32%;
    max-width: 11%;
    max-height: 20%;
    z-index: 0;
}

#artccNational{
    position: fixed;
    bottom: 45%;
    right: 21%;
    max-width: 13%;
    max-height: 26%;
    z-index: 0;
}

#UAControl{
    position: fixed;
    bottom: 43%;
    right: 11%;
    max-width: 10%;
    max-height: 23%;
    z-index: 0;
}

#base{
    position: fixed;
    top: 45%;
    left: 36%;
    max-width: 17%;
    display: none;
    opacity: 0;
    z-index: -2;
}

#dcns{
    position: fixed;
    top: 46%;
    left: 8%;
    max-width: 10%;
}

#tracon{
    position: fixed;
    left: 43%;
    top: 40%;
    max-width: 11%;
    z-index: -2;
}

.introBox{
    position: relative;
    background-color: #dddddd;
    height: 90%;
    width: 80%;
    margin: auto;
    overflow: hidden;
    z-index: 3;
    font-family: "Open Sans";
    top: 100%;
}

.introTitle{
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 3.5em;
    margin: 15px;
}


.introBox ul{
    position: relative;
    left: 20%;
    list-style: none;
    font-size: 2em;
}



#flightPlan{
    position: fixed;
    top: 64%;
    right: 48%;
    max-width: 9%;
    opacity: 0;
    display: none;
}

#airport{
    position: fixed;
    top: 60%;
    left: 13%;
    max-width: 15%;
    display: none;
    opacity: 0;
}

/*Building icons end*/

/*Hidden assets start*/
.hiddenItem{
    display: none;
}

#coaFlightPlan{
    position: fixed;
    bottom: 26%;
    left: 45%;
    width: 5.5%;
    max-width: 10%;
    display: none;
    opacity: 0;
    z-index: 2;
}

#coa{
    position: fixed;
    bottom: 28%;
    right: 51%;
    width: 4.5%;
    max-width: 10%;
    opacity: 0;
    z-index: 3;
}

#approvedCoa{
    position: fixed;
    bottom: 28%;
    right: 20%;
    width: 4.5%;
    max-width: 10%;
    opacity: 0;
    z-index: 3;
}

#fti{
    position: fixed;
    bottom: 48%;
    left: 48%;
    width: 7%;
    max-width: 10%;
    display: none;
    opacity: 0;
    z-index: 2;
}

#telephone{
    position: fixed;
    bottom: 40.5%;
    left: 45.5%;
    width: 3.5%;
    max-width: 7%;
    display: none;
    opacity: 0;
    z-index: 2;
}

#satellite{
    position: fixed;
    top: 16%;
    right: 33%;
    max-width: 6%;
    display: none;
    opacity: 0;
    z-index: -2;
}

#uas{
    position: fixed;
    top: 45%;
    left: 38%;
    width: 5.5%;
    max-width: 10%;
    display: none;
    /*visibility: hidden;*/
    opacity: 0;
    z-index: -2;
}

#pic{
    position: fixed;
    top: 38%;
    right: 6%;
    max-width: 6%;
    max-height: 20%;
    z-index: -1;
}

.radio_wave{
    background-image: url("assets/hidden/waveform.png");
    background-repeat: repeat-x;
    height: 122px;
    z-index: 3;
    display: none;
    opacity: 0;
}

#radioWave1{
    position: fixed;
    width: 78%;
    top: 38%;
    left: -2%;
    transform: scale(0.3) rotate(0deg);
}

#radioWave2{
    position: fixed;
    width: 48%;
    top: 44%;
    left: 7%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

#radioWave3{
    position: fixed;
    width: 34%;
    top: 34%;
    left: 31%;
    -webkit-transform: rotate(90deg) scale(0.3);
    -moz-transform: rotate(90deg) scale(0.3);
    -ms-transform: rotate(90deg) scale(0.3);
    -o-transform: rotate(90deg) scale(0.3);
    transform: rotate(90deg) scale(0.3);
}

#radioWave4{
    position: fixed;
    width: 40%;
    top: 51%;
    left: 3%;
    -webkit-transform: scale(0.3) rotate(90deg);
    -moz-transform: scale(0.3) rotate(90deg);
    -ms-transform: scale(0.3) rotate(90deg);
    -o-transform: scale(0.3) rotate(90deg);
    transform: scale(0.3) rotate(90deg);
}

.line{
    border-bottom: dashed #2b5483  2px;
    border-width:5px;
    z-index: -1;
}

#line1{
    opacity: 0;
    position:fixed;
    left: 43.5%;
    top: 63%;
    width: 7%;
    transform: rotate(90deg);
}

#line2{
    position:fixed;
    left: 23.5%;
    top: 60%;
    width: 24%;
    z-index: -1;
    opacity: 0;
    transform: rotate(165deg)
}

#line3{
    position:fixed;
    left: 47%;
    top: 57%;
    width: 15%;
    z-index: -1;
    opacity: 0;
    transform: rotate(5deg)
}

#phoneWave1{
     position: fixed;
     top: 47%;
     left: 40%;
     transform: rotate(120deg);
     display: none;
     opacity: 0;
     z-index: 3;
}

#phoneWave2{
    position: fixed;
    top: 20%;
    left: 63%;
    transform: rotate(200deg);
    display: none;
    opacity: 0;
    z-index: 3;
}

#env{
    position: fixed;
    top: 57%;
    right: 35%;
    max-width: 4%;
    opacity: 0;
    display: none;
}

#env1{
    position: fixed;
    top: 57%;
    right: 47%;
    max-width: 4%;
    opacity: 0;
    display: none;
}

#fms{
    position: fixed;
    top: 36%;
    right: 11%;
    max-width: 3%;
    z-index: -2;
    display: none;
    opacity: 0;
}

#aircraft{
    position: fixed;
    top: 66%;
    right: 81%;
    max-width: 10%;
    width: 5%;
    display: none;
    opacity: 0;
}
/*Hidden assets end*/

/*Buttons*/
.scenarioButtons{
    position: fixed;
    top: 80%;
    width: 90%;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    background-color: #a3c1ce4d;
    height: 96px;
    transform: translate(-50%, 0px);
    left: 50%;
    border-radius: 10px;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: .5%;
    visibility: visible;
}

.currentWrapper{
    background-color: #58688a38;
    padding: 5px 6px 13px 11px;
    border-radius: 8px;
    height: 70px;
    text-align: center;
    margin-bottom: 5px;
}

.futureWrapper {
    background-color: #58688a38;
    padding: 5px 6px 13px 11px;
    border-radius: 8px;
    height: 70px;
    text-align: center;
}
.btn-title{
    border-bottom: solid 1px #6f899f;
    margin-bottom: 8px;
}

.sliderWrapper{
    visibility: hidden;
    position: fixed;
}

#slider{
    background: none!important;
    position: fixed;
    width: 50%;
    height: .6%;
    left: 24.75%;
    top: 87%;
    z-index: 100;
    background-color: cornflowerblue!important;
}

.sliderWrapper {
    left: 51%;
    top: 90%;
}

button{
    margin-top: 10px;
    margin-left: 5px;
}




.controlButton{
    position: fixed;
    bottom: 10.5%;
    left: 48%;
}

.controlButton:hover{
    cursor: pointer;
}

#playButton{
    position: fixed;
    display: none;
    background: url(assets/ui/playButton1@1x.png) no-repeat;
    width: 77px;
    height: 54px;
}

#pauseButton{
    position: fixed;
    display: block;
    background: url(assets/ui/pause@1x.png) no-repeat;
    width: 77px;
    height: 54px;
}
/*Buttons end*/

.nowPlayingText{
    position: fixed;
    top: 82%;
    left: 25%;
    font-size: 1.375vw;
}

.title{
    position: fixed;
    top: 82%;
    width: 45vw;
    font-size: 1.375vw;
    margin-left: -3.5%;
}

#asIsLaunchText{
    position: fixed;
    visibility: hidden;
    opacity: 0;

}
#toBeLaunchText{
    position: fixed;
    visibility: hidden;
    opacity: 0;

}

#returnButton{
    position: fixed;
    top: 85%;
    left: 8%;
}



.overviewWrapper{
    width:auto;
    z-index: 1;
}


/*end*/

.tooltip-styling{
    background: white !important;
    opacity: .8 !important;
}



h4{
  
    font-size:.9em;
    font-weight: 400 !important;
}

img{
    max-width: 100%;
    max-height: 100%;
}

::-moz-selection{
    background-color:Transparent;
    color:#000;
}

::selection {
    background-color:Transparent;
    color:#000;
}