@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');   
}
@font-face {
    font-family:'SourceCodePro';
    font-style: normal;
    font-weight: 100;
    src: 
      local('SourceCodePro'),         
      local('SourceCodePro'),  
      url(https://meteo365.es/webcam/fonts/SourceCodePro-Light.woff2) format('woff2'), 
      url(https://meteo365.es/webcam/fonts/SourceCodePro-Light.woff) format('woff'), 
}

@font-face {
    font-family:'SourceCodePro';
    font-style: normal;
    font-weight:  800;
    src: 
      local('SourceCodePro Bold'),         
      local('SourceCodePro-Bold'),  
      url(https://meteo365.es/webcam/fonts/SourceCodePro-SemiBold.woff2) format('woff2'), 
      url(https://meteo365.es/webcam/fonts/SourceCodePro-SemiBold.woff) format('woff'), 
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}


@media (max-width: 768px) { }


.ol-mouse-position {display:none;}

.scale-line {
  position: absolute;
  bottom:2px;
  z-index:50000000;
}
.ol-scale-line {
  position: relative;
  bottom: 0px;
  left: 0px;
}

.ol-scale-line-inner { color: #ffffff;}

ol-control button { background-color: rgba(11, 21, 31, 0.9); }
.ol-attribution { visibility: hidden;} 
/*..ol-zoom .ol-unselectable .ol-control { visibility: hidden;}
.ol-control { visibility: hidden;}
.ol-zoom .ol-zoom-out  { visibility: hidden;}
.ol-zoom .ol-zoom-in  { visibility: hidden;}*/

#flightmap canvas { max-height: 445px;}




/* ######################################################################################### */ 
/* #####################################   FLIGHTMAP   ##################################### */ 
/* ######################################################################################### */ 

#flightmap { width: 100%; height: 100%; margin: 0; overflow: hidden; position: relative; }

#sidebar { width: 230px; position: absolute; height: 400px; top: 5px; right: 5px; overflow: hidden; z-index: 100; }



#squawkmelder {
	z-index:9999; 
	font-weight:100; 
	color:#7fdcf7;
	background-color: rgba(11, 21, 31, 0.9);
	padding:5px;
	border-radius:10px;
	text-align:center;
	font-size:12px;
	width:90%;
	margin: 5px auto;
	border: 1px solid rgba(127, 220, 247, 0.9);
	}



.future_ui__piece { text-align: center; padding: 20px; }

#corbo { width: 400px; margin: 50px auto 0px;}

hr.style-one {
    border: 0;
    height: 1px;
    background: #5ce2ed;
    background-image: linear-gradient(to right, rgba(0,5,6,  0.9), #5ce2ed, rgba(0,5,6,  0.9));
}


#selected_infoblock { background-color: rgba(3,48,74,0.9); color: #7fdcf7; padding: 10px 0; border-radius: 20px; }

table#table {/*font-family: Courier New, monospace;*/margin: auto; line-height:14px; font-size: 13px; margin-top: 1px; color:#FFFFFF;}
table td#airport-iata { color:#fff; font-weight:100; }
table td#salida {color:#7fdcf7;}
table#wetter td { color:#fff;  width:30%; }
table#table2 { font-size:13px;}
table#table2 td { font-weight:100; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 27, 41,0.4), rgba(0, 0, 0, 0)); text-align: center; }
table#table2 tr.klein { font-size: 10px; margin-top: 1px; color:#46c0c3; font-weight:100; border-top:1px solid #FFF;height:10px; }
table#table2  tr.klein td { line-height:10px; width:49%;background-image: none;}

table#table2 tr.style-two { margin-bottom:10px; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(159, 178, 214, 0.75), rgba(0, 0, 0, 0)); }

#selected_follow { font-size: 10px; background-color: #104a60; padding: 5px; border-radius: 10px;}
	
#selec { text-align: center; font-size: 10px;}

div#SpecialSquawkWarning { position: absolute; bottom: 100px; right: 430px; border: 2px solid red; color: black;
    background-color: #FFFFA3; opacity: 0; filter:alpha(opacity=75); padding: 5px;
    text-align: center; }


div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); }
#spinny { width: 128px; height: 128px; position: absolute; top: 50%; left: 50%; margin: -64px 0 0 -64px; }
#loader_progress { width: 250px; height: 20px; position: absolute; top: 50%; left: 50%; margin: 128px 0 0 -125px; }

#sort { color: aqua; text-align: center; padding: 10px 0; font-size: 10px;}
#fast {  cursor: pointer; font-size: 12px; }
#high { cursor: pointer; font-size: 12px; }


#tableinfo, #sudo_buttons { font-size: x-small; font-family: monospace;  }
#planes_table {height: 200px; width: 100%; max-width: 300px; overflow: hidden;}
table#tableinfo { width: 100%; max-width: 300px; border-collapse: collapse; overflow-x: scroll;}
table#tableinfo thead tr { background-color: #0e1e2e; color: white; font-size: 13px;}
table#tableinfo tr { border-radius: 10px; }
table#tableinfo tr td { width: 25%; text-align: center;  padding: 10px 0;}
table#tableinfo tr.hidden  {display: none;}

table#tableinfo tr#plane_row_template.plane_table_row:nth-child(odd) {background-color: #46c0c3; color: white;}
table#tableinfo tr:nth-child(even) {background-color: none; color: #46c0c3;}

.vPosition  { font-weight: bold; /*background-color: #d5ffd5;*/ }
.mlat       { font-weight: bold; /*background-color: #d5d5ff;*/ }
.squawk7500 { font-weight: bold; /*background-color: #ff5555;*/ }
.squawk7600 { font-weight: bold; /*background-color: #00ffff;*/ }
.squawk7700 { font-weight: bold; /*background-color: #ffff00;*/ }
.selected   { background-color: #dddddd; }
.plane_table_row { cursor: pointer; }
.hidden { display: none; }

.infoblock_heading    { font-size: larger; }
.infoblock_heading a  { text-decoration: none; color: blue; font-size: x-small;}
.infoblock_body       { font-size: small; }

#selected_icao { font-size: x-small; }
#selected_registration { font-size: x-small; }
#selected_icaotype { font-size: x-small; }

.dim    { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }

.pointer { cursor: pointer; }

.hourline {
  width: 100%;
  height: 5px;
  background: rgb(10,78,112);
  background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,0.4) 100%);
}

.hourline2 {
  width: 100%;
  height: 2px;
  background: rgb(10,78,112);
  background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);
}

#flightinfo {  position: absolute; bottom: 1px; left: 0px; width: 100%; height: 200px;background-color: rgba(3,48,74,0.8) /*rgba(14,30,46,0.8)*/; z-index: 999999999; color: #7fdcf7; overflow: hidden; }
#flightinfo a {  color: #a5e6f9; text-decoration: underline; }



/* ######################################################################################### */ 
/* #####################################   M E T A R   ##################################### */ 
/* ######################################################################################### */ 
.sid img { float: left;} 
#card2 { margin: 0; width: 100px; height: 200px; border-right: 1px solid white;  float: left;  }
#card3 { margin: 0 0 10px 0;; width: 296px; height: auto; padding: 2px 2px 10px 2px; float: left;  line-height: 22px;  border-radius: 10px; background-color: #02263b; color: white;}
#card3 a {color: white; text-decoration: none; }
#card4 { margin: 0; width: 300px; height: auto; padding: 2px 0; float: left; text-align: left;  }

#card5 { margin: 5px 0 0 0; width: 296px;  border-left: 2px solid #02263b; border-right: 2px solid #02263b; float: left; }
@media (max-width:1150px)  { #card5 { height: 174px; overflow: scroll; margin: 5px; } #card3 { margin: 0px 0 5px 5px; height: 167px; } #card4 { width: calc(100% - 925px); height: 170px; }  }
@media (max-width:1080px)  { #card5 { height: 174px; overflow: scroll; margin: 5px 10px; width: calc(100% - 540px);  } #card3 { margin: 0 10% 10px; height: auto; width: 80%; } #card4 {  width: 200px; height: 174px; margin: 5px auto; } #weiteredaten table { margin: 0 auto;} }
@media (max-width:870px)  {  #card3 { margin: 15px 0 0 30px; height: auto; width: calc(100% - 240px); } #card4 { float: right;  margin: 15px 0 0 0; }  #card5 { margin: 0 0 0 30px; width: calc(100% - 340px);  }   }

@media (max-width:680px)  {  #card3, #card4, #card5 { width: 80%; margin: 10px auto; float: none; } #card4 {height: auto;} .sid { width: 100%; display: flex; 
    justify-content: center; 
    align-items: center;} .sid img { margin: 10px auto; float: none; width: 300px;}   }


/* card5 Abflüge ankünfte /// card4 LAYER /// card3 METAR */

    #metarflightcat {width:65px; /*margin-top: 10px; height: 38px;*/ }

.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; font-size: 15px; }
    
.VFR {  background-color: #3fd99b; }
.MVFR { background-color: #44aef8;  }
.IFR {  background-color: #f85d7f;  }
.LIFR { background-color: #a175fe;  }

#winddirection table { width: 100%;}
#winddirection table tr td  { font-size: 16px; width: 25%;}
#winddirection table tr td.wert  { font-size: 16px; font-weight: bold;}
#winddirection table tr td small { font-size: 12px;}
#winddirection table tr td { text-align: center; }

#winddirection2 table tr td  { font-size: 16px;}
#winddirection2 table tr td.wert  { font-size: 16px; font-weight: bold;}
#winddirection2 table tr td small { font-size: 12px;}
#winddirection2 table tr td { text-align: center; }

#weiteredaten table { border-collapse: collapse; }
#weiteredaten table tr td { text-align: center; font-size: 13px; }
#weiteredaten table tr.metar td { border-bottom: 1px solid rgba(255,255,255,0.1); }


#trigger svg { color: beige;}
#wetterstation { font-size: 12px;}
#wetterstation img {width: 18px; vertical-align: middle;}
#wetterstation svg {width: 13px; height: 13px;   vertical-align: sub; color: white;}

/* ######################################################################################### */ 
/* #####################################  T A B L E    ##################################### */ 
/* ######################################################################################### */ 

#ankunft { color: #f54775; float: left; }
#abflug {  color: #28f915; float: left; }
#ankunft img, #abflug img { vertical-align: middle;}
#results_flights { font-size: 13px; }

#ankunft, #abflug { font-size: 12px; letter-spacing: 1px;
  height: 40px;
  width: 148px;
   background: black;
   background: linear-gradient(225deg, transparent 30px, #02263b 0);
    line-height: 38px;
}
#abflug:hover, #ankunft:hover { font-weight: bolder;}

table#result, table#result2 { border-collapse: collapse;  margin: 25px 0 5px; width: 100%; overflow: scroll; }
table#result tbody tr, table#result2 tbody tr { /*border-bottom: 1px solid #dddddd;*/ }
table#result tbody tr:nth-of-type(even), table#result2 tbody tr:nth-of-type(even) { background-color: #02263b; }
table#result tbody tr:last-of-type, table#result2 tbody tr:last-of-type { border-bottom: 2px solid #02263b; }
table#result tr td, table#result2 tr td { padding: 10px 0; }

table#result2 { color: #f54775;  }
table#result {  color: #28f915;  }





/* ######################################################################################### */ 
/* #####################################  P O P  U P   ##################################### */ 
/* ######################################################################################### */ 


.ol-popup {
    position: absolute;
    min-width: 180px;
    background-color: rgba(14,30,46,0.8);
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
    bottom: 250px;
    left: 10px;
    z-index: 999999;
    height: 50px;
    display: none;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: "✖";
}

div#pop, div#pop2 {
  display: none;
  position: absolute;
  width: 280px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
    z-index: 9999999999999;
   
}




.changesize1, .changesize2, .changesize3 {font-size: 20px; z-index: 999999999; background-color: rgba(255,255,255,0.5); width: 30px; height: 30px; position: absolute; border-radius: 50%; top: 20px; right: 5px;}
.changesize2 {top: 55px;}
.changesize3 {top: 90px;}

.changesize1 svg, .changesize2 svg, .changesize3 svg {width: 20px; height: 20px; padding: 5px; color: #00304a;}

.changesize4 {font-size: 14px; z-index: 999999999; width: 16px; height: 16px; position: absolute; border-radius: 50%; top: 5px; right: 5px;}
.changesize4 svg {width: 16px; height: 16px; padding: 5px 5px 0 0; color: #ffffff;}

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
        margin-left: 10px;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}




#airportinfo { width: 100%; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); color: white;}

#airportinfocontent { width: 90%; max-width: 600px;  padding: 10px 0; margin: 0px auto;  text-align: center; line-height: 22px; }

p.strong { font-weight: bold;}


img.roundimg { border-radius: 50%; border: 2px solid white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.left {float: left;}
.right {float: right;}


img.roundimg { float: left; margin: 10px; }
 


#close {margin: 2px;}



#leftbar { float: left; width: 100px; display: none;}
@media (max-width: 1100px) { #leftbar { display: block; } }

ul#man { width: 100%; margin-left: -10px; }
ul#man {  list-style: none; }
ul#man li {  font-size: 13px; font-weight: normal; }
ul#man li.current { font-weight: bold; }
#leftbar ul {
	margin-top:10px;

}
#leftbar ul li {
	
	padding-left:2px;
	margin:15px 0 0 -20px;
	padding-bottom:1px;
}

.layer { margin-left: 10px; font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2);}


#adswerbung { position: absolute; bottom: 5px; right: 5px; width: 300px; max-height: 100px; z-index: 999999999999; }
@media (max-width: 1355px) { #adswerbung { bottom: 205px;  } }
@media (max-width: 1100px) { #adswerbung { bottom: 5px;   } }
@media (max-width: 710px) { #adswerbung { display: none;   } }