body { 
    font-family: 'Roboto', sans-serif;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(0, 61, 122);    
    color: #fff;
    padding: 0.5em 1em 0 1em;
    z-index: 1000;
    display: flex;
    line-height: 30pt;
    overflow: hidden;
    flex-direction: row;
}

#oe-nav { display: flex; flex-direction: row; }

footer { font-size: 10pt; color: gray; padding: 2em 0 1em 0; }

#oe-logo { font-weight: bold; padding-right: 1em; box-sizing: border-box; width: 120px; }
#oe-menu { display: flex; list-style: none; flex-direction: row; margin: 0; padding: 0; width: 520px;}
#oe-menu li { margin: 0 0.5em; }
#oe-menu li.ativo { margin: 0 0.5em; border-bottom: 5px solid #fff; font-weight: 700; color: #ffff00; }

#oe-menu a, 
#oe-menu a:link, 
#oe-menu a:visited, 
#oe-menu a:active,
#oe-aux a, 
#oe-aux a:link, 
#oe-aux a:visited, 
#oe-aux a:active
{
    color: #ffff00;
    text-decoration: none;
}

#oe-aux a { padding: 0 0.5em; }

.oe-info-ou {
    border-radius: 20px; color: #fff; background-color: rgb(0, 61, 122); display: inline-block; padding: 5px; font-size: 10pt; font-weight: bold;
}


#oe-menu a:hover,#oe-aux a:hover { color: #fff; }

#oe-ui {
    z-index: 10;
    padding-top: 60px;
    margin: 0 0.5em;
    max-width: 1000px;
}

#oe-modal {
    position: absolute;
    z-index: 2000;
    left: calc(50% - 150px);
    top: calc(50% - 200px);
    border: 1px solid gray;
    width: 200px;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);    
}

#oe-modal label { font-size: 11pt }

#oe-modal-titulo {
    background-color: rgb(0, 61, 122);
    color: #fff;
    padding: 5px 10px;
}

#oe-modal-conteudo {
    padding: 10px;
}

#oe-aux {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 360px;
}


.oe-nav-local {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #CCC; margin-bottom: 1.5em;
    align-items: baseline;
}

#oe-ui p, #oe-ui li { max-width: 40em; line-height: 1.4em; margin-top: 0 }

h1 { margin-top: 0; font-weight: 400; color: #808080; margin-bottom: 0.5em; }
h2 { margin-top: 1em; font-weight: 400; color: #808080; margin-bottom: 0}
h3 { color: gray; }

a, a:link, a:active, a:visited { text-decoration: none; color: rgb(0, 102, 204); cursor: pointer; }
a:hover { text-decoration: underline;}

#oe-data {
    max-height: 300px;
    overflow: auto;
}

#oe-data-nav {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0; padding: 0 0 0.5em 0;
}

#oe-data-nav li { 
    padding-right: 1em;
}

#oe-planilha-nome {
    background-color: #eee;
    padding: 0.5em;
}

.oe-table { min-width: 30em; max-width: 100%; }
.oe-table-linha { width: 2em; background-color: #eee; text-align: center }

#oe-data th, #oe-evoc-rangmot-data th {
    background-color: #bbb;
    color: #000;
    text-align: center;
    font-weight: 500;
    padding: 0.25em;
}

#oe-data td, #oe-evoc-rangmot-data td {
    padding: 0.25em;
    border: 1px solid #eee;
}

#oe-evoc-ome { display: inline-block; list-style: none; padding: 0; margin: 0 0 1em 0; }
#oe-painel { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; text-align: center; width: 100%; }

small { font-size: 10pt; color: #aaa; }

#oe-painel canvas { background-color: #fff; box-sizing: border-box; cursor: crosshair; }

#oe-mouse-dist, #oe-termo-dist {
    color: #aaa;
    font-size: 0.8em;
    padding-left: 1em;
}

#oe-termo-dist { color: rgb(0, 61, 122); }

/* classes */
.oe-bt, .oe-bt:link { border-radius: 4px; background-color:rgb(0, 61, 122); padding: 0.25em 0.5em; color: #fff; cursor: pointer;}

input["button"].oe-bt { font-size: 10pt !important; }

.oe-bt:hover { background-color:rgb(0, 32, 64); color: #ffff00; cursor: pointer; text-decoration: none;}

.oe-btv, .oe-btv:link { border-radius: 4px; background-color:#444; padding: 0.25em 0.5em; color: #fff; cursor: pointer;}
.oe-btv:hover { background-color:#222; color: #ffff00; cursor: pointer; text-decoration: none;}
.oe-bt-lista { display: inline }

.oe-bt-icone { color: gray; }
.oe-bt-icone:hover { color: rgb(0, 32, 64); cursor: pointer;}

.oe-pb0 { margin-bottom: 0; }
.oe-pb1 { margin-bottom: 1em; }
.oe-pb2 { margin-bottom: 2em; }

.oe-pt0 { padding-top: 0; }
.oe-pt05 { padding-top: 0.5em; }
.oe-pt1 { padding-top: 1em; }
.oe-pt2 { padding-top: 2em; }

.oe-pe1 { padding-left: 1em; }
.oe-pd1 { padding-right: 1em; }
.oe-pe05 { padding-left: 0.5em; }
.oe-pd05 { padding-right: 0.5em; }

.oe-evoc-item { padding: 0.25em 0.5em; margin-bottom: 0.5em; border: 1px solid #ccc; border-radius: 4px; }

.oe-icone { height: 16px; opacity: 0.5; }

.invisivel { display: none !important; }
.esmaecido { opacity: 0.3 };
.visivel { display: block; }
.visivel-inline { display: inline-block; }


.oe-w50 { width: 50px; }
.oe-w75 { width: 75px; }
.oe-w100 { width: 100px !important; }
.oe-w150 { width: 150px }
.oe-w100p { width: auto; }

.oe-txc { text-align: center !important; }
.oe-txd{ text-align: right !important; }
.oe-txe { text-align: left !important; }
.oe-celt { vertical-align: top; }

.oe-sub { font-size: 10pt; color: #aaa; padding-top: 1em; }

/* formulários */

label { display: block; font-weight: 500; color: gray; padding-bottom: 0.5em}
input, select, textarea { border-radius: 4px; font-size: 10pt; border: 1px solid #ccc; padding: 0.25em 0.5em;}
textarea { max-width: 40em; width: 100%; height: 100px; }

#oe-grafico-quad { width: 100%; }

#oe-grafico-quad td,
#oe-grafico-quad th
{
    border-bottom: 1px solid #000;
    font-family: 'Roboto mono', Monospace;
    line-height: 1.5em;
    font-size: 10pt;
    text-align: left;
    margin: 0.5em;
    border-spacing: 0.5em;
    vertical-align: text-top;
    padding: 0.25em 0; 
}

#oe-grafico-quad th { font-weight: 700; border-bottom: 3px solid #000 !important; }
#oe-grafico-quad td { font-weight: 300; }

.oe-painel-item {
    min-width: 47%;
    padding-bottom: 1em;
    text-align: center;
}

.oe-painel-item-duplo {
    width: 47%;
    padding-bottom: 2em;
}

.oe-campo {
    border: 1px solid gray;
    font-family: 'Roboto Mono', monospace;
    font-size: 10pt;
}

.oe-campo-maior { 
    width: 200px !important; 
}

select.oe-campo {
    max-width: 150px !important;
}

input.oe-campo {
    width: 4em;
}

input.oe-campo-menor {
    width: 2.5em;
}

input.oe-campo-3c {
    width: 3em;
}


.oe-evocacao { cursor: help; display: block; }
.oe-evocacao:hover { color: rgb(0, 61, 122); }
.oe-evocacao-k { width: 8px; height: 8px; background-color: gray; border-radius: 8px; display: inline-block; }

#oe-nc-1, #oe-nc-2, #oe-nc-3, #oe-nc-4 {
}

#oe-evoc-etiqueta {
    z-index: 2000;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgb(0, 61, 122) !important;
}
.oe-evoc-etiqueta {
    font-size: 9pt;
    padding: 0.25em 0.5em;
    background-color: rgb(128, 128, 128);
    color: #fff;
    border-radius: 3px;    
}

.oe-opcoes {
    padding: 0.5em 1em;
    background-color: #efefef;
    color: #606060;
    border-radius: 3px;
    font-size: 10pt;
    text-align: left;
}

#oe-k-opcoes {
    display: block;
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid #808080;
}

.fas { padding: 0 0.25em;}

#oe-tabela {
    position: absolute;
    z-index: 999;
    left: 20px;
    top: 60px; 
    /*width: 900px;*/
    bottom: 10%;
    border: 1px solid gray;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.5em;
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);    
}

#oe-tabela-dados, #oe-tabela-distancias-dados { max-width: 100%; }
#oe-tabela tr,
#oe-tabela td,
#oe-tabela-distancias-dados tr,
#oe-tabela-distancias-dados td
{ 
    border-bottom: 1px solid #000;
    font-family: 'Roboto mono', Monospace;
    line-height: 1.5em;
    font-size: 10pt;
    text-align: left;
    margin: 0.5em;
    border-spacing: 0.5em;
    vertical-align: text-top;
    padding: 0.25em 0;  }

#oe-tabela td { min-width: 100px; }
#oe-tabela td.cont { width: 100%; }
#oe-tabela-container, #oe-tabela-distancias-container {
    overflow-y: auto;
    /*max-height: 400px;*/
}

.oe-tabela-distancias-termo { font-weight: bold; }

#oe-tabela-distancias {
    position: absolute;
    z-index: 999;
    left: 16px;
    top: 60px; 
    bottom: 60px;
    /*width: 900px;*/
    bottom: 60px;
    border: 1px solid gray;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.5em;
    box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 10px 10px 10px -10px rgba(0, 0, 0, 0.7);    
}