/*
Copyright 2017 Dias.
webmaster@ocontrolador.com.br
*/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;        
    color: black;
    overflow-y: hidden;
    overflow-x: hidden;
}
/*textarea {
  resize: both;
  overflow: auto;
}*/
.map {
    height: 100%;
    width: 100%; 
}
#map{    
    position: absolute; 
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
/*    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.9;*/
}
#imagemSalva{    
    width: 0px;
    height: 0px;
    overflow:hidden;
}
#menuTab {
/*    visibility: hidden;
    width: 0px;
   height: 0px;*/
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 5;
/*    float: top;
    z-index: 1;*/
}  
.layout{ 
    width: 100%;
    height: 100%;
    line-height: 10px;
    background-color: silver;		
    margin: 0 auto;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color:black;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}
    
fieldset {
    display: block;
    margin: 2px;
    padding: 2px;
    border: 2px groove;
        }
.limpo {
        display: block;
        margin: 0px;
        padding: 0px;
        border: 0px groove
        } 
.esquerda { float: left }

.baixo { float: botton }

.esquerdaD { 
        float: left;
        text-align: center;
        display: block;
        margin: 1px;
        padding: 1px;
        cursor:pointer
/*        border: 2px outset*/
}
.marcado {
        border: 2px inset;
        background-color: #D3D3D3;
}
.esquerdaI { 
        float: left;
        text-align: center;
        display: block;
        margin: 1px;
        padding: 0px;
/*        border: 2px outset;*/
        width: 42px;
        height: 32px;
        cursor:pointer
}

input[type=text]{
                text-align: center;
                border-radius:4px;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                box-shadow: 1px 1px 2px #333333;    
                -moz-box-shadow: 1px 1px 2px #333333;
                -webkit-box-shadow: 1px 1px 2px #333333;
                background: #cccccc; 
                border:1px solid #000000;				
                width:80px
                }
input[type=text]:hover, textarea:hover{ 
                 background: #ffffff; border:1px solid #990000;
                }
input[type=textarea]{
                text-align: center;
                border-radius:4px;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                box-shadow: 1px 1px 2px #333333;    
                -moz-box-shadow: 1px 1px 2px #333333;
                -webkit-box-shadow: 1px 1px 2px #333333;
                background: #cccccc; 
                border:1px solid #000000;				
                }
input[type=text].tamCampo {
    margin: 2px;
    width:180px;
}
input[type=text].tamMetar {
    margin: 2px;
    width:160px;
} 

input[type=number]{
                text-align: center;
                border-radius:4px;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                box-shadow: 1px 1px 2px #333333;    
                -moz-box-shadow: 1px 1px 2px #333333;
                -webkit-box-shadow: 1px 1px 2px #333333;
                background: #cccccc; 
                border:1px solid #000000;				
                width:45px
                }                

input[type=number]:hover, textarea:hover{ 
                 background: #ffffff; border:1px solid #990000;
                }
                
input[type=checkbox]{                
                display: inline-block;
                margin: 1px;
                padding: 2px;
                border-radius: 3px;
                cursor:pointer
                }
input[type=button]{
                  display: inline-block;
                  padding: 3px;
                  cursor: pointer;
                  text-align: center;
                  text-decoration: none;
                  outline: none;
                  color: #fff;
                  background-color: LimeGreen;
                  border: none;
                  border-radius: 5px;
                  box-shadow: 0 2px #999;
                }                
input[type=submit]{
                  display: inline-block;
                  padding: 3px;
                  cursor: pointer;
                  text-align: center;
                  text-decoration: none;
                  outline: none;
                  color: #fff;
                  background-color: blue;
                  border: none;
                  border-radius: 5px;
                  box-shadow: 0 2px #999;
                }
input[type=reset] {                  
                  display: inline-block;
                  padding: 3px;
                  cursor: pointer;
                  text-align: center;
                  text-decoration: none;
                  outline: none;
                  color: #fff;
                  background-color: red;
                  border: none;
                  border-radius: 5px;
                  box-shadow: 0 2px #999;
                }
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {background-color: yellow;color: #000;}
/*input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus {background-color: blue}*/
input[type=button]:active , input[type=submit]:active, input[type=reset]:active {
          background-color: #3e8e41;
          box-shadow: 0 2px #666;
          transform: translateY(4px);
        }
input[type=image]:hover{transform: translateY(2px);}
       
.labels {
  color: white;
  background-color: red;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 20px;
  text-align: center;
  width: 30px;
  white-space: nowrap;
}

/*janela configura*/
#janelaC {    
    position: absolute;
    top:60px;
    left:340px;
    margin: 5px;
    padding: 5px;
    width: 210px; /* sil */
    height: 400px; /* sil */
    display: block;    
    border: 5px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
 }
/* janela desenha*/
 #janelaD {    
    position: absolute;
    top:150px;
    left:10px;
    margin: 3px;
    padding: 2px;
    width: 300px; /* sil */
    height: 220px; /* sil */
    display: block;    
    border: 5px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
 } 
 /* Menu Reduzido*/
 .janelaM {    
    position: absolute;
    top:20px;
    right:10px;
    margin: 2px;
    padding: 2px;
    width: 250px; 
    height: 45px;
    visibility: visible;
    opacity: 0.6;
    cursor: pointer;
    z-index: 1;
 }
.janelaM:hover{
    opacity: 1; 
}
/*janela Procedimentos*/
#jProcedimento {    
    position: absolute;
    top:15px;
    left:680px;
    margin: 5px;
    padding: 5px;
    width: 130px; /* sil */
    height: 120px; /* sil */
    display: block;    
    border: 3px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
}
/*janela Radares*/
#jRadar {    
    position: absolute;
    top:15px;
    right: 5px;
    margin: 5px;
    padding: 5px;
    width: 320px; /* sil */
    height: 300px; /* sil */
    display: block;    
    border: 3px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
}
/*imagem Norte*/
#ImgNorte {
    position: absolute;
    bottom:0px;
    right:0px;
    opacity: 0.5;
    z-index: -1;
    -ms-transform: rotate(-23deg); /* IE 9 */
    -webkit-transform: rotate(-23deg); /* Chrome, Safari, Opera */
    transform: rotate(-23deg);
}
#divNorte {
    position: absolute;
    bottom:0px;
    right:0px;    
    opacity: 1;
    z-index: 2;
    width: 77px;
    height: 77px;
    line-height: 77px;
    text-align: center;
/*    border: 2px dashed #f69c55;*/
}
/*janela Coordenadas*/
#jCoord {    
    position: absolute;
    top:10px;
    left:500px;
    margin: 3px;
    padding: 2px;
    width: 450px; /* sil */
    height: 180px; /* sil */
    display: block;    
    border: 2px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
}
@-moz-document url-prefix() { 
  #jCoord {    
    position: absolute;
    top:5px;
    left:500px;
    margin: 3px;
    padding: 2px;
    width: 510px; /* sil */
    height: 220px; /* sil */
    display: block;    
    border: 2px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
    }  
}
/*janela Mapas*/
#jMapa {    
    position: absolute;
    top:15px;
    left:680px;
    margin: 3px;
    padding: 2px;
    width: 140px; /* sil */
    height: 130px; /* sil */
    display: block;    
    border: 2px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
}
/*janela Setores*/
#jSetor {    
    position: absolute;
    top:15px;
    left:680px;
    margin: 3px;
    padding: 2px;
    width: 140px; /* sil */
    height: 135px; /* sil */
    display: block;    
    border: 2px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
}
/*janela Senha*/
#jSenha {    
    position: absolute;
    top:15px;
    left:680px;
    margin: 15px;
    padding: 5px;
    width: 380px; /* sil */
    height: 140px; /* sil */
    display: block;    
    border: 3px groove;
    background-color: lightblue;
    visibility: hidden;
    z-index: 99;
}
 /*janela Distancia*/
#jDistancia {    
    position: absolute;
    top:0px;
    left:370px;
    margin: 5px;
    padding: 5px;
    width: 200px; /* sil */
    height: 190px; /* sil */
    display: block;    
    border: 5px groove;
    background-color: skyblue;
    visibility: hidden;
    z-index: 1;
 }
 #telacheia {    
    position: absolute;
    top:160px;
    right:40px;
    margin: 2px;
    padding: 2px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.2;    
 }
 #telacheia:hover{
    opacity: 1; 
 }
 
.linha {        
    height: 35px;
    vertical-align: center;
    border: 1px solid black;
}
.grade {
    border: 2px groove black;
    background-color: lightgrey;
    text-align: center
}
.lendo{
     background: url(../imagem/sistema/lendo.gif) right no-repeat;
     background-size: 16px 16px
}
.imgpdf{
     background: url(../imagem/sistema/pdf.png) right no-repeat;
     background-size: 20px 32px
}
.imgjpg{
    background: url(../imagem/sistema/jpg.png) right no-repeat;
    background-size: 20px 32px
}
.imgdesenha{
    background: url(../imagem/edita/edita2.png) center no-repeat;
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
}
.imgM{
    background-image: url(../imagem/edita/imgC.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgL{
    background: url(../imagem/edita/imgL.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgL:hover{background-color: #D3D3D3;}

.imgC{
    background: url(../imagem/edita/imgC.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgC:hover{background-color: #D3D3D3;}

.imgP{    
    background: url(../imagem/edita/imgP.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgP:hover{background-color: #D3D3D3;}

.imgT{
    background: url(../imagem/edita/imgT.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgT:hover{background-color: #D3D3D3;}

.imgD{
    background: url(../imagem/edita/imgD.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;    
}
.imgD:hover{background-color: #D3D3D3;}

.imgS{
    background: url(../imagem/edita/imgS.png) center no-repeat;
    background-size: 26px 26px;
    width: 26px;
    height: 26px;
}
.imgS:hover{background-color: #D3D3D3;}

.imgI{
    position: relative;
    top:0px;
    left:0px;
    float: left;     
}

.imgA{    
    background-image: url(../imagem/tempo/tempop2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: blue;
}
/*.imgA:hover{     
    background-size: 40px 40px;
    width: 40px;
    height: 40px;    
}*/

.imgAtualiza{
    background: url(../imagem/sistema/atualiza.png) center no-repeat;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}
.texto{
    text-align: center;
    height: 12px;
    border: 2px groove;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    background-color: lightgrey
}
 .disabled {
        pointer-events: none;
        opacity: 0.4;
    }
.disabledM {
        pointer-events: none;
        opacity: 1;
    }
 hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}       
input[type=range] {
  margin: 2px 2px;
  width: 100%;
}
.fundo {
        background-color: silver;
        display: block;
        margin: 2px;
        padding: 2px;
        border: 2px groove;
        background-position: right;
        background-repeat: no-repeat;
        background-size: 48px 48px;
        font-family: "Lucida Grande", "Arial", sans-serif;
        font-size: 16px;
        color: white;
        }
.cor01 {
        background-image: url(../imagem/tempo/tempop0.png);        
        background-color: gray;                  
        }
.cor11 {
        background-image: url(../imagem/tempo/tempop1.png);
        background-color: blue;         
        }
.cor21 {
        background-image: url(../imagem/tempo/tempop2.png);
        background-color: green;        
        }
.cor31 {
        background-image: url(../imagem/tempo/tempop3.png);
        background-color:yellow;
        color: black;  
        }
.cor02 {
        background-image: url(../imagem/tempo/tempop4.png);        
        background-color: gray;                  
        }
.cor12 {
        background-image: url(../imagem/tempo/tempop5.png);
        background-color: blue;         
        }
.cor22 {
        background-image: url(../imagem/tempo/tempop6.png);
        background-color: green;        
        }
.cor32 {
        background-image: url(../imagem/tempo/tempop7.png);
        background-color:yellow;
        color: black;  
        }
select{
   width: 50px;
   height: 18px;
   font-size: 10px;
   background: #f2f2f3;   
}
select.mapa{
   width: 120px;
   height: 30px;
   font-size: 18px;
   background: #f2f2f3;   
}
select.mapa2{
   width: 110px;
   height: 20px;
   font-size: 16px;
   background: #ccc;
   border: 0px groove;   
}
select.mapa3{
   width: 250px;
   height: 300px;
   font-size: 16px;
   background: #ccc;
   border: 0px groove;   
}
select.metar{
   width: 40px;
   height: 18px;
   font-size: 12px;   
}
.selpequeno{
   width: 35px;
   height: 18px;
   font-size: 16px;
   background: silver;
   border: 0px groove;
   cursor:pointer;
}

.txtCentro{
    text-align: center;    
    margin: 2px;
    padding: 2px;    
}
.txtDireita{
    text-align: right;    
    margin: 2px;
    padding: 2px;    
}
.txtEsquerda{
    text-align: left;    
    margin: 2px;
    padding: 2px;    
}

table.limpo {
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.limpo{    
    margin: 2px;
    padding: 0px;           
    border: 0px;
}

table.info {
    border: 2px groove;
/*    height: 100px;*/
    width: 100%;
}

td.info, th.info, td.info{
        border: 1px solid black;
        text-align: left;
        font-size: 12px;
        vertical-align: text-top;
}
#JCartas {
    visibility: hidden;
}

#Jnotam {
    visibility: hidden;
    width: 0px;
   height: 0px;
   float: top;
} 

table.metar {
/*    border: 1px groove;*/
/*    height: 100px;*/
    width: 500px;
    font-size: 12px;
    font-family: "Lucida Grande", "Arial", sans-serif;
}

td.c0 {
        background-color: gray;                  
        }
td.c1 {
        background-color: blue;         
        }
td.c2 {
        background-color: green;        
        }
td.c3 {
        background-color:yellow;
        }

tr.esconde {
    display:none;
}
tr.menu {
    width: 100%; 
    height: 50px;
}
        
.fechar{
    float:right;
    cursor: pointer    
}
.fechar:hover {
        font-weight: bold;
    }

        
.aviso1{
   background: url(../imagem/sistema/aviso1.png) left no-repeat;
   background-size: 32px 32px;
   width: 100px;
   height: 32px;
   text-align: right;
   font-size: 12px;
   font-family: "Lucida Grande", "Arial", sans-serif;
}

.aviso2{
   background: url(../imagem/sistema/aviso2.png) left no-repeat;
   background-size: 32px 32px;
   width: 100px;
   height: 32px;
   text-align: right;
   font-size: 12px;
   font-family: "Lucida Grande", "Arial", sans-serif;
}

.aviso3{
   background: url(../imagem/sistema/aviso3.png) left no-repeat;
   background-size: 32px 32px;
   width: 100px;
   height: 32px;
   text-align: right;
   font-size: 12px;
   font-family: "Lucida Grande", "Arial", sans-serif;
}
.aviso3{
   background: url(../imagem/sistema/aviso3.png) left no-repeat;
   background-size: 32px 32px;
   width: 100px;
   height: 32px;
   text-align: right;
   font-size: 12px;
   font-family: "Lucida Grande", "Arial", sans-serif;
}
.aviso4{
   background: url(../imagem/sistema/aviso24.png) left no-repeat;
   background-size: 32px 32px;
   width: 100px;
   height: 32px;
   text-align: right;
   font-size: 12px;
   font-family: "Lucida Grande", "Arial", sans-serif;
}

.escondido {
    visibility: hidden;
    width: 0px;
    height: 0px;
    float: top;
} 
.oculta { display:none; }

.descricao {
    background-color: lightblue;
    max-width: 600px;
    max-height: 200px;
    overflow: auto;
}
.opaco {
    opacity: 0.4;
}

@media screen and (max-width: 1270px) {
    .dp1 {
      display: none;
    }
}
@media screen and (max-width: 1070px) {
    .dp2 {
      display: none;
    }
}
@media screen and (max-width: 840px) {
    .dp3 {
      display: none;
    }
}
@media screen and (max-width: 640px) {
    .dp4 {
      display: none;
    }
}
@media screen and (max-width: 400px) {
    .dp5 {
      display: none;
    }
}