body {
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    background-color: black;

  }
  
  /*------------------------------------ Navbar com dropdown ---------------------------------------
  
  /*--------------------------- icone clicavel ------------------------------------------------*/
 
  .titulogeral {
    flex: 0 1 auto ;
    background-color: black;
    color: #A0A0A0;
    padding: 3px 3px 5px 3px;
    margin: 0px 3px;
    /*height: 24px;*/
    font-family :Verdana, Geneva, Tahoma, sans-serif ; 
    font-size: 12px;
    border-radius: 0px;
    border: 0px solid #000000;
    display : flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*vertical-align: middle;
    text-align: left;*/
    overflow-y: hidden;
  }
  
  
  /*----------------------------------- Dashboard ------------------------------------- */
  
  .estilodefault {
      width            : auto                     ;
      text-align       : left                     ; 
      vertical-align   : middle                   ; 
      color            : black                  ;
      background-color : #E0E0E0                ;
      border-style     : solid                    ; 
      border-width     : 1px                      ; 
      border-color     : #000000                ; 
      font-family      : Verdana, Geneva, Tahoma, sans-serif ; 
      /*font-family      :'Courier New', Courier, monospace ; */
      font-size        : 12px                     ;
  }
  
    
  /*----------------------------------- Display de Saida ------------------------------------- */
  .saida {
    color: #00FF00;
    background-color: #000000;
    width: 99%;
    height: 600px;
    margin: 0px;
    padding: 4px 4px ;
    font-family: courier, monospace;
    font-size: 14px;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #909090;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: top;
    text-align: left;
  }  
  
  /*------------------------------------------- Google MAPS ----------------------------------*/
  /* Always set the map height explicitly to define the size of the div element that contains the map. */
  #map {
    height: 100%;
  }
  
  /* Optional: Makes the sample page fill the window. 
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  */
  
  /*---------------------------------- POPUP e Dialogo -----------------------------------------*/
  
.modal {
  display: none; 
  position: absolute; 
  z-index: 1; 
  overflow: auto; 
  background-color: rgb(0,0,0);  
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto; 
  height: auto;
  font-family: sans-serif;
  border-radius: 4px;
  }
  
  .modal-content {
    background-color: #D0D0D0;
    padding: 10px;
    border: 1px solid #d9d9d9;
    width: auto;
  }
  
  .modal-content label {
    margin-top: 15px;
    display:inline-block;
  }  
  
  .modal-content input {
    font-size: 18px;
    padding : 10px;
    border-radius: 4px;
    background-color: #ffffff;
  }  
  /*
  .modal {
    display: none; 
    position: absolute; 
    z-index: 1; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto; 
    height: auto;
  }
  
  .modal-content {
    background-color: #FFFFFF;
    padding: 10px;
    border: 1px solid #777777;
    width: auto;
  }
  
  */
  .menunav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: inherit;
    position: sticky;
    font-size: 16px;
    bottom: 0;
    width: 100%;
  }
  
  .menunav li {
    float: left;
  }
  
  .menunav li span {
    display: block;
    color: #3333ff;
    text-align: left;
    padding: 2px 10px 2px 10px;
    text-decoration: none;
  }
  
  .menunav li span:hover li span:active {
    background-color: #00FF00;
    cursor: pointer;
  }
  
  
  /*------------------------------------------- Navbar com submenu horizontal ----------------------------------*/
  
  .navbar {
    overflow: hidden;
    background-color: #333; 
  }
  
  .navbar a {
    float: left;
    font-size: 10px;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
  }
  
  
  .navbar span {
    float: left;
    font-size: 10px;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
  }
  
  
  .subnav {
    float: left;
    overflow: hidden;
  }
  
  .subnav .subnavbtn {
    font-size: 10px;  
    border: none;
    outline: none;
    color: white;
    padding: 10px 12px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .navbar a:hover, span:hover, .subnav:hover .subnavbtn {
    background-color: dodgerblue;
  }
  
  .subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: dodgerblue;
    width: 100%;
    z-index: 1;
  }
  
  .subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
  }
  
  .subnav-content span {
    float: left;
    color: white;
    text-decoration: none;
  }
  
  .subnav-content a:hover {
    background-color: #A0A0A0;
    color: black;
  }
  
  .subnav-content span:hover {
    background-color: #A0A0A0;
    color: black;
  }
  
  .subnav:hover .subnav-content {
    display: block;
  }
  
  /*-------------------------------------------------------------------*/
  
  
  .list {
    font-family:sans-serif;
  }
  
  a {
      color:white;
      text-decoration:none;
  } 
 
  .css_principal {
    z-index: 1;
    width: auto;
    /*width: %;*/
    height : 100%;
    font-family: courier, monospace;
    font-size: 14px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
  }
  
  #container {
      display: flex;
      flex-direction: column;
      height: 100%;
  }
    /*
    .box .row {
    border: 1px dotted #0313fc;
  }
  .box .row.header {
    flex: 0 1 auto;
  }
  .box .row.content {
    flex: 1 1 auto;
  }
  .box .row.footer {
    flex: 0 1 40px;
  }
  .box-container {
    display: contents;
  }
*/

  .principal {
    flex:1 0 auto;
    z-index: 1;
    /*width: auto;*/
    width: auto;
    max-width: 100%; /* teste */
    /*height:100%;*/
    /*overflow-y:scroll;*/
    overflow-y:hidden;
    font-family: courier, monospace;
    font-size: 14px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
  }
  .css_blococlicavel:target {
  display:block;
  }
  
  .css_bar_principal {
   /* w3-bar;
    w3-black;
    w3-sans-serif;*/
    font-size: 12px;
  }
  
  #subtitulo {
    flex : 0 1 auto;
    display : flex ;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    color: rgb(102, 179, 137);
    font-size: 16px;
    border-radius: 4px;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(102, 179, 137);
    background-color: #333333;
    padding : 4px;
  }

  #pesquisaUsuario {
    display : flex ;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
  }

  #nomeusuario {
    font-size: 16px;
    font-family: courier, monospace;
    height : auto;
  }

  #btnPDF {
    background-color :rgb(102, 179, 137);
    color : white;
    font-size: 16px;
    border-radius:4px;
    border-color:white;
    border-style: solid;
    border-width: 1px;
    padding: 7px ;
  }

  #pdflink {
    font-family: courier, monospace;
    font-size: 16px;
    border-radius: 4px;
    border-style: solid;
    border-width: 0px;
    border-color: blue;
    color : rgb(255,255,255);
    background-color: rgb(102, 179, 137);
    /*background-color: rgb(102, 179, 137);*/
    padding : 4px 4px;
    margin-top : 10px;
    
  }

  #perfilcargas { 
    display : flex;
    flex-direction: column; 
    justify-content:space-around;
    align-items: flex-start;
  }

  #divPerfil {
    margin-top:10px;
  }

  #menuNomes, #divSelectNomes, #divSelectDIs {
    margin-top : 5px;
    width:95%;
  }

  #listasessoes {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top : 5px;
  }
  
  #divcanvas {
    background-color: rgb(102, 179, 137);
    height:auto;
    width: 99%;
    min-width: 280px;
    border-radius: 4px;
    margin-top : 5px;
  }

  #upload {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    row-gap: 5px;
    margin-top : 5px;
    padding : 5px;
  }

  #msgP, #msgC,  #msgPK, #msgCK {
   color : #ffffff;
   word-wrap: break-word;
   padding:10px;
  }

  #popup1 {
    
  height : 75%;  
  font-family: 'Courier New', Courier, monospace;
  white-space: break-spaces;
  font-size: 16px;
  padding: 10px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  overflow: auto; 
  color: #D9D9D9;

  border : 1px solid #ffffff ;
  border-width: 1px 1px 1px 1px; 
  border-collapse: collapse;
  border-spacing: 0px 0px;
  border-radius: 4px;
  }

 
  #swap1, #swap2, #swap3, #swap4 {
    margin-left : 25px;
 
    color : #0000FF;
    font-size : 18px;
    cursor : pointer;
  }

  #statusP, #statusC, #statusPK, #statusCK {
    margin-top : 0px;
    display: block; width:100%;
    height : 28px;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 0px;
    border-width: 1px;
    padding-left: 4px;
    color : #FF0000;
    background-color: #D0D0D0;
  }

  #arqbinP, #arqbinC, #arqbinPK, #arqbinCK {
    margin-top : 0px;
    margin-bottom: 0px;
    display: block; width:100%;
    height : 28px;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 0px;
    border-width: 1px;
    padding-left: 4px;
    color : #000000;
    background-color: #D0D0D0;
    cursor : pointer;
  }

  #linhaEnviar {
    padding: 15px;
  }

  #btnSubirC, #btnSubirP, #btnSubirCK, #btnSubirPK {
    margin-top : 0px;
    margin-bottom: 0px;
   
    display: block; width:100%;
    height : 28px;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 4px;
    border-width: 1px;
    color : #ffffff;
    background: rgba(0, 0,255, 0.4);
    cursor: pointer;

  }

  #alvoP, #alvoC, #statusP, #statusC, #inputgrupoP, #inputgrupoC, #inputIPP, #inputIPC, #alvoPK, #alvoCK, #statusPK, #statusCK, #inputgrupoPK, #inputgrupoCK, #inputIPPK, #inputIPCK {
    margin-top : 0px;
    margin-bottom: 0px;
    display: block; width:100%; box-sizing: border-box;
  
    height : 28px;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 0px;
    border-width: 1px;
    padding-left: 4px;
    color : #ffffff;
    background-color:rgb(0,0,255,0.2);
  }

  #btnArqC, #btnArqP, #btnArqCK, #btnArqPK {
    margin-top : 0px;
    margin-bottom : 0px;
    display: block; width:100%;
   height : 28px;
    font-family: sans-serif;
    font-size: 16px;
    border-radius: 0px;
    border-width: 1px;
    padding-left: 4px;
    color : #ffffff;
    background-color:rgb(0,0,255,0.2);
    cursor: pointer;
  }

  #previewP, #previewC,  #previewPK, #previewCK {
    /*margin-top : 3px;*/
    /*height : 28px;*/
    font-family: sans-serif;
    display: block; width:95%;
    font-size: 16px;
    padding-left: 3px;
    /*color: #FFFF00;*/
    align-self: center;
  }
  
.uploadtab {
  font-family: sans-serif;
  font-size: 16px;
  border: 1px solid #666666;
  border-width: 1px 1px 1px 1px; 
  border-collapse: collapse;
  /*border-spacing: 0px 0px;*/
  /*padding: 0px 3px;*/
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  white-space: nowrap;
  color : #ffffff;
  z-index: 1;
}

.uploadtab td {
  font-family: sans-serif;
  font-size: 16px;
  border: 1px solid #666666;
  border-radius : 4px;
  border-width: 1px 1px 1px 1px; 
  border-collapse: collapse;
  /*border-spacing: 0px 0px;*/
  /*padding: 3px;*/
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  white-space: nowrap;
  vertical-align: middle;
  color : #555555;
  z-index: 1;
}

.tabpop table tr:nth-child(12) td{
  border:none;
 }

.uploadtab input {
  font-family: sans-serif;
  background-color:rgb(0,0,255,0.2);
  /*color:goldenrod;*/
  color:white;
  /*border-radius: 4px;*/
  padding : 0px 3px;
  font-size: 16px;
  align-self: center ;
  /*font-weight:bold ;*/
}

.uploadtab span {
  margin-top:0px;
  color: #ffffff;
  font-size: 12px;
  /*font-weight:bold ;*/
}


  .tabpop {
    display : flex;
    flex-direction: column;
    justify-content:space-between;
    overflow: auto;
    width: auto;
    /*height: auto;*/
    font-family: courier, monospace;
    font-size: 16px;
    /*font-weight:bold ;*/
    border: 1px solid #666666;
    border-width: 1px 1px 1px 1px; 
    border-collapse: collapse;
    border-radius: 4px;
    /*border-spacing: 0px 0px;*/
    padding: 0px 3px;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    white-space: nowrap;
    z-index: 1;
  
  }
    
  .tabpop table td:nth-child(1){
    color: #ffffff;
   font-family: sans-serif;
  
   }
   
  .tabpop table tr:nth-child(1) td{
    color: #ffffff;
    font-family: sans-serif;
    text-align: center;

   }
   
  .tabpop input {
    background-color:rgb(0,0,255,0.2);
    /*color:goldenrod;*/
    color:white;
    border-radius: 0px;
    padding : 0px 4px;
    font-size: 16px;
    vertical-align: middle;
    /*font-weight:bold ;*/
  }
  .tabpop span {
    margin-top:0px;
    color: #ffffff;
    font-size: 16px;
    /*font-weight:bold ;*/
  }
  .tabpop span:hover {
    background-color: rgb(102, 179, 137);
  }
 
    
.modal2 { 
  font-family: courier, monospace;
  font-size: 16px;
  padding: 5px;
  /*margin-top: 0px;*/
  /*margin-bottom: 0px;*/
  margin-top:auto;
  margin-bottom:auto;
  margin-right: auto;
  margin-left: auto;
  white-space: nowrap;
  /*display: none; */
  position: absolute; 
  z-index: 1; 
  overflow: auto; 
  
  background-color: rgb(102, 179, 137);
  color: #D9D9D9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90%;
  max-width:97%;

  /*width : 95%;
  height: 30%;*/
  border-width: 1px 1px 1px 1px; 
  border-collapse: collapse;
  border-spacing: 0px 0px;
}

.modal2-content {

  background-color: rgb(102, 179, 137);
  padding: 0px 5px;
  border: 1px solid #AAAAAA;
  border-width: 1px 1px 1px 1px; 
  border-collapse: collapse;
  border-spacing: 0px 0px;
  width: auto;

}

.menunavpop {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: inherit;
  position: sticky;
  border-radius: 4px;
  font-size: 14px;
  bottom: 0;
  width: 100%;
}

.menunavpop li {
  float: left;
}

.menunavpop li span {
  display: block;
  color: #0000ff;
  
  text-align: left;
  padding: 4px 10px 4px 10px;
  text-decoration: none;
}

.menunavpop li span:hover {
  background-color: #000000;
  color : goldenrod;
  cursor: pointer;
}


  .css_tabela_detalhe_estacao {
   border: 0px solid #d9d9d9;
   color: #888888;
   font-family: sans-serif;
   font-size: 12px;
   margin-top: 8px;
   margin-bottom: 10px;
   margin-right: auto;
   margin-left: auto;
   padding-top: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   padding-left: 3px;
  }  
  
  .css_tabela_detalhe_estacao {
    border: 0px solid #d9d9d9;
    color: #888888;
    font-family: sans-serif;
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
   }  
   
  .css_tabelainterna {
    width: 50%;
    font-family: sans-serif;
    font-size: 12px;
    border: 1px solid #d9d9d9;
    border-width: 0px 0px 1px 0px; 
    white-space: nowrap;
  }
  
  .css_bgverde   { background-color: #ccffcc;}
  .css_bgvermelho{ background-color: #ffcccc;}
  .css_bgamarelo { background-color: #ffcc66;}
  .css_bgazul    { background-color: #ccccff;}
  .css_bgcinza   { background-color: #e0e0e0;}
  
  .css_esq {
    text-align: left;  
  }
  
  .css_dir {
    text-align: right;  
  }
  
  .css_cen {
    text-align: center;  
  }
  
  table {
    border: 1px solid #d9d9d9;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    font-family: sans-serif;
    font-size: 100%;
    margin-top: auto;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 0px;
    padding-left: 3px;
  }
  
  tr {
    border-bottom: 0px solid #d9d9d9;
  } 
  
  td {
    border: 0px solid #000000;
    border-collapse: collapse;
    border-style: solid;
    border-width: 0px 0px 0px 0px; 
    color: #888888;
    font-family: sans-serif;
    font-size: 100%;
    margin-top: auto;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 2px;
    padding-right: 3px;
    padding-bottom: 2px;
    padding-left: 3px;
  }
  
  th {
    border: 1px solid #d9d9d9;
    border-collapse: collapse;
    border-style: solid;
    border-width: 0px 0px 0px 0px; 
    color: #888888;
    font-family: sans-serif;
    font-size: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
  }
  
  input {
    border:solid 0px #ccc;
    border-radius: 0px;
    padding: 7px 14px;
    margin-bottom: 5px;
    background-color: #D9D9FF;
    font-family:'Courier New', Courier, monospace;
    font-size: 12px;
  }
  input:focus {
    outline:none;
    border-color:#000;
  }
  
  /*@media only screen and (max-width: 768px) {
  
  .css_tabelainterna {
    width: 100%;
    font-family: sans-serif;
    font-size: 8px;
    border: 1px solid #d9d9d9;
    border-width: 0px 0px 1px 0px; 
    white-space: nowrap;
  }
  
  .css_tabela_detalhe_estacao {
   border: 0px solid #d9d9d9;
   color: #888888;
   font-family: sans-serif;
   font-size: 8px;
   width: 100%;
   margin-top: 8px;
   margin-bottom: 10px;
   margin-right: auto;
   margin-left: auto;
   padding-top: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   padding-left: 3px;
  }  
}
*/