/* organize */
.search-box { border-top:1px solid var(--cgraylite); padding: 0 0 12px 25px;  background-color: var(--cgraylite); border-bottom: 1px solid var(--cgrayborder); margin-bottom: 12px; }
.search-box.bordernone { margin-top:-5px; }

.search-box .col.left { float: left; width: 91%; padding: 0; margin: 0; }
.search-box .col.right { float: right; padding: 12px 12px 0 0; margin: 0; text-align: right; }
.search-box .col.right.row2{ margin-top:30px;}
.search-box .col.right.row3{ margin-top:60px;}
.search-box .col.right a.btn {}
.search-box .col.right a.btn i { font-size: 20px; }

.search-box a.busca{padding:6px 10px;}
.search-box #ms-list-1, #ms-list-2, #ms-list-3, #ms-list-4, #ms-list-5, #ms-list-6, #ms-list-7, #ms-list-8 {
	position: absolute;
    float: none;
    margin: 0;
}
.search-box div { float: left; margin: 12px 12px 3px 0px; }
.search-box div.row{ margin:0; width:100%; } 
.search-box label { display: block; color: #444; margin: 0px; padding: 1px; font-size: 11px; font-weight: 500; }
.search-button-small { background-color: #28f; color: #fff; display: block; padding: 5px; }
.search-button-small:hover { background-color: #05f; }
.search-button-small i { margin: 0px; font-size: 14px; }
.search-box input[type='text'] { font-size: 12px; padding: 3px; } 
.search-box select { font-size: 12px; padding: 2px; }

.toolbox { background-color: #f3f8fe; border: 1px solid #c6d7d7; padding: 10px; margin: 10px 0px; }
.toolbox a { display: inline-block; text-align: center; padding: 0px 10px; margin-right: 10px; }
.toolbox a i { display: block; font-size: 24px; margin-bottom: 4px; }

.search-box .div_btn { margin-top:26px;}
.search-box .div_multiple { width: 180px; }

#flash { display: flex; align-items: center; gap: 15px; padding: 15px 20px; }
#flash i { margin-top: -5px; font-size: 24px; }
#flash span.info { font-weight: 500; }
#flash a { padding: 6px 18px; border-radius: 3px; margin-left: 50px; font-size: 11px; transition: background-color 0.3s ease; }

#flash.success { background-color: #eaf7d9; color: #444; }
#flash.success i { color: #090; } 
#flash.success a { background-color: var(--cbluelite); color: #fff; }
#flash.success a:hover { background-color: var(--cbluevisio); }

/* same as flash button */
.btnB { display: inline-block; padding: 6px 18px; border-radius: 3px; font-size: 11px; transition: background-color 0.3s ease; background-color: var(--cbluelite); color: #fff; }
.btnB i { font-size: 14px; padding-right: 5px; }
.btnB:hover { background-color: var(--cbluevisio); }

/* ------------------------------ layout elements ------------------------------------------------ */
.no-result, .no-results { font-size: 14px !important; color: #888 !important; padding: 30px !important; text-align: center !important;  }

/*
.botao { padding: 3px 5px 4px 5px; display: inline-block; margin-top: 1px;  }
.botao i.fa { font-size: 16px; }
.botao span { padding: 0px 10px; }
.botao.green { background-color: var(--cgreenmed); color: #fff; }
.botao.green:hover { background-color: var(--cgreendark); }
.botao.blue { background-color: var(--cbluevisio); color: #fff; }
.botao.blue:hover { background-color: var(--cbluedark); }
.botao.red { background-color: var(--credmed); color: #fff; }
.botao.red:hover { background-color: var(--creddark); }
.botao.orange { background-color:var(--corangemed); color: #fff; }
.botao.orange:hover { background-color: var(--corangedark); }
.botao.icone { width: 24px; text-align: center; }
*/

.botao { padding: 5px 5px 5px 5px; display: inline-block; margin-top: 1px; border-radius: 3px; }
.botao i.fa { font-size: 16px; }
.botao span { padding: 0px 10px; }
.botao.green { color: var(--cgreendark); }
.botao.green:hover { background-color: var(--cgreendark); color: #fff; }
.botao.blue { color: var(--cbluevisio); }
.botao.blue:hover { background-color: var(--cbluevisio); color: #fff; }
.botao.red { color: var(--credmed); }
.botao.red:hover { background-color: var(--creddark); color: #fff; }
.botao.orange { color:var(--corangemed); }
.botao.orange:hover { background-color: var(--corangedark); color: #fff; }
.botao.icone { width: 24px; text-align: center; }

.botao-aux { padding: 8px 16px; display: inline-block; border-radius: 3px; background-color: var(--cbluelite); color: #fff; transition: 0.4s; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.botao-aux:hover { background-color: var(--cbluevisio); }


.botao.border { border: 1px solid #000; margin: 0px 2px; }
.botao.imagem { border: 1px solid #888; }

.icon-blue { font-size: 16px; color #009 !important; }
.icon-red { font-size: 16px; color #a00 !important; }


.fs_default { border: 1px dotted var(--cbluedark); padding: 6px 12px; }
.fs_default.fs-margin-top{ margin:7px 0 0 0;}
.fs_default legend, .fs_slim legend { color: var(--cbluedark); padding: 0px 12px 0px 6px; font-size: 12px; }
.fs_default legend.black, .fs_slim legend.black { color: var(--cgraytext); padding: 0px 12px 0px 6px; font-size: 12px; }

.fs_default .linha { padding: 8px 0px; margin: 0px 8px; }
.circle { width: 10px; height: 10px; margin: 0px 5px; border-radius: 50%; border: 0px; }
.fs_slim { border: 1px dotted #205899; padding: 6px 12px 12px 6px; margin-bottom: 6px; }
.fs_slim div.cell { margin: 0px 1px 0px 0px; }
.fs_slim div.cell a.botao { padding-bottom: 4px !important; }


.fs-campanha { border: 1px dotted #205899; padding: 6px 12px; float: left; min-width: 160px; min-height: 220px; line-height: 20px; margin: 3px 15px 5px 0px; }
.fs-campanha legend { color: #205899; padding: 0px 15px 0px 5px; font-size: 14px; }
.fs-campanha span { margin-right: 20px; }

#htabs { border-bottom: 1px solid var(--cbluevisio); height: 31px; }
.htabs.no-margin{ margin:0; padding:0;}
#htabs a { color: var(--cgraydark); font-weight: normal; }
#htabs a:hover { color: var(--cbluedark); border-color: var(--cbluedark); border-bottom: 0; }
#htabs a.selected { border-color: var(--cbluevisio); background-color: var(--cbluevisio); color: #fff; padding-bottom: 6px; }

.required { color: #000; font-weight: 500; }
.required_error { color: #f00; font-weight: 500; }

.formulario { padding: 15px 0px; min-height: 380px; }

.cell { float: left; margin: 0px 24px 12px 0px; }
.cell.cell-margin-right-btn { margin-right:1px; } 
.cell label { display: block; color: #555; padding-bottom: 2px; font-size: 11px; }
.cell div.inline-error { color: #c00; font-size: 9px; }
.cell.cell-btn-padding{ padding:14px 0 0 0 ;}

.cliente-status { font-size: 11px; color: #696d73; padding: 7px 9px; margin: 0px 3px 0px 0px; float: left; width: 115px; }
.cliente-status.amarelo { background-color: #ffa; }
.cliente-status.laranja { background-color: #ffdaaf; }

.formulario-slim { padding: 15px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; min-height: 210px; }
.formulario-slim input[type='text'], .formulario-slim select { font-size: 14px; padding: 4px; }
.formulario-slim div { float: left; margin: 0px 20px 10px 0px; }
.formulario-slim label { display: block; color: #333; }

.form-aux { padding: 10px; margin: 8px 0px; background: var(--cgraylite); border: 1px solid #c6d7d7; }
.form-aux input[type='text'], .form-aux select { padding: 5px 4px; } 

.aprovacao_itens { margin: 5px 0px; }

.analise_rentabilidade { padding: 15px 30px 5px 15px; /*border: 1px dotted #55a;*/ background-color: var(--cgraymed); left: 70px; bottom: 5px; width: 90%; /* position: absolute; */ }
.analise_rentabilidade div { float: left; margin: 0px 24px 12px 0px; }
.analise_rentabilidade label { display: block; color: var(--cbluedark); padding-bottom: 3px; }
.analise_rentabilidade input[type='text'] { padding: 4px; text-align: right; width: 110px; font-weight: 500; border-color: var(--cbluedark); background: #fff url('../../lib/images/bg_cifrao.png') no-repeat 1px 4px; }


.label_erro{ color:red !important; }
input.campo_erro{ border: 1px solid red !important; }
.campo-invalido{ background-color: rgb(255, 255, 204);border: 2px solid #dc3545 !important;}


/* ------------------------------ home: mover ------------------------------------------------------------------------------------------ */
.home-scroll { float: right; min-width: 68.2%; max-width: 75%; max-height: 308px; overflow-x: hidden; overflow-y: auto; padding: 0px; border: 1px solid var(--cbluevisio); margin-bottom: 15px; }
.home-scroll h6 { background-color: var(--cbluevisio); margin: 0px; border-bottom: 0px; padding: 6px; color: #fff; font-size: 14px; }

.crmscroll { scrollbar-width: thin; scrollbar-color: var(--cgraymed) var(--cgraylite); }
.crmscroll::-webkit-scrollbar { width: 10px; }
.crmscroll::-webkit-scrollbar-track { background: var(--cgraylite); }
.crmscroll::-webkit-scrollbar-thumb { background-color: var(--cgraymed); border-radius: 20px; border: 1px solid var(--cgraymed); }


.agenda-row { padding: 9px 6px; color: var(--cgraytext); font-size: 10px!important; }
.agenda-row.one { background-color: #fff; }
.agenda-row.two { background-color: var(--cgraylite); }
.agenda-row span { display: inline-block; padding-right: 4px; font-size: 11px; }
.agenda-row span.icone { float: right; font-size: 16px; }


.paginacao { margin: 20px 0px; background-color: var(--cgraylite); padding: 4px 0px; }
.paginacao p { display: block; float: left; margin: 0px; padding: 6px 0px; color: var(--cbluevisio);; width: 200px; }
.paginacao span { display: block; float: right; margin: 0px; padding: 0px; text-align: right; }
.paginacao span a { display: inline-block; padding: 6px 8px; border: 1px dotted var(--cgraytext); color: var(--cgraytext); margin-left: 10px; text-align: center; min-width: 32px; }
.paginacao span a.current { border: 1px solid #858a92; background-color: var(--cbluevisio); color: #f3f8fe; font-weight: 500; }


#DIV_POSTIT { display: none; background-color: #ffc; padding: 10px; line-height: 180%; margin-bottom: 10px; }
.lista_motivos_bloqueio { color: #fff; background-color: #f33 /*var(--credmed)*/; padding: 10px; font-weight: 500; margin-top: 10px; line-height: 150%; }
.lista_motivos_bloqueio a { color: #ff5; border: 1px solid #fff; padding: 5px; margin-top: 10px; }


.smallfields input[type="text"] { font-size: 12px; padding: 4px 2px !important; }



/* ------------------------------ endereços : mover ---------------------------------------------- */
.endereco_status { padding-top: 15px; font-size: 13px; }
.endereco_status i { font-size: 18px; padding-right: 5px; }
.endereco_status i.S { color: #090; }
.endereco_status i.N { color: #777; }

.div_endereco_valido { background-color: #7f9; color: #030; font-size: 12px; margin-top: 6px; padding: 8px 24px; display: none; }
.div_endereco_valido i { color: #0b0; font-size: 16px; margin-right: 8px; }

.invalid_doc_field { background-color: #f00 !important; color: #fff; border-color: '#c00'; border-width: 2px; }
.invalid_doc_label { color: #c00; }


/* ------------------------------ buttons -------------------------------------------------------- */
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 8px 13px;
  font-size: 12px;
  line-height: 1.42857143;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-primary , .btn-primary:visited { color: #ffffff; background-color: var(--cbluevisio); }


.btn-default {
  color: #555;
  background-color: #fff;
  border-color: #ccc;
}

.btn-secondary, .btn-secondary:visited { background-color: #dfdfdf; color: #fff; }
.btn-secondary:hover { background-color: #acacac; }


/* ------------------------------ tables --------------------------------------------------------- */
table { border-spacing: 0px; border-collapse: collapse; }

.tbl-lista { width: 100%; }
.tbl-lista .loose > td, .tbl-lista .loose > th { padding: 12px 2px; } 

.tbl-lista th { padding: 6px 2px; text-align: left; background-color: var(--cbluevisio); color: #fff; font-weight: 400; font-size: 11px; }
.tbl-lista th.cinza { background-color: var(--cgraylite); color: var(--cbluedark); border-bottom: 1px solid var(--cgraydark); border-top: 1px solid var(--cgraydark); }
.tbl-lista th.h-title { background-color:var(--cbluedark); color: white; border-bottom: 1px dotted white; font-size: 12px; font-weight: 500; }

.tbl-lista th.h-center { text-align:center !important; }
.tbl-lista th.h-border { padding-left: 5px; border-right: 1px solid var(--cgraylite); }
.tbl-lista th.h-border-bottom { border-bottom: 1px solid var(--cgraylite); }

.tbl-lista td { padding: 4px 2px; color: var(--cgraytext); border-bottom: 1px solid #e5e7eb; font-size: 11px; font-weight: 300; }
/* .tbl-lista td { padding: 4px 2px; color: var(--cgraytext); border-bottom: 1px dotted var(--cgraydark); font-size: 11px; font-weight: 300; } */
.tbl-lista td.inativo { color: #696d73; }
.tbl-lista td.td-botoes { padding-left: 10px !important; padding-right: 0px !important; text-align: right; white-space: nowrap; }
.tbl-lista td.td-botoes a { margin-left: 10px; }
.tbl-lista a.botao { padding: 4px 5px; margin-left: 10px; }
.tbl-lista a.botao i.fa { font-size: 16px; }
.tbl-lista .th-botao { background-color: var(--cbluelite) }
.tbl-lista .th-botao a { color: #fff; }
.tbl-lista .th-botao a i.fa { font-size: 16px; padding: 0px 5px; }

.tbl-lista th.th-btn { text-align: right; border-left: 1px solid #fff; background-color: var(--cbluelite); padding: 2px 5px !important; white-space: nowrap; }
.tbl-lista th.th-btn:hover { background-color: var(--cbluedark); }
.tbl-lista th.th-btn a { color: #fff; display: block; padding: 8px 16px; }

.tbl-lista th.numero, .tbl-lista td.numero, .tbl-lista td.num, .tbl-lista th.num { text-align: right; padding-right: 10px; }
.tbl-lista th.num-rel, .tbl-lista td.num-rel { text-align: right; padding-right: 5px; }
.tbl-lista td.cifrao { background: url('../../lib/images/bg_cifrao.png') no-repeat 20px 3px; }

.tbl-lista caption, .tbl-lista td.subtitulo { padding: 6px 2px; font-weight: normal; text-align: left; background-color: var(--cbluevisio); color: #fff; border-top: 1px solid #858a92; }
.tbl-lista tr.row_inactive td { color: #bbb; }

.tbl-lista tr.row-total td {  background-color: var(--cgraylite); color: var(--cgraytext); border-bottom: 1px solid var(--cgraydark); border-top: 1px solid var(--cgraydark); font-weight: 500; }

.tbl-lista.tdloose td { padding: 6px 3px; }

.tbl-lista tfoot td, .tbl-lista tr.tfoot th { background-color: var(--cgraylite); color: #333; font-weight: 500; font-size: 11px; border-top: 1px solid #333; border-bottom: 1px solid #333; }

.tbl-loose td { padding: 3px; } 
.tbl-loose th { padding: 12px 3px !important; }

.tbl-zebra {}
.tbl-zebra > tbody > tr:nth-child(even) { background-color: var(--cgraylite); }

.tbl-hover {}
.tbl-hover > tbody > tr:hover /*, .tbl-zebra tr:hover*/ { background-color: var(--cgraymed) !important; }
.tbl-hover > tbody > td.no-results:hover { background-color: transparent; }

.total_geral { font-weight: 500; }

.tbl-drill { width: 100%; }
/* .tbl-drill tr.th_nivel_9 th { background-color: var(--cgraymed); } */

.tbl-drill.td_nivel_9, .tbl-drill.th_nivel_9 { font-size: 12px; }

.tbl-drill .td_nivel_5 { font-size: 11px; }
.tbl-drill tr.med th, .tbl-drill tr.med td { font-size: 11px; }

th.cinzadrill { background-color: var(--cgraylite); color: var(--cbluedark); border-bottom: 1px solid var(--cgraydark); border-top: 1px solid var(--cgraydark); padding: 2px; font-size: 11px; }

.tbl-drill-detalhe th { font-size: 11px; }
.tbl-drill-detalhe > tbody > tr:nth-child(odd), .tbl-drill-detalhe > tbody > tr:nth-child(odd):hover { background-color: #ffe; }
.tbl-drill-detalhe > tbody > tr:nth-child(even), .tbl-drill-detalhe > tbody > tr:nth-child(even):hover { background-color: #ffc; }
.tbl-drill-detalhe tr:hover { background-color: parent; }
.td-drill { padding: 0px; }

.tbl-drill-detalhe > td:nth-child(odd), .tbl-drill-detalhe >  td:nth-child(odd):hover { background-color: #ffe; }
.tbl-drill-detalhe > td:nth-child(even), .tbl-drill-detalhe > td:nth-child(even):hover { background-color: #ffc; }

.tr-no-hover:hover { background-color: transparent; }

.tbl-detalhe-small { font-size: 11px; }
.tbl-detalhe-small input[type="text"], .tbl-detalhe-small select { font-size: 11px; height: 20px; padding: 2px; }
.tbl-detalhe-small .med { width: 85px; }

.tbl-clientes-alt { border: 1px solid #858a92; margin-bottom: 20px; }
.tbl-clientes-alt th { border-top: 0px; background-color: #fef4fd; color: #797e84; }
.tbl-clientes-alt td { color: #444 !important; }

#tbl-lojas input[type="text"] { font-size: 11px; padding: 4px 2px; }

.div-footer-export { text-align: center; padding: 15px; }
.div-footer-export a { display: inline-block; width: 240px; text-align: center; padding: 10px 30px; text-decoration: none; border: 1px solid #009; color: #009; font-size: 13px !important; border-radius: 6px; }
.div-footer-export a i { font-size: 20px !important; }
.div-footer-export a:hover { background-color: #009; color: #fff; }

p.confirma { color: #205899; font-size: 18px; margin: 12px 0px; }

#tbl-produtos td { padding: 4px 4px 4px 0px; }
#tbl-produtos input[type="text"] { width: 95px; }
#tbl-produtos input[type="text"].den { width: 200px; }
#tbl-produtos input[type="text"].denwide { width: 600px; }
#tbl-produtos .val.med { width: 90px; }

#tbl-produtos .col-hide { display: none; }
#tbl-produtos .input_num_seq { border: 0px; padding: 4px 2px; font-weight: 500; text-align: center; width: 30px !important; background-color: var(--cgraylite); }

#tbl-produtos a.icon { font-size: 18px; padding: 0px 1px; margin-left: 3px; }
#tbl-produtos a.icon .fa-check-circle { font-size: 20px; }
#tbl-produtos .iblue { color: var(--cbluelite); }
#tbl-produtos .iblue:hover { color: var(--cbluevisio); }
#tbl-produtos .igreen { color: var(--cgreenlite); }
#tbl-produtos .igreen:hover { color: var(--cgreendark); }
#tbl-produtos .ired { color: var(--credmed); }
#tbl-produtos .ired:hover { color: var(--creddark); }
#tbl-produtos .iorange { color: var(--corangelite); }
#tbl-produtos .iorange:hover { color: var(--corangemed); }

.tbl-simple-form { }
.tbl-simple-form th, .tbl-simple-form td { padding: 6px 3px; }
.tbl-simple-form th { font-weight: normal; text-align: right; }
.tbl-simple-form .numero { text-align: right; width: 90px; }
.tbl-simple-form td.vspace { padding: 3px; font-size: 3px; }

.tbl-grid-aux { margin-bottom: 10px; }
.tbl-grid-aux th { font-size: 11px !important; text-align: center; border-right: 1px dotted #858a92; padding: 3px !important; }
.tbl-grid-aux td { border-right: 1px dotted #858a92; }
.tbl-grid-aux th.capt { border-bottom: 0px; text-align: center; }
.tbl-grid-aux input[type="text"] { font-size: 11px; width: 20px; }
.tbl-grid-aux input[type="text"].num { text-align: right; width: 50px; }

.anexo-add { margin-top: 50px; border: 1px solid #cfcfcf; display: none; /* position: fixed; left: 70px; bottom: 40px; */ }
.anexo-add p { padding: 6px 12px; }
.anexo-add p span { display: inline-block; width: 150px; text-align: right; padding-right: 5px; }
.anexo-add p.titulo { background-color: #cfcfcf; }
.anexo-add input { border: 1px solid #9c9c9c; min-width: 600px; padding: 5px; height: 32px; }

/* ------------------------ cotacao: mover para inline ------------------------------------------------ */
.bar_top { 
	padding:2px;
	display: flex;
    justify-content:start;
    align-items: center;
    font-weight: bold;
	margin: 5px 0;
	background-color: var(--cbluevisio);  }
	
td.subtitulo { font-size: 14px; font-weight: 500; }

.tr-valores-item, .tr-valores-item:hover { background-color: #ff0; }
.tr-valores-item td { padding: 5px; font-weight: 500; }
.div-valores-item { float: left; margin: 1px 20px 5px 5px; }
.div-valores-item label { display: block; font-weight: 500; margin-bottom: 2px; height: 17px; }
.div-valores-item input { font-weight: 500; text-align: right; }

/* ------------------------------ pedidos: mover para inline ------------------------------------- */
.ribbon-functions { margin: 10px 0px; text-align: center; background-color: #dfdfdf; }
.ribbon-functions .ribbon-title { background-color: #cecece; margin-bottom: 4px; padding: 10px; font-size: 16px; }
.ribbon-functions a { font-size: 14px; text-align: center; padding: 10px 20px; width: 180px; color: #fff; display: inline-block; margin: 10px 35px; }
.ribbon-functions a i { font-size: 16px; padding-right: 5px; }
.ribbon-functions a.xls { background-color: #0c0; }
.ribbon-functions a.pdf { background-color: #f70; }

/* ------------------------------ statistics ----------------------------------------------------- */
.stats-box { border: 1px solid var(--cbluedark); margin-bottom: 10px; }
.stats-box .box-head { background-color:  var(--cbluevisio); color: #fff; padding: 6px; }
.stats-box .box-body { padding: 6px; }

.mapa-totais { float: left; width: 400px; margin: 10px 7%; }
.mapa-totais .label { background-color: #1e91cf; color: #fff; font-size: 13px; padding: 6px 9px; }
.mapa-totais .value { background-color: #279fe0; color: #fff; padding: 12px 12px; }
.mapa-totais .value span { display: block; float: right; text-align: right; font-size: 22px; font-weight: 500; }
.mapa-totais i.fa { color: var(--cbluevisio); font-size: 32px; }

/* dashboard vendas */
#tbl-visao-geral { }
#tbl-visao-geral td.nivel1 { font-size: 12px; color: #000; }
#tbl-visao-geral .num { font-weight: 500; text-align: right; }

#tbl-visao-geral td.nivel2 { font-size: 10px; color: #444; }


/* ------------------------------ popups ferds - esses são bacanas e práticos ---------------------------------------------------------- */
#fade { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 98; background-color: rgba( 100, 100, 100, 0.8); display: none; }
#popup-default { width: 900px; min-height: 300px; margin: 10px auto; z-index: 99; border: 1px solid #205899; background: #fff; padding: 0px; }

#fade-large { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 58; background-color: rgba( 100, 100, 100, 0.8); display: none; }
#popup-large { width: 1250px; height: 80vH; margin: 5px auto; z-index: 59; border: 1px solid #205899; background: #fff; padding: 0px; }

#fade-small { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 102; background-color: rgba( 100, 100, 100, 0.8); display: none; }
#popup-small { width: 650px; min-height: 250px; margin: 20px auto; z-index: 103; border: 1px solid #205899; background: #fff; padding: 0px; }

#fade-modal { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 198; background-color: rgba( 100, 100, 100, 0.8); display: none; }
#popup-default-modal { width: 900px; min-height: 300px; margin: 10px auto; z-index: 199; border: 1px solid #085c9b; background: #fff; padding: 0px; }

.popup-title { background-color: #205899; color: #eef; padding: 8px 16px; }
.popup-title a { float: right; color: #eef; font-size: 12px; padding-top: 3px; }
.popup-title a i { font-size: 14px; padding-right: 4px; }
.popup-title b { font-weight: 500; }
.popup-title i.alert { margin-right: 8px; font-size: 16px; }
.popup-body { padding: 4px 8px 8px 8px; min-height: 200px; font-size: 12px; max-height: 490px; overflow-x: hidden; overflow-y: auto; position: relative; }

.popup-bg-icon { position: absolute; top: 50%; left: 50%; font-size: 180px !important; color: var(--corange); opacity: 0.15; filter: blur(3px); transform: translate(-50%, -50%); z-index: 110; pointer-events: none; }
.popup-error-list { padding-left: 20px; margin: 8px 0; z-index: 120; }
.popup-error-list li { margin-bottom: 4px; }

.popup-buttons { padding: 20px; border-top: 1px solid #085c9b; text-align: right; }
.popup-buttons a { background-color: #dfdfdf; padding: 8px 16px; }
.popup-buttons a i { font-size: 16px; padding-right: 4px; }
.popup-buttons a:hover { background-color: #205899; color: #fff; }

.popup-search { background: #f3f8fe; border-bottom: 1px solid #c6d7d7; padding: 12px 8px; margin-bottom: 6px; }
.popup-search div { float: left; margin: 3px 12px 6px 0px; }

.popup-error { color: var(--creddark); padding: 12px; }
.popup-error p.alert { color: #fff; background-color: var(--creddark); padding: 10px; }
.popup-error p.alert i { font-size: 20px; padding-right: 8px; }
.popup-error p.error-msg { line-height: 150%; margin: 3px 0 0 0; }

.tbl-popup-form { width: 100%; }
.tbl-popup-form th { text-align: right; font-weight: normal; padding: 6px 2px; }
.tbl-popup-form td { text-align: left; font-weight: 500; padding: 6px 2px; }
.tbl-popup-form td.td_btn { border: 1px solid #205899; padding: 6px; text-align: right; }
.tbl-popup-form input[type="text"] { font-weight: 500; width: 100px; }

/* login */
.pag_login input:-webkit-autofill,
.pag_login input:-webkit-autofill:hover, 
.pag_login input:-webkit-autofill:focus, 
.pag_login input:-webkit-autofill:active  {-webkit-box-shadow: 0 0 0 30px white inset !important; }

.pag_login input[type='button'], input[type='submit'] {  padding: 5px 20px; border: 1px solid var(--cbluedark); background-color: var(--cbluevisio); color: #fff; }
.pag_login input[type='button'].btn_tst, input[type='submit'].btn_tst { background-color: var(--corangemed); border: 1px solid var(--corangedark); }
.pag_login input[type='button'].btn_tst:hover, input[type='submit'].btn_tst:hover { background-color: var(--corangedark); }
.pag_login input[type='button'].btn_tst:disabled, input[type='submit']:disabled { background-color: var(--corangelite); border: 1px solid var(--corangemed); }
.pag_login input[type='button'].btn_tst:disabled:hover, input[type='submit']:disabled:hover { background-color: var(--corangelite);  }

.pag_login input[type='button']:hover, input[type='submit']:hover { background-color: var(--cbluedark); }
.pag_login input[type='button']:disabled, input[type='submit']:disabled { background-color: var(--cbluelite); border: 1px solid var(--cbluevisio); }
.pag_login input[type='button']:disabled:hover, input[type='submit']:disabled:hover { background-color: var(--cbluelite);  }

.pag_login .ambiente {  color: var(--corangemed); font-weight:500; padding: 5px; margin-top: 20px; }
.pag_login .logo-cliente { text-align: center; }
.pag_login .ribbon { background-color: var(--cgraylite); padding: 12px; text-align: center; margin-top: 40px; }

.frm_login { width: 650px; padding: 12px; border: 1px solid var(--cgraymed); margin: 10vH auto; }
.frm_login div { margin-top: 10px; }
.frm_login .logocrm { margin: 36px auto 1px auto; }
.frm_login .release { color: #777; margin: -10px 0px 40px 0px; font-size: 10px; text-align: right; padding-right: 173px; }
.frm_login span { display: inline-block; width: 70px; text-align: right; padding: 3px 5px; font-size: 12px; }
.frm_login input[type='text'], .frm_login input[type='password'] { width: 480px; font-size: 14px; padding: 3px; background-color:#fff;  border: 1px solid #aaa; }
.frm_login select { width: 480px; font-size: 14px; padding: 3px; border: 1px solid #aaa; }


/* contratos SIS - mover para inline */
.fs_default.mg-bottom { margin-bottom:8px; }


/* select2 */
.select2-container .select2-selection--single {
	height: 24px !important;
	border-radius:0px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 24px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 24px !important;
	
}

/* --------------- NOTIFICAÇÕES --------------------------- */
.notif-container {
  display: inline-block; /* mantém o sino alinhado com outros ícones */
  /* float:left; */
  position: relative;    /* agora o dropdown será absoluto em relação ao container */
}

.notif-icone {
  cursor: pointer;
  margin-right: 20px;
  color: var(--cbluevisio);
  font-size: 18px;
  text-decoration: none;
  position: relative; /* apenas se quiser o badge absoluto no ícone */
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 50%;
}
.notif-dropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 35px;
  width: 480px;
  padding: 0 4px 10px 4px;
  max-height: 400px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  overflow-y:auto;
  overflow-x:hidden;
  font-family: Arial, sans-serif;
}

.notif-header {
  /* background: #f5f5f5; */
  color: var(--cbluevisio); 
  padding: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid  var(--cbluedark);  */
}

.notif-close {
  color: #888;
  text-decoration: none;
  font-size: 16px;
}

.notif-close:hover {
  color: #333;
}

.notif-list {
  list-style: none;
  margin: 0;
  text-align: left;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.notif-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.notif-list li:hover {
  background-color: #f0f0f0;
}

/* Layout 1: Título e Data em cima, Descrição abaixo (Simples) */
.notificacao-box-1 {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    cursor: pointer;
	position: relative; /* Para posicionar o ícone de status */

}

.notificacao-box-1:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.notificacao-box-1.nao-lida {
    border-left: 4px solid #2196F3;
    background-color: #f0f8ff;
}

.notificacao-header-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.notificacao-titulo-1 {
    font-size: 13px;
    font-weight: 500;
	color: var(--cbluedark);
}

.notificacao-data-1 {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    margin-left: 12px;
}

.notificacao-descricao-1 {
    font-size: 12px;
    color: #666;
	float: left;
	padding-right: 30px; /* Espaço para o ícone de status */

}

/* Ícone de Status de Leitura */
.notificacao-status-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 18px;
    color: #888;
    transition: color 0.3s ease;
}

.notificacao-box-1.nao-lida .notificacao-status-icon {
    color: var(--cbluevisio);
}

/* notif vazia*/
.notif-vazia-3 {
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.notif-vazia-icon-3 {
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #4CAF50;
}

.notif-vazia-texto-3 {
    font-size: 14px;
    color: #888;
}


/* Responsividade */
@media (max-width: 600px) {
    .notificacao-header-1 {
        flex-direction: column;
        align-items: flex-start;
    }

    .notificacao-data-1 {
        margin-left: 0;
        margin-top: 4px;
    }
}



/* NOVO CANAL DE VENDA PROSPECT */
/* --- CSS PARA O LAYOUT DE CARDS DE CANAL DE VENDA --- */

/* Container principal que alinha os cards */
.lista-canais {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espaçamento entre os cards */
    margin-top: 15px;
}

/* Estilo base do card */
.card-canal {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden; /* Garante que o raio do card seja respeitado */
}

/* Cabeçalho do card */
.card-canal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.card-canal-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Corpo do card, onde ficam os formulários */
.card-canal-body {
    padding: 16px;
    display: flex;
    flex-wrap: wrap; /* Permite que os campos quebrem a linha em telas menores */
    gap: 20px; /* Espaçamento entre os campos de formulário */
}

.card-canal .form-group {
    flex: 1; /* Faz com que os campos ocupem o espaço disponível */
    min-width: 250px; /* Largura mínima antes de quebrar a linha */
}

.card-canal .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 14px;
}

.card-canal .form-group select {
    width: 100%; /* Ocupa toda a largura do form-group */
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilo para o switch/toggle de "Nível Atual" */
.nivel-atual-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.nivel-atual-toggle input[type="radio"] {
    /* Esconde o radio button padrão, mas o mantém funcional */
    opacity: 0;
    width: 0;
    height: 0;
}

.nivel-atual-toggle .toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.nivel-atual-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 22px;
    transition: background-color 0.3s;
}

.nivel-atual-toggle .toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

/* Movimenta o switch quando o radio está checado */
.nivel-atual-toggle input[type="radio"]:checked + .toggle-switch {
    background-color: #007bff; /* Cor azul quando ativo */
}

.nivel-atual-toggle input[type="radio"]:checked + .toggle-switch::after {
    transform: translateX(18px);
}

/* --- ESTADOS DO CARD --- */

/* Card ATIVO (corresponde à classe 'row_active') */
.card-canal.ativo {
    border-left: 5px solid  var(--cbluevisio) /* Borda azul para indicar atividade */
}

/* Card INATIVO (corresponde à classe 'row_inactive') */
.card-canal.inativo {
    border-left: 5px solid #6c757d; /* Borda cinza */
    background-color: #f8f9fa;
}

.card-canal.inativo .card-canal-header h5 {
    color: #6c757d;
}

.card-canal.inativo select {
    background-color: #e9ecef; /* Fundo cinza para campos desabilitados */
}

/* Card que é o NÍVEL ATUAL */
.card-canal.nivel-principal {
    border-color: #007bff; /* Borda azul mais grossa */
    border-width: 2px;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* LAYOUT DA COTAÇÃO*/


.azul_gradual{
	background-color: var(--cbluecotacao_dark) !important;
	color:#FFF;
	
}

.azul_gradual2{
	background-color: var(--cbluecotacao_dark2) !important;
	color:#FFF;
	
}

.azul_gradual3{
	background-color: var(--cbluecotacao_dark3) !important;
	color:#FFF;
	
}

.azul_gradual4{
	background-color: var(--cbluecotacao_dark4) !important;
	color:#FFF;
	
}

.azul_gradual5{
	background-color: var(--cbluecotacao_dark5) !important;
	color:#FFF;
	
}

.btn_add_ctc{
	margin:2px;
	/* background-color:rgba(255,255,255,0.15);  */
	color:#FFF; 
	border: 1px solid rgba(255,255,255,0);;
    padding:5px 10px;
	border-radius:2px; 
	font-size:13px;
	display:flex;
	align-items:center;
	gap:6px; 
    transition:all 0.2s ease; text-decoration:none;
}

.btn_add_ctc:hover{
	background-color:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.5);

}

td.td_titulo{
	color:#FFF; display:flex; justify-content:space-between; align-items:center;
	font-weight:bold;
}

span.titulo_ctc_cbi{
	font-size:13px; margin:5px; font-weight:500;
}

.date-selector input[type="date"]:focus {
    border-color: #86b7fe;      /* Cor da borda ao focar (azul padrão do Bootstrap) */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra suave ao focar */
}

/* (Opcional) Estilo para o ícone do calendário (pode variar entre navegadores) */
.date-selector input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.date-selector input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
input[type="date"] {
    border: 1px solid #aaa;
    padding: 4px;
    height: 24px;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    /*font-weight: 300;*/
}

/* new adventures */
.input-button-right { position: relative; display: inline-block; margin-right: 8px; }
.input-button-right input { padding-right: 30px; }
.input-button-right .button-inside-input { position: absolute; right: 1px; top: 25px; transform: translateY(-50%); cursor: pointer; text-decoration: none; padding: 3px 6px !important; border-radius: 0; }

/*
.input-with-button input {
    padding-left: 30px;
    padding-right: 8px;
}

.input-with-button .btn-inside {
    left: 5px;
    right: auto;
}
*/


/* -------------------------- coisas que vieram do stylesheet.css -------------------------------- */
.htabs {
	padding: 0px 0px 0px 10px;
	height: 30px;
	line-height: 16px;
	border-bottom: 1px solid #DDDDDD;
	margin-bottom: 15px;
}
.htabs a {
	border-top: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD; 
	padding: 7px 15px 6px 15px;
	float: left;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #000000;
	margin-right: 2px;
}
.htabs a.selected {
	padding-bottom: 7px;
	background: #FFFFFF;
}
.vtabs {
	width: 190px;
	padding: 10px 0px;
	min-height: 300px;
	float: left;
	display: block;
	border-right: 1px solid #DDDDDD;
}
.vtabs a, .vtabs span {
	display: block;
	float: left;
	width: 160px;
	margin-bottom: 5px;
	clear: both;
	border-top: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
	background: #F7F7F7;
	padding: 6px 14px 7px 15px;
	font-size: 13px;
	font-weight: bold;
	text-align: right;
	text-decoration: none;
	color: #000000;
}
.vtabs a.selected {
	padding-right: 15px;
	background: #FFFFFF;
}
.vtabs-content {
	margin-left: 205px;
}