@font-face {
    font-family: "Titillium Web";
    src: url('/assets/fonts/TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Titillium Web";
    src: url('/assets/fonts/TitilliumWeb-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Titillium Web";
    src: url('/assets/fonts/TitilliumWeb-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

:root {
    --color-bg: #841625;
    --color-bg-light: #BD1829;
    --color-surface: #4E6B79;
    --color-text: #FFFFFF;
    --color-accent: #B5BABE;
    --color-status-success: #4E6B79;
    --color-status-warning: #e7c519;
    --color-status-danger: #841625;
    --color-dark: #222222;
}

/* Bootstrap reset */

a {
    color: var(--color-accent);
    text-decoration: none;
}

.form-control,
.form-select,
.form-check-input,
.btn {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:active,
.form-control:active,
.form-select:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: transparent;
}

.form-check-input:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-surface) !important;
    background-image: none !important;
}

.was-validated .form-control:valid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.form-control.is-invalid {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

.form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 1rem;
    height: 1rem;

    background-color: var(--color-accent);
    border: 2px solid var(--color-surface);
    border-radius: 0.2rem;

    display: inline-grid;
    place-content: center;

    margin-top: 0.2rem;
    cursor: pointer;

    box-shadow: none;
    outline: none;
}


.form-check-input::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    transform: scale(0);
    transition: transform 0.1s ease-in-out;

    background-color: var(--color-surface);

    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 20%, 80% 0, 40% 62%);
}

.form-check-input:checked::before {
    transform: scale(1);
}

.form-check-input:focus,
.form-check-input:active {
    outline: none;
    box-shadow: none;
}

.form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:hover,
.btn:focus,
.btn:active {
    box-shadow: none !important;
    outline: none !important;
}

.btn-primary {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.btn-primary:hover {
    background: var(--color-bg-light) !important;
}

.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.btn-terciary {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.btn-terciary:hover {
    background-color: var(--color-dark);
}

.btn-warning {
    color: var(--color-text) !important;
}

.btn-warning:hover {
    background-color: #ffd500;
}

.btn-light {
    background-color: var(--color-accent);
    color: var(--color-text);
}

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

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

.text-light {
    color: var(--color-text) !important;
}

.text-surface {
    color: var(--color-surface) !important;
}

.custom-underline {
    text-decoration: underline;
    text-decoration-style:dotted; 
    text-decoration-thickness: 1px; 
    text-underline-offset: 5px;
}

table.table,
table.table th,
table.table td,
table.table thead,
table.table tbody,
table.table tr
{
    background-color: transparent !important;
}

td.text-muted {
    color: #FEFEFE !important;
    text-decoration: line-through !important;
}

.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background: var(--color-accent);
    border-color: transparent;
    color: var(--color-dark);
}