#wrapper {
  width: 100%;
  height: 100%;
  background-color: white;
}

body {
  padding-right: 0 !important;
  width: 100%;
  height: 100%;
  background-color: white;
}

.tt-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 4px;
  padding: 8px 0;
  width: 422px;
  top: 23px;  
}

.datepicker {
  z-index: 1151 !important;
}

.tt-suggestion {
  padding: 3px 20px;
}

.tt-suggestion-hover {
  cursor: pointer;
  background-color: #0097CF;
  color: #FFFFFF;
}

.tt-suggestion p {
  margin: 0;
}

a {
  color: #333333;
}

a:focus,
a:hover {
  color: #333333;
  text-decoration: underline;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  background-color: #d4d4d4 !important;
  border-color: #d4d4d4 !important;
  color: #333333;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  background-color: #d4d4d4 !important;
  color: #333333;
}

/* This class is added on scroll */

.fixed {
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 1;
}

textarea {
  resize: none;
  min-height: 50px;
}

body,
.dropdown-menu {
  font-size: 12px;
  line-height: 1.228;
}

.btn {
  font-size: 12px;
  padding: 4px 8px;
}

.form-control {
  font-size: 12px;
  height: 28px;
}

.form-group {
  margin-bottom: 10px;
}

tr {
  padding: 4px !important;
}

th {
  padding: 4px !important;
}

td {
  padding: 2px;
  word-break: break-word;
}

.vertical-align {
  display: flex;
  align-items: center;
}

.glyphicon-refresh-animate {
  -animation: spin .7s infinite linear;
  -webkit-animation: spin2 .7s infinite linear;
}

/*
* Rotacao de icones
*/

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: scale(1) rotate(0deg);
  }

  to {
    transform: scale(1) rotate(360deg);
  }
}

/* Loading text */

.loading-text {
  text-align: center;
}

/*
 * Input Spinner
 * https://codepen.io/Thomas-Lebeau/pen/csHqx
 *
 */

.spinner {
  width: 100px;
}

.spinner input {
  text-align: right;
}

.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}

.input-group-btn-vertical>.btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0.55em;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}

.input-group-btn-vertical>.btn:first-child {
  border-top-right-radius: 4px;
}

.input-group-btn-vertical>.btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}

.input-group-btn-vertical i {
  position: absolute;
  top: 0;
  left: 4px;
}

.logoSimples {
  display: inline-block;
  background-image: url("/resources/images/logoSimplesNacional.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
}

.icone-receita {
  display: inline-block;
  background-image: url("/resources/images/orc_receita.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
}

.icone-despesa {
  display: inline-block;
  background-image: url("/resources/images/orc_despesa.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
}

.icone-mind {
  display: inline-block;
  background-image: url("/resources/images/iconeMind.png");
  background-repeat: no-repeat;
  width: 24px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
}

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

td {
  white-space: normal;
}

@media (max-width: 768px) {
  .table-responsive > table td,
  .table-responsive > table th {
    white-space: nowrap;
  }
}

td.td-nowrap {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* styles menu lateral */

#sidebarToggleMenu {
  display: none;
  margin-right: 5px !important;
  padding: 8px 5px;
}

#sidebarToggleMenu2 {
  display: none;
}

#page-wrapper {
  transition: margin .5s;
}

.navbar.navbar-default.navbar-static-top {
  position: fixed;
  width: 100%;
}

.navbar-default.sidebar {
  position: fixed;
}

#conteudo ol.breadcrumb {
  margin-top: 100px;
}

.navbar-default.sidebar {
  height: 100%;
}

.sidebar-nav.navbar-collapse {
  height: 100%;
}

#side-menu {
  margin-bottom: 200px;
}

@media screen and (min-width: 768px) {
  #page-wrapper {
    margin-left: 220px;
  }

  #sidebarToggleMenu {
    display: block;
  }

  #sidebarToggleMenu2 {
    display: inline-block;
  }

  #page-wrapper {
    transition: margin .5s;
  }

  .navbar-default.sidebar {
    transition: margin .5s, padding .5s;
  }

  .navbar-default.sidebar.collapse2 {
    display: block;
    margin-left: -175px;
  }

  .navbar-default.sidebar.collapse2.in {
    display: block;
    margin-left: 0px;
    padding-right: 0px;
  }

  .navbar-default.sidebar.collapse2 #side-menu {
    display: block;
    padding-right: 45px;
  }

  .navbar-default.sidebar.collapse2.in #side-menu {
    display: block;
    padding-right: 0px;
  }

  .page-wrapper-on-menu-closed {
    margin-left: 45px !important;
  }

  .collapse2.in .sidebar-nav.navbar-collapse,
  .sidebar-nav.navbar-collapse.collapse {
    height: 100% !important;
    overflow-y: auto;
  }

  #conteudo ol.breadcrumb {
    margin-top: 0;
  }

  #conteudo {
    padding-top: 55px;
  }
}

/* #155051 — esconde os toggles do menu V1 no mobile; sem isso o mainTemplateVersao2.css
   (carregado depois, @media max-width:768) reexibe e gera dois hambúrgueres. */
@media (max-width: 768px) {
  #sidebarToggleMenu,
  #sidebarToggleMenu2 {
    display: none !important;
  }
}

/* Ajustes para a impressão da tela */

@media print {
  .panel {
    page-break-inside: avoid;
  }

  table,
  svg {
    page-break-inside: avoid;
  }

  button.btn {
    display: none !important;
  }

  *:not(#mapaEstrategico):not(#mapaEstrategico *),
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
  }

  #mapaEstrategico {    
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  } 
  
  #tela_planos_de_acao .nav-tabs{
    display: none !important;
  }
  
}

/* CUSTOM MENU SCROLL BAR */

.sidebar-nav.navbar-collapse::-webkit-scrollbar {
  width: 6px;
  background-color: #f9f9f900;
}

.sidebar-nav.navbar-collapse::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
  background-color: #d2d2d2;
}

/* CSS MAPA ESTRATÉGICO */

#mapaEstrategico .thumbnail span.fa {
  display: none;
  padding: 3px;
  color: #fff;
  z-index: 1;
}

#mapaEstrategico .thumbnail:not(:first-of-type):hover {
  cursor: pointer;
  opacity: 0.9;
}

#mapaEstrategico .thumbnail:hover span.fa {
  display: block;
  padding: 12px 13px;
  cursor: pointer;
  margin: 0px !important;
}

#mapaEstrategico .thumbnail:hover .thumbnail-header .thumbnail-header-item:after {
  content: " ";
  background-color: #bfbfbf;
  opacity: 0.5;
  position: absolute;
  border-radius: 4px;
  z-index: -1;
  top: 0px;
  width: 35px;
  height: 35px;
}

#mapaEstrategico .thumbnail .caption span textarea:hover {
  text-decoration: underline;
}

/* #mapaEstrategico .thumbnail:hover .caption span:before{
  background-color:#bfbfbf;
  content: " ";
  opacity: 0.4;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
} 

#mapaEstrategico .thumbnail:hover .caption span{
  position: relative;
}


 #mapaEstrategico .thumbnail:hover .caption span:after{
  font-family: "fontawesome";
  font-weight: 900;
  content: "\f040";
  z-index: -1;
  position: absolute;
  right: 190px;
  top: 2px;
  color: #fff;
} */

#mapaEstrategico .thumbnail {
  box-shadow: 0 0.125rem .4rem rgba(0, 0, 0, .5);
  border: none;  
  position: relative;
  border-radius: 0.625rem;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

/* #mapaEstrategico .thumbnail.bloco-tema{
  box-shadow: none;
} */

#mapaEstrategico .thumbnail.bloco-tema .fa {
  color: #000;
}

#mapaEstrategico .thumbnail-header {
  height: 10px;
  display: flex;
  justify-content: space-between;
}

#mapaEstrategico .thumbnail-header .thumbnail-header-item {
  position: relative;
}

#mapaEstrategico .thumbnail .caption {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 8;
}

#mapaEstrategico .thumbnail .thumbnail-metas{
  flex: 1;
  border-radius: 0.625rem;
  color: #fff;
  background-color: #ffffff3d;
  padding: 10px;
  margin: 0 10px;
}

#mapaEstrategico .thumbnail .thumbnail-metas:hover{  
  background-color: #ffffff6c;
  
}


#mapaEstrategico .row {
  background-color: #f8f8f8;
  padding: 15px;
  margin: 10px 0;
}

#mapaEstrategico .novo-bloco {
  box-shadow: none;
}

#mapaEstrategico textarea {
  border: none;
  background: none;
  text-align: center;
  box-shadow: none;
  overflow: hidden;
  z-index: -2
}

#mapaEstrategico textarea:focus {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  border-radius: 4px;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  order-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  color: #aaa;
}

#mapaEstrategico .thumbnail .color-picker {
  opacity: 0;
  position: absolute;
  left: -4px;
  top: -5px;
  cursor: pointer;
  width: 30px;
  height: 29px;
}

/* FIM CSS MAPA ESTRATÉGICO */

#headingDetalhesProcesso.collapsed #setaAberto {
  display: inline-block;
}

#headingDetalhesProcesso #setaAberto {
  display: none;
}

#headingDetalhesProcesso.collapsed #setaFechado {
  display: none;
}

/* CSS Filtro Avançado */

#headingFiltro.collapsed #setaAbertoFiltro {
  display: inline-block;
}

#headingFiltro #setaAbertoFiltro {
  display: none;
}

#headingFiltro.collapsed #setaFechadoFiltro {
  display: none;
}

/* DEFIS */

.headingDefis.collapsed #setDefisAberto {
  display: inline-block;
}

.headingDefis #setDefisAberto {
  display: none;
}

/* Default */
.collapsed .seta-panel-aberto {
  display: inline-block;
}

.seta-panel-aberto {
  display: none;
}

.collapsed .seta-panel-fechado {
  display: none;
}

.headingDefis.collapsed #setDefisFechado {
  display: none;
}

.morris-hover {
  position: absolute;
  z-index: 1000;
}

.morris-hover.morris-default-style {
  border-radius: 10px;
  padding: 6px;
  color: #666;
  background: rgba(255, 255, 255, 0.8);
  border: solid 2px rgba(230, 230, 230, 0.8);
  font-family: sans-serif;
  font-size: 12px;
  text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  font-weight: bold;
  margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
  white-space: nowrap;
  margin: 0.1em 0;
}

svg {
  width: 100%;
}

.cursor-pointer {
  cursor: pointer !important;
}

.btn.btn-bg-transp {
  background-color: transparent;
  border: none;
}

.btn.btn-bg-transp:hover {
  background-color: #6d747f36;
}

.panel .label-detail {
  padding-left: 10px;
  padding-right: 5px;
  font-weight: bold;
}

.indicadores-card {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  align-items: center;
  padding: 15px;
  position: relative;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  box-shadow: 0px 0px 20px rgba(92, 111, 139, 0.12);
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 20px rgba(92, 111, 139, 0.12);
  margin-bottom: 0;
}

.panel-atalho .panel-body {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #fff; */
}

.panel-atalho .panel-body .texto-atalho {
  font-size: 16px;
}

.panel-atalho a {
  text-decoration: none;
}

.react-table-projecao .celula-valor {
  text-align: right;
  padding: 0 !important;
}

.react-table-projecao .celula-valor .celula-valor-div {
  height: 100%;
  width: 100%;
  padding: 7px 5px;
}

.react-table-projecao .celula-valor .celula-valor-icon {
  display: none;
  background-color: #0097CF;
  color: #fff;
  border-radius: 100%;
  float: left;
  font-size: 12px;
  padding: 5px;
}

/* @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */

.react-table-projecao .celula-valor:hover .celula-valor-icon {
  display: inline-block;
  /* -webkit-animation: fadeIn .3s ease-in-out;
  -moz-animation: fadeIn .3s ease-in-out;
  -o-animation: fadeIn .1s ease-in-out;
  animation: fadeIn .1s ease-in-out; */
}

#panelFiltro #headingFiltro.collapsed #filtrosCabecalho {
  display: block !important;
}

#divModalVincularPAF .modal-body,
#divModalProjecaoCategoria .modal-body,
#sacModalNomeInstituicao .modal-body,
#dspoConfigModalLei116 .modal-body,
#pafFiscalModal .modal-body,
/* #modalCriterioCodigoTributacaoDesif .modal-body, */
.modal .modal-body.overflow-unset {
  overflow-y: unset !important;
}

#dspoConfigModalServico .modal-body {
  overflow-y: unset !important;
}

#reactTableSolicitacoesSac .checkbox {
  margin: 0px;
}

.bg-info-important {
  background-color: #d9edf7 !important;
}

.bg-warning-important {
  background-color: #fcf8e3 !important;
}

.bg-success-important {
  background-color: #dff0d8 !important;
}

td.gif4-timeline {
  position: relative;
}

td.gif4-timeline .gif4-timeline-bar {
  position: absolute;
  height: 20px;
  background-color: #ff9800;
}

td.gif4-timeline .gif4-timeline-bar:hover {
  background-color: #ffba52;
  /* cursor:pointer; */
}

.navbar-top-links .modal li {
  display: list-item;
}

#toasterMessage {
  position: fixed;
  width: 350px;
  right: 50px;
  z-index: 1200;
  top: 40px;
}

@media screen and (max-width: 768px) {
  #toasterMessage {
    width: 200px;
    right: 15px;
  }
  .responsiveDiv{
  	flex-direction:column;
  }

}

#toasterMessage #toasterMessageContent div {
  position: relative;
  transition: right 1000ms cubic-bezier(0.175, 0.9, 0.1, 1.275);
  right: -350px;
}

.toast-success {
  color: #ffffff;
  background-color: #4caf50;
  border-color: #4caf50;
}

.alert.toast-danger {
  color: #ffffff;
  background-color: #e74c3c;
  border-color: #e74c3c;
}

.alert.toast-warning {
  color: #ffffff;
  background-color: #ff9800;
  border-color: #ff9800;
}

.alert.toast-info {
  color: #ffffff;
  background-color: #3498db;
  border-color: #3498db;
}

input[type=checkbox] {
  margin-left: 0px !important;
}

/* Sets the containers height and width */
.base-timer {
  position: absolute;
  height: 30px;
  width: 30px;
}

/* Removes SVG styling that would hide the time label */
.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__label {
  position: absolute;
  /* Size should match the parent container */
  width: 30px;
  height: 29px;
  /* Keep the label aligned to the top */
  top: 0;
  /* Create a flexible box that centers content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}

.base-timer__path-remaining {
  /* Just as thick as the original ring */
  stroke-width: 8px;

  /* Rounds the line endings to create a seamless circle */
  stroke-linecap: round;

  /* Makes sure the animation starts at the top of the circle */
  transform: rotate(90deg);
  transform-origin: center;

  /* One second aligns with the speed of the countdown timer */
  transition: 1s linear all;

  /* Allows the ring to change color when the color value updates */
  stroke: white;
}

/* Flips the svg and makes the animation to move left-to-right */
/* .base-timer__svg {
  transform: scaleX(-1);
} */




.sliderBase {
  width: 100%;
  position: relative;
}

.slider {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox 64 */
  -ms-overflow-style: none;
  /* Internet Explorer 11 */
}

.slider::-webkit-scrollbar {
  /** WebKit */
  display: none;
}

.slider>* {
  flex: 0 0 auto;
}

.sliding>* {
  pointer-events: none;
}

.carousel-base {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  outline: none;
}

.carousel-base .item-provider {
  overflow: hidden;
  width: 100%;
  cursor: pointer;
}

.carousel-base .item-container {
  margin: 5px;
  flex-shrink: 0;
}

.carousel-base .item-container img {
  user-select: none;
  -webkit-user-drag: none;
}

.carousel-base .item-tracker {
  height: 100%;
  display: flex;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-base .carousel-arrow {
  font-size: 22px;
  z-index: 1;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #c8d3dc;
  background-color: #fff;
  color: #5a7a96;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
  opacity: 1;
  cursor: pointer;
  margin: 0 4px;
}

.carousel-base .carousel-arrow:hover:not([disabled]) {
  background-color: #337ab7;
  border-color: #2e6da4;
  color: #fff;
}

.carousel-base .carousel-arrow:focus {
  outline: 2px solid #66afe9;
  outline-offset: 2px;
}

.carousel-base .carousel-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-item-card {
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.carousel-item-card:hover:not(.panel-blocked) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.gif4-steper {
  margin-bottom: 25px;
  padding: 0 15px 15px 15px;
}

.gif4-steper .gif4-steper-body {
  display: flex;
  list-style: none;
  height: 100%;
  padding: 0px;
  flex-wrap: wrap;
  justify-content: center;
}

.gif4-steper .gif4-steper-body .gif4-steper-item {
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
  padding: 15px 0 0;
  min-height: 80px;
  min-width: 120px;
  position: relative;

}

.gif4-steper .gif4-steper-body span.gif4-steper-item-line {
  border-top: 2px solid rgb(221, 221, 221);
  min-width: 20px;
  width: 100%;
  margin-right: 15px;
  margin-left: 15px;
  align-self: center;
}

.gif4-steper .gif4-steper-body .gif4-steper-item .gif4-steper-item-content {
  height: 30px;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background-color: white;
  width: 70px;
}

.gif4-steper .gif4-steper-body .gif4-steper-item::before {
  content: '';
  width: 100%;
  border-bottom: 2px solid rgb(221, 221, 221);
  position: absolute;
  top: 50%;
  z-index: 1;
}

.gif4-steper .gif4-steper-body .gif4-steper-item:last-child:before {
  display: none;
}

.gif4-steper .gif4-steper-body .gif4-steper-item:last-child {
  min-width: 70px;
}

.input-range-container {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  outline: none;
  display: flex;
  position: relative;
  padding: 10px 0;
  margin-top: 15px;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.input-range:hover {
  opacity: 1;
  cursor: pointer;
}

.input-range-output {
  position: absolute;
  bottom: 18px;
  font-size: 15px;
  color: #000;
  padding: 5px 8px 5px 0;
  font-weight: 700;
  /* border-radius: 19%; */
}

html {
  scroll-behavior: smooth;
}

.input-type-color input {
  height: 28px;
  width: 90px;
  border: 0 none;
  background-color: #dee2e6;
  border-radius: 5px;
}

#dataGridContainer .ReactTable .rt-thead .rt-resizable-header-content {
  overflow: visible;
}

#dataGridContainer .ReactTable .rt-thead .rt-resizable-header:last-child {
  overflow: visible;
}

/* InputRating Inicio*/

.input-rating {
  display: flex;
}

.input-rating span.rating-star {
  font-size: 1.5em;
  color: #858585;
  text-decoration: none;
  transition: all 0.5s;
  padding: 4px;
  cursor: pointer;
}

.input-rating span.rating-star-read-only {
  font-size: 1.5em;
  color: #858585;
  text-decoration: none;
  transition: all 0.5s;
  padding: 4px;
}

.input-rating span::before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

.input-rating span.rating-star.active {
  color: #faaf00;
}

.input-rating span.rating-star:hover::before,
.input-rating span.rating-star.active::before {
  font-weight: 900;
}

.input-rating span.rating-star:hover {
  color: #faaf00;
  transform: scale(1.3);
}

.input-rating span.rating-star-read-only.active::before {
  color: #faaf00;
  font-weight: 900;
}

.input-rating span.rating-star-read-only.disabled {
  opacity: 0.4;
}

/* InputRating Fim*/
.gif4-panel-interativo.panel-default {
  cursor: pointer;
}

.gif4-panel-interativo.panel-default:hover {
  border-color: #bce8f1;
}

.gif4-panel-interativo.panel-default:hover .panel-heading {
  color: #31708f;
  background-color: #bce8f1;
}

.boxFluxograma.customBox {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  z-index: 2;
  background: white;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  max-width: 150px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.boxFluxograma.customBox:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.boxFluxograma .customBox-header {
  padding: 8px 10px;
  cursor: grab;
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  background-color: #f8f9fa;
  font-size: 12px;
  font-weight: 600;
}

.boxFluxograma .customBox-header.father {
  background-color: #e8f5e9;
}

.boxFluxograma .customBox-body {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 4px;
  z-index: 9999;
}

.boxFluxograma .fluxo-node-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.boxFluxograma:hover .fluxo-node-actions {
  opacity: 1;
}

.lineFluxograma {
  position: absolute;
  width: 2px;
  background-color: black;
  z-index: 3;
}

.lineFluxogramaV2 {
  position: absolute;
  width: 5px;
  background-color: black;
  z-index: 3;
}

.customArrow{
  position: absolute;
  top: 50%;
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px;
  border-color: transparent transparent transparent black; /* Cor da seta */
  z-index: 3;
}

/* CSS CHAT - INICIO */

.chat-box {  
  width: 380px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.chat-box .chat-message {
  margin-top: 5px;
  text-align: left;  
}

.chat-box .chat-message.you {
  text-align: right;
}

.chat-box .chat-message .fa-edit,
.chat-box .chat-message .fa-reply {
  opacity: 0;
  transition: opacity 0.4s ease;  
  display: none;
  cursor: pointer;
  background-color: #aeaeae54;
  padding: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.chat-box .chat-message.you .fa-edit,
.chat-box .chat-message .fa-reply{    
    display: inline-block;    
}

.chat-box .chat-message.you .chat-message-content{
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row-reverse;
}

.chat-box .chat-message:hover .fa-edit,
.chat-box .chat-message:hover .fa-reply {  
  opacity: 1;
}

.chat-box .chat-message-info {
  margin-top: 10px;
}

.chat-box .chat-message .chat-message-text {
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  color: #fff;
  background-color: #a52243;
  text-align: justify;
}

.chat-box .chat-message.you .chat-message-text {
  background-color: #313a4b;
}

.chat-msg-template-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #e0e8f0;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 7px;
  letter-spacing: 0.3px;
}

.chat-box .chat-message .chat-message-text .chat-msg-template-badge {
  color: #555;
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

.chat-box .chat-input-message {
  /* width: 265px; */
  padding-left: 0;
}

.panel.chat-box .panel-body {
  height: 600px;
  overflow-y: auto;
  position: relative;
}

.modal-chat .panel.chat-box .panel-body {
  height: 450px;
}

.modal-chat .panel.chat-box .panel-heading::after {
  height: 400px;
}

@media (max-height: 650px) {
  .modal-chat .panel.chat-box .panel-body {
     height: 300px;
   } 
 
   .panel.chat-box .panel-heading::after {
     height: 275px !important;
   }
 }
 

.panel.chat-box .panel-heading::after {
  content: '';
  background-image: url(/resources/images/logoin.png);
  background-size: cover;
  opacity: 0.08;
  width: 100%;
  height: 575px;
  left: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 0;
  margin-top: 50px;
}

.panel.chat-box .panel-heading {
  background-color: rgb(49, 58, 75);
  color: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.panel.chat-box .panel-heading span {
  cursor: pointer;
}

.modal-chat {
  position: fixed;
  z-index: 99;
  right: 30px;
  bottom: 20px;
}
.colAgend{
	font-weight: bold;
	width:13.5%;
  padding: 0px !important;
}
.colAgendItem{
  display: flex;
  justify-content: center;
  align-items: center;
  flex:1;
}
.colAgendItem:hover{
  cursor: pointer;
	background-color:#d8d5d5;
}
.agendamentoReservado{
	background-color:#447af3 !important;
	color:white;
}

#arvore_plano .text-bold{
  font-weight: 600;
}

#arvore_plano span.titulo{
  margin: 5px;
}

/* #chatBoxBody {
  scroll-behavior: smooth;
} */

.panel-footer .new .chat-new-message.active{
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.panel-footer .chat-new-message{
  display: block;
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 50px;
  text-align: center;
  font-size: 16px;
  border-radius: 3rem;
  background-color: #d1930d;
  color: #fff !important;
  transform: translate3d(0, 5rem, 0);
  line-height: 35px;
  height: 35px;
  width: 160px;
  margin-left: -80px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition-duration: 0.3s;
  transition-delay: 250ms;
  opacity: 0;
}
.selectPersonalizado:focus {
  outline: none;
  box-shadow: none;
  border-color: initial;
}
/* CSS CHAT - FIM */
.btnProcesto:hover{
  background-color: #535f75 !important;
}
.gif4Hover:hover{
  background-color: #47546d !important;
  cursor: pointer;
}

/* Adicionado para corrigir titles em baixo dos modais */
.popover {
    z-index: 1000000;
}

/* #155051 — Captcha (Utils/viewComponents/Captcha.js, compartilhado por ~20 telas):
   a imagem do captcha de sistema é injetada via jQuery em base64 sem limite de
   largura; regra global (segura em qualquer viewport) evita estouro do container.
   display:block é mobile-only (ver @media 768 abaixo) — no desktop o captcha
   mantém o layout inline original. */
#captcha img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* #155051 — guarda global contra overflow horizontal (zoom-out no carregamento
     em iPhone); elementos fixed/largos que estouram a viewport são constringidos
     individualmente abaixo (.modal-chat/.chat-box, #toasterMessage). */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* #155051 — Captcha (Utils/viewComponents/Captcha.js): no modo "captcha de
     sistema" (imagem + input), Input e #captcha são filhos diretos de .row sem
     wrapper col-*, herdando o gutter negativo (-15px) do Bootstrap e desalinhando
     do card. Zera o gutter do wrapper e do col-* do Input para ambos ficarem
     alinhados à mesma margem esquerda do card. */
  #captcha img {
    display: block;
  }
  .utilsCaptchaWrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .utilsCaptchaWrapper > [class*="col-"] {
    width: 100%;
    float: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .utilsCaptchaWrapper > #captcha {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* #155051 — ConsultaExternaDteSn.js (AFI, rota /afi/dtesn): classes
     próprias (dtesnCaptchaWrap/dtesnBtnRow, adicionadas no JSX) para não
     colidir com seletores genéricos .row/.col-sm-12 — esses também casam
     com os campos reais (chaveAcesso/protocolo/cnpj), que já ficam
     corretamente alinhados pela conta padrão do Bootstrap (.row com
     margin -15px incondicional + .col-* com padding 15px incondicional =
     0). Fixamos os mesmos 15px no wrapper do captcha e na linha do botão
     para reproduzir a mesma conta, sem tocar nos campos reais. */
  .dtesnCaptchaWrap {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .dtesnBtnRow {
    text-align: left !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .dtesnBtnRow .btn-validation {
    margin-left: 0 !important;
  }

  /* botão flutuante de chat/mind: .chat-box tem width:380px fixo e .modal-chat é
     position:fixed com right:30px — em telas <410px o painel estoura a largura
     da viewport. */
  .modal-chat {
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }

  .modal-chat .chat-box {
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
  }

  /* #155051 — MainTemplateExterno.js tem padding lateral fixo de 40px (inline
     style, mantido intacto p/ desktop) em volta de todo o conteúdo das telas
     externas/públicas; em viewports estreitos (iPhone) estoura e corta o
     conteúdo nas laterais. */
  .containerExternoWrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 768px) {
  #page-wrapper {
    padding-bottom: 80px;
  }

  #navBarStaticTopV1::after {
    content: "";
    display: table;
    clear: both;
  }

  #navBarStaticTopV1 .navbar-header {
    float: left;
    display: flex;
    align-items: center;
  }

  #navBarStaticTopV1 .navbar-toggle {
    float: none;
    order: 1;
    margin: 0 10px 0 15px;
  }

  #navBarStaticTopV1 .navbar-header img {
    order: 2;
    margin: 0 15px 0 0 !important;
    height: 30px !important;
  }

  #navBarStaticTopV1 > ul.navbar-top-links {
    float: right;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #navBarStaticTopV1 .navbar-top-links > li.dropdown > a {
    padding: 10px 15px !important;
    min-height: auto !important;
  }

  #navBarStaticTopV1 .navbar-top-links li.dropdown > a:has(> .fa-bell),
  #navBarStaticTopV1 .navbar-top-links li.dropdown > a:has(> .fa-print) {
    font-size: 150% !important;
  }

  #navBarStaticTopV1 .navbar-top-links li.dropdown > a:has(> .fa-user) {
    font-size: 120% !important;
  }

  #navBarStaticTopV1 .navbar-top-links li.dropdown > a:has(> .fa-bell) .fa-caret-down {
    display: none !important;
  }

  #conteudo ol.breadcrumb {
    margin-top: 0;
  }

  /* fix definitivo da busca inline de FiltroContribuinte migrado para a classe
     .utilsBuscaPadrao (ver bloco #155051 no fim do arquivo) — remove a
     dependência de seletor posicional :has()/nth-child, que colidia em especificidade
     com a nova regra baseada em className */

  div.col-lg-12:has(> #slcContrib) > * {
    display: block;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  div.col-lg-12:has(> #slcContrib) > label:first-child {
    margin-top: 0;
  }

  #spyconfigNFSe .panel,
  #spyconfigNFSe [class*="col-"] {
    width: 100% !important;
    float: none !important;
  }

  #page-wrapper #conteudo {
    margin-left: 0;
    margin-right: 0;
  }

  .input-group.date,
  .input-group.input-daterange {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  .input-group.date .form-control,
  .input-group.input-daterange .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 28px;
    min-height: 28px;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
  }

  .input-group.date input[type="date"]::-webkit-date-and-time-value,
  .input-group.input-daterange input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  .input-group.date .input-group-addon,
  .input-group.input-daterange .input-group-addon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    box-sizing: border-box;
  }

  .input-group.date > *:not(:first-child),
  .input-group.input-daterange > *:not(:first-child) {
    margin-left: -1px;
  }

  .input-group.date > *:first-child,
  .input-group.input-daterange > *:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .input-group.date > *:last-child,
  .input-group.input-daterange > *:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .input-group.date > *:not(:first-child):not(:last-child),
  .input-group.input-daterange > *:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .modal-dialog {
    width: auto !important;
    max-width: 100% !important;
    margin: 10px !important;
  }

  .modal.fade {
    overflow-x: hidden;
  }

  .modal-content {
    max-width: 100%;
  }

  .pfi-painel-total {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  div:has(> .panel-pfi):has(+ img#logoPfi) {
    position: static !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    display: inline-block;
  }

  .nav-tabs.nav-justified > li {
    flex: 1 1 0 !important;
    width: auto !important;
  }

  .pfi-toolbar-actions,
  .pfi-toolbar-actions > div {
    text-align: left !important;
  }

  .pfi-toolbar-actions button {
    margin-left: 0 !important;
    margin-right: 8px !important;
    margin-bottom: 6px !important;
  }

  .rowPesquisaAvancadaAbatimento {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .painelPesquisaAvancadaAbatimento {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .toolbarFiltroAbatimento {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .toolbarFiltroAbatimento > * {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width:768px){
  /* #155051 — responsividade Arrecadação */
  .guiaUnificadoraTipoImposto { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

  .debitosFiltroTipos { display:flex; flex-wrap:wrap; gap:5px; }
  .debitosFiltroTipos > .btn { float:none; }

  .arrecMobileBtnGroup { display:flex; flex-wrap:wrap; gap:5px; }
  .arrecMobileBtnGroup > .btn { float:none; }

  .encerramentoLabelInfo [class*="col-xs-"] {
      width:100% !important; float:none !important;
      padding-left:15px !important; padding-right:15px !important;
  }

  .arrecMobileRowGutter { margin-left:0 !important; margin-right:0 !important; }

  .arrecMobileToolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .arrecMobileToolbar > * { margin-left:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
}

@media (max-width:768px){
  /* #155051 — responsividade Cadastros */

  /* reCAPTCHA (~304px fixo) — evita overflow horizontal da página */
  .cadastrosMobileCaptcha { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }

  /* input file de upload ocupa a largura toda */
  .cadastrosMobileUpload { width:100% !important; }

  /* botão "Inserir serviço na lista" dentro de .arrecMobileToolbar — preserva
     o alinhamento com o Input acima (o `> * { margin-left:0 !important }`
     do toolbar zera o inline marginLeft usado pra alinhar com a coluna) */
  .arrecMobileToolbar > .cadastrosMobileBtnInserirServico { margin-left:15px !important; }
}

@media (max-width:768px){
  /* #155051 — responsividade Cobrança */

  /* neutraliza min-width inline (ex.: minWidth:"1200px"/"750px") passado ao .modal-dialog;
     a regra global .modal-dialog já força width:auto/max-width:100%, mas não cobre min-width */
  .cobrancaModalWide { min-width: 0 !important; }

  /* Stepper (Utils, não editável) horizontal — permite rolagem em vez de overflow da página */
  .cobrancaStepperScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

@media (max-width:768px){
  /* #155051 — responsividade DMST (modal Selecionar Antena) */
  .dmstAntenaFiltro { display:flex !important; flex-wrap:nowrap; align-items:center; gap:5px; width:100%; }
  .dmstAntenaFiltro > input { flex:1 1 auto; width:auto !important; min-width:0; margin-left:0 !important; }
  .dmstAntenaFiltro > button { flex:0 0 auto; }

  /* #155051 — responsividade PFI (Processos do Funcionário — quadro Kanban) */
  .pfiKanbanBoard { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pfiKanbanBoard > div { min-width:240px; width:auto !important; flex:0 0 auto; }

  /* #155051 — responsividade PFI (Comunicações — botões de ação) */
  .pfiComunicacaoBotoes { flex-wrap:wrap; }
}

@media (max-width:768px){
  /* #155051 — NFSe Consulta de Lotes: padding compensa o gutter negativo do Bootstrap
     (-15px), que sangrava o checkbox "erro interno" até a borda do viewport no mobile. */
  .nfseFiltroErroInterno {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    width: 100%;
  }

  /* #155051 — responsividade NFSe (Consulta Externa — btn-group "Filtrar por").
     No mobile o btn-group (Chave de Acesso / Chave de Acesso Nacional / Código de
     Verificação / RPS-e papel / RPS-e ABRASF) não cabe na largura da tela. Scroll
     horizontal só aqui, sem afetar o desktop. */
  .nfseFiltroTipoScroll {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width:768px){
  /* #155051 follow-ups — polimento responsivo */

  /* Cobrança item 1 — modal "Abrir" débito (DebitoView): label(col-xs-2) e valor colidem → empilha */
  .cobrancaDebitoViewStack [class*="col-xs-"] {
      width:100% !important; float:none !important;
      padding-left:15px !important; padding-right:15px !important;
  }

  /* Cobrança item 2 — "Ação que será gerada": zera padding do col-md-12 interno do Input p/ alinhar */
  .cobrancaAcaoGeradaSelect { padding-left:0 !important; padding-right:0 !important; }

  /* Cobrança item 3 — ControlePrescricao: contém os canvas Chart.js p/ a página não rolar horizontal */
  .cobrancaPrescricaoPanel { display:block !important; }
  .cobrancaPrescricaoPanel > .row { margin-left:0 !important; margin-right:0 !important; }
  .cobrancaPrescricaoChartCol { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; }
  /* #155051 — altura fixa + position:relative: Chart.js mede o container pra não reexpandir. */
  .cobrancaChartWrap { position:relative; width:100%; height:240px; }

  /* PFI item 5 — Consulta: botão azul "...sou responsável" full-width + quebra de texto */
  .pfiConsultaBtnResponsavel {
      width:100% !important; white-space:normal !important;
      margin-right:0 !important; box-sizing:border-box; font-size:1em !important;
  }

  /* PFI item 6 — Caixa de Entrada (ProcessosFuncionario): abas roláveis em vez de espremidas */
  .pfiAbasScroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pfiAbasScroll .nav-tabs.nav-justified > li { flex:0 0 auto !important; width:auto !important; }
  .pfiAbasScroll .nav-tabs.nav-justified > li > a { white-space:nowrap; }

  /* Utils — Modal.js: rodapé de modal com múltiplos botões/<ButtonValidation> espaçados via
     style inline marginLeft (só faz sentido lado a lado). Ao quebrar linha no mobile, cada
     botão herda uma posição diferente e o rodapé fica desalinhado. Classe genérica e
     reaproveitável em qualquer <ModalFooter className="utilsModalFooterStack">: empilha os
     botões em coluna, largura cheia, com espaçamento vertical consistente — sem alterar o
     comportamento desktop (lado a lado). Depende de Modal.js repassar o className do
     ModalFooter para a div do rodapé que ele renderiza. Ref.: Aviso.js, Mensagens.js. */
  .utilsModalFooterStack,
  .utilsModalFooterStack > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px;
      width: 100%;
  }
  .utilsModalFooterStack > *,
  .utilsModalFooterStack > div > * {
      margin: 0 !important;
      width: 100%;
      box-sizing: border-box;
  }

  /* #155051 — item 7: padrão único de busca inline; depende da ordem real dos filhos
     diretos de .utilsBuscaPadrao ser [span, input, ação?]. */
  .utilsBuscaPadrao {
      display:flex !important; flex-flow:row wrap; align-items:center !important;
      gap:6px; width:100%; margin-left:0;
  }
  .utilsBuscaPadrao > span { flex:1 1 100%; margin:0 !important; white-space:normal !important; }
  .utilsBuscaPadrao input, .utilsBuscaPadrao .form-control {
      flex:1 1 auto; width:auto !important; min-width:0; margin:0 !important;
  }
  .utilsBuscaPadrao > a, .utilsBuscaPadrao > button { flex:0 0 auto; margin:0 !important; }

  /* #155051 — Cadastros > Contribuintes: FiltroContribuinte.js envolve .utilsBuscaPadrao
     num .row próprio sem coluna que compense a margem negativa do Bootstrap; :has()
     alcança só esse caso, sem afetar o uso em Table.js. */
  .row:has(> .utilsBuscaPadrao) { margin-left:0 !important; margin-right:0 !important; }

  /* Cadastros item 8 — Contribuinte seção DTE: clipa estouro do grid; tabelas já rolam via .table-responsive */
  .cadastrosContribuinteDte { max-width:100%; overflow-x:hidden; }
  .cadastrosContribuinteDte > .col-sm-12 {
      width:100% !important; box-sizing:border-box;
      padding-left:0 !important; padding-right:0 !important;
  }
  /* Achado 5 — DTE e Contador com MESMO recuo/largura no mobile */
  .cadastrosBlocoContribuinte { margin:0 !important; padding-left:15px !important; padding-right:15px !important; box-sizing:border-box; }
  /* #155051 — a toolbar do Table.js fica vários níveis abaixo (não filho direto); seletor
     sem ">" pega qualquer .row descendente, senão a margem negativa vaza e corta o botão. */
  .cadastrosBlocoContribuinte .row { margin-left:0 !important; margin-right:0 !important; }
  .cadastrosBlocoContribuinte [class*="col-"] { padding-left:0 !important; padding-right:0 !important; }
}

@media (max-width:768px){
  /* #155051 follow-ups (device) — PFI + polimento */

  /* Achado 2 — Executar Etapa: barra de ações (RolagemCarousel) rolável, escopada a esta tela */
  .pfiExecutarEtapaAcoes .item-provider { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }

  /* Achado 2 — Stepper "Publicar Documentos" rolável (escopado; não afeta IniciarAcao) */
  .pfiExecutarEtapaStepper { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  .pfiExecutarEtapaStepper .gif4-steper-item { width:auto !important; min-width:110px; }

  /* Achado 2 — painel de alocação (width:500px fixo) e cards de 200px */
  .pfiEtapaAlocPanel { width:100% !important; max-width:100%; }
  .pfiEtapaAlocCards { flex-wrap:wrap; gap:8px; }
  .pfiEtapaAlocCards > div { width:100% !important; }

  /* Achado 4 — Caixa de Entrada: card do responsável proporcional */
  .pfiResponsavelCol { padding-left:15px !important; padding-right:15px !important; margin-bottom:10px; }
  .pfiResponsavelCard { max-width:100% !important; margin-bottom:0 !important; padding:8px !important; }
  .pfiResponsavelCard i { font-size:28px !important; }
  .pfiResponsavelCard span { font-size:14px !important; }
}

@media (max-width:768px){
  /* #155051 — Caixa de Entrada (ProcessosFuncionario): remodelagem completa mobile */

  /* Card do responsável: nome+avatar coladas do lado esquerdo (em vez de space-between
     espalhando pela largura toda que o card ganha em max-width:100% neste breakpoint) */
  .pfiResponsavelCard { justify-content:flex-start !important; gap:10px; }

  /* Kanban: affordance de que há mais colunas fora da viewport — sombra/gradiente fixa na
     borda direita do wrapper (que não rola) sobre o conteúdo do board (que rola por baixo) */
  .pfiKanbanScrollWrap { position:relative; }
  .pfiKanbanScrollWrap::after {
      content:'';
      position:absolute;
      top:0; right:0; bottom:0;
      width:28px;
      background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.14));
      pointer-events:none;
  }

  /* Hierarquia/espaçamento — guiar o olho entre os 4 blocos (busca → abas → card → kanban) */
  .pfiAbasScroll { margin-bottom:10px; }
  .pfiKanbanScrollWrap { margin-top:6px; }
}

@media (max-width:768px){
  /* #155051 — Caixa de Entrada (ProcessosFuncionario): Kanban horizontal vira acordeão vertical
     por status apenas no mobile (renderAcordeonMobile); o Kanban de desktop (renderKanbanDesktop)
     permanece intacto e não é renderizado neste breakpoint. */
  .pfiAcordeonWrap { width:100%; }

  .pfiAcordeonStatus {
      border: 1px solid #d5d5d5;
      border-radius: 4px;
      margin-bottom: 8px;
      overflow: hidden;
  }

  .pfiAcordeonHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background-color: #eff7fd;
      cursor: pointer;
      font-weight: bold;
  }

  .pfiAcordeonCount {
      background-color: #fff;
      border: 1px solid #d5d5d5;
      border-radius: 10px;
      padding: 1px 8px;
      font-size: 12px;
  }

  .pfiAcordeonBody {
      padding: 10px;
      background-color: #fff;
  }

  /* Cabeçalho contextual: amarra visualmente o acordeão à aba selecionada acima */
  .pfiAbasContexto {
      background-color: #eff7fd;
      border-left: 3px solid #337ab7;
      border-radius: 4px;
      padding: 8px 12px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #337ab7;
  }

  .pfiAbasContexto i {
      margin-right: 4px;
  }
}

@media (max-width:768px){
  /* #155051 — Caixa de Entrada (ProcessosFuncionario): abas viram botões empilhados
     full-width apenas no mobile (renderAbasMobile); o <Abas> de desktop permanece intacto
     e não é renderizado neste breakpoint. */
  .pfiAbasMobile { width:100%; margin-bottom:10px; }

  .pfiAbasMobile .btn {
      text-align: left;
      white-space: normal;
      margin-bottom: 6px;
  }
}

@media (max-width:768px){
  /* #155051 — Movimento Mensal (QueryAudMovimento): abas quebram em múltiplas linhas
     (~2 por linha) em vez de rolar horizontalmente sem indicação. */
  .audMovimentoQueryAbas .nav-tabs.nav-justified{
      flex-wrap: wrap!important;
      overflow-x: visible!important;
  }

  .audMovimentoQueryAbas .nav-tabs.nav-justified > li{
      flex: 1 1 auto!important;
      width: auto!important;
      min-width: 45%;
      border-bottom: 0;
  }
}

@media (max-width:768px){
  /* #155051 — Guia Unificadora (Débitos): botão "Gerar e imprimir guia" ultrapassava
     a largura da tela; alinhar à mesma margem lateral do campo "Data para pagamento". */
  #formImpressaoGuia .guiaGerarImprimirBtn{
      display: block;
      width: auto;
      margin: 15px 15px 0 15px !important;
  }
}

@media (max-width:768px){
  /* #155051 — Movimento Mensal (QueryAudMovimento), aba Período: o componente
     compartilhado SelectMultiMes usa width:520px fixo inline (label+popover e o
     painel com a grade de meses), estourando a largura da tela no mobile.
     Sobrescrever via wrapper apenas neste ponto, sem alterar o componente. */
  .audMovimentoPeriodoMobile > div > div > div{
      width: 100% !important;
  }
}

@media (max-width:768px){
  /* #155051 — PGDAS-D (ConsultaPgdas): botão "Confirmar" ficava desalinhado
     em relação aos campos do filtro acima; alinhar à mesma margem lateral. */
  #filtroConsulta .pgdasConfirmarBtn{
      display: block;
      width: auto;
      margin: 15px 15px 0 15px !important;
  }
}

@media (max-width:768px){
  /* #155051 — modal mobile: cresce com o conteúdo e rola o overlay, em vez de cap de
     altura + scroll interno (Modal.js:79 aplica max-height/overflow-y inline no
     .modal-body; e Modal.js:56 deixa o .modal.fade com overflow:visible). Regra global
     para todos os modais no mobile. */
  .modal .modal-body {
      max-height: none !important;
      overflow-y: visible !important;
  }
  .modal-content {
      max-height: none !important;
      overflow: visible !important;
  }
  .modal.fade {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
  }
}

@media (max-width:768px){
  /* #155051 — modal "Pagar" (MinhasDividas/Cobrança): o DebitoView é alto e a regra
     global de modal (acima) deixa o footer tampar o fim do conteúdo sem rolagem
     disponível. Escopo local (não altera a regra global): corpo com altura
     limitada ao viewport, rolando por dentro, header/footer fixos. */
  .cobrancaDebitoPagarModal.modal-dialog {
      margin: 5px auto;
  }
  .cobrancaDebitoPagarModal .modal-content {
      /* fallback p/ browsers sem suporte a dvh; 10px = 2x margin do modal-dialog acima */
      max-height: calc(100vh - 10px) !important;
      max-height: calc(100dvh - 10px) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden !important;
  }
  .cobrancaDebitoPagarModal .modal-header,
  .cobrancaDebitoPagarModal .modal-footer {
      flex-shrink: 0;
  }
  .modal-dialog.cobrancaDebitoPagarModal .modal-body,
  .modal-dialog.cobrancaDebitoPagarModal .modal-body.overflow-unset {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
  }
}

@media (max-width:768px){
  /* #155051 — modal "Gerar Débito Parcial de ISSQN" (GuiaParcialNFSe/NFSe): campos
     de vencimento/valores/acréscimos são altos e a regra global de modal (acima)
     deixa o footer (Confirmar/Cancelar) tampar o fim do conteúdo sem rolagem
     disponível. Escopo local (não altera a regra global): corpo com altura
     limitada ao viewport, rolando por dentro, header/footer fixos. */
  .nfseGuiaParcialDebitoModal.modal-dialog {
      margin: 5px auto;
  }
  .nfseGuiaParcialDebitoModal .modal-content {
      /* fallback p/ browsers sem suporte a dvh; 10px = 2x margin do modal-dialog acima */
      max-height: calc(100vh - 10px) !important;
      max-height: calc(100dvh - 10px) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden !important;
  }
  .nfseGuiaParcialDebitoModal .modal-header,
  .nfseGuiaParcialDebitoModal .modal-footer {
      flex-shrink: 0;
      padding: 8px 15px;
  }
  .modal-dialog.nfseGuiaParcialDebitoModal .modal-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
  }
  .nfseGuiaParcialDebitoModal .modal-body .form-group {
      margin-bottom: 8px;
  }
}

@media (max-width:768px){
  /* #155051 — MinhasDividas (Cobrança): "Selecione os débitos desejados para o
     parcelamento" — select de tipo, cards de ação e tabela ficavam colados ao
     empilhar as colunas Bootstrap (sem gutter vertical nativo). */
  .cobrancaSelecaoDebitosMobile > div {
      margin-bottom: 15px;
  }
}

@media (max-width:768px){
  /* #155051 — Cadastros (SolicitacoesCredenciamento — detalhe da solicitação):
     coluna col-xs-9 herdada do desktop mantinha os botões "Baixar formulário"/
     "Anexo <descrição>" (label dinâmico, às vezes longo) em pull-right dentro de
     75% da largura — o botão de anexo estourava pra fora do painel à esquerda,
     cortando o texto. */
  .cadastrosCredenciamentoAcoesCol { width:100% !important; float:none !important; }
  .cadastrosCredenciamentoBtnWrap { float:none !important; width:100%; margin-left:0 !important; }
  .cadastrosCredenciamentoBtnAcao {
      width:100%; box-sizing:border-box; text-align:left;
      white-space:normal !important; word-break:break-word;
  }

  /* rodapé (Atender solicitação / Fechar) empilhado com gap em vez de inline marginLeft */
  .cadastrosCredenciamentoFooter { display:flex; flex-wrap:wrap; gap:10px; }
  .cadastrosCredenciamentoFooter button { margin-left:0 !important; }
}

@media (min-width:768.02px) and (max-width:1024px){
  /* #155051 — faixa tablet (769-1024): estende para tablet os fixes de
     ConsultaExterna (NFSe) e ControlePrescricao (Cobrança) que só existiam em @768 */
  .nfseFiltroTipoScroll {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
  }

  .cobrancaPrescricaoPanel { display:block !important; }
  .cobrancaPrescricaoPanel > .row { margin-left:0 !important; margin-right:0 !important; }
  .cobrancaPrescricaoChartCol { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; box-sizing:border-box; }

  /* #155051 — #conteudo/#conteudoSemMenu são sempre .row (MainTemplate V1/V2);
     o gutter -15px duplica com o .row de topo de cada tela. Seletor por id+classe
     (especificidade maior) cobre V1, V2 e o modo sem-menu. */
  #conteudo.row, #conteudoSemMenu.row { margin-left: 0; margin-right: 0; }

  /* #155051 — Cadastros (SolicitacoesCredenciamento): mesmo estouro do col-sm-9
     herdado do desktop, agora na faixa tablet (col-sm-* já vale a partir de 768px) */
  .cadastrosCredenciamentoAcoesCol { width:100% !important; float:none !important; }
  .cadastrosCredenciamentoBtnWrap { float:none !important; width:100%; margin-left:0 !important; }
  .cadastrosCredenciamentoBtnAcao {
      width:100%; box-sizing:border-box; text-align:left;
      white-space:normal !important; word-break:break-word;
  }
}