@font-face {
    font-family: Gabarito;
    src: url("branding/redion/Gabarito-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

:root.redion-theme {
    --redion-dark-blue: #030338;
    --redion-medium-blue: #1a2bc2;
    --redion-bright-blue: #5466ff;
    --redion-light-blue: #bfd6ff;
    --redion-bright-red: #ff3026;
    --redion-medium-red: #c21c17;
    --redion-dark-red: #630d14;
    --redion-white: #fff;
    --redion-light-gray: #ededec;
    --redion-medium-gray: #dadad9;
    --redion-canvas-alt: #f8fbff;
    --redion-cta: #e4002b;
    --redion-link: var(--redion-medium-red);
    --redion-control-radius: 8px;
    --redion-card-radius: 14px;
    --redion-control-height: 44px;
    --redion-font: "Gabarito", "Aptos", "Segoe UI", system-ui, sans-serif;
    --primary: var(--redion-medium-blue);
    --background-color: var(--redion-white);
    --top-row-backgroud-color: var(--redion-white);
    --bs-primary: var(--redion-cta);
    --bs-primary-rgb: 228, 0, 43;
    --bs-body-font-family: var(--redion-font);
    --bs-body-color: var(--redion-dark-blue);
    --bs-body-bg: var(--redion-white);
    --bs-link-color: var(--redion-link);
    --bs-link-color-rgb: 194, 28, 23;
    --bs-link-hover-color: var(--redion-dark-red);
    --bs-link-hover-color-rgb: 99, 13, 20;
    --bs-border-radius: var(--redion-control-radius);
    --bs-border-radius-sm: var(--redion-control-radius);
    --bs-border-radius-lg: var(--redion-card-radius);
    --bs-tertiary-bg: var(--redion-canvas-alt);
    --bs-secondary-color: var(--redion-dark-blue);
    --bs-tertiary-color: var(--redion-medium-blue);
    --bs-form-invalid-color: var(--redion-medium-red);
    --bs-form-invalid-border-color: var(--redion-medium-red);
    --hx-calendar-day-selected-background: var(--redion-cta);
    --hx-calendar-day-selected-color: var(--redion-white);
    --hx-calendar-day-today-color: var(--redion-medium-blue);
    --hx-calendar-day-today-background: 191, 214, 255;
    --hx-calendar-day-today-background-opacity: 1;
    --hx-calendar-day-hover-background: var(--redion-light-blue);
    --hx-calendar-navigation-button-text-color: var(--redion-medium-blue);
    --hx-calendar-navigation-button-focus-box-shadow: none;
}

.redion-theme body {
    font-family: var(--redion-font);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: var(--redion-dark-blue);
}

.redion-theme :is(h1, h2, h3, h4, h5, h6, .h5, label) {
    color: var(--redion-dark-blue);
    letter-spacing: -0.2px;
}

.redion-theme :is(h1, h2) {
    font-size: clamp(1.88rem, 1.466rem + 2.045vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
}

.redion-theme :is(h4, h5, h6, .h5) {
    font-weight: 400;
    line-height: 1.4;
}

.redion-theme h3 {
    font-weight: 700;
}

.redion-theme :is(a, .btn-link) {
    color: var(--redion-link);
    text-underline-offset: 0.15em;
}

.redion-theme :is(a:hover, .btn-link:hover) {
    color: var(--redion-dark-red);
    text-decoration: underline;
}

.redion-theme :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.redion-theme .form-control:focus,
.redion-theme .form-select:focus,
.redion-theme .form-check-input:focus {
    outline: 2px solid var(--redion-medium-blue);
    outline-offset: 2px;
    box-shadow: none;
}

.redion-theme .btn {
    --bs-btn-font-family: var(--redion-font);
    --bs-btn-border-radius: var(--redion-control-radius);
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--redion-control-height);
    white-space: normal;
    box-shadow: none;
}

.redion-theme .btn-lg {
    --bs-btn-font-size: 1rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
}

.redion-theme .btn:is(:focus, :active) {
    box-shadow: none;
}

.redion-theme .btn-primary {
    --bs-btn-color: var(--redion-white);
    --bs-btn-bg: var(--redion-cta);
    --bs-btn-border-color: var(--redion-cta);
    --bs-btn-hover-color: var(--redion-white);
    --bs-btn-hover-bg: var(--redion-medium-red);
    --bs-btn-hover-border-color: var(--redion-medium-red);
    --bs-btn-active-color: var(--redion-white);
    --bs-btn-active-bg: var(--redion-dark-red);
    --bs-btn-active-border-color: var(--redion-dark-red);
    --bs-btn-disabled-color: var(--redion-white);
    --bs-btn-disabled-bg: var(--redion-medium-red);
    --bs-btn-disabled-border-color: var(--redion-medium-red);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.redion-theme .btn-primary:is(:hover, :focus-visible) {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.redion-theme .btn-primary:is(:active, .active) {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.redion-theme .btn-primary:is(:disabled, .disabled) {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}

.redion-theme .btn-link {
    --bs-btn-active-color: var(--redion-dark-red);
    --bs-btn-disabled-color: var(--redion-dark-blue);
}

.redion-theme .btn-secondary {
    --bs-btn-bg: var(--redion-medium-blue);
    --bs-btn-border-color: var(--redion-medium-blue);
    --bs-btn-hover-bg: var(--redion-dark-blue);
    --bs-btn-hover-border-color: var(--redion-dark-blue);
    --bs-btn-active-bg: var(--redion-dark-blue);
    --bs-btn-active-border-color: var(--redion-dark-blue);
    --bs-btn-disabled-bg: var(--redion-medium-blue);
    --bs-btn-disabled-border-color: var(--redion-medium-blue);
}

.redion-theme .row {
    --bs-gutter-x: 20px;
}

.redion-theme :is(.form-control, .form-select) {
    min-height: var(--redion-control-height);
    border-color: var(--redion-medium-blue);
    border-radius: var(--redion-control-radius);
    color: var(--redion-dark-blue);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: none;
}

.redion-theme :is(.form-control, .form-select):disabled {
    background-color: var(--redion-light-gray);
    border-color: var(--redion-medium-gray);
}

.redion-theme .form-control::placeholder {
    color: var(--redion-dark-blue);
    opacity: 0.7;
}

.redion-theme .form-check-input {
    border-color: var(--redion-medium-blue);
}

.redion-theme .form-check-input:checked {
    background-color: var(--redion-medium-blue);
    border-color: var(--redion-medium-blue);
}

.redion-theme :is(.invalid, .is-invalid) {
    border-color: var(--redion-medium-red);
}

.redion-theme .invalid {
    outline-color: var(--redion-medium-red);
}

.redion-theme :is(.validation-message, .invalid-feedback, .text-danger) {
    color: var(--redion-medium-red) !important;
}

.redion-theme .alert-info {
    --bs-alert-color: var(--redion-dark-blue);
    --bs-alert-bg: var(--redion-light-blue);
    --bs-alert-border-color: var(--redion-medium-blue);
    --bs-alert-link-color: var(--redion-dark-blue);
}

.redion-theme .alert-danger {
    --bs-alert-color: var(--redion-white);
    --bs-alert-bg: var(--redion-medium-red);
    --bs-alert-border-color: var(--redion-medium-red);
    --bs-alert-link-color: var(--redion-white);
}

.redion-theme .alert-danger a {
    color: var(--redion-white);
}

.redion-theme .card {
    border-color: var(--redion-medium-blue);
    border-radius: var(--redion-card-radius);
    background: var(--redion-white);
    overflow: hidden;
    box-shadow: none;
}

.redion-theme .card:has(.nav-link:hover),
.redion-theme .card:has(.nav-link:focus-visible) {
    border-color: var(--redion-medium-red);
    background: var(--redion-canvas-alt);
}

.redion-theme .navbar.bg-light {
    background-color: var(--redion-canvas-alt) !important;
}

.redion-theme .nav-link {
    color: var(--redion-link);
    border-radius: var(--redion-control-radius);
}

.redion-theme :is(.nav-link:hover, .nav-link:focus, .nav-link.active) {
    color: var(--redion-dark-red);
}

.redion-theme .hx-input-date-dropdown-menu {
    --bs-dropdown-border-radius: var(--redion-card-radius);
    --bs-dropdown-link-hover-bg: var(--redion-light-blue);
    --bs-dropdown-link-active-bg: var(--redion-cta);
    --bs-dropdown-color: var(--redion-dark-blue);
    max-width: calc(100vw - 20px);
    box-shadow: none;
}

.redion-theme .hx-calendar-navigation-button {
    min-height: 0;
    border-radius: var(--redion-control-radius);
}

.redion-theme .input-group .btn {
    min-height: 0;
    border-radius: 0;
}

.redion-theme .hx-input-date-icon {
    color: var(--redion-medium-blue);
}

.redion-theme .redion-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
    background-color: currentColor;
    mask: var(--redion-icon-url) center / contain no-repeat;
}

.redion-icon-calendar {
    --redion-icon-url: url("branding/redion/icons/calendar.svg");
}

.redion-icon-x {
    --redion-icon-url: url("branding/redion/icons/x.svg");
}

.redion-theme .brand-row {
    justify-content: flex-start !important;
}

.redion-theme .top-row {
    border-bottom-color: var(--redion-medium-gray);
}

.redion-theme .redion-signoff {
    padding: 24px 10px;
    margin-top: 24px;
    border-top: 1px solid var(--redion-medium-gray);
    color: var(--redion-dark-blue);
}

.redion-theme .redion-signoff p {
    margin-bottom: 4px;
    color: var(--redion-medium-red);
}

.redion-theme #blazor-error-ui {
    background: var(--redion-medium-red);
    color: var(--redion-white);
    padding-right: 3.5rem;
    box-shadow: none;
}

.redion-theme #blazor-error-ui a {
    color: var(--redion-white);
    text-decoration: underline;
}

.redion-theme #blazor-error-ui .reload {
    display: inline-block;
    margin-inline-start: 0.35em;
}

.redion-theme #blazor-error-ui .dismiss {
    width: 44px;
    height: 44px;
    top: 0;
    right: 0;
    border: 0;
    color: inherit;
    background: transparent;
}

.redion-theme #blazor-error-ui :focus-visible {
    outline-color: var(--redion-white);
    outline-offset: -3px;
}

.redion-theme .blazor-error-boundary {
    background-color: var(--redion-medium-red);
}