.pagination{
    float: none !important;
}
.tree-anchor {
    width: 97%;
}

.catalog-name {
    max-width: -webkit-fill-available;
    color: #5b9bd1 !important;
    cursor: pointer;
    padding-left: 10px;
/*     white-space: nowrap; */
    flex-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: normal !important;
    font-size: 15px;
    align-self: left;
    max-width: 50vw;
    text-align: left;
}

.catalog-ref {
    color: #D8D8D8 !important;
    padding-left: 10px;
    font-weight: bolder;
    font-size: 11px;
}

.product-price {
    padding-top: 10px;
    font-weight: normal !important;
    font-size: 18px;
    color: #333 !important;
    margin-bottom: 5px;
    color: #333;
}

#newItem {
    list-style: none !important;
    width: 100%;
    display: block;
    padding-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#newItem>li {
    padding: 5px;
    width: 100%;
    display: flex;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    flex-direction: row;
    background-color: white;
    margin: 5px 0px;
    margin-bottom: 0px;
}

#newItem>li.new {
    border: 2px dashed #5b9bd1;
    cursor: pointer;
    display: flex !important;
    align-items: center;
}

#indexElements {
    list-style: none !important;
    width: 100%;
    display: block;
    padding-left: 0px;
}

#indexElements>li {
    padding: 5px;
    width: 100%;
    display: flex !important;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    flex-direction: row;
    background-color: white;
    margin: 5px 0px;
}

#indexElements>li:hover {
    -webkit-box-shadow: 2px 2px 3px -1px rgba(112, 128, 144, 1);
    -moz-box-shadow: 2px 2px 3px -1px rgba(112, 128, 144, 1);
    box-shadow: 2px 2px 3px -1px rgba(112, 128, 144, 1);
}

#indexElements>li img {
    width: 64px;
    height: 64px;
    min-width: 64px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.div-icon {
    flex-direction: row;
    flex-grow: 1;
}

.div-icon {
    flex-direction: row;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.div-icon>i {
    top: 0px !important;
    width: 40px;
    height: 40px;
    justify-content: center;
    cursor: pointer;
    line-height: 30px;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.3em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.div-icon>a>.fa-link {
    color: white !important;
    background-color: #f5a26f !important;
    border: 1px solid #f5a26f !important;
}

.div-icon>a>.fa-link:hover {
    color: white !important;
    background-color: #f5a26f !important;
    border: 1px solid #f5a26f !important;
    text-decoration: none !important;
}

.fa-files-o {
    color: #5b9bd1 !important;
    background-color: white !important;
    border: 1px solid #5b9bd1 !important;
}

.fa-files-o:hover {
    background-color: #5b9bd1 !important;
    color: white !important;
    border: 1px solid #5b9bd1 !important;
}

/* .table-responsive .fa-eye, #indexElementsGrid .fa-eye {
    color: #7cd15b !important;
    background-color: white !important;
    border: 1px solid #7cd15b !important;
}

.table-responsive .fa-eye.active, #indexElementsGrid .fa-eye.active {
    color: white !important;
    border: 0px solid !important;
    background-color: #7cd15b !important;
}

.table-responsive .fa-eye:hover, #indexElementsGrid .fa-eye:hover {
    color: #7cd15b !important;
    border: 1px solid #7cd15b !important;
    background-color: white !important;
} */

.icon.fa-tag {
    color: orchid !important;
    background-color: white !important;
    border: 1px solid orchid !important;
}

.icon.fa-tag.active {
    color: white !important;
    border: 0px solid !important;
    background-color: orchid !important;
}

.icon.fa-tag:hover {
    color: white !important;
    border: 1px solid orchid !important;
    background-color: rgb(156, 39, 176) !important;
}

#iconsearch>div>i.fa-link {
    color: #5b9bd1;
    background-color: white;
    border: 1px solid #5b9bd1;
}

#iconsearch>div>i.fa-link:hover {
    color: white !important;
    border: 0px solid !important;
    background-color: #5b9bd1 !important;
}

#iconsearch>div>i.fa-link.active {
    color: white !important;
    border: 0px solid !important;
    background-color: #5b9bd1 !important;
}

/* #iconsearch>div>i.fa-piggy-bank {
    color: #ddaecc;
    background-color: white;
    border: 1px solid #ddaecc;
}

#iconsearch>div>i.fa-piggy-bank:hover {
    color: white !important;
    border: 0px solid !important;
    background-color: #ddaecc !important;
}

#iconsearch>div>i.fa-piggy-bank.active {
    color: white !important;
    border: 0px solid !important;
    background-color: #ddaecc !important;
} */

#index .fa-th {
    color: #5b9bd1 !important;
    background-color: white !important;
    border: 1px solid #5b9bd1 !important;
}

#index .fa-th:hover {
    color: white !important;
    background-color: #5b9bd1 !important;
    border: 1px solid #5b9bd1 !important;
}

#index .fa-list {
    color: #5b9bd1;
    background-color: white;
    border: 1px solid #5b9bd1;
}

#index .fa-list:hover {
    color: white !important;
    background-color: #5b9bd1 !important;
    border: 1px solid #5b9bd1 !important;
}

/* #index .fa-briefcase {
    color: #d1865b;
    border: 1px solid #d1865b;
    background-color: white;
}

#index .fa-briefcase.active {
    color: white !important;
    border: 0px solid !important;
    background-color: #d1865b !important;
}

#index .fa-briefcase:hover {
    color: white !important;
    border: 1px solid #d1865b !important;
    background-color: #d1865b !important;
} */

#itemsContenidor .table-responsive .fa-pencil-alt, #indexElementsGrid .fa-pencil-alt {
    color: #d15b7c !important;
    border: 1px solid #d15b7c !important;
    background-color: white !important;
}

#itemsContenidor .table-responsive  .fa-pencil-alt:hover, #indexElementsGrid .fa-pencil-alt:hover {
    background-color: #d15b7c !important;
    color: white !important;
    border: 1px solid #d15b7c !important;
}

#index .fa-trash-alt {
    color: #e35b5a !important;
    border: 1px solid #e35b5a !important;
    background-color: white !important;
}

#index .fa-trash-alt:hover {
    background-color: #e35b5a !important;
    color: white !important;
    border: 1px solid #e35b5a !important;
}

.new:hover {
    border: 2px dashed #427591 !important;
}

.new:hover .add-button-text {
    color: #427591 !important;
}

.new:hover {
    text-decoration: none !important;
}

.add-button {
    height: 64px;
    width: 64px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #5b9bd1 !important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.add-button>span>i {
    color: white;
}

.add-button-text {
    color: #5b9bd1;
    line-height: 50px;
    font-size: 24px;
    font-weight: 400;
    margin: auto;
}

.add-button:hover {
    background-color: #427591 !important;
    text-decoration: none !important;
}

.new:hover .add-button {
    background-color: #427591 !important;
    text-decoration: none !important;
}

.add-button:hover>span {
    border: 4px solid #427591;
    background-color: white;
    text-decoration: none !important;
}

.new:hover .add-button>span {
    border: 4px solid #427591;
    background-color: white;
    text-decoration: none !important;
}

.add-button:hover>span>i {
    color: #427591;
    text-decoration: none !important;
}

.new:hover .add-button>span>i {
    color: #427591;
    text-decoration: none !important;
}

.add-button>span {
    transition: all .2s ease-in-out;
    border: 4px solid white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree-anchor:hover {
    background-color: aliceblue !important;
    color: white;
}

.col3 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-style: solid;
    border-width: 0.5px;
    border-color: #f5f5f5;
}

.col3:hover {
    border-color: #D3D3D3;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -ms-border-radius-topleft: 10px;
    -ms-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.col2 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-style: solid;
    border-width: 0.5px;
    border-color: #f5f5f5;
}

.radius {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -ms-border-radius-topleft: 10px;
    -ms-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.radius2 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgba(245, 245, 245, 0.2) !important;
    /* RGBa with 0.6 opacity */
    background-color: rgba(245, 245, 245, 0.5);
    /* For IE 5.5 - 7*/
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

#indexElementsGrid>li {
    display: inline-grid !important;
}

/* #catalog-edit-modal label {
    font-weight: 600;
    color: #283e4a;
} */

.trumbowyg-box,
.trumbowyg-editor {
    min-height: 200px;
}

.trumbowyg-editor,
.trumbowyg-textarea {
    min-height: 200px;
}

.trumbowyg-button-pane {
    backface-visibility: visible;
}

#indexElementsGrid>li.item>section:hover {}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

.upload-btn-wrapper .btn {
    /* border: 2px solid gray; */
    color: white;
    background-color: #5b9bd1;
    /*padding: 8px 20px;*/
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    height: 100%;
    width: 100%;
}

#dragandrophandler {
    padding: 10px;
    border: 1px dashed #5b9bd1;
    text-align: center;
}

#dragandrophandler .fa-times {
    color: #e35b5a;
    cursor: pointer;
    font-size: 21px;
    padding: 10px;
    margin-left: auto;
}

#dragandrophandler .fa-times {
    font-size: 16px !important;
}

#dragandrophandler {
    padding: 10px;
    border: 1px dashed #5b9bd1;
    text-align: center;
}

.click-document {
    color: #5b9bd1;
}

.click-document:hover {
    cursor: pointer;
    color: #5b9bd1;
    transform: scale(1.1);
}

.noBorder {
    border: 0px solid !important;
    border-top: 0px solid !important;
}

#contratos {
    background-color: white;
}

#contratos li span {
    padding: 10px;
}

#contratos {
    padding-left: 0px;
    list-style: none;
    /*visibility: hidden;*/
    margin: 0;
    padding: 0;
}

#contratos li.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 50px;
}

#contratos li {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 50px;
    border-bottom: 1px solid lightgray;
}

#contratos li:first-child {
    border-bottom: 3px solid #5b9bd1 !important;
}

#contratos .fa-sort {
    cursor: pointer;
}

.note-toolbar-wrapper {
    margin-top: 0px !important;
}

#usualContacts li.item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
}

#usualContacts li.item:hover {
    transform: scale(1.05);
    background-color: #759ab8;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    color: white;
    cursor: pointer;
}

#usualContacts li .seleccionado {
    background-color: #759ab8;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    color: white;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 4px 6px rgba(0, 0, 0, .2);
    width: 100%;
    padding: 10px;
}

#linkedProviders input[type="checkbox"] {
    -ms-transform: scale(2);
    /* IE */
    -moz-transform: scale(2);
    /* FF */
    -webkit-transform: scale(2);
    /* Safari and Chrome */
    -o-transform: scale(2);
    /* Opera */
    padding: 10px;
}

ul#vinculateBody p {
    margin-bottom: 0px;
}

#indexElementsGrid .div-icon i {
    height: 30px;
    width: 30px;
    font-size: 16px;
}

.fa-arrow-circle-up,
.fa-arrow-circle-down {
    color: #5b9bd1;
    cursor: pointer;
    font-size: 21px !important;
}

.auction-icon .fa-square {
    color: #5b9bd1 !important;
    font-size: 28px !important;
    margin-right: 15px;
}

.auction-icon .fa-check-square {
    color: #5b9bd1 !important;
    font-size: 28px !important;
    margin-right: 15px;
}

#iconsearch {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

@media screen and (max-width: 1100px) {
    #indexMenu>li {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #indexMenu>li>div {
        align-self: flex-start;
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    .category-filter {
        width: 100% !important;
        margin-right: 0px !important;
    }

    .negotiation-filter {
        width: 100% !important;
    }

    #indexMenu>li {
        display: flex;
        flex-direction: column;
    }

    .bdn-search {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    #cem_image {
        display: block !important;
    }

    #cem_image img {
        margin: auto;
    }

    #cem_image>section {
        margin-right: 0px !important;
    }

    #indexElementsGrid {
        padding-left: 0px !important;
    }
}

@media screen and (max-width: 768px) {
    .custom-collapse .collapse {
        display: block;
    }
}

@media screen and (max-width: 650px) {
    .icon-hide {
        display: none !important;
    }
}

div.add-button>span>i.fa-link:hover {
    text-decoration: none !important;
}

.div-icon>a>.fa-link.active {
    background-color: white !important;
    color: #f5a26f !important;
}

.price {
    font-size: 18px;
    color: #333 !important;
}

.state {
    display: block !important;
}

.modal-backdrop {
    z-index: 1 !important;
}

.contact-list-item:not(.active):hover {
    background-color: aliceblue !important;
    color: #333;
}


.homologation_value {
    cursor: pointer;
    margin-left: 5px;
    font-size: 12px;
    border-radius: 10px !important;
    color: white;
    border: 1px solid #e5e5e5 !important;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.homologation_value_mini {
    margin-left: auto !important;
    margin-right: 2px;
    font-size: 16px;
    border-radius: 15px !important;
    color: white;
    border: 1px solid #e5e5e5 !important;
    line-height: 40px;
    width: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media (max-width: 425px) {
    .mblHide {
        display: none !important;
    }

    .homologation_value {
        font-size: 17px;
        line-height: 40px;
        width: 50px;
    }

    .homologation_value_mini {
        font-size: 13px;
        line-height: 30px;
        width: 45px;
    }
}
/* .folder-explorer {
    display: flex;
    flex-direction: column; 
}
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 15px; 
    margin-top: 10px; 
} */

.grid-container {
    display: flex; /* Cambia a flexbox */
}
.sidebar {
 /*    width: 250px; */
 width: 30vw;
    max-height: 100%;
    overflow: scroll;
    margin-top: 15px;
}

.folder, .item {
   /*  background-color: #fff; */ /* Fondo blanco para carpetas y archivos */
    /* border: 1px solid #ccc; */ /* Borde sutil */
    /* border-radius: 5px;  *//* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centrar el texto */
    transition: background-color 0.2s; /* Efecto de transición */
}
.folder:hover, .item:hover {
    background-color: #f0f0f0; /* Color de fondo al pasar el mouse */
    cursor: pointer; /* Cambia el cursor al pasar sobre la carpeta o archivo */
}
.child-folder-name, .child-catalog-name {
    display: block; /* Asegura que el nombre ocupe toda la línea */
    margin-top: 5px; /* Espaciado superior para el texto */
}

.item {
    display: flex;
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto */
    height: 325px;
}

.item .item-footer span{
    max-width: 230px;
}

.item-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido (imagen o ícono) */
}
.catalog-image {
    height: 64px; /* Altura de la imagen */
    width: 64px; /* Ancho de la imagen */
    margin-bottom: 5px; /* Espaciado inferior */
}
.icon-file {
    color: #5b9bd1; /* Color del ícono */
    font-size: 50px; /* Tamaño del ícono */
    margin-bottom: 5px; /* Espaciado inferior */
}
.child-catalog-name {
    white-space: nowrap;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 auto;
      margin-bottom: 0px;
    width: 160px;
    margin-bottom: 10px;
}

.child-catalog-price{
    font-size: 16px; /* Tamaño de la fuente */
    color: #333; /* Color del texto */
    margin-top: 5px; /* Espaciado superior para el precio */
}

/* Estilo para el contenedor de los breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #ffffff; /* Fondo blanco para un aspecto limpio */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 15px; /* Espacio inferior para separar de otros elementos */
}
/* Estilo para cada elemento del breadcrumb */
.breadcrumb-item {
    display: flex;
    align-items: center;
}
/* Estilo para los enlaces */
.breadcrumb-link {
    text-decoration: none;
    color: #5b9bd1; /* Color del enlace */
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative; /* Para el efecto de subrayado */
    padding: 5px;
    padding-bottom: 0px!important;
    padding-top: 0px !important;
}
.breadcrumb-link.drag-over{
    background-color: aliceblue !important;
}
/* Efecto de hover en el enlace */
.breadcrumb-link:hover {
    color: #5b9bd1; /* Color más oscuro al pasar el mouse */
}
/* Subrayado animado */
.breadcrumb-link::after {
    content: '';
    display: block;
    height: 2px;
    background-color: #5b9bd1; /* Color del subrayado */
    width: 0;
    transition: width 0.3s ease; /* Transición suave */
    position: absolute;
    left: 0;
    bottom: -5px; /* Ajusta la posición del subrayado */
}
.breadcrumb-link:hover::after {
    width: 100%; /* Expande el subrayado al pasar el mouse */
}
/* Estilo para el separador */
.breadcrumb-separator {
    margin: 0 8px;
    color: #ccc; /* Color del separador */
    font-size: 16px;
}

.item.selected, .folder.selected {
    background-color: #cce5ff; 
    border: 2px solid #5b9bd1; 
}

.drag-over {
    border: 2px dashed #FDBA00; /* Amarillo oscuro */
    background-color: rgba(253, 186, 0, 0.2); /* Fondo amarillo claro con transparencia */
}

/* Estilo para el árbol de carpetas */
/* .folder-tree ul {
    list-style: none;
    padding-left: 20px;
}

.folder-tree li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.folder-tree i {
    margin-right: 8px;
} */


.folder-explorer .item, .folder-explorer .folder {
    background-color: white;
    display: flex;
  flex-direction: column;
/*   align-items: center; */
  text-align: center;
  display: inline-grid !important;
  max-width: 250px;
  min-width: 250px;
  width: 250px;
  margin: 10px;
/*     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
     */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 15px;
}

.folder-explorer .item img, .folder-explorer .folder img{
    cursor: pointer;
  height: 260px;
  width: 250px;
border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#button-container{
    gap: 10px;
}

#button-container .btn{
    border-radius:10px;
}

#button-container.div-icon .btn{
    height: 40px;
    width: 40px;
}

#button-container .btn-copiar{
    border-color: #5b9bd1;
}
#button-container .btn-copiar i{
    color: #5b9bd1;
}
#button-container .btn-copiar:hover{
    background-color: #5b9bd1!important;
    color: white!important;
    border-color: #5b9bd1!important;
}

#button-container .btn-copiar:hover i{
    color: white!important;
}

#button-container .btn-editar{
    border-color: #d15b7c;
}
#button-container .btn-editar i{
    color: #d15b7c;
}
#button-container .btn-editar:hover{
    background-color: #d15b7c!important;
    color: white!important;
    border-color: #d15b7c!important;

}
#button-container .btn-editar:hover i{
    color: white!important;

}

#button-container .btn-eye-style{
    border-color: #93be71;
}
#button-container .btn-eye-style i{
    color: #93be71;
}
#button-container .btn-eye-style:hover{
    background-color: #93be71!important;
    color: white!important;
    border-color: #93be71!important;
}
#button-container .btn-eye-style:hover i{
    color: white!important;
}

#button-container .btn-briefcase-style{
    border-color: sienna;
}
#button-container .btn-briefcase-style i{
    color: sienna;
}
#button-container .btn-briefcase-style:hover{
    background-color: sienna!important;
    color: white!important;
    border-color: sienna!important;
}
#button-container .btn-briefcase-style:hover i{
    color: white!important;
}

#button-container .btn-folder {
    border-color: rgb(253, 185, 0);
}
#button-container .btn-folder i {
    color: rgb(253, 185, 0);
}
#button-container .btn-folder:hover {
    background-color: rgb(253, 185, 0) !important;
    color: white !important;
    border-color: rgb(253, 185, 0) !important;
}
#button-container .btn-folder:hover i {
    color: white !important;
}

#button-container .btn-tag-style{
    border-color: orchid;
}
#button-container .btn-tag-style i{
    color: orchid;
}
#button-container .btn-tag-style:hover{
    background-color: orchid!important;
    color: white!important;
    border-color: orchid!important;
}
#button-container .btn-tag-style:hover i{
    color: white!important;
}

#button-container .btn-pink-style{
    border-color: #ddaecc;
}
#button-container .btn-pink-style i{
    color: #ddaecc;
}
#button-container .btn-pink-style:hover{
    background-color: #ddaecc!important;
    color: white!important;
    border-color: #ddaecc!important;
}
#button-container .btn-pink-style:hover i{
    color: white!important;
}


#button-container .btn-tag-style:hover i{
    color: white!important;

}
#button-container .btn-sienna-style{
    border-color: sienna;
}
#button-container .btn-sienna-style i{
    color: sienna;
}
#button-container .btn-sienna-style:hover{
    background-color: sienna!important;
    color: white!important;
    border-color: sienna!important;

}
#button-container .btn-sienna-style:hover i{
    color: white!important;

}

#button-container .btn-carpeta{
    border-color: #dbb233;
}
#button-container .btn-carpeta i{
    color: #dbb233;
}
#button-container .btn-carpeta:hover{
    background-color: #dbb233!important;
    color: white!important;
    border-color: #dbb233!important;

}
#button-container .btn-carpeta:hover i{
    color: white!important;

}

#button-container .btn-eliminar{
    border-color: #f13e46;
}
#button-container .btn-eliminar i{
    color: #f13e46;
}
#button-container .btn-eliminar:hover{
    background-color: #f13e46!important;
    color: white!important;
    border-color: #f13e46!important;

}
#button-container .btn-eliminar:hover i{
    color: white!important;

}



/*ESTILO COMO CONTRATOS*/

#contracts_list td.notset{
    border-right: 5px solid #c6c6c6!important;
}

#contracts_list td.expired{
    border-right: 5px solid #F3565D!important;
}

#contracts_list td.alerta{
    border-right: 5px solid #dfba49!important;
}

#contracts_list td.vigente{
    border-right: 5px solid #5cb85c!important;
}

span.expired{
    color:  #F3565D!important;
}

span.alerta{
    color:  #dfba49!important;
}

span.vigente{
    color: #5cb85c!important;
}

span.secondary{
    color: #a5a5a5;
}

/* #contracts_list tbody tr{
    height: 75px;
} */

table tr.disabled>th, table tr.disabled>td{
    background-color: #eeeeee;
	color: grey;
}

/* .notset{
	color: lightgrey;
	 font-weight: bolder;
}
.expired{
	color: #e35b5a;
	 font-weight: bolder;
}
.alerta{
	color: orange!important;
	font-weight: bolder;
}
.vigente{
	color: green;font-weight: bolder;
} */

/* ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } */

/*   .modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    justify-content: space-around; width: 100%;
} */



.modal .nav::before, .modal .nav::after, .modal .row::before, .modal .row::after {
    display: block!important;
}

#catalogEditModal  .nav.nav-tabs li.active a{
    background-color: #5b9bd1!important;
    color: white!important;
}

select.danger{
    border: 2px solid red;
}

.container-grid{
/*     display: grid;
    grid-auto-rows: 5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));  */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-auto-rows: auto!important;
}

@media screen and (max-width: 600px) {
    .grid-item-text {
        display: none;
    }

    .grid-item i{
        margin-right: 0px!important;
    }
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
   /*  margin-right: 0px!important; */
  }

.container-grid .btn-primary{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tab-content{
    padding: 15px;
}

.btn.active, .btn.active:hover{
    color: #5b9bd1!important;
    background-color: white!important;
   /*  border: 1px solid #5b9bd1; */
    border-radius: 0px!important;
    border-bottom: 0px solid!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.btn.active i{
    color: #5b9bd1!important;
}
.btn.active:hover i{
    color: #5b9bd1!important;
}


/* .modal-detail .modal-body{
    padding: 0px!important;
} */

.modal-detail label{
    font-weight: 600!important;
}

.vs--disabled svg{
    display: none!important;
}

#modalUsers .modal-body, #modalItems .modal-body{
    height: 90vh;
    overflow-y: hidden;
}

#agenda, #catalogs, #projects{
    overflow-y: scroll;
    padding-right: 10px;
    max-height: calc(90vh - 185px);
    padding-bottom: 10px;
    margin-bottom: 0px;
}

#agenda li.user:not(.active, .disabled):hover, #catalogs li.item:not(.active, .disabled):hover, #projects li.project:not(.active, .disabled):hover{
    background-color: #84cc16;
	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
	color: white;
	cursor: pointer;
}

#catalogEditModal li.user.active, #catalogEditModal li.item.active, #catalogEditModal li.project.active{
    background-color: #16a34a!important;
    color: white;
    cursor: pointer;
    border-color: darkgreen!important;
}
#catalogEditModal li.user.disabled, #catalogEditModal li.item.disabled, #catalogEditModal li.project.disabled{
    cursor: pointer!important;
}

#catalogEditModal li.user.active:hover, #catalogEditModal li.item.active:hover, #catalogEditModal li.project.active:hover{
    background-color: #16a34a!important;
    color: white;
    cursor: pointer;
    border-color: darkgreen!important;
}
#catalogEditModal li.user.disabled:hover, #catalogEditModal li.item.disabled:hover, #catalogEditModal li.project.disabled:hover{
    opacity: 0.6;
    text-decoration: line-through;
}

#selectedItems li.disabled span, #selectedItems li.disabled img, #catalogs li.disabled span, #catalogs li.disabled img,  #projects li.disabled span, #projects li.disabled img{
    opacity: 0.6;
    text-decoration: line-through;
}

#IndexNavBar .btn-primary{
    border-color: #428bca!important;
}

.pretty .state label:after, .pretty .state label:before{
    top: calc((0% - (100% - 1em)) - 20%);
}

.document.disabled a{
    opacity: 0.6;
    text-decoration: line-through;
}

input.is-invalid, input:hover.is-invalid, input:focus.is-invalid, input:active.is-invalid{
    border: 2px solid red!important;
}

#dragnupload {
	border: 1px dashed #5b9bd1;
	text-align: center;
	padding: 25px 0px;
  }
  
  #dragnupload.dragover {
	background-color: #f5f5f5;
  }
  
  #dragnupload:active {
	background-color: #ebebeb;
  }
  
  .is-invalid {
	border-color: red;
  }

  #modal-negotation-info label{
	font-weight: 600;
  }



.td-title{
	font-size: 14px;
    color: #333;
    font-weight: 700;
}

.td-grid{
    display: grid;
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 100%;
	grid-row-gap: 5px;
}

.data-table {
	border-collapse: collapse;
	width: 100%;
  }
  
  .data-table th,
  .data-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
  }
  
  .data-table th {
	background-color: #f2f2f2;
  }

  .badge-light {
    border: 1px solid #a5a5a5;
}

td.nottocompany{
   /* background-image: linear-gradient(to right, #d4d4d8, #fff);*/
/*     background-image: linear-gradient(to right, #f8f9fa , #fff); */
    background-image: linear-gradient(to right, rgb(226 232 240) , #fff);
    text-align: center!important;
    border-left: 5px solid #a5a5a5!important;
    border-top-left-radius: 15px!important;
    border-bottom-left-radius: 15px!important;
}
td.yestocompany{
    background-image: linear-gradient(to right, aliceblue, #fff);
    text-align: center!important;
    border-left: 5px solid #5b9bd1!important;
    border-top-left-radius: 15px!important;
    border-bottom-left-radius: 15px!important;
}

.badge-tag{
    background-color: aliceblue !important;
}

.btn-adjudicar:hover{
    background-color: #5b9bd1!important;
    color: #f8f9fa !important;
    border: 1px solid #3b82f6;
}

.fa-sync-alt {
    position: absolute;
    right: 15px;
    bottom: 0;
    line-height: 34px;
    width: 34px;
    height: 34px;
    display: flex;
    justify-content: center;
    /* border: 2px solid green; */
    color: green;
    /* background-color: green; */
}

.container-grid-company {
    padding: 15px;
    display: grid;
    gap: 1rem;
    grid-auto-rows: 5rem;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));

}

.container-grid-company .grid-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin: 5px;
}

.vue-swatches > div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.vue-swatches__wrapper, .vue-swatches__container{
    z-index: 9999;
}

.vigencia{
    cursor: pointer;
}

.vigencia span{
    font-size: 12px;
    padding: 7px 14px;
    font-weight: 700;
}

.vigencia i{
    font-size: 12px; margin-right: 5px;
}

.badge-departament{
    font-size: 12px;
    padding: 7px 14px;
    font-weight: 700;
}

.step:hover span {
    color: white!important; /* Cambia el color del texto al pasar el ratón */
    transition: color 0.3s ease; /* Añade una transición suave al cambio de color */
    border-radius: 5px;
    background-color: #003f5c;
    font-weight: 700;
  }

  @media (max-width: 500px) {
    .modal-dialog {
      width: 100%!important;
      margin: 0px!important;
    }
    .step-number{
        display: none!important;
    }
  }

  .tab-content{
    background-color: white!important;
  }
  
  #IndexNavBar .btn-info{
    margin: 5px;
  }

  .grid-item i{
    color: #808080!important;
  }

  .grid-item.btn-info{
    background-color: #F1F5F9!important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    color: #808080!important;
    border: 1px solid gainsboro!important;
    height: 50px;
  }

  .grid-item.active {
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border: 0px solid;
}

.grid-item.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -5px;
    height: 5px;
    background: white; /* Asume que el fondo es blanco. Ajusta según sea necesario. */
    z-index: 1;
}

.grid-item.btn-info:hover {
    background-color: aliceblue!important;
    color: #5b9bd1!important;
    border: 1px solid gainsboro!important;
}
.grid-item.btn-info:hover i, .grid-item.btn-info:hover .grid-item-text{
    color: #5b9bd1!important;
}
  
@media (max-width: 768px) {
    .close-modal-button{
      position: relative!important;
    }
  }



@media (max-width: 1200px) {
    .dashboard-stat i{
        font-size: 85px!important;       
        top: 40px!important;
    }
}


.filter-footer{
    background-color: #428bca!important;
    cursor: pointer;
}
.filter-footer:hover{
    background-color: #3379b5!important;
}
.filter-footer:hover .btn{
    background-color: #3379b5!important;
}

.modal-margin{
    margin: 15px -15px;
    padding: 15px;
}

.container .full-width-item {
    grid-column: 1 / -1;
}
.modal .pagination{
    float: none!important;
}

#cem_image {
    display: flex;
    justify-content: space-between; /* Espacio entre columnas */
}
.currency-select {
    flex: 1; /* Ocupa el 50% del ancho */
    margin-right: 25px; /* Espacio entre columnas */
}
.currency-select:last-child {
    margin-right: 0; /* Elimina el margen en la última columna */
}

/* Ajusta el ancho del select al contenido del valor seleccionado */
.select-wrapper {
    display: inline-block;
    position: relative;
}

/* Contenedor principal con flexbox */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos salten a otra línea si no caben */
    gap: 10px; /* Espaciado entre los elementos */
    align-items: center; /* Alinea verticalmente los elementos */
}

/* Botón de categoría */
.btn-category-manager {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Selectores */
.select-wrapper {
    flex: 1; /* Permite que los selectores se ajusten al espacio disponible */
    min-width: 200px; /* Ancho mínimo para los selectores */
}

/* Botones de acción */
.action-buttons {
    display: flex;
    gap: 10px; /* Espaciado entre los botones */
}

.btn-action {
/*     width: 40px;
    height: 40px;
    border-radius: 10px; */
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 
@media screen and (max-width: 768px) {
    .folder-explorer .item, .folder-explorer .folder {
        max-width: 190px !important;
    min-width: 190px !important;
    }

    .folder-explorer .folder .image-content{
        width: 190px !important;
        height: 190px !important;
    }

    .folder-explorer .item .image-content{
        width: 190px !important;
        height: 130px !important;
    }

    .image-content i{
        font-size: 157px !important;
    }

    .folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))!important;
        grid-auto-rows: 210px!important;
    }

    .folder-explorer .item img, .folder-explorer .folder img {
        height: 150px!important;
        width: 150px!important;
        margin: 0 auto!important;
    }

    .child-category-name{
        max-width: 160px;
    }
}


@media screen and (max-width: 480px) {
    .folder-explorer .item, .folder-explorer .folder {
        max-width: 190px !important;
        min-width: 190px !important;
    }

    .folder-explorer .folder .image-content{
        width: 190px !important;
        height: 190px !important;
    }

    .folder-explorer .item .image-content{
        width: 190px !important;
        height: 130px !important;
    }

    .image-content i{
        font-size: 157px !important;
    }

    .folder-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))!important;
        grid-auto-rows: 210px!important;
    }

    .folder-explorer .item img, .folder-explorer .folder img {
        height: 150px!important;
        width: 150px!important;
        margin: 0 auto!important;
    }

    .child-category-name{
        max-width: 160px;
    }
} */

/* Contenedor principal */
.explorer-container {
    display: flex;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow: hidden; /* Evita que el contenido desborde */
}

/* Sidebar (árbol de categorías) */
.sidebar {
    width: 25vw; /* Ajusta el ancho de la sidebar */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    position: fixed; /* Fija la posición de la sidebar */
    top: 0;
    left: 0;
    overflow-y: auto; /* Permite desplazarse si el contenido es muy largo */
    background-color: #f8f9fa; /* Fondo opcional */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    z-index: 1000; /* Asegura que esté por encima del contenido */
    display: flex;
    flex-direction: column;
    margin-top: 0px;
}

/* Contenido de la carpeta */
.folder-content {
    margin-left: 22vw; /* Deja espacio para la sidebar */
    width: calc(100% - 22vw); /* Ajusta el ancho para ocupar el resto del espacio */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow-y: auto; /* Permite desplazarse si el contenido es muy largo */
    transition: width 0.3s ease; /* Transición suave al cambiar el ancho */
}

.folder-content.full-width {
    width: 100%; /* Ancho completo cuando treeDetails es true */
    margin-left: 0px;
}

/* Grid de carpetas y archivos */

.folder-grid {
    display: flex; /* Cambia de grid a flex */
    flex-wrap: wrap; /* Permite que los elementos salten a la siguiente línea si no caben */
    gap: 15px; /* Espaciado entre elementos */
    justify-content: center; /* Alinea los elementos al inicio */
    align-items: flex-start; /* Alinea los elementos verticalmente al inicio */
}

.folder, .item {
    flex: 0 1 calc(25% - 15px); /* Cada elemento ocupa el 25% del ancho menos el espacio del gap */
    max-width: calc(25% - 15px); /* Asegura que no exceda el 25% */
    box-sizing: border-box; /* Incluye el padding y border en el tamaño total */
    background-color: white;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: center;
    padding: 10px;
    transition: background-color 0.2s;
      transition: box-shadow 0.3s ease;
}

.folder:hover, .item:hover {    
    -webkit-box-shadow: 0 4px 12px rgba(91, 155, 209, 0.35); /* Safari, Chrome antiguos */
       -moz-box-shadow: 0 4px 12px rgba(91, 155, 209, 0.35); /* Firefox antiguos */
            box-shadow: 0 4px 12px rgba(91, 155, 209, 0.35); /* Estándar actual */

    background-color: #ffffff;
    cursor: pointer;
}

.folder img, .item img {
    width: 100%;
    height: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Responsive adjustments for tablets */
@media screen and (max-width: 768px) {
    .folder, .item {
        flex: 0 1 calc(33.33% - 10px); /* Cada elemento ocupa el 33.33% del ancho */
        max-width: calc(33.33% - 10px);
    }

    .item .item-footer span{
    max-width: 230px;
}
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 480px) {
    .folder, .item {
        flex: 0 1 calc(50% - 10px); /* Cada elemento ocupa el 50% del ancho */
        max-width: calc(50% - 10px);
    }

    .item .item-footer span{
        max-width: 230px;
    }
}

.folder .dropdown-menu, .item .dropdown-menu{
    padding: 10px;
    background-color: aliceblue;
    border: 1px solid darkgray;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    min-width: auto !important;
    border-radius: 15px;
}