.qx_h2_Configuracion {
    padding-bottom: 1rem;
}
.qx_h5_Configuracion {
    padding-bottom: 1rem;
}
.qx_rdzCard_ConfiguraItem {
    background: rgba(17, 81, 243, 0.16);
    border-radius: 6px;
}

.qx_rdzLabel_ConfiguraItem {
    font-size: medium;
    width: 125px;
}

.validation-message {
    display: inline-block;
    color: var(--rz-form-error-color);
    font-size: var(--rz-form-error-font-size);
    padding: var(--rz-validator-text-padding);
}

.modal-backdrop {
    --bs-backdrop-zindex: 0;
    --bs-backdrop-bg: transparent;
    --bs-backdrop-opacity: 0;
    position: static;
    top: auto;
    left: auto;
    z-index: 0;
    width: auto;
    height: auto;
    background-color: transparent;
}

/*Estilo de texto para uso normal con font weight 500*/
.text-normal-fw500 {
    color: #1E1E1E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 24*/
.text-normal-fw500-fz24 {
    font-family: R-Flex;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 16*/
.text-normal-fw500-fz16 {
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

    /*Estilo de texto para uso normal con font weight 500 tamaño 18*/
.text-normal-fw500-fz18 {
    font-family: R-Flex;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

    /*Estilo de texto para uso normal con font weight 500 tamaño 20*/
.text-normal-fw500-fz20 {
    font-family: R-Flex;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 700 (negritas)*/
.text-normal-fw700 {
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

/*Estilo de texto para uso normal con font weight 400 tamaño 24*/
.text-normal-fw400-fz24 {
    font-family: R-Flex;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
}

/*Estilo de texto para uso normal con font weight 300 tamaño 15*/
.text-normal-fw300-fz15 {
    font-family: R-Flex;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
}

/*Estilo de texto para uso normal con font weight 300 tamaño 18*/
.text-normal-fw300-fz18 {
    font-family: R-Flex;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
}
/*Estilo de texto para uso normal con font weight 300 tamaño 18*/
.text-normal-fw300-fz18-blue {
    color: #425DF6;
}

/*Estilo de texto para uso normal con font weight 300 tamaño 16*/
.text-normal-fw300-fz16 {
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 14*/
.text-normal-fw500-fz14 {
    font-family: R-Flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 700 tamaño 14*/
.text-normal-fw700-fz14 {
    font-family: R-Flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 30*/
.text-normal-fw500-fz30 {
    font-family: R-Flex;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 700 tamaño 20*/
.text-normal-fw700-fz20 {
    font-family: R-Flex;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

/*Estilo de texto para uso normal con font weight 700 tamaño 30*/
.text-normal-fw700-fz30 {
    font-family: R-Flex;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 50*/
.text-normal-fw500-fz50 {
    font-family: R-Flex;
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo de texto para uso normal con font weight 500 tamaño 25*/
.text-normal-fw500-fz25 {
    font-family: R-Flex;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
}

/*Estilo para los input*/
.text-input {
    color: #A7A19E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
 
/*Estilo para botón de color blanco*/
.button-white {
    border-radius: 5px;
    border: 2px solid #425DF6;
    background: #FFF;
    color: #425DF6;
}

/*Estilo para botón de color azul*/
.button-blue {
    border-radius: 5px;
    border: 2px solid #425DF6;
    background: #425DF6;
    color: #FFF;
}

/*Estilo para el tamaño de los botones*/
.button-distribution {
    width: 136px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items:center;
}

/*Formato para los cabeceros de un grid en radzen*/
.rz-column-title-content {
    color: #A7A19E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/*Formato para las celdas de información de un grid en radzen*/
.rz-cell-data {
    color: #1E1E1E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/*Formato para el pginador de un grid en radzen*/
.rz-paginator {
    color: #A7A19E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    border-top: 1px solid #EBEBEB;
    display: flex;
}

/*Color de las filas striped de un grid en radzen*/
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: rgba(241, 244, 251, 0.30);
}

/*Borde para las filas de un grid en radzen*/
.rz-data-row {
    border-top: 1px solid #EBEBEB;
}

/*Formato para un grid de radzen*/
.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    color: #1E1E1E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/*z-index para el cabecero de un grid en radzen*/
.rz-grid-table thead {
    z-index: 1;
}

.rz-paginator-summary {
    color: #A7A19E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/*Tipografía para el paginador de un grid en radzen*/
.rz-paginator .rz-pagesize-text {
    color: #A7A19E;
    font-family: R-Flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/*Tipografía para tags en específico*/
.rz-text-display-h5 {
    font-family: R-Flex;
}

/*Tipografía para tags en específico*/
.rz-text-h3 {
    font-family: R-Flex;
}

/*Tipografía para tags en específico*/
.rz-button {
    font-family: R-Flex;
}

/*Tipografía para tags en específico*/
.rz-label {
    font-family: R-Flex;
}

/*Borde por defecto para los componentes*/
.rz-textbox, 
.rz-chkbox-box, 
.rz-dropdown, 
.rz-data-grid, 
.border-bottom-components {
    border: 1px solid #EBEBEB;
    border-radius: 5px 5px 5px 5px;
}

#component-background-menu {
    display: none;
}

.search-container {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

#container-username{
    justify-content: end !important;
}

/*Estilo para el contenedor del logo de quickex en el nav*/
#container-logo-nav {
    border-bottom: 1px #eeeeee solid;
}

/*Estilos para pantallas a partir de 768px para abajo*/
@media screen and (max-width:768px) {
    #component-background-menu {
        display: block;
    }
}

/*Estilos para pantallas a partir de 599px para abajo*/
@media screen and (max-width:599px) {
    .search-container {
        flex-direction: column;
    }

    #container-username {
        justify-content: start !important;
    }
}

/*Estilos para pantallas a partir de 400px para abajo*/
@media screen and (max-width:400px) {
    .rz-dialog-confirm, .rz-dialog-alert {
        width: 85% !important;
    }
}

/*Estilos para pantallas a partir de 350px para abajo*/
@media screen and (max-width:350px) {
    .rz-paginator, .rz-dropdown {
        width: 100% !important;
    }
}

/*Estilos para el botón color*/
.qckx-blue-btn-icon {
    background: var(--blue-qckx);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 2px solid var(--blue-qckx);
    color: #FFF;
}
 
.qckx-blue-btn-icon div {
        display: flex;
        align-items: center;
    }

.qckx-blue-btn-icon div p {
    margin-left: 2px;
}

.qckx-blue-btn {
    background: var(--blue-qckx);
    border-radius: 5px;
    border: 2px solid var(--blue-qckx);
    color: #FFF;
}
.text-blue-color-qckx {
    color: var(--blue-qckx)
}

/*Separador para las tarjetas de las gráficas*/
.card-separator {
    border-color: #EBEBEB;
    width: calc(100% + 2 * 1rem);
    margin-left: -1rem;
    margin-right: -1rem;
}

/*Alto de las gráficas*/
.rz-chart {
    height: 170px;
}

/*Estilo para el texto de las gráficas*/
.rz-legend-item-text {
    font-family: R-Flex;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
}

/*Estilos para el botón azul  desactivado*/
.qckx-blue-btn:disabled {
    background-color: #D5DDF7;
    color: #959FC1;
    border-color: #D5DDF7;
}

/*Color de fondo para radzencard personalizado*/
.qx-item-rdzCard
{
    background-color:#ffffff; 
}

/*Tamaño minimo de radzencard para solicitudes*/
.qx-item-rdzCard-rd
{
    min-height: 234px;
}
/******* Estilos para los radio buttons ********/
.custom-radio {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

/*Estilo que oculta el circulo del radio button*/
.custom-radio-squared {
    display: none;
}
/*Estilo para mostrar el cuadro de radio button y la etiqueta*/
.custom-radio-squared + label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: black;
    padding: 5px 10px;
    margin-right: 10px;
}
/*Estilo del radio button y la etiqueta en estado normal antes de finalizar el pintado*/
.custom-radio-squared + label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    border: 2px solid #EBEBEB;
    border-radius: 0; /* Square shape */
    background-color: transparent;
}
/*Estilo del radio button y etiqueta cuando esté marcado*/
.custom-radio-squared:checked + label {
    background-color: #D5DDF7;
    color: black;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    width: 100%;
}
/**Estilo del radio button antes de finalizar el marcado*/
.custom-radio-squared:checked + label::before {
    background-color: #425DF6;
    border: 2px solid rgb(255, 255, 255);
}

/******* Estilos para los checks ********/
/* 
Clase para personalizar la apariencia de un checkbox.
*/
.custom-check {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

/* Checkboxes cuadrados */
.custom-check-squared {
    display: none;
}

/* 
Estilo para etiquetas asociadas a elementos con la clase .custom-check-squared.
*/
.custom-check-squared + label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: black;
    padding: 5px 10px;
    margin-right: 10px;
}

/* 
 * Este bloque de estilo define la apariencia de un elemento de etiqueta que sigue a un 
 * elemento con la clase .custom-check-squared. El pseudo-elemento ::before se utiliza 
 * para crear un cuadro antes de la etiqueta.
 */
.custom-check-squared + label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    border: 2px solid #EBEBEB;
    border-radius: 0;
    background-color: transparent;
    flex-shrink: 0;
}

/*
Cuando el checkbox está marcado, se aplica el siguiente estilo al elemento label.
*/
.custom-check-squared:checked + label {
    color: #425DF6;
    border-radius: 5px;
    width: 100%;
}

/* 
 Estilo para el elemento antes del label asociado a un checkbox personalizado con clase .custom-check-squared cuando está marcado.
 */
.custom-check-squared:checked + label::before {
    background-color: #425DF6;
    border: 3px double #fff
}

/* 
    Estido para cuando el check cuadrado es disabled
 */
.custom-check-squared:disabled + label {
    color: #D5DDF7;
    border-radius: 5px;
    width: 100%;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 
    Estido para cuando el check cuadrado es disabled
 */

.custom-check-squared:disabled + label::before {
    background-color: #D5DDF7;
    border: 3px double #fff
}

/*Estilo para el titulo de tab del Dashboard de solicitud de documentos*/
.custom-title-tab {
    background-color:white !important; 
    border-top-right-radius:0px !important; 
    border-bottom-color:#EBEBEB !important;

    font-family: R-Flex;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: start;
}

/*Estilo para el titulo de tab del Dashboard de solicitud de documentos cuando se pasa el mouse por encima*/
.custom-title-tab:hover {
    color: #000000;
}

/* Custom styles for nav-link*/
.custom-nav-link {
    background-color: #F6F8FF !important;
    border-color: #EBEBEB !important;
    
    font-family: R-Flex;
    color: #000000; 
    font-weight: 300;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom styles for nav-link cuando se pasa el mouse por encima*/
.custom-nav-link:hover {
    color: #000000;
}
 
/* Custom styles para nav-link cuando está activo*/
.custom-nav-link.active {
    color: var(--blue-qckx) !important; /* Active color */
    background-color: #ffffff !important;  /* Active background color */
    border-color:  #EBEBEB #EBEBEB transparent #EBEBEB !important; 
    
    font-family: R-Flex;
    font-weight: 700 !important;
    font-size: 18px !important;
    display: flex;
    align-items: center; 
    justify-content: center; 
}

/* Color principal del panel de solicitudes */
.custom-tabpanel-content-documentrequest {
    background-color: white;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/*Estilos para el color azul de QuickEx*/
.qckx-blue-color {
    color: var(--blue-qckx);
}

/*Estilo para el color negro 001 de QuickEx*/
.qckx-black-001-color {
    color: var(--black-001-qckx)
}

/* Estilos para el ícono */
.dashboard-request-icon {
    margin-right: 5px;
    width: 23px;
    height: 23px;
}

/*Estilo para leyenda de Grafica de Pastel Dashboard*/
.custom-graphic-series-legend {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

/*Estilo para los items de la leyenda de la grafica de pastel*/
.custom-legend-graphics-series-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

/*Estilo para el texto de los items de la leyenda de la grafica de pastel*/
.custom-legend-graphics-series-item-text
{
    font-size: 16px;
    font-weight: 500;
}

/*Estilo para el color de los items de la leyenda de la grafica de pastel*/
.custom-legend-graphics-series-color {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

/*Estilo para los rows de los grid del dashboard*/
.cell-dashboard-style {
    font-size: 15px;
    font-weight: 500;
}

/* Capitaliza la primera letra un texto en un parráfo, para ello primero conviert el texto a minúsculas */
.custom-capitalize-first-uppercase {
    text-transform: lowercase;
}

/* Capitaliza la primera letra un texto en un parráfo */
.custom-capitalize-first-uppercase:first-letter {
    text-transform: uppercase; 
}

/*Estilo para las tarjetas informativas del dashboard del expediente*/
.dashboard-card-files
{
    height: 221px;
    border-radius: 10px;
    border: 1px solid #EBEBEB;   
    background: #F9FAFF;
    cursor: pointer;
}

/*Estilo para los títulos de las tarjetas informativas del dashboard del expediente*/
.dashboard-card-files-title
{
    font-size: 35px;
    font-weight: 500;
    color: var(--blue-qckx);
    font-family: R-Flex;
}

/*Estilo para los textos de las tarjetas informativas del dashboard del expediente*/
.dashboard-card-files-status-text
{
    font-size: 16px;
    font-weight: 300;
    color: #7B7D7B;
    font-family: R-Flex;
}

/*Estilo para icono de dashboard files*/
.icon-files-module {
    width: 23px;
    height: 23px;
}