.dx-popup-title {
    border-bottom: none;
}

.dx-popup-title.dx-toolbar .dx-toolbar-before {
    padding-right: 0px;
    width: 100%;
}

.dx-datagrid-edit-popup-form {
    margin: 14px 20px;
}

.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-right: 8px;
}

.dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-left: 8px;
}

.dx-popup-wrapper .dx-toolbar-label .dx-item-content.dx-toolbar-item-content > div {
    font-size: 22px;
    font-family: 'Roboto';
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    font-style: normal;
    line-height: 30px;
}

/* Es el "arrastra columna para grupar" que aparece arriba de la grilla */
.dx-popup-wrapper .dx-toolbar-label .dx-item-content.dx-toolbar-item-content > div.dx-datagrid-group-panel {
    font-size: 13px;
}

.dx-texteditor-label .dx-label {
    color: rgba(0, 0, 0, 0.6);
}

.dx-field-item-label-location-top {
    display: none;
}

.dx-texteditor.dx-editor-filled::after {
    border-bottom: none;
}

.dx-field-item-label-text {
    color: rgba(0, 0, 0, 0.9);
    font-size: 15px;
}

/* pongo el texto del boton guardar en linea con el icono */
.dx-datagrid-edit-popup .dx-button-mode-text.dx-button-default {
    display: flex;
}


/* Pongo icono de guardar en el boton guardar que te pone por default la grilla cuando te abre el popup */
/** pagina para convertir el svg: https://yoksel.github.io/url-encoder/ */
.dx-datagrid-edit-popup.dx-popup-wrapper .dx-button-default::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' className='bi bi-floppy' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H9v3h2z' /%3E%3Cpath d='M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z' /%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: flex;
    padding-left: 8px;
    margin-left: 7px;
    padding-top: 5px;
}

.dx-datagrid-edit-popup.dx-popup-wrapper .dx-button-default {
    display: flex;
}

/* elimino el boton de cancelar que te pone automatico */
.dx-datagrid-edit-popup.dx-popup-wrapper .dx-button-default[aria-label='Cancelar'] {
    display: none;
}

/* le saco los iconos a los que son de estilo dialog */
.dx-popup-wrapper .dx-button-default.dx-dialog-button::before {
    display: none;
}

/* padding a los botones por default que pone la grilla en el popup */
.dx-popup-normal .dx-button-has-text.dx-button-mode-text .dx-button-content {
    padding: 5px 16px;
    padding-left: 0px !important;
    margin-left: 18px;
}

.dx-htmleditor-toolbar .dx-button-has-text.dx-button-mode-text .dx-button-content {
    padding-left: 0px !important;
    margin-left: 0px;
}

.dx-htmleditor-toolbar-wrapper .dx-overlay-wrapper .dx-overlay-content {
    max-height: 300px !important;
    height: 300px !important;
}

.dx-popup-bottom.dx-toolbar .dx-toolbar-after {
    position: relative;
}

/* Agrando al popup de filtros de la grilla */
.dx-header-filter-menu .dx-popup-normal {
    min-width: 304px !important;
    width: fit-content !important;
}

/*Acomodo los botones de los filtros de la grilla */
.dx-header-filter-menu .dx-popup-normal .dx-toolbar-items-container{
    justify-content: flex-end;
    display: flex;
}


/*.dx-datagrid-edit-popup .dx-popup-content {
height: auto !important;
}*/
    /*tamaño del subtitulo*/
    .dx-widget #subtituloPopup {
        color: rgba(0, 0, 0, 0.55);
        font-size: 14px;
        margin-top: 0px;
        margin-bottom: 13px;
    }

/*cambia los labels cuando la grilla edita en modo popup*/
.container-fluid .dx-overlay-content.dx-popup-normal.dx-popup-draggable .dx-popup-bottom {
    margin-top: 5px;
    bottom: 10px;
    position: absolute;
}

.container-fluid .MuiTableCell-root {
    border-bottom: none;
}

.row{
    margin-left: 0px;
    margin-right: 0px;
}

.container-fluid .dx-popup-content {
    height: 85% !important;
}

/* Inputs de los forms de la grilla cuando está en modo popup */
.dx-popup-content .dx-datagrid-edit-popup-form .dx-field-item-content .dx-texteditor-with-floating-label.dx-editor-filled {
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background-color: transparent;
}

/*
* PARA LOS POPUP CON COMPONENTES MATERIAL-UI
*/
/* Pone el recuadro azul para los textfield de Material-UI cuando tienen foco en los popups */
.dx-popup-content .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border: 2px solid #008cd1;
}

.dx-popup-content .MuiOutlinedInput-root.Mui-focused {
    background-color: #eef6ff;
    /* Múltiples sombras: una para la parte inferior y otra para los lados */
    box-shadow: 0px 2px 8px rgba(0, 123, 255, 0.6), /* Sombra para el fondo */
    0px -2px 0px 4px transparent; /* Sombra transparente para "recortar" la parte superior */
}

/* pone el label del textfield tambien en azul cuando está con el foco */
.dx-popup-content .MuiInputLabel-root.Mui-focused {
    color: #046a9d;
    font-weight: bold;
}

/* pone el borde de los inputs mas oscuro */
.dx-popup-content .MuiOutlinedInput-notchedOutline {
    border-color: #949494;
    box-shadow: 0px 0px 1px 1px #dddddd;
}


/* alto de los inputs */
.dx-popup-content .MuiOutlinedInput-root {
    height: 36px;
    border-radius: 1px;
}

/* le pongo un fondo al label que se sube del input para que no lo corte la sombra */
.dx-popup-content .MuiInputLabel-outlined.MuiInputLabel-shrink {
    background-color: #ffffff;
    padding: 0px 6px;
    margin: 0px -5px;
    font-size: initial !important;
}

/* le quito el fondo al label que se sube del input para que lo corte la sombra del foco */
.dx-popup-content .MuiInputLabel-animated.MuiInputLabel-shrink.MuiInputLabel-outlined.Mui-focused {
    background-color: transparent;
}

/* cambio el tamaño de la letra para los inputs sin foco */
.dx-popup-content .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-outlined {
    font-size: 13px;
}

    .dx-popup-content .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-outlined.Mui-focused {
        font-size: initial;
    }

/* piso la propiedad de ellos para el espacio entre los inputs */
.dx-popup-content .dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 10px;
}

/*
* PARA LOS POPUP CON COMPONENTES DEVEXTREME
*/
    /* Pone el recuadro azul para el SelectBox de DevExtreme cuando tiene foco en los popups */
    .dx-popup-content .dx-selectbox.dx-state-focused .dx-selectbox-container {
    }

/* pone el alto a los inputs */
.dx-popup-content .dx-selectbox, .dx-popup-content .dx-texteditor.dx-editor-outlined, .dx-dropdowneditor-input-wrapper.dx-selectbox-container {
    height: 36px;
}

/* Aplica el box-shadow y el background-color al SelectBox y textbox en foco */
.dx-popup-content .dx-selectbox.dx-state-focused, .dx-popup-content .dx-texteditor.dx-editor-outlined.dx-state-focused {
    background-color: #eef6ff !important;
    /* Múltiples sombras: una para la parte inferior y otra para los lados */
    box-shadow: 0px 2px 8px rgba(0, 123, 255, 0.6), /* Sombra para el fondo */
    0px -2px 0px 4px transparent !important; /* Sombra transparente para "recortar" la parte superior */
}

/*  Pone el label del SelectBox también en azul cuando está con el foco. */
.dx-popup-content .dx-selectbox.dx-state-focused .dx-label, .dx-popup-content .dx-texteditor.dx-editor-outlined.dx-state-focused .dx-label {
    color: #046a9d;
    font-weight: bold;
}

/* azul para cuando pongo el foco en los botones, en los checks y en la cruz del popup */
.dx-popup-content .dx-button.dx-state-focused, .dx-popup-content .dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-popup-wrapper .dx-widget.dx-button.dx-button-mode-text.dx-button-normal.dx-button-has-icon.dx-closebutton.dx-state-focused {
    box-shadow: 0px 2px 8px rgba(0, 123, 255, 0.6) !important;
    border: 2px solid #008cd1;
}


/* ubica bien el desplegar de los selectbox */
.dx-widget.dx-button-mode-contained.dx-button-normal.dx-dropdowneditor-button {
    width: fit-content;
    align-items: center;
    display: flex;
}


/* pongo el foco como los otros para las etiquetas a en los popup y cuando están adentro de una grilla */
.dx-popup-content a:focus, .dx-datagrid-table .dx-focused a:focus {
    outline-color: #008cd1;
    box-shadow: 0px 3px 8px rgba(0, 123, 255, 0.8);
    background-color: #eef6ff;
}