@import "mdl/material.min.css?v=4";
@import "css/reset.css?v=4";
@import "css/whhg.css?v=4";
@import "css/jquery.autocomplete.css?v=4";
@import "wysiwyg/jquery.wysiwyg.css?v=4";
@import "site.css?v=5";
@import "calc.css?v=5";

@import "c3js/c3.min.0.7.20.css?v=4";
@import "pivottable/pivot.min.2.23.0.css?v=4";
@import "subtotal/subtotal.css?v=4";

@import "c3js/c3.customization.css?v=4";
@import "pivottable/pivot.customization.css?v=4";
@import "css/compgrid.css?v=21";
@import "css/comptree.css?v=10";
@import "css/compicone.css?v=14";


@font-face {
    font-family: Inter;
    src: url('font/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: WireOne;
    src: url('font/WireOne-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'WebHostingHub-Glyphs';
    src: url('font/webhostinghub-glyphs.ttf') format('truetype');
}

:root {
    --cor1: 240;
    --lineHeight: 2em;
}

/* Evita aumento automático de fonte e seleção/callout no iOS */
html,
body {
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout: none;
    /* reduz gestos que disparam zoom/double-tap */
    touch-action: manipulation;

}

body {
    background-attachment: fixed;
    background-position: bottom center;
    background-size: cover;
    color: black;
    font-family: Inter, arial, sans-serif;
    font-weight: 400;
    font-size: 10pt;
    overflow: overlay;
}

b {
    font-weight: bold;
}

p {
    margin: 0 0 0 10px;
}

ul {
    list-style-type: disc;
    margin: 0 0 0 10px;
}

ol {
    list-style-type: decimal;
    margin: 0 0 0 10px;
}

li {
    margin: 0 0 0 10px;
}

i {
    font-weight: normal;
    /*icones não devem ser ficar em negrito*/
}

pre {
    font-family: monospace;
    /* permite quebra de linha dentro de <pre> */
    white-space: pre-wrap;
    /* quebra palavras longas se necessário */
    word-wrap: break-word;
}

code {
    font-family: monospace;
}

.invisivel {
    display: none !important;
}

::selection {
    background-color: hsla(60, 75%, 50%, 0.75);
    color: black;
}

.compy {
    color: black;
    font-size: 10pt;
    line-height: 1em;
    text-shadow: none;
}

.compy * {
    color: inherit;
    font-size: inherit;
    line-height: 1em;
    text-shadow: none;
}

.compy :has(> input[type="checkbox"]),
.compy :has(> input[type="radio"]) {
    cursor: pointer;
}

.compy sub {
    vertical-align: sub;
    font-size: smaller;
}

.compy sup {
    vertical-align: super;
    font-size: smaller;
}

.compy .vermelho {
    background-color: #FAA;
}

.compy .letraVermelha {
    color: #F00;
}

.compy .verde {
    background-color: #AFA;
}

.compy .verdeFraco {
    background-color: #EFE;
}

.compy .amarelo {
    background-color: hsla(60, 100%, 95%, 1);
}

.compy .laranja {
    background-color: hsla(20, 100%, 50%, 1);
}

.compy .letraAzul {
    color: #00F;
}

.compy .letraCinza {
    color: #888;
}

.compy .letraCinzaClaro {
    color: #AAA;
}

.compy .letraLaranja {
    color: hsla(20, 100%, 50%, 1);
    font-size: 0.8em;
}

.compy .azul {
    background-color: #DDF;
}

.compy .cinza {
    background-color: #EEE;
}

.compy .cor {
    border-radius: 5px;
    margin: 0 2px 0 2px;
    display: inline-block;
    height: 1em;
    width: 2em;
    border: 0.5px solid hsla(var(--cor1), 25%, 40%, 1);
}

.compy .letraPequena {
    font-size: 0.8em;
}

.compy .zz {
    cursor: wait !important;
    pointer-events: none !important;
}

.compy .zz:after {
    content: url('imagem/wait.gif');
    position: absolute;
    z-index: 10;
}

.lcc1 {
    bottom: 0;
    color: rgba(255, 255, 255, 0.1);
    font-family: WireOne;
    font-size: 10vw;
    font-weight: bold;
    padding: 20px 60px;
    position: fixed;
    right: 0;
    text-align: right;
    width: 50vw;
    z-index: -1;
}

.compy *:focus {
    outline: none;
}

.compy a {
    text-decoration: none;
}

.compy a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.compy a img {
    border: none;
}

.compy a {
    color: #008;
}

.site a {
    color: inherit;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    text-decoration: none;
}

.site a:hover {
    cursor: pointer;
    text-decoration: none;
    border-bottom-style: none;
}

.site a img {
    border: none;
}

.compy .apagado,
.compy .apagado * {
    color: red;
}

.compy .apagado * input,
.compy .apagado * select,
.compy .apagado * textarea {
    text-decoration: line-through;
}

.compy .dica:before {
    color: rgba(255, 255, 255, 0.7);
    content: '\f0a3';
    font-family: 'WebHostingHub-Glyphs';
    font-size: 0.8em;
    text-shadow: 1px 1px 1px #555;
}

.compy .dica {
    cursor: help;
    _display: inline-block;
    vertical-align: top;
    float: right;
    position: relative;
    text-align: right;
    z-index: 1;
}

.compy .dica.ativa {
    margin: 10px;
    padding: 10px;
    color: darkblue;
    background-color: #FF8;
    border-radius: 3px;
    box-shadow: 1px 2px 3px grey;
    min-width: 20vw;
}

.compy .dica>* {
    display: none;
    font-size: 1.1em;
    line-height: normal;
    text-align: justify;
}

.compy .dica td {
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    padding: 5px;
}

.compy .dica p {
    margin: 1em;
}

.compy .dica ul {
    margin-left: 3em;
}

.compy .dica a {
    padding: 0 2px 1px 2px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 2px;
}

.compy .observacao {
    color: red;
    font-family: monospace;
    font-style: italic;
    font-size: 0.8em;
    max-width: 300px;
    white-space: pre-line;
}

.compy .wm {
    border: 1px dotted rgba(127, 127, 190, 0.5);
    color: #4F4F8E;
    display: inline-block;
    font-size: 0.8em;
    text-align: center;
}

.compy .wm>input {
    background-color: transparent;
    text-align: center;
    width: 2em;
}

.compy .wm>a {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline-block;
    padding: 0.8em 2em 0.8em 2em;
}

.compy .wm>a:hover {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    color: white;
    text-decoration: none;
}

.compy .infoObs {
    position: relative;
}

.compy .infoObs .textoDiv {
    display: none;
    left: 75%;
    position: absolute;
}

/* .compy .infoObs .textoDiv:not( :empty ) {} */

.compy .infoObs:hover .textoDiv:not( :empty) {
    background: #FFF;
    border-radius: initial;
    box-shadow: 0 0 50px gray;
    color: initial;
    display: block;
    font-size: 0.9em;
    height: auto;
    min-width: 20vw;
    padding: 10px;
    width: auto;
    z-index: 2;
}

.compy .infoObs {
    position: relative;
}

.compy .infoObs .demanda {
    display: none;
    left: 0;
    position: absolute;
}

.compy .infoObs .demanda:not( :empty) {
    background: #F00;
    border-radius: 50%;
    color: #F00;
    display: block;
    height: 10px;
    min-width: 10px;
    overflow: hidden;
    padding: 0;
    width: 10px;
    z-index: 1;
}

.compy .infoObs:hover .demanda:not( :empty) {
    background: #FFF;
    border-radius: initial;
    box-shadow: 0 0 50px gray;
    color: initial;
    display: block;
    font-size: 0.9em;
    height: auto;
    min-width: 20vw;
    padding: 10px;
    width: auto;
    z-index: 2;
}

.compy .infoObs:hover .textoDivResumo:not( :empty) {
    max-width: 600px;
    min-width: inherit !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compy .frm1 {
    border-radius: 2px;
    display: none;
    float: left;
    margin: 20px 0 0 0;
    padding: 20px;
    position: absolute;
}

/* .compy .frm1:has(.compySlickGridBox) {
    box-sizing: border-box;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
} */

.compy .frm1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px) brightness(0.75);
    background-image: linear-gradient(170deg, hsla(var(--cor1), 100%, 90%, 0.75) 10%, hsla(var(--cor1), 100%, 90%, 0.25) 50%);
    box-shadow: 0 0 5px 1px hsla(0, 0%, 0%, 0.25), inset 0 0 5px 2px hsla(var(--cor1), 50%, 80%, 0.75);
    border-radius: 2px;
    z-index: -1;
    transition: backdrop-filter 0.4s ease;
}

.compy .frm1.entering::before {
    backdrop-filter: blur(0) brightness(1);
}

/* Ao lado (bx1): filho é absolute no pai; o recuo evita sobrepor
   o conteúdo e abre o painel à direita. */
.compy .frm1 .frm1:not(.rps1) {
    margin: 0 0 0 60px;
}

/* Ao lado: filhos de formulário (não do menu .tm1) no mesmo topo do pai.
   O 1º painel aberto pelo menu mantém a posição estática. */
.compy .frm1:not(:has(.tm1)) .bx1>.frm1:not(.rps1) {
    top: 0;
}

/* Painel ao lado (td.bx1 na 1ª linha): não herda font-size/line-height
   do CompIcone (slot 100px) na célula vizinha. */
.compy .bx1 > .frm1 {
    font-size: 10pt;
    line-height: normal;
}

/* Config vive no .tf1 do pai. Não usar .frm1 .frm1 i: a Opção já é
   .frm1 filha do Menu e a grade do CompIcone quebraria. */
.compy .frm1 .frm1 .bts1 .comando i,
.compy .frm1 .frm1 h1 i,
.compy .frm1 .frm1 a.comando i {
    padding: 0 !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
}

.compy .frm1 .frm1 .comando i {
    font-size: 1.2em !important;
}

.compy .frm1 .frm1 h1 i {
    font-size: 1em !important;
}

/* Abaixo (bx3): sem o recuo de 60px do modo ao lado. */
.compy .bx3>.frm1:not(.rps1) {
    margin: 0;
}

.compy .fv2:not( :empty) {
    background-color: #F00;
    border-radius: 4px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    color: white;
    display: inline;
    font-size: 0.75em;
    padding: 2px 5px;
    position: relative;
    right: -10px;
    top: -4px;
}

.compy .bx2 {
    width: 1px;
    /*para poder ter altura*/
    height: 100vh;
    position: absolute;
}

.compy .bx3 {
    margin-top: 80px;
    /* espaço acima dos formulários filhos, quando mostrados abaixo. */
    position: absolute;
    left: 0;
}

.compy hr {
    border: none;
    border-top: 1px solid white;
    cursor: default;
}

/* .compy .frm1>table {} */

.compy .frm1 textarea {
    font-family: monospace;
    field-sizing: content;
    min-height: 3rem;
}

.compy .frm1.ft1 {
    z-index: 1;
}

.compy .frm1:not(.c32) {
    transform-origin: top left;
}

.compy .frm1.sh1 {
    display: block;
    animation: panelFocus 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes panelFocus {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.compy .frm1.drk1 {
    border-radius: 0;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
    color: hsla(0, 0%, 100%, 0.8);
}

.compy .frm1.drk1::before {
    background-image: linear-gradient(170deg, hsla(var(--cor1), 20%, 20%, 0.75) 10%, hsla(var(--cor1), 20%, 20%, 0.25) 50%);
    box-shadow: 0 0 5px 1px hsla(0, 0%, 0%, 0.25), inset 0 0 5px 2px hsla(var(--cor1), 20%, 20%, 0.75);
}

.compy .drk1 h1,
.compy .drk1 h1 *,
.compy .drk1 h2,
.compy .drk1 h2 *,
.compy .drk1 h3,
.compy .drk1 h3 *,
.compy .drk1 h4,
.compy .drk1 h4 *,
.compy .drk1 h5,
.compy .drk1 h5 *,
.compy .drk1 h6,
.compy .drk1 h6 * {
    color: hsla(0, 0%, 100%, 0.8);
}

.compy .frm1.drk1 input,
.compy .frm1.drk1 select,
.compy .frm1.drk1 textarea,
.compy .frm1.drk1 .de77_editor {
    background-color: hsla(var(--cor1), 20%, 25%, 1);
}

/*.compy .ms1 tfoot, .compy .mac1 tfoot*/

.compy .frm1.drk1 .vermelho {
    background-color: hsla(0, 100%, 70%, 0.5);
}

.compy .frm1.drk1 .letraVermelha,
.compy .frm1.drk1 .observacao {
    color: hsla(0, 100%, 80%, 1);
}

.compy .frm1.drk1 .verde {
    background-color: hsla(120, 100%, 30%, 0.5);
}

.compy .frm1.drk1 .verdeFraco {
    background-color: hsla(120, 50%, 50%, 0.5);
}

.compy .frm1.drk1 .amarelo {
    background-color: hsla(60, 100%, 50%, 0.7);
    text-shadow: 0 0 2px black;
}

.compy .frm1.drk1 .laranja {
    background-color: hsla(20, 100%, 50%, 0.7);
}

.compy .frm1.drk1 .letraLaranja {
    color: hsla(30, 100%, 80%, 1);
    font-size: 0.8em;
    text-shadow: 0 0 1px black;
}

.compy .frm1.drk1 .azul {
    background-color: hsla(var(--cor1), 100%, 75%, 0.5);
}

.compy .frm1.drk1 .letraAzul {
    color: hsla(var(--cor1), 100%, 90%, 1);
}

.compy .frm1.drk1 .cinza {
    background-color: hsla(0, 0%, 100%, 0.2);
}

.compy .frm1.drk1 .letraCinza {
    color: hsla(0, 0%, 70%, 1);
}

.compy .frm1.drk1 a,
.compy .frm1.drk1 .wm>input {
    color: hsla(var(--cor1), 100%, 90%, 1);
}

.compy .frm1.drk1 .wm>input {
    background-color: transparent;
}

/* .compy .frm1.drk1 a i {} */

.compy .frm1.drk1 h1 {
    padding: 0 0 0.75rem 0;
}

/* bts1 botões do painel ******************************************************/

.compy .bts1 {
    align-items: flex-start;
    /* Alinha os itens ao início, ajustando-se ao tamanho do conteúdo */
    display: flex;
    /* Ativa o Flexbox para o container */
    flex-wrap: nowrap;
    /* Previne as divs de quebrarem a linha */
    padding-left: 5px;
}

.compy .bts1>* {
    text-wrap: nowrap;
}

/* tf1 tabela de formulário ***************************************************/

.compy .tf1 {
    border-collapse: separate;
    border-spacing: 5px;
    display: inline-block;
    margin: 5px 0 0 0;
    vertical-align: top;
}

/* Formulario que contem grade ou arvore: a tabela cresce com o host.
   Telas sem esses componentes seguem inline-block. */
.compy table.tf1:has(.compySlickGridBox),
.compy table.tf1:has(.compTree) {
    display: table;
    width: auto;
    max-width: none;
    box-sizing: border-box;
}

.compy table.tf1:has(.compySlickGridBox)>tbody>tr>td.cf2[colspan],
.compy table.tf1:has(.compTree)>tbody>tr>td.cf2[colspan] {
    width: auto;
}

.compy table.tf1:has(.compySlickGridBox) table {
    width: auto;
    max-width: none;
    box-sizing: border-box;
}

/* Host do CompGrid / CompTree: bloco. */
.compy .cf2 span:has(.compySlickGridBox),
.compy .cf2 span:has(.compTree) {
    display: block;
    width: auto;
    box-sizing: border-box;
}

/* cf2 célula de formulário ***************************************************/

.compy .cf2 {
    background-color: hsla(var(--cor1), 100%, 90%, 1);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    padding: 20px;
    min-width: 20em;
    border-radius: 2px;
}

.compy .frm1.drk1 .cf2 {
    background-color: hsla(var(--cor1), 20%, 20%, 1);
    box-shadow: inset 0 0 1px hsla(var(--cor1), 20%, 50%, 1);
}

/* tcf1 título de campo de formulário *****************************************/

.compy .tcf1 {
    display: block;
    padding-top: 10px;
}

.compy .tcf1 select {
    display: block;
}

/* tcf2 título de coluna de formulário ****************************************/

.compy .tcf2 {
    border-bottom: solid 1px white;
    border-right: solid 1px white;
    padding: 5px 10px 5px 10px;
    text-align: center;
    vertical-align: bottom;
}

.compy .frm1.drk1 .tcf2 {
    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
    border-right: solid 1px rgba(255, 255, 255, 0.25);
}

/* ctf1 celula de tabela de formulário ****************************************/

.compy .ctf1 {
    border-right: solid 1px white;
    border-top: solid 1px white;
    padding: 10px;
}

.compy .frm1.drk1 .ctf1 {
    border-top: solid 1px rgba(255, 255, 255, 0.25);
    border-right: solid 1px rgba(255, 255, 255, 0.25);
}

/* comando ********************************************************************/

.compy .comando {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 0 1px hsla(var(--cor1), 25%, 90%, 1);
    color: white;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0.8em 2em 0.8em 2em;
    white-space: nowrap;
}

.compy .frm1.drk1 .comando {
    color: inherit;
}

/* Config no .tf1 do pai: #pai .tf1 i (Recurso) pinta i dos botões;
   .frm1.drk1 a pinta o texto de a.comando. */
.compy .frm1 .frm1.drk1 .comando,
.compy .frm1 .frm1.drk1 a.comando {
    color: hsla(0, 0%, 100%, 0.8);
}

.compy .frm1 .frm1.drk1 .comando.bt2,
.compy .frm1 .frm1.drk1 .comando.bt3,
.compy .frm1 .frm1.drk1 a.comando.bt2,
.compy .frm1 .frm1.drk1 a.comando.bt3 {
    color: white;
}

.compy .frm1 .frm1.drk1 .comando i,
.compy .frm1 .frm1.drk1 h1 i {
    color: inherit !important;
}

.compy .comando.bt2,
.compy .cssComando3.bt2 {
    /* salvar */
    background-color: hsla(120, 25%, 40%, 1);
}

.compy .comando.lr1 {
    float: right;
    user-select: none;
}

.compy .comando i {
    font-size: 1.2em;
}

.compy a.comando:hover {
    text-decoration: none;
}

.compy .comando:hover,
.compy .comando:focus {
    opacity: 0.85;
}

/* cssComando1 ****************************************************************/

.compy .cssComando1 {
    color: hsla(var(--cor1), 25%, 40%, 1);
    cursor: pointer;
    border-radius: 2px;
}

.compy .frm1.drk1 .cssComando1 {
    color: hsla(var(--cor1), 25%, 60%, 1);
}

.compy .cssComando1.menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .cssComando1 .menuDropDown {
    max-width: 25vw;
    font-size: 0.8em;
}

/* cssComando2 ****************************************************************/

.compy .cssComando2 {
    border-radius: 2px;
    cursor: pointer;
    color: hsla(var(--cor1), 25%, 30%, 1);
    user-select: none;
    white-space: nowrap;
    padding: 1em 0.5em 1em 0.5em;
    text-align: left;
    list-style: none;
}

.compy .cssComando2.menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

/* cssComando3 ****************************************************************/

.compy .cssComando3 {
    background-color: transparent;
    border: 1px dotted rgba(127, 127, 190, 0.5);
    border-radius: 2px;
    color: hsla(var(--cor1), 25%, 40%, 1);
    cursor: pointer;
    display: inline-block;
    margin: 0 0 0.2em 0;
    /*largura de um espaço*/
    padding: 0.7em 1.5em 0.7em 1.5em;
    text-align: center;
    white-space: nowrap;
}

.compy .frm1.drk1 .cssComando3 {
    border: 1px dotted rgba(255, 255, 255, 0.25);
    color: inherit;
}

.compy .cssComando3:hover,
.compy .cssComando3:focus,
.compy .cssComando3:active {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    color: white;
}

.compy a.cssComando3:hover,
.compy a.cssComando3:focus,
.compy a.cssComando3:active {
    text-decoration: none;
}

.compy .comando.bt3,
.compy .cssComando3.bt3 {
    background-color: hsla(20, 100%, 65%, 1);
    color: white;
}

/* mn1 menu principal *********************************************************/

.compy .mn1 {
    background-color: hsla(var(--cor1), 100%, 90%, 1);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 5px -1px hsla(0, 0%, 0%, 0.25)
}

.compy .mn1>tbody>tr>td {
    color: hsla(var(--cor1), 25%, 40%, 1);
    cursor: pointer;
    font-weight: bold;
    padding: 1.5em 0.6em 0.6em 0.6em;
    text-align: center;
    user-select: none;
    white-space: nowrap;
}

.compy .mn1>tbody>tr>td.menuSelecionado {
    box-shadow: none;
}

.compy .mn1>tbody>tr>td>i {
    font-size: 3em;
}

.compy .mn1 .menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border-radius: 2px;
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .mn1 td.bts1 {
    margin-top: 1em;
}

/* mn2 ************************************************************************/

.compy .mn2 {
    background-color: hsla(var(--cor1), 100%, 90%, 1);
    display: none;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 5px -1px hsla(0, 0%, 0%, 0.25);
    position: relative;
    z-index: 0;
}

.compy .mn2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(var(--cor1), 50%, 40%, 0.1);
    z-index: -1;
}

.compy .mn2 td.bts1 {
    margin-top: 1em;
}

/* mn3 ************************************************************************/

.compy .mn3 {
    background-color: rgba(127, 127, 190, 0.25);
}

/* cssMenu2 *******************************************************************/

.compy .cssMenu2 {
    cursor: pointer;
    color: hsla(var(--cor1), 25%, 30%, 1);
    user-select: none;
    white-space: nowrap;
    line-height: 2em;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

.compy .cssMenu2.menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border-radius: 2px;
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .cssMenu2>* {
    font-size: 0.9em;
    font-weight: bold;
}

.compy .cssMenu2 .menuDropDown {
    margin-left: -20px;
    text-align: left;
}

.compy .cssMenu2 img {
    vertical-align: bottom;
}

/* cssMenu3 *******************************************************************/

.compy .cssMenu3 {
    cursor: pointer;
    color: hsla(var(--cor1), 25%, 30%, 1);
    user-select: none;
    white-space: nowrap;
    font-size: 1.2em;
    padding: 1em;
    vertical-align: middle;
}

.compy .cssMenu3.menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border-radius: 2px;
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .cssMenu3>* {
    font-size: 0.8em;
    font-weight: bold;
}

/* mn4 ************************************************************************/

.compy .mn4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    background-color: rgba(220, 220, 255, 0.95);
    /* igual .mn1 */
}

.compy .mn4 .menuAtivo {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border-radius: 2px;
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .mn4o {
    display: inline-block;
    text-align: center;
}

.compy .mn4o.menuAtivo>div {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    border-radius: 2px;
    color: hsla(var(--cor1), 0%, 100%, 0.9);
}

.compy .mn4o>div {
    color: rgb(77, 77, 140);
    cursor: pointer;
    padding: 1.5em 0 0.6em 0;
}

.compy .mn4o>div>i {
    font-size: 3em;
}

.compy .mn4b {
    left: 0;
    height: 100%;
    position: absolute;
    top: 6.25em;
    width: 100%;
    box-sizing: border-box;
}

/* menuDropDown ***************************************************************/

.compy .menuDropDown {
    background-color: hsla(var(--cor1), 100%, 90%, 1);
    border: 0.2em solid hsla(var(--cor1), 25%, 90%, 1);
    border-radius: 2px;
    box-shadow: 0.1em 0.1em 0.3em hsla(0, 0%, 0%, 0.5), 0 0 0.5em hsla(var(--cor1), 25%, 90%, 1) inset;
    font-weight: bold;
    padding: 20px;
    z-index: 5;
}

.compy .frm1.drk1 .menuDropDown {
    background-color: hsla(var(--cor1), 20%, 20%, 1);
    border: 0.2em solid hsla(var(--cor1), 25%, 40%, 1);
    box-shadow: 0.1em 0.1em 0.3em hsla(0, 0%, 0%, 0.5), 0 0 0.5em hsla(var(--cor1), 25%, 40%, 1) inset;
}

.compy .menuDropDown a {
    display: inline-block;
    margin: 5px;
    padding: 0.8em;
    user-select: none;
}

.compy .menuDropDown st {
    /*subtítulo dos menus*/
    border-top: 1px white solid;
    color: #008;
    cursor: default;
    display: block;
    padding: 5px;
    margin: 5px;
}

.compy .tctf:not(.tstf) thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: hsla(var(--cor1), 100%, 90%, 1);
}

.compy .frm1.drk1 .tctf:not(.tstf) thead {
    background-color: hsla(var(--cor1), 20%, 20%, 1);
}

.compy .tctf:not(.tstf) thead tr:last-child {
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.25);
}

.compy .btop,
.compy .bbottom {
    opacity: 0.1;
    position: fixed;
    transition: opacity 1s ease;
    /* Acima do cabeçalho sticky do CompGrid (z-index 3) e thead tctf. */
    z-index: 5;
}

.compy .btop {
    top: 0;
}

.compy .bbottom {
    bottom: 0;
}

.compy .btop:hover,
.compy .bbottom:hover {
    background-color: white;
    box-shadow: 0 0 1em black;
    transition: opacity 0s;
    opacity: 1;
}

.compy .btop:hover {
    padding-bottom: 0.25vw;
}

.compy .bbottom:hover {
    padding-top: 0.25vw;
}

.compy .frm1.drk1 .ms1 tbody,
.compy .frm1.drk1 .mac1 tbody {
    /* multi select e multi auto complete  */
    background-color: rgba(255, 255, 255, 0.1);
}

.compy .ft1 {
    /* flutuante */
    position: absolute;
}

.compy .adm1 * {
    color: blue;
}

.compy .cc1 {
    display: flow-root;
    padding-bottom: 150vh;
}

.compy .developer * {
    color: darkgray !important;
}

.compy .ler {
    padding: 2px 20px 2px 20px;
}

.compy .cs1,
.compy .cs1 select {
    /* campo de seleção */
    width: 100%;
    box-sizing: border-box;
}

.compy .ac1 {
    /* auto complete */
    width: 100%;
    box-sizing: border-box;
}

.compy .ml1 input {
    /* multi like*/
    width: 100%;
    box-sizing: border-box;
}

.compy .visivel {
    display: block !important;
}

.compy .ir1 {
    /* icone da referência */
    min-width: 100px;
    box-sizing: border-box;
}

.compy .ir1 img {
    /* icone da referência */
    max-width: 100px;
    max-height: 100px;
}

.compy .ms1 select {
    /* multi select */
    width: 100%;
    box-sizing: border-box;
}

.compy .ms1 tfoot,
.compy .mac1 tfoot {
    /* multi select e multi auto complete */
    background-color: inherit;
}

.compy .ms1 tbody,
.compy .mac1 tbody {
    /* multi select e multi auto complete  */
    background-color: rgba(255, 255, 255, 0.6);
}

.compy .mon1 {
    /* multi select e multi auto complete - nome */
    padding: 0 10px 0 10px;
    vertical-align: middle;
}

.compy .mob1 {
    /* multi select e multi auto complete - botão */
    float: right;
}

.compy .mob1 a {
    /* multi select e multi auto complete - botão */
    padding: 4px 15px 4px 15px;
}

.compy .riscado {
    text-decoration: line-through;
}

.compy .w1,
.compy .w25,
.compy .w25w,
.compy .w50,
.compy .w50w,
.compy .w75,
.compy .w75w,
.compy .w100,
.compy .w100w,
.compy .w125,
.compy .w125w,
.compy .w150,
.compy .w150w,
.compy .w175,
.compy .w175w,
.compy .w200,
.compy .w200w,
.compy .w250,
.compy .w250w,
.compy .w300,
.compy .w300w,
.compy .w400,
.compy .w400w,
.compy .w500,
.compy .w500w,
.compy .w800,
.compy .w800w,
.compy .w900,
.compy .w900w,
.compy .w1000,
.compy .w1000w {
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.compy .w1 {
    min-width: 100%;
}

.compy .w25 {
    min-width: 25px;
}

.compy .w25w {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
}

.compy .w50 {
    min-width: 50px;
}

.compy .w50w {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

.compy .w75 {
    min-width: 75px;
}

.compy .w75w {
    width: 75px;
    min-width: 75px;
    max-width: 75px;
}

.compy .w100 {
    min-width: 100px;
}

.compy .w100w {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

.compy .w125 {
    min-width: 125px;
}

.compy .w125w {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
}

.compy .w150 {
    min-width: 150px;
}

.compy .w150w {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.compy .w175 {
    min-width: 175px;
}

.compy .w175w {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
}

.compy .w200 {
    min-width: 200px;
}

.compy .w200w {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

.compy .w250 {
    min-width: 250px;
}

.compy .w250w {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}

.compy .w300 {
    min-width: 300px;
}

.compy .w300w {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.compy .w400 {
    min-width: 400px;
}

.compy .w400w {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
}

.compy .w500 {
    min-width: 500px;
}

.compy .w500w {
    width: 500px;
    min-width: 500px;
    max-width: 500px;
}

.compy .w800 {
    min-width: 800px;
}

.compy .w800w {
    width: 800px;
    min-width: 800px;
    max-width: 800px;
}

.compy .w900 {
    min-width: 900px;
}

.compy .w900w {
    width: 900px;
    min-width: 900px;
    max-width: 900px;
}

.compy .w1000 {
    min-width: 1000px;
}

.compy .w1000w {
    width: 1000px;
    min-width: 1000px;
    max-width: 1000px;
}

.compy .destaque {
    font-size: 1.25em;
    font-weight: bold;
    padding-bottom: 0.5em;
    overflow-wrap: break-word;
}

.compy .ag1 {
    height: 800px;
    width: 1000px;
}

.compy .cl1>tbody>tr>td {
    height: 2em;
    width: 3em;
}

.compy .ia1 {
    color: #449;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0 3em 3em 3em;
    float: left;
    font-size: 0.8em;
    margin: 5px;
    padding: 10px;
    overflow: hidden;
    text-align: center;
}

.compy .centro {
    text-align: center;
}

.compy .esquerdaFlutuando {
    float: left;
}

.compy .direitaFlutuando {
    float: right;
}

.compy .cl1 {
    text-align: right;
}

/* .compy .cl2 {} */

.compy .cl3 {
    font-size: 0.5em;
}

.compy .etapa {
    margin-top: 5px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.05);
}


.compy .rps1,
.compy .rps1 .frm1 {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 0;
    bottom: 0;
    box-shadow: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 2;
}

.compy .dmr1.etapa td {
    padding: 10px;
}

.compy .dmr1.etapa td>* {
    padding-bottom: 10px;
}

.compy .ph1::placeholder {
    color: #BBB;
    font-family: 'WebHostingHub-Glyphs' !important;
}

.compy h1,
.compy h1 *,
.compy h2,
.compy h2 *,
.compy h3,
.compy h3 *,
.compy h4,
.compy h4 *,
.compy h5,
.compy h5 *,
.compy h6,
.compy h6 * {
    border: none;
    color: #008;
    margin-bottom: 0;
    text-transform: capitalize;
}

.compy h1,
.compy h2,
.compy h3,
.compy h4,
.compy h5,
.compy h6 {
    font-size: 1.5em;
    padding: 0 0 20px 5px;
}

.compy h1 i,
.compy h2 i,
.compy h3 i,
.compy h4 i,
.compy h5 i,
.compy h6 i {
    vertical-align: top;
}

.site .apresentacao h1,
.site .apresentacao h2,
.site .menu h1,
.site .menu h4,
.site .sistemas .cell>h2,
.site .metodologia h1,
.site .metodologia h3,
.site .tecnologia h1,
.site .tecnologia h3 {
    color: #7FBE7F;
    margin-bottom: 0;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 black;
}

.site .apresentacao h1,
.site .menu h1,
.site .metodologia h1,
.site .tecnologia h1 {
    font-size: 4em;
}

.site .apresentacao h2,
.site .sistemas .cell>h2 {
    font-size: 3.5em;
}

.site .metodologia h3,
.site .tecnologia h3 {
    font-size: 3em;
}

.site .menu h4 {
    font-size: 2.5em;
}

.compy input,
.compy select,
.compy textarea,
.compy .de77_editor {
    border: none;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    border-radius: 2px;
}

.compy select {
    height: 1.7em;
}

.compy select,
.compy input[type='checkbox'],
.compy input[type='radio'] {
    cursor: pointer;
}

.compy :disabled {
    cursor: not-allowed;
}

.lab .compy input,
.lab .compy select,
.lab .compy textarea,
.lab .compy .de77_editor {
    background-color: #FFC;
}

.compy .mapCanvas {
    top: 0;
    left: 0;
    width: 97vw;
    height: 90%;
}

.compy .mensagem {
    background-color: #FF0;
    bottom: 10px;
    box-shadow: 0 0 5px 5px #FF0;
    color: black;
    max-height: 50%;
    max-width: 50%;
    overflow: hidden;
    padding: 20px;
    position: fixed;
    right: 10px;
}

.compy .mensagem .icon-copy {
    cursor: pointer;
    display: inline-block;
    margin: -1em 0 0 -1em;
    padding: 1em;
    width: 40%;
}

.compy .mensagem .icon-copy>* {
    font-size: 0.75em;
}

.compy .mensagem .icon-circledelete {
    cursor: pointer;
    _display: inline-block;
    float: right;
    margin: -1em -1em 0 0;
    padding: 1em;
    text-align: right;
    width: 40%;
}

.compy .mensagem .icon-copy:hover,
.compy .mensagem .icon-circledelete:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.compy .mensagem .texto {
    max-height: calc(50vh - 3em);
    overflow-y: auto;
    padding: 0 2em 20px 2em;
}

.compy .mensagem .texto>li {
    padding-bottom: 1em;
}

.compy .mensagem .texto * {
    border-color: black;
}

.compy .menu h1,
.compy .menu h2,
.compy .menu h3,
.compy .menu h4,
.compy .menu h5,
.compy .menu h6,
.compy .tm1 h1,
.compy .tm1 h2,
.compy .tm1 h3,
.compy .tm1 h4,
.compy .tm1 h5,
.compy .tm1 h6 {
    margin-top: 0;
}

/* .compy .tm1 {} */

.compy .menuSelecionado {
    background-color: hsla(var(--cor1), 50%, 40%, 0.1);
}

.compy button {
    border-radius: 0;
}

.compy .hv1 {
    _background: none;
    border: 1px dotted rgba(127, 127, 190, 0.5);
    color: #4F4F8E;
    cursor: pointer;
    display: inline-block;
    margin: 0.1em;
    opacity: 0.2;
    padding: 0.7em 1.5em 0.7em 1.5em;
    text-align: center;
    transition: all 0.5s ease;
}

.compy .hv1.ativo {
    opacity: 1;
    transition: none;
}

.compy .hv1:hover,
.compy .hv1:focus,
.compy .hv1:active {
    background-color: hsla(var(--cor1), 25%, 40%, 1);
    color: white;
    opacity: 1;
    text-decoration: none;
}

.compy .numero,
.compy .numero * {
    text-align: right;
}

.compy table td {
    vertical-align: top;
}

.compy textarea {
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.compy .dbc1 {
    display: table;
    /*para permitir o funcionamento do help e deslocar o gráfico corretamente*/
}

.compy .flex1 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.compy .flex1>div {
    flex: 1 1 auto;
}

.compy .flex1 .comando {
    text-align: center;
}

#scrolling {
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    background-color: white;
    border-left: 1px dashed black;
    display: none;
    /* Inicia escondido */
    z-index: 1000;
    /* Garante que fique acima de outros elementos da página */
}

#caixaContato .tcf1 {
    color: white;
}

.compy .rps2 {
    display: block;
    width: 100%;
}

/* O tbody é o container flexível de todas as <td> */
.compy .rps2>tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* todas as células da mesma linha terem a mesma altura */
    align-items: stretch;
}

.compy .rps2>tbody>tr {
    /* O <tr> não interfere na disposição dos <td> */
    display: contents;
}

/* Cada <td> ocupa apenas o espaço necessário */
.compy .rps2>tbody>tr>td {
    /* conteúdo alinhado no topo */
    align-items: flex-start;
    box-sizing: border-box;
    /* Cresce, encolhe, largura natural */
    flex: 1 1 auto;
    _min-width: 0;
    /* altura automática */
    height: auto;
    /* largura automática conforme conteúdo */
    width: auto;
    word-break: break-word;
    white-space: normal;
    min-width: auto;
}

.compy .rps2>tbody>tr>td.ww1 {
    /* ocupa toda a linha */
    flex-basis: 100%;
}


/** crd1 - Card ***************************************************/

.compy .rps2>tbody>tr>td.crd1 {
    background-color: hsla(var(--cor1), 100%, 95%, 1);
    padding: 10px;
}

.compy .rps2>tbody>tr>td.crd1.w150 {
    min-height: 150px;
    width: 150px;
}

.compy .frm1.drk1 .rps2>tbody>tr>td.crd1 {
    background-color: hsla(var(--cor1), 20%, 25%, 1);
}

body.fnd1:before {
    content: '';
    background-attachment: fixed;
    background-position: bottom center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}