:root {
    --rr-text-xs: 0.68rem;
    --rr-text-sm: 0.76rem;
    --rr-text-base: 0.875rem;
    --rr-text-lg: 1rem;
    --rr-text-xl: 1.1rem;
    --rr-text-3xl: 1.35rem;
    --rr-page-panel-background: var(--color-surface, #fff);
    --rr-surface-color: var(--color-surface, #fff);
}

html,
body,
.app-shell,
.app-header,
.app-main,
.page-panel,
.page-content {
    background: var(--color-surface, #fff) !important;
    background-image: none !important;
}

body {
    font-size: 0.875rem;
}

.app-shell,
.is-desktop-device .app-shell,
.is-mobile-landscape .app-shell,
.is-mobile-portrait .app-shell {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100vh;
    min-height: 0;
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-top: var(--rr-old-phone-safe-top, env(safe-area-inset-top));
    padding-right: var(--rr-old-phone-safe-right, env(safe-area-inset-right));
    padding-bottom: var(--rr-old-phone-safe-bottom, env(safe-area-inset-bottom));
    padding-left: var(--rr-old-phone-safe-left, env(safe-area-inset-left));
}

.environment-indicator {
    top: constant(safe-area-inset-top);
    left: constant(safe-area-inset-left);
    top: var(--rr-old-phone-safe-top, env(safe-area-inset-top));
    left: var(--rr-old-phone-safe-left, env(safe-area-inset-left));
}

.app-header,
.is-mobile-landscape .app-header,
.is-mobile-portrait .app-header {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: calc(5px * var(--rr-display-scale, 1));
    min-height: var(--rr-space-48) !important;
    padding: calc(3px * var(--rr-display-scale, 1)) calc(5px * var(--rr-display-scale, 1)) calc(3px * var(--rr-display-scale, 1)) var(--rr-space-8) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

.header-navigation-actions,
.is-mobile-device .header-navigation-actions {
    gap: var(--rr-space-2);
}

.header-back-button,
.header-reload-button {
    width: calc(25px * var(--rr-display-scale, 1));
    height: var(--rr-space-36);
    transform: none;
}

.header-back-button svg,
.header-reload-button svg {
    width: calc(21px * var(--rr-display-scale, 1));
    height: calc(21px * var(--rr-display-scale, 1));
}

.is-mobile-device .header-reload-button {
    margin: 0;
}

.care-recipient-picker,
.is-mobile-portrait .care-recipient-picker,
.is-mobile-landscape .care-recipient-picker {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.current-care-recipient,
.is-mobile-landscape .current-care-recipient {
    max-width: 100% !important;
    gap: var(--rr-space-4);
    font-size: 1rem !important;
}

.current-care-recipient img,
.brand img,
.is-mobile-landscape .current-care-recipient img,
.is-mobile-landscape .brand img {
    width: calc(30px * var(--rr-display-scale, 1)) !important;
    height: calc(30px * var(--rr-display-scale, 1)) !important;
    transform: none !important;
}

.current-care-recipient span,
.is-mobile-landscape .current-care-recipient span {
    min-height: calc(30px * var(--rr-display-scale, 1));
}

.current-care-recipient::after {
    border-right-width: 5px;
    border-left-width: 5px;
    border-top-width: 6px;
}

.brand,
.is-desktop-device .brand {
    position: static;
    left: auto;
    margin: 0;
    transform: none;
}

.brand span,
.is-mobile-portrait .brand span {
    display: none !important;
}

.icon-button,
.is-mobile-landscape .icon-button {
    width: calc(34px * var(--rr-display-scale, 1));
    height: calc(34px * var(--rr-display-scale, 1));
    padding: var(--rr-space-6);
    border-radius: var(--rr-corner-radius);
    background: var(--color-surface, #fff);
    color: var(--rr-heading-color, var(--rr-main-color));
}

.menu-toggle-icon,
.is-mobile-landscape .menu-toggle-icon {
    width: var(--rr-space-20);
    height: var(--rr-space-20);
}

.desktop-care-nav,
.is-desktop-device .desktop-care-nav {
    display: none !important;
}

.app-tab-nav,
.is-desktop-device .app-tab-nav,
.is-mobile-landscape .app-tab-nav,
.is-mobile-portrait[data-mobile-navbar-style="rose-river"] .app-tab-nav,
.is-mobile-portrait[data-mobile-navbar-style="liquid-glass"] .app-tab-nav,
.is-mobile-portrait[data-mobile-navbar-style="legacy"] .app-tab-nav,
.is-mobile-portrait[data-mobile-navbar-style="safari-style"] .app-tab-nav,
.is-mobile-portrait[data-mobile-navbar-style="ios-style"] .app-tab-nav {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 22;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: calc(3px * var(--rr-display-scale, 1)) var(--rr-space-2) !important;
    overflow: hidden;
    border: 0 !important;
    border-top: 1px solid var(--color-border-strong) !important;
    border-radius: 0 !important;
    background: var(--color-surface, #fff) !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.app-tab-nav::before {
    display: none !important;
    content: none !important;
}

.app-tab-item,
.is-mobile-portrait .app-tab-item,
.is-mobile-landscape .app-tab-item {
    display: grid;
    width: auto !important;
    min-width: 0;
    min-height: calc(42px * var(--rr-display-scale, 1)) !important;
    padding: var(--rr-space-2) 1px !important;
    border-radius: var(--rr-corner-radius);
    background: var(--color-surface, #fff) !important;
}

.app-tab-item img {
    width: var(--rr-space-20) !important;
    height: var(--rr-space-20) !important;
}

.app-tab-label,
.is-mobile-portrait .app-tab-label {
    font-size: 0.63rem !important;
    line-height: 1 !important;
}

.app-tab-label-full {
    display: none;
}

.app-tab-label-short {
    display: block;
}

.desktop-layout-row,
.is-desktop-device .desktop-layout-row,
.is-mobile-landscape body[data-logged-in="1"] .desktop-layout-row,
.is-mobile-portrait[data-mobile-navbar-style="rose-river"] .desktop-layout-row,
.is-mobile-portrait[data-mobile-navbar-style="liquid-glass"] .desktop-layout-row,
.is-mobile-portrait[data-mobile-navbar-style="legacy"] .desktop-layout-row,
.is-mobile-portrait[data-mobile-navbar-style="safari-style"] .desktop-layout-row,
.is-mobile-portrait[data-mobile-navbar-style="ios-style"] .desktop-layout-row {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.app-main,
.is-desktop-device .app-main,
.is-mobile-landscape .app-main,
.is-mobile-portrait[data-mobile-navbar-style="rose-river"] .app-main,
.is-mobile-portrait[data-mobile-navbar-style="liquid-glass"] .app-main,
.is-mobile-portrait[data-mobile-navbar-style="legacy"] .app-main,
.is-mobile-portrait[data-mobile-navbar-style="safari-style"] .app-main,
.is-mobile-portrait[data-mobile-navbar-style="ios-style"] .app-main {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.page-panel,
.is-desktop-device .page-panel,
.is-mobile-landscape .page-panel,
.is-mobile-portrait .page-panel {
    min-width: 0;
    padding: 0 var(--rr-space-8) var(--rr-space-4) !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

.page-content {
    padding-bottom: var(--rr-space-6);
}

.page-title-row,
.is-mobile-portrait .page-title-row,
.is-mobile-landscape .page-title-row {
    gap: var(--rr-space-4);
    margin-bottom: calc(3px * var(--rr-display-scale, 1));
}

.page-icon,
.is-mobile-portrait .page-icon,
.is-mobile-landscape .page-icon {
    width: calc(38px * var(--rr-display-scale, 1)) !important;
    height: calc(38px * var(--rr-display-scale, 1)) !important;
    margin-left: calc(-4px * var(--rr-display-scale, 1)) !important;
}

h1 {
    font-size: 1.25rem !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    font-size: calc(16px * var(--rr-display-scale, 1));
}

.side-menu {
    top: 50px;
    right: 4px;
    width: max-content;
    max-width: calc(100vw - var(--rr-space-8));
    max-height: calc(100vh - calc(56px * var(--rr-display-scale, 1)));
    border-radius: var(--rr-corner-radius);
    background: var(--color-surface, #fff);
}

html.rr-compact-mobile {
    --rr-text-xs: 0.62rem;
    --rr-text-sm: 0.7rem;
    --rr-text-base: 0.82rem;
    --rr-text-lg: 0.92rem;
    --rr-text-xl: 1.02rem;
    --rr-text-3xl: 1.32rem;
    --rr-line-normal: 1.35;
}

@supports (background: color-mix(in srgb, white, transparent)) {
    @media screen {
        html[data-continuous-background]:not([data-rendering-profile]),
        html[data-continuous-background][data-rendering-profile] body {
            background-color: var(--rr-canvas-color) !important;
            background-image: var(--rr-canvas-image) !important;
            background-position: center !important;
            background-size: 1px 1px, var(--rr-app-background-size) !important;
            background-repeat: repeat, var(--rr-app-background-repeat) !important;
        }
        html[data-continuous-background].rr-ios-standalone .app-header {
            background-color: color-mix(in srgb, var(--rr-status-area-color) 1%, transparent) !important;
        }
        html[data-continuous-background] :is(.app-shell, .app-header, .app-main, .page-panel, .page-content),
        html[data-continuous-background]:not([data-rendering-profile]) body {
            background: transparent !important;
        }
    }
}