.body-color {
    color: var(--body-color);
}

.icon-stroke {
    fill: none;
    stroke: var(--body-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}

.icon-stroke--thin {
    stroke-width: 1.3px;
}

.text-white {
    color: var(--white);
}

.text-orange {
    color: var(--orange);
}

.text-orange-2 {
    color: var(--orange-2);
}

.text-orange-red {
    color: var(--orange-red);
}

.text-red-2 {
    color: var(--red-2);
}

.text-purple {
    color: var(--purple);
}

.text-gray {
    color: var(--gray);
}

.text-gray-10 {
    color: var(--gray-10);
}

.text-gray-2 {
    color: var(--gray-2);
}

.text--sm {
    font-size: 0.875em;
}

.text--md {
    font-size: 1.125em;
}

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * {
    margin-block: 0;
}

.stack > * + * {
    margin-block-start: var(--space-2);
}

.stack--lg > * + * {
    margin-block-start: var(--space-3);
}

.e-container {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
}

.e-btn {
    display: inline-block;
    border: none;
    padding: 1.25rem 1rem;
    margin: 0;
    text-decoration: none;
    background: none;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius);
    text-align: center;
    position: relative;
}

.e-btn:hover {
    color: var(--white);
}

.e-btn--disabled {
    opacity: 0.7;
}

.e-btn:focus {
    outline: 2px solid #93c5fd;
}

.e-btn--gradient {
    background-image: linear-gradient(110deg, #fd371f 0%, #ff844b 100%);
    color: var(--white);
}

.e-btn--gradient-blue {
    background-image: linear-gradient(110deg, #3cd2fc 0%, #6274fb 100%);
    color: var(--white);
}

.e-btn--outline {
    border: 2px solid var(--gray);
}

.e-btn--subdued {
    color: var(--gray);
    border-color: var(--gray-0);
}

.e-btn--subdued:hover {
    color: var(--gray);
}

.e-btn--sm {
    text-transform: uppercase;
    font-size: 0.875rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.btn-plain {
    border: 0;
    background: none;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.dashboard {
    padding: 1.5rem 0.875rem 1rem;
}

.app-nav {
    font-size: 1rem;
    display: flex;
    width: 100%;
    min-height: 5.75rem;
    align-items: center;
    background-color: var(--brand-color);
    padding: 1.4em 1em 0.5em 0.9em;
}

.app-nav > * {
    margin-inline: 0;
}

.app-nav > * + * {
    margin-inline-start: 1.25rem;
}

.app-nav__username {
    color: var(--white);
    font-weight: var(--font-weight-bold);
    font-size: 1.3rem;
    margin-bottom: 0;
    margin-left: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-header {
    --dh-space: 0.6875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-header__back-btn > * {
    margin-inline: 0;
}

.dashboard-header__back-btn > * + * {
    margin-inline-start: 0.6rem;
}

.dashboard-header__h {
    margin-top: 0.1rem;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1rem;
}

.dashboard-header__e-icon {
    margin-inline-start: var(--dh-space);
}

.real-estate-select {
    width: 100%;
    position: relative;
    font-size: 1rem;
    color: var(--white);
}

.real-estate-select__label {
    position: absolute;
    left: 1rem;
    top: 0.7em;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.real-estate-select__arrow {
    position: absolute;
    right: 1.175rem;
    top: 42%;
    z-index: 0;
}

.real-estate-select__el {
    position: relative;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin: 0;
    width: 100%;
    outline: none;
    color: var(--white);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: transparent;
    padding: 1.75rem 2.15rem 1rem 1rem;
    z-index: 10;
    border: none;
    text-overflow: ellipsis;
    overflow-x: hidden;
    letter-spacing: 0.33px;
}

.real-estate-select__el:focus + .real-estate-select__focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 1.25rem;
}

.real-estate-select option {
    color: #000;
}

.avatar {
    flex-shrink: 0;
    position: relative;
    border-radius: 100%;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
}

.avatar__wrapper {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(310deg, #d1d1d1 0%, #d6d6d6 11%, #dbdbdb 22%, #dedede 33%, #e3e3e3 44%, #e6e5e5 56%, #ebebeb 67%, #f0f0f0 78%, #f2f2f2 89%, #f7f7f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8b8b;
    border-radius: 100%;
}

.avatar__wrapper img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.avatar__status {
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    top: 0.3rem;
    right: 0;
    width: 0.45rem;
    height: 0.45rem;
    border: 2px solid var(--body-bg-color);
}

.avatar__status--None {
    display: none;
}

.avatar__status--Inactive {
    background-color: #f15223;
}

.avatar__status--Active {
    background-color: var(--green);
}

.comparison-heading {
    font-size: 0.875rem;
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 0;
    text-align: left;
}

.comparison-heading__reference {
    color: var(--gray);
}

.w-time-picker {
    display: flex;
    justify-content: space-between;
}

.w-heading {
    font-weight: var(--font-weight-bold);
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}

.w-heading > * {
    margin-inline: 0;
}

.w-heading > * + * {
    margin-inline-start: 0.6rem;
}

.w-heading__icon {
    display: flex;
    font-size: 1.3em;
}

.w-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.w-time-period-picker-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.w-time-period-picker-btn > * {
    margin-inline: 0;
}

.w-time-period-picker-btn > * + * {
    margin-inline-start: 0.4rem;
}

.w-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.k-loading-image::before {
    font-size: 2.5em;
    color: var(--gray);
    border-width: 0.2rem;
}

.w-group,
.card-base {
    position: relative;
}

.w-group .k-loading-color,
.card-base .k-loading-color {
    border-radius: 1.25rem;
}

.w-group {
    min-height: 5.75rem;
}

.w-group .k-loading-color {
    opacity: 0;
}

.card-base .k-loading-color {
    opacity: 0.7;
}

.w-table {
    font-size: 0.875rem;
}

.w-table tr {
    border-bottom: 1px solid var(--hr-color);
}

.w-table th {
    padding-bottom: 0.5em;
    font-size: 0.9375rem;
}

.w-table td {
    padding-top: 0.26em;
    padding-bottom: 0.26em;
}

.w-wrapper {
    position: relative;
    border-radius: var(--widget-border-radius);
}

.w-wrapper .w-time-picker {
    margin: var(--space-1);
    margin-bottom: var(--space-0);
}

.w-wrapper:has(.w-time-picker) {
    background-color: #f9f9f9;
}

.w-wrapper--selected {
    box-shadow: rgba(138, 36, 255, 0.35) 0 0 1rem;
    outline: 2px solid rgba(138, 36, 255, 0.35);
}

.animate-fade-in {
    opacity: 0;
    will-change: opacity transform;
    animation: fade_in 0.2s cubic-bezier(0.14, 0.18, 0.16, 1.02) forwards;
}

@keyframes fade_in {
    from {
        opacity: 0.2;
        transform: translateY(0.5rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.w-edited > * {
    display: none;
}

.w-edited .edit-card {
    display: block;
}

.w-collapsed .w-time-picker {
    display: none;
}

.w-collapsed .hide-when-collapsed {
    display: none !important;
}

.edit-card__btns {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-evenly;
    background-color: var(--base-bg-color);
    box-shadow: var(--base-bg-color) 0 0 20px 14px;
}

.edit-card__btns > * {
    margin-inline-start: 0;
}

.edit-card__btns > * + * {
    margin-inline-start: 2.5rem;
}

.w-for-overlay {
    position: relative;
}

.w-for-overlay:has(.w-overlay) {
    min-height: 9rem;
}

.w-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-color);
    border-radius: var(--widget-border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    z-index: 100;
}

.w-overlay__large-icons {
    display: flex;
    align-items: center;
    background: var(--base-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--base-bg-color) 0 0 30px 14px;
    font-size: 1.9rem;
    margin-bottom: 1.25rem;
    margin-top: 0.25rem;
}

.w-overlay__large-icons > * {
    margin-inline-start: 0;
}

.w-overlay__large-icons > * + * {
    margin-inline-start: 2rem;
}

.overlay-active .pagination {
    display: none;
}

[data-theme="dark"] .w-overlay__large-icons {
    background: rgba(var(--overlay-rgb), 1);
    box-shadow: rgba(var(--overlay-rgb), 0.9) 0 0 30px 14px;
}

[data-theme="dark"] .edit-card__btns {
    background-color: rgba(var(--overlay-rgb), 1);
    box-shadow: rgba(var(--overlay-rgb), 0.9) 0 0 20px 14px;
}

[data-theme="dark"] .w-wrapper:has(.w-time-picker) {
    background-color: #12121e;
}

[data-theme="dark"] .w-wrapper--selected {
    box-shadow: rgba(138, 36, 255, 0.8) 0 0 1rem;
    outline: 2px solid rgba(138, 36, 255, 0.5);
}

.card-base {
    background-color: var(--base-bg-color);
    border-radius: var(--widget-border-radius);
    padding: var(--space-1) var(--space-2);
    position: relative;
    box-shadow: rgba(240, 240, 240, 0.4) 0px -2px 1px;
}

.card-title {
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.card-hr {
    border: 0.5px solid var(--hr-color);
    opacity: 1;
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
}

.card-value {
    letter-spacing: 0;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    font-size: 1.125em;
    color: var(--gray);
}

.card-value--sm {
    font-size: 1em;
}

.card-value--lg {
    font-size: 1.75em;
}

.card-value--null {
    color: var(--gray);
}

.card-value--zero {
    color: var(--gray);
}

.card-value--negative {
    color: var(--green);
}

.card-value--positive {
    color: var(--red);
}

.card-value--thinner {
    font-weight: var(--font-weight-normal);
    margin-top: 0.1rem;
    color: var(--gray);
}

.value-triangle {
    font-size: 0.6875em;
    display: inline-flex;
}

.value-triangle__0 {
    font-size: 0.8em;
    margin-right: -0.2em;
}

[data-theme="dark"] .card-base {
    box-shadow: rgba(14, 14, 25, 0.3) 0px -2px 1px;
}

.legend-icon {
    display: flex;
    margin-inline-end: 0.3em;
}

.cons-card {
    font-size: 1rem;
}

.cons-card__header {
    font-size: 1.1em;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.cons-card__icon {
    font-size: 0.9em;
    display: flex;
}

.cons-card__title {
    font-size: 1em;
    margin-inline-start: var(--space-1);
}

.cons-table tr {
    line-height: 1;
}

.cons-table tr:not(:first-child) td {
    padding-top: 0.625rem;
}

.cons-table__title {
    font-size: 0.875em;
    white-space: nowrap;
}

.cons-table__value {
    text-align: right;
    width: 100%;
}

.cons-table__value, .cons-table__unit {
    font-size: 1.375em;
    font-weight: var(--font-weight-bold);
}

.cons-table__unit {
    padding-left: 0.2em;
    text-align: left;
}

.comparison-card {
    line-height: 1.3em;
}

.comparison-card__value {
    margin-top: 0.45em;
    margin-bottom: 0.3em;
}

.energy-type-color--ColdWater {
    color: var(--cold-water);
}

.energy-type-color--WarmWater {
    color: var(--warm-water);
}

.energy-type-color--Heating {
    color: var(--heating);
}

.energy-type-color--HeatingEnergy {
    color: var(--heating);
}

.energy-type-color--Gas {
    color: var(--gas);
}

.energy-type-color--Electricity {
    color: var(--electricity);
}

.energy-type-icon {
    display: flex;
    align-items: center;
    font-size: 1.4em;
}

.energy-type-icon-data {
    display: flex;
    flex-direction: column;
    margin-inline-start: 0.1em;
    font-size: 0.47em;
    font-weight: var(--font-weight-bold);
}

.energy-type-icon-data__top {
    margin-top: -0.75em;
    height: 1em;
}

.energy-type-icon-data__bottom {
    margin-top: 0.5em;
    height: 1em;
    display: flex;
}

.cpw-chart-card__legend {
    display: flex;
    justify-content: space-evenly;
}

.cpw-chart-card__legend-item {
    display: flex;
    align-items: center;
}

.cpw-chart-card .legend-icon {
    font-size: 1rem;
}

.cpw-legend {
    display: flex;
    justify-content: space-evenly;
    font-size: 0.75rem;
}

.cpw-legend__item {
    display: flex;
    align-items: center;
}

.prediction-unavailable {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-inline: 1rem;
}

.prediction-unavailable__icon {
    display: flex;
    font-size: 2.5em;
    color: var(--gray-3);
}

.prediction-unavailable__text {
    font-size: 0.75em;
    text-align: center;
    line-height: normal;
    letter-spacing: normal;
    color: var(--gray-3);
    margin-top: 1em;
    margin-bottom: 0;
}

.header-calculator {
    display: flex;
    justify-content: space-between;
    height: 1.2em;
}

.header-calculator__icon {
    display: flex;
    color: var(--gray);
    font-size: 1.2em;
}

.field-validation-error {
    display: block;
    margin-top: 0.25rem;
    color: #dc2626;
}

.h {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1rem;
}

.h--sm {
    font-size: 0.875rem;
    line-height: 1.05;
}

.mcs-card {
    font-size: 1rem;
}

.mcs-card__table {
    font-size: 0.875em;
    font-weight: var(--font-weight-bold);
    width: 100%;
    margin-right: 1rem;
}

.mcs-card__table tr:not(:last-child) {
    border-bottom: 1px solid var(--hr-darker-color);
}

.mcs-card__table td {
    padding-top: 0.3em;
    padding-bottom: 0.4em;
}

.mcs-card__icon-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.mcs-card__icon-wrapper .energy-type-color--Heating,
.mcs-card__icon-wrapper .energy-type-color--HeatingEnergy,
.mcs-card__icon-wrapper .energy-type-color--Gas {
    margin-left: 0.4rem;
}

.measurement-card {
    font-size: 0.875rem;
}

.measurement-card__header {
    font-size: 1em;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.measurement-card__icon {
    display: flex;
    margin-inline-end: var(--space-1);
}

.measurement-card__export-btn svg {
    font-size: 1.56rem;
    color: #1d6f42;
}

.measurement-table {
    width: 100%;
}

.measurement-table th {
    vertical-align: top;
}

.measurement-table__type {
    text-align: center;
}

.measurement-table .energy-type-icon svg {
    font-size: 1rem;
    margin-inline-end: 0.25rem;
}

.measurement-table svg {
    font-size: 1rem;
}

.measurement-legend {
    display: flex;
    justify-content: center;
}

.measurement-legend > * {
    margin-inline-start: 0;
}

.measurement-legend > * + * {
    margin-inline-start: 1rem;
}

.measurement-legend__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.measurement-legend__item > :first-child {
    margin-inline-start: 0.25rem;
    margin-inline-end: 0.25rem;
}

.statistic-card {
    font-size: 1rem;
}

.statistic-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.85rem;
}

.statistic-legend__item {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: normal;
}

.target-card {
    font-size: 1rem;
}

.target-card__header {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    font-size: 1em;
}

.target-card__header > * {
    margin-inline: 0;
}

.target-card__header > * + * {
    margin-inline-start: 0.5em;
}

.target-card__time-picker {
    display: flex;
    color: var(--gray);
    font-size: var(--font-size--md);
}

.target-card__time-picker .icon-stroke {
    fill: none;
    stroke: var(--gray);
}

.target-card__date-range {
    margin-inline-start: 0.4em;
    margin-top: 0.1rem;
}

.target-card__date {
    color: var(--gray);
    margin-inline-start: 0.4em;
    font-size: 0.875rem;
    line-height: 1.1;
}

.target-card__date--highlight {
    color: var(--body-color);
    font-weight: var(--font-weight-bold);
}

.ranking-bar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.ranking-bar__numbers {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
}

.ranking-bar__container {
    padding: 1rem 0;
}

.ranking-bar__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ranking-bar__bar {
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background-image: linear-gradient(90deg, #4bff60 0%, #f78500 23%, #f78500 76%, #ff0000 100%);
}

.rank-trophy {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    color: var(--gray);
}

.rank-trophy__icon {
    font-size: 1.4em;
    margin-inline-end: 0.4em;
    display: flex;
}

.rank-trophy__current-place {
    font-size: 1.4em;
    line-height: 1;
}

.rank-trophy__last-place {
    line-height: 1;
}

.ranking-legend {
    font-size: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-inline-start: 1rem;
    margin-inline-end: 1rem;
}

.ranking-legend__item {
    font-size: 0.875em;
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.ranking-table {
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-align: center;
    margin-top: 1rem;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
    padding-inline-start: 2em;
    padding-inline-end: 7em;
}

.ranking-table th:nth-child(2),
.ranking-table td:nth-child(2) {
    padding-inline-end: 1em;
}

.ranking-table th:nth-child(3),
.ranking-table td:nth-child(3) {
    padding-inline-end: 1em;
    padding-top: 0;
    padding-bottom: 0;
}

.ranking-table__my-row {
    color: var(--gold);
}

.add-btn {
    color: #adadad;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    display: flex;
    font-size: 1.7rem;
}

.add-btn:hover {
    color: #adadad;
}

.back-btn {
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid rgba(191, 191, 191, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--body-color);
    background: transparent;
}

.back-btn:hover {
    color: var(--body-color);
}

.back-btn--transparent {
    color: var(--base-bg-color);
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
}

.back-btn--transparent:hover {
    color: var(--base-bg-color);
}

.plain-btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.plain-btn:disabled {
    cursor: initial;
    opacity: 0.3;
}

.plain-btn:hover {
    text-decoration: none;
    color: inherit;
}

.logout-btn {
    border: 1px solid var(--body-color);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: var(--body-color);
    text-decoration: none;
}

.logout-btn:hover {
    color: var(--body-color);
}

.rbh {
    display: flex;
    font-size: 1rem;
}

.rbh > * {
    margin-inline: 0;
    width: 100%;
}

.rbh > * + * {
    margin-inline-start: 0.75em;
}

.rbh__label {
    font-size: 0.875em;
    text-align: center;
    cursor: pointer;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.1);
    min-width: 4.625em;
    width: 100%;
}

.rbh__input {
    visibility: hidden;
    height: 0;
    width: 0;
    position: absolute;
}

.rbh__input:checked + label {
    color: var(--base-bg-color);
    background: var(--body-color);
}

.rbv {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.rbv > * {
    margin-top: 0;
}

.rbv > * + * {
    margin-top: 0.875em;
}

.rbv__title {
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.25em;
}

.rbv__label {
    width: 100%;
    cursor: pointer;
    padding: 0.875em 1.25em 0.875em 1.5em;
    border-radius: 0.75em;
    border: 2px solid transparent;
    background-color: var(--base-bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875em;
    line-height: 1;
}

.rbv__label .rbv__checkmark {
    display: none;
}

.rbv__input {
    visibility: hidden;
    height: 0;
    width: 0;
    position: absolute;
}

.rbv__input:checked + label {
    border-color: #4cdf26;
}

.rbv__input:checked + label .rbv__checkmark {
    display: initial;
}

.time-period-picker {
    position: fixed;
    background-color: var(--body-bg-color);
    z-index: 2100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3.75rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.time-period-picker__header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    text-align: center;
    align-items: center;
}

[data-theme="dark"] .rbh__label {
    border-color: rgba(var(--bs-body-color-rgb), 0.25);
}

.w-form {
    position: fixed;
    background-color: var(--body-bg-color);
    z-index: 2000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3.75rem 0.875rem 1rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.w-form__header {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    text-align: center;
    align-items: center;
}

.w-form > * {
    flex-shrink: 0;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    display: flex;
    justify-content: space-evenly;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(3rem + env(safe-area-inset-bottom));
    background-color: var(--base-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 100;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.bottom-nav__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding-left: 4px;
    padding-right: 4px;
    min-width: 3rem;
}

.bottom-nav__icon-btn.active-btn {
    border-bottom: solid;
    border-image-source: linear-gradient(128deg, #1ff7fd 0%, #b33bf6 49%, #ff844b 100%);
    border-image-slice: 1;
    border-width: 3px;
    padding-bottom: 5px;
    margin-top: 8px;
}

.bottom-nav__middle-btn {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background-image: linear-gradient(128deg, #1ff7fd 0%, #b33bf6 49%, #ff844b 100%);
    filter: grayscale(0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    border: none;
}

.bottom-nav__middle-btn.active-btn {
    filter: none;
}

.bottom-nav__middle-btn svg {
    flex-shrink: 0;
}

.bottom-nav__spacer, .bottom-nav__reset-btn {
    text-align: center;
    width: 7rem;
}

.bottom-nav__reset-btn {
    color: var(--gray);
}

.dialog {
    width: 18.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.25rem 1rem;
    border: 0;
    border-radius: 1rem;
    font-size: 1rem;
    text-align: center;
    transition: opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
    background-color: var(--base-bg-color);
    color: var(--body-color);
}

.dialog:not([open]) {
    pointer-events: none;
    opacity: 0;
    display: none;
}

.dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog__text {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.dialog__form {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.dialog__btn {
    padding: 0.85rem;
    font-size: 0.85rem;
}

html:has(.dialog[open]) {
    overflow: hidden;
}

.chart-display {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    min-height: 3rem;
}

.chart-display .legend-icon {
    font-size: 1rem;
}

.add-w-header {
    background: var(--body-bg-color);
    position: sticky;
    top: -3.75rem;
    z-index: 1020;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid #c0c0c0;
}

.e-hr {
    color: #d8d8d8;
    opacity: 1;
}

.e-window {
    border: 0;
    border-radius: var(--widget-border-radius);
}

.e-window .k-window-titlebar {
    border: 0;
    padding-block: 0.4rem;
    padding-inline: 0.25rem;
}

.e-window .k-icon-button {
    color: var(--body-color);
    opacity: 0.8;
}

.e-window .k-icon-button:hover::before {
    opacity: 0;
}

.e-window .k-window-content {
    padding-top: 0.5rem;
    padding-inline: 1.5rem;
}

.menu {
    background-color: var(--base-bg-color);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
}

.menu__item {
    padding: 1.4rem 0.5rem 1.4rem 1.4rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--body-color);
    font-weight: var(--font-weight-bold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    background: inherit;
}

.menu__item:hover {
    color: var(--body-color);
}

.menu > * + * {
    border-top: 1px solid var(--hr-darker-color);
}

.menu-transparent {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hr-darker-color);
}

.menu-transparent__item {
    padding: 1.4rem 0.5rem 1.4rem 1rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--body-color);
    font-weight: var(--font-weight-bold);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-transparent__item:hover {
    color: var(--body-color);
}

.menu-transparent > * + * {
    border-top: 1px solid var(--hr-darker-color);
}

.e-form-group {
    margin-top: 2rem;
}

.e-form-group > label {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    display: block;
}

.readonly-input {
    opacity: 0.65;
    filter: grayscale(0.1);
    pointer-events: none;
}

.form-container {
    max-width: 20.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.form-container__logo {
    width: 100%;
    height: auto;
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
}

.form-container__h {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
}

.form-container__logo + .form-container__header {
    margin-top: 5.5rem;
}

.sw-dots {
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
    min-height: 0.5rem;
}

.sw-dot {
    border: none;
    width: 0.5rem;
    height: 0.5rem;
    background: #e3e3e3;
    border-radius: 50%;
    margin: 0 0.25rem;
    transition: transform 150ms ease-in-out;
}

.sw-dot:focus {
    outline: none;
}

.sw-dot--active {
    background: #ff6200;
}

.ccr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    background-color: black;
}

.ccr__h {
    z-index: 200;
    position: relative;
    color: var(--white);
    width: 100%;
    text-align: center;
    top: 4rem;
    font-size: 1.8rem;
}

.ccr__bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(min(80vw, 70vh));
    aspect-ratio: 1;
    z-index: 150;
    margin: auto;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--white);
    border-radius: 0.25rem;
}

.ccr__stream {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    height: 100%;
    width: 100%;
    z-index: 100;
}

.ccr__btn-close {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    background: none;
    width: 7rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    border: 1px solid var(--white);
    border-radius: 1rem;
    color: var(--white);
    text-decoration: none;
}

.ccr__btn-close:hover {
    color: var(--white);
}

.ccr__result-icon {
    position: fixed;
    left: 0;
    right: 0;
    justify-content: center;
    bottom: 2rem;
    z-index: 200;
    display: none;
}

.ccr--success .ccr__h,
.ccr--success .ccr__btn-close {
    display: none;
}

.ccr--success .ccr__bg {
    box-shadow: 0 0 0 9999px rgba(8, 213, 0, 0.3);
    border: 4px solid #08d500;
}

.ccr--success .ccr__result-icon {
    display: flex;
}

.tip {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 330px;
    border-top-left-radius: var(--widget-border-radius);
    border-top-right-radius: var(--widget-border-radius);
    background: linear-gradient(0deg, var(--body-bg-color) 18%, rgba(0, 0, 0, 0) 70%);
}

.tip + .tip {
    margin-top: 2.5rem;
}

.tip__img {
    width: 100%;
    height: 100%;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -1;
    border-top-left-radius: var(--widget-border-radius);
    border-top-right-radius: var(--widget-border-radius);
    background-color: var(--bs-gray-500);
}

.tip__header {
    padding: 1rem;
}

.tip__h {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
}

.tip__btn {
    background-color: #da2f20;
    color: var(--white);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    padding: 0.6rem 1.25rem;
}

.tip__btn > * {
    margin-right: 0.5rem;
}

.tip__btn:hover {
    color: var(--white);
}

.billing-item {
    background-color: var(--base-bg-color);
    text-decoration: none;
    color: var(--body-color);
    display: flex;
    padding: 1rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-1);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.billing-item:hover {
    color: var(--body-color);
}

.billing-item svg {
    font-size: 1.5rem;
}

.w-guide {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1rem env(safe-area-inset-bottom);
    background-color: var(--base-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 1300;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    flex-direction: column;
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.w-guide__close-btn {
    align-self: flex-end;
    font-size: 1.8rem;
    line-height: 1;
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    margin-left: 1rem;
    color: var(--gray);
}

.w-guide__text {
    margin-top: var(--space-0);
    margin-bottom: var(--space-3);
}

.w-guide__text p:last-of-type {
    margin-bottom: 0;
}

.w-guide__text ul {
    margin-bottom: 0;
}

.w-guide__text li {
    margin-top: var(--space-1);
}

.w-guide__buttons {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 1rem;
}

.w-guide .progress-bar {
    margin-bottom: var(--space-0);
}

.w-guide--centered {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    left: var(--space-1);
    right: var(--space-1);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.progress-bar {
    background-color: var(--gray-0);
    border-radius: 0.375rem;
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    width: 100%;
}

.progress-bar__progress {
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-image: linear-gradient(128deg, #1ff7fd 0%, #b33bf6 49%, #ff844b 100%);
}

.e-file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.e-file-input + label {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    padding: 0.5rem 0;
    border-radius: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    line-height: 1;
}

.e-file-input + label svg {
    font-size: 1.5rem;
}

.pagination {
    display: flex;
}

.culture-select {
    background-color: rgba(0, 0, 0, 0);
    padding: 0.375rem 1.35rem 0.375rem 0.75rem;
    background-position: right 0.25rem center;
}

.culture-select--body {
    color: var(--body-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23040415' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.culture-select--white {
    color: var(--white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .culture-select--body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.legend-table {
    font-size: 0.875rem;
    width: 100%;
    padding-inline: 1rem;
}

.legend-table th {
    font-weight: var(--font-weight-normal);
}

.legend-table tr {
    font-weight: var(--font-weight-bold);
}

.legend-table tr:not(:last-child) {
    border-bottom: 1px solid var(--hr-color);
}

.legend-table td {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.legend-table td:first-child,
.legend-table th:first-child {
    width: 20%;
}

.legend-table th:nth-last-child(-n + 2),
.legend-table td:nth-last-child(-n + 2) {
    text-align: right;
    width: 30%;
}

.mp-link {
    position: relative;
    color: var(--body-color);
}

.mp-link:hover {
    color: var(--body-color);
}

.mp-link__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-color);
    z-index: 10;
}

.mp-link svg {
    z-index: 20;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mp-link__img {
    width: 100%;
    height: 5rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.profile__name {
    font-weight: var(--font-weight-bold);
    font-size: 1.2rem;
    margin-top: 1.5rem;
    text-align: center;
}

.keen-slider:not([data-keen-slider-disabled]) {
    align-content: flex-start;
    display: flex;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
    flex-direction: row-reverse;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
    flex-wrap: wrap;
}

:root {
    --body-color: #040415;
    --bs-body-color-rgb: 4, 4, 21;
    --body-bg-color: #f0f0f0;
    --base-bg-color: #fff;
    --bg-color-1: #dfdfdf;
    --bg-color-2: #d1d1d1;
    --chart-line: #707070;
    --chart-grid-line: #dfdfdf;
    --chart-crosshair-color: #4e4d4e;
    --overlay-color: rgba(255, 255, 255, 0.7);
    --hr-color: #f6f6f6;
    --hr-darker-color: #e5e5e7;
    --brand-color: #ee0000;
    --gray-0: #d9d9d9;
    --gray: #a3a3a3;
    --gray-2: #929292;
    --gray-3: #989898;
    --gray-4: #2e2e2e;
    --gray-5: #d0d0d0;
    --gray-6: #575757;
    --gray-7: #3d3d3d;
    --gray-8: #797979;
    --gray-9: #dbdbdb;
    --gray-10: #d3d3d3;
    --chart-triangle: #e5e7eb;
    --white: #fff;
    --green: #4cdf26;
    --gold: #f19f43;
    --red: #ff2424;
    --red-2: #f6001a;
    --off-color: #d4d4d4;
    --amber-300: #fcd34d;
    --orange: #f7b053;
    --orange-2: #f86200;
    --orange-3: #f2533f;
    --orange-4: #ff6200;
    --orange-red: #f63700;
    --purple: #8a24ff;
    --cold-water: #26b5ff;
    --warm-water: #ff0000;
    --heating: #ff9a24;
    --gas: #ff9a24;
    --electricity: #7000ff;
    --chart-gray: #bfbfbf;
    --chart-gray--category: #bfbfbf;
    --chart-gradient-orange-top: #fd3820;
    --chart-gradient-orange-bottom: #ff834a;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-size--md: 0.875rem;
    --border-radius: 0.75rem;
    --widget-border-radius: 1.25rem;
    --space-0: 0.5rem;
    --space-1: 0.75rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --bottom-nav-height: 3rem;
    --app-max-width: 600px;
}

[data-theme="dark"] {
    --body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-dark-rgb: 255, 255, 255;
    --body-bg-color: #000;
    --base-bg-color: #181829;
    --bg-color-1: #262642;
    --bg-color-2: #37375f;
    --chart-line: #ffffff;
    --chart-grid-line: rgba(255, 255, 255, 0.15);
    --chart-crosshair-color: #e8e8ff;
    --overlay-rgb: 38, 38, 66;
    --overlay-color: rgba(var(--overlay-rgb), 0.7);
    --hr-color: #242432;
    --hr-darker-color: #282847;
    --chart-triangle: #505070;
    --gray-0: #b1b1c5;
    --gray-3: #c4c4c4;
    --gray-4: #e7e7e7;
    --gray-5: #838393;
    --gray-6: #d9d9d9;
    --chart-gray: #9c9caf;
    --chart-gray--category: #9c9caf;
    --off-color: #7a7a7a;
}

html {
    height: 100%;
}

body {
    color: var(--body-color);
    background-color: var(--body-bg-color);
    margin: 0;
    height: 100%;
}

#app-content {
    overflow-x: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1rem + var(--bottom-nav-height));
    max-width: var(--app-max-width);
    margin: 0 auto;
}