/* ------------------------------ fonts ------------------------------ */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../../lib/fonts/roboto-v50-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../lib/fonts/roboto-v50-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../../lib/fonts/roboto-v50-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../../lib/fonts/roboto-v50-latin_latin-ext-500.woff2') format('woff2');
}

/* ------------------------------- colors ---------------------------------------- */
:root {
  /* gray scale */
  --cgrayborder: #e5e5e5;
  --cgraylite: #f5f5f5;
  --cgraymed: #e5e5e5;
  --cgraydark: #777;
  --cgraytext: #222;

  /* blues */
  --cbluelite: #399CE6;
  --cbluevisio: #1566a4;
  --cbluedark: #073d63;
  --cblueaux: #0344a4;

  --cbluecotacao_dark : rgba(21, 102, 164, 1);
  --cbluecotacao_dark2: rgba(21, 102, 164, 0.8);
  --cbluecotacao_dark3: rgba(21, 102, 164, 0.7);
  --cbluecotacao_dark4: rgba(21, 102, 164, 0.6);
  --cbluecotacao_dark5: rgba(21, 102, 164, 0.5);

  /* reds */
  --credlite: #ff967a;
  --credmed: #fa8072;
  --creddark: #dd0000;

  /* greens */
  --cgreenlite: #3cb371;
  --cgreenmed: #228b22;
  --cgreendark: #006400;

  /* oranges */
  --corange: #d49512;
  --corangelite: #ffa500;
  --corangemed: #ff7f50;
  --corangedark: #ff8c00;

  /* prospect / client states */
  --csuspectlite: #fff3e0;
  --cprospectlite: #e3f2fd;
  --cleadlite: #e8daef;
  --coportunidadelite: #fcf3cf;
  --cclientelite: #e8f5e9;

  --csuspect: #e65100;
  --cprospect: #0d47a1;
  --clead: #7d3c98;
  --coportunidade: #f39c12;
  --ccliente: #1b5e20;
}

/* ------------------------------ basic reset ---------------------------------- */
* {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; }
b { font-weight: 500 !important; }
a, a:visited { color: var(--cbluevisio); cursor: pointer; }

/* ------------------------------ inputs / forms ------------------------------------ */
input[type="text"], input[type="number"], select {
  border: 1px solid #aaa;
  padding: 4px;
  height: 24px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}
select {
  background-color: #fff;
  padding: 4px 4px 3px 4px;
}
input[type="text"].required, input[type="number"].required, select.required {
  border: 1px solid #333;
  font-weight: 400;
}
.input-date { background: url('../../lib/images/icon_calendar.png') no-repeat 71px 2px; width: 95px; background-color: #fff !important; padding: 5px 0 5px 2px !important; }
.input-time { background: url('../../lib/images/icon_clock.png') no-repeat 59px 1px; width: 85px; }
.input-money { background: transparent url('../../lib/images/bg_cifrao.png') no-repeat 1px 5px; text-align: right; }
.input-valor, input.val { text-align: right; }

.datefield { width: 80px; }
.campo_show { }
.campo_hide { display: none; }

input[type="text"] { text-transform: uppercase; }
input[type="text"].noupper { text-transform: none !important; }
input[type="text"].lowercase { text-transform: lowercase !important; }
input[type="text"].text-default { text-transform: none;}
input[type="text"].num, input[type="number"].num { width: 120px; text-align: right; }

.decimal, .decimal0, .decimal1, .decimal2, .decimal3, .decimal4, .decimal5, .decimal6 { text-align: right; }

.input-error { border-color: red; border-width: 1px; background-color: #ffc; }
.container-error { background-color: #ffa; outline: 6px solid #ffa; } 
.validate_tag_error { background-color: #ffc; color: var(--corangedark); padding: 8px; margin-bottom: 6px; width: 90%; display: none; }
.validate_tag_error i { font-size: 18px; margin-right: 10px; }


/* ------------------------------ main layout ----------------------------------- */
.layout-header { width: 100%; background-color: var(--cgraymed); height: 42px; }
.head-logo { float: left; text-align: left; padding: 2px 0 0 7px; }
.head-msgs { float: left; display: none; }
.head-user { float: right; text-align: right; font-weight: normal; padding: 15px 15px 0 0; color: #888; }
.head-user a { margin-left: 15px; }

#pagina { float: left; width: 99%; padding-left: 45px; overflow-x: hidden; overflow-y: auto; }
.pagina-content { margin-left: 25px; position: relative; }
.pagina-content-overlay {
    position: absolute;
    inset: 0;                /* top:0 right:0 bottom:0 left:0 */
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(1px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

textarea { padding: 4px; resize: none; }

h1 { display: inline-block; font-size: 18px; font-weight: 500; margin: 0; padding: 4px 0; }
h2 { display: block; font-size: 12px; font-weight: normal; margin: 0; padding: 0; color: #777; }
h4 { padding: 0 2px; font-size: 11px; font-weight: normal; text-align: left; background-color: var(--cgraylite); color: var(--cbluedark); border-top: 1px solid #858a92; border-bottom: 1px solid #858a92; margin: 0 0 5px 0; }
h4.h-title { padding: 6px 2px !important; font-weight:500 !important; background-color:var(--cgraymed); color:var(--cgraytext) !important; font-size: 14px; border-top:0; border-bottom:0; }
h4 span { display: inline-block; width: 300px; font-size: 14px; padding: 5px 0; }
h4 a.h4btn { display: inline-block; float: right; margin-left: 3px; padding: 7px 14px 6px 14px; background-color: #858a92; color: #fff; text-decoration: none; }
h4 a.h4btn i.fa { font-size: 14px; padding-right: 4px; }
h4 a.h4btn:hover { background-color: #205899; }
h4 a.h4btn.red:hover { background-color: #cc0000; }
h4 a.h4btn.green:hover { background-color: #009900; }
h5 { color: #05f; border-bottom: 1px dotted #05f; padding: 4px 0; font-weight: normal; margin: 0 0 8px 0; font-size: 14px; }
h6 { padding: 2px 0; margin: 6px 0 3px 0; font-size: 20px; color: var(--cbluevisio); border-bottom: 1px dotted var(--cbluevisio); font-weight: 500; }

.module-header { font-weight: normal; padding: 10px 0 5px 25px; border-bottom: 1px solid var(--cgrayborder); margin-bottom: 5px; }
.module-header a { float: right; line-height: 20px; display: inline-block; color: var(--cbluevisio); font-size: 12px; padding: 4px 14px; margin-left: 3px; }
.module-header a i { font-size: 18px; line-height: 20px; margin-right: 6px; }
.module-header a:hover { color: var(--cbluedark); background-color: var(--cgraylite); }
.module-header #top-buttons, .module-header #top-loading { float: right; display: none; }

div.clear { margin:0 !important; float:none !important; clear: both; height: 0; }

/* ------------------------------ nav / menu ------------------------------ */
nav {
  float: left;
  width: 45px;
  height: 100%;
  background-color: var(--cgraydark);
  color: #fff;
  z-index: 20;
  position: fixed;
  transition: .3s;
}
nav:hover { background-color: #205899; }
nav span, nav .off, nav ul.nivel1 > li.hide > ul.nivel2 { display: none; }
nav .fa { font-size: 20px; padding-left: 2px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }

nav ul.nivel1 { z-index: 99; position: absolute; transition: .5s; }
nav ul.nivel1 > li { margin-top: 15px; }
nav .nivel1 a { display: block; color: #fff; padding: 10px; text-decoration: none; }
nav ul.nivel1 > .show { background-color: #77f; width: 325px; }
nav .nivel1.show span { display: inline-block; padding-left: 37px; font-weight: 500; font-size: 12px; }

nav ul.nivel1 > li > ul.nivel2 > li { font-size: 12px; font-weight: 500; padding: 5px 10px; background-color: rgba(0,0,0,0.6); }
nav ul.nivel1 > li > ul.nivel2 > li > a { padding: 5px 10px; }
nav ul.nivel1 > li > ul.nivel2 > li:hover { background-color: rgba(0,0,0,0.8); }
nav ul.nivel1 > li.show > ul.nivel2 { display: block; z-index: 999; position: absolute; margin: 0 0 0 45px; width: 280px; }


/* --------------------------- status -------------------------------- */
.naoatendido {
    --status-bg: #FFF8E1;
    --status-color: #FBC02D;
}

.atendparcial {
    --status-bg: #E3F2FD;
    --status-color: #42A5F5;
}

.atendtotal {
    --status-bg: #E0F2F1;
    --status-color: #26A69A;
}

.bloqueado {
    --status-bg: #FFEBEE;
    --status-color: #EF5350;
}

.suspenso {
    --status-bg: #FFF3E0;
    --status-color: #FB8C00;
}

.romaeneado {
    --status-bg: #E0F7FA;
    --status-color: #00ACC1;
}

.erro {
    --status-bg: #FDECEA;
    --status-color: #D32F2F;
}

.cancelado {
    --status-bg: #F5F5F5;
    --status-color: #757575;
}

.orc_aberto {
    --status-bg: #F3E5F5;
    --status-color: #8E24AA;
}

.orc_cancelado {
    --status-bg: #EFEBE9;
    --status-color: #8D6E63;
}

.pallete-status-row td {
    padding: 12px 4px !important;
    background: var(--status-bg);
}

.pallete-status-row td:first-child {
    box-shadow: inset 4px 0 0 var(--status-color);
    padding-left: 8px !important;
}

.pallete-status-row.drilldown td { background: #fff !important; }

.status-cell {
    background: var(--status-bg);
    /* box-shadow: inset 4px 0 0 var(--status-color); */
    border-left: 2px solid var(--status-color);
    padding-left: 8px !important;
}