.button-primary-icon-text {
    width: auto !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-icon-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-icon-text {
    width: auto !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

.button-primary-icon {
    width: 2rem !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-icon:hover {
        width: 2rem !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-icon {
    width: 2rem !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-secondary-icon:hover {
        width: 2rem !important;
        height: 2rem !important;
        background-color: var(--color-gray-100) !important;
        border: 1px solid var(--color-gray-500) !important;
        color: var(--color-text-primary) !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-primary-text {
    width: auto !important;
    height: 2rem !important;
    background-color: var(--color-primary-700) !important;
    border: 1px solid var(--color-primary-700) !important;
    color: #fff !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-primary-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-primary-600) !important;
        border: 1px solid var(--color-primary-600) !important;
        color: #fff !important;
        border-radius: var(--border-radius-2) !important;
    }

.button-secondary-text {
    width: auto !important;
    height: 2rem !important;
    background-color: #fff !important;
    border: 1px solid var(--color-gray-500) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-2) !important;
}

    .button-secondary-text:hover {
        width: auto !important;
        height: 2rem !important;
        background-color: var(--color-gray-100) !important;
        border: 1px solid var(--color-gray-500) !important;
        color: var(--color-text-primary) !important;
        border-radius: var(--border-radius-2) !important;
    }



/* --- ICON BUTTONS V3 --- */
.button-primary-icon-text .bi.bi-plus-lg /*ICONO CREAR*/ {
    font-size: 1rem !important; /*Revisar*/
    color: #fff !important;
}

.button-primary-icon-text .bi.bi-floppy /*ICONO GUARDAR*/ {
    font-size: 0.9rem !important; /*Revisar*/
    color: #fff !important;
}

.button-secondary-icon .bi.bi-arrow-clockwise, /*ICONO RECARGAR*/
.button-secondary-icon .bi.bi-box-arrow-right, /*ICONO EXPORTAR*/
.button-secondary-icon .bi.bi-chevron-left, /*ICONO VOLVER */
.button-secondary-icon .bi.bi-chevron-right, /*ICONO SIGUIENTE*/
.button-secondary-icon .bi.bi-box-arrow-in-right /*ICONO IMPORTAR*/ {
    font-size: 1rem !important; /*Revisar*/
    color: var(--color-text-primary) !important;
}


/* Grid buttons */
i.bi.bi-check2::before { /*ICONO TILDE*/
    color: var(--color-text-primary) !important;
    font-size: 26px; /*Revisar*/
}

i.bi-x::before { /*ICONO X*/
    color: var(--color-text-primary) !important;
    font-size: 30px; /*Revisar*/
}

a.bi.bi-check2::before { /*ICONO TILDE*/
    color: var(--color-text-primary) !important;
    font-size: 26px; /*Revisar*/
}

a.bi-x::before { /*ICONO X*/
    color: var(--color-text-primary) !important;
    font-size: 30px; /*Revisar*/
}

a.btn-icon {
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    font-size: 18px !important;
    padding: var(--spacing-1) var(--spacing-2) !important;
}

    a.btn-icon:hover {
        color: var(--color-secondary-700) !important;
        background-color: transparent !important;
        font-size: 18px !important;
        padding: var(--spacing-1) var(--spacing-2) !important;
    }

button.btn-icon {
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    font-size: 18px !important; /*Revisar*/
    padding: var(--spacing-1) var(--spacing-2) !important;
    border: none !important;
}

    button.btn-icon:hover {
        color: var(--color-secondary-700) !important;
        background-color: transparent !important;
        font-size: 18px !important; /*Revisar*/
        padding: var(--spacing-1) var(--spacing-2) !important;
        border: none !important;
    }



@media (max-width: 576px) {
    button.button-primary-icon-text span.dxbl-btn-caption {
        display: none !important;
    }

    button.button-primary-icon-text {
        width: 2rem !important;
    }

    button.button-secondary-icon-text span.dxbl-btn-caption {
        display: none !important;
    }

    button.button-secondary-icon-text {
        width: 2rem !important;
    }
}