/*Animation*/
  @keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.3;
    }
  }
  @-moz-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.3;
    }
  }
   /*Icons*/
   @font-face {
   font-family: 'weatherfont';
   src: url('/opencms/bin/fonts/font3933.eot');
   src: url('/opencms/bin/fonts/font3933.eot?') format('embedded-opentype'),
        url('/opencms/bin/fonts/font3933.woff') format('woff'),
        url('/opencms/bin/fonts/font3933.ttf') format('truetype'),
        url('/opencms/bin/fonts/font3933.svg') format('svg');
   font-weight: normal;
   font-style: normal;
   }
   .app {position: relative; width: 595px; height: 500px;/* border: 1px solid #ccc;background-color: #F1FAFEB3;*/  margin: 0px 0px 0px 5px; }
   .app .titleheader { font-size: 14px;  font-family: 'Open Sans Condensed'; height: 50px;}
   .app #legend { padding: 2px 5px; float: right; font-weight: bold; color: #069; text-decoration: none; margin-top: -16px;font-family: 'Open Sans Condensed';background-color: #f2f2f2;border: 1px solid #8cacc8;border-radius: 3px;margin: -22px 3px 2px;}
   .app #legend.legTop {margin-top: -22px;}
   .app #legend:hover { color: #333;}
   .app .markerinfo { display: none; position: absolute; background-color: #efefef; color: #505050; border: solid 1px #dddddd; border-radius: 4px; padding: 2px; z-index: 1001; min-width: 120px;}
   .app #minfo { margin: 2px; background-color: #fff; white-space: nowrap; border: solid 1px #c2c2c2;}
   .app .markerinfo span { padding: 2px; line-height: 16px; display: block; }
   .app .markerinfo .title { font-weight: bold; font-size: 1.1em; background-color: #069; color: #fff; padding: 2px 5px; text-align: center; }
   .app .markerinfo i { font-size: 14px; vertical-align: middle; }
   .app .markerinfo img { width: 16px; vertical-align: middle; }
   .app #wrap { position: absolute; top: 25px; left: 0px; width: 595px; height: 25px; margin: 0; z-index: 1;  }
   .app .weatherfont { font-family: "weatherfont"; font-style: normal; }
   .app .wbtns { position: absolute; top: 60px; left: 310px; z-index: 1000; }
   .app .wbtns button { display: block; cursor: pointer; border: none; background-color: transparent; color: #555; margin-bottom: 13px; }
   .app .wbtns i { border: solid 1px #c2c2c2; border-radius: 4px; background-color: #fff; padding: 3px; text-align: center; font-size: 18px; clear: both; }
   .app .wbtns i.active { background-color: #069; color: #fff; border-radius: 4px; border: solid 1px #069; }
   .app .wbtns button .tooltip { display: none; font-size: 11px; }
   .app .wbtns button:hover .tooltip { display: inline-block; background-color: #fff; opacity: 0.8;  padding: 3px; margin-top: -23px;}  
   .app .obs_time { position: absolute; text-align: right; bottom: 1px; right: 5px; padding: 0px; margin: 0px; line-height: 12px; font-size: 10px; color: #666; font-weight: bold; z-index: 1000; }
   .app .avisos { position: absolute; top: 283px; width: 300px; height: 216px; border: none; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd;background-color: #fff; }
   .app .avisos h3 { padding: 2px 8px 0px 8px; height: 23px; border-bottom: 1px solid #ddd; font-size: 14px; border-left: 1px solid #aaa;border-right: 1px solid #aaa;}
   #warningicon0, #warningicon1, #warningicon2 { animation: 5s ease 0s normal none infinite running flash; font-size: 15px; text-shadow: 1px 1px 2px #333; float:right; margin-top:2px;}
   .app #map_co { position: absolute; top:49px; right:0; width:294px; height:450px; background-color: #EDF6FA; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa;}
   .app #map_ac { position: absolute; top: 49px; /*! left: -1px; */ width: 299px; height: 127px; border: solid 1px #ddd; border-top: 1px solid #aaa; background-color: #EDF6FA; font-size: 10px; color: #666; text-align: right; border-left: 1px solid #aaa;}
   .app #map_md { position: absolute; top: 177px; /*! left: -1px; */ width: 299px; height: 107px; border: solid 1px #ddd; background-color: #EDF6FA; font-size: 10px; color: #666; text-align: left;  border-left: 1px solid #aaa;}
   .app #map_av_co { position: absolute; top: 28px; right: 0px; width: 125px; height: 189px; background-color: #EDF6FA; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa;}
   .app #map_av_ac { position: absolute; top: 28px; left: 0px; width: 180px; height: 104px; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; background-color: #EDF6FA; font-size: 10px; color: #666; text-align: right; border-left: 1px solid #aaa;}
   .app #map_av_md { position: absolute; top: 133px; left: 0px; width: 180px; height: 84px; background-color: #EDF6FA; border-right: solid 1px #ddd; border-bottom: 1px solid #aaa; font-size: 10px; color: #666; text-align: left; border-left: 1px solid #aaa;}
   .app .hide { display: none; }
   .app #nodata { position: absolute; left: 35%; top: 45%; font-size: 14px; color: #666; font-weight: bold; padding: 10px; background: white; background: rgba(255,255,255,0.9); box-shadow: 0 0 15px rgba(0,0,0,0.5); border-radius: 5px; }
   .app .lbl { padding: 0; margin: 0; line-height: 10px; /*opacity: .99;*/ }
   .app .lbl div { min-width: 16px; padding:3px 1px 1px 1px; border-style: solid; font-size:11px; min-height: 12px;}
   .app .lb2 { opacity:50%; padding: 0px; margin: 0; line-height: 9px; opacity: .99; }
   .app .tMax { color:#ffffff; background: #f87607 !important; border-color: #f87607; border-width: 1px 1px 0px 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; font-weight: bold; }
   .app .tMin { color:#ffffff; background: #0080b0 !important; border-color: #0080b0; border-width: 0px 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-weight: bold;}
   .app .tSea { color:#666666; background: #ffffff !important; border-color: #dddddd; border-width: 1px 1px 1px 1px; border-radius: 4px;  text-align: center; font-weight: bold; border-style: solid; }
   .app #status { position: absolute; top: 45%; left: 35%; background-color: #cccccc; color: #ffffff; padding: 8px; border: solid 1px #cccccc;  border-radius: 4px; font-size: 18px; }
   .app #legenddiv { position: absolute; top: 25px; left: 0; width: 595px; height: 476px; text-align: left; background-color: #fff; z-index: 1002; }
   .app #legenddiv img { margin-right: 8px; width: 35px; vertical-align: middle;}
   .app #legenddiv .desc { width: 180px; margin: 10px 2px 2px; vertical-align: top; }
   .app #legenddiv .desc i { font-size: 22px; margin-right: 5px; vertical-align: middle; }
   .app #legenddiv .desc img { margin-top: -7px; }
   .app #legenddiv .descSea { width: 125px; margin: 5px; vertical-align: top; }
   .app #legenddiv .descSea i { font-size: 22px; margin-right: 5px; vertical-align: middle; }
   .app #legenddiv .descSea img { margin-top: -7px; }
   .app #legenddiv .wide { width: 145px; margin: 5px; vertical-align: top; }
   .app #legenddiv .panel div { display: inline-block; }
   .app #legenddiv .wdesc { display: block !important; margin-left: 5px; padding-top: 8px; padding-left: 8px; border: none; border-left-style: solid; border-left-width: 15px; line-height: 12px; height: 25px; }
   .app #legenddiv .wgrey { border-left-color: grey; }
   .app #legenddiv .wsgreen { border-left-color: blue; }
   .app #legenddiv .wgreen { border-left-color: #29d660; }
   .app #legenddiv .wyellow { border-left-color: yellow; }
   .app #legenddiv .worange { border-left-color: #ffcb31; }
   .app #legenddiv .wred { border-left-color: red; }
   .app .bkgreen  { background-color: #29d660; height: 1.7em; margin-top:1px;}
   .app .bkyellow { background-color: yellow ; height: 1.7em; margin-top:1px;}
   .app .bkorange { background-color: #ffcb31; height: 1.7em; margin-top:1px;}
   .app .bkred    { background-color: #fe0104; color: #efefef; padding: 0px 2px; height: 1.6em; margin-top:1px;}
   .app button.accordion { cursor: pointer; padding: 2px 4px; width: 100%; text-align: left; border: none; outline: none;
       font-size: 12px; font-weight: bold; background-color: #efefef; color: #6a6a6a; border-top: 1px solid #ddd;
       border-bottom: 1px solid #ddd; }
   .app button.accordion.active, button.accordion:hover { background-color: #ddd; color: #323232; border-block-color: #aaa;}
   .app button.accordion.active:after { float: right !important; content:none;}
   .app button.accordion:after { float: right !important; content:'\002B';}
   .app div.panel { padding: 5px; background-color: white; display: none; }
   .app div.panel.show { display: block !important; }
   .app div.panel.hide { display: none; }
   .app div.panel hr { margin: 5px; border:none; border-top: solid 2px #ddd; }
   #d0, #d1, #d2 { font-size: 10px; color: #666; }
    /* Begin Navigation Bar Styling */
   .app .nav-sis { list-style: none; background-color: #efefef; border: none; }
   .app .nav-sis li { float: left; margin-bottom: 2px;}
   .app .nav-sis li a { display: block; padding: 2px 5px; text-decoration: none; font-weight: bold; color: #069; font-size: 12px; border: 1px solid #ccc;border-bottom-color: #aaa;background-color: #f2f2f2;}
   .app .nav-sis li a:hover { color: #333; }
    /* End navigation bar styling. */
   .app ul.nav-sis { margin: 0px; }
   .app .nav-sis span { margin: 3px; margin-right: 5px; }
   .app .nav-sis span img { vertical-align: middle; }
   .app .nav-sis span a { padding: 0px; }
   .app .nav-sis .active { background-image: linear-gradient(#E1EEF5,#F1FAFEB3) !important; border: 1px solid #aaa; color: #333;border-bottom:2px solid #EDF6FA !important;}
   .app .d45 { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
   .app .d90 { -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); }
   .app .d135 { -moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); }
   .app .d180 { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
   .app .d225 { -moz-transform:rotate(225deg); -webkit-transform:rotate(225deg); -ms-transform:rotate(225deg); -o-transform:rotate(225deg); transform:rotate(225deg); }
   .app .d270 { -moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); -o-transform:rotate(270deg); transform:rotate(270deg); }
   .app .d315 { -moz-transform:rotate(315deg); -webkit-transform:rotate(315deg); -ms-transform:rotate(315deg); -o-transform:rotate(315deg); transform:rotate(315deg); }
   .app .wico { width: 30px; height: 30px; }
   .app .sico { width: 24px; height: 24px; }
   .app .wwico { width: 40px; height: 40px; }
   @media screen and (-webkit-min-device-pixel-ratio:0) {
       .app .wbtns i { padding-bottom: 5px; }
   }