/*Start override Fonts*/
@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-ExtraLight.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-Light.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-Regular.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-Medium.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-Bold.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-ExtraBold.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: Tajawal;
    src: url('/assets/css/fonts/tajawal/Tajawal-Black.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 900;
}

/*
   Tajawal everywhere, through the VARIABLE the rest of the stylesheet already reads.

   What was here before was a list of element selectors — h1..h6, p, input, a, div — followed by
   `html, body { font-family: Helvetica... }`. Both lost, for two different reasons, and between
   them the panel ran in Inter and Helvetica while appearing to be configured for Tajawal:

     • Metronic styles its components by CLASS (.btn, .form-control, .table, .menu-link), each
       setting font-family from --bs-body-font-family. A class beats an element selector, so every
       button, every field and every table cell — which is most of the panel — kept Inter.
     • The elements that were not covered by that list (span, td, th, button, small, strong)
       inherited from body, and body said Helvetica.

   Setting the variable instead means one declaration reaches Metronic, Bootstrap and anything else
   built on it, with no specificity fight and no !important. The Latin fallbacks stay behind Tajawal
   for anything it does not cover.

   This file is linked AFTER style.bundle.css, so this :root wins over Metronic's own.
*/
:root {
    --bs-font-sans-serif: Tajawal, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

html, body {
    font-family: var(--bs-body-font-family);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}