/* INDICE

    # FUENTES: fuentes externas usadas
        

    # PARRAFOS, TITULOS SUBTITULOS : N estilos de textos para aplicar en toda la aplicacion. 
                                        NO AÑADIR MÁS ESTILOS SIN CONTAR CON EL DISEÑADOR GRAFICO de UX.

*/






/*-------------------------------------------------------------------------------------------------------------*\
# FUENTES
/*-------------------------------------------------------------------------------------------------------------*\

/* fuente Material Icons */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Rounded';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIconsRound-Regular.otf); /* For IE6-8 */
    src: local('Material Icons Rounded'), local('MaterialIcons-Rounded'), url(../fonts/MaterialIconsRound-Regular.otf) format('woff');
}


@font-face {
    font-family: 'BNPP Square LOCAL';
    font-weight: 100 300;
    src: url('../fonts/BNPP Square Light v3.ttf') format('truetype');
}

@font-face {
    font-family: 'BNPP Square LOCAL';
    font-weight: 400 500;
    src: url('../fonts/BNPP Square Regular v3.ttf') format('truetype');
}

@font-face {
    font-family: 'BNPP Square LOCAL';
    font-weight: 600 700;
    src: url('../fonts/BNPP Square Bold v3.ttf') format('truetype');
}

@font-face {
    font-weight: 700 900;
    font-family: 'BNPP Square LOCAL';
    src: url('../fonts/BNPP Square ExtraBold v3.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons-round {
    font-family: 'Material Icons Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}



/*-------------------------------------------------------------------------------------------------------------*\
# ELEMENTOS VISUALES
/*-------------------------------------------------------------------------------------------------------------*\


/*------------------------------------*\
# PARRAFOS, TITULOS SUBTITULOS, GOOGLEICONS, SVGs, COLORES, barra espaciadora
\*------------------------------------*/

/* ojo, para Lorena negro es #404A46 */
/*Para titulos principales, (como el titulo de la pagina), fuente en negro. Fuente Lorena de 32px*/
.titulo-1-NBNN {
    font-size: 1.5rem; /*PENDIENTE DE ESTABLECER. meter en una variable */
    font-family: BNPP Square LOCAL;
    font-weight: 600;
    color: #404A46; /*meter en una variable*/
    word-wrap: break-word;
}

/*Para titulos de secciones, fuente en negro. Fuente Lorena de 20px*/
.titulo-2-NBNN {
    font-size: 1.1rem; /*meter en una variable*/
    font-family: BNPP Square LOCAL;
    font-weight: 600;
    color: #404A46; /*meter en una variable*/
}


/*Para parrafos normales y datos de los grids, fuente en negro. Fuente Lorena de 16px*/
.parrafo-1-NBNN {
    font-size: 0.95rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #404A46; /*meter en una variable*/
    word-wrap: break-word;
}

.parrafo-1-BNBB {
    font-size: 0.95rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #fff; /*meter en una variable*/
    word-wrap: break-word;
}

/*Para parrafos normales y datos de los grids, fuente en negro. Fuente Lorena de 14px*/
.parrafo-2-NBNN {
    font-size: 0.85rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #404A46; /*meter en una variable*/
    word-wrap: break-word;
}


/*Para parrafos Normales y datos de los grids, fuente en blanco. Fuente Lorena de 14px*/
.parrafo-2-BNBB {
    font-size: 0.85rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #fff; /*meter en una variable*/
    word-wrap: break-word;
}

/*Para parrafos pequeños. Fuente Lorena de 12px*/
.parrafo-3-NBNN {
    font-size: 0.75rem; /*meter en una variable*/
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #404A46; /*meter en una variable*/
    word-wrap: break-word;
}

/*Para parrafos pequeños. Fuente Lorena de 12px*/
.parrafo-3-GBGG {
    font-size: 0.75rem; /*meter en una variable*/
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #82938C; /*meter en una variable*/
    word-wrap: break-word;
}


/*PESOS DE FUENTES*/

b{
    font-weight: 600
}
.parrafo-weight-600 {
    font-weight: 600;
}

.parrafo-weight-400 {
    font-weight: 400;
}

.parrafo-weight-300 {
    font-weight: 300;
}


/*TAMAÑOS DE FUENTES  (PARA FUENTES NO ESTANDARD FUERA DE LOS ESTILOS DE AHI ARRIBA) */
.font-size-1_8 {
    font-size: 1.8rem;
}

.font-size-2 {
    font-size: 2rem;
}



/* COLORES */
.parrafo-color-NBNN {
    color: #404A46 !important; /*meter en una variable*/
}

.parrafo-color-PBPP { 
    color: var(--primaryColor) !important;
}

.parrafo-color-VBNN { 
    color: var(--primaryColor) !important;
}

.parrafo-color-RBNN {
    color: #e13e34 !important; /*meter en una variable*/
}

.parrafo-color-GBGG {
    color: #82938C !important; /*meter en una variable*/
}F

.parrafo-color-BNBB {
    color: #fff !important; /*meter en una variable*/
}

.color-svgicons-VBVV {
    color: #00915A !important; /*meter en una variable: Ojo, esto no es el color verde PRIMARY de BNP, sino el verde de que algo es correcto*/
    fill: #00915A !important; /*meter en una variable: Ojo, esto no es el color verde PRIMARY de BNP, sino el verde de que algo es correcto*/
}

.color-svgicons-RBNN {
    color: #e13e34 !important;
    fill: #e13e34 !important;
}

.color-background-BBNB {
    background-color: #fff !important; /*meter en una variable*/
}

.color-background-GBBG {
    background-color: #eee !important; /*meter en una variable*/
}

/*para usar en elementos de tipo texto que deben cambiar de color de "fuente" cuando se hace hover sobre su contenedor*/
/*es necesario que el contenedor tenga el estilo hover-container-N */
/* para los estilos UX tendremos que cambiar el tamaño o el weight*/
.hover-container-N:hover .hover-text-N {
    color: #606F69 !important;
}

/*para usar en elementos de tipo icono svg que deben cambiar de color de "fuente" cuando se hace hover sobre su contenedor*/
/*es necesario que el contenedor tenga el estilo hover-container-N */
/* para los estilos UX tendremos que cambiar el tamaño o el weight*/
.hover-container-N:hover .hover-icon-N {
    fill: #606F69 !important;
}


/*para usar en elementos que deben cambiar de cambiar de color de "fuente" cuando se hace hover sobre ellos */
/* para los estilos UX tendremos que cambiar el tamaño o el weight*/
.hover-element-N:hover {
    color: #606F69 !important;
}



/*hover para contenedores en los que el contenedor cambia el background*/
.hover-container-BG:hover {
    background-color: var(--fillColor) !important; 
}

    /*para usar en elementos de tipo texto que deben cambiar de color de "fuente" cuando se hace hover sobre su contenedor y el contenedor cambia el background*/
    /*es necesario que el contenedor tenga el estilo hover-container-BG */
    /* para los estilos UX tendremos que cambiar el tamaño o el weight*/
    .hover-container-BG:hover .hover-text-N {
        color: #606F69;
    }

/* Barra de desplazamiento */
/* Estilo para las barras de desplazamiento en WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 1rem; 
}

::-webkit-scrollbar-track {
    background: transparent; 
    border: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primaryColor); 
    border-radius: 6px; 
    border: 3px solid transparent; 
    background-clip: content-box; 
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #E5FFF5; 
    }

/* Estilo para las barras de desplazamiento en Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primaryColor) transparent;
}

    *::-moz-scrollbar-track {
        background: transparent;
        border: none;
    }

    *::-moz-scrollbar-thumb {
        background-color: var(--primaryColor); 
        border-radius: 6px;
    }

        *::-moz-scrollbar-thumb:hover {
            background-color: #E5FFF5; 
        }

/*-------------------------------------------------------------------------------------------------------------*\
# ELEMENTOS DE VISUALIZACION Y ESPACIADO (margenes, padings, altos, anchos,etc)
/*-------------------------------------------------------------------------------------------------------------*\
    Aquellos que son absolutos se nombran TipoElemento-a-valorentero_valordecimal ej: ms-a-0_1
    Aquellos que son relativos se nombran TipoElemento-valorentero_valordecimal ej: ms-10_5
    Para aquellos que ya exista una clase bootstrap, se usa dicha clase ej: m-3 = $spacer = 1rem

/*------------------------------------*\
# MARGENES.     
\*------------------------------------*/
.ms-a-0_1 {
    margin-left: 0.1rem;
}

.me-a-1_5 {
    margin-right: 1.5rem
}

.me-a-3 {
    margin-right: 3rem;
}

.me-a-5 {
    margin-right: 5rem;
}


/*------------------------------------*\
# PADDINGS.     
\*------------------------------------*/
.pt-a-0_3 {
    padding-top: 0.3rem;
}

.pt-a-2 {
    padding-top: 2rem;
}

.pt-a-0_3 {
    padding-top: 0.3rem;
}

.pe-a-2 {
    padding-right: 2rem !important;
}


/*------------------------------------*\
# ABSOLUTE MIN-WIDTHs.
\*------------------------------------*/
.mw-a-1 {
    min-width: 1rem !important;
}

.mw-a-2 {
    min-width: 2rem !important;
}

.mw-a-3 {
    min-width: 3rem !important;
}

.mw-a-4 {
    min-width: 4rem !important;
}

.mw-a-5 {
    min-width: 5rem !important;
}

.mw-a-6 {
    min-width: 6rem !important;
}

.mw-a-7 {
    min-width: 7rem;
}

.mw-a-8 {
    min-width: 8rem !important;
}

.mw-a-9 {
    min-width: 9rem !important;
}

.mw-a-10 {
    min-width: 10rem !important;
}

.mw-a-15 {
    min-width: 15rem !important;
}

.mw-a-20 {
    min-width: 20rem !important;
}

.mw-a-30 {
    min-width: 30rem !important;
}


/*------------------------------------*\
# ABSOLUTE MAX-WIDTHs.
\*------------------------------------*/

.maxw-a-4 {
    max-width: 4rem !important;
}

.maxw-a-10 {
    max-width: 10rem !important;
}

.maxw-a-20 {
    max-width: 20rem !important;
}

.maxw-a-40 {
    max-width: 40rem !important;
}

/*------------------------------------*\
# ABSOLUTE WIDTHs.
\*------------------------------------*/

.w-a-3 {
    width: 3rem !important;
}

.w-a-4 {
    width: 4rem !important;
}

.w-a-5 {
    width: 5rem !important;
}

.w-a-6_5 {
    width: 6.5rem !important;
}

.w-a-8 {
    width: 8rem !important;
}

.w-a-10 {
    width: 10rem !important;
}



.w-a-15 {
    width: 15rem !important;
}

.w-a-20 {
    width: 20rem !important;
}

.w-a-21 {
    width: 21rem !important;
}

.w-a-30 {
    width: 30rem !important;
}

.w-a-40 {
    width: 40rem !important;
}

.w-a-50 {
    width: 50rem !important;
}


/*------------------------------------*\
# ABSOLUTE HEIGHTs.
\*------------------------------------*/
.h-a-2 {
    height: 2rem !important;
}

.h-a-2_3 {
    height: 2.3rem !important;
}

.h-a-2_4 {
    height: 2.4rem !important;
}

.h-a-2_5 {
    height: 2.5rem !important;
}

.h-a-3 {
    height: 3rem !important;
}

.h-a-3_5 {
    height: 3.5rem !important;
}

.h-a-10 {
    height: 10rem !important;
}

.h-a-15 {
    height: 15rem !important;
}

.h-a-25 {
    height: 25rem !important;
}

.h-a-30 {
    height: 30rem !important;
}


/*------------------------------------*\
# RELATIVE WIDTHs. (bootstrap ya tiene 25, 50, 75 y 100%)
\*------------------------------------*/
.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-68 {
    width: 68%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}


/*------------------------------------*\
# RELATIVE MIN-WIDTHs.
\*------------------------------------*/

.min-w-50 {
    min-width: 50rem !important;
}

/*------------------------------------*\
# BORDERS
\*------------------------------------*/

.border-square-topleft {
    border-top-left-radius: 0rem !important;
}



/*------------------------------------*\
# TAMAÑOS DE FUENTES
\*------------------------------------*/
.font-size-1r {
    font-size: 1rem !important;
}


/*------------------------------------*\
# DIRECCION
\*------------------------------------*/
.rtl {
    direction: rtl !important;
}

.ltr {
    direction: ltr !important;
}



/*------------------------------------*\
# CURSORES
\*------------------------------------*/
/*por alguna razon la class cursor-pointer de bootstrap no funciona*/
.cursor-hand {
    cursor: pointer !important;
}


/*------------------------------------*\
# TRANSFORMACIONES
\*------------------------------------*/
/*por alguna razon la class rotate-180 de bootstrap no funciona*/
.rotar-180{
    transform:rotate(180deg);
}



/*------------------------------------*\
# GAPs.     
\*------------------------------------*/
.g-y-1 {
    gap: 1rem 0rem;
}



/*-------------------------------------------------------------------------------------------------------------*\
# CONTROLES DE .NET
/*-------------------------------------------------------------------------------------------------------------*\

/*------------------------------------*\
# ENLACES(<A>)
\*------------------------------------*/

/*Estilo comun para todos los enlaces de la aplicacion. Sobreescribe el estilo por defecto para los "<a>"*/
a {
    cursor: pointer;
    color: var(--primaryColor);
}


/*------------------------------------*\
# RADIOBUTTONS
\*------------------------------------*/

/*rb-no-circle. Estilo comun para radiobuttons que no muestran el circulo*/
.rb-no-circle input {
    display: none;
}


/*------------------------------------*\
# BOTONES
\*------------------------------------*/
.button-principal {
    background-color: var(--primaryColor);
    color: #fff;
    border-color: var(--primaryColor);
    border-radius: 0.25rem;
    --bs-btn-disabled-color: var(--Neutral-White, #FFF);
    --bs-btn-disabled-bg: var(--Neutral-Neutral-grey-500, #CCD3D0);
    --bs-btn-disabled-border-color: var(--Neutral-Neutral-grey-500, #CCD3D0);
    --bs-btn-active-bg: var(--secondaryColor);
    --bs-btn-active-color: var(--primaryColor);
    --bs-btn-active-border-color: var(--primaryColor);   
}
  
    .button-principal:active {
        background-color: var(--secondaryColor);
        color: #fff;
        border-color: var(--primaryColor);
        border-radius: 0.25rem;
    }

    .button-principal:hover {
        background-color: var(--secondaryColor) ;
        color: var(--primaryColor);
        border-color: var(--primaryColor);
    }

    .button-principal:focus {
        background-color: var(--secondaryColor);
        color: var(--primaryColor);
        border-color: var(--primaryColor);
        border-radius: 0.25rem;
        outline: none !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 127, 79, 0.50);
    }

/*esta propiedad es para los botones primary que en lugar de tener un texto tienen dentro un svg*/
        .button-principal:focus svg path {
            fill: var(--primaryColor);
        }

.button-secundario {
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    border-color: var(--primaryColor);
    border-radius: 0.25rem;
    --bs-btn-disabled-color: var(--Neutral-Neutral-grey-500, #CCD3D0);
    --bs-btn-disabled-bg: var(--Neutral-Neutral-grey-50, #F7F8F7);
    --bs-btn-disabled-border-color: 1px solid var(--Neutral-Neutral-grey-500, #CCD3D0);
    --bs-btn-active-bg: var(--primaryColor);
    --bs-btn-active-color: var(--secondaryColor);
    --bs-btn-active-border-color: var(--primaryColor);   
} 

    .button-secundario:hover {
        background-color: var(--primaryColor);
        color: #fff;
        border-color: var(--primaryColor);
    }

    .button-secundario:hover path {
        fill: #fff; /*meter en una variable*/
    }

    .button-secundario:disabled {
        background-color: var(--secondaryColor);
        color: #fff;
        border-color: var(--secondaryColor);
        border-radius: 0.25rem;
    }

    .button-secundario:focus, .button-secundario:active {
        background-color: var(--primaryColor);
        border-color: var(--primaryColor);
        border-radius: 0.25rem;
        outline: none !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 127, 79, 0.50);
        color: #fff
    }
        /*esta propiedad es para los botones secundary que en lugar de tener un texto tienen dentro un svg*/
        .button-secundario:focus svg path {
            fill: #fff !important;
        }


/*------------------------------------*\
# DROPDOWNLIST (select2)
\*------------------------------------*/


/*contenedor general del select 2*/
.select2-container {
    width: 100% !important;
}

/*contenedor del "textbox" del select2*/
.select2-selection--single {
    height: 2.3rem !important;
    align-content: center !important;
    border-color: #82938c !important;
    padding-right: 1rem;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--fillColor) !important;
}

/*Estilo para resaltar el "textbox" del select2 cuando hay error de datos */
/*.Textbox-Error + .select2-container--default, .Textbox-Error + .select2-selection--single {
    border: 0.1rem solid #E13E34 !important;
    color: #E13E34 !important;
    border-radius:6px;
}*/


/*flecha del desplegable*/
.select2-selection__arrow {
    right: 0.4rem !important;
    top: 0.4rem !important;
}


/*item seleccionado e items del desplegable */
.select2-selection__rendered, .select2-results__options {
    font-size: 0.95rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #82938c !important; /*meter en una variable*/
    word-wrap: break-word;
}

/*hover de los items del desplegable*/
.select2-results__option--highlighted {
    color: #606F69 !important; /*meter en una variable*/
    background-color: var(--fillColor) !important;
}


/*item seleccionado del desplegable*/
.select2-results__option[aria-selected="true"] {
    color: #606F69 !important; /*meter en una variable*/
    background-color: #EEF0EF !important; /*meter en una variable*/
}


/*Estilo para resaltar el "textbox" del select2, FUERA de un grid, cuando hay error de datos. 
    El estilo PanelSelect2-Error debe ser aplicado al panel que contiene el select2 */
.PanelSelect2-Error .select2-selection--single {
    border: 0.1rem solid #E13E34 !important;
    color: #E13E34 !important;
    border-radius: 6px;
}
    /*Estilo para resaltar el "texto" del select2, FUERA de un grid, cuando hay error de datos */
    .PanelSelect2-Error .select2-selection--single > span {
        color: #E13E34 !important;
    }


/* estilos de select 2 (dropdowns) DENTRO de un gridview*/
.GridView-DataBoxContainer .select2-selection__rendered, .GridView-DataBoxContainer .select2-results__options {
    font-size: 0.85rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    color: #404A46 !important; /*meter en una variable*/
    word-wrap: break-word;
}

.GridView-DataBoxContainer-Error .select2-selection__rendered, .GridView-DataBoxContainer .select2-results__options {
    font-size: 0.85rem;
    font-family: BNPP Square LOCAL;
    font-weight: 400;
    word-wrap: break-word;
}

/*Estilo para resaltar el "textbox" del select2, DENTRO de un grid, cuando hay error de datos */
.GridView-DataBoxContainer-Error .select2-selection--single {
    border: 0.1rem solid #E13E34 !important;
    color: #E13E34 !important;
    border-radius: 6px;
}
    /*Estilo para resaltar el "texto" del select2, DENTRO de un grid, cuando hay error de datos */
    .GridView-DataBoxContainer-Error .select2-selection--single > span {
        color: #E13E34 !important;
    }


/*------------------------------------*\
# TEXTBOX
\*------------------------------------*/
.Textbox-Big {
    align-self: stretch;
    border-radius: 0.3rem;
    border: 0.02rem solid #82938c;
    height: 2.3rem;
    padding: 0rem 1rem;
    color: #82938c;
}

    .Textbox-Big:focus {
        border: 1px solid var(--primaryColor);
        background: #FFF;
        /* Drop shadow/Green/15 */
        box-shadow: 0px 0px 10px 0px rgba(0, 127, 79, 0.15);
        outline: none;
    }

.Textbox-Error {
    border: 0.1rem solid #E13E34 !important;
    color: #E13E34 !important;
}

    .Textbox-Error svg path {
        fill: #E13E34 !important;
    }

/*estilo general para textbox deshabilitados */
input[type=text]:disabled {
    background-color: var(--fillColor) !important;
}

/*------------------------------------*\
# CHECKBOX
\*------------------------------------*/

/* por alguna razon a veces renderiza el checkbox como un input directamente... */
.Checkbox-Dimensions-1rem > input:first-of-type {
    width: 1rem;
    height: 1rem;
}

/* ... y otras veces como un input dentro de un span. */
.Checkbox-Dimensions-1rem > span > input:first-of-type {
    width: 1rem;
    height: 1rem;
}

/*para que los checkboxes salgan en el color primary cuando estén checked*/
input[type="checkbox"]:checked {
    accent-color: var(--primaryColor); /*usar esat nueva propiedad, por que para estos inputs checkbox el background-color no lo pilla*/
}


/*------------------------------------*\
# SLIDERS
\*------------------------------------*/
.Slider {
    accent-color: var(--primaryColor);
}

.Slider-From {
    direction: rtl;
}

.Slider-To {
    direction: ltr;
}


/*------------------------------------*\
# SPINNERS (Imagen de Loading...)
\*------------------------------------*/

.Spinner-Container {
    margin-left: calc(50% - 2.5rem);
}

.Spinner-Control {
    border: 0.75rem solid #FFF;
    border-top: 0.65rem solid var(--primaryColor);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    animation: spin_loading 1s linear infinite;
}

@keyframes spin_loading {
    0% {
        transform: rotate(0deg);
    }

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


/*------------------------------------*\
# FILE UPLOAD
\*------------------------------------*/
.Fileupload_container {
    border-radius: 0.3rem 0rem 0rem 0.3rem;
    border: 0.05rem solid var(--primaryColor);
}


input[type=file]::file-selector-button {
    height: 2.25rem;
    background-color: var(--secondaryColor);
    border: 1rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0rem 0.5rem 0rem 0.5rem;
    font-size: 0.85rem;
    font-family: BNPP Square LOCAL;
    font-weight: 600;
    color: var(--primaryColor);
    word-wrap: break-word;
    margin-right: 1rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border-right: 0.01rem solid var(--primaryColor);   
}

input[type=file].Input_file-Solo_boton::file-selector-button {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border: 0.1rem solid var(--primaryColor);
    height: 2.3rem;
}

    input[type=file]::file-selector-button:hover {
        background-color: var(--primaryColor);
        color: #fff;
        border-color: var(--primaryColor);
    }

input[type=file]:disabled {
    background-color: var(--fillColor) !important;
}

    input[type=file]:disabled::file-selector-button {
        color: #82938c; 
        background-color: var(--fillColor) !important;
        cursor: not-allowed;
    }



/*------------------------------------*\
# GRIDs
\*------------------------------------*/

.GVContainer {
    overflow-x: auto;
    border: solid 0.1rem #E6E9E8; /*meter en una variable: OJO este es el color PRIMARY de la marca, no el verde de que haya ido algo bien*/}

    .GVContainer > div {
        width: 1rem;
        min-width: -webkit-fill-available;
    }


.GridView {
    border: solid;
}

    .GridView tr th {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .GridView tr td {
        padding-left: 2rem;
        padding-right: 2rem;
    }


.GridViewHeaderStyle {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

    .GridViewHeaderStyle th a {
        color: #fff; /*meter en una variable*/
        text-decoration: none;
    }

.GridViewFooterStyle {
    border-top: 3px solid var(--primaryColor);
    color: var(--primaryColor);
    background-color: var(--secondaryColor);
}

.GVRowStyle {
    border-bottom: solid 1px #E6E9E8;
}

.GVAlternatingRowStyle {
    background-color: var(--fillColor);
    border-bottom: solid 1px #E6E9E8;
}

.GridView-Checkbox input {
    margin-top: 0.5rem;
}


/*IMPORTANTE: Estilo para cualquier celda del grid que contenga un textbox, dropdownlist o input (fecha)*/
.GridView-DataBoxContainer {
    float: left;
}

    .GridView-DataBoxContainer input[type="date"]::-webkit-calendar-picker-indicator {
        width: 2rem;
        background-image: url("../../images_UX2025/GridCalendarIcon.svg");
        background-size: 1.2rem;
        background-position: 0rem -0.12rem;
        padding-top: 0px;
        cursor: pointer;
    }



.GridView-datepicker-textbox {
    border: 0.02rem solid #82938c;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    padding: 0rem 0rem 0rem 1rem;
    height: 2.3rem;
    color: #404A46;
}

    .GridView-datepicker-textbox:read-only {
        color:black;
    }

.GridView-datepicker-helper {
    width: 2rem;
    border: 0.02rem solid #82938c;
    border-left: 0rem;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    height: 2.3rem;
}


.GridView-CellRowError {
    background-color: red;
}



/*------------------------------------*\
# DATALIST GRID
\*------------------------------------*/
.DataList-container {
    overflow-x: auto;
    border: solid 0.1rem #E6E9E8; /*meter en una variable: OJO este es el color PRIMARY de la marca, no el verde de que haya ido algo bien*/
}

    .DataList-container > div {
        width: 1rem;
        min-width: -webkit-fill-available;
    }


.DataList-row-container {
    width: 100%;
    align-items: center;
    display: grid;
    white-space: nowrap;
}

.DataList-5R {
    grid-template-columns: repeat(5, 1fr);
}


.DataList-25R {
    grid-template-columns: repeat(25, 1fr);
}


.DataList-header-div {
    padding: 0.5rem 1.5rem;
    text-align: left;
    height: 100%;
    align-content: center;
    font-weight: 600;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.DataList-row-div {
    padding: 0.5rem 1.5rem;
    text-align: left;
    height: 100%;
    align-content: center;
    border-bottom: solid 1px #E6E9E8;
}

.DataList-alternatingrow-div {
    padding: 0.5rem 1.5rem;
    text-align: left;
    height: 100%;
    align-content: center;
    background-color: var(--fillColor);
    border-bottom: solid 1px #E6E9E8;
}

.DataList-header-div-icon {
    padding: 0.5rem;
    text-align: center;
    width: 3rem;
    height: 100%;
    align-content: center;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.DataList-row-div-icon {
    padding: 0.5rem;
    text-align: center;
    width: 3rem;
    height: 100%;
    align-content: center;
    border-bottom: solid 1px #E6E9E8;
}


.DataList-alternatingrow-div-icon {
    padding: 0.5rem;
    text-align: center;
    width: 3rem;
    height: 100%;
    align-content: center;
    background-color: var(--fillColor);
    border-bottom: solid 1px #E6E9E8;
}


.DataList-row-div-error {
    background-color: #f9d8d6 !important; 
    color: #e13e34 !important;
    align-content: center;
    height: 2.2rem;
}



/*-------------------------------------------------------------------------------------------------------------*\
# WUCs, ETC
/*-------------------------------------------------------------------------------------------------------------*\


/*------------------------------------*\
# MENU SUPERIOR
\*------------------------------------*/
.msup-container-area-user {
    margin-top: 3rem;
    border-radius: 0.3rem;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    border: solid 1px #82938C;
    background-color: white; /*Meter en una variable*/
    margin-left: 2rem;
    z-index: 1;
}

.msup-container-user-icon {
    background: var(--secondaryColor);
    border-radius: 9999px;
    width: 2rem;
    height: 2rem;
}

.msup-isflogo {
    height: 2rem;
}

.msup-container-nombreuser {
    min-width: 10rem;
}


/*------------------------------------*\
# MENU IZQUIERDO
\*------------------------------------*/
.mizq-container {
    height: 80vh; /*necesario dar altura "fija" para que el menu lateral haga scroll vertical*/
    overflow-x: hidden;
    overflow-y: hidden;
    direction: rtl;
}

    .mizq-container:hover {
        height: 80vh; /*necesario dar altura "fija" para que el menu lateral haga scroll vertical*/
        overflow-x: hidden;
        overflow-y: auto;
        direction: rtl;
    }


.mizq-icon-container {
    inline-size: fit-content;
}

.mizq-icon-svg {
    height: 2.5rem;
    width: 1.2rem;
    fill: #82938C;
}

.mizq-text-container {
    /*menu estado normal*/
    height: 0rem;
    visibility: hidden;
    /*menu desplegado siempre (para test)
    height: 2.5rem;
    visibility: inherit;*/
}

.mizq-subitems-container {
    /*menu estado normal*/
    visibility: hidden;
    height: 0rem; /* --> necesario para que el menu NO haga scroll vertical replegado */
    /***/
    /*menu desplegado siempre (para test)   
    visibility: inherit;*/
    /* OJO height: 100%; --> Quité esto para que pudiera hacer scroll el menu*/
}

.mizq-lowermenu {
    /*menu estado normal*/
    inline-size: 5rem;
    /*menu (para test)
    inline-size: 20rem;*/
}

.mizq-lowermenu-izq-svg {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mizq-lowermenu-izq-bandera {
    width: 1.3rem;
}

.mizq-lowermenu-izq-text {
    /*menu estado normal*/
    visibility: hidden;
    /*menu (para test)
    visibility: inherit;*/
}

.content {
    padding: 0.1rem 1rem;
    flex: 1;
}



/*-------------------------------------------------------------------------------------------------------------*\
# ESTILOS DE ELEMENTOS GENERALES
/*-------------------------------------------------------------------------------------------------------------*\

/*-------------------------------------------------------*\
# CONTENEDORES TARJETAS DATOS Y CONTENEDORES GRIDs
\*-------------------------------------------------------*/
.card-information-container {
    background-color: #fff; /*meter en una variable*/
    border-color: var(--secondaryColor) !important; /*meter en una variable*/
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 2rem;
    flex-wrap: wrap;
}


.card-information-label {
    flex: 1;
    position: relative;
    line-height: 1.5rem;
}


.card-datepicker-textbox {
    border-radius: 0.3rem 0rem 0rem 0.3rem;
    align-self: stretch;
    border: 0.02rem solid #82938c;
    height: 2.3rem;
    padding: 0rem 1rem;
    color: #82938c;
}



/*------------------------------------*\
# FILTERGROUPs
\*------------------------------------*/

.filtergroup-label-container {
    height: 2.3rem;
    border-radius: 0.3rem 0rem 0rem 0.3rem;
    background-color: var(--secondaryColor);
    border-top: 0.05rem solid var(--primaryColor);
    border-bottom: 0.05rem solid var(--primaryColor);
    border-left: 0.05rem solid var(--primaryColor);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.2rem 0.5rem 0rem 0.5rem;
}


.filtergroup-control-container {
    width: 100%;
    max-width: 15rem;
}


.filtergroup-textbox {
    align-self: stretch;
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    border: 0.02rem solid #82938c;
    height: 2.3rem;
    padding: 0rem 1rem;
}

    .filtergroup-textbox:focus {
        border: 1px solid var(--primaryColor);
        background: #FFF;
        /* Drop shadow/Green/15 */
        box-shadow: 0px 0px 10px 0px rgba(0, 127, 79, 0.15);
        outline: none;
    }

/*dropdown-selec2 de los filtergroups*/
.filtergroup-select2-container .select2-container--default .select2-selection--single {
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.select2-container--focus {
    border: 1px solid var(--primaryColor);
    background: #FFF;
    /* Drop shadow/Green/15 */
    box-shadow: 0px 0px 10px 0px rgba(0, 127, 79, 0.15), 0 0 0 0 rgba(0, 0, 0, 0);  
}

.select2-selection.select2-selection--single:focus {
    /* esta clase de debe emplear con la anterior para el "focus" de los select2*/
    outline: none;
    border:0;
}

.filtergroup-select2-container .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 1rem;
}



.filtergroup-datepicker-textbox {
    border-radius: 0.3rem 0rem 0rem 0.3rem;
    align-self: stretch;
    border: 0.02rem solid #82938c;
    height: 2.3rem;
    padding: 0rem 1rem;
    color: #82938c;
    max-width: 13rem;
}

.filtergroup-datepicker-icon {
    height: 2.3rem;
    border-radius: 0rem 0.3rem 0.3rem 0rem;
    background-color: var(--secondaryColor);
    border-top: 0.05rem solid var(--primaryColor);
    border-bottom: 0.05rem solid var(--primaryColor);
    border-right: 0.05rem solid var(--primaryColor);
    border-left: 0rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0rem 0.5rem 0rem 0.5rem;
    width: 2.5rem;
}

.filtergroup-refresh-button {
    height: 2.5rem;
    border: 0rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0rem 0.5rem 0rem 0.5rem;
}

/*------------------------------------*\
# PILDORAS INFORMATIVAS
\*------------------------------------*/

.pill-container {
    border-radius: 0.3rem;
    justify-content: center;
    margin-left: 1rem;
    padding: 0.2rem 0.5rem;
    height: auto;
}

.pill-label {
    text-align: center;
    word-wrap: break-word
}

.pill-grey {
    background-color: #EEF0EF !important;
    color: #82938C !important;
}

    .pill-grey span {
        background-color: #EEF0EF !important;
        color: #82938C !important;
        margin-top: 0.1rem;
    }


.pill-blue {
    background-color: #D3E8F7 !important;
    color: #268ED8 !important;
}

    .pill-blue span {
        background-color: #D3E8F7 !important;
        color: #268ED8 !important;
        margin: 0rem 0.2rem;
    }

.pill-red {
    background-color: #F9D8D6 !important;
    color: #E13E34 !important;
}

    .pill-red span {
        background-color: #F9D8D6 !important;
        color: #E13E34 !important;
        margin: 0rem 0.2rem;
    }


.pill-green {
    background-color: #E5FFF5 !important;
    color: #00915A !important;
}

    .pill-green span {
        background-color: #E5FFF5 !important;
        color: #00915A !important;
        margin: 0rem 0.2rem;
    }

.pill-orange {
    background-color: #FBE7E1 !important;
    color: #E98868 !important;
}

    .pill-orange span {
        background-color: #FBE7E1 !important;
        color: #E98868 !important;
        margin: 0rem 0.2rem;
    }

.pill-yellow {
    background-color: #FFF7D5 !important;
    color: #EABD00 !important;
}

    .pill-yellow span {
        background-color: #FFF7D5 !important;
        color: #EABD00 !important;
        margin: 0rem 0.2rem;
    }


.pill-alert-grid {
    border-radius: 0.3rem;
    background: #FBE7E1;
    width: 2rem !important;
    justify-content: center;
    align-items: center;
    height: 1.3rem !important;
    margin: 0.1rem 0rem;
}

.pill-small-container {
    border-radius: 0.3rem;
    justify-content: center;
    padding: 0rem 0.5rem;
    width: max-content;
    height: auto;
}


/*------------------------------------*\
# CARDs MODALES
\*------------------------------------*/

.card-confirmation-icon {
    margin-left: calc(50% - 2.5rem);
}


.card-success-parent {
    background-color: #e5fff5;
    width: 5rem;
    height: 5rem;
    margin-left: calc(50% - 2.5rem);
    border-radius: 100px;
    padding-top: 0.5rem;
    margin-bottom: 2rem;
}


.card-success-wrapper {
    border-radius: 10rem;
    border: 0.25rem solid #00915a; /*meter en una variable: OJO este NO ES el color PRIMARY de BNP. Es el color verde de que algo ha ido bien */
    padding: 0.5rem;
    width: 4rem;
    height: 4rem;
    margin-left: calc(50% - 2em);
}

.card-success-wrapper-nocircle {
    border-radius: 10rem;
    border: 0.25rem solid transparent;
    padding: 0.5rem;
    width: 4rem;
    height: 4rem;
    margin-left: calc(50% - 2em);
}


.card-success-icons {
    width: 40px;
    position: relative;
    border-radius: 100px;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}

.card-unsuccess-parent {
    background-color: #F9D8D6;
    width: 5rem;
    height: 5rem;
    margin-left: calc(50% - 2.5rem);
    border-radius: 100px;
    padding-top: 0.5rem;
    margin-bottom: 2rem;
}


.card-unsuccess-wrapper {
    border-radius: 10rem;
    border: 5px solid #E13E34;
    padding: 0.5rem;
    width: 4rem;
    height: 4rem;
    margin-left: calc(50% - 2em);
}

.card-box-shadow {
    box-shadow: 0 0 1rem 0 #84848433;
}

.card-icons-wrapper {
    border-radius: 10rem;
    border: 0.25rem solid var(--primaryColor); /*meter en una variable: OJO este NO ES el color PRIMARY de BNP. Es el color verde de que algo ha ido bien */
    padding: 0.5rem;
    width: 4rem;
    height: 4rem;
    margin-left: calc(50% - 2em);
}

.card-icons-parent {
    background-color: var(--secondaryColor);
    width: 5rem;
    height: 5rem;
    margin-left: calc(50% - 2.5rem);
    border-radius: 100px;
    padding-top: 0.5rem;
    margin-bottom: 2rem;
}

/*------------------------------------*\
# MENSAJES DE ALERTA Y ERROR
\*------------------------------------*/
.message-alert {
    border-radius: 0.3rem;
    color: #E98868;
    background: #fbe7e1;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1.5rem;
}

.message-error {
    border-radius: 0.3rem;
    color: #e13e34;
    background: #f9d8d6;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1.5rem;
}

/*------------------------------------*\
# WIZARD STEPS
\*------------------------------------*/

.wizard-tab-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
    font-size: 0.85rem;
    color: var(--primaryColor);
    font-family: 'BNPP Square LOCAL';
}

.wizard-tab-active {
    flex: 1;
    border-radius: 0.5rem;
    background-color: var(--primaryColor);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0rem;
    color: #fff; /*meter en una variable*/
    position: relative;
    line-height: 1.1rem;
}



.wizard-tab-nonactive {
    flex: 1;
    border-radius: 0.5rem;
    background-color: var(--secondaryColor);
    border: 0.5px solid var(--primaryColor);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0rem;
    position: relative;
    line-height: 1.1rem;
}

/*---------------------------------------------------------------------------------------------------------------*\
# PAGINAS ESPECIFICAS
/*---------------------------------------------------------------------------------------------------------------*\


/*------------------------------------*\
# CONTENEDORES PAGINAS
\*------------------------------------*/

.page-container {
    background-color: #F9FCFB;
    min-height: 92vh;
}


/*------------------------------------*\
# AREAS DE FILTROS LATERALES
\*------------------------------------*/

.page-leftfilters-container {
    /*border-left:1px solid red;*/
    width: 20rem;
}

.master-leftfilters-upperlogo-container {
    height: 3.6rem;
    visibility: inherit;
}

.master-leftfilters-filtercontainer {
    overflow-y: auto;
    position: relative;
    height: 85vh;
}


/*------------------------------------*\
# AREA DE NO HAY DATOS
\*------------------------------------*/

.panel-nodata-container {
    border-radius: 0.3rem;
    background-color: #eef0ef;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.5rem;
    box-sizing: border-box;
    /* gap: 16px; */
    /* text-align: right; */
    /* font-size: 14px; */
    /* color: #82938c; */
}


/*------------------------------------*\
# MASTER PAGE UX 2025
\*------------------------------------*/

.master-upperlogo-container {
    /*menu estado normal*/
    height: 0rem;
    visibility: hidden;
    /*menu (para test)
    height: 3.5rem;
    visibility: inherit;*/
}

.master-upperlogo-container-mini {
    /*menu estado normal*/
    height: 3.5rem;
    visibility: inherit;
    /*menu (para test)
    height: 0rem;
    visibility: hidden;*/
}


.master-uppermenu-container {
    height: 3.5rem;
    visibility: inherit;
    width: 103%;
}


.master-page-container {
    height: 80vh;
    overflow-y: auto;
}


body {
    font-family: BNPP Square LOCAL;
    margin: 0;
    padding: 0;
    display: flex;
}

.sidebar {
    height: 100vh;
    padding: 0.1rem 1rem;
    /*menu estado normal*/
    inline-size: 5rem;
    /*menu (para test)
    inline-size: 20rem;*/
}

    .sidebar:hover .row {
        /*tiene que tener un poco menos de ancho para que las lineas horizontales de los items del menu no sobrepasen la linea vertical*/
        inline-size: 19rem;
    }

    .sidebar:hover {
        inline-size: 20rem;
    }

        .sidebar:hover .master-upperlogo-container {
            height: 3.5rem;
            visibility: inherit;
        }

        .sidebar:hover .master-upperlogo-container-mini {
            height: 0rem;
            visibility: hidden;
        }

        .sidebar:hover .mizq-text-container {
            height: 2.5rem;
            visibility: inherit;
        }

        .sidebar:hover .mizq-subitems-container {
            visibility: visible;
            height: auto; /* --> necesario para que el menu haga scroll vertical desplegado */
        }

        .sidebar:hover .mizq-lowermenu {
            inline-size: 20rem;
        }

        .sidebar:hover .mizq-lowermenu-izq-text {
            visibility: inherit;
        }




/*------------------------------------*\
# MASTER PAGE SIMPLE UX 2025
\*------------------------------------*/


.mastersimple-right-container {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 92vh;
    width: 200rem;
}


.mastersimple-centered-container {
    display: inline-block;
    text-align: left;
    padding-bottom: 0rem !important;
    padding-top: 0rem !important;
}


.mastersimple-mainform-parent {
    box-shadow: 0px 0px 10px rgba(132, 132, 132, 0.15);
    border-radius: 8px;
    background-color: #fff;
    padding: 1.5rem;
}


.mastersimple-successform-parent {
    background-color: #e5fff5;
    width: 9rem;
    height: 9rem;
    margin-left: calc(50% - 4rem);
    border-radius: 100px;
    padding-top: 1.25rem;
    margin-bottom: 2rem;
}


.mastersimple-successform-icons-wrapper {
    border-radius: 10rem;
    border: 5px solid #00915a; /*meter en una variable: OJO este NO ES el color PRIMARY de BNP. Es el color verde de que algo ha ido bien */
    padding: 1rem;
    width: 6.5rem;
    margin-left: calc(50% - 3.25rem);
}


.mastersimple-successform-icons {
    width: 62px;
    position: relative;
    border-radius: 100px;
    height: 62px;
    overflow: hidden;
    flex-shrink: 0;
}


/*------------------------------------*\
# LOGIN
\*------------------------------------*/
.login-right-container {
    padding-left: 8.5rem;
    padding-right: 9rem;
    padding-top: 9rem;
    padding-bottom: 10rem;
}


.login-isf-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 3rem;
}


.login-form-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.5rem;
}




/*------------------------------------*\
# LOGIN_EDIT_TOTP
\*------------------------------------*/

.loginedittotp-QRimage {
    height: 10rem;
    width: 10rem;
}

.loginedittotp-modal-dialog {
    margin-top: calc(50vh - 10rem);
}



/*------------------------------------*\
# CONCESIONARIO DEALER INFORMATION
\*------------------------------------*/

.your-information-parent {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1rem 5rem;
}

.your-information-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3rem;
}

.your-information-itemcontainer {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.1rem 1rem;
}

.your-information-labelcontainer {
    width: 7rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}


.your-information-datacontainer {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 15rem;
    color: #82938c;
}


/*------------------------------------*\
# PRELOAD MANUAL ADD, PRELOAD MANUAL EDIT
\*------------------------------------*/

.Documentation-Boxed-Right {
    text-align: center;    
    border-bottom: 0.05rem solid #82938c;
    border-right: 0.05rem solid #82938c;
    border-top: 0.05rem solid #82938c;
}

.Documentation-Boxed-Right-Preloads {
    text-align: center;
    border-bottom: 0.05rem solid #82938c;
    border-right: 0.05rem solid #82938c;
    border-top: 0.05rem solid #82938c;
    height: 2.3rem;
}


/*------------------------------------*\
# TEST TEMPORALES
\*------------------------------------*/
.iconoContainerTestInv {
    background-color: black;
}

.iconoTestInv {
    color: #82938C;
    filter: brightness(0) invert(1);
}

.iconoContainerTest {
    background-color: white;
}

.iconoTest {
    fill: red;
}

/*------------------------------------*\
# REQUEST REPORT
\*------------------------------------*/

.report-dual-selection-list {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
}

.report-listbox {
    max-height: 35vh;
    min-height: 18rem;
    overflow-y: auto;
    border: 0px;
}

    .report-listbox tr {
        border-bottom: 1px solid #E6E9E8;
        padding-bottom: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .report-listbox input[type="checkbox"] {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
    }

    .report-listbox tr, .report-listbox tbody {
        display: block;
        width: 100%;
    }

    .report-listbox td {
        display: flex;
    }

.chkSelectAllAvailableContainer, .chkSelectAllSelectedContainer {

    margin-right: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chkSelectAllAvailableContainer input, .chkSelectAllSelectedContainer input {
    width:1.5rem;
    height:1.5rem;
}

.chkSelectAllAvailableContainer label, .chkSelectAllSelectedContainer label {
    font-size: 1.1rem;
}

/*------------------------------------*\
# PAYMENT CALENDAR COMPONENT
\*------------------------------------*/

.payment-calendar-styles {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color: #404A46;
    background: #f9fafb;
}

    .payment-calendar-styles a {
        color: inherit;
        text-decoration: none;
    }

.payment-calendar-pc-grid {
    display: grid;
    gap: .75rem;
    align-items: start;
    grid-template-columns: minmax(34rem,1fr) 24rem 24rem;
    grid-template-areas: "main side today";
}

@media (max-width:1400px) {
    .payment-calendar-pc-grid {
        grid-template-columns: minmax(32rem,1fr) 22rem 22rem;
    }
}

@media (max-width:1120px) {
    .payment-calendar-pc-grid {
        grid-template-columns: minmax(30rem,1fr) 22rem;
        grid-template-areas: "main side" "main today";
    }
}

@media (max-width:980px) {
    .payment-calendar-pc-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "side" "today";
    }
}

.payment-calendar-cal {
    grid-area: main;
    display: grid;
    gap: .75rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.payment-calendar-card {
    background: #fff;
    border: .0625rem solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 .0625rem .125rem rgba(15,24,42,.05);
}

.payment-calendar-pc-side {
    grid-area: side;
    min-width: 0;
    display: grid;
    gap: .75rem;
}

.payment-calendar-pc-today {
    display: grid;
    gap: .75rem;
    max-height: 70vh;
    overflow-y: auto;
}

.payment-calendar-pc-tomorrow {
    display: grid;
    gap: .75rem;
    max-height: 80vh;
    overflow-y: auto;
    margin-top: 1rem;
}

    .payment-calendar-pc-tomorrow .payment-calendar-card + .payment-calendar-card {
        margin-top: 0;
    }

.payment-calendar-cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
}

    .payment-calendar-cal-header .payment-calendar-nav-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 2.25rem !important;
        line-height: 1 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0;
        box-shadow: none !important;
        border-radius: 50%;
        color: #404A46 !important;
        cursor: pointer;
    }

        .payment-calendar-cal-header .payment-calendar-nav-btn:hover {
            background: rgba(0,0,0,.06) !important;
        }

    .payment-calendar-cal-header > :nth-child(2),
    .payment-calendar-cal-header h2,
    .payment-calendar-cal-header .payment-calendar-month {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
        margin-left: 9rem;
        margin-right: 9rem;
    }

.payment-calendar-wk {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
}

.payment-calendar-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: .3rem;
    color: #404A46;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .875rem;
}


.payment-calendar-cal-days {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: .3rem;
}

.payment-calendar-pc-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.25rem;  
    background: #fff;
   
    font-weight: 600;
    position: relative;
}

    .payment-calendar-pc-day .payment-calendar-day-num {
        font-size: 1rem;
    }

    .payment-calendar-pc-day:hover {
        border-color: ;
    }

    .payment-calendar-pc-day.prev-month,
    .payment-calendar-pc-day.next-month {
        color: #a3a3a3;
        background: #fafafa;
    }

.payment-calendar-cal-days .payment-calendar-pc-day:nth-child(7n+6):not(.payment-calendar-is-selected):not(.today),
.payment-calendar-cal-days .payment-calendar-pc-day:nth-child(7n+7):not(.payment-calendar-is-selected):not(.today) {
    background: #FAFAFA;
    color: #82938C;
    border-color: #eef1f4;
}

.payment-calendar-pc-day.payment-calendar-is-out {
    color: #82938C;
}

.payment-calendar-pc-day.today {
    outline: .3125rem solid var(--primaryColor);
    outline-offset: -2px;
}

.payment-calendar-pc-day.payment-calendar-is-selected {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #fff;
    border-radius: 1rem;
}

.payment-calendar-pc-day.payment-calendar-has-events::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .975rem;
    transform: translateX(-50%);
    width: .375rem;
    height: .375rem;
    background: var(--primaryColor);
    border-radius: 9999px;
    opacity: 1;
}

.payment-calendar-pc-day.payment-calendar-is-selected.payment-calendar-has-events::after {
    background: #fff;
}

.payment-calendar-day-card {
    background: var(--primaryColor);
    color: #fff;
    padding: 1rem 1.25rem 1rem;
    border-radius: 1rem;
}

.payment-calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}

.payment-calendar-day-week {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-calendar-day-arrows {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .375rem;
    flex: 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
}

    .payment-calendar-day-arrows .payment-calendar-chev,
    .payment-calendar-day-arrows .payment-calendar-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: auto;
        width: auto;
        padding: 0 .125rem;
        font-size: 3rem !important;
        line-height: 1;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

        .payment-calendar-day-arrows .payment-calendar-chev:hover {
            opacity: .85;
        }

.payment-calendar-day-big {
    font-size: clamp(1.75rem,6vw,3.75rem);
    line-height: 1;
    margin-top: .375rem;
}

.payment-calendar-day-sub {
    margin-top: .125rem;
    opacity: .9;
}

.payment-calendar-side-title {
    margin: 0;
    font-weight: 800;
    opacity: .9;
}

.payment-calendar-side-list {
    padding: 1rem;
}

    .payment-calendar-side-list h4 {
        margin: 0 0 .625rem;
        font-size: .875rem;
        color: #6b7280;
        font-weight: 700;
    }

.payment-calendar-event-item {
    padding: .625rem .75rem;
    border: .0625rem solid #e5e7eb;
    border-left: 3px solid var(--primaryColor); 
    border-radius: .75rem;
    background-color: #E5FFF5;
    margin-bottom: .5rem;
}

.payment-calendar-event-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primaryColor);
}

.payment-calendar-event-sub {
    font-size: .75rem;
    opacity: .8;
    color: var(--primaryColor);
}

.payment-calendar-day-arrows .payment-calendar-chev:hover,
.payment-calendar-cal-header .payment-calendar-nav-btn:hover {
    filter: none;
}


/*------------------------------------*\
# LOGOUT
\*------------------------------------*/
.logout-center-container {
    align-content: center !important;
    align-items: center;
    justify-content: flex-start;
    width: 33%;
    min-width: 300px;
    height: 100%;
}


.logout-isf-logo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 3rem;
    width: 50px;
}