: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-2xl: 1.25rem;
    --rr-text-3xl: 1.35rem;
    --rr-page-panel-background: #fff;
    --rr-surface-color: #fff;
}

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

html[data-rendering-mode="old_phone"] body {
    width: min(320px, 100%);
    margin-right: auto;
    margin-left: auto;
}

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: 5px;
    min-height: 48px !important;
    padding: 3px 5px 3px 8px !important;
    border-bottom: 1px solid #d6dee6 !important;
    box-shadow: none !important;
}

.header-navigation-actions,
.is-mobile-device .header-navigation-actions {
    gap: 2px;
}

.header-back-button,
.header-reload-button {
    width: 25px;
    height: 36px;
    transform: none;
}

.header-back-button svg,
.header-reload-button svg {
    width: 21px;
    height: 21px;
}

.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: 4px;
    font-size: 1rem !important;
}

.current-care-recipient img,
.brand img,
.is-mobile-landscape .current-care-recipient img,
.is-mobile-landscape .brand img {
    width: 30px !important;
    height: 30px !important;
    transform: none !important;
}

.current-care-recipient span,
.is-mobile-landscape .current-care-recipient span {
    min-height: 30px;
}

.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,
.account-toggle,
.is-mobile-landscape .icon-button,
.is-mobile-landscape .account-toggle {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 4px;
    background: #fff;
    color: var(--rr-main-color);
}

.menu-toggle-icon,
.is-mobile-landscape .menu-toggle-icon {
    width: 20px;
    height: 20px;
}

.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="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: 3px 2px !important;
    overflow: hidden;
    border: 0 !important;
    border-top: 1px solid #bcc8d3 !important;
    border-radius: 0 !important;
    background: #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: 42px !important;
    padding: 2px 1px !important;
    border-radius: 3px;
    background: #fff !important;
}

.app-tab-item img,
.app-tab-more-icon {
    width: 20px !important;
    height: 20px !important;
}

.app-tab-more-icon span {
    width: 4px;
    height: 4px;
}

.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="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="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 8px 4px !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}

.page-content {
    padding-bottom: 6px;
}

.page-title-row,
.is-mobile-portrait .page-title-row,
.is-mobile-landscape .page-title-row {
    gap: 4px;
    margin-bottom: 3px;
}

.page-icon,
.is-mobile-portrait .page-icon,
.is-mobile-landscape .page-icon {
    width: 38px !important;
    height: 38px !important;
    margin-left: -4px !important;
}

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

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    font-size: 16px;
}

.side-menu {
    top: 50px;
    right: 4px;
    width: calc(100vw - 8px);
    max-height: calc(100vh - 56px);
    border-radius: 4px;
    background: #fff;
}