:root {
    --SPIE-blue: #0F1E5A;
    --SPIE-blue-transparent: #0F1E5Aaa;

    --SPIE-red: #CC0000;
    --SPIE-red-transparent: #CC0000aa;

    --SPIE-orange: #EEAD04;
    --SPIE-orange-transparent: #EEAD04aa;

    --SharePoint-teal: #03787c;
    --SharePoint-teal-transparent: #03787caa;

    --off-white: #F8F8F8;
    --light-gray: #E7E7E9;
    --dark-gray: #cacacc;
    --black: #000000;
}

.border-primary {
    border-color: var(--SPIE-blue) !important;
}

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

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

body {
    font-family: "Inter", Helvetica, Arial, sans-serif !important;
    background-color: var(--off-white) !important;
}

label {
    margin-bottom: 0 !important;
}

.btn-primary {
    background-color: var(--SPIE-blue) !important;
    border-color: var(--black) !important;
}

.btn-primary:hover {
    background-color: var(--SPIE-blue-transparent) !important;
    border-color: var(--SPIE-red) !important;
}

.btn-danger {
    background-color: var(--SPIE-red) !important;
    border-color: var(--black) !important;
}

.btn-danger:hover {
    background-color: var(--SPIE-red-transparent) !important;
    border-color: var(--SPIE-blue) !important;
}

.btn-warning {
    background-color: var(--SPIE-orange) !important;
    border-color: var(--black) !important;
    color: var(--off-white) !important;
}

.btn-warning:hover {
    background-color: var(--SPIE-orange-transparent) !important;
    border-color: var(--SPIE-blue) !important;
    color: var(--off-white) !important;
}

.btn-sharepoint {
    background-color: var(--SharePoint-teal) !important;
    border-color: var(--black) !important;
    color: var(--off-white) !important;
}

.btn-sharepoint:hover {
    background-color: var(--SharePoint-teal-transparent) !important;
    border-color: var(--SPIE-blue) !important;
    color: var(--off-white) !important;
}

h1,
h2,
h3,
h4 {
    color: var(--SPIE-blue) !important;
}

h3,
h4 {
    font-weight: bold;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--SPIE-blue);
    --bs-tooltip-color: var(--off-white);
}

a {
    color: var(--SPIE-red)
}

#header {
    background-color: var(--light-gray) !important;
    padding: 2px;
    margin: 0;
}

.d-none {
    display: none;
}

select {
    width: auto;
    min-width: 100px;
}

/* Advanced choices element, e.g. for gebruiksfunctie */
.choices__list--multiple .choices__item {
    background-color: var(--SPIE-blue) !important;
    color: white !important;
}

.choices__inner,
.choices__input {
    background-color: #ffffff !important;
}

th {
    white-space: normal !important;
    word-break: keep-all !important;
}

/* Used for cards */
.text-bg-primary {
    background-color: var(--SPIE-blue) !important;
    color: var(--off-white) !important;
}

.text-bg-secondary {
    background-color: var(--SPIE-blue-transparent) !important;
    color: var(--off-white) !important;
}