html {
  height: 100%;
}

body {
  margin: 0px;
  font-family: Exo;
  height: 100%;
  background: lightyellow !important;
  line-height:120%;
}

p {
   margin: 0px;
}

#header {
   height: 8%;
   display: table;
   margin: auto;
}


#headertext {
    font-size: 1.2rem;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #4d4d4d;
}

#map {
   height: 80%;
   background: lightgrey;
}


#selectedtrack {
   height: 5%;
   background: #ffdfa3;
   text-align: center;
   display: table;
   width: 100vw;
}

#selectedcontent{
   display: table-cell;
    vertical-align: middle;
}

#trsign {
    width: 5%; 
}

#trname {
    font-size: 0.85rem;
}


#controls {
   position: relative;
   height: 7%;
}


.button {
  position: absolute;
  top: 15%;
  width: 10%;
  height: 70%;
  border-radius: 5px;
}

.buttonimg {
  width: 100%;
  height: 100%;
}

#tracksbutton {
  left: 1%;
}

#databutton {
  left: 14%;
}

#moviebutton {
  left: 28%;
}

#button3d {
  left: 42%;
}

#pdfbutton {
  left: 56%;
}

#gpxbutton {
  left: 70%;
}

#infobutton {
  left: 84%;
}




.panel{
    width: 100vw;
    background-color: #e0b158;
    opacity: 1;
}

.panelheader{
    top: 0;
    left: 0;
    height: 3vh;
    width: 100%;
    background-color: #ad7100;
}

.paneltitle { 
    position: absolute;
    left: 2%;
    font-size: 0.9rem;
    color: white;
}

.panelclose{
    position: absolute;
    left: 95%;
    color: white;
    font-size: 0.89rem;
    font-weight: bold;
}

.paneltext {
    margin: 5px;
    top: 7%;
}

.infotext {
    font-size: 0.85rem;
}


#infopanel {
    position: absolute;
    bottom: 12%;
    z-index:10;
}


#filterpanel {
    position: absolute;
    top: 8%;
    height: 35%;
    font-size: 0.85rem;
}

#trackspanel {
    position: absolute;
    bottom: 12%;
    height: 45%;
    background-color: rgba(224,177,88,0.7);
}

#full_tracklist {
    font-size: 0.9rem;
    height: 90%;
    width: 98%;
    overflow: scroll; 
}


#viptracklist {
    background-color: #e0b158;
    width: 98%;
    color:white;
}

#moviepanel {
  position: absolute;
  bottom: 70vh;

}

#moviefilm{
    position: absolute;
    margin: 0;
    top: 3vh;
    width: 100vw;
}


#datapanel {
  position: absolute;
  top: 8%;
  margin: 0;
  z-index:101;
}

#datatable {
 width: 95vw;
 margin: auto;
 font-size: 0.9rem;

}

#datatable tr:nth-child(even) {
 background: lightyellow;
}

#datatable tr:nth-child(odd) {
 background: lightorange;
}

.datavalues {
  text-align: center;
}


.langselector {
  text-align: right;
  width: 3.5vh;
  margin-left: 10%;
}


.filterslider {
   position: relative;
}

.filtertype {
   width: 25vw;
}

.filtersettlement {
   width: 68vw;
}

.sliderbox {
    position:relative;
    height: 5.5vh;
    font-size: 0.9rem;
    vertical-align: middle;
}

.noUi-target {
            margin-left: 5px;
            margin-right: 20px;
            height: 1vh;
            width: 35vw;
}

.noUi-base {
           background: lightyellow;
           border: solid 1px lightyellow;
}

.noUi-handle {
           width: 1.5vh !important;
           height: 2.5vh !important;
           left:auto !important;
           right: -8px !important;
           background: #ad7100;
           box-shadow: none;
          border-color: lightyellow;
}

.noUi-connect {
          height: 1.1vh;
          background: #ad7100;
}

.noUi-touch-area {
           width: 4vh !important;
           height: 4vh !important;
}

.noUi-handle::before {
           display: none;
}

.noUi-handle::after {
           display: none;
}