.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: currentColor;
    mask-size: cover;
    -webkit-mask-size: cover;
}


.icon-sm {
    width: 15px;
    height: 15px;
}
.icon-md {
    width: 25px;
    height: 25px;
}
.icon-lg {
    width: 30px;
    height: 30px;
}

.icon-light-gray {
    color: #d3d3d3; /* Gris claro */
}

.icon-red {
    color: #ff0000; /* Rojo intenso */
}

.icon-black {
    color: #000000; /* Negro por defecto */
}

.icon-user {
    mask-image: url('/assets/icons/users.svg');
    -webkit-mask-image: url('/assets/icons/users.svg');
}

.icon-plus {
    mask-image: url('/assets/icons/+.svg');
    -webkit-mask-image: url('/assets/icons/+.svg');
}

.icon-minus {
    mask-image: url('/assets/icons/+-w.svg');
    -webkit-mask-image: url('/assets/icons/+-w.svg');
}


.icon-academy {
    mask-image: url('/assets/icons/academy.svg');
    -webkit-mask-image: url('/assets/icons/academy.svg');
}


.icon-area {
    mask-image: url('/assets/icons/area.svg');
    -webkit-mask-image: url('/assets/icons/area.svg');
}

.icon-areas {
    mask-image: url('/assets/icons/areas.svg');
    -webkit-mask-image: url('/assets/icons/areas.svg');
}

.icon-before {
    mask-image: url('/assets/icons/before.svg');
    -webkit-mask-image: url('/assets/icons/before.svg');
}

.icon-chat {
    mask-image: url('/assets/icons/chat.svg');
    -webkit-mask-image: url('/assets/icons/chat.svg');
}

.icon-cliente {
    mask-image: url('/assets/icons/cliente.svg');
    -webkit-mask-image: url('/assets/icons/cliente.svg');
}

.icon-clonar {
    mask-image: url('/assets/icons/clonar.svg');
    -webkit-mask-image: url('/assets/icons/clonar.svg');
}

.icon-clone {
    mask-image: url('/assets/icons/clone.svg');
    -webkit-mask-image: url('/assets/icons/clone.svg');
}

.icon-close {
    mask-image: url('/assets/icons/close.svg');
    -webkit-mask-image: url('/assets/icons/close.svg');
}

.icon-collapse {
    mask-image: url('/assets/icons/collapse.svg');
    -webkit-mask-image: url('/assets/icons/collapse.svg');
}

.icon-config {
    mask-image: url('/assets/icons/config.svg');
    -webkit-mask-image: url('/assets/icons/config.svg');
}

.icon-delete {
    mask-image: url('/assets/icons/delete.svg');
    -webkit-mask-image: url('/assets/icons/delete.svg');
}

.icon-download {
    mask-image: url('/assets/icons/download.svg');
    -webkit-mask-image: url('/assets/icons/download.svg');
}

.icon-edit {
    mask-image: url('/assets/icons/edit.svg');
    -webkit-mask-image: url('/assets/icons/edit.svg');
}

.icon-excel {
    mask-image: url('/assets/icons/excel.svg');
    -webkit-mask-image: url('/assets/icons/excel.svg');
}

.icon-exit {
    mask-image: url('/assets/icons/exit.svg');
    -webkit-mask-image: url('/assets/icons/exit.svg');
}

.icon-exportar {
    mask-image: url('/assets/icons/exportar.svg');
    -webkit-mask-image: url('/assets/icons/exportar.svg');
}

.icon-File_Download {
    mask-image: url('/assets/icons/File_Download.svg');
    -webkit-mask-image: url('/assets/icons/File_Download.svg');
}

.icon-general {
    mask-image: url('/assets/icons/general.svg');
    -webkit-mask-image: url('/assets/icons/general.svg');
}

.icon-group {
    mask-image: url('/assets/icons/group.svg');
    -webkit-mask-image: url('/assets/icons/group.svg');
}

.icon-home {
    mask-image: url('/assets/icons/home.svg');
    -webkit-mask-image: url('/assets/icons/home.svg');
}

.icon-info {
    mask-image: url('/assets/icons/info.svg');
    -webkit-mask-image: url('/assets/icons/info.svg');

}
.icon-item {
    mask-image: url('/assets/icons/item.svg');
    -webkit-mask-image: url('/assets/icons/item.svg');
}

.icon-item-active {
    mask-image: url('/assets/icons/item-active.svg');
    -webkit-mask-image: url('/assets/icons/item-active.svg');
}

.icon-items {
    mask-image: url('/assets/icons/items.svg');
    -webkit-mask-image: url('/assets/icons/items.svg');
}

.icon-legal {
    mask-image: url('/assets/icons/legal.svg');
    -webkit-mask-image: url('/assets/icons/legal.svg');
}

.icon-legales {
    mask-image: url('/assets/icons/legales.svg');
    -webkit-mask-image: url('/assets/icons/legales.svg');
}
.icon-mas {
    mask-image: url('/assets/icons/mas.svg');
    -webkit-mask-image: url('/assets/icons/mas.svg');
}
.icon-menos {
    mask-image: url('/assets/icons/menos.svg');
    -webkit-mask-image: url('/assets/icons/menos.svg');
}
.icon-mensaje {
    mask-image: url('/assets/icons/mensaje.svg');
    -webkit-mask-image: url('/assets/icons/mensaje.svg');
}
.icon-meto {
    mask-image: url('/assets/icons/meto.svg');
    -webkit-mask-image: url('/assets/icons/meto.svg');
}
.icon-metodologias {
    mask-image: url('/assets/icons/metodologias.svg');
    -webkit-mask-image: url('/assets/icons/metodologias.svg');
}
.icon-more {
    mask-image: url('/assets/icons/more.svg');
    -webkit-mask-image: url('/assets/icons/more.svg');
}
.icon-next {
    mask-image: url('/assets/icons/next.svg');
    -webkit-mask-image: url('/assets/icons/next.svg');
}
.icon-noti-accent {
    mask-image: url('/assets/icons/noti-accent.svg');
    -webkit-mask-image: url('/assets/icons/noti-accent.svg');
}
.icon-notifications {
    mask-image: url('/assets/icons/notifications.svg');
    -webkit-mask-image: url('/assets/icons/notifications.svg');
}
.icon-notifications-xs {
    mask-image: url('/assets/icons/notification-xs.svg');
    -webkit-mask-image: url('/assets/icons/notification-xs.svg');
}
.icon-open {
    mask-image: url('/assets/icons/open.svg');
    -webkit-mask-image: url('/assets/icons/open.svg');
}
.icon-options {
    mask-image: url('/assets/icons/options.svg');
    -webkit-mask-image: url('/assets/icons/options.svg');
}
.icon-origen {
    mask-image: url('/assets/icons/origen.svg');
    -webkit-mask-image: url('/assets/icons/origen.svg');
}

.icon-origenxl {
    mask-image: url('/assets/icons/origen-xl.svg');
    -webkit-mask-image: url('/assets/icons/origen-xl.svg');
}

.icon-pdf {
    mask-image: url('/assets/icons/pdf.svg');
    -webkit-mask-image: url('/assets/icons/pdf.svg');
}
.icon-recalcular {
    mask-image: url('/assets/icons/recalcular.svg');
    -webkit-mask-image: url('/assets/icons/recalcular.svg');
}
.icon-recovery {
    mask-image: url('/assets/icons/recovery.svg');
    -webkit-mask-image: url('/assets/icons/recovery.svg');
}
.icon-roles {
    mask-image: url('/assets/icons/roles.svg');
    -webkit-mask-image: url('/assets/icons/roles.svg');
}
.icon-save {
    mask-image: url('/assets/icons/save.svg');
    -webkit-mask-image: url('/assets/icons/save.svg');
}
.icon-scale {
    mask-image: url('/assets/icons/scale.svg');
    -webkit-mask-image: url('/assets/icons/scale.svg');
}
.icon-search {
    mask-image: url('/assets/icons/search.svg');
    -webkit-mask-image: url('/assets/icons/search.svg');
}
.icon-singlearea {
    mask-image: url('/assets/icons/singlearea.svg');
    -webkit-mask-image: url('/assets/icons/singlearea.svg');
}
.icon-singleitem {
    mask-image: url('/assets/icons/singleitem.svg');
    -webkit-mask-image: url('/assets/icons/singleitem.svg');
}
.icon-sort {
    mask-image: url('/assets/icons/sort.svg');
    -webkit-mask-image: url('/assets/icons/sort.svg');
}
.icon-tablas {
    mask-image: url('/assets/icons/tablas.svg');
    -webkit-mask-image: url('/assets/icons/tablas.svg');
}
.icon-table {
    mask-image: url('/assets/icons/table.svg');
    -webkit-mask-image: url('/assets/icons/table.svg');
}
.icon-tarea {
    mask-image: url('/assets/icons/tarea.svg');
    -webkit-mask-image: url('/assets/icons/tarea.svg');
}
.icon-timeline {
    mask-image: url('/assets/icons/timeline.svg');
    -webkit-mask-image: url('/assets/icons/timeline.svg');
}
.icon-upload {
    mask-image: url('/assets/icons/upload.svg');
    -webkit-mask-image: url('/assets/icons/upload.svg');
}
.icon-users {
    mask-image: url('/assets/icons/users.svg');
    -webkit-mask-image: url('/assets/icons/users.svg');
}
.icon-verification {
    mask-image: url('/assets/icons/verification.svg');
    -webkit-mask-image: url('/assets/icons/verification.svg');
}
.icon-vistageneral {
    mask-image: url('/assets/icons/vistageneral.svg');
    -webkit-mask-image: url('/assets/icons/vistageneral.svg');
}

.icon-pencil {
    mask-image: url('/assets/icons/tab1.svg');
    -webkit-mask-image: url('/assets/icons/tab1.svg');
}

.icon-trash {
    mask-image: url('/assets/icons/tab2.svg');
    -webkit-mask-image: url('/assets/icons/tab2.svg');
}

.icon-others {
    mask-image: url('/assets/icons/tab3.svg');
    -webkit-mask-image: url('/assets/icons/tab3.svg');
}

.icon-grid2 {
    mask-image: url('/assets/icons/grid2.svg');
    -webkit-mask-image: url('/assets/icons/grid2.svg');
}

.icon-grid1 {
    mask-image: url('/assets/icons/grid1.svg');
    -webkit-mask-image: url('/assets/icons/grid1.svg');
}

.icon-history {
    mask-image: url('/assets/icons/timeline.svg');
    -webkit-mask-image: url('/assets/icons/timeline.svg');
}