@import url("./css/blazor-inbuilt.css");

/* A workaround for an issue with dotnet watch */
#dotnet-compile-error:empty {
    visibility: hidden;
    display: none;
}

:root {
    --par-blue: #002F6C;
    --par-blue-darker: #001736;
    --par-blue-bg-text: #ffffff;
    --par-blue-bg-heading-font: "Acumin Pro Bold", sans-serif;
    --par-blue-bg-heading-size: 3rem;
    --par-blue-bg-heading-size-sm: 1.5rem;
    --par-blue-bg-heading-weight: 600;
    --par-blue-bg-heading-pb: 32px;
    --par-blue-bg-heading-pb-sm: 0px;
    --par-blue-bg-body-font: "Acumin Pro Light", sans-serif;
    --par-blue-bg-body-size: 1.5rem;
    --par-blue-bg-body-size-sm: 1rem;
    --par-blue-bg-body-weight: 400;
    --par-blue-bg-body-mb-sm: 0px;
    --form-gray: #F8F8F8;
    --navbar-gray: #707372;
    --button-blue: #0579BD;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
    /* Read by the shared PhoneInput.razor.css (PAR.AccountAdministration.UI.Common) to size the
       Country Code field's Tom Select wrapper. This app's input.form-control/select.form-select
       rule below pins real <input>/<select> elements to 48px, but that selector cannot reach the
       <div class="ts-wrapper ...form-control form-select"> Tom Select renders instead, so the
       wrapper needs this value handed to it explicitly. CsPortal shares the same PhoneInput.razor.css
       but has no equivalent 48px override and does not define this variable, so its Country Code
       field falls back to Tom Select's own unmodified default there - matching CsPortal's own
       unmodified Phone Number <input> instead of this app's 48px. */
    --par-country-select-height: 48px;
}

.par-blue-text {
    color: var(--par-blue);
}
.par-blue-bg {
    background-color: var(--par-blue);
    color: var(--par-blue-bg-text);
}

.par-blue-bg h3 {
    font-family: var(--par-blue-bg-heading-font);
    font-size: var(--par-blue-bg-heading-size);
    font-weight: var(--par-blue-bg-heading-weight);
    color: var(--par-blue-bg-text);
    padding-bottom: var(--par-blue-bg-heading-pb);
}

.par-blue-bg p {
    font-family: var(--par-blue-bg-body-font);
    font-size: var(--par-blue-bg-body-size);
    font-weight: var(--par-blue-bg-body-weight);
    color: var(--par-blue-bg-text);
}

@media (max-width: 576px) {
    .par-blue-bg h3 {
        font-size: var(--par-blue-bg-heading-size-sm);
        padding-bottom: var(--par-blue-bg-heading-pb-sm);
    }

    .par-blue-bg p {
        font-size: var(--par-blue-bg-body-size-sm);
        margin-bottom: var(--par-blue-bg-body-mb-sm);
    }
}

/* Shared utilities for blue left-column components */
.py-40px {
    padding-block: 40px;
}

.mobile-hidden {
    @media (max-width: 576px) {
        display: none;
    }
}

.max-width-430 {
    max-width: 430px;
}

.max-width-550 {
    max-width: 550px;
}

.max-width-700 {
    max-width: 700px;
}

.button-blue-color {
    color: var(--button-blue);
}

.form-grey-bg {
    background-color: var(--form-gray);
}

.inter-font {
    font-family: "Inter", sans-serif;
}

label.form-label {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0.15px;
}

input.form-control, select.form-select:not(.override-big-form-select), div.multi-select-dropdown button {
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    height: 48px;
}

.half-page-responsive {
    @media (min-width: 992px) {
        height: 100%;
    }
}

/*Accessibility styles - accessible visually-hidden implementation*/
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* keep sr-only for compatibility if used elsewhere */
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.form-control {
    border: 1px solid #959595;
}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(43, 141, 199, .87);
    border: 0.5px solid #005596;
    outline: 1.5px solid #005596;
    outline-offset: -1px;
}

.text-danger {
    font-size: 12px;
}

input[type="password"]::-ms-reveal {
    display: none;
}

/* Visible asterisk for required labels rendered in markup */
.required-visible {
    color: #dc3545; /* bootstrap danger color */
    margin-left: 0.25rem;
    font-weight: 600;
}

.form-check-input:checked {
    background-color: var(--button-blue) !important;
    border-color: var(--button-blue) !important;
}
.dropdown-item.active, .dropdown-item:active {
     color: inherit;
     text-decoration: none;
     background-color: inherit;
 }