/*
 * Insezo Backgrounds
 * --------------------------------------------------
 */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.hover\:bg-secondary:hover {
    background-color: var(--color-secondary) !important;
}

.bg-tertiary {
    background-color: var(--color-tertiary) !important;
}

.hover\:bg-tertiary:hover {
    background-color: var(--color-tertiary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.hover\:bg-success:hover {
    background-color: var(--color-success) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.hover\:bg-danger:hover {
    background-color: var(--color-danger) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.hover\:bg-warning:hover {
    background-color: var(--color-warning) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.hover\:bg-info:hover {
    background-color: var(--color-info) !important;
}

.bg-dark {
    background-color: var(--color-dark) !important;
}

.hover\:bg-dark:hover {
    background-color: var(--color-dark) !important;
}

.bg-light {
    background-color: var(--color-light) !important;
}

.hover\:bg-light:hover {
    background-color: var(--color-light) !important;
}

.bg-violet {
    background-color: var(--color-violet) !important;
}

.hover\:bg-violet:hover {
    background-color: var(--color-violet) !important;
}

.bg-white {
    background-color: white !important;
}

.hover\:bg-white:hover {
    background-color: white !important;
}

/*
 * Insezo Gradient
 * --------------------------------------------------
 */
.bg-gradient-blue-0, .hover\:bg-gradient-blue-0:hover {
    background: linear-gradient(0deg, var(--color-gradient-blue-light) 0%, var(--color-gradient-blue-dark) 100%);
}

.bg-gradient-blue-90, .hover\:bg-gradient-blue-90:hover {
    background: linear-gradient(90deg, var(--color-gradient-blue-light) 0%, var(--color-gradient-blue-dark) 100%);
}

.bg-gradient-blue-180, .hover\:bg-gradient-blue-180:hover {
    background: linear-gradient(180deg, var(--color-gradient-blue-light) 0%, var(--color-gradient-blue-dark) 100%);
}

.bg-gradient-blue-270, .hover\:bg-gradient-blue-270:hover {
    background: linear-gradient(270deg, var(--color-gradient-blue-light) 0%, var(--color-gradient-blue-dark) 100%);
}

.bg-gradient-orange-0, .hover\:bg-gradient-orange-0:hover {
    background: linear-gradient(0deg, var(--color-gradient-orange-light) 0%, var(--color-gradient-orange-dark) 100%);
}

.bg-gradient-orange-90, .hover\:bg-gradient-orange-90:hover {
    background: linear-gradient(90deg, var(--color-gradient-orange-light) 0%, var(--color-gradient-orange-dark) 100%);
}

.bg-gradient-orange-180, .hover\:bg-gradient-orange-180:hover {
    background: linear-gradient(180deg, var(--color-gradient-orange-light) 0%, var(--color-gradient-orange-dark) 100%);
}

.bg-gradient-orange-270, .hover\:bg-gradient-orange-270:hover {
    background: linear-gradient(270deg, var(--color-gradient-orange-light) 0%, var(--color-gradient-orange-dark) 100%);
}

.bg-gradient-green-0, .hover\:bg-gradient-green-0:hover {
    background: linear-gradient(0deg, var(--color-gradient-green-light) 0%, var(--color-gradient-green-dark) 100%);
}

.bg-gradient-green-90, .hover\:bg-gradient-green-90:hover {
    background: linear-gradient(90deg, var(--color-gradient-green-light) 0%, var(--color-gradient-green-dark) 100%);
}

.bg-gradient-green-180, .hover\:bg-gradient-green-180:hover {
    background: linear-gradient(180deg, var(--color-gradient-green-light) 0%, var(--color-gradient-green-dark) 100%);
}

.bg-gradient-green-270, .hover\:bg-gradient-green-270:hover {
    background: linear-gradient(270deg, var(--color-gradient-green-light) 0%, var(--color-gradient-green-dark) 100%);
}

.bg-gradient-violet-0, .hover\:bg-gradient-violet-0:hover {
    background: linear-gradient(0deg, var(--color-gradient-violet-light) 0%, var(--color-gradient-violet-dark) 100%);
}

.bg-gradient-violet-90, .hover\:bg-gradient-violet-90:hover {
    background: linear-gradient(90deg, var(--color-gradient-violet-light) 0%, var(--color-gradient-violet-dark) 100%);
}

.bg-gradient-violet-180, .hover\:bg-gradient-violet-180:hover {
    background: linear-gradient(180deg, var(--color-gradient-violet-light) 0%, var(--color-gradient-violet-dark) 100%);
}

.bg-gradient-violet-270, .hover\:bg-gradient-violet-270:hover {
    background: linear-gradient(270deg, var(--color-gradient-violet-light) 0%, var(--color-gradient-violet-dark) 100%);
}

/*
 * Insezo gradient masking
 * --------------------------------------------------
 */
.gradient-mask-0 {
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-45 {
    mask-image: linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-90 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-135 {
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-180 {
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-225 {
    mask-image: linear-gradient(225deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-270 {
    mask-image: linear-gradient(270deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.gradient-mask-315 {
    mask-image: linear-gradient(315deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}


/*
 * Insezo Text
 * --------------------------------------------------
 * Options:
 *     - Prefix class with 'hover:' to apply as :hover effect
 * --------------------------------------------------
 */
.text-primary {
    color: var(--color-primary) !important;
}

.hover\:text-primary:hover {
    color: var(--color-primary) !important;
}

.text-tertiary {
    color: var(--color-tertiary) !important;
}

.hover\:text-tertiary:hover {
    color: var(--color-tertiary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.hover\:text-success:hover {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.hover\:text-danger:hover {
    color: var(--color-danger) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.hover\:text-warning:hover {
    color: var(--color-warning) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.hover\:text-info:hover {
    color: var(--color-info) !important;
}

.text-violet {
    color: var(--color-violet) !important;
}

.hover\:text-violet:hover {
    color: var(--color-violet) !important;
}

.text-default {
    color: var(--color-dark) !important;
}

.hover\:text-default:hover {
    color: var(--color-dark) !important;
}

.text-dark {
    color: var(--color-text-dark) !important;
}

.hover\:text-dark:hover {
    color: var(--color-text-dark) !important;
}

.text-light {
    color: var(--color-text-light) !important;
}

.hover\:text-light:hover {
    color: var(--color-text-light) !important;
}


.text-white {
    color: white !important;
}

.hover\:text-white:hover {
    color: white !important;
}

/*
 * Insezo Borders
 * --------------------------------------------------
 * Options:
 *     - Prefix class with 'hover:' to apply as :hover effect
 * --------------------------------------------------
 */
.border-light-subtle {
    border-color: #dddddd !important;
}

.border-danger {
    --bs-danger-rgb: var(--color-danger-rgb);
}

/*
 * Insezo Button Addons
 * --------------------------------------------------
 */
.button-bubble-green {
    height: 10px;
    width: 10px;
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-insezo-success);
    border: 2px solid white;
    border-radius: 100%;
}

/*
 * Insezo Icon Addons
 * --------------------------------------------------
 */
.icon-bubble-danger {
    height: 8px;
    width: 8px;
    position: absolute;
    top: 9px;
    right: 9px;
    background: var(--color-insezo-danger);
    border: 1px solid white;
    border-radius: 100%;
}