﻿.custom-popup .dxbl-modal-content {
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* O DevExpress cuida do background e da estrutura básica */
}

/* Container principal para o nosso conteúdo dentro do popup */
.popup-content {
    font-family: 'Roboto', sans-serif;
    padding: 40px;
    display: flex;
    flex-direction: column;
    color: var(--text-text_tertiary, #585B5B);
    gap: 1.25rem; /* Espaçamento vertical principal entre os blocos */
}

    /* Título do popup */
    .popup-content .title-modal {
        color: var(--text-text_tertiary, #585B5B);
        text-align: center;
        /* Title */
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 24px; /* 133.333% */
    }

    /* Container para um grupo de formulário (Label + Input) */
    .popup-content .form-group {
        text-align: left;
    }

        /* Estilo para os labels dentro dos grupos de formulário */
        .popup-content .form-group label,
        .popup-content .title-readonly {
            display: block;
            font-size: 1rem; /* 16px */
            font-weight: 400;
            line-height: 1.25rem; /* 20px */
            margin-bottom: 0.25rem; /* 4px de espaço entre label e input */
            /*color: var(--text-text_tertiary, #585B5B);*/
        }

    .popup-content .title-readonly {
        color: var(--text-text_disable, #C2BEBE); /* Cor para labels de campos readonly */
    }

    /* Container para o botão de upload e o ícone 'i' */
    .popup-content .file-edit-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    /* Wrapper para o ícone informativo e seu tooltip */
    .popup-content .info-icon-tooltip-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: help;
    }

        .popup-content .info-icon-tooltip-wrapper .info-icon {
            font-size: 1.25rem;
            color: #6c757d;
        }

        .popup-content .info-icon-tooltip-wrapper:hover .info-icon {
            color: #333;
        }

        /* Estilo para o balão do tooltip */
        .popup-content .info-icon-tooltip-wrapper .info-tooltip-bubble {
            visibility: hidden;
            opacity: 0;
            background-color: #333;
            color: #fff;
            text-align: left;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            line-height: 1.4;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            position: absolute;
            z-index: 10;
            width: 265px;
            top: 50%;
            transform: translateY(-50%);
            left: calc(100% + 10px); /* Posiciona à direita do ícone */
            transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
        }

        .popup-content .info-icon-tooltip-wrapper:hover .info-tooltip-bubble {
            visibility: visible;
            opacity: 1;
        }

    /* Botões de ação (Salvar, Cancelar) no final do popup */
    .popup-content .form-btns {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
    padding: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}