/* COLORES DE FONDOS */

/*
    <<<<< PRIMARY >>>>>
*/
.op-bg-green{
    background-color: var(--op-color-primary-green) !important;
}
.op-bg-orange{
    background-color: var(--op-color-primary-orange) !important;
}
.op-bg-blue{
    background-color: var(--op-color-primary-blue) !important;
}
.op-bg-black{
    background-color: var(--op-color-primary-black) !important;
}
.op-bg-green-15{
    background-color: var(--op-color-primary-green-15) !important;
}
.op-bg-orange-15{
    background-color: var(--op-color-primary-orange-15) !important;
}
.op-bg-blue-15{
    background-color: var(--op-color-primary-blue-15) !important;
}
.op-bg-black-15{
    background-color: var(--op-color-primary-black-15) !important;
}
.op-bg-green-50{
    background-color: var(--op-color-primary-green-50) !important;
}
.op-bg-orange-50{
    background-color: var(--op-color-primary-orange-50) !important;
}
.op-bg-blue-50{
    background-color: var(--op-color-primary-blue-50) !important;
}
.op-bg-black-50{
    background-color: var(--op-color-primary-black-50) !important;
}

/*
    <<<<< SECONDARY >>>>>
*/
.op-bg-green-sec{
    background-color: var(--op-color-secondary-green) !important;
}
.op-bg-orange-sec{
    background-color: var(--op-color-secondary-orange) !important;
}
.op-bg-blue-sec{
    background-color: var(--op-color-secondary-blue) !important;
}
.op-bg-black-sec{
    background-color: var(--op-color-secondary-black) !important;
}
.op-bg-green-sec-15{
    background-color: var(--op-color-secondary-green-15) !important;
}
.op-bg-orange-sec-15{
    background-color: var(--op-color-secondary-orange-15) !important;
}
.op-bg-blue-sec-15{
    background-color: var(--op-color-secondary-blue-15) !important;
}
.op-bg-black-sec-15{
    background-color: var(--op-color-secondary-black-15) !important;
}
.op-bg-green-sec-50{
    background-color: var(--op-color-secondary-green-50) !important;
}
.op-bg-orange-sec-50{
    background-color: var(--op-color-secondary-orange-50) !important;
}
.op-bg-blue-sec-50{
    background-color: var(--op-color-secondary-blue-50) !important;
}
.op-bg-black-sec-50{
    background-color: var(--op-color-secondary-black-50) !important;
}

/*
    <<<<< GRAY COLORS >>>>>
*/
.op-bg-light-gray{
    background-color: var(--op-color-light-gray) !important;
}
.op-bg-medium-gray{
    background-color: var(--op-color-medium-gray) !important;
}
.op-bg-dark-gray{
    background-color: var(--op-color-dark-gray) !important;
}

/*
    <<<<< BLACK & WHITE >>>>>
*/
.op-bg-dark{
    background-color: var(--op-color-black) !important;
}
.op-bg-light{
    background-color: var(--op-color-white) !important;
}

/*
    <<<<< POSITIVE & NEGATIVE >>>>>
*/
.op-bg-success{
    background-color: var(--op-color-positive) !important;
}
.op-bg-danger{
    background-color: var(--op-color-negative) !important;
}
.op-bg-success-15{
    background-color: var(--op-color-positive-15) !important;
}
.op-bg-danger-15{
    background-color: var(--op-color-negative-15) !important;
}
.op-bg-success-50{
    background-color: var(--op-color-positive-50) !important;
}
.op-bg-danger-50{
    background-color: var(--op-color-negative-50) !important;
}

/*
    <<<<< CONTRAST COLORS >>>>>
*/
.op-bg-question{
    background-color: var(--op-color-contrast-pink) !important;
}
.op-bg-warning{
    background-color: var(--op-color-contrast-yellow) !important;
}
.op-bg-question-15{
    background-color: var(--op-color-contrast-pink-15) !important;
}
.op-bg-warning-15{
    background-color: var(--op-color-contrast-yellow-15) !important;
}
.op-bg-question-50{
    background-color: var(--op-color-contrast-pink-50) !important;
}
.op-bg-warning-50{
    background-color: var(--op-color-contrast-yellow-50) !important;
}


/* FONDOS GRADIENTE */
.op-bg-grad-main{
    background: linear-gradient(to top, rgba(42, 85, 110, 1) 0%, rgba(139, 174, 195, 1) 35%);
    background-repeat: no-repeat;
    background-size: cover;
}