/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Failproof colors - site palette + shared control polish
 * Path: /vendor/failproof/colors/colors.css
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
 * Keep button height stable when swapping label text for a spinner + status.
 * Bootstrap's spinner-border-sm (1rem) is taller than typical btn line-height.
 */
.btn .spinner-border-sm
{
    --bs-spinner-width: 0.8rem;
    --bs-spinner-height: 0.8rem;
    --mdb-spinner-width: 0.8rem;
    --mdb-spinner-height: 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
    border-width: 0.12em;
    vertical-align: -0.1em;
}

.failproof-blue
{
    background-color: #003C5E;
    color: #fff;
}
.failproof-blue a
{
    color: #ffab40;
}
    .failproof-blue a:hover
    {
        color: #ffd8a6;
    }

/*
 * Materialize tabs: soft-chrome primary is the default (materialize-tabs.css).
 * .failproof-* on .tabs opts into brand fills and beats the default hover/active rules.
 */
.tabs.failproof-blue
{
    background-color: #003C5E;
    --tabs-accent: #ffab40;
}
.tabs.failproof-blue .tab a
{
    color: rgba(255, 255, 255, 0.72);
}
.tabs.failproof-blue .tab a:hover
{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.tabs.failproof-blue .tab a.active
{
    color: #ffab40;
    background-color: transparent;
}
.tabs.failproof-blue .indicator
{
    background-color: #ffab40;
}

.tabs.failproof-gray
{
    background-color: #333;
    --tabs-accent: #ffab40;
}
.tabs.failproof-gray .tab a
{
    color: rgba(255, 255, 255, 0.72);
}
.tabs.failproof-gray .tab a:hover
{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}
.tabs.failproof-gray .tab a.active
{
    color: #ffab40;
    background-color: transparent;
}
.tabs.failproof-gray .indicator
{
    background-color: #ffab40;
}

.tabs.failproof-light-blue,
.tabs.failproof-lblue
{
    background-color: #64b5f6;
    --tabs-accent: #003C5E;
}
.tabs.failproof-light-blue .tab a,
.tabs.failproof-lblue .tab a
{
    color: rgba(0, 0, 0, 0.55);
}
.tabs.failproof-light-blue .tab a:hover,
.tabs.failproof-lblue .tab a:hover
{
    color: #003C5E;
    background-color: rgba(0, 0, 0, 0.06);
}
.tabs.failproof-light-blue .tab a.active,
.tabs.failproof-lblue .tab a.active
{
    color: #003C5E;
    background-color: transparent;
}
.tabs.failproof-light-blue .indicator,
.tabs.failproof-lblue .indicator
{
    background-color: #003C5E;
}

/* Failproof Blue as an MDB .btn (MDB hover vars would otherwise go transparent) */
a.btn.failproof-blue,
button.btn.failproof-blue
{
    background-color: #003C5E !important;
    border-color: #003C5E !important;
    color: #fff !important;
}
a.btn.failproof-blue:hover,
a.btn.failproof-blue:focus,
a.btn.failproof-blue:active,
button.btn.failproof-blue:hover,
button.btn.failproof-blue:focus,
button.btn.failproof-blue:active
{
    background-color: #0a557f !important;
    border-color: #0a557f !important;
    color: #fff !important;
    opacity: 1;
}

.badge.failproof-blue
{
    background-color: #003C5E !important;
    color: #fff !important;
}

.failproof-gray
{
    background-color: #333;
    color: #fff;
}
.failproof-light-blue, .failproof-lblue
{
    background-color: #64b5f6;
    color: #fff;
}

.text-blue
{
    color: #2196f3 !important;
}
.text-blue-light
{
    color: #3294db !important;
}
.text-cyan
{
    color: #00d3ee !important;
}
.text-cyan-light
{
    color: #36d8f5 !important;
}
.text-orange
{
    color: #ff9800 !important;
}
.text-orange-light
{
    color: #ffb74d !important;
}
.text-red
{
    color: #f44336 !important;
}
.text-red-light
{
    color: #ff6459 !important;
}
.text-purple
{
    color: #9a30cb !important;
}
.text-purple-light
{
    color: #c46af7 !important;
}

.btn-blue
{
    background-color: #2196f3 !important;
}
    .btn-blue:hover, .btn-blue:focus
    {
        background-color: #3294db !important;
    }
.btn-cyan
{
    background-color: #00d3ee !important;
}
    .btn-cyan:hover, .btn-cyan:focus
    {
        background-color: #36d8f5 !important;
    }
.btn-orange
{
    background-color: #ff9800 !important;
}
    .btn-orange:hover, .btn-orange:focus
    {
        background-color: #ffb74d !important;
    }
.btn-red
{
    background-color: #f44336 !important;
}
    .btn-red:hover, .btn-red:focus
    {
        background-color: #ff6459 !important;
    }
.btn-purple
{
    background-color: #9a30cb !important;
}
    .btn-purple:hover, .btn-purple:focus
    {
        background-color: #c270f0 !important;
    }
.btn-blue, .btn-cyan, .btn-orange, .btn-red, .btn-purple
{
    color: #fff;
}