body, html {
    margin: 0;
    height: 100%;
    font-family: sans-serif;
    overflow: hidden;
    font-size: 12px;
}


.demo-container {
    display: flex;
    gap: 20px;
}

.label_form {
    float: left;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    cursor: default;
    padding: 8px 15px 9px 0;
}


.campo_form {
    float: left;
    width: 100%;
}

.container_form {
    display: flex;
    height: 800px;
}

.section_form {
    padding: 20px;
    /*overflow: auto;*/
    /*flex: 1;*/ /* Importante: define o comportamento flexível */
}

.esquerda_form { /* Classe para a seção esquerda */
    width: 1400px;
    flex-grow: 1;
/*    background-color: aqua;*/
}

.direita_form {
    width: 500px;
    border-left: 1px solid #ddd;
/*    background-color: bisque;*/
}
.menu_form {
    width: 100px;
    border-left: 1px solid #ddd;
    /*    background-color: bisque;*/
}

/* Estilos do painel */
.painel {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    overflow: auto;
    background-color: white;
}

    .painel iframe {
        border: none;
        width: 100%;
        /* REMOVA height: 100%; */
    }

/* Estilos dos links */
.link-list_form {
    list-style: none;
    padding: 0;
}

    .link-list_form li {
        margin-bottom: 10px;
    }

    .link-list_form a {
        display: block;
        padding: 8px 12px;
        background-color: #e0e0e0;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

        .link-list_form a:hover {
            background-color: #d0d0d0;
        }

/* Responsividade */
/* Responsividade */
@media (max-width: 1900px) {
    .container_form {
        flex-direction: column;
    }

    .direita_form {
        width: 100%;
        border-left: none;
        border-top: 1px solid #ddd;
    }
}

.tabs-demo {
    display: flex;
}

.strict-width {
    max-width: 340px;
}

.dx-theme-generic .strict-width {
    max-width: 250px;
}

.widget-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
/*    min-width: 200px;
    padding: 16px 32px;
*/    overflow: clip;
}

.widget-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 80px;
    width: 100%;
}

.widget-wrapper-vertical {
    width: 100%;
    flex-direction: row;
    align-items: center;
}

.options {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
}

.caption {
    font-weight: 500;
    font-size: 18px;
}

#show-navigation-buttons {
    margin-top: 22px;
}

.option {
    margin-top: 20px;
}

.dx-tabs {
    max-width: 100%;
}

.dx-tabs-vertical {
    height: 720px;
}

.dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
    border-block-end: 1px solid rgb(225, 225, 225, 0.4);
}

.dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
    border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
}


.dx-htmleditor-content img {
    vertical-align: middle;
    padding-right: 10px;
}

.dx-htmleditor-content table {
    width: 50%;
}


.button-info {
    margin: 10px;
}

.dx-popup-content p {
    margin-bottom: 10px;
    margin-top: 0;
}


/* Estilos CSS com prefixo "header" */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    max-height: 40px; /* Ou remova para altura automática */
    background-color: #f0f0f0;
    padding: 0 10px;
}

.header-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 300px;
}
.header-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 1200px;
    border: 0px solid;
}

.header-title {
    margin: 0 5px 0 0;
    font-size: 1.2em;
}

.header-description {
    margin: 0;
    font-size: 0.9em;
}

.header-user-info {
    display: flex;
    flex-direction: row; /* Altera para row para alinhar horizontalmente */
    align-items: center; /* Alinha verticalmente ao centro dentro do header-user-info */
}

    .header-user-info p {
        margin: 0 0 0 10px; /* Adiciona margem à esquerda para espaçamento */
        font-size: 0.9em;
    }


.header-chart-container {
    width: 300px; /* Largura fixa para o container do gráfico */
    text-align: center; /* Centraliza o conteúdo dentro do container */
}

.header-chart-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, green 0% 75%, lightgray 75% 100%); /* Exemplo de gradiente cônico */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

/* Responsividade (opcional - ajuste conforme necessário) */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Empilha os elementos verticalmente em telas menores */
        align-items: flex-start; /* Alinha à esquerda em telas menores */
    }

    .header-chart-container {
        margin-top: 20px;
        width: 100%;
    }
}

#gauge {
    height: 100px;
    width: 100%;
}

.dx-chat {
    height: 710px;
}

.dx-avatar {
    border: 1px solid var(--dx-color-border);
}


#accordion {
    /*height: 200px;*/
}

    #accordion .header {
        font-size: 15px;
    }

    #accordion .header,
    #accordion p {
        margin: 0;
    }

#accordion-container {
    /*margin-right: 400px;*/
}

.dx-theme-material #accordion .dx-accordion-item-title {
    display: flex;
}

.dx-theme-material #accordion .header {
    align-self: center;
}


#form {
    max-width: 600px;
    margin: auto;
}

#button {
    margin-top: 50px;
    margin-right: 20px;
    float: right;
}

#fileuploader-container {
    border: 1px solid #d3d3d3;
    margin: 20px 20px 0 20px;
}

#form h3 {
    margin-left: 20px;
    font-weight: normal;
    font-size: 22px;
}




.container_main {
    margin: 1px auto;
    font-size: 0.8rem;
    /*    max-width: 1600px;*/
}

img {
    max-width: 100%;
}

.preview {
    position: relative; /* Permite posicionar o ponto dentro do container */
    overflow: hidden;
   /* width: 300px;*/
    margin: 10px auto;
}

#imagempreview {
    position: relative;
}

.ponto {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Centralizar o círculo */
}
.container_linha {
    font-size: 0; 
    text-align: left; 
}
.container_linhafile {
    text-align: left;
}

.div1 {
    display: inline-block;
    width: 480px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px; 
    vertical-align: top; 
}
.div1editmeta {
    display: inline-block;
    width: 830px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}
.div2 {
    display: inline-block;
    width: 400px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}
.div3 {
    display: inline-block;
    width: 400px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}

.div1_filtro, .div2_filtro {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}

#chart {
    height: 80px;
    width: 300px;
}

/* Container padrão do popup */
.popup-iframe-container {
    width: 100%;
    height: 100%;
    padding: 0;
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
}

    .popup-iframe-container iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

/* 🔥 Responsividade para telas pequenas */
@media (max-width: 767.98px) {
    .dx-popup {
        width: 95% !important;
        height: 90% !important;
        max-width: 95%;
        max-height: 90vh;
    }

    .dx-overlay-content {
        /*width: 95% !important;*/
        /*height: 90% !important;*/
        max-height: 90vh;
    }

    .popup-iframe-container {
        height: calc(90vh - 60px); /* Ajuste considerando título e botoes */
    }

        .popup-iframe-container iframe {
            height: 100%;
        }
}

@media (max-width: 767.98px) {
    .dx-popup {
        width: 95% !important;
        height: 90% !important;
        max-width: 95%;
        max-height: 90vh;
    }

    .dx-overlay-content {
        /*width: 95% !important;*/
        /*height: 90% !important;*/
        max-height: 90vh;
    }

    .popup-iframe-container {
        height: calc(90vh - 60px); /* Ajuste considerando título e botoes */
    }

        .popup-iframe-container iframe {
            height: 100%;
        }
}

@media (max-width: 1900px) {
    .dx-popup {
        width: 95% !important;
        height: 90% !important;
        max-width: 95%;
        max-height: 90vh;
    }

    .dx-overlay-content {
        /*width: 95% !important;*/
        /*height: 90% !important;*/
        max-height: 90vh;
    }

    .popup-iframe-container {
        height: calc(90vh - 60px); /* Ajuste considerando título e botoes */
    }

        .popup-iframe-container iframe {
            height: 100%;
        }
}

.popup-iframe-container-scroll {
    width: 100%;
    height: 100%; /* Para que height funcione, o elemento pai DEVE ter uma altura definida */
    padding: 0;
    overflow-x: hidden; /* Impede a barra de rolagem horizontal */
    overflow-y: auto; /* Mostra a barra de rolagem vertical SE necessário */
    /* A linha 'overflow: hidden;' foi substituída pelas duas acima */
}

    .popup-iframe-container-scroll iframe {
        width: 100%;
        height: 100%;
        border: none; /* Remove a borda padrão do iframe */
        display: block; /* Adicionado: Boa prática para evitar espaços extras abaixo do iframe */
    }

/*#gridContainer {
    height: 750px;
}*/

.master-detail-caption {
    padding: 0 0 5px 10px;
    font-size: 14px;
    font-weight: bold;
}
.pos_floatbutton {
    position: fixed;
    bottom: 50px;
    right: 50px;
    /* Outros estilos */
}





.demo-container .dx-fieldset:first-child {
    width: 500px;
}

.custom-color-picker {
    width: 82px;
    padding: 5px;
}

.color {
    cursor: pointer;
    font-size: 18px;
}

#text {
    line-height: 1.35;
}

.text-container {
    padding-inline-start: 12px;
    padding-inline-end: 4px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}


.list_container { /* Contêiner das divs */
    margin: 0 auto; /* Centraliza o contêiner na página */
    border: 0px solid #ccc; /* Borda para visualização */
    padding: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.list_item { /* Estilos para cada div */
    width: 100%;
    padding: 10px;
    border: 0px solid #ddd;
    margin-bottom: 5px; /* Espaçamento entre as divs */
    box-sizing: border-box; /* Inclui padding e border na largura */
}

    .list_item:last-child {
        margin-bottom: 0; /* Remove a margem inferior do último item */
    }

    .list_item.list_item-destaque { /* Estilo para a div com destaque */
        background-color: #f0f0f0;
    }

.bolastatus-container {
    display: inline-flex; /* ou inline-block, dependendo do alinhamento desejado */
    align-items: center; /* Alinha verticalmente os itens */
    gap: 5px; /* Adiciona um pequeno espaçamento entre a bola e o texto */
}

.bola {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}

.vermelha {
    background-color: red;
}

.amarela {
    background-color: yellow;
}

.verde {
    background-color: green;
}

.azul {
    background-color: blue;
}

.laranja {
    background-color: orange;
}

#centralizada {
    position: absolute; /* Remove o elemento do fluxo normal do documento */
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o elemento */
    width: 600px;
    height: 800px;
}



.form_container {
    display: flex;
    width: 100%;
    height: 910px;
}

.form_coluna {
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

#form_esquerda {
    flex-grow: 1;
/*    background-color: lightblue;*/
}

#form_meio {
    width: 0px;
/*    background-color: lightcoral;*/
    transition: width 0.3s ease;
    cursor: pointer;
    overflow: hidden; /*Esconde o conteúdo quando a div é minimizada*/
}

    #meio.form_minimizado { /* Classe com prefixo form_ */
        width: 20px;
    }

#form_direita {
    width: 200px;
/*    background-color: lightgreen;*/
}

.upload-container {
    margin-bottom: 20px;
}

.scroll-container { /* Estilos para o container de scroll */
    /*width: 600px;*/ /* Largura fixa para o container de scroll */
    overflow-x: auto; /* Habilita o scroll horizontal */
    overflow-y: hidden; /* Oculta o scroll vertical (opcional) */
    padding: 10px; /* Mantém o padding */
    white-space: nowrap; /* Impede que as imagens quebrem para a linha de baixo*/
}

.scroll-containerfile { /* Estilos para o container de scroll */
    /*width: 600px;*/ /* Largura fixa para o container de scroll */
    overflow-x: auto; /* Habilita o scroll horizontal */
    overflow-y: hidden; /* Oculta o scroll vertical (opcional) */
    padding: 10px; /* Mantém o padding */
    white-space: nowrap; /* Impede que as imagens quebrem para a linha de baixo*/
}

.imagens-container { /* Remove a largura fixa */
    display: inline-flex; /* Usando inline-flex para não ocupar toda a largura */
    gap: 10px;
}

.imagem-exibida {
    max-height: 100px;
    width: auto;
    box-sizing: border-box;
    margin-right: 10px; /* Espaçamento entre as imagens */
}




.listaimagens_linha {
    display: flex; /* Habilita o Flexbox para alinhar imagem e informações */
    align-items: center; /* Alinha verticalmente os itens */
    margin-bottom: 10px; /* Espaçamento entre as linhas */
    border-bottom: 1px solid #ccc; /* Separador entre as linhas (opcional) */
    padding-bottom: 10px; /* Espaçamento inferior para o separador */
}

.listaimagens_imagem {
    max-height: 150px;
    width: auto;
    margin-right: 20px; /* Espaçamento entre a imagem e as informações */
}

.listaimagens_info {
    flex-grow: 1; /* Permite que as informações ocupem o espaço restante */
}

.tabtags_container {
    width: 800px;
    margin: 0 auto; /* Centraliza o container na tela */
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
}

.tabtags_containerscroll {
    width: 800px;
    margin: 0 auto; 
    display: flex;
    flex-direction: column; 
    max-height: 900px; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

.tabtags_linha1 {
    display: flex; /* Habilita o Flexbox para a primeira linha */
}

.tabtags_coluna1 {
    width: 500px;
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

.tabtags_coluna2 {
    width: 300px;
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

.tabtags_linha { /* Estilo para as linhas 2, 3 e 4 */
    width: 100%; /* Ocupa toda a largura do container */
    box-sizing: border-box;
    margin-top: 10px; /* Espaçamento entre as linhas */
}



.catalogimage_item {
    /* ... outros estilos ... */
    position: relative; /* Permite posicionar elementos dentro da div */
}

.imagem_fundo_catalog {
    background-size: cover; /* Ajusta a imagem para cobrir toda a div */
    background-position: center; /* Centraliza a imagem */
    height: 150px; /* Define a altura da div */
    display: flex; /* Permite o posicionamento do texto */
    align-items: center; /* Alinha o texto verticalmente ao centro */
    justify-content: center; /* Alinha o texto horizontalmente ao centro */
}

.descricao_catalog {
    position: absolute; /* Posiciona o texto sobre a imagem */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o texto na div */
    color: white; /* Define a cor do texto (opcional) */
    /* ... outros estilos para o texto ... */
}

.update-button {
    background: none; /* Remove o fundo */
    border: none; /* Remove a borda */
    padding: 0; /* Remove o padding */
}

.update-button .bi {
    font-size: 20px; /* Ajuste o tamanho conforme necessário */
}





#crop-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#crop-area {
     /* Define o tamanho e formato da área de corte */
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
}

#crop-controls {
    margin-top: 10px;
}


.containercrop {
    margin: 20px auto;
    max-width: 640px;
}


.previewcrop {
    position: relative; /* Permite posicionar o ponto dentro do container */
    overflow: hidden;
    width: 30%;
    margin: 20px auto;
}


.listagem_container-imagens {
    width: 100%; /* Largura da div principal */
    height: 700px;
    overflow-y: auto; 
}

.listagem_linha-imagens {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    gap: 1rem;
    padding: 5px;
}

.listagem_imagem-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 25%;
    box-sizing: border-box;
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    max-width: 215px;
}

    .listagem_imagem-container img {
        width: 100%;
        height: 150px;
        object-fit: contain;
    }

.div_scroll_imagem {
    width: 1300px;
    height: 200px;
    border: 1px solid black; /* borda fina */
    padding: 3px; /* espaçamento interno de 10px */
    box-sizing: border-box; /* garante que o padding não aumente a largura e altura */
}
.div_scroll_imagem200 {
    width: 1300px;
    height: 400px;
    border: 1px solid black; /* borda fina */
    padding: 3px; /* espaçamento interno de 10px */
    box-sizing: border-box; /* garante que o padding não aumente a largura e altura */
    margin-top: 5px; /* Adiciona margem superior de 5px */
}

.div_scroll_imagem300 {
    max-height: 600px;
    overflow-y: auto; /* Scroll vertical */
    overflow-x: hidden; /*Esconde o horizontal*/
    /* Largura máxima (opcional, ajuste conforme necessário) */
    max-width: 100%; /* Importante: define a largura máxima */
    width: 100%; /* Faz o container ocupar a largura disponível */
    margin: 0px auto; /* Centraliza horizontalmente (se a largura for menor que o container pai) */
    /* Adiciona padding, se desejar */
    padding: 20px;
    /*border: 1px solid #ccc;*/ /*Borda, para testes. Pode remover*/
}


.cut_container {
    display: flex; /* Ativa o flexbox para alinhar as divs */
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 600px; /* Altura fixa de 600px */
    overflow: hidden; /* Esconde qualquer conteúdo que exceda as dimensões */
}

.cut_div-esquerda {
    width: 50%; /* Cada div ocupa 50% da largura do container */
    height: 100%; /* Cada div ocupa 100% da altura do container */
    box-sizing: border-box; /* Inclui padding e bordas na largura/altura */
    /* background-color: lightgray;  Cor de fundo opcional para visualização */
}

.cut_div-direita {
    width: 50%; /* Cada div ocupa 50% da largura do container */
    height: 100%; /* Cada div ocupa 100% da altura do container */
    box-sizing: border-box; /* Inclui padding e bordas na largura/altura */
    /* background-color: lightgray;  Cor de fundo opcional para visualização */
}

/* CONTAINER PARA CROP DA MAIN */
.main_cut_container {
    display: flex; /* Ativa o flexbox para alinhar as divs */
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 300px; /* Altura fixa de 600px */
    overflow: hidden; /* Esconde qualquer conteúdo que exceda as dimensões */
}

.main_cut_div-esquerda {
    width: 100%; /* Cada div ocupa 50% da largura do container */
    height: 100%; /* Cada div ocupa 100% da altura do container */
    box-sizing: border-box; /* Inclui padding e bordas na largura/altura */
    /* background-color: lightgray;  Cor de fundo opcional para visualização */
}

.main_cut_div-direita {
    width: 50%; /* Cada div ocupa 50% da largura do container */
    height: 100%; /* Cada div ocupa 100% da altura do container */
    box-sizing: border-box; /* Inclui padding e bordas na largura/altura */
    /* background-color: lightgray;  Cor de fundo opcional para visualização */
}

.main_previewcrop {
    position: relative; /* Permite posicionar o ponto dentro do container */
    overflow: hidden;
    width: 30%;
    margin: 20px auto;
}

.main_cut_container_end {
    display: flex; /* Ativa o flexbox para alinhar as divs */
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 270px; /* Altura fixa de 600px */
    overflow: hidden; /* Esconde qualquer conteúdo que exceda as dimensões */
}


.formacadastro_container {
    width: 1890px;
    height: 845px;
    padding: 0;
    display: flex;
    /*background-color: #f0f0f0;*/
}

.formacadastro_coluna1 {
    width: 40%;
    height: 100%;
    float: left;
    padding: 5px;
    flex-grow: 1;
    overflow-y: auto;   
    /*    background-color: #ffffff;
*/
}

.formacadastro_coluna2 {
    width: 970px;
    height: 100%;
    float: left;
    padding: 1px;
}

.formacadastro_coluna3 {
    /*width: 55%;*/
    height: 100%;
    float: left;
    padding: 1px;
}

.formacadastro_coluna4 {
    width: 45%;
    max-height: 780px;
    height: 100%;
    float: left;
    padding: 1px;
    overflow-y: auto;
    display: none;
}

.formacadastro_linha {
    height: 100px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 0px solid #ccc;
}

.formacadastro_linha2 {
    height: 800px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 0px solid #ccc;
}

.formacadastro_linha3 {
    height: 800px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 0px solid #ccc;
}
.formacadastro_linha4 {
    height: 800px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 1px solid #ccc;
}

.formacadastro_linha1_1 {
    height: 80px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 0px solid #ccc;
}

.formacadastro_linha1_2 {
    height: 180px; /* Divide a altura da coluna em 6 partes iguais */
    padding: 1px;
    border-bottom: 0px solid #ccc;
}


.toolbar_container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    margin: 0;
    padding: 0;
}

.toolbar_coluna1 {
    width: 250px;
    text-align: center; /* Centraliza o texto horizontalmente na coluna 1 */
    display: flex; /* Ativa Flexbox na coluna 1 */
    align-items: center; /* Centraliza o conteúdo verticalmente na coluna 1 */
    justify-content: center; /* Centraliza o conteúdo horizontalmente na coluna 1 */
}

.toolbar_coluna2, .toolbar_coluna3, .toolbar_coluna4 {
    width: 70px;
    margin-left: 5px;
    text-align: center; /* Centraliza o texto horizontalmente nas outras colunas */
    display: flex; /* Ativa Flexbox nas outras colunas */
    align-items: center; /* Centraliza o conteúdo verticalmente nas outras colunas */
    justify-content: center; /* Centraliza o conteúdo horizontalmente nas outras colunas */
}

.borda-vermelha {
    border: 2px solid red; /* Define a borda vermelha */
}

/* No seu arquivo CSS */
.bi-lock-fill.text-danger {
    /* Estilos para o cadeado vermelho (bloqueado) */
    color: red; /* Exemplo: vermelho mais escuro */
}

.bi-lock-fill.text-success {
    /* Estilos para o cadeado verde (desbloqueado) */
    color: green; /* Exemplo: verde */
}


.file-container {
    display: flex;
    justify-content: start;
    width: 100%; /* Largura total */
    /* Outros estilos para o container principal, se necessário */
}

.file-coluna {
    width: 600px; /* Largura de cada coluna principal */
    display: flex;
    flex-direction: column;
    /* Outros estilos para as colunas principais, se necessário */
    /* Adicione padding/margin aqui, se quiser espaçamento entre as colunas */
    padding: 10px; /* Exemplo: 10px de padding horizontal */
}
    /*Adicionado espaçamento*/
    .file-coluna:first-child {
        margin-right: 20px; /* Exemplo: 20px de margem à direita da primeira coluna */
    }

.file-linha {
    display: flex;
    flex: 1; /* Ocupa metade da altura da coluna */
    /* Outros estilos para as linhas, se necessário */
}

.file-subcoluna {
    flex: 1; /* Ocupa metade da largura da linha */
    /* Outros estilos para as subcolunas, se necessário */
    /* Exemplo: Adicionar padding/margin dentro das subcolunas */
    padding: 5px;
}

.file-items-container {
    /* Remove o white-space: nowrap; */
    /*white-space: nowrap;  <-- REMOVA ISSO */
    /* Faz com que os itens fiquem em coluna */
    display: flex;
    flex-direction: column; /* Itens em coluna */
    align-items: flex-start; /* Alinha os itens à esquerda (opcional) */
}

.file-item {
    /* Estilos para cada item (imagem + informações) */
    margin-bottom: 10px; /* Espaço ENTRE os itens */
    display: flex; /* Flexbox para alinhar imagem e informações */
    /*align-items: center;*/ /* Centraliza verticalmente imagem e info */
    width: 100%; /* Ocupa toda a largura do container (importante!) */
    border: 1px solid #ddd;
    padding: 5px;
}

.file-item-image {
    /* Estilos específicos para a imagem (opcional) */
    width: 100px; /* Largura fixa para a imagem (ajuste conforme necessário) */
    height: 100px; /*Mantenha a proporção*/
    object-fit: contain; /* Para imagens, garante que caibam sem distorcer */
    margin-right: 15px; /* Espaço entre a imagem e as informações */
}

.file-item-info {
    /* Estilos para o bloco de informações */
    flex: 1; /* Ocupa o espaço restante */
    /* Adicione estilos adicionais aqui, se necessário (fonte, cores, etc.) */
}
.info-line {
    display: flex;
    flex-direction: row;
}

    .info-line > div {
        margin-bottom: 5px; /*Espaçamento entre as linhas*/
    }



.containerTelaImagens {
    width: 100%; /* Ocupa 100% da largura disponível */
    max-height: 500px; /* Altura máxima de 800px */
    overflow-y: auto; /* Adiciona barra de rolagem vertical SE necessário */
    /* overflow-y: scroll;  <-- Barra de rolagem SEMPRE visível (opcional) */
    /* overflow: auto;  <-- Barras de rolagem vertical E horizontal, se necessário */
    border: none; /* Remove bordas */
    /* Outros estilos (opcional): */
    padding: 10px; /* Espaçamento interno (opcional) */
    margin: 0 auto; /* Centraliza horizontalmente (se a largura for menor que a do pai)*/
}
.containerTelaImagensSuperior {
    width: 100%; /* Ocupa 100% da largura disponível */
    max-height: 320px; /* Altura máxima de 800px */
    overflow-y: hidden; /* Adiciona barra de rolagem vertical SE necessário */
    /* overflow-y: scroll;  <-- Barra de rolagem SEMPRE visível (opcional) */
    /* overflow: auto;  <-- Barras de rolagem vertical E horizontal, se necessário */
    border: none; /* Remove bordas */
    /* Outros estilos (opcional): */
    padding: 0px; /* Espaçamento interno (opcional) */
    margin: 0 auto; /* Centraliza horizontalmente (se a largura for menor que a do pai)*/
}

/* Estilos apenas para o exemplo (conteúdo) - não são essenciais */
.conteudoTelaImagens {
    /*height: 920px; */
    padding: 10px;
}
.texto-limitado {
    font-size: 14px;
    width: 200px;
    word-wrap: break-word; /* Quebra palavras inteiras quando possível */
    overflow-y: auto; /* Rolagem vertical */
    max-height: 100px; /* Altura máxima */
    display: inline-block; /* Importante para o height funcionar corretamente */
    white-space: normal; /* Permite que o texto quebre em espaços em branco */
}

.Div_linha_legenda {
    width: 200px;
    max-width: 201px; /* Evita estouro horizontal */
    height: 100px;
    border: 0px solid black;
    overflow-y: hidden;
    overflow-y: hidden;
    /* Remova ou comente overflow-x: hidden; */
    word-wrap: break-word;
}

.imagelist_vertical_principal {
    width: 150px;
    height:800px;
    overflow-y: auto; 
    border: none; 
    padding: 0; 
}

.imagelist_vertical_linha {
    border: none; 
    padding: 0; 
}

.imagelist_vertical_imagem {
    border: none; /* Remove a borda */
    padding: 0; /* Remove o espaçamento interno */
    overflow: hidden; /* Desabilita qualquer tipo de scroll */
}
    .imagelist_vertical_imagem img {
        /* width: 100%;*/
        width: 120px;
        object-fit: cover;
    }

.imagelist_vertical_descricao {
    border: none; /* Remove a borda */
    padding: 0; /* Remove o espaçamento interno */
    overflow: hidden; /* Desabilita qualquer tipo de scroll */
    align-content:center;
}

.texto-centralizado {
    text-align: center;
    font-size: 12px;
}

.div1_detalheimagem {
    display: inline-block;
    width: 600px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}

.div2_detalheimagem {
    display: inline-block;
    width: 400px;
    box-sizing: border-box;
    padding: 5px;
    border: 0px solid black;
    font-size: 16px;
    vertical-align: top;
}

/* Exemplo para a classe 'linha-manual' */
.linha-manual {
    background-color: #fcf6e1; /* Amarelo claro */
    /* color: #856404; */ /* Opcional: Mudar cor do texto se necessário */
}

.version-container {
    display: flex; /* Ativa o layout flexbox para alinhar as colunas lado a lado */
    width: 100%; /* O container ocupa toda a largura disponível */
    height: 100%; /* O container ocupa toda a altura do seu elemento pai (neste caso, body) */
    /* Nenhuma borda aqui, conforme solicitado */
}

.version-column-left {
    width: 45%;
    /* height: 100%; */ /* Com display:flex no pai, os filhos esticam por padrão (align-items: stretch).
                           Você pode adicionar explicitamente se precisar ou para clareza. */
    padding: 15px; /* Adiciona um pouco de espaço interno para o conteúdo não colar nas bordas invisíveis */
    /* Nenhuma borda aqui, conforme solicitado */
    /* background-color: #f0f0f0; */ /* Descomente para visualizar a área da coluna */
}

.version-column-right {
    width: 55%;
    /* height: 100%; */ /* Mesma observação da coluna da esquerda */
    padding: 15px; /* Adiciona um pouco de espaço interno */
    /* Nenhuma borda aqui, conforme solicitado */
    /* background-color: #e0e0e0; */ /* Descomente para visualizar a área da coluna */
    max-height: 800px; /* Define uma altura máxima para o notify. Ajuste este valor! */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se o conteúdo exceder max-height */
}

    /* Estilos adicionais apenas para o conteúdo de exemplo */
    .version-column-left h2, .version-column-right h2 {
        margin-top: 0;
    }



.dx-overlay-content.dx-toast-content {
    /* Estas propriedades controlam a caixa do notify em si. */
    max-width: 90vw; /* Garante que o notify não seja muito largo, ocupa no máximo 90% da largura da viewport */
    min-width: 280px; /* Um mínimo razoável para celular, você pode ajustar */
    left: 50% !important; /* Centraliza o notify horizontalmente */
    transform: translateX(-50%); /* Complementa a centralização horizontal */
    bottom: 20px !important; /* Posiciona o notify a 20px da parte inferior da tela */
    top: auto !important; /* Garante que não haja interferência com 'top' definido em outros lugares */
    height: auto !important; /* Garante que a altura se ajuste ao conteúdo, a menos que limitada por max-height */
    /* Aqui é onde lidamos com a altura do *container do notify* se a mensagem for muito longa */
    max-height: 120px; /* Define uma altura máxima para o notify. Ajuste este valor! */
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se o conteúdo exceder max-height */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

.dx-toast-message {
    /* Estas propriedades controlam o texto dentro do notify. */
    font-size: 0.9em; /* Reduz o tamanho da fonte para 90% do original */
    padding: 8px 12px; /* Diminui o padding interno (top/bottom e left/right) */
    word-wrap: break-word; /* Garante que palavras longas sejam quebradas, ajudando no layout */
    /* Você pode remover o max-height e overflow-y daqui, pois já estamos lidando com isso no .dx-overlay-content.
       Se deixar aqui também, a barra de rolagem aparecerá dentro do dx-toast-message, o que não é o ideal.
    */
}

.scrollable-content_posts {
    /* Defina uma altura máxima. Ajuste esse valor para o que for melhor na sua tela. */
    max-height: 90vh; /* 60% da altura da tela, por exemplo */
    /* Pede para criar o scroll vertical apenas quando necessário */
    overflow-y: auto;
}

.mensagem-com-quebra {
    white-space: normal; /* Permite a quebra de linha */
    word-wrap: break-word; /* Garante que palavras longas quebrem para não estourar a célula */
    overflow-wrap: break-word; /* Versão mais moderna do word-wrap */
}


/* Estilos para o nosso loading. O z-index altíssimo é a chave! */
.view-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99999; /* Mais alto que qualquer popup */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: sans-serif;
}

    .view-loading-overlay .spinner {
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 4px solid #fff;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
    }

@keyframes spin { /* Usando @@ para escapar no Razor */
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Container principal que vai segurar as 8 colunas */
.indicador-container {
    display: flex; /* Ativa o Flexbox */
    flex-wrap: wrap; /* Permite que as colunas quebrem para a linha de baixo em telas pequenas */
    justify-content: space-between; /* Distribui o espaço entre os itens */
    gap: 5px; /* A mágica acontece aqui: cria um espaço de 5px entre cada célula */
    padding: 10px; /* Um respiro em volta do container */
    background-color: #f0f2f5; /* Cor de fundo para o container, se desejar */
}

/* Estilo para cada uma das 8 "células" */
.indicador-celula {
    flex: 1; /* Faz com que cada célula cresça para ocupar o espaço disponível igualmente */
    min-width: 120px; /* Largura mínima para evitar que fiquem muito espremidas */

    background-color: #ffffff; /* Fundo branco para cada célula */
    border-radius: 8px; /* As bordas arredondadas que você pediu */
    padding: 15px; /* Espaçamento interno para o conteúdo não colar nas bordas */
    text-align: center; /* Centraliza o texto */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Uma sombra sutil para dar profundidade */
    /* Estilos para o texto dentro da célula */
    color: #333;
}

    .indicador-celula .titulo {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
    }

    .indicador-celula .valorNum {
        font-size: 20px;
        font-weight: bold;
        color: #0056b3;

    }
    .indicador-celula .valor {
        font-size: 12px;
        font-weight: bold;
        color: #0056b3; 
    }
    .indicador-celula .valorTexto {
        font-size: 12px;
        font-weight: bold;
    }

.previsao-container {
    display: flex; /* Alinha os itens em linha */
    align-items: center; /* Centraliza verticalmente */
    gap: 15px; /* Cria um espaço de 15px entre o botão e o texto */
}

#texto-previsao {
    font-weight: bold;
    font-size: 15px; /* <-- Adicione esta linha. Ajuste o valor como preferir (ex: 18px, 1.1em) */
}

.dx-scheduler-appointment {
    border: none !important;
}

.dx-scheduler-appointment-wrapper .dx-scheduler-appointment-content {
    border: none !important;
    box-shadow: none !important; /* Também remove a sombra padrão, que pode parecer uma borda */
}

/* E aqui mantemos nossa borda lateral customizada que indica o status */
.appointment-status-env {
    background-color: #d4edda !important;
    border-left: 3px solid #28a745 !important;
    color: #155724 !important;
}

.appointment-status-age {
    background-color: #fff3cd !important;
    border-left: 3px solid #ffc107 !important;
    color: #856404 !important;
}

.dx-scheduler-appointment-content {
    padding: 0 !important;
}





.emoji-container {
    /* Suas propriedades existentes */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    /* --- ADICIONE ESTAS LINHAS --- */
    max-height: 250px; /* Define uma altura máxima para o container */
    overflow-y: auto; /* Adiciona o scroll vertical APENAS quando necessário */
    padding-right: 5px; /* Opcional: um pequeno espaço para a barra de rolagem não colar nos emojis */
}

.emoji-char {
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    transition: background-color 0.2s;
}

    .emoji-char:hover {
        background-color: #f0f0f0;
    }

.botao-canal-individual.dx-button-mode-contained .dx-button-content {
    background-color: #007bff; /* Um azul padrão e forte */
    border-color: #0056b3;
    color: white; /* Deixa o ícone branco para melhor contraste */
}

.status-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Isso transforma o quadrado em um círculo */
    background-color: #ccc; /* Cor padrão (cinza) */
    transition: background-color 0.3s ease; /* Efeito suave na troca de cor */
}

.status-ok {
    background-color: #28a745; /* Verde */
}

.status-error {
    background-color: #dc3545; /* Vermelho */
}

.prompt-ia-wrapper {
    border: 1px solid transparent;
}

    .prompt-ia-wrapper:not(.d-none) {
        border-color: #dee2e6;
    }
/* Templates - wrapper com rolagem própria */
.templates-wrap {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 20px); /* evita depender do body com overflow:hidden */
    overflow-y: auto;           /* rolagem só desta tela */
}

/* Grid ocupa apenas 300px de largura */
.templates-grid-container {
    width: 100%;
    max-width: 99%;
    margin: 0 auto;
}



#popupTemplatesWrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Escopo apenas para este popup */
#popupTemplatesWrapper .dx-popup-content {
    padding: 0 !important;
    overflow: hidden !important;
    height: 100%;
}

#popupTemplatesWrapper .dx-overlay-content {
    /* Evita que algum arredondamento provoque scroll */
    box-sizing: border-box;
}

#popupTemplatesWrapper .popup-templates-frame-host {
    width: 100%;
    height: 100%;
    display: flex;
    /* Garante que o iframe expanda corretamente */
}

#popupTemplatesWrapper .popup-templates-frame-host iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Caso esteja aparecendo scroll no body do documento dentro do popup */
#popupTemplatesWrapper {
    overflow: hidden;
}

/* Adicione estas regras ao final do arquivo, se não existirem */

/* Estilos para o container de informações de upload */
#uploadInfoContainer .progress {
    height: 18px;
}

#uploadInfoContainer small {
    font-size: 0.95rem;
}

/* Cores para a barra de progresso baseadas nas classes do Bootstrap */
#uploadProgressBar.bg-success {
    background-color: #28a745 !important;
}

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

#uploadProgressBar.bg-danger {
    background-color: #dc3545 !important;
}

#loadPanelInfo {
    top: calc(50% + 60px);
    transform: translate(-50%, -50%);
}

    #loadPanelInfo .lp-box {
        background: rgba(0,0,0,0.75);
        backdrop-filter: blur(2px);
        padding: 14px 18px;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.35);
        min-width: 240px;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: system-ui, sans-serif;
        line-height: 1.3;
    }

#loadPanelTitle {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

#loadPanelDetail {
    font-size: 12px;
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 4px;
}

#loadPanelElapsed {
    font-size: 11px;
    color: #b0b0b0;
}


/* Painel de conexão atualizado */
#painel-conexao {
    padding: 4px 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem; /* mesmo tamanho do nome do usuário */
    line-height: 1.2;
    background: transparent;
    border: none;
}

    #painel-conexao .linha-status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    #painel-conexao .label {
        font-weight: 500;
    }

    #painel-conexao #lblStatus {
        font-weight: 600;
    }

    #painel-conexao #lblStatusCheck  {
        font-weight: 600;
    }

    #painel-conexao #lblVelocidade {
        font-weight: 500;
        color: #555;
    }

    #painel-conexao #lblUltimaValidacao {
        margin-top: 2px;
        font-size: 0.75rem;
        color: #888;
        letter-spacing: .5px;
    }

    #painel-conexao #lblUltimaValidacaoCheck {
        margin-top: 2px;
        font-size: 0.75rem;
        color: #888;
        letter-spacing: .5px;
    }