@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600&display=swap');

:root {
    --color-primary: #E94F34;
    --color-primary-transparant-strongest: #E94F34AA;
    --color-primary-transparant-strong: #E94F3488;
    --color-primary-transparant-light: #E94F3433;
    --color-secondary: #234065;
    --color-light: #fff;
}

* {
    color: var(--color-secondary);
    font-family: 'Lexend Deca', Arial, sans-serif;
}

h1 {
    font-weight: bold;
}

h2 {
    font-weight: lighter;
}

a .pagetitle_main {
    font-weight: bold;
    margin-right: .25em;
    white-space: nowrap;
}

a .pagetitle_sub {
    font-weight: lighter;
    margin-left: .25em;
    white-space: nowrap;
    color: var(--color-primary);
}

kbd {
    background: #555;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0px;
}

thead:last-child, tbody:last-child, tfoot:last-child, tr:last-child, td:last-child, th:last-child {
    border-style: none;
}

button[class*="btn-"] {
    margin: .5em 0 1em;
    transition: color 0.5s, background 0.5s, border 0.5s;
    border-width: 2px;
}

.nav-link {
    transition: color 0.5s, background 0.5s, border 0.5s;
}

.nav-item .nav-link.accountlink, .nav-item .nav-link.logoutlink, .nav-item .nav-link.registerlink, .nav-item .nav-link.loginlink {
    color: var(--color-primary);
    margin: .5em;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
}

    .nav-item .nav-link.accountlink:hover, .nav-item .nav-link.logoutlink:hover, .nav-item .nav-link.registerlink:hover, .nav-item .nav-link.loginlink:hover {
        color: var(--color-light);
    }

.btn-primary, .nav-pills .nav-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-primary:hover, .btn-primary:focus {
        color: var(--color-primary);
        background: var(--color-light);
        border-color: var(--color-primary);
    }

.btn-outline-primary {
    color: var(--color-primary);
    background: var(--color-light);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    color: var(--color-light);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

button.btn-outline-secondary {
    border-width: 1px;
}

.btn-outline-secondary span {
    color: #AAA;
}

form#external-account button.btn, div#socialLoginList button.btn {
    line-height: 18px;
    padding-top: .5rem;
}

    form#external-account button.btn img, div#socialLoginList button.btn img {
        width: 18px;
        height: 18px;
        position: relative;
        top: -2px;
        margin-right: .5em;
    }

form#account div.checkbox label {
    line-height: 28px;
}

.nav-pills .nav-link {
    color: var(--color-primary);
}

form .checkbox {
    margin-top: 1em;
}

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

    a:hover {
        color: var(--color-secondary);
    }

input.form-control, input.form-check-input {
    outline: 0;
    border-color: var(--color-secondary);
    box-shadow: none;
    color: var(--color-secondary);
}

.form-label {
    color: var(--color-secondary);
    opacity: 1 !important;
}

input.form-control:focus, input.form-check-input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: none;
}

.btn-check:focus, .btn-primary:focus {
    box-shadow: none;
}

.form-control:disabled, .form-control[readonly], input[readonly] {
    background-color: var(--color-primary);
}

.footer {
    overflow: hidden;
}

    .footer a .pagetitle_main {
        font-size: .8em;
    }

    .footer a .pagetitle_sub {
        font-size: .8em;
    }

.nav-pills .nav-item .nav-link {
    border: none;
    border: 1px solid var(--color-light);
}

    .nav-pills .nav-item .nav-link:hover {
        color: #888;
        background: #EEE;
        border: 1px solid #CCC;
    }

.nav-pills .nav-item .nav-link.active:hover {
    background: var(--color-primary);
}

.alert-info {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.text-info {
    color: #555 !important;
}

.text-danger * {
    color: #dc3545 !important;
}

.light-border-left {
    border-left: 1px solid #CED4DA;
}

.container {
    max-width: 1280px;
}

.card-header {
    font-size: .9em;
    color: #888;
    background: #EEE;
    border: 1px solid #CCC;
}

table td * {
    font-size: .9em;
}

table.table-small th {
    font-size: .8em;
}

table.table-small td {
    font-size: .7em;
    line-height: 21px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--color-primary-transparant-light);
}

.table-striped > tbody th, .table-striped > tbody th div {
    background: var(--color-primary);
    color: var(--color-light !important);
}

.table .fa, .table .fas, .table .far, .table input[type='checkbox'] {
    font-size: 1.4em;
    color: var(--color-primary);
}

    .table input[type='checkbox'] {
        position: relative;
        top: 6px;
    }

.cursor-pointer {
    cursor: pointer;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.list-group div.btn {
    position: relative;
    left: .25rem;
    font-size: .9em;
}

input:not([type='checkbox']), textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-height: 28px;
    padding: 0px 0.5rem;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px #ccc;
    border-radius: 0.25rem;
    color: #333;
}

    input:not([type='checkbox']):focus-visible, textarea:focus-visible {
        outline: 1px solid var(--color-primary);
    }

i.icon-yellow {
    color: var(--color-primary);
}

.footer {
    position: fixed;
    background: var(--color-light);
}

div.list-group div.row:not(:last-child) {
    margin-bottom: .25rem;
}

table tr.selectedentity, table.table-striped.table-hover tr.selectedentity {
    border: 1px solid var(--color-primary-transparant-strong) !important;
    background: var(--color-primary-transparant-strong);
}

.form-floating > .form-control, .form-floating > .form-select {
    height: calc(3rem + 2px);
}

.form-floating > .form-control {
    padding: 0.75rem 0.5rem;
}

    .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
        padding-top: 1.125rem;
        padding-bottom: 0.125rem;
    }

.form-floating > label {
    padding: 0.75rem 0.5rem;
}

span.text-danger.field-validation-error * {
    color: var(--color-primary) !important;
}

/********************
***** Bootstrap *****
********************/

.alert[role='alert'] {
    display: none;
    position: fixed;
    top: 6.5rem;
    right: 1.5rem;
    z-index: 1000;
}

[data-bs-toggle='collapse'] {
    cursor: pointer;
}

[data-bs-toggle='collapse'] .fa::before {
    content: "\f139";
    margin-right: .5rem;
    color: var(--color-primary);
}

[data-bs-toggle='collapse'].collapsed .fa::before {
    content: "\f13a";
}

button[aria-label='Close'] {
    margin-right: 0.5rem;
    line-height: 18px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    border-radius: 3px;
}

button[aria-label='Close'] i {
    color: var(--color-light);
}

/****************************
***** Blazord typeahead *****
****************************/
.blazored-typeahead {
    border: none;
}

    .blazored-typeahead input {
        font-size: 1.2em;
    }

    .blazored-typeahead:focus-within {
        box-shadow: none;
    }

.blazored-typeahead__clear {
    padding: 0px;
}

.blazored-typeahead__input-mask-wrapper {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-height: 26px;
    padding: 0px .5rem;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 3px #CCC;
    border-radius: .25rem;
    color: #333;
}

.blazored-typeahead__input-mask {
    padding: 0px;
    margin: 0px;
    min-height: 26px;
}

.blazored-typeahead__input-mask-wrapper--disabled {
    min-height: 28px;
    opacity: .5;
    background: var(--color-primary);
    border: 1px solid #D0D0D0;
}

.blazored-typeahead__input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-height: 28px;
    padding: 0px .5rem;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 3px #CCC;
    border-radius: .25rem;
    color: #333;
}

.blazored-typeahead__results {
    min-height: none;
    padding: 0px;
    border-radius: 0px;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 3px #CCC;
}

    .blazored-typeahead__results .blazored-typeahead__result, .blazored-typeahead__results .blazored-typeahead__notfound {
        min-height: 28px;
        padding: 3px .5rem;
    }

.blazored-typeahead__clear {
    color: #888;
}

.blazored-typeahead__result:hover {
    cursor: default;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.blazored-typeahead__active-item {
    color: #212529;
    background: var(--color-light);
    border-bottom: 1px solid var(--color-light);
    border-top: 1px solid var(--color-light);
}

div.blazored-typeahead__result.blazored-typeahead__active-item > div > span.kc-newentityvalue {
    color: var(--color-primary);
    text-shadow: 1px 1px 2px var(--color-light);
}

div.blazored-typeahead__result span.btn {
    font-size: .8em;
}

.blazored-typeahead__result > div {
    font-size: 1.4em;
}

table.table-striped.table-hover tr:not(:first-child) {
    border: 1px solid var(--color-light);
}

    table.table-striped.table-hover tr:not(:first-child):hover {
        border: 1px solid var(--color-primary-transparant-strongest);
        background: var(--color-primary-transparant-strongest);
    }

.font-weight-bold {
    font-weight: bold;
}
/**************************************
***** Loading/confirmation screen *****
**************************************/
.loading-container-outer, .confirmation-container-outer {
    z-index: 1030;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #55555540;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

    .loading-container-outer .loading-container-inner, .confirmation-container-outer .confirmation-container-inner {
        margin: auto;
        margin-top: 15%;
        box-shadow: 0px 0px 10px #333;
    }

        .loading-container-outer .loading-container-inner .loading-container-spinner svg {
            animation: loading-spinner 4s linear infinite;
        }

        .confirmation-container-outer .confirmation-container-inner .fas {
            color: var(--color-primary);
        }

    @keyframes loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

progress {
    margin-top: .5rem;
    height: .75rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-primary);
    border-radius: .25rem;
    background: #CCC;
    background: -webkit-linear-gradient(to bottom, #BBB, #CCC, #AAA);
    background: linear-gradient(to bottom, #BBB, #CCC, #AAA);
    color: var(--color-primary);
}

    progress::-webkit-progress-bar {
        border-radius: .25rem;
        background: #CCC;
        background: -webkit-linear-gradient(to bottom, #BBB, #CCC, #AAA);
        background: linear-gradient(to bottom, #BBB, #CCC, #AAA);
    }

    progress::-webkit-progress-value {
        border-radius: .25rem;
        background: #E94F34; /* fallback for old browsers */
        background: -webkit-linear-gradient(to bottom, #E94F34, #1E4E72, #000143); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #E94F34, #1E4E72, #000143); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    progress::-moz-progress-bar {
        border-radius: .25rem;
        background: #E94F34; /* fallback for old browsers */
        background: -webkit-linear-gradient(to bottom, #E94F34, #1E4E72, #000143); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to bottom, #E94F34, #1E4E72, #000143); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

/**************************
***** Custom checkbox *****
**************************/

input[type=checkbox] {
    width: 5mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 5mm;
    border: 0.1mm solid var(--color-primary);
    background: var(--color-light);
    min-height: 5mm;
    max-height: 5mm;
    border-radius: 3px;
}

    input[type=checkbox]:after {
        position: absolute;
    }

    input[type=checkbox]:checked {
        background-color: var(--color-primary);
    }

        input[type=checkbox]:checked:after {
            margin-left: 1.3mm;
            margin-top: -0.2mm;
            width: 1.9mm;
            height: 4.5mm;
            border: solid var(--color-light);
            border-width: 0 1.3mm 1.3mm 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            content: "";
            display: inline-block;
        }

@media screen and (max-width: 991px) {
    input[type=checkbox] {
        width: 5mm;
        height: 5mm;
        min-height: 5mm;
        max-height: 5mm;
    }

        input[type=checkbox]:checked:after {
            margin-left: 1.5mm;
            margin-top: -0.1mm;
            width: 1.8mm;
            height: 4mm;
            border-width: 0 1mm 1mm 0;
        }
}