.icon {
    width: 20px;
    background-position: center center;
    background-size: 20px;
    background-repeat: no-repeat;
}

.icon.small {
    background-size: 9px;
}

.icon.medium {
    background-size: 15px;
}

.icon.big {
    background-size: 25px;
}

.icon.close {
    background-size: 20px;
}

.icon.medium-big {
    background-size: 12px;
}

.icon-button {
    cursor: pointer;
}

.icon-pencil-blue {
    background-image: url(../images/icons/pencil_blue.svg);
}

.icon-pencil {
    background-image: url(../images/icons/pencil.svg);
}

.icon-search {
    background-image: url(../images/icons/search.svg);
}
.icon-expand {
    background-image: url(../images/icons/expand-svgrepo-com.svg);
}


.icon-next {
    background-image: url(../images/icons/angle-right.svg);
}

.icon-previous {
    background-image: url(../images/icons/angle-left.svg);
}

.icon-first {
    background-image: url(../images/icons/two-left-arrows.svg);
}

.icon-last {
    background-image: url(../images/icons/fast-forward.svg);
}

.icon-check {
    background-image: url(../images/icons/clipboard.svg);
}

.icon-checkunmark {
    background-image: url(../images/icons/icons-check.svg);
}

.icon-starshape {
    background-image: url(../images/icons/star-shape.svg);
}

.icon-starshapeblack {
    background-image: url(../images/icons/star-shape-black.svg);
}

.icon-checkmark {
    background-image: url(../images/icons/icons-checkmark.svg);
}

.icon-clock {
    background-image: url(../images/icons/clock.svg);
}

.icon-cross {
    background-image: url(../images/icons/cross.svg);
}

.icon-printer {
    background-image: url(../images/icons/printer.svg);
}

.icon-cross-white {
    background-image: url(../images/icons/cross-white.svg);
}

.icon-circle-right {
    background-image: url(../images/icons/circle-right.svg);
}

.icon-circle-down {
    background-image: url(../images/icons/circle-down.svg);
}

.icon-stop {
    background-image: url(../images/icons/stop.svg);
}

.icon-play {
    background-image: url(../images/icons/play.svg);
}

.icon-pause {
    background-image: url(../images/icons/pause.svg);
}

.icon-copy {
    background-image: url(../images/icons/copy.svg);
}

.icon-minus {
    background-image: url(../images/icons/minus.svg);
}

.icon-plus {
    background-image: url(../images/icons/plus.svg);
}

.icon-less {
    background-image: url(../images/icons/less.svg);
}

.icon-file-text {
    background-image: url(../images/icons/file-text.svg);
}

.icon-eye {
    background-image: url(../images/icons/eye.svg);
}

.icon-eye-blocked {
    background-image: url(../images/icons/eye-blocked.svg);
}

.icon-download {
    background-image: url(../images/icons/download.svg);
}

.icon-menu {
    background-image: url(../images/icons/menu.svg);
}

.icon-online-pay {
    background-image: url(../images/icons/online-pay.svg);
}

.icon-table {
    background-image: url(../images/icons/table.svg);
}

.icon-refresh {
    background-image: url(../images/icons/refresh-button.svg);
}

.icon-download-arquivo {
    background-image: url(../images/icons/download-arquivo.svg);
}

.icon-file-positivo {
    background-image: url(../images/icons/file-positivo.svg);
}

.icon-file-negativo {
    background-image: url(../images/icons/file-negativo.svg);
}

.icon-file-empty {
    background-image: url(../images/icons/folder.svg);
}

.icon-file-full {
    background-image: url(../images/icons/folder-full.svg);
}

.icon-cancel {
    background-image: url(../images/icons/error.svg);
}

.icon-view-document {
    background-image: url(../images/icons/view-document.svg);
}

.icon-arrow-up {
    background-image: url(../images/icons/arrow-up.svg);
}

.icon-file-eye {
    background-image: url(../images/icons/file-eye.svg);
}

.icon-file-download {
    background-image: url(../images/icons/file-download.svg);
}

.icon-file-close {
    background-image: url(../images/icons/close.svg);
}

.icon-copy-information {
    background-image: url(../images/icons/copy-information.svg);
}

.icon-upload-file {
    background-image: url(../images/icons/upload-file.svg);
}

.icon-arrow-up-table {
    background-image: url(../images/icons/arrow-up-table.svg);
}

.icon-arrow-down-table {
    background-image: url(../images/icons/arrow-down-table.svg);
}

.icon-trash-table {
    background-image: url(../images/icons/trash-table.svg);
}

.icon-move-table {
    background-image: url(../images/icons/move-table.svg);
}

.icon-mensage {
    background-image: url(../images/icons/mesage.svg);
}

.icon-view-process {
    background-image: url(../images/icons/view-process.svg);
}

.icon-pencil-wf {
    background-image: url(../images/icons/pencil_wf.svg);
}

.icon-less-wf {
    background-image: url(../images/icons/less_wf.svg);
}

.icon-plus-wf {
    background-image: url(../images/icons/plus_wf.svg);
}

.icon-plus-black {
    background-image: url(../images/icons/plus-black.svg);
}

.icon-play-continue {
    background-image: url(../images/icons/play-pause.svg);
}

.icon-information {
    background-image: url(../images/icons/information.svg);
}

.icon-distribuicao {
    background-image: url(../images/icons/distribuicao.svg);
}

.icon-andamento {
    background-image: url(../images/icons/andamento.svg);
}

.icon-publicacao {
    background-image: url(../images/icons/publicacao.svg);
}

.icon-back-menor {
    background-image: url(../images/icons/back.svg);
}

.icon-next-menor {
    background-image: url(../images/icons/next.svg);
}

.icon-arrow-down {
    background-image: url(../images/icons/arrow-down.svg);
}

.icon-documents {
    background-image: url(../images/icons/documentos.svg);
}

.icon-doble-check {
    background-image: url(../images/icons/dupla-verificacao.svg);
}
.icon-google-maps {
    background-image: url(../images/icons/google-maps.svg);
}

.icon-envelope-full {
    background-image: url(../images/icons/envelope_full.svg);
}

.icon-envelope-empty {
    background-image: url(../images/icons/envelope_empty.svg);
}

.icon-document {
    background-image: url(../images/icons/document_edit.svg);
}

.icon-thumb-down {
    background-image: url(../images/icons/thumbdown.svg);
}

.icon-thumb-up {
    background-image: url(../images/icons/thumbup.svg);
}

.icon-thumb-up-green {
    background-image: url(../images/icons/thumbupgreen.svg);
}

.icon-thumb-up-red {
    background-image: url(../images/icons/thumbdownred.svg);
}


.icon-lista-andamento {
    background-image: url(../images/icons/lista-andamento.svg);
}

.icon-kia {
    background-image: url(../images/icons/kia.svg);
}

.icon-refreshia {
    background-image: url(../images/icons/refreshia.svg);
}
.icon-edit {
    background-image: url(../images/icons/edit.svg);
    
}.icon-editsalve {
    background-image: url(../images/icons/editsalve.svg);
}.icon-graphic {
    background-image: url(../images/icons/graphic.svg);
}.icon-export {
    background-image: url(../images/icons/export.svg);
}.icon-printerAgPub {
    background-image: url(../images/icons/printerAgPub.svg);
}.icon-addPlus {
    background-image: url(../images/icons/addPlus.svg);
}.icon-addCalendar {
    background-image: url(../images/icons/addCalendar.svg);
}

/* ÍCONES - Integração */
.icon-kiaIntegracao {
    background-image: url(../images/icons/integracoes/KIA.png);
}
.icon-KIAWhite {
    background-image: url(../images/icons/integracoes/KIAWhite.svg);
}
.icon-documentIntegracao {
    background-image: url(../images/icons/integracoes/document.png);
}
.icon-paperClipIntegracao {
    background-image: url(../images/icons/integracoes/Paperclip.png);
}
.icon-penIntegracao {
    background-image: url(../images/icons/integracoes/Pen.png);
}
.icon-verifyIntegracao {
    background-image: url(../images/icons/integracoes/verify.png);
}
.icon-ellipsisIntegracao {
    background-image: url(../images/icons/integracoes/ellipsis.svg);
}


.icon-recarregarListaIntegracao {
    background-image: url(../images/icons/integracoes/recarregarLista.svg);
}
.icon-checklistIntegracao {
    background-image: url(../images/icons/integracoes/checklist.svg);
}
.icon-visualizarIntegracao {
    background-image: url(../images/icons/integracoes/visualizar.svg);
}
.icon-copiarIntegracao {
    background-image: url(../images/icons/integracoes/copiar.svg);
}
.icon-excluiIntegracao {
    background-image: url(../images/icons/integracoes/excluir.svg);
}


/* Estilo para todos os botões específicos */
.icon-first.medium-big,
.icon-previous.small,
.icon-refresh.medium-big,
.icon-next.small,
.icon-last.medium-big {
    background-color: white;
    /* Fundo branco */
    color: #007bff;
    /* Texto ou ícone azul */
    border-radius: 12px;
    /* Bordas arredondadas */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra leve */
    padding: 8px;
}

/* Efeito ao passar o mouse */
.icon-first.medium-big:hover:not(:disabled),
.icon-previous.small:hover:not(:disabled),
.icon-refresh.medium-big:hover:not(:disabled),
.icon-next.small:hover:not(:disabled),
.icon-last.medium-big:hover:not(:disabled) {
    background-color: #f0f0f0;
    /* Fundo cinza claro ao passar o mouse */
    transform: scale(1.05);
    /* Aumenta o botão levemente */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    /* Sombra mais forte ao passar o mouse */
}

/* Estilo para botões desabilitados */
.icon-first.medium-big:disabled,
.icon-previous.small:disabled,
.icon-refresh.medium-big:disabled,
.icon-next.small:disabled,
.icon-last.medium-big:disabled {
    background-color: #e0e0e0;
    /* Fundo cinza claro para desabilitados */
    cursor: not-allowed;
    /* Cursor de não permitido */
}

/* Container dos balões */

.balloon {
    background-color: #f5f5f5;
    padding: 10px 16px;
    border-radius: 16px;
    max-width: 400px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.balloon.collapsed {
    max-height: 40px;      /* altura mínima */
    padding: 6px 12px;     /* padding menor */
}

.balloon-container {
    display: flex;
    justify-content: center;
    gap: 160px;
    margin-top: 20px;     
    margin-bottom: 20px;
    flex-wrap: wrap;
    transition: gap .4s ease, margin .4s ease, justify-content .4s ease;
  }
  
  /* Botão balão */
  .balloon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 40px 60px;       /* tamanho do balão */
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    transition: transform .6s, box-shadow .8s, padding .4s ease, font-size .4s ease, border-radius .4s ease;

  }
  
  /* Cores diferentes para os balões */
  .balloon-button.processo { background-color: #2196F3; }
  /* .balloon-button.situacao { background-color: #4CAF50; } */
  
  /* Hover */
  .balloon-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  }
  
  /* Pontinha do balão */
  .balloon-button::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #000;
    z-index: 0;
  }
  
  /* Pontinha com cores diferentes */
.balloon-button.processo::after { border-top-color: #2196F3; }

.balloon-container.compacto {
    justify-content: center; /* centraliza os balões */
    gap: 20px;              
    margin-top: 10px;        
}

.balloon-container.compacto .balloon-button {
    padding: 15px 36px;
    font-size: 12px;
    border-radius: 4px;
    display: inline-flex;        /* mantém o texto centralizado */
    align-items: center;
    justify-content: center;
    text-align: center;
}
    
  /* Primeiro balão (aponta para a direita) */
.balloon-button.processo:first-child::after {
    left: 70%;          /* ajusta para apontar para o meio entre os balões */
    transform: translateX(-50%);
    border-top-color: #2196F3;
}

/* Segundo balão (aponta para a esquerda) */
.balloon-button.processo:last-child::after {
    left: 30%;          /* ajusta para apontar para o meio entre os balões */
    transform: translateX(-50%);
    border-top-color: #2196F3;
}