@font-face {
    font-family:'Quicksand';
    font-style: normal;
    font-weight: 100;
    src: 
      local('Quicksand'),         
      local('Quicksand'),  
      url(https://meteo365.es/fonts/quicksand.woff2) format('woff2'), 
      url(https://meteo365.es/fonts/quicksand.woff) format('woff');   
}

@font-face {
    font-family:'Quicksand';
    font-style: normal;
    font-weight:  800;
    src: 
      local('Quicksand Bold'),         
      local('Quicksand-Bold'),  
      url(https://meteo365.es/fonts/Quicksand-Bold.woff2) format('woff2'), 
      url(https://meteo365.es/fonts/Quicksand-Bold.woff) format('woff');   
}
html, body {height: 100%;}
body { font-family: 'Quicksand', sans-serif; margin: 0; padding: 0; color:#0a4e70; font-size: 15px; -webkit-text-size-adjust: none; }

header { position: fixed; top:0px; left:0px; width: 100%; background-color:white; height: 50px; z-index: 99999999999999; }
header a { color: #0a4e70; text-decoration: none;}
#headerbereich { width:100%;max-width:1200px; margin: 0 auto; position: relative;}
#headerbereich svg { vertical-align: sub; }
#logo { height: 16px; padding: 10px; float: left; background-image: url(../img/meteo365.png); background-size: 180px 38px; background-position: center center; width: 180px; background-repeat: none; border-radius: 30px; position: relative; top: 10px; left: 0px; z-index: 999999;  margin-left:0;}

#headercontent { width: calc(100% - 220px); max-width: 1100px; float: right;  }

ul#menutop { list-style-type: none; margin: 0; padding: 0; font-size:16px; }
ul#menutop li { float: left; border-radius: 20px; margin: 2px 10px 0; padding: 2px 4px; }
a { /*display: block;*/ color: #0a4e70; text-decoration: none }

img.wettericon { width: 18px; margin-right: 5px; vertical-align: top;  }
#menubutton { box-shadow: 1px 1px 4px #000; background-image: url(../images/menu.png); background-size: 18px 18px; margin-left: -10px; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; border-radius: 50%; background-color: rgba(10, 78, 112, 1); float: left }

.contentinhalt { max-width:1200px; width:98%; margin: 0 auto; padding: 1%; }
.contentinhalt2 { max-width:1200px; width:98%; margin: 0 auto; padding: 1%; }
.contentinhalt3 { max-width:1200px; width:98%; margin: 20px auto 0; padding: 1%; }
.contentinhalt4 { max-width:1200px; width:98%; margin: 0 auto; color: white; font-size: 18px; }
.content { width:100%;max-width:1200px;margin:60px auto 0; padding: 0px;   }
.content1 { width:100%;margin:60px auto 0; padding: 0px; background: rgb(10,78,112);background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);  }
.content1taf {  width:100%; margin:10px auto 0; padding: 0px; background: rgb(10,78,112); background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); }
.content2 { width:100%;  }
.content3 { width:100%;margin:60px auto 0; padding: 10px 0px; background: rgb(10,78,112);background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);   }

h1 { color: white; font-weight: lighter; letter-spacing: 2px; padding: 5px ; margin: 5px 0; width: auto; text-align: center; font-size: 18px;}
h2 { color: white; font-weight: lighter; letter-spacing: 2px; padding: 5px ; margin: 5px 0; width: auto; text-align: center; font-size: 18px;}
h2.estitle { color: white; font-weight: lighter; letter-spacing: 2px; padding: 5px ; margin: 5px 0; width: auto; text-align: center; font-size: 18px; line-height: 40px; }
h3 {   font-weight: normal;  padding: 0; margin: 0;  font-size: 13px;}
h4 {  color: #052738; font-weight: bold; letter-spacing: 1px;  font-size: 14px;}
h5 {  color: white; font-weight: bold; letter-spacing: 2px; padding: 10px 0; margin: 0; font-size: 16px; }
h6 {  font-weight: normal; letter-spacing: 2px; padding: 10px 0; margin: 0; font-size: 15px; }

h1#airport { color: white; font-weight: lighter; letter-spacing: 2px; font-size: 22px; padding: 0; margin: 0; text-align: center; }
h2#airport { width: 100%; padding: 5px 10px; text-align: center; font-size:16px; color:#0a4e70;; line-height:35px;  font-weight: normal; letter-spacing: 2px;}

h3#start {  color: white; font-weight: lighter; letter-spacing: 1px; padding: 0; margin: 0; line-height: 30px; font-size: 15px;}
h3#start strong { font-weight: bold; }

h4#start {  color: #0a4e70; font-weight: lighter; letter-spacing: 1px; padding: 0; margin: 0; line-height: 30px; font-size: 14px;}
h5#start {  color: #0a4e70; font-weight: lighter; letter-spacing: 1px; padding: 0; margin: 0; line-height: 30px; font-size: 14px;}

h4#start strong { font-weight: bold; }
h5#start strong { font-weight: bold; }

h6#start {  font-weight: bold; letter-spacing: 2px; padding: 10px 0; margin: 0; font-size: 15px; color: white; }


.pulseIconaviso { display: block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,204); cursor: pointer; box-shadow: 0 0 0 rgba(262,188,204, .4); animation: pulse 3s infinite; }
.pulseIconaviso:hover { animation: none }
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(262,188,204, .4)
  }
  70% {
    box-shadow: 0 0 0 10px rgba(262,188,204, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(262,188,204, 0)
  }
}


.card { margin: 2px 20px 0; width: 200px; height: 200px; padding: 2px; float: left;}
.compass { position: relative; width: 100%; height: 200px; }
.compass & > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#arrowSVG { position: absolute; top:0px;}  
#runwaySVG { position: absolute; top:9px; left:81px; filter: none; width: 37px; height: 186px; background: url("../images/runway.png"); display: flex; justify-content: center; opacity: 0.6;}
.compass svg { filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg) opacity(1); width: 200px; height: 200px; position: absolute; }      
.compass-content { color: white; }
.compass-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 20px; font-weight: bold;}
.unit {font-size: 14px;font-weight: 100;}
        #winddirection {font-size: 20px }

#progress {width: 200px; height:200px; float: left; margin: 20px 20px 0;}
#progress path { stroke-linecap: round; stroke-width: 4; }
#progress path.grey { stroke: rgba(255,255,255,0.3); }
#progress path.blue { stroke: url(#gradient); stroke-dasharray: 190; stroke-dashoffset: 190; animation: dash 3s ease-out forwards;  }
#progress svg { margin-top: -20px; }

#wetterdaten { width: 275px; margin: 20px 20px 20px 0; float: left;  }
table.tab { width: 100%; /*max-width: 600px;*/ color: white; margin-top: 0px; border-collapse: separate; border-spacing: 5px 5px; }
table.tab tr td { width: 100%; color: white; background-color: #07bccf; border-radius: 20px; line-height: 20px; padding: 10px; }
table.tab tr td.zwischen { background-color: rgba(255,255,255,0); }
table.tab tr th { width: 100%; color: white; background-color: #0a4e70; padding: 0 5px; text-align: left; border-radius: 20px; }
table.tab tbody tr:nth-child(even) td { background: linear-gradient(90deg, rgba(7,188,207,1) 0%, rgba(10,78,112,1) 100%); /*background-color: #0a4e70;*/ }
table.tab tbody tr:nth-child(odd) td { background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); /*background-color: rgba(7,188,207,1);*/  }
table.tab tbody tr:nth-child(odd) td.aport { background: linear-gradient(90deg, rgba(7,188,207,1) 0%, rgba(10,78,112,1) 100%); /*background-color: #0a4e70;*/ }
table.tab tbody tr:nth-child(even) td.aport { background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); /*background-color: rgba(7,188,207,1);*/  }




#button { border-radius: 50%; background-color: #0a4e70; margin-top: -3px; background-repeat: no-repeat; background-position: center center }
#button:hover { background-color: #f29400 }

#facebook { margin:10px; background-image: url(../../images/facebookw.png); float:left;  background-size: 20px 20px; padding:10px; background-position: center; background-repeat: no-repeat; background-color:#f29400; width:20px; height:20px; border-radius: 50%; box-shadow: 1px 1px 4px #000; }
#twitter { margin:10px; background-image: url(../../images/twitterw.png); float:left;  background-size: 20px 20px; padding:10px; background-position: center; background-repeat: no-repeat; background-color:#f29400; width:20px; height:20px; border-radius: 50%; box-shadow: 1px 1px 4px #000; }
#seguir { float:left; margin:10px; line-height:38px;}

#socialbutton { margin:12px 6px; float:left;  padding:4px;  width:20px; height:20px; color: white; }

#fotterleft { width: 300px; display:inline-block; font-size:16px; }
#fotterright { width:580px; display:inline-block; font-size:14px; top:-25px; position:relative;  }

#contact { display:inline-block; margin:0 10px; }
#contact2 { display:inline-block; margin:0 10px; }

footer {  width: 100%;  margin: 70px auto 0; background: linear-gradient(rgba(7,188,207,1),rgba(10,78,112,1)); height: auto;  color: #eee; text-align: center; font-size: 12px;  line-height: 30px;}
footer a { text-decoration: none; color: #eee;}

#footup { width:100%; max-width:900px; margin: 20px auto 0;   }
#footbottom { width:100%; max-width:700px; margin: 10px auto 0;   }

#lang{position:absolute; top:35px;right:20px; color: #9ea7b3; font-size: 13px;}
.es{padding-right:5px;margin-right:5px;border-right:1px solid rgba(255,255,255,.4)}
.en{padding-right:5px;margin-right:5px;border-right:1px solid rgba(255,255,255,.4)}

/*#nav {position: absolute; z-index: 9999; color: white; top:20px; width: 400px; left:50%; margin-left:-150px;}
*/
#sidebarcams { width: 300px; display: inline-block; margin: 0; position: sticky; position: -webkit-sticky; top: 80px;  }

/*WEATHER*/
.wetterwoland { width:100%;max-width:1320px;margin:auto; color: white;  } 
.contentwhite { width: calc(100% - 40px); max-width: 960px; float: left; margin: 20px 20px 10px 0; padding: 5px 10px;  overflow: hidden; box-shadow: 1px 1px 4px #000; background-color: #052738;}
.contentleft { width: calc(100% - 40px); max-width: 960px; float: left; background-color: rgba(255,255,255,0.2);}

    #datum {color: white; text-align: right; width: 100%;  font-size: 12px; } #zeitzone {color: white; text-align: center; width: 40%; float: right; font-size: 13px; /*text-shadow: 2px 2px 4px rgba(255,255,255,0.6);*/}
    #ort { width: 100%; padding: 10px; background: linear-gradient(#052738, #0a4e70); color: white; font-size: 20px; font-weight: normal; margin-left: -10px; letter-spacing: 2px; }
    #forecasthoras { width: 100%; padding: 5px 10px; background: white; color: #052738; font-size: 14px; font-weight: normal; margin: 10px 0 0 -10px; letter-spacing: 2px; }
    #forecasthoras2 { width: 100%; padding: 5px 10px; background: #f29400; color: white; font-size: 14px; font-weight: normal; margin: 10px 0 0 -10px; letter-spacing: 2px; }
    #mehrdaten { text-align: left; font-size: 12px;}
    #forecast24 { text-align: center; font-size: 15px; color: #052738; font-weight: bold; border-top: 1px solid #052738; padding-top: 5px; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px;}
        #daten { width: 100%; padding: 5px 10px; background: linear-gradient( #0a4e70, #052738); color: white; font-size: 14px; font-weight: normal; margin-left: -10px; letter-spacing: 2px; }

#leftone { width: calc(100% - 360px); float: left; }
#rightone { width: 350px; float: right; padding: 3px 5px 0 0; line-height: 20px;}


    table#weatherforecast24 { width: 1600px; color: #052738;} 
    table#weatherforecast24 tr td { width: 70px; color: #052738;} 
    table#weatherforecast24 tr td.uhrzeit { font-size: 12px; } 




    .modal { padding: 10px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 5px;
  width: calc(100% - 20px);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .modal {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.3);  
  }
  
}

#tafwetterpr {margin: 18px 0; position: relative; display: block; }

#headbereich { width:100%; margin:0 auto;position: relative; height: 470px; } 
#rightbereich { z-index:1; position:absolute; top:0px; right:0px; width:900px; height: 350px; background-image: url("../images/airportcam.png"); background-position: center; background-repeat: no-repeat; background-size: cover; }       
#leftbereich {  position:absolute; top:35px; left:0px; background:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); width:340px; height: auto; padding:0px 10px 1px; z-index:2; line-height:3.3em; }
#rightbereich2 { z-index:1; position:absolute; top:0px; right:0px; width:900px; height: 450px; /*background-image: url("../images/airportcam.png"); background-position: center; background-repeat: no-repeat; background-size: cover;*/ }       

#flughafenwetter { background-color: rgba(11, 21, 31, 0); text-align: center; font-size: 24px; letter-spacing: 20px; padding: 20px 0; }
  
#metarmitte { width: 100%; display: flex; justify-content: space-around; }
.mitte { margin: 10px; max-width:620px; width: 100%; height: 360px; background-image: url("../images/airportvueling.png");background-position: center; background-repeat: no-repeat; background-size: cover; }
.textleft { max-width:400px; width: 100%; text-align: center; }
.metarmitte2 { width: 100%; display: flex; justify-content: space-around; margin: 0 auto 20px; }
.textleft2 { max-width:200px; width: 100%; height: auto; min-height: 200px; text-align: center; background-color: #F0F0F0; padding:  10px 10px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 100px auto 10px; }

#top10tables { width: 100%; margin: 10px auto; display: flex; justify-content: space-around;}
table.top10 { width: 100%; max-width: 350px; color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 10px; font-size: 14px; text-align: center; }
table.top10 tr td { border-bottom:1px solid white; padding-bottom: 10px; max-width: 300px; }   
table.top10 tr td.text { font-size: 16px; }   
table.top10 tr th { background:  rgba(10,78,112,0.4); min-width: 80px; }   

table.liste { width: 100%;  color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 5px; font-size: 14px; text-align: center; }
table.liste tr td { border-bottom:1px solid rgba(255,255,255,0.6); padding-bottom: 5px; }   
table.liste tr td.text { font-size: 16px; }   
table.liste tr th { background:  rgba(10,78,112,0.4); min-width: 80px; }   

table.laender { width: 100%; max-width: 400px;  color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 5px; font-size: 14px; text-align: center; }
table.laender tr td { border-bottom:1px solid rgba(255,255,255,0.6); padding-bottom: 5px; }   
table.laender tr td.text { font-size: 16px; }   
table.laender tr th { background:  rgba(10,78,112,0.4); min-width: 80px; }   

.tower { background:linear-gradient(180deg, #f29400 0%, #fdd25f 100%);; width: 50px; height: 50px; text-align: center; border-radius: 50%; margin: 26px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower img { width: 40px; margin: 5px;}
.tower svg { width: 40px; margin: 6px; color: white; }

.tower2 { background:linear-gradient(180deg, #f29400 0%, #fdd25f 100%);; width: 50px; height: 50px; text-align: center; border-radius: 50%; margin: 26px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower2 img { width: 40px; margin: 5px;}
.tower2 svg { width: 40px; margin: 8px; color: white; transform: rotate(45deg); }

.tower3 { background:linear-gradient(180deg, #f29400 0%, #fdd25f 100%);; width: 50px; height: 50px; text-align: center; border-radius: 50%; margin: 26px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower3 img { width: 40px; margin: 5px;}
.tower3 svg { width: 40px; margin: 12px 5px 5px 6px; color: white; }

 .leaflet-tooltip, .my-labels {
  font-size: 11px; background: none; border:none; padding: 0; width: 150px; white-space: normal; text-align: center; box-shadow: none;
  letter-spacing: 1px;
  color: white;
  top: 30px; font-weight: bold;
  z-index: 99999999;
  text-transform: uppercase;
  text-shadow: 3px 4px 5px black;
  font-family: 'Quicksand', sans-serif;
}

  .box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
}

.box2 {
  background-image: linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)),
                    linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)),
                    linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)),
                    linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)),
                    linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 2px 50%, 50% 2px, 2px 50%, 50% 2px, calc(100% - 8px) calc(100% - 8px);
  background-position: left, bottom, right, top, 4px 4px;
  
 
}
.gradient-border { 
  background-image: linear-gradient(rgba(62,188,204,0.6), rgb(53,204,182)),
                    linear-gradient(to right, rgb(53,204,182), rgba(62,188,204,0.6)),
                    linear-gradient(to bottom, rgb(53,204,182), rgba(62,188,204,0.6)),
                    linear-gradient(to left, rgb(53,204,182), rgba(62,188,204,0.6)),
                    linear-gradient(rgba(14,30,46,0), rgba(14,30,46,0));
}  

/*background-color:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);*/
.divclass {  padding:5px 10px; width:400px; height:350px; float:left; margin-top:10px; color:rgba(10,78,112,1);
  background-image: linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 2px 50%, 50% 2px, 2px 50%, 50% 2px, calc(100% - 8px) calc(100% - 8px);
  background-position: left, bottom, right, top, 4px 4px;
}
.divclass2 { padding:5px 10px; width:330px; height:350px; float:right; margin-top:10px; background-color: rgba(14,30,46,1);
  background-image: linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(rgba(62,188,204,1), rgba(62,188,204,1)), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 2px 50%, 50% 2px, 2px 50%, 50% 2px, calc(100% - 8px) calc(100% - 8px);
  background-position: left, bottom, right, top, 4px 4px;
}

 #clock { padding: 10px 0; border-radius: 20px; background-color:#0a4e70; width: 180px; margin: 0 auto; text-align: center; color: #07bccf; text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0); } 

#ungueltig { background:#0a4e70; font-size: 17px; width: 80%; color: white; padding: 10px 5%; margin: 10px auto; text-align: center; letter-spacing: 2px; }
#ungueltig i { color: lightslategrey; font-size: 19px;}

#clocktime { letter-spacing: 5px; font-size: 20px; padding: 5px 0; }
#clockdate { letter-spacing: 1px; font-size: 12px; }
.text { letter-spacing: 2px; font-size: 11px; }
  
#map { width: 260px;  height: 260px; border-radius: 50%; margin: 0 auto;  background: none;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative; z-index:500; }
#mapstart { width: 100%; margin:10px 0; height: 400px; background: none;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative; z-index:5; }
#mapsigmet { width: 100%; margin:10px 0; height: 400px; background: none;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative; z-index:5; }

#klick { position: absolute; z-index: 999999999999; top: 10px; left: 10px; background-color: rgba(7,188,207,0.8); color: white; font-size: 14px; padding: 10px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2);  }

#begl { width: 100%; font-size: 14px; letter-spacing: 2px; padding: 0 0 30px 0; }    
#beglrest { /*width: calc(100% - 130px);*/ width: 100%; max-width: 760px; padding: 5px; height: auto; float: left;  background-color: #28698a; }
#beglrechts { /*width: calc(100% - 130px);*/ width: 100%; max-width: 310px; padding: 5px; height: auto; float: left; margin-left: 10px; background-color: #28698a; }
 
.beglrest { width: calc(100% - 330px); padding: 5px; height: auto; float: left; }
    
#alledaten { height: 100px; background-color: antiquewhite; overflow: scroll; width:auto;}
#alledatentaf { height: 100px; background-color: antiquewhite; overflow: scroll; width:auto;}

.VFR, .MVFR, .IFR, .LIFR {  margin: 10px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2); color: white; padding:5px 8px; border-radius: 5px; width: 45px; display: block; text-align: center; }
    
.VFR {  background-color: #3fd99b; }
.MVFR { background-color: #44aef8;  }
.IFR {  background-color: #f85d7f;  }
.LIFR { background-color: #a175fe;  }
    
    
.boxmetar { padding:2px 5px; border-radius: 5px; /*background: linear-gradient(#28698a, #28698a);*/ color: white; }   

.boxleft { float: left; width: calc(100% - 320px); line-height: 40px; }    
.boxright { float: right; width: 300px;  }  
.boxrightairport { float: right; border: 1px solid #07bccf; border-radius: 20px; margin: 20px auto; display: flex; width: 280px; padding: 10px; }  
.boxlefttable { float: left; width: calc(100% - 320px); line-height: 40px; }    
.boxleftblue  { float: left; width: calc(100% - 320px); line-height: 20px; margin: 0; color: white;  }    
.boxleftwhite { float: left; width: calc(100% - 320px); line-height: 20px; margin: 0; }    
  
#windtext { text-align: center; color: white; margin-top: -120px; line-height: 40px; font-size: 20px; }    

#tafdivinhalt { width: 100%; margin: 10px auto; color:white; line-height: 30px;}
    
table.metar  { width: 100%; color:#07bccf; margin-top: 0px;border-collapse: separate; border-spacing: 10px 10px; }
table.metar tr td {  color: #07bccf; margin-top: 10px; background-color: rgba(7,188,207,0.2); border:none; letter-spacing: 1px; font-size: 12px; text-align: center; width: 50%; padding: 2px 0; border-radius: 20px; }
table.metar tr td.firstmetar {width: 60px; }   
table.metar tr td img {  margin:5px 5px 0 0; width: 20px; height: 20px; }
table.metar tr td.metar1 {width: 40%; }   
table.metar tr td.metar2 {width: 60%; }   
table.metar tr td svg {  color: #0a4e70; padding: 8px 4px 0 0;}
table.metar tr td.metar3 {width: 60%; background-color: rgba(7,188,207,0); }      
.mt1 { margin: 0 auto; display: flex; justify-content: center;}

#metartemp, #metartaupunkt, #metarhoehenmesser, #metarhorizontal, #metarrh {font-size: 18px; color:#0a4e70;}    
#metartemp small, #metartaupunkt small, #metarhoehenmesser small, #metarhorizontal small, #metarrh small {font-size: 14px; }    
#metartemp2, #metartaupunkt2, #metarhoehenmesser2, #metarhorizontal2, #metarrh2 { font-weight: bold;}    

#metartextunten { letter-spacing: 2px; line-height: 20px;background-color: rgba(7,188,207,0.4); padding: 5px; font-size: 15px;}
  
#sunrisetable { overflow: scroll; width:100%;}
#sunrisetable::-webkit-scrollbar { display: none; }
#sunrisetable { -ms-overflow-style: none;  scrollbar-width: none; }


table.sunrisetable { width:80%; margin: 0 auto; background-color: rgba(7,188,207,0.4); text-align: center; }
table.sunrisetable tr.firstline th { border-bottom: 1px solid rgba(255,255,255,0.4); }
table.sunrisetable tr th svg { vertical-align: middle;}

table#taf { width: 100%; color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 10px; font-size: 14px; text-align: center; }
table#taf tr td { border-bottom:1px solid white; padding-bottom: 10px; max-width: 300px; }   
table#taf tr.tempochange { background-color: aliceblue; color:#0a4e70; text-align: left; } 
table#taf tr.tempochange td { padding-bottom: 0px;} 
table#taf tr.TEMPO { background-color: rgba(255,255,255,0.2); margin-top: -10px; } 
table#taf tr th { background:  rgba(10,78,112,0.4); min-width: 80px; }   
table#taf tr td img { float: left; }    
    
img#windrose { background: linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); border-radius: 50%; padding: 5px 8px 5px 5px; float: left; margin: 40px 0 0; width: 45%; max-width: 400px;}
img#windrose2 { border-radius: 50%; padding: 5px 8px 5px 5px; float: left; margin-top: 40px;}
   
    .cloudbasemetar  {  color: #0a4e70; width: 96%; margin: 15px auto; font-size: 13px;}  
    table.sky { border-bottom: 1px solid rgba(7,188,207,1); padding-bottom: 10px; width: 98%; }
    table.sky tr td.img { width: 44px;}
    #sky1, #sky2, #sky3, #sky4 {  width: 100%; font-size: 15px; }   
    #sky1 img, #sky2 img, #sky3 img, #sky4 img { width: 40px; vertical-align: middle; padding-right: 20px; }       
    #runwaydaten { width: 100%; color: white; margin: 10px;  }    
    #runwayairport { font-size: 14px; font-weight: normal; width: 280px; margin:20px 0 0 20px; color: white; background: linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); float: left;  border-radius: 20px; padding: 10px; }
    .datenvonuhrzeit { color:#0a4e70; font-size: 13px; margin: 10px 0 0; text-align: right;}
    
    .labelblack { width: 240px; height: auto; background:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); float: left; border-radius: 20px; padding: 0 0 10px 0;}    
    .labelblacktext { color: white; text-align: center; padding: 10px 0 0 0; letter-spacing: 2px; font-size: 13px;}
    .labelright {  width: calc(100% - 260px);  /*background-color:#0a4e70;*/ float: left; margin: 0 0 0 10px;  } 
    

#guststextmetar { width: 100%; color: white; margin: 0px auto; text-align: center; font-size: 14px; }

    #windrunway { width: 100%; color: white; margin: 30px auto; }
    
#localtime { float: right; width: 300px;  margin: 40px auto 0;  }    
#mapaunddaten { float: right; width: 300px; margin: 0px auto 0; } 
#zeitzoneairport { width: 90%; margin: 10px auto; color: #0a4e70; text-align: center; font-size: 13px;}    
  
    #metargemessen { font-weight: bold;}
    
    #airportdaten { text-align: center;}
    
    #artairport { font-size: 14px; background-color: #07bccf; color:white; padding:5px; width: auto; border-radius: 20px; margin: 10px auto 0;}
    
    #nearbyairports {  width: calc(100% - 220px); float: left; margin: 0; }
    
    #tafissue, #taffromtime, #taftotime { font-weight: bold;}
    
    #tx, #tn { background-color: rgba(7,188,207,0.2); border-radius: 20px; color: white; padding:5px; margin: 5px 0; width: auto; }
    #tx img, #tn img { vertical-align: middle; width: 28px; }
    #tx svg, #tn svg { vertical-align: middle; padding: 0px 0px 0 10px; }
    
    #gradplus, #gradminus { font-weight: bold;}
    
    #tafrawdata { background: rgba(10,78,112,0.8); margin: 20px auto; border-radius: 20px; padding: 5px 10px; font-size: 14px; width: 80%;}
      #rawtext { background: rgba(10,78,112,1); margin: 20px auto; border-radius: 20px; padding: 5px 10px; font-size: 14px; width: 80%; color:white;  }
    
    #tafdivinhaltkeinedaten { background: rgba(10,78,112,0.8); margin: 20px auto; border-radius: 20px; padding: 50px; font-size: 20px; text-align: center; color:white; width: 80%; display: none;}
   
    .leheident{ border-radius: 20px; border:1px solid white; padding: 6px;}
    
    
    #wasfuerwetter {width: calc(100% - 100px); float: left; }
    #metarflightcat {width:65px; float: right; /*margin-top: 10px; height: 38px;*/ }
 
ul.navmenu { list-style: none outside none; margin:0; padding: 0; text-align: center; font-size: 13px;  }
ul.navmenu li { display: inline; margin: 5px; border-radius: 20px; background-color: #fff; color: black; border:1px solid black; padding:4px; }    
ul.navmenu li.active {  background-color: black; color:white;  }    
    

ul#alphabet { list-style: none outside none; margin:20px auto; padding: 0; text-align: center; font-size: 13px; color: white;  }
ul#alphabet li { display: inline-block; width: 16px; margin: 5px; border-radius: 20px; color: white; border:1px solid white; padding:4px; }    
ul#alphabet li.active {  background-color: #f29400; color:white; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }    
    
table#metarak tr td { text-align: center; } 
table#metarak tr td.icon { width: 50px;  }
table#metarak tr td.icon img { background-color: #07bccf; border-radius: 50%; padding: 4px; width: 35px; height: 35px; }

#letterlandall { width: 100%; color: white; font-size: 16px; margin: 0 0 30px; padding: 0 0 40px; border-bottom: 1px solid rgba(255,255,255,0.6); } 
#letterland { width: 100%; height: auto; max-height: 320px; overflow: scroll; color: white; font-size: 16px; } 
#letterland::-webkit-scrollbar { display: none; }
#letterland { -ms-overflow-style: none;  scrollbar-width: none; }

table#farbcodes { border-collapse: separate; border-spacing: 10px 5px; background-color: rgba(7,188,207,0.2); }    
table#farbcodes tr  { border: 1px solid black;}    
table#farbcodes tr td { height: 50px; }    
table#farbcodes tr td.info { text-align: center; font-size: 14px; }    
#sunrisesunset { font-size: 14px; background-color: rgba(7,188,207,1); color:white; border-radius: 20px; width: 80%; margin: 0 auto 10px; }

#sunrisesunset svg { vertical-align: middle; }

table#farbcodes2 { border-collapse: separate; border-spacing: 0px 5px; background-color: rgba(7,188,207,0); float: right; width: 50%; max-width: 400px; }    
table#farbcodes2 tr td { height: 24px; }    
table#farbcodes2 tr td.info { text-align: center; font-size: 14px; }    
table#farbcodes2 tr td.grad { text-align: center; }    
table#farbcodes2 tbody tr:nth-child(odd) td {  }
table#farbcodes2 tbody tr:nth-child(even) td { background-color: rgba(7,188,207,0.2); /*color:#07bccf;*/ }

table.icontable {width: 100%; max-width: 300px; float: left;}
table.icontable tr th {text-align: left;}
img.wettericontable { width: 30px;}
img.wettericontable2 { width: 28px; border-radius: 50%; background-color: #07bccf; height: 28px; padding: 2px;}

table.sunrisetable { width: 100%; }



#taftable { width:100%;}    

.tiempoactual { width:100%;}





.title { font-size: 20px; letter-spacing: 2px; margin: 0 0 20px;}

#taftable::-webkit-scrollbar { display: none; }
#taftable { -ms-overflow-style: none;  scrollbar-width: none; }

ul#nav { overflow: hidden; width: auto;  }

ul#nav { width: calc(100% - 50px); list-style: none; }

ul#nav li { float: left; font-size: 13px; }

ul#nav li.more { width: 40px; text-align: left; display: none; float: left; }

ul#nav li.more:hover ul#overflow {
  opacity: 9999999;
  visibility: visible; position: absolute;
}

ul#nav li a,
ul#nav li span {
  display: block;
  text-decoration: none;
  padding: 0 10px 10px;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}


ul#nav #overflow {
  opacity: 0;
  visibility: hidden;
  position: absolute;
 /*text-align: left;
 -webkit-transition-duration: .3s;
  transition-duration: .3s;*/
    width: 150px; margin-left: -10px;
}

ul#nav #overflow li { float: none; }

ul#nav #overflow li a {
  background: white;
}

ul#nav #overflow li a:hover { background: #f1f1f1; }

ul#nav li.more:hover ~ #logo {
    display: none;
}

.dropbtn { background-color: rgba(7,188,207,0); color: #0a4e70; padding: 1px; font-size: 16px; border: none; }
#dropdown svg { vertical-align: baseline; }
#dropdown { position: absolute; display: inline-block; float: right; padding-top: 3px; top: 10px; right: 5px;}
.dropdown-content { display: none; position: relative; background-color: #f1f1f1; min-width: 40px; height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 9999999999; }
.dropdown-content a { color: #0a4e70; padding: 12px 5px; text-decoration: none; display: block; }
#dropdown:hover .dropdown-content {display: block; visibility: visible; z-index: 9999999999;}


#legendewaves, #legendetemp, #legendeprec, #legendehumedad, #legendegusts {
    width:300px;
    height: 16px;
    margin: 0; /*box-shadow: 1px 1px 4px #000;*/
}

  #legendeprec {
    background: -prefix-linear-gradient(left, rgb(6, 108, 152), rgb(6, 108, 152), rgb(26, 153, 207), rgb(52, 195, 150), rgb(89, 232, 93), rgb(241, 239, 13), rgb(240, 124, 8), rgb(253, 5, 0), rgb(101, 4, 133), rgb(56, 3, 74), rgb(56, 3, 74));
    background: linear-gradient(to right, rgb(6, 108, 152), rgb(6, 108, 152), rgb(26, 153, 207), rgb(52, 195, 150), rgb(89, 232, 93), rgb(241, 239, 13), rgb(240, 124, 8), rgb(253, 5, 0), rgb(101, 4, 133), rgb(56, 3, 74), rgb(56, 3, 74));
    margin: 5px; float: left;
    padding: 2px;
    border-radius: 5px;
    z-index: 800;
    position: relative
  }
  #legreg {
    width: 100%;
    height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    font-size: 11px
  }
  #legreg > div {
    flex: none
  }

  #legreg2 {
    width: 96%;
      /*margin: 0 auto;*/
    height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    font-size: 11px
  }
  #legreg2 > div {
    flex: none
  }

.markerp {
                position: absolute;
                top: 0;
                width: 2px;
                height: 20px;
                background-color: black;
    color:#0a4e70;
            }

            

            .markerp-block {
                flex: 1;
            }

            .markerp-pos {
                width: 1px;
                height: 20px;
                background-color: rgba(0, 0, 0, 0.2);
                font-size: 8px;
                color: rgba(0, 0, 0, 0.2);
            }

  #legendeprec2 {
      background:  -prefix-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1.16%, rgba(6, 108, 152, 0) 1.16%, rgb(6, 108, 152) 6.98%, rgb(6, 108, 152) 12.79%, rgb(1, 169, 156) 18.6%, rgb(77, 191, 26) 24.42%, rgb(153, 204, 0) 30.23%, rgb(241, 239, 13) 36.05%, rgb(241, 200, 34) 41.86%, rgb(255, 137, 0) 47.67%, rgb(255, 0, 0) 53.49%, rgb(180, 0, 0) 59.3%, rgb(159, 72, 255) 65.12%, rgb(0, 212, 252) 70.93%, rgb(0, 212, 252) 76.74%, rgb(157, 247, 252) 82.56%, rgb(157, 247, 252) 88.37%, rgb(190, 190, 190) 94.19%, rgb(190, 190, 190) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1.16%, rgba(6, 108, 152, 0) 1.16%, rgb(6, 108, 152) 6.98%, rgb(6, 108, 152) 12.79%, rgb(1, 169, 156) 18.6%, rgb(77, 191, 26) 24.42%, rgb(153, 204, 0) 30.23%, rgb(241, 239, 13) 36.05%, rgb(241, 200, 34) 41.86%, rgb(255, 137, 0) 47.67%, rgb(255, 0, 0) 53.49%, rgb(180, 0, 0) 59.3%, rgb(159, 72, 255) 65.12%, rgb(0, 212, 252) 70.93%, rgb(0, 212, 252) 76.74%, rgb(157, 247, 252) 82.56%, rgb(157, 247, 252) 88.37%, rgb(190, 190, 190) 94.19%, rgb(190, 190, 190) 100%);

      
    /*background: -prefix-linear-gradient(left, rgb(6, 108, 152), rgb(6, 108, 152), rgb(6, 108, 152), rgb(1, 169, 156), rgb(77, 191, 26), rgb(153, 204, 0), rgb(241, 239, 13), rgb(241, 200, 34), rgb(255, 137, 0), rgb(255,0,0), rgb(180,0,0), rgb(159,72,255), rgb(0,212,252), rgb(0,212,252), rgb(157,247,252), rgb(157,247,252), rgb(190,190,190) );
    background: linear-gradient(to right,rgb(6, 108, 152), rgb(6, 108, 152), rgb(6, 108, 152), rgb(1, 169, 156), rgb(77, 191, 26), rgb(153, 204, 0), rgb(241, 239, 13), rgb(241, 200, 34), rgb(255, 137, 0), rgb(255,0,0), rgb(180,0,0), rgb(159,72,255), rgb(0,212,252), rgb(0,212,252), rgb(157,247,252), rgb(157,247,252), rgb(190,190,190) );*/
    margin: 5px; float: left;
    color: white;
  line-height: 18px;
    border-radius: 5px;
    z-index: 800;
    position: relative;
      width: calc(100% - 10px);  
      height: 25px;
  }

  #legendeprec2_alt {
    background: -prefix-linear-gradient(left, rgb(6, 108, 152), rgb(1, 169, 156), rgb(77, 191, 26), rgb(153, 204, 0), rgb(241, 239, 13), rgb(255,137,0), rgb(255,0,0), rgb(200, 5, 0), rgb(72, 72, 255), rgb(0,0,202), rgb(153, 0, 153),rgb(74, 0, 153),rgb(217, 217, 217));
    background: linear-gradient(to right, rgb(6, 108, 152), rgb(1, 169, 156), rgb(77, 191, 26), rgb(153, 204, 0), rgb(241, 239, 13), rgb(255,137, 0), rgb(255, 0, 0), rgb(200, 5, 0), rgb(72, 72, 255), rgb(0, 0 ,202), rgb(153, 0, 153),rgb(74, 0, 153),rgb(217, 217, 217));
    margin: 5px; float: left;
    color: white;
  line-height: 18px;
    border-radius: 5px;
    z-index: 800;
    position: relative;
      width: calc(100% - 10px);  
      height: 20px;
  }


.triggering::before, .triggeringsplit::before, .growing::before, .maturity::before, .decaying::before, .rdtcast::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px; margin: 0 5px 0; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
 }

.triggering::before { background-color: #fdfd00; }
.triggeringsplit::before { background-color: orange; }
.growing::before { background-color: #fb0001; }
.maturity::before { background-color: #8535ec; }
.decaying::before { background-color: #0000fc; }
.rdtcast::before { background-color: grey; }

.dbzz { font-size: 0.9em; padding: 4px 4px;}

.styled-table {
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
 .styled-table thead tr {
    background-color: rgba(7,188,207,1);
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 4px 10px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid rgba(7,188,207,1);
}
 




.bew1::before, .bew2::before, .bew3::before, .bew4::before, .bew5::before, .bew6::before, .bew7::before, .bew8::before, .bew9::before, .bew10::before, .bew11::before, .bew12::before, .bew13::before, .bew14::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px; margin: 0 5px 0; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
 }

.bew1::before { background-color: #066c98; }
.bew2::before { background-color: rgb(1, 169, 156); }
.bew3::before { background-color: rgb(153, 204, 0); }
.bew4::before { background-color: rgb(255, 0, 0); }
.bew5::before { background-color: rgb(0, 0, 202); }
.bew6::before { background-color: rgb(153, 0, 153); }
.bew7::before { background-color: #ffa0d2; }
.bew8::before { background-color: #fd80cb; }
.bew9::before { background-color: #f132a2; }
.bew13::before { background-color: #b9008c; }
.bew10::before { background-color: #c8d2e6; }
.bew11::before { background-color: #9696dc; }
.bew12::before { background-color: #785ad2; }
.bew14::before { background-color: #5a32b4; }

.wetterlayerCas
{
  background-color: #07bccf;
  border-radius: 30px;
  padding: 2px 10px 2px 5px;
  color: #fff;
  text-shadow: 2px 2px 4px #03111e;
  letter-spacing: 1px;
  font-weight: 300;
  display: inline-block;
  box-shadow: 1px 1px 4px #000;
  width: auto;
  margin-bottom: 10px;
  white-space: nowrap;
}

/*width: calc(100% - 310px);*/ /*height: calc(100vw - 110px); height: -moz-calc(100vw - 110px); height: -webkit-calc(100vw- 110px); max-height: 1000px; */

#mapmet { width: 98vw; max-width: 1200px;  background-color: grey; float: left; margin: -166px auto 10px;}
#mapmet2 { width: 98vw; max-height: 1000px; max-width: 1200px;  background-color: grey; float: left; margin: -262px auto 10px;}

#side { float: right; width: 300px; }

#popupdata { float: right; width: 300px; } 



.text-below-marker {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
}
.text-below-marker2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
}
.text-below-marker3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
}

.text-below-marker4 {
  text-align: center; z-index: 900;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .2), 0 0 5px #000;
  color: #fff;
  letter-spacing: 1px;
  min-height: 1.2em;
  top: -13px;
  width: max-content;
  max-width: 110px;
  left: -20px;
  transform: translate(-50%, 0);
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}



.text-below-marker5, .text-below-marker6, .text-below-marker7, .text-below-marker8, .text-below-marker9, .text-below-marker10 {
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  display: inline-block;
  width: max-content;
  max-width: 110px;
  left: -20px;
  transform: translate(-50%, 0);
  text-align: center;
  font-family: "Plex Condensed",Helvetica,Arial,Tahoma,sans-serif;
  line-height: 1.2;
  text-shadow: 0 0 1px #000,0 0 5px rgba(0,0,0,.2),0 0 5px #000;
  color: #fff;
  /*text-rendering: optimizeSpeed;*/
  letter-spacing: 1px;
}







/*
.text-below-marker5 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}
.text-below-marker6 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}
.text-below-marker7 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}
.text-below-marker8 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}
.text-below-marker9 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}
.text-below-marker10 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: -1px 0 1px rgba(0,0,0,0.8),1px 0 1px rgba(0,0,0,0.8),0 1px 1px rgba(0,0,0,0.8),0 -1px 1px rgba(0,0,0,0.8);
}*/
.text-below-marker11 {
  font-family: 'Quicksand', sans-serif;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: 3px 4px 5px black;
}
.text-below-marker1 {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: white;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 999999999999999;
  text-shadow: 3px 4px 5px black;
}
.landerlabel {
  font-size: 10px;
    font-weight: bold;
  letter-spacing: 1px;
  color: #BBFFFF;
  min-width: 100px;
  left: -50px;
  text-align: center;
  min-height: 1.2em;
  top: -1em;
  z-index: 99999999;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
  font-family: 'Quicksand', sans-serif;
}


.leaflet-marker-pane {
  z-index: 2060;
}


.sigmetTS, .sigmetICE, .sigmetIFR, .sigmetMTNO, .sigmetMTN, .sigmetTC, .sigmetTURB, .sigmetVA, .sigmetSS, .sigmetDS {  margin: 10px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  color: white; padding:5px 8px; border-radius: 5px; width: 110px; display: inline-block; text-align: center; line-height: 14px;  }

.sigmetTS {  background-color: #ff8e44; }
.sigmetICE {  background-color: #4760ff; }
.sigmetIFR {  background-color: #1ed94f; }
.sigmetMTNO {  background-color: #f2f047; color: chocolate; }
.sigmetMTN {  background-color: #f2f047; color: chocolate; }
.sigmetTC {  background-color: #35126a; }
.sigmetTURB {  background-color: #f91362; }
.sigmetVA {  background-color: #0dccff; }
.sigmetSS {  background-color: #fd644f; }
.sigmetDS {  background-color: #f28e26; }


#layer-control-fuera {  z-index:9999; width: 50px; height: auto; overflow: visible; position: relative;}

#layer-control-fuera .leaflet-touch .leaflet-control-layers { background: none; }

#quellenangabe { font-size: 13px; line-height: 30px; /*background-color: rgba(7,188,207,0.2);*/ width: 100%;}

#legendrow { width: 100%; background-color: #F0F0F0; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
#legendrow2 { width: calc(100% - 20px);background-color: #F0F0F0; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); margin: 20px 0; padding: 5px 10px; }
#legendimg img { float: left; width: 300px; border-radius: 20px; margin: 0px 10px 10px 0px; border: 5px solid white; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
#legendtext { float: right; width: calc(100% - 320px); }
#legendrow2 a { text-decoration: underline; }

#datensource { text-align: center; border-top: 2px solid #F7F7F7; padding-top: 10px; }
#datensource a {text-decoration: underline;  }

#legendeRDT { margin: 5px 0;}
#textlegenderdt { margin: 0;}

.metarmitte3 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 20px auto 20px;
}
.textleft2 {
  max-width: 300px;
  width: 100%;
  height: auto;
  min-height: 200px;
  
  background-color: #F0F0F0;
  padding: 10px 10px;
  border-radius: 20px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.textleftimg img { width: 170px; border-radius: 50%; margin: 0px; border: 5px solid white; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }

.textl1 { color: rgba(10,78,112,1); font-weight: bold; font-size: 18px;  }
.textl2 { color: rgba(7,188,207,1); font-weight: bold; font-size: 18px;  }

#blitze { width: 100%; background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%); color: white; text-align: center; font-size: 15px;}

#blitzline { width: 100%; height: 2px; background-color: white; margin: 5px 0;}


#nubes, #radar, #lluvia, #rdt, #rayos, #temperaturen, #aviacion { font-size: 14px; color: white;  white-space: nowrap; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(10,78,112,1) 100%); border-radius: 20px;
margin-bottom: 5px; padding: 2px 5px; width: auto; max-width: 158px;  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); letter-spacing: 1px;  display: inline-block; float: left; cursor: pointer; box-shadow: 1px 1px 4px #000; }

#nubes svg, #lluvia svg, #radar svg, #rdt svg, #rayos svg, #temperaturen svg, #aviacion svg { vertical-align: sub; padding: 0 2px; width: 14px;  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.4); }

#nubes.checked { background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);  } 
#lluvia.checked { background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%); } 
#rdt.checked { background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);  } 
#rayos.checked { background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%); } 
#temperaturen.checked { background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);  } 
#aviacion.checked {background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);  } 
#radar.checked {background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);  } 


#regenpopup { line-height: 25px; border-top: 1px dotted rgba(255,255,255,0.6); }

#rdtgew {  border-top: 1px dotted rgba(255,255,255,0.6); }

table#rdtgew tr:nth-child(2n) td {
  background-color: rgba(7,188,207,0.2);
}

input.but
{
  color: white;
  background-color: rgba(0,0,0,0);
  border: none; float: left; padding: 5px 8px; font-size: 16px;
}

#sigpopup {  border-top: 1px dotted rgba(255,255,255,0.6); }

#rainview {text-align:center; position: absolute;bottom: 10px; left: 10px; border-radius: 5px; right: 0; width: 337px; height: 30px; line-height: 30px; z-index: 999999999; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); color: white; display: none;}


.ac-container{ width: 100px; text-align: right; overflow-y: visible; height: auto; }

div[id^="leaflet-control-accordion-layers"] > label { display: none; }

.ac-container div[id^="leaflet-control-accordion-layers"] > label:hover:after,
.ac-container input.menu:checked + div[id^="leaflet-control-accordion-layers"] > label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
}

.ac-container input.menu{ display: none; }
.ac-container article{ margin-top: -1px; overflow: hidden; height: 0px; padding: 0px; line-height: 0px; position: relative; z-index: 10; }

.ac-container input.menu:checked ~ article.ac-large{ height : auto; padding: 8px 0 0 0; overflow-y: auto; line-height: 18px; float: right; }

.ac-container article label { display: inline; cursor: pointer; }

.ac-container .group-toggle-container { text-align: right; margin-right: 3px; line-height: 0px; display: none; height: 20px; }

.menu-item-checkbox{ font-size: 12px; color: white; display: inline-table; white-space: nowrap; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(10,78,112,1) 100%); border-radius: 20px;
margin-bottom: 5px; padding: 2px 5px; width: auto; max-width: 124px;  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); letter-spacing: 1px; box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.8); }

.menu-item-checkbox svg { vertical-align: sub; padding: 0 2px; width: 14px;  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.4); }

.menu-item-checkbox.checked { background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); }

.leaflet-control-layers-expanded { padding: 5px; }

.leaflet-control-layers-selector { display: none;} 

    .temp { /*background-color: white; */width: auto; /*text-shadow: -1px -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ font-size: 12px; text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000; }

    .durak_label { /*background-color: white; */width: auto; /*text-shadow: -1px -1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/ font-size: 12px; text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000; }
    
    .leaflet-control-timecontrol .timecontrol-slider .timecontrol-speed { display: none; }

@media (max-width:1200px)  {
#headerbereich { width:96%;max-width:1200px; margin: 0 auto; position: relative;}

.contentinhalt3 { max-width:1200px; width:90%; margin: 20px auto 0; padding: 5px; }
.boxlefttable { float: left; width: calc(100% - 320px); line-height: 40px; }    
#nearbyairports {  width: 100%; float: left; max-width: 600px; }
    
.boxleftblue { float: none; width: 90%; line-height: 20px; margin: 0 auto; color: white; }    
.boxleftwhite { float: none; width: 90%; line-height: 20px; margin: 0 auto; }    
   
}


@media (max-width:1100px)  {
 #top10tables { width: 100%; margin: 10px auto; display: flex; justify-content: space-around; flex-wrap: wrap;}
table.top10 { width: 45%; flex:45%; max-width: 550px; color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 10px; font-size: 14px; text-align: center; }
   
}

@media (max-width:1000px)  {
h1#airport { color: white; font-weight: lighter; letter-spacing: 2px; font-size: 20px; padding: 5px; text-align: center; }

#localtime { float: none; width: 300px; margin: 0 auto;  }    
#clock { padding: 10px 0;  margin: 0 auto;  } 
#clocktime { letter-spacing: 5px; font-size: 20px; padding: 5px 0; }
#clockdate { letter-spacing: 1px; font-size: 12px; }
.text { letter-spacing: 2px; font-size: 11px; }
.beglrest { width: calc(100% - 12px); padding: 0px; height: auto; float: left; margin: 0 auto; }
    
#mapaunddaten { float: left; width: 98%; margin: 20px auto 0; display: flex; justify-content: space-around;  } 
#zeitzoneairport { width: 260px; margin: 10px auto; color: #0a4e70; text-align: center; font-size: 13px;}    
#sunrisesunset { font-size: 14px; background-color: rgba(7,188,207,1); color:white; border-radius: 20px; width: 240px; margin: 0 auto 10px; }
  
#mapmet { width: 100%; max-width: 880px;   }
    #side { float: none; width: 100%; margin: 0 auto; }
   
}    

@media (max-width:920px)  {    
video { width: 100%; height: auto; }
#rightbereich2 { z-index:1; position:relative; top:0px; right:0px; width: 100%; height: auto; }       
#leftbereich {  position:relative; top:0px; left:0px; background:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); width:100%; height: auto; padding:0px; z-index:2; line-height:2em; }
#headbereich { width:100%; margin:0 auto;position: relative; height: auto; } 
    
}



@media (max-width:840px)  {    
.boxlefttable { float: left; width: 100%; line-height: 40px; margin-bottom: 20px;}        
#nearbyairports {  width: 100%; float: none; max-width: 600px; margin: 0 auto; }
.boxrightairport { float: none; border: 1px solid #07bccf; border-radius: 20px; margin: 20px auto; width: 280px; padding: 10px; }  
#runwayairport { font-size: 14px; font-weight: normal; width: 280px; margin:20px auto;  float: none;   }    
.tiempoactual { width:96%; margin: 2%;}
table.icontable {width: 100%; max-width: 300px; float: none; margin: 10px;}
table.top10 { width: 100%; flex:100%; max-width: 850px; color: white; margin-top: 10px;border-collapse: separate; border-spacing: 0px 10px; font-size: 14px; text-align: center; }


}

@media (max-width:740px)  {
/*#headercontent { width: auto; float: right; margin: 5px 0 0; }*/
ul#menutop { list-style-type: none; margin: 0; padding: 0; font-size:14px; }
ul#menutop li { float: left; border-radius: 20px; margin: 2px 10px 0; padding: 2px 4px; }
#metarmitte { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap;}
.metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 50px auto 10px; flex-wrap: wrap; }
.textleft2 { max-width:200px; width: 100%; height: auto; min-height: 200px; text-align: center; background-color: #F0F0F0; padding:  10px 10px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); margin: 10px auto; }
    #mapmet2 { margin: -258px auto 10px; }
}


@media (max-width:700px) {
#logo { height: 16px; padding: 10px; float: left; background-size: 140px 29px;  width: 120px; }
#headercontent {  width: calc(100% - 140px); }
h2#airport { font-size:15px; color:#0a4e70;; line-height:20px; }
.labelblack { width: 100%; height: auto; background:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); float: left; border-radius: 20px; }    
.labelright {  width: 100%;  float: left; margin: 0;  } 
.metarmitte2 { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap;}  

#progress {width: 200px; height:200px; float: left; margin: 5px 20px 0;}
 
.boxleft { float: left; width: 100%; line-height: 40px; }    
.boxright { float: left; width: 100%;  }  
 /*input  { border-radius:10px; border:none; background-color:rgba(255,255,255,1); height: 30px; float: none; padding: 5px; margin: 10px auto; width: 96%; }  */
    input.but
{
  color: white;
  background-color: rgba(0,0,0,0);
  border: none; float: left; padding: 5px 8px; font-size: 16px;
}
    #mapmet { height: 50%; min-height: 400px; margin: -156px auto 10px; }
       
    #nubes, #lluvia, #rdt, #rayos, #temperaturen, #aviacion { font-size: 12px; } 
}    


@media (max-width:622px) {
#logo { top:-2px; left: 50%; margin-left: -70px; float: none; }
#headercontent { width: 100%; float: none; margin: 0px auto 0; }
header { height: 55px; }  
ul#menutop { display: flex; justify-content: space-around; }
img#windrose { margin: 40px auto 0; width: 100%; max-width: 400px;}
table#farbcodes2 { border-collapse: separate; border-spacing: 0px 5px; background-color: rgba(7,188,207,0); float: left; width: 98%; max-width: 650px; }    
#fotterleft { width: 100%;  }
#fotterright { width:100%;  }
#taftable { width:100%; overflow: scroll;}    
#flughafenwetter { background-color: rgba(11, 21, 31, 0); text-align: center; font-size: 24px; letter-spacing: 10px; padding: 20px 0; }
      #tafdivinhaltkeinedaten { background: rgba(10,78,112,0.8); margin: 20px auto; border-radius: 20px; padding: 50px 10px; font-size: 20px; text-align: center; color:white; width: 80%; display: none;}
    ul#nav { font-size:12px;  width: 120%; margin: 6px 0 0 -40px; }
    ul#nav li { font-size:13px;  }
    ul#nav li svg { width: 12px; height: 12px;}
    ul#nav li a,
ul#nav li span {
  padding: 0 5px 10px;
}
    
 #dropdown { top: -1px; right: 5px;}
  
  #mapmet2 { height: 50%; min-height: 400px; margin: -256px auto 10px; }  
}


@media (max-width:546px) {
#logo { left: 50%; margin-left: -70px; }
.metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto 10px; flex-wrap: wrap; }
.textleft2 { max-width:340px; width: 80%; height: auto; min-height: 200px; text-align: center; background-color: #F0F0F0; padding:  10px 10px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); margin: 10px auto; }
 #legendimg img { float: none; width: 98%; border-radius: 20px; margin: 0px auto 10px; border: 5px solid white; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
  
        
}

@media (max-width:500px) {
ul#menutop {margin: 0; padding: 0; font-size:12px; }
ul#menutop li { float: left;  margin: 2px 2px 0; padding: 2px; }    
h1#airport { font-size: 16px; }
.labelblack { width: 100%; height: auto; background:linear-gradient(180deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); float: left;  border-radius: 20px;}    
#progress {width: 200px; height:200px; float: left; margin: 20px 25% 0;}
.card { margin: 0 25%; width: 200px; height: 200px; padding: 2px; float: left;}
        
#metartemp, #metartaupunkt, #metarhoehenmesser, #metarhorizontal, #metarrh {font-size: 16px; letter-spacing: 0px; }    
   
table.metar tr td { font-size: 10px;}
 
#mapaunddaten { float: left; width: 100%; margin: 0px auto 0; display: block;  } 

    #legendeprec { width: 100%; margin: 0px; } 
    h2 { font-size: 16px; }
}

@media (max-width:400px) {
#progress {width: 200px; height:200px; float: left; margin: 20px 20% 0;}
.card { margin: 0 20%; width: 200px; height: 200px; padding: 2px; float: left;}
    
     
}


@media (max-width:300px) {
#progress {width: 200px; height:200px; float: left; margin: 20px 10% 0;}
.card { margin: 0 10%; width: 200px; height: 200px; padding: 2px; float: left;}
    
     
}

@media (max-height:700px) {


}