/*=============================================
Backgrounds
=============================================*/
.bg-danger, .bg-danger>a {
    color: #fff !important;
}

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

/*=============================================
callout
=============================================*/
.callout.callout-danger {
    border-left-color: var(--danger) !important;
}

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

/*=============================================
boton
=============================================*/
/* Danger */
.btn-danger {
    color: #fff;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    box-shadow: none;
    transition: all 0.15s ease-in-out;
}
.btn-danger:hover {
    background-color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}
.btn-danger:focus, .btn-danger.focus {
    background-color: var(--danger-focus) !important;
    border-color: var(--danger-focus) !important;
    box-shadow: 0 0 0 0.2rem var(--danger-subtle-focus) !important;
}
.btn-danger:active, .btn-danger.active {
    background-color: var(--danger-active) !important;
    border-color: var(--danger-active) !important;
}
.btn-danger:disabled, .btn-danger.disabled {
    background-color: var(--danger-subtle) !important;
    border-color: var(--danger-subtle) !important;
}

/*=============================================
Boton outline
=============================================*/
.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}
.btn-outline-danger:hover {
    border-color: var(--danger) !important;
    background-color: var(--danger) !important;
    color: #fff;
}
.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem var(--danger-subtle-focus) !important;
}
.btn-outline-danger:active {
    background-color: var(--danger-active) !important;
    border-color: var(--danger-active) !important;
    color: #fff;
}

.btn-outline-danger.disabled, .btn-outline-danger:disabled {
    color: var(--danger-subtle) !important;
    border-color: var(--danger-subtle) !important;
}

/*=============================================
boton bg-gradient-*
=============================================*/
.bg-gradient-danger {
    background: var(--danger) linear-gradient(180deg, var(--danger-soft), var(--danger)) repeat-x !important;
    color: #fff;
}

/* Hover */
.bg-gradient-danger.btn:hover {
    background: var(--danger) linear-gradient(180deg, var(--danger-hover), var(--danger)) repeat-x !important;
    border-color: var(--danger-hover) !important;
    color: #ececec;
}

/* Active */
.bg-gradient-danger.btn.active,
.bg-gradient-danger.btn:active,
.bg-gradient-danger.btn:not(:disabled):not(.disabled).active,
.bg-gradient-danger.btn:not(:disabled):not(.disabled):active {
    background: var(--danger) linear-gradient(180deg, var(--danger-active), var(--danger)) repeat-x !important;
    border-color: var(--danger-active) !important;
    color: #fff;
}

/* Focus */
.bg-gradient-danger.btn:focus {
    box-shadow: 0 0 0 0.2rem var(--danger-subtle-focus) !important;
    background: var(--danger) linear-gradient(180deg, var(--danger-focus), var(--danger)) repeat-x !important;
    border-color: var(--danger-focus) !important;
    color: #fff;
}

/*=============================================
tarjeta
=============================================*/
.card-danger:not(.card-outline)>.card-header {
    background-color: var(--danger) !important;
}

.card-danger.card-outline {
    border-top: 3px solid var(--danger) !important;
}

/*=============================================
Navbar
=============================================*/
.navbar-danger {
    background-color: var(--danger) !important;
    color: #fff;
}

/*=============================================
Sidebar
=============================================*/
.sidebar-dark-danger .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-danger .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--danger) !important;
    color: #fff;
}