/* Estilo base para o corpo da página, opcional mas recomendado */
html, body {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */ /* Teste comentando esta linha */
    background-color: #f4f4f4;
    color: #333;
}

* Se você adicionou a classe ao body */
body.minha-tela-larga .container {
    max-width: none; /* Remove o limite */
    padding-left: 15px; /* Mantenha algum padding se quiser */
    padding-right: 15px;
}

/* OU, se você envolveu seu conteúdo com <div class="minha-tela-larga"> */
.minha-tela-larga .container {
    max-width: none;
}

/* OU, a forma mais 'bruta', mas afeta TUDO (use com cuidado!) */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 100% !important; /* Força 100% - Menos recomendado */
}


/* Container principal do formulário */
.ticketform-container {
    width: 95%;
    margin: 20px auto; /* Centraliza o container e adiciona uma margem no topo/baixo */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

    /* Estilo para o título do formulário */
    .ticketform-container h1 {
        text-align: center;
        color: #333;
        margin-bottom: 25px;
    }

/* Estilo para cada grupo de informação */
.ticketform-group {
    margin-bottom: 15px; /* Espaçamento entre os grupos */
}

/* Estilo para os rótulos (labels) */
.ticketform-label {
    display: block; /* Faz o label ocupar a linha inteira */
    margin-bottom: 5px; /* Espaçamento entre o label e o campo de input */
    font-weight: bold;
    color: #555;
}

/* Estilo para os campos de input */
.ticketform-input {
    width: 100%; /* Faz o input ocupar toda a largura do seu container pai (.ticketform-group) */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
    font-size: 1em;
}

    .ticketform-input:focus {
        border-color: #007bff;
        outline: none; /* Remove o outline padrão do navegador */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
    }

/* Estilo para a área de ações (botões) */
.ticketform-actions {
    margin-top: 25px;
    text-align: right; /* Alinha o botão à direita */
}

/* Estilo para botões */
.ticketform-button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

    .ticketform-button:hover {
        background-color: #0056b3;
    }

/* Media query para responsividade (opcional, mas bom para diferentes tamanhos de tela) */
@media (max-width: 768px) {
    .ticketform-container {
        width: 98%; /* Ajusta a largura para telas menores */
        margin: 10px auto;
        padding: 15px;
    }

    .ticketform-input {
        font-size: 0.95em;
    }

    .ticketform-button {
        width: 100%; /* Botão ocupa largura total em telas pequenas */
        text-align: center;
        margin-top: 10px;
    }

    .ticketform-actions {
        text-align: center;
    }
}



/* Overlay para ajudar na centralização e cobrir a tela */
.tkt_login_overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    margin-top: 30px;
}

/* Container principal do formulário de login */
.tkt_login_container {
    background-color: #ffffff;
    padding: 30px 40px; /* Aumentado o padding lateral */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 700px; /* Largura máxima do container */
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
    overflow: hidden; /* Garante que a div em si não tenha scroll */
}

/* Opcional: Cabeçalho dentro do container */
.tkt_login_header {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

    .tkt_login_header h1 {
        margin: 0;
        font-size: 24px;
    }

/* Classe base para as linhas */
.tkt_login_row {
    margin-bottom: 20px; /* Espaçamento entre as linhas */
}

    .tkt_login_row:last-child {
        margin-bottom: 0; /* Remove a margem da última linha */
    }

/* Estilo para o campo de input de e-mail */
.tkt_login_input_email {
    width: 100%;
    padding: 12px 15px; /* Padding interno */
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box; /* Importante para o width 100% */
    font-size: 16px;
}

    .tkt_login_input_email:focus {
        border-color: #007bff; /* Cor da borda ao focar */
        outline: none; /* Remove o outline padrão */
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Efeito de foco sutil */
    }

/* Linha que contém os botões (usando flexbox para as colunas) */
.tkt_login_buttons_row {
    display: flex;
    justify-content: space-between; /* Distribui espaço entre as colunas */
    gap: 15px; /* Espaçamento entre as colunas (botões) */
}

/* Colunas para os botões */
.tkt_login_column {
    flex-basis: calc(50% - 7.5px); /* 50% da largura menos metade do gap */
    display: flex; /* Para o botão poder ter width 100% da coluna */
}

/* Estilo base para os botões */
.tkt_login_button {
    width: 100%; /* Botão ocupa toda a largura da sua coluna */
    padding: 12px 15px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    text-align: center;
}

    .tkt_login_button:hover {
        opacity: 0.9;
    }

/* Estilo para o botão primário */
.tkt_login_button_primary {
    background-color: #007bff;
    color: white;
}

/* Estilo para o botão secundário */
.tkt_login_button_secondary {
    background-color: #6c757d;
    color: white;
}

/* Ajustes para telas menores (opcional, mas recomendado) */
@media (max-width: 480px) {
    .tkt_login_container {
        padding: 20px;
        margin-left: 15px; /* Adiciona margens laterais para não colar nas bordas */
        margin-right: 15px;
        max-width: calc(100% - 30px); /* Garante que as margens sejam respeitadas */
    }

    .tkt_login_buttons_row {
        /* flex-direction: column; /* Empilha os botões em telas pequenas */
        /* gap: 10px; */
    }

    .tkt_login_column {
        /* flex-basis: 100%; /* Colunas ocupam 100% quando empilhadas */
    }

    .tkt_login_input_email,
    .tkt_login_button {
        font-size: 15px; /* Ajusta o tamanho da fonte */
        padding: 10px 12px;
    }
}

*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: Arial, sans-serif;
    height: 100%;
    /* overflow: hidden; */ /* TESTE: Comente esta linha primeiro para diagnóstico */
    /* Se precisar evitar scroll horizontal na página, use overflow-x: hidden; */
    background-color: #f4f4f4;
    color: #333;
}

.tkt_dtls_page_container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    height: 100%; /* Para ocupar a altura do body */
    display: flex; /* Para gerenciar a altura das linhas filhas */
    flex-direction: column;
}

/* Estilo para as Linhas Principais */
.tkt_dtls_main_row {
    margin-bottom: 1rem;
}

    .tkt_dtls_main_row:last-child {
        margin-bottom: 0;
    }

/* Primeira Linha Principal */
.tkt_dtls_main_row_one {
    display: flex;
    gap: 1rem;
    flex-grow: 1; /* Para que esta linha ocupe o espaço vertical disponível no .tkt_dtls_page_container */
    min-height: 0; /* Importante para flex children que podem precisar encolher */
    /* overflow: hidden; */ /* Descomente se esta linha estiver causando scroll indesejado no seu pai */
}

.tkt_dtls_title_row {
    width: 100%; /* Garante que ocupe toda a largura */
    background-color: #ffffff; /* Mesma cor de fundo das colunas (ou outra, se preferir) */
    padding: 1rem; /* Espaçamento interno, igual às colunas */
    margin-bottom: 1rem; /* Espaçamento para a linha de baixo, igual a .tkt_dtls_main_row */
    box-sizing: border-box; /* Boa prática para incluir padding na largura total */
    /* Adicione aqui qualquer outro estilo que desejar: font-size, border, etc. */
}

/* Colunas Principais (Esquerda e Direita) */
/* Removida a propriedade 'flex' da regra genérica .tkt_dtls_main_column
   para evitar conflito com as definições específicas de 30/70 abaixo. */
.tkt_dtls_main_column {
    min-width: 280px;
    background-color: #ffffff;
    padding: 1rem;
    height: 100%; /* Ocupa a altura da .tkt_dtls_main_row_one */
    display: flex; /* Para que os .xxx_column_content possam usar height: 100% efetivamente */
    flex-direction: column;
}

/* Coluna da Esquerda com 30% */
.tkt_dtls_main_row_one > .tkt_dtls_main_column.tkt_dtls_left_column { /* Adicionado '>' para clareza/especificidade */
    flex: 1 1 calc(30% - 0.5rem); /* flex-grow, flex-shrink, flex-basis */
}

/* Coluna da Direita com 70% */
.tkt_dtls_main_row_one > .tkt_dtls_main_column.tkt_dtls_right_column {
    flex: 1 1 calc(70% - 0.5rem); /* flex-grow, flex-shrink, flex-basis */
}

.tkt_dtls_left_column_content {
    flex-grow: 1; /* Para ocupar espaço na coluna da esquerda */
    min-height: 0;
    /* Se o conteúdo aqui também precisar de scroll: */
    /* overflow: auto; */
}

.tkt_dtls_inner_row {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    /*background-color: #e9ecef;*/
}

    .tkt_dtls_inner_row:last-child {
        margin-bottom: 0;
    }

.tkt_dtls_right_column_content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa a altura da .tkt_dtls_right_column */
    /* Se a coluna da esquerda for muito alta e você quiser limitar esta coluna: */
    /* max-height: calc(100vh - alturaDeOutrosElementosFixos); */
    /* Exemplo para teste direto de altura: */
    /* max-height: 700px; */ /* Isso FORÇARIA o conteúdo da aba a rolar se maior */
}

/* Container dos cabeçalhos das abas DevExtreme */
#withText {
    flex-shrink: 0; /* Para não ser comprimido */
}

/* Conteúdo das abas */
.tkt_dtls_tab-content {
    padding: 20px; /* RESTAURADO */
    border: 1px solid #ddd; /* RESTAURADO */
    margin-top: -1px; /* RESTAURADO (se este era o estilo original para sobrepor) */
    /* box-sizing: border-box;  Já está no seletor universal '*' */

    flex-grow: 1; /* Ocupa o espaço vertical restante */
    overflow-y: auto; /* Adiciona scroll vertical se necessário */
    min-height: 0; /* Crucial para o overflow em flex children */
}

/* Linha inferior para o Log */
.tkt_dtls_main_row_two {
    flex-shrink: 0; /* Para que esta linha não seja esmagada pelo flex-grow da .tkt_dtls_main_row_one */
}

/* ... (restante do seu CSS, incluindo media queries) ... */

/* Ajuste na Media Query para garantir que o flex-basis das colunas seja sobrescrito */
@media (max-width: 768px) {
    .tkt_dtls_main_row_one {
        flex-direction: column;
    }

        .tkt_dtls_main_row_one > .tkt_dtls_main_column.tkt_dtls_left_column,
        .tkt_dtls_main_row_one > .tkt_dtls_main_column.tkt_dtls_right_column {
            flex-basis: 100%; /* Garante que ambas as colunas usem 100% da largura */
            /* O flex-grow e flex-shrink podem precisar ser resetados se causarem problemas aqui, mas geralmente não é necessário. */
            /* Ex: flex: 1 0 100%; */
        }
}

@media (max-width: 480px) {
    .tkt_dtls_page_container {
        padding: 0.5rem;
    }

    .tkt_dtls_main_column,
    .tkt_dtls_full_width_column,
    .tkt_dtls_inner_row {
        padding: 0.75rem;
    }

    .tkt_dtls_main_row_one,
    .tkt_dtls_main_row {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

.tkt_dtls_coluna-esquerda { /* Esta classe está dentro da .tkt_dtls_left_column */
    width: 50%;
    /*padding: 10px;*/
    box-sizing: border-box;
}

.tkt_dtls_coluna-direita { /* Esta classe está dentro da .tkt_dtls_left_column */
    width: 50%;
    /*padding: 10px;*/
    box-sizing: border-box;
}

.tkt_dtls_container-pai { /* Esta classe está dentro da .tkt_dtls_left_column */
    display: flex;
    width: 100%;
}


.commentlist-layout-container {
    display: flex; /* A mágica do Flexbox para alinhar lado a lado */
    width: 100%;
    /* Sugiro uma altura para o container ou para as colunas 
           para o scroll da lista funcionar bem. Ex: 500px */
    height: 500px;
    border: 1px solid #e0e0e0; /* Apenas para visualização das bordas */
}

.commentlist-list-column {
    width: 30%;
    height: 100%; /* Ocupa toda a altura do container pai */
    overflow-y: auto; /* Scroll vertical SE necessário */
    border-right: 1px solid #e0e0e0; /* Linha divisória */
    padding: 15px;
    box-sizing: border-box; /* Padding e borda não aumentam o tamanho total */
}

.commentlist-content-column {
    width: 70%;
    height: 100%; /* Ocupa toda a altura do container pai */
    overflow-y: auto; /* Scroll vertical SE necessário para o conteúdo */
    padding: 15px;
    box-sizing: border-box;
}

/* Para dar um respiro nos itens da lista */
.dx-list-item-content > div { /* Alvo específico do DevExtreme */
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #f0f0f0;
}

    .dx-list-item-content > div:last-child { /* Remove a borda do último elemento interno */
        border-bottom: none;
        margin-bottom: 0;
    }

#commentlist-selected-comment-content {
    white-space: pre-wrap; /* Mantém quebras de linha e espaços do texto */
    word-wrap: break-word; /* Quebra palavras longas para não estourar o layout */
    margin-top: 10px;
}

.user-action-bar {
    background-color: white; /* Fundo branco, como pedido */
    padding: 10px; /* O gap interno de 10px para não colar nas bordas */
    /* border: none; */ /* Geralmente já é o padrão, mas para garantir */

    display: flex; /* Ativa o modo Flexbox! */
    justify-content: space-between; /* Coloca um espaço máximo entre as colunas (esquerda e direita) */
    align-items: center; /* Alinha os itens verticalmente ao centro (bom pro botão e texto) */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total da div */
}

    .user-action-bar .user-info {
        /* A coluna da esquerda com as infos do usuário */
        line-height: 1.4; /* Um espacinho entre o nome e o e-mail */
    }

        .user-action-bar .user-info .user-name {
            font-weight: bold; /* Deixar o nome em negrito dá um destaque legal */
            font-size: 0.95em;
        }

        .user-action-bar .user-info .user-email {
            font-size: 0.85em;
            color: #555; /* Um cinza para o e-mail, para diferenciar */
        }

    .user-action-bar .action-button {
        /* A coluna da direita com o botão */
        /* Não precisa de muito aqui, o justify-content do pai já empurra pra direita */
    }



/* Garante que o container pai use box-sizing para o padding não interferir nos cálculos */
.tkt_lst_comment_container * {
    box-sizing: border-box;
}

/* O container principal que vai segurar as duas colunas */
.tkt_lst_comment_container {
    display: flex;
    width: 100%;
    max-height: 500px;
    min-height: 200px;
    background-color: #f8f9fa;
    padding: 10px;
}

/* Coluna da Esquerda (30%) */
.tkt_lst_comment_left_column {
    flex: 0 0 30%;
    padding-right: 15px;
    background-color: #ffffff;
}

/* Coluna da Direita (70%) */
.tkt_lst_comment_right_column {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background-color: #ffffff;
    padding: 15px;
}

/* Para o conteúdo da direita poder 'estourar' e causar o scroll horizontal */
.tkt_lst_comment_content {
    padding: 5px;
}

/* Estilo simples para os itens de informação na coluna esquerda */
.tkt_lst_comment_info_item {
    margin-bottom: 8px; 
    font-size: 0.9em;
}

    .tkt_lst_comment_info_item strong {
        margin-right: 5px;
        color: #333;
    }


/* Garante que o padding não afete a largura total (boa prática) */
.tkt_five_column_row *, .tkt_five_column_row *::before, .tkt_five_column_row *::after {
    box-sizing: border-box;
}

/* A linha/container principal que vai segurar as colunas */
.tkt_five_column_row {
    display: flex; /* Ativa o modo Flexbox! */
    width: 100%; /* Ocupa 100% da largura do seu container pai */
    gap: 15px; /* Cria um espaço de 15px ENTRE as colunas (ajuste se quiser) */
    padding: 10px; /* Um espaço nas bordas da linha inteira (opcional) */
    background-color: #f0f0f0; /* Cor de fundo para ver a linha (opcional) */
    border: none; /* Garante que não tenha borda */
}

/* O estilo para CADA uma das cinco colunas */
.tkt_column_item {
    flex: 1; /* A mágica! Diz a cada coluna para ocupar uma parte igual do espaço */
    padding: 20px; /* Espaço interno dentro de cada coluna */
    background-color: #ffffff; /* Fundo branco para as colunas (opcional) */
    text-align: center; /* Alinha o texto ao centro (opcional) */
    border: none; /* Garante que não tenha borda */
    /* Se quiser uma sombra sutil para separar visualmente: */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */
}


/* Garante que o padding e a borda não afetem a largura/altura total dos elementos */
.SolRowContainer *, .SolRowContainer *::before, .SolRowContainer *::after {
    box-sizing: border-box;
}

/* O container principal para cada linha de duas colunas */
.SolRowContainer {
    display: flex; /* Ativa o Flexbox para alinhar as colunas lado a lado */
    width: 100%; /* Ocupa toda a largura do seu container pai */
    /* IMPORTANTE: Para o scroll vertical da coluna direita funcionar,
               este container PAI precisa ter uma ALTURA definida ou MÁXIMA.
               Se ele puder crescer infinitamente, a coluna direita também crescerá
               e o scroll vertical nunca aparecerá.
               Ajuste este valor para o seu layout!
            */
    height: 300px; /* Exemplo: altura fixa. Pode ser max-height, %, vh, etc. */

    background-color: #f0f0f0; /* Cor de fundo para visualização da linha (opcional) */
    margin-bottom: 15px; /* Espaço entre múltiplas SolRowContainer (opcional) */
    border: 1px solid #ccc; /* Borda para visualização da linha (opcional) */
}

/* Coluna da Esquerda (30%) */
.SolLeftColumn {
    flex: 0 0 30%; /* Não cresce, não encolhe, base de 30% da largura do SolRowContainer */
    padding: 15px; /* Espaçamento interno */
    background-color: #e9ecef; /* Cor de fundo para debug (opcional) */
    /* Sem 'overflow' aqui, ela se ajusta ao conteúdo ou corta, mas não rola. */
}

/* Coluna da Direita (70%) */
.SolRightColumn {
    flex: 1; /* Cresce para ocupar o espaço restante (os 70%) */
    min-width: 0; /* Permite que a coluna encolha horizontalmente se necessário */
    min-height: 0; /* ESSENCIAL para o scroll vertical funcionar bem em itens flex */

    overflow: auto; /* Adiciona scrollbars VERTICAIS e HORIZONTAIS SOMENTE SE o conteúdo interno estourar */

    background-color: #ffffff; /* Fundo branco para diferenciar (opcional) */
    padding: 15px; /* Espaçamento interno para o conteúdo não colar nas bordas da coluna */
}

/* Div interna opcional para o conteúdo da coluna da direita,
           se você precisar de um controle mais fino ou padding específico
           para o conteúdo que rola, separado do padding da SolRightColumn.
           Muitas vezes, o conteúdo pode ir direto na SolRightColumn.
        */
.SolScrollableContent {
    /* Se você precisar forçar o scroll horizontal mesmo com palavras quebrando,
              você pode adicionar, por exemplo:
              min-width: 600px;  /* Exemplo, força ser mais largo que a coluna */
    /* Se você tiver texto que não deve quebrar:
              white-space: nowrap;
           */
}

/* Estilo simples para os itens de informação na coluna esquerda (exemplo) */
.SolInfoItem {
    margin-bottom: 8px;
    font-size: 0.9em;
}

    .SolInfoItem strong {
        margin-right: 5px;
        color: #333;
    }

/* Apenas para demonstração do scroll */
.SolLargeContentP {
    margin-bottom: 20px; /* Espaço entre parágrafos */
    line-height: 1.6;
}

.SolWideContentP {
    width: 600px; /* Força a largura para demonstrar o scroll horizontal */
    background-color: #f9f9f9;
    padding: 5px;
    border: 1px dashed #ddd;
    margin-bottom: 20px;
}

/* Para a linha vermelha de alta prioridade/atraso */
.linha-vermelha {
    background-color: #ffdddd !important; /* Um vermelho claro */
    /* Você pode adicionar font-weight: bold; etc. se quiser */
}

/* Para a linha amarela de atenção */
.linha-amarela {
    background-color: #fff3cd !important; /* Um amarelo claro */
}


.meu-compromisso-edit-icon {
    cursor: pointer;
    color: #007bff; /* Cor do ícone - azul DevExtreme */
    font-size: 16px; /* Ajuste o tamanho se necessário */
    padding: 2px 5px; /* Pequena área de clique */
}

    .meu-compromisso-edit-icon:hover {
        color: #0056b3; /* Cor ao passar o mouse */
    }

.meu-compromisso-template .info-linha {
    margin-top: 3px; /* Pequeno espaço entre as linhas de informação */
    font-size: 0.9em; /* Fonte um pouco menor para as informações secundárias */
    color: #555;
}

/* Para garantir que o texto do título não quebre feio se for muito longo */
.meu-compromisso-template strong {
    display: inline-block; /* Ou block */
    /* white-space: nowrap; // Já está no style inline */
    /* overflow: hidden; // Já está no style inline */
    /* text-overflow: ellipsis; // Já está no style inline */
}

/* Actions column buttons: square corners, transparent outline, teal accent */
.ticket-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ticket-actions-button {
  border: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  padding: 2px 6px;
  outline: transparent;
}
.ticket-actions-button:focus {
  outline: transparent;
}
.ticket-actions-button .dx-icon,
.ticket-actions-button i.fa {
  color: var(--tkt-accent, #009688);
}
.ticket-actions-button.dx-state-disabled .dx-icon,
.ticket-actions-button.dx-state-disabled i.fa {
  opacity: 0.5;
}
/* Hover transparente para botões de Actions */
.ticket-actions-button:hover,
.ticket-actions-button.dx-state-hover,
.ticket-actions-button.dx-state-active {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.ticket-actions-button:hover .dx-icon,
.ticket-actions-button.dx-state-hover .dx-icon,
.ticket-actions-button.dx-state-active .dx-icon,
.ticket-actions-button:hover i.fa,
.ticket-actions-button.dx-state-hover i.fa,
.ticket-actions-button.dx-state-active i.fa {
  color: var(--tkt-accent, #009688);
}
.ticket-actions-button.dx-state-disabled .dx-icon,
.ticket-actions-button.dx-state-disabled i.fa {
  opacity: 0.5;
}
/* Padronizar cor teal para File Info e Read File */
.ticket-actions-button .fa-info,
.ticket-actions-button .fa-info-circle,
.ticket-actions-button .dx-icon-info,
.ticket-actions-button .fa-file,
.ticket-actions-button .fa-file-o,
.ticket-actions-button .dx-icon-file {
  color: var(--tkt-accent, #009688) !important;
}
.ticket-actions-button.dx-state-disabled .dx-icon,
.ticket-actions-button.dx-state-disabled i.fa {
  color: var(--tkt-accent, #009688) !important;
  opacity: 0.5;
}