:root {
    --main-blue-900: #143b6f; 
    --main-blue-850: #1b4a85;
    --main-blue-800: #225a9c;
    --main-blue-700: #2969b3;
    --main-blue-600: #3079ca;
    --main-blue-500: #3b8ce0;
    --main-blue-400: #66a5e8;
    --main-blue-300: #91beef;
    --main-blue-200: #bdd8f6;
    --main-blue-100: #e8f1fb;
    --main-blue-50:  #f4f8fd;
    
    --main-blue-color: var(--main-blue-800);
    --main-blue-hover: var(--main-blue-700);

    --main-orange-900: #7a351a;
    --main-orange-850: #9e4624; 
    --main-orange-800: #c15a31;
    --main-orange-700: #d66d44;
    --main-orange-600: #e3825d;
    --main-orange-500: #ed9878;
    --main-orange-400: #f4af94;
    --main-orange-300: #f9c7b4;
    --main-orange-200: #fdded3;
    --main-orange-100: #fff1eb;
    --main-orange-50:  #fff8f5;
    
    --main-orange-color: var(--main-orange-800);
    --main-orange-hover: var(--main-orange-700);
}

.bg-main-blue, 
.badge-main-blue,
.btn-main-blue {
    background-color: var(--main-blue-color) !important;
    border-color: var(--main-blue-color) !important;
    color: #fff !important;
}

.bg-main-orange, 
.badge-main-orange,
.btn-main-orange {
    background-color: var(--main-orange-color) !important;
    border-color: var(--main-orange-color) !important;
    color: #fff !important;
}

.btn-main-blue:hover, 
.btn-main-blue:focus, 
.btn-main-blue:active {
    background-color: var(--main-blue-hover) !important;
    border-color: var(--main-blue-hover) !important;
}

.btn-main-orange:hover, 
.btn-main-orange:focus, 
.btn-main-orange:active {
    background-color: var(--main-orange-hover) !important;
    border-color: var(--main-orange-hover) !important;
}

.callout-main-blue {
    border-left-color: var(--main-blue-color) !important;
}

.callout-main-orange {
    border-left-color: var(--main-orange-color) !important;
}

.text-main-blue, 
a.text-main-blue {
    color: var(--main-blue-color) !important;
}

.text-main-orange, 
a.text-main-orange {
    color: var(--main-orange-color) !important;
}

.btn-outline-main {
    color: var(--main-blue-color) !important;
    border-color: var(--main-blue-color) !important;
}

.btn-outline-main:hover {
    background-color: var(--main-blue-color) !important;
    color: #fff !important;
}

.form-control:focus {
    border-color: var(--main-blue-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 4, 69, 0.25) !important;
}

/* --- CARD --- */

.card-main-blue {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.card-main-blue > .card-header {
    background-color: var(--main-blue-800) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
}

.card-main-blue > .card-header .card-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.card-main-blue > .card-header .btn-tool {
    color: rgba(255, 255, 255, 0.8) !important;
}

.card-main-blue > .card-header .btn-tool:hover {
    color: #ffffff !important;
}

.card-main-blue > .card-footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
}


.card-main-orange {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.card-main-orange > .card-header {
    background-color: var(--main-orange-800) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
}

.card-main-orange > .card-header .card-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.card-main-orange > .card-header .btn-tool {
    color: rgba(255, 255, 255, 0.8) !important;
}

.card-main-orange > .card-header .btn-tool:hover {
    color: #ffffff !important;
}

.card-main-orange > .card-footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.125) !important;
}