/* Aria Sustainability brand layer (Brand style guide, March 2023).
 *
 * Loaded after every other stylesheet. The guide in short:
 *   - Typeface: Work Sans. Extra Light for headlines, Light/Regular for body,
 *     Medium to Bold for emphasis. Never Thin or Black.
 *   - Colour: predominantly black and white, with 60/40/20 % greys.
 *     Highlights: Aria Green (Land), Aria Yellow (Sun), Aria Blue (Air).
 *   - Gradient: always Green > Yellow > Blue, used sparingly, never as a
 *     solid background.
 *   - Iconography: thin lines, square edges. Buttons: outlined, square.
 *
 * The guide is minimal and light (thin lines, Light weights, lots of
 * white), so components use hairline borders, light greys and a small
 * 4px radius rather than hard black frames; buttons stay almost square.
 *
 * Deliberate departures, for legibility: text on a white background never
 * uses green or yellow (2.3:1 and 1.4:1 contrast), so green outline buttons
 * keep black text; error states keep a red, which the guide does not cover.
 */

@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/worksans/WorkSans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/worksans/WorkSans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Work Sans";
    font-style: italic;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/worksans/WorkSans-Italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Work Sans";
    font-style: italic;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/worksans/WorkSans-Italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --aria-black: #000000;
    --aria-white: #ffffff;
    --aria-grey-60: #666666;
    --aria-grey-40: #999999;
    --aria-grey-20: #cccccc;
    /* 20 % grey at low opacity: hover rows, highlighted rows, quiet panels */
    --aria-tint: #f5f5f5;
    /* Hairlines: card, input and table borders */
    --aria-line: #e3e3e3;
    --aria-radius: 4px;
    --aria-green: #80bc00;
    --aria-yellow: #ffd100;
    --aria-blue: #1199d6;
    --aria-gradient: linear-gradient(90deg, var(--aria-green) 0%, var(--aria-yellow) 50%, var(--aria-blue) 100%);
    --aria-gradient-vertical: linear-gradient(180deg, var(--aria-green) 0%, var(--aria-yellow) 50%, var(--aria-blue) 100%);
    --aria-danger: #c62828;
    --aria-font: "Work Sans", Arial, sans-serif;
}

/* Typography
   ========================================================================== */

html body,
.skin-ARIA,
.skin-ARIA button,
.skin-ARIA input,
.skin-ARIA select,
.skin-ARIA textarea,
.skin-ARIA .tooltip,
.skin-ARIA .popover {
    font-family: var(--aria-font) !important;
}

.skin-ARIA {
    color: var(--aria-black);
    font-weight: 400;
    background: var(--aria-white);
}

.skin-ARIA p,
.skin-ARIA label,
.skin-ARIA span,
.skin-ARIA .color-text {
    color: inherit;
}

.skin-ARIA h1,
.skin-ARIA h2,
.skin-ARIA h3,
.skin-ARIA h4,
.skin-ARIA h5,
.skin-ARIA h6,
.skin-ARIA .h1,
.skin-ARIA .h2,
.skin-ARIA .h3,
.skin-ARIA .h4,
.skin-ARIA .h5,
.skin-ARIA .h6 {
    color: var(--aria-black);
    font-weight: 400;
    letter-spacing: 0;
}

.skin-ARIA strong,
.skin-ARIA b,
.skin-ARIA th {
    font-weight: 600;
}

.skin-ARIA .text-muted,
.skin-ARIA small.text-muted {
    color: var(--aria-grey-60) !important;
}

/* Page title: Extra Light headline, as in the guide's headlines. */
.skin-ARIA .subheader {
    margin-bottom: 1.5rem !important;
}

.skin-ARIA .subheader .subtitle,
.skin-ARIA h1.subtitle {
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.2;
    color: var(--aria-black);
}

.skin-ARIA .subheader .subtitle small {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--aria-grey-60);
    margin-top: 0.5rem;
}

.skin-ARIA .subheader-icon {
    color: var(--aria-black) !important;
    font-weight: 300;
    margin-right: 0.5rem;
}

/* Card and section titles */
.skin-ARIA .card h2,
.skin-ARIA .card h3,
.skin-ARIA .card h4,
.skin-ARIA .card h5,
.skin-ARIA .card .h5 {
    font-weight: 400;
}

/* Links: black text with a green underline, so they read as links without
   putting green text on white. */
.skin-ARIA a,
.skin-ARIA .nav-link {
    color: var(--aria-black) !important;
}

.skin-ARIA main p a:not(.btn),
.skin-ARIA main li a:not(.btn):not(.page-link),
.skin-ARIA main td a:not(.btn),
.skin-ARIA main small a:not(.btn),
.skin-ARIA main .alert a:not(.btn),
.skin-ARIA main .breadcrumb a {
    text-decoration: underline !important;
    text-decoration-color: var(--aria-green) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
}

.skin-ARIA main a:not(.btn):hover {
    color: var(--aria-blue) !important;
}

.skin-ARIA main th a,
.skin-ARIA a:has(.card-home-item) {
    text-decoration: none !important;
}

/* Inside tables almost every figure can be a link; a quieter underline
   keeps the rows readable. */
.skin-ARIA main td a:not(.btn) {
    text-decoration-color: var(--aria-grey-40) !important;
    text-decoration-thickness: 1px !important;
}

.skin-ARIA main td a:not(.btn):hover {
    text-decoration-color: var(--aria-blue) !important;
}

/* While a filter or form updates the page content through htmx. */
.skin-ARIA #js-page-content {
    transition: opacity 0.15s ease;
}

.skin-ARIA #js-page-content.htmx-request {
    opacity: 0.55;
    pointer-events: none;
}

/* A bar running across the top of the window, so a filter change shows it
   is working instead of looking frozen. */
.skin-ARIA #js-page-content.htmx-request::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    background: var(--aria-gradient);
    background-size: 200% 100%;
    animation: aria-loading-bar 1s linear infinite;
}

@keyframes aria-loading-bar {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}

/* Dashboard blocks: each comes on its own after the headline figures; until
   then its space is held with a soft pulse so the page doesn't jump when it
   arrives. */
.skin-ARIA .aria-dashboard-block.is-loading {
    margin-bottom: 1.5rem;
    background: var(--aria-tint);
    border-radius: var(--aria-radius);
    animation: aria-pulse 1.2s ease-in-out infinite;
}

/* An ECharts chart fills the sized box around it. */
.skin-ARIA .aria-chart {
    position: absolute;
    inset: 0;
}

@keyframes aria-pulse {
    50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .skin-ARIA #js-page-content.htmx-request::before,
    .skin-ARIA .aria-dashboard-block.is-loading {
        animation: none;
    }
}

/* Layout: header, sidebar, footer
   ========================================================================== */

.skin-ARIA .page-content-wrapper,
.skin-ARIA .page-content,
.skin-ARIA main.bg-white {
    background: var(--aria-white) !important;
}

/* White header with the logo, as on Aria's website; the gradient appears
   once, as a thin line under it. */
.skin-ARIA .navbar {
    background: var(--aria-white) !important;
    box-shadow: none !important;
    border-bottom: 0;
}

.skin-ARIA .navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--aria-gradient);
}

.skin-ARIA .header-icon i,
.skin-ARIA .navbar .text-primary {
    color: var(--aria-black) !important;
    font-weight: 300;
}

.skin-ARIA .navbar .dropdown-header {
    background: var(--aria-black) !important;
}

.skin-ARIA .navbar .drop-user button.text-success {
    color: var(--aria-black) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--aria-green) !important;
    text-underline-offset: 3px;
}

/* Sidebar: black, white text, thin icons; the active item carries the
   vertical gradient as a marker. */
.skin-ARIA .page-sidebar {
    background: var(--aria-black) !important;
}

.skin-ARIA .page-sidebar .page-logo {
    background: var(--aria-black) !important;
}

.skin-ARIA .page-sidebar .nav-menu {
    padding: 1rem 0 !important;
}

.skin-ARIA .page-sidebar .nav-menu li {
    background: transparent !important;
    margin-bottom: 0.25rem !important;
    box-shadow: none !important;
}

/* Section titles grouping the menu: Data, Results, PowerPoint, Administration. */
.skin-ARIA .page-sidebar .nav-menu li.nav-title {
    padding: 1.25rem 1.5rem 0.4rem !important;
    margin: 0 !important;
    color: var(--aria-grey-40) !important;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skin-ARIA .page-sidebar .nav-menu li > a {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.skin-ARIA .page-sidebar .nav-menu li a i,
.skin-ARIA .page-sidebar .nav-menu li a span {
    color: var(--aria-white) !important;
    font-size: 0.95rem;
    font-weight: 300;
}

.skin-ARIA .page-sidebar .nav-menu li a i {
    width: 1.5rem;
    font-size: 1.1rem;
    font-weight: 300;
    text-align: center;
}

.skin-ARIA .page-sidebar .nav-menu li a span {
    margin-left: 0.75rem;
}

.skin-ARIA .page-sidebar .nav-menu li a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.skin-ARIA .page-sidebar .nav-menu li a:hover i,
.skin-ARIA .page-sidebar .nav-menu li a:hover span {
    color: var(--aria-white) !important;
}

.skin-ARIA .page-sidebar .nav-menu li.active > a {
    position: relative;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.skin-ARIA .page-sidebar .nav-menu li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--aria-gradient-vertical);
}

.skin-ARIA .page-sidebar .nav-menu li.active > a span {
    font-weight: 500;
}

.skin-ARIA .page-footer,
.skin-ARIA footer.bg-primary-700 {
    background: var(--aria-black) !important;
}

.skin-ARIA .page-footer span {
    color: var(--aria-white) !important;
    font-weight: 300;
    font-size: 0.8rem;
}

/* Breadcrumb */
.skin-ARIA .page-breadcrumb {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--aria-grey-60);
}

.skin-ARIA .page-breadcrumb .breadcrumb-item.active {
    color: var(--aria-grey-60);
}

/* Cards and panels: square, hairline border, no shadow
   ========================================================================== */

.skin-ARIA .card,
.skin-ARIA .panel {
    border: 1px solid var(--aria-line) !important;
    border-radius: var(--aria-radius) !important;
    box-shadow: none !important;
}

/* The highlighted card (e.g. the KPI on the Scope 2 basis in use) keeps the
   hairline and gets a green top rule. */
.skin-ARIA .card.border-success {
    border-color: var(--aria-line) !important;
    border-top: 2px solid var(--aria-green) !important;
}

.skin-ARIA .card.shadow,
.skin-ARIA .shadow,
.skin-ARIA .shadow-sm,
.skin-ARIA .shadow-lg {
    box-shadow: none !important;
}

.skin-ARIA .rounded,
.skin-ARIA .rounded-plus,
.skin-ARIA .rounded-top {
    border-radius: var(--aria-radius) !important;
}

/* Headline figures: large Extra Light numerals, as the guide's
   "Statistics or data". */
.skin-ARIA .aria-kpi-value,
.skin-ARIA #emissions-kpis .h3,
.skin-ARIA #energy-kpis .h4 {
    font-size: clamp(1.35rem, 1.75vw, 2.25rem);
    white-space: nowrap;
    font-weight: 200;
    line-height: 1.15;
    color: var(--aria-black);
    font-variant-numeric: tabular-nums;
}

/* Dashboard: a bar of links to its parts, kept in view while scrolling. */
.skin-ARIA .aria-section-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    padding: 0.6rem 0;
    background: var(--aria-white);
    border-bottom: 1px solid var(--aria-line);
    font-size: 0.8rem;
}

.skin-ARIA .aria-section-nav a {
    color: var(--aria-black) !important;
    text-decoration: none !important;
}

.skin-ARIA .aria-section-nav a:hover {
    text-decoration: underline !important;
}

/* A part reached from that bar is not hidden under it. */
.skin-ARIA .aria-dashboard-section {
    scroll-margin-top: 3.5rem;
}

.skin-ARIA .aria-kpi-label {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--aria-grey-60);
}

/* Buttons: square and outlined (guide p. 12); the primary action is filled
   black so it still stands out.
   ========================================================================== */

.skin-ARIA .btn {
    border-radius: 2px !important;
    border-width: 1px !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Buttons are 100 px wide by default (app.css); a longer label opts out. */
.skin-ARIA .btn.btn-auto {
    width: auto !important;
}

.skin-ARIA .btn-primary,
.skin-ARIA .btn-dark {
    background: var(--aria-black) !important;
    border-color: var(--aria-black) !important;
    color: var(--aria-white) !important;
}

.skin-ARIA .btn-primary span {
    color: var(--aria-white) !important;
}

.skin-ARIA .btn-primary:hover,
.skin-ARIA .btn-dark:hover {
    background: var(--aria-grey-60) !important;
    border-color: var(--aria-grey-60) !important;
}

.skin-ARIA .btn-secondary,
.skin-ARIA .btn-default,
.skin-ARIA .btn-light,
.skin-ARIA .btn-outline-primary,
.skin-ARIA .btn-outline-secondary,
.skin-ARIA .btn-outline-dark,
.skin-ARIA .btn-outline-default,
.skin-ARIA .btn-outline-info {
    background: transparent !important;
    border-color: var(--aria-black) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-secondary span {
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-secondary:hover,
.skin-ARIA .btn-default:hover,
.skin-ARIA .btn-light:hover,
.skin-ARIA .btn-outline-primary:hover,
.skin-ARIA .btn-outline-secondary:hover,
.skin-ARIA .btn-outline-dark:hover,
.skin-ARIA .btn-outline-default:hover,
.skin-ARIA .btn-outline-info:hover,
.skin-ARIA .btn[class*="btn-outline-"].active {
    background: var(--aria-black) !important;
    border-color: var(--aria-black) !important;
    color: var(--aria-white) !important;
}

.skin-ARIA .btn-secondary:hover span {
    color: var(--aria-white) !important;
}

/* Green outline: the guide's second button style, with black text. */
.skin-ARIA .btn-success,
.skin-ARIA .btn-outline-success,
.skin-ARIA .btn-info {
    background: transparent !important;
    border-color: var(--aria-green) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-success:hover,
.skin-ARIA .btn-outline-success:hover,
.skin-ARIA .btn-info:hover {
    background: var(--aria-green) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-warning,
.skin-ARIA .btn-outline-warning {
    background: transparent !important;
    border-color: var(--aria-yellow) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-warning:hover,
.skin-ARIA .btn-outline-warning:hover {
    background: var(--aria-yellow) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .btn-danger,
.skin-ARIA .btn-outline-danger {
    background: transparent !important;
    border-color: var(--aria-danger) !important;
    color: var(--aria-danger) !important;
}

.skin-ARIA .btn-danger:hover,
.skin-ARIA .btn-outline-danger:hover {
    background: var(--aria-danger) !important;
    color: var(--aria-white) !important;
}

.skin-ARIA .btn:disabled,
.skin-ARIA .btn.disabled {
    opacity: 0.4;
}

.skin-ARIA .btn:focus-visible {
    outline: 2px solid var(--aria-blue) !important;
    outline-offset: 2px;
}

/* Row actions inside tables (e.g. delete a row): quiet until hovered. */
.skin-ARIA td .btn-sm.btn-outline-danger,
.skin-ARIA td .btn-sm.btn-danger {
    border-color: transparent !important;
    color: var(--aria-grey-60) !important;
    background: transparent !important;
}

.skin-ARIA td .btn-sm.btn-outline-danger:hover,
.skin-ARIA td .btn-sm.btn-danger:hover {
    color: var(--aria-danger) !important;
    background: rgba(198, 40, 40, 0.08) !important;
}

/* Forms
   ========================================================================== */

.skin-ARIA .form-control,
.skin-ARIA .custom-select,
.skin-ARIA .custom-file-label,
.skin-ARIA .input-group-text,
.skin-ARIA .select2-container--default .select2-selection--single,
.skin-ARIA .select2-container--default .select2-selection--multiple {
    border-radius: var(--aria-radius) !important;
    border-color: var(--aria-grey-20);
    color: var(--aria-black);
    font-weight: 400;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.skin-ARIA .form-control:focus,
.skin-ARIA .custom-select:focus,
.skin-ARIA .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--aria-blue) !important;
    box-shadow: 0 0 0 3px rgba(17, 153, 214, 0.15) !important;
}

.skin-ARIA .form-control:disabled,
.skin-ARIA .custom-select:disabled {
    background-color: var(--aria-tint);
    color: var(--aria-grey-60);
}

.skin-ARIA label,
.skin-ARIA .form-label {
    font-weight: 400;
    color: var(--aria-black);
}

.skin-ARIA .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--aria-black) !important;
    border-color: var(--aria-black) !important;
}

.skin-ARIA fieldset {
    background: var(--aria-white);
    border: 1px solid var(--aria-line) !important;
    border-radius: var(--aria-radius);
}

.skin-ARIA legend {
    background: var(--aria-white);
    border: 0 !important;
    font-weight: 500;
}

/* Tables
   ========================================================================== */

.skin-ARIA table {
    color: var(--aria-black);
    font-variant-numeric: tabular-nums;
}

.skin-ARIA .table thead th,
.skin-ARIA .table-striped th,
.skin-ARIA table.dataTable thead th {
    background: var(--aria-white) !important;
    color: var(--aria-black) !important;
    font-weight: 500;
    border-top: 0 !important;
    border-bottom: 1px solid var(--aria-black) !important;
}

.skin-ARIA .table td,
.skin-ARIA .table th {
    border-color: var(--aria-line);
}

/* Compact tables (e.g. the rows beside the guided entry form): Work Sans is
   wider than the old typeface, so a step down keeps them within the column. */
.skin-ARIA .table-sm {
    font-size: 12px !important;
}

.skin-ARIA .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--aria-tint);
}

.skin-ARIA .table-hover tbody tr:hover {
    background-color: var(--aria-tint);
}

.skin-ARIA .table-active,
.skin-ARIA .table-active > td,
.skin-ARIA .table-active > th,
.skin-ARIA tr.table-secondary > td {
    background-color: var(--aria-tint) !important;
    font-weight: 500;
}

.skin-ARIA table .text-info {
    color: var(--aria-black) !important;
}

/* Pagination */
.skin-ARIA .pagination .page-link {
    border-radius: 2px !important;
    color: var(--aria-black) !important;
    border-color: var(--aria-grey-20);
}

.skin-ARIA .pagination .page-item.active .page-link {
    background-color: var(--aria-black) !important;
    border-color: var(--aria-black) !important;
    color: var(--aria-white) !important;
}

.skin-ARIA .pagination .page-item:first-child:not(.active) .page-link,
.skin-ARIA .pagination .page-item:last-child:not(.active) .page-link,
.skin-ARIA .pagination .page-item.disabled .page-link {
    background: var(--aria-white) !important;
}

.skin-ARIA .pagination i {
    color: var(--aria-black) !important;
}

/* Status: badges and alerts. Fills use black text for contrast.
   ========================================================================== */

.skin-ARIA .badge {
    border-radius: 2px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.3em 0.55em;
}

.skin-ARIA .badge-success,
.skin-ARIA .badge-primary,
.skin-ARIA .badge-info {
    background: rgba(128, 188, 0, 0.22) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .badge-warning {
    background: rgba(255, 209, 0, 0.35) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .badge-secondary,
.skin-ARIA .badge-light {
    background: var(--aria-tint) !important;
    color: var(--aria-black) !important;
}

.skin-ARIA .badge-danger {
    background: rgba(198, 40, 40, 0.1) !important;
    color: var(--aria-danger) !important;
}

.skin-ARIA .alert {
    border-radius: var(--aria-radius) !important;
    border: 0;
    border-left: 3px solid var(--aria-grey-40);
    background: var(--aria-tint);
    color: var(--aria-black);
    font-weight: 400;
}

.skin-ARIA .alert-success {
    border-left-color: var(--aria-green);
}

.skin-ARIA .alert-warning {
    border-left-color: var(--aria-yellow);
}

.skin-ARIA .alert-info,
.skin-ARIA .alert-primary {
    border-left-color: var(--aria-blue);
}

.skin-ARIA .alert-danger,
.skin-ARIA .alert-error {
    border-left-color: var(--aria-danger);
}

.skin-ARIA .text-success {
    color: var(--aria-black) !important;
}

.skin-ARIA .text-danger,
.skin-ARIA .invalid-feedback {
    color: var(--aria-danger) !important;
}

/* Toasts */
.skin-ARIA .toast.bg-info,
.skin-ARIA .toast {
    background: var(--aria-black) !important;
    color: var(--aria-white) !important;
    border-left: 3px solid var(--aria-green);
    border-radius: var(--aria-radius);
}

/* Modals and dropdowns */
.skin-ARIA .modal-content,
.skin-ARIA .dropdown-menu {
    border-radius: var(--aria-radius) !important;
    border: 1px solid var(--aria-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.skin-ARIA .modal-header {
    border-bottom: 1px solid var(--aria-line);
}

.skin-ARIA .modal-title,
.skin-ARIA .modal-title.text-info {
    color: var(--aria-black) !important;
    font-weight: 300 !important;
    font-size: 1.5rem;
}

/* Home cards and icon tiles */
.skin-ARIA .card-home-item {
    border: 1px solid transparent;
}

.skin-ARIA .card-home-item:hover {
    border: 1px solid var(--aria-line);
    border-radius: var(--aria-radius);
    background: var(--aria-tint) !important;
}

.skin-ARIA .card-home-item h3 {
    font-weight: 300;
}

/* Home: the four steps of the work, numbered. */
.skin-ARIA .home-step {
    position: relative;
    border: 1px solid var(--aria-line);
    border-radius: var(--aria-radius);
    color: var(--aria-black);
}

.skin-ARIA .home-step p {
    color: var(--aria-grey-60);
    font-size: 0.85rem;
}

.skin-ARIA .home-step-icon {
    font-size: 1.75rem;
}

.skin-ARIA .home-step-number {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    color: var(--aria-grey-40);
    font-size: 1.5rem;
    font-weight: 300;
}

.skin-ARIA .card-home-item .text-info,
.skin-ARIA .text-info {
    color: var(--aria-blue) !important;
}

/* Sign-in page */
.skin-ARIA .auth-section h1.text-section {
    font-size: 2.5rem !important;
    font-weight: 200 !important;
    line-height: 1.2;
}

.skin-ARIA .auth-section h1 small {
    font-weight: 300;
    color: var(--aria-grey-60);
    opacity: 1 !important;
}

.skin-ARIA .auth-section .card {
    background: var(--aria-white) !important;
}

.skin-ARIA .auth-section .card h2 {
    font-weight: 300;
    color: var(--aria-black) !important;
}

.skin-ARIA main.bg-faded {
    background: var(--aria-white) !important;
}

/* A job's window on a phone: its fixed label widths and the tabs' fixed
   height are for a desktop; let them follow the content. */
@media (max-width: 767.98px) {
    .skin-ARIA #modal-job-details .modal-body [style*="width"] {
        width: auto !important;
    }

    .skin-ARIA #modal-job-details .tab-content,
    .skin-ARIA #modal-job-details .card-overflow {
        height: auto !important;
    }

    .skin-ARIA #modal-job-details .nav-tabs .nav-link {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.6rem;
    }
}