
/* ============================================================
   MENU
============================================================ */

.oc4-menu-item,
.oc4-menu-aux-toggle,
.oc4-menu-aux-filhos .nav-item{
  color:#fff !important;
}

.oc4-menu-aux-toggle{
  display:flex !important;
  justify-content:space-between !important;
}

.oc4-menu-aux-filhos.fechado{
  display:none !important;
}

.oc4-menu-aux-filhos .nav-item{
  padding-left:46px !important;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.oc4-breadcrumb{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px;

  margin-bottom:15px;

  color:#697586;

  font-size:11px;
}


/* ============================================================
   BOTÕES
============================================================ */

.oc4-btn-dark,
.oc4-btn-light,
.oc4-btn-outline,
.oc4-btn-icon{
  min-height:38px;

  padding:0 13px;

  border-radius:4px;

  font-family:inherit;

  font-size:12px;

  font-weight:600;

  cursor:pointer;
}

.oc4-btn-dark{
  border:1px solid #071b2c;
  background:#071b2c;
  color:#fff;
}

.oc4-btn-light{
  border:1px solid #bdc8d3;
  background:#fff;
  color:#1d2939;
}

.oc4-btn-outline{
  border:1px solid #192b3a;
  background:#fff;
  color:#162536;
}

.oc4-btn-icon{
  width:45px;
  padding:0;

  border:1px solid #ccd5df;
  background:#fff;
}


/* ============================================================
   LISTAGEM
============================================================ */

.oc4-list-toolbar{
  display:flex;

  justify-content:space-between;
  align-items:center;

  margin-bottom:15px;
}

.oc4-toolbar-left,
.oc4-toolbar-right{
  display:flex;
  gap:7px;
}

.oc4-periodo{
  height:38px;

  padding:0 12px;

  border:1px solid #071b2c;
  border-radius:4px;

  background:#071b2c;
  color:#fff;

  font-weight:600;
}

.oc4-list-card{
  overflow:visible;

  border:1px solid #d7dee6;

  border-radius:7px;

  background:#fff;
}

.oc4-list-table{
  width:100%;

  border-collapse:collapse;

  font-size:12px;
}

.oc4-list-table th{
  height:44px;

  padding:9px 11px;

  border-right:1px solid #d5dde5;
  border-bottom:1px solid #ccd5df;

  text-align:left;

  background:#fafafa;

  color:#111827;
}

.oc4-list-table td{
  min-height:55px;

  padding:12px 11px;

  border-right:1px solid #d5dde5;
  border-bottom:1px solid #d5dde5;

  vertical-align:middle;
}

.oc4-list-table tbody tr:nth-child(even){
  background:#f5f5f5;
}

.oc4-list-table .right{
  text-align:right;
}

.oc4-list-table .acoes{
  width:135px;
  text-align:center;
}

.oc4-cliente-link{
  color:#002d5a;
  text-decoration:underline;
}

.oc4-list-table small{
  display:block;

  margin-top:3px;

  font-style:italic;
}

.oc4-row-actions{
  display:flex;

  justify-content:center;

  gap:5px;
}

.oc4-row-actions button{
  width:31px;
  height:31px;

  border:1px solid #d1d9e1;

  border-radius:4px;

  background:#fff;

  cursor:pointer;
}

.oc4-status{
  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:4px 8px;

  border:1px solid #6b7280;

  border-radius:4px;

  font-size:10px;
}

.oc4-status i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#8b8b8b;
}

.oc4-status.aprovado{
  border-color:#17913b;
  color:#137b33;
}

.oc4-status.aprovado i{
  background:#27a64b;
}

.oc4-registros{
  display:inline-block;

  margin-top:14px;

  padding:9px 12px;

  border:1px solid #d7dee6;

  background:#fff;

  font-size:11px;
}

.oc4-loading{
  padding:45px !important;

  text-align:center;

  color:#667085;
}


/* ============================================================
   SEÇÕES
============================================================ */

.oc4-editor{
  padding-bottom:20px;
}

.oc4-section{
  margin-bottom:14px;

  overflow:hidden;

  border:1px solid #d5dde5;

  border-radius:6px;

  background:#fff;
}

.oc4-section-header{
  display:flex;

  align-items:center;
  justify-content:space-between;

  min-height:68px;

  padding:13px 18px;

  border-bottom:1px solid #d5dde5;

  background:#fbfbfb;
}

.oc4-section-header h3{
  margin:0 0 6px;

  font-size:16px;

  font-weight:400;

  color:#344054;
}

.oc4-section-header h3 strong{
  color:#111827;
  font-weight:700;
}

.oc4-section-header h3 span{
  margin-right:5px;

  color:#667085;
}

.oc4-section-header small{
  color:#667085;

  font-size:10px;
}

.oc4-section-menu{
  color:#667085;
}

.oc4-section-body{
  padding:18px;
}


/* ============================================================
   CAMPOS
============================================================ */

.oc4-grid{
  display:grid;

  gap:14px 25px;
}

.oc4-grid-4{
  grid-template-columns:
    repeat(4,minmax(0,1fr));
}

.oc4-grid-2{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}

.oc4-grid-transporte{
  grid-template-columns:
    1fr .75fr;

  max-width:1050px;
}

.oc4-grid-total{
  grid-template-columns:
    repeat(4,minmax(0,1fr));
}

.oc4-field label{
  display:block;

  margin-bottom:6px;

  color:#475467;

  font-size:11px;
}

.oc4-field label b,
.oc4-editor-table th b,
.oc4-payment-table th b{
  color:#e5484d;
}

.oc4-field input,
.oc4-field select,
.oc4-field textarea,
.oc4-editor-table input,
.oc4-editor-table select,
.oc4-payment-table input,
.oc4-parcel-config input,
.oc4-parcel-config select{
  width:100%;

  min-height:37px;

  padding:7px 10px;

  border:1px solid #cbd5df;

  border-radius:3px;

  background:#fff;

  color:#344054;

  font-family:inherit;

  font-size:12px;

  box-sizing:border-box;
}

.oc4-field textarea{
  min-height:84px;

  resize:vertical;
}

.oc4-full{
  margin-top:15px;
}

.oc4-input-group{
  display:flex;
}

.oc4-input-group input{
  border-radius:3px 0 0 3px;
}

.oc4-input-group button{
  width:42px;

  border:1px solid #cbd5df;
  border-left:0;

  border-radius:0 3px 3px 0;

  background:#fff;
}


/* ============================================================
   TABELA EDITOR
============================================================ */

.oc4-table-wrapper{
  overflow:auto;
}

.oc4-editor-table{
  width:100%;

  border-collapse:collapse;

  table-layout:fixed;
}

.oc4-editor-table th{
  padding:12px 10px;

  border-right:1px solid #d4dce5;
  border-bottom:1px solid #d4dce5;

  background:#fafafa;

  text-align:left;

  font-size:11px;
}

.oc4-editor-table td{
  padding:11px 10px;

  border-right:1px solid #d4dce5;
  border-bottom:1px solid #d4dce5;
}

.oc4-editor-table th:first-child{
  width:24%;
}

.oc4-editor-table th:nth-child(2){
  width:11%;
}

.oc4-editor-table th:nth-child(3){
  width:10%;
}

.oc4-editor-table th:nth-child(4){
  width:11%;
}

.oc4-editor-table th:nth-child(5){
  width:11%;
}

.oc4-editor-table th:nth-child(6){
  width:12%;
}

.oc4-editor-table th:nth-child(7){
  width:11%;
}

.oc4-editor-table th.acoes{
  width:70px;
}

.oc4-editor-table input:read-only,
.oc4-editor-table .oc4-subtotal{
  background:#edf1f4;
}

.oc4-inline-add{
  padding:10px 16px;
}

.oc4-editor-actions{
  display:flex;

  justify-content:center;

  gap:4px;
}

.oc4-editor-actions button,
.oc4-trash-only{
  width:31px;
  height:31px;

  border:1px solid #d4dce5;

  border-radius:3px;

  background:#fff;

  cursor:pointer;
}

.oc4-editor-actions .delete,
.oc4-trash-only{
  color:#e5484d;
}


/* ============================================================
   SERVIÇOS VAZIOS
============================================================ */

.oc4-empty-services{
  display:flex;

  justify-content:center;
  align-items:center;

  gap:18px;

  min-height:76px;

  color:#667085;

  font-size:11px;
}


/* ============================================================
   DINHEIRO
============================================================ */

.oc4-money-input,
.oc4-money-mini{
  display:flex;
}

.oc4-money-input span,
.oc4-money-mini span{
  display:flex;

  align-items:center;
  justify-content:center;

  min-width:38px;

  border:1px solid #cbd5df;
  border-right:0;

  border-radius:3px 0 0 3px;

  background:#fff;

  color:#667085;

  font-size:11px;
}

.oc4-money-input input,
.oc4-money-mini input{
  border-radius:0 3px 3px 0;
}

.oc4-money-input.disabled input{
  background:#e9eef2;
  text-align:right;
}

.oc4-money-input.total input{
  font-weight:700;
}


/* ============================================================
   DESCONTO
============================================================ */

.oc4-discount-group{
  display:flex;
}

.oc4-discount-group input{
  border-radius:3px 0 0 3px;
}

.oc4-discount-group button{
  width:55px;

  border:1px solid #cbd5df;
  border-left:0;

  background:#fff;

  color:#475467;
}


/* ============================================================
   IMPRESSÃO
============================================================ */

.oc4-print-total{
  display:flex;

  align-items:center;
  justify-content:space-between;

  margin-top:15px;

  padding-top:14px;

  border-top:1px solid #d5dde5;
}

.oc4-print-total strong{
  display:block;

  margin-bottom:4px;

  font-size:11px;
}

.oc4-print-total small{
  color:#667085;

  font-size:9px;
}

.oc4-switch{
  position:relative;

  width:38px;
  height:20px;
}

.oc4-switch input{
  display:none;
}

.oc4-switch span{
  position:absolute;

  inset:0;

  border-radius:20px;

  background:#c4ccd4;

  cursor:pointer;
}

.oc4-switch span::after{
  content:"";

  position:absolute;

  width:16px;
  height:16px;

  top:2px;
  left:2px;

  border-radius:50%;

  background:#fff;

  transition:.2s;
}

.oc4-switch input:checked + span{
  background:#071b2c;
}

.oc4-switch input:checked + span::after{
  transform:translateX(18px);
}


/* ============================================================
   CHECK
============================================================ */

.oc4-check-line{
  display:flex;

  align-items:flex-start;

  gap:9px;

  padding:15px 18px;
}

.oc4-check-line input{
  width:16px;
  height:16px;

  margin-top:2px;
}

.oc4-check-line label{
  display:block;

  margin-bottom:3px;

  font-size:11px;

  font-weight:600;
}

.oc4-check-line small{
  color:#667085;

  font-size:9px;
}

.oc4-address{
  padding:0 18px 18px;
}


/* ============================================================
   PAGAMENTO
============================================================ */

.oc4-payment-types{
  display:flex;

  gap:12px;

  margin:8px 0 15px;
}

.oc4-payment-card{
  display:flex;

  align-items:center;

  width:310px;
  min-height:60px;

  padding:10px 14px;

  border:1px solid #d4dce5;

  border-radius:4px;

  background:#fff;

  text-align:left;

  cursor:pointer;
}

.oc4-payment-card.selected{
  border:1.5px solid #071b2c;
}

.oc4-payment-icon{
  display:flex;

  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;

  margin-right:10px;

  border-radius:50%;

  background:#edf1f3;
}

.oc4-payment-card strong,
.oc4-payment-card small{
  display:block;
}

.oc4-payment-card strong{
  margin-bottom:3px;

  font-size:12px;
}

.oc4-payment-card small{
  color:#667085;

  font-size:10px;
}

.oc4-payment-card i{
  width:16px;
  height:16px;

  margin-left:auto;

  border:1px solid #aab5c0;

  border-radius:3px;
}

.oc4-payment-card.selected i{
  background:#071b2c;

  box-shadow:
    inset 0 0 0 3px #fff;
}


/* ============================================================
   TABELA PAGAMENTO
============================================================ */

.oc4-payment-table{
  width:100%;

  border-collapse:collapse;

  table-layout:fixed;
}

.oc4-payment-table th,
.oc4-payment-table td{
  padding:10px;

  border:1px solid #d5dde5;

  text-align:left;

  font-size:11px;
}

.oc4-payment-table th:last-child,
.oc4-payment-table td.acoes{
  width:55px;

  text-align:center;
}

.oc4-parcel-config{
  display:grid;

  grid-template-columns:
    1.5fr .75fr .75fr .75fr .7fr;

  align-items:end;

  gap:15px;

  margin-bottom:15px;
}

.oc4-input-suffix{
  display:flex;
}

.oc4-input-suffix input{
  border-radius:3px 0 0 3px;
}

.oc4-input-suffix span{
  display:flex;

  align-items:center;

  padding:0 13px;

  border:1px solid #cbd5df;
  border-left:0;

  border-radius:0 3px 3px 0;

  background:#fff;
}

.oc4-generate-field button{
  width:100%;
}

.oc4-add-parcela{
  margin-top:10px;
}


/* ============================================================
   ANEXOS
============================================================ */

.oc4-anexo-area{
  margin-top:13px;
}

#oc4AnexosLista{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:9px;
}

.oc4-anexo-pill{
  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:6px 9px;

  border:1px solid #d5dde5;

  border-radius:4px;

  font-size:10px;
}

.oc4-anexo-pill button{
  border:0;

  background:transparent;

  cursor:pointer;
}


/* ============================================================
   FOOTER
============================================================ */

.oc4-footer{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  padding:6px 0 20px;
}

.oc4-footer-save{
  display:flex;

  align-items:flex-end;

  gap:18px;
}

.oc4-footer-save small,
.oc4-footer-save strong{
  display:block;
}

.oc4-footer-save small{
  text-align:right;

  font-size:9px;
}

.oc4-footer-save strong{
  margin-top:2px;

  font-size:20px;
}


/* ============================================================
   MENU FLUTUANTE
============================================================ */

.oc4-floating-actions{
  position:absolute;

  z-index:99999;

  width:190px;

  padding:4px;

  border:1px solid #d4dce5;

  border-radius:5px;

  background:#fff;

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.15);
}

.oc4-floating-actions button{
  width:100%;

  padding:8px 9px;

  border:0;

  border-radius:3px;

  background:#fff;

  text-align:left;

  font-size:11px;

  cursor:pointer;
}

.oc4-floating-actions button:hover{
  background:#f3f5f7;
}

.oc4-floating-actions .principal{
  margin-top:4px;

  background:#071b2c;

  color:#fff;
}


/* ============================================================
   OUTROS
============================================================ */

.hidden{
  display:none !important;
}

.oc4-small-section{
  padding:0;
}

.oc4-muted{
  color:#667085;
}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1100px){

  .oc4-grid-4,
  .oc4-grid-total{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .oc4-parcel-config{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}



/* ============================================================
   REMOVE BREADCRUMB DUPLICADO APENAS EM ORCAMENTOS
============================================================ */

#page-orcamentos-v4.active
.breadcrumb-global-climatiko{
  display:none !important;
}


/*
  Mantém somente o breadcrumb próprio do módulo.
*/

#page-orcamentos-v4.active
.oc4-breadcrumb{
  display:flex !important;
}




/* ============================================================
   BREADCRUMB INTERATIVO
============================================================ */

.oc4-breadcrumb-link{
  padding:0 !important;

  border:0 !important;

  background:transparent !important;

  color:#697586 !important;

  font-family:inherit !important;

  font-size:11px !important;

  cursor:pointer !important;
}


.oc4-breadcrumb-link:hover{
  color:#102235 !important;

  text-decoration:underline;
}


.oc4-breadcrumb strong{
  color:#344054;
}


