: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-rgb: 34, 90, 156;
    --main-blue-hover: var(--main-blue-700);

    --light-blue-color: var(--main-blue-400);
    --light-blue-hover: var(--main-blue-300);

    --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-rgb: 193, 90, 49;
    --main-orange-hover: var(--main-orange-700);

    --light-orange-color: var(--main-orange-400);
    --light-orange-hover: var(--main-orange-300);

    --main-green-900: #134e2e;
    --main-green-850: #1b663c;
    --main-green-800: #247f4b;
    --main-green-700: #2d995a;
    --main-green-600: #37b369;
    --main-green-500: #42cc79;
    --main-green-400: #6dd695;
    --main-green-300: #95e0b1;
    --main-green-200: #bdeacd;
    --main-green-100: #e3f4ea;
    --main-green-50:  #f2f9f5;
    
    --main-green-color: var(--main-green-800);
    --main-green-rgb: 36, 127, 75;
    --main-green-hover: var(--main-green-700);

    --light-green-color: var(--main-green-400);
    --light-green-hover: var(--main-green-300);

    --main-red-900: #5c1a1a;
    --main-red-850: #7a2222;
    --main-red-800: #a52a2a;
    --main-red-700: #c0392b;
    --main-red-600: #e74c3c;
    --main-red-500: #f1948a;
    --main-red-400: #f5b7b1;
    --main-red-300: #fadbd8;
    --main-red-200: #fdedec;
    --main-red-100: #fef5f5;
    --main-red-50:  #fffafa;

    --main-red-color: var(--main-red-800);
    --main-red-rgb: 165, 42, 42;
    --main-red-hover: var(--main-red-700);

    --light-red-color: var(--main-red-400);
    --light-red-hover: var(--main-red-300);

    --main-yellow-900: #7a5a0d;
    --main-yellow-850: #9e7511;
    --main-yellow-800: #c19116;
    --main-yellow-700: #d4a017;
    --main-yellow-600: #e8b01a;
    --main-yellow-500: #f1c40f;
    --main-yellow-400: #f4d346;
    --main-yellow-300: #f7e27d;
    --main-yellow-200: #fcf3cf;
    --main-yellow-100: #fef9e7;
    --main-yellow-50:  #fffdf5;

    --main-yellow-color: var(--main-yellow-800);
    --main-yellow-rgb: 193, 145, 22;
    --main-yellow-hover: var(--main-yellow-700);

    --light-yellow-color: var(--main-yellow-400);
    --light-yellow-hover: var(--main-yellow-300);

    --main-cyan-900: #0e565c;
    --main-cyan-850: #137179;
    --main-cyan-800: #178b95;
    --main-cyan-700: #1ba3af;
    --main-cyan-600: #20bcc9;
    --main-cyan-500: #34d3e1;
    --main-cyan-400: #6ee3ed;
    --main-cyan-300: #a7f0f6;
    --main-cyan-200: #d1f7fa;
    --main-cyan-100: #e6fbfe;
    --main-cyan-50:  #f4fdff;

    --main-cyan-color: var(--main-cyan-800);
    --main-cyan-rgb: 23, 139, 149;
    --main-cyan-hover: var(--main-cyan-700);

    --light-cyan-color: var(--main-cyan-400);
    --light-cyan-hover: var(--main-cyan-300);
}

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

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

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

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

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

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

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

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

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

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

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

.bg-light-cyan, .badge-light-cyan, .btn-light-cyan, .alert-light-cyan {
    background-color: var(--light-cyan-color) !important;
    border-color: var(--light-cyan-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-light-blue:hover, .btn-light-blue:focus, .btn-light-blue:active { background-color: var(--light-blue-hover) !important; border-color: var(--light-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; }
.btn-light-orange:hover, .btn-light-orange:focus, .btn-light-orange:active { background-color: var(--light-orange-hover) !important; border-color: var(--light-orange-hover) !important; }

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

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

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

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

.callout-main-blue { border-left-color: var(--main-blue-color) !important; }
.callout-main-orange { border-left-color: var(--main-orange-color) !important; }
.callout-main-green { border-left-color: var(--main-green-color) !important; }
.callout-main-red { border-left-color: var(--main-red-color) !important; }
.callout-main-yellow { border-left-color: var(--main-yellow-color) !important; }
.callout-main-cyan { border-left-color: var(--main-cyan-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; }
.text-main-green, a.text-main-green { color: var(--main-green-color) !important; }
.text-main-red, a.text-main-red { color: var(--main-red-color) !important; }
.text-main-yellow, a.text-main-yellow { color: var(--main-yellow-color) !important; }
.text-main-cyan, a.text-main-cyan { color: var(--main-cyan-color) !important; }

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

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

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

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

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

.btn-outline-main-cyan { color: var(--main-cyan-color) !important; border-color: var(--main-cyan-color) !important; }
.btn-outline-main-cyan:hover { background-color: var(--main-cyan-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;
}

.page-item .page-link {
    color: var(--main-blue-color);
}

.page-item.active .page-link {
    background-color: var(--main-blue-color);
    border-color: var(--main-blue-color);
}

/* --- 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-outline.card-main-blue {
    background-color: transparent !important;
    border: 1px solid var(--main-blue-color) !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-outline.card-main-blue > .card-header { background-color: transparent !important; color: var(--main-blue-color) !important; border-bottom: 0 !important; }
.card-main-blue > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-blue > .card-header .card-title { color: var(--main-blue-color) !important; }
.card-main-blue > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-blue > .card-header .btn-tool { color: rgba(0, 4, 69, 0.8) !important; }
.card-main-blue > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-blue > .card-header .btn-tool:hover { color: var(--main-blue-color) !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-outline.card-main-orange {
    background-color: #ffffff !important;
    border: 0 !important;
    border-top: 3px solid var(--main-orange-color) !important;
    border-radius: 6px !important;
}
.card-main-orange > .card-header { background-color: var(--main-orange-800) !important; color: #ffffff !important; border-bottom: 0 !important; }
.card-outline.card-main-orange > .card-header { background-color: transparent !important; color: var(--main-orange-color) !important; border-bottom: 0 !important; }
.card-main-orange > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-orange > .card-header .card-title { color: var(--main-orange-color) !important; font-weight: 600 !important; }
.card-main-orange > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-orange > .card-header .btn-tool { color: rgba(193, 90, 49, 0.8) !important; }
.card-main-orange > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-orange > .card-header .btn-tool:hover { color: var(--main-orange-color) !important; }
.card-main-orange > .card-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.125) !important; }

.card-main-green {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.card-outline.card-main-green {
    background-color: #ffffff !important;
    border: 0 !important;
    border-top: 3px solid var(--main-green-color) !important;
    border-radius: 6px !important;
}
.card-main-green > .card-header { background-color: var(--main-green-800) !important; color: #ffffff !important; border-bottom: 0 !important; }
.card-outline.card-main-green > .card-header { background-color: transparent !important; color: var(--main-green-color) !important; border-bottom: 0 !important; }
.card-main-green > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-green > .card-header .card-title { color: var(--main-green-color) !important; font-weight: 600 !important; }
.card-main-green > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-green > .card-header .btn-tool { color: rgba(36, 127, 75, 0.8) !important; }
.card-main-green > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-green > .card-header .btn-tool:hover { color: var(--main-green-color) !important; }
.card-main-green > .card-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.125) !important; }

.card-main-red {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.card-outline.card-main-red {
    background-color: #ffffff !important;
    border: 0 !important;
    border-top: 3px solid var(--main-red-color) !important;
    border-radius: 6px !important;
}
.card-main-red > .card-header { background-color: var(--main-red-800) !important; color: #ffffff !important; border-bottom: 0 !important; }
.card-outline.card-main-red > .card-header { background-color: transparent !important; color: var(--main-red-color) !important; border-bottom: 0 !important; }
.card-main-red > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-red > .card-header .card-title { color: var(--main-red-color) !important; font-weight: 600 !important; }
.card-main-red > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-red > .card-header .btn-tool { color: rgba(165, 42, 42, 0.8) !important; }
.card-main-red > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-red > .card-header .btn-tool:hover { color: var(--main-red-color) !important; }
.card-main-red > .card-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.125) !important; }

.card-main-yellow {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.card-outline.card-main-yellow {
    background-color: #ffffff !important;
    border: 0 !important;
    border-top: 3px solid var(--main-yellow-color) !important;
    border-radius: 6px !important;
}
.card-main-yellow > .card-header { background-color: var(--main-yellow-800) !important; color: #ffffff !important; border-bottom: 0 !important; }
.card-outline.card-main-yellow > .card-header { background-color: transparent !important; color: var(--main-yellow-color) !important; border-bottom: 0 !important; }
.card-main-yellow > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-yellow > .card-header .card-title { color: var(--main-yellow-color) !important; font-weight: 600 !important; }
.card-main-yellow > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-yellow > .card-header .btn-tool { color: rgba(193, 145, 22, 0.8) !important; }
.card-main-yellow > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-yellow > .card-header .btn-tool:hover { color: var(--main-yellow-color) !important; }
.card-main-yellow > .card-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.125) !important; }

.card-main-cyan {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.card-outline.card-main-cyan {
    background-color: #ffffff !important;
    border: 0 !important;
    border-top: 3px solid var(--main-cyan-color) !important;
    border-radius: 6px !important;
}
.card-main-cyan > .card-header { background-color: var(--main-cyan-800) !important; color: #ffffff !important; border-bottom: 0 !important; }
.card-outline.card-main-cyan > .card-header { background-color: transparent !important; color: var(--main-cyan-color) !important; border-bottom: 0 !important; }
.card-main-cyan > .card-header .card-title { color: #ffffff !important; font-weight: 600 !important; }
.card-outline.card-main-cyan > .card-header .card-title { color: var(--main-cyan-color) !important; font-weight: 600 !important; }
.card-main-cyan > .card-header .btn-tool { color: rgba(255, 255, 255, 0.8) !important; }
.card-outline.card-main-cyan > .card-header .btn-tool { color: rgba(23, 139, 149, 0.8) !important; }
.card-main-cyan > .card-header .btn-tool:hover { color: #ffffff !important; }
.card-outline.card-main-cyan > .card-header .btn-tool:hover { color: var(--main-cyan-color) !important; }
.card-main-cyan > .card-footer { background-color: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.125) !important; }

/* --- BREADCRUMB --- */

#breadcrumb,
.breadcrumb {
    color: var(--main-blue-900);
}

.breadcrumb-admin-icon,
.breadcrumb-company-icon,
.breadcrumb-office-icon {
    color: var(--main-orange-800)!important;
}

.breadcrumb-admin-text,
.breadcrumb-company-text,
.breadcrumb-office-text {
    color: var(--main-orange-800)!important;
}

#breadcrumb a,
.breadcrumb-item-link {
    color: var(--main-blue-900);
    font-weight: bold;
}

.breadcrumb-item {
    color: var(--main-blue-900);
}