@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap');

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

table input[readonly] {
    opacity: .7;
    background-color: #ced4da;
    cursor: not-allowed;
}

.card-text {
    display: flex;
    flex-direction: row;
}

    .card-text .version {
        margin-left: auto; /* Mueve el elemento de la versión a la derecha */
    }



html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Lato", sans-serif;
    height: 100vh;
    background-color: #E0F2FF !important;
}



label {
    display: block;
}

/* 
    HEADER
*/

header .user col-3 {
    border-left: solid;
    border-left-color: #B1141F;
}

/**

    SIDEBAR INICIO

*/

#sidebar {
    background-image: linear-gradient(90deg, #256696, #256696) !important;
    color: white;
    padding: 50px 0px 0px 0px;
}

    #sidebar button.nav-link {
        color: white;
        text-align: left;
        padding: 0px 0px 0px 22px;
    }

    #sidebar button:hover {
        text-align: left;
        background-color: #258cfb;
    }

    #sidebar ul li a {
        color: white;
        padding-left: 25px;
        text-decoration: none;
    }

    #sidebar ul li ul li:hover {
        background-color: #8bcdff;
        border-radius: 0px;
    }

    #sidebar span a {
        font-weight: bolder;
    }

.btn-primary {
    background-color: #5584ca !important;
}

.btn-success {
    background: #569a7b;
}

    .btn-success:hover, .btn-success:focus {
        background: #179e5f;
    }

.btn-w {
    width: 160px;
}

.pagination-header {
    background-color: #f0f0f0 !important;
    padding: 10px;
    border-radius: 10px;
}

.bg-header {
    background: #d7edfa;
}

.btn-secondary {
    background: #b2b6b9;
}

#sidebar i.bi {
    font-size: 20px !important;
}



.normal-width-sidebar {
    width: 4.3rem;
    min-height: 100vh;
}

.overlay-sidebar {
    width: 15rem;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-weight: bolder;
    color: #256696;
    /*
    font-weight: 500;
    color: var(--bs-heading-color);
    */
}

#labnav label {
    font-weight: lighter !important;
}

.normal-width-sidebar button .menu-text {
    display: none !important;
}






/*
    SIDEBAR FIN 

*/


/*Sección de dieño de lista de despliegue */

ul, #myUL {
    list - style - type: none;
}

#myUL {
    margin: 0;
    padding: 0;
}

.caret {
    cursor: pointer;
    user - select: none;
    font-weight: bold;
    font-size: 14px;
}

    .caret::before {
        content: '\003E'; /* Símbolo de mayor que (>) */
        color: cornflowerblue; /* Cambia el color a azul u otro color de tu elección */
        font-size: 20px; /* Ajusta el tamaño del icono según tus preferencias */
        font-weight: bold; /* Ajusta el grosor del icono según tus preferencias */
        display: inline-block;
        margin-right: 6px;
    }


    .caret - down::before {
        transform: rotate(90deg);
    }

.nested {
    display: none;
}


.active {
    display: block;
}

/* Fin de sección de dieño de lista de despliegue */

.max-width-580 {
    max-width: 580px;
}

.col, [class^="col-"] {
    margin-top: 7px;
    padding-right: 7px;
    padding-left: 7px;
}

.fz-20 {
    font-size: 20px;
}

#content {
    padding-left: 3.5rem;
    padding-right: 0px;
}

input:disabled, button:disabled, span:disabled, a:disabled, select:disabled, li:disabled, .btn:disabled, .form-control:disabled, .form-select:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    pointer-events: inherit !important;
    /*background-color: hsl(210deg 15.79% 92.55%) !important;*/
}

[v-cloak] {
    display: none;
}


table td, table th {
    padding: 2px 10px 2px 10px !important;
    vertical-align: middle !important;
}


#tableFiltros {
    max-height: 300px !important;
    overflow-y: auto;
}


.bg-sidebar {
    background: linear-gradient(90deg, #8eb1cb, #8eb1cb) !important;
    color: #00438c;
}


@media only screen and (max-width: 768px) {
    /* Aqu� puedes agregar tus estilos CSS para dispositivos m�viles */
    .mobile-fs-menu-user {
        font-size: 12px; /* Por ejemplo, cambia el tama�o de fuente para dispositivos m�viles */
    }

    .mobile-fs-submenu-user {
        font-size: 12px; /* Por ejemplo, cambia el tama�o de fuente para dispositivos m�viles */
    }
    /* Agrega m�s estilos seg�n tus necesidades */
    .logo-brand {
        max-height: 50px;
    }

    header nav > a.navbar-brand {
        display: flex;
        align-self: center;
        justify-content: start;
        height: 100%;
    }

    nav h3 {
        font-size: 16px;
        color: #256696;
        font-weight: bolder;
    }

    #sidebar, #content {
        padding-top: 4.1rem !important;
        height: 100%;
    }


    #ulSidebar li ul li {
        padding-left: 10px;
    }
}


.logo-brand {
    width: auto;
    height: 50px
}

.w-max-content {
    width: max-content;
}

.btn-outline-info:hover {
    color: white;
}

.w-max-280 {
    max-width: 280px;
}

.w-max-80 {
    min-width: 80px;
    max-width: 80px;
}

@media (min-width: 1440px) {
    .modal-xxl {
        min-width: 1350px;
    }
}

ul li.page-item > button.page-link.interno {
    width: 9rem !important;
}

ul.pagination {
    overflow-x: auto;
}


.material-icons {
    font-size: inherit; /* Preferred icon size */
}


.vanilla-calendar {
    /* 
    box-shadow: 1px 1px 2px 1px;
    */
    z-index: 10;
    /*width:100%;*/
}
/*
input[readonly] {
    background-color: #f8f9fa;
}

*/

/*REQUISIICONES COMPRA*/
.estatus-danger {
    background-color: #fa9797e1;
}
/*REQUISIICONES COMPRA FIN*/

textarea {
    resize: none;
}

.zIndex-1100 {
    z-index: 1100;
}

.zIndex-1150 {
    z-index: 1150 !important;
}


.table-right th {
    text-align: right;
}

.table-right td {
    text-align: right;
}

.btn-close {
    background-color: white;
}


/**

    AUTOCOMPLETE STYLE

*/

/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    max-height: 350px !important;
    overflow-y: auto;
    /* 
    box-shadow: 1px 1px 1px 0px;
    */
}

    .autocomplete-items div {
        padding: 0px 5px 0px 5px;
        cursor: pointer;
        background-color: #f8f9fa;
        border-bottom: 1px solid #d4d4d4;
    }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}


/**

    END AUTOCOMPLETE STYLE

*/





/**
    ESTILOS LOADER DE PROCESOS
*/
.fondoCargando {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1999 !important;
    display: none;
}

.textoCargando {
    position: fixed;
    top: 46%;
    left: 15px;
    right: 0px;
    text-align: center;
    z-index: 2001 !important;
    color: #f3f3f3;
}

.loader {
    position: absolute;
    top: 43%;
    z-index: 2000 !important;
    left: 0px;
    right: 0px;
    margin: auto !important;
}

/*FIN LOADER */




.focus-element {
    border-bottom: 2px solid #0dcaf0;
}

/*.card-body {
    color: #041664;
}*/

.h-fit {
    height: fit-content;
}

#pConfirmacion {
    text-align: justify;
}

.hover-precio-unitario td:hover {
    background-color: whitesmoke !important;
    color: black !important;
}


.hover-precio-unitario th {
    text-wrap: nowrap;
    display: table-cell;
}

.no-wrap {
    text-wrap: nowrap;
    display: table-cell;
    vertical-align: central;
}



@media (min-width: 576px) {
    .modal-xl {
        min-width: 100%;
    }
}

@media (min-width: 992px) {
    .modal-xl {
        min-width: 90%;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg); /* Start with no rotation */
    }

    100% {
        transform: rotate(360deg); /* Rotate 360 degrees (one full circle) */
    }
}

/* Apply the animation to your element */
.element-to-rotate {
    animation: rotate 1s linear infinite; /* 5s = animation duration, linear = easing, infinite = loop */
}


.w-60 {
    min-width: 90px;
    max-width: 100%;
}

td.bg-subpartidas {
    background-color: #0000000a;
}


.p-l-1 {
    padding-left: 10px !important;
}

.p-l-2 {
    padding-left: 35px !important;
}

.p-l-3 {
    padding-left: 70px !important;
}

.p-l-4 {
    padding-left: 95px !important;
}

.p-l-5 {
    padding-left: 120px !important;
}



/*
    SEARCH BARS & TABLAS DE ELEMENTOS

*/

/*
    Search bar 
*/

label.input-group-text {
    background-color: #8eb1cb;
    color: white;
    font-weight: 600;
    border: solid;
    border-radius: 40px 0px 0px 40px;
    border-color: #8eb1cb;
}

button.input-group-text {
    background-color: #e60717;
    color: white;
    border: solid;
    border-color: #e60717;
    border-radius: 0px 40px 40px 0px !important;
}

    button.input-group-text:hover {
        background-color: #bd111d;
        color: white;
        border: solid;
        border-color: #bd111d;
        border-radius: 0px 40px 40px 0px !important;
    }




/* 
    Botón +Agregar 
*/

button.input-group-agregar {
    background-color: #AFD139;
    color: white;
    border: solid;
    border-color: #AFD139;
    border-radius: 0px 40px 40px 0px !important;
}

    button.input-group-agregar:hover {
        background-color: #7bb81f;
        color: white;
        border: solid;
        border-color: #7bb81f;
        border-radius: 0px 40px 40px 0px !important;
    }


/*
    TABLA RESULTADOS
*/

div.card-header {
    background-color: rgb(142, 177, 203);
    border: solid rgb(142, 177, 203);
    /* border-radius: 10px 10px 0px 0px; */
}

/* 
    TABLA ELEMENTOS
*/

table {
    border-radius: 20px !important;
}

label.h5 {
    color: white;
}

thead {
    border-radius: 40px 40px 0px 0px;
}

    thead th {
        background-color: rgb(37, 102, 150) !important;
        color: white !important;
        text-align: center !important;
    }

.table tbody tr, .table thead th {
    text-align: center;
}

button.btn.btn-sm.btn-primary.text-white.mt-1 {
    background-color: #e60717 !important;
    border: 0px !important;
}

    button.btn.btn-sm.btn-primary.text-white.mt-1:hover {
        background-color: #bd111d !important;
        border: 0px !important;
    }

/* 
    MODAL MATERIALES 
*/

div.card.card-body {
    background-color: white !important;
}

#titulo {
    color: #256696;
}

/*
    Submenú secciones de modal

*/

.card.card-body label.h5 {
    color: #256696;
}

.pagination-header {
    background-color: #e0f2ff !important;
    border-radius: 10px;
    color: #256696 !important;
}

button.page-link.interno {
    color: #084069;
}

button.active.page-link.interno {
    background-color: #8eb1cb !important;
    border: 0px;
    color: white;
    font-weight: bolder;
    border-radius: 10px 10px 0px 0px;
}

label {
    font-weight: bold;
    color: #256696;
    font-size: small;
}

button.btn.btn-success.btn-w {
    background-color: #e4771a;
    border: 0px;
    justify-content: center;
}

    button.btn.btn-success.btn-w:hover {
        background-color: #e3b017;
        border: 0px;
    }

button.btn.btn-comprar.btn-w {
    background-color: #afd139;
    border: 0px;
    justify-content: center;
    color: white;
}

    button.btn.btn-comprar.btn-w:hover {
        background-color: #7bb81f;
        border: 0px;
    }

button.btn.btn-generar.btn-w {
    background-color: #afd139;
    border: 0px;
    justify-content: center;
    color: white;
    width: 13rem;
}

    button.btn.btn-generar.btn-w:hover {
        background-color: #7bb81f;
        border: 0px;
    }


button.btn.btn-autorizar.btn-w {
    background-color: #afd139;
    border: 0px;
    justify-content: center;
    color: white;
    width: 15rem;
}

    button.btn.btn-autorizar.btn-w:hover {
        background-color: #7bb81f;
        border: 0px;
    }

button.btn.btn-autorizarCompra.btn-w {
    background-color: #e4771a;
    border: 0px;
    justify-content: center;
    color: white;
    width: 16rem;
}

    button.btn.btn-autorizarCompra.btn-w:hover {
        background-color: #e3b017;
        border: 0px;
    }
/*
    modales secundarios
*/

/* 
    Título Header modal
*/
modal-header bg-sidebar {
    color: black !important;
}

.modal-title {
    color: white;
}

/*
    Botón agregar + agregar secundarios, guardar y cerrar
*/

.btn.btn-outline-success {
    background-color: #afd139 !important;
    border: solid;
    border: #afd139 !important;
    border-radius: 20px !important;
    color: white !important;
    font-size: small;
    color: white !important;
}

    .btn.btn-outline-success:hover {
        background-color: #7bb81f !important;
    }

.btn.btn-secondary {
    background-color: #57B7FF !important;
    color: white;
    border: none;
}

    .btn.btn-secondary:hover {
        background-color: #7ac6ff !important;
    }

/*
    Botón buscar y botón descargar (modal 2 y 3)
*/

.btn.btn-sm.btn-info {
    background-color: #e60717;
    border: none;
}

    .btn.btn-sm.btn-info:hover {
        background-color: #bd111d;
        border: none;
    }

.btn.btn-sm.btn-success {
    background-color: #198754 !important;
    border: none;
}

    .btn.btn-sm.btn-success:hover {
        background-color: #0e633c !important;
        border: none;
    }

.page-link {
    background-color: #e0f2ff !important;
}

.modal-footer {
    justify-content: center;
}

/* 
    SECCIÓN EMPLEADOS: MODAL
*/

/*
    Botón Borrar 
*/

button.eraser.input-group-text.bg-sidebar {
    border: none !important;
}

<<<<<<< .mine


tr th:first-child {
    border-radius: 10px 0px 0px;
}

tr th:last-child {
    border-radius: 0px 10px 0px 0px;
}


/* 
    TABLE WITHOUT BORDERS
*/

.table th {
    border-top: none;
    border-bottom: none;
}

.table-bordered > :not(caption) > * {
    border: none;
}

.table tr td {
    border: none !important;
}

/* 
    end TABLE WITHOUT BORDERS
*/

/*
    BACKGROUND COLORS COTIZACION-PRECIO UNITARIO

*/
.bg-light-green {
    background-color: #E6FFCD !important;
}

.bg-medium-green {
    background-color: #c8f59f !important;
}

.bg-dark-blue {
    background-color: rgb(37, 102, 150) !important;
    color: white !important;
}






.bg-custom-btn-green {
    background-color: #afd139 !important;
    color: white !important;
}


.bg-custom-btn-red {
    background-color: rgb(230, 7, 23) !important;
    color: white !important;
}


.bg-custom-btn-blue {
    background-color: #57B7FF !important;
    color: white !important;
}

    .bg-custom-btn-blue:hover {
        background-color: #459ad9 !important;
        color: white !important;
    }

.btn-radious-custom {
    border-radius: 30px !important;
}


.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #ecfbff;
    border: none;
}

.table-bordered > tbody > tr:nth-of-type(even) > * {
    border: none;
}

/* CAMBIOS ~*/
#labnav label {
    font-weight: lighter !important;
}

/* BOTON AGREGAR SEARCH BAR */

.btn.btn-outline-dark.ms-1.py-1.nowrap.rounded {
    font-weight: bold;
    background-color: #afd139 !important;
    border: solid;
    border: #afd139 !important;
    border-radius: 20px !important;
    color: white !important;
    font-size: small;
    color: white !important;
}

    .btn.btn-outline-dark.ms-1.py-1.nowrap.rounded:hover {
        background-color: #7bb81f !important;
    }

tr th:first-child {
    border-radius: 10px 0px 0px 0px;
}

tr th:last-child {
    border-radius: 0px 10px 0px 0px;
}

/* 
    TABLE WITHOUT BORDERS
*/

.table th {
    border-top: none;
    border-bottom: none;
}

.table-bordered > :not(caption) > * {
    border: none;
}

.table tr td {
    border: none !important;
}

.table > tbody {
    border: none !important;
}

tbody td {
    border: none !important;
}


/* FIN */

button.btn.btn-sm.text-white.ms-1 {
    background-color: #F88A18;
}

    button.btn.btn-sm.text-white.ms-1:hover {
        background-color: #e07d16;
    }


.bg-light-green.text-end.text-dark {
    background-color: transparent !important;
}

th.bg-light-green.text-center.text-dark {
    background-color: transparent !important;
}



/* 
    SECCIÓN: MOVIMIENTOS - Conciliación 

*/

/* Header - Conciliación */

@media only screen and (max-width: 768px) {
    .concheader {
        margin-top: 20px !important;
    }

    #sidebar {
        margin-top: 44px !important;
    }
}

.concheader {
    background-color: ghostwhite;
    border-radius: 10px;
}

.bcon.input-group-text {
    border-radius: 20px !important;
    margin: 10px;
}

    .bcon.input-group-text:hover {
        background-color: #bd111d !important;
        color: white;
        border-radius: 20px !important;
        border-color: #bd111d !important;
    }

#divAMostrar1 .card-body {
    background-color: ghostwhite;
    border-radius: 20px;
    padding: 15px;
}




/*
    sidebar mobile
*/
#sidebar {
    padding-top: 10px;
}




/*
    PRECIOS UNITARIOS
*/

.hover-menu li:hover {
    background-color: whitesmoke;
}

.hover-menu li {
    cursor: pointer;
}

.custom-menu {
    display: none;
    z-index: 1100;
    box-shadow: 2px 1px 4px 1px
}

.pointer-info:hover {
    cursor: help;
}

.click-on:hover {
    cursor: pointer;
}

li:disabled {
    opacity: .5;
}

.row-active {
    background-color: #052c65 !important;
    color: white !important;
    font-weight: bolder !important;
}

.not-action {
    user-select: none !important;
}

.hover-precio-unitario input[readonly] {
    opacity: .5 !important;
    /*cursor: not-allowed !important;*/
    pointer-events: inherit !important;
    background-color: hsl(210deg 15.79% 92.55%) !important;
}

.page-link.active {
    color: white !important;
    background-color: #0a58ca !important;
}


.text-justify {
    text-align: justify !important;
}

.fs-13 {
    font-size: 13px;
}



.material-symbols-outlined {
    color: white;
}

.btn.btn-outline-light {
    background-color: #57b7ff;
}

    .btn.btn-outline-light:hover {
        background-color: #258cfb;
    }

.btn.gantt.btn-outline-light {
    background-color: #57b7ff;
    color: white;
}

    .btn.gantt.btn-outline-light:hover {
        background-color: #258cfb;
    }

.btn.partidas.btn-outline-light {
    background-color: #198754;
}

    .btn.partidas.btn-outline-light:hover {
        background-color: #1ac777;
    }

.bi.bi-currency-dollar.fs-4 {
    color: white;
}

.btn.excepciones.btn-outline-light {
    background-color: #e4771a;
}

    .btn.excepciones.btn-outline-light:hover {
        background-color: #e3b017;
    }


.btn-outline-light.download {
    background-color: #afd139;
}

    .btn-outline-light.download:hover {
        background-color: #7bb81f;
    }

.bi.bi-download {
    color: white;
}

.btn.dpdf.btn-outline-dark {
    background-color: #afd139;
    border: none;
    color: white;
}

    .btn.dpdf.btn-outline-dark:hover {
        background-color: #7bb81f;
    }

.bi.bi-filetype-pdf {
    color: white;
}

.btn.dxl.btn-outline-dark {
    background-color: #57b7ff;
    border: none;
    color: white;
}

    .btn.dxl.btn-outline-dark:hover {
        background-color: #258cfb
    }



.btn:focus {
    outline: none; /* Remove the default focus outline */
    /* Add your custom styles here */
    border: 2px solid blue; /* Example: Add a blue border */
    box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Example: Add a shadow */
}

::placeholder {
    /* Apply styles to the placeholder */
    color: rgba(0,0,0, .5) !important; /* Example: Light gray color */
    font-style: italic; /* Example: Italic font */
}

.color-new-partida {
    color: #afd139;
}


input.custom-range {
    -webkit-appearance: none;
    appearance: none;
    height: 3px; /* Ajusta la altura según tu preferencia */
    width: 100%; /* Ajusta el ancho según tu preferencia */
    background-color: #ddd; /* Color de fondo */
    border-radius: 5px; /* Borde redondeado */
    outline: none; /* Elimina el contorno */
}

input.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; /* Ancho del controlador */
    height: 12px; /* Altura del controlador */
    background-color: #666; /* Color del controlador */
    border-radius: 0%; /* Forma circular */
    cursor: pointer; /* Cambia el cursor al puntero */
}

input.custom-range::-moz-range-thumb,
input.custom-range::-ms-thumb {
    appearance: none;
    width: 12px; /* Ancho del controlador */
    height: 12px; /* Altura del controlador */
    background-color: #666; /* Color del controlador */
    border-radius: 0%; /* Forma circular */
    cursor: pointer; /* Cambia el cursor al puntero */
}

.color-caret {
    color: rgb(37, 102, 150) !important;
}