:root,
:host,
.sl-theme-light {
    --sl-color-primary-100: #62FFB0;
    --sl-color-primary-200: #59FAA0;
    --sl-color-primary-300: #51E391;
    --sl-color-primary-400: #4BCA86;
    --sl-color-primary-500: #43BC78;
    --sl-color-primary-600: #3CAE6A;
    --sl-color-primary-700: #369861;
    --sl-color-primary-800: #318957;
    --sl-color-primary-900: #2C7B4F;

    --sl-color-gray-100: #F9F9F9;
    --sl-color-gray-150: #f3f3f3;
    --sl-color-gray-200: #E6E6E6;
    --sl-color-gray-250: #DFDFDF;
    --sl-color-gray-300: #D7D6D6;
    --sl-color-gray-400: #C8C4BF;
    --sl-color-gray-500: #B0AEAA;
    --sl-color-gray-600: #717171;
    --sl-color-gray-700: #666363;
    --sl-color-gray-800: #515050;
    --sl-color-gray-900: #3A3838;

    --sl-color-anthracite-100: #707B8E;
    --sl-color-anthracite-300: #626C7D;
    --sl-color-anthracite-500: #414651CC;
    --sl-color-anthracite-700: #2E3239;
    --sl-color-anthracite-900: #26282D;

    --sl-color-fibrain-1: #B51E17;
    --sl-color-fibrain-2: #7D1613;

    --sl-color-green-300: #CBD4B7;
    --sl-color-green-500: #C3D891;
    --sl-color-green-700: #B7C595;

    --sl-color-blue-700: #a3cde0;

    --sl-color-orange-300: #FF5D18;
    --sl-color-orange-500: #FF4D14;
    --sl-color-orange-600: #E54512;

    --sl-input-focus-ring-color: hsl(146 47% 50% / 40%);
}

@font-face {
    font-family: Helvetica;
    src: url('./font/HelveticaNowDisplay-Regular.woff2');
}

@font-face {
    font-family: Helvetica;
    font-weight: bold;
    src: url('./font/HelveticaNowDisplay-Bold.woff2');
}

* {
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.notification-form,
.structure-title,
.user-form,
.installation-error {
    color: var(--sl-color-anthracite-700);
}

::selection {
    background: var(--sl-color-gray-300);
    color: var(--sl-color-anthracite-900);
    text-shadow: none;
}

/************************************/
/* SPINNER
/************************************/

.htmx-indicator {
    display: none;
}

.htmx-request .spinner-big,
.htmx-request .spinner-medium,
.htmx-request .spinner-small {
    display: flex;
}

.htmx-request.spinner-big,
.htmx-request.spinner-medium,
.htmx-request.spinner-small {
    display: flex;
}

.spinner-wrapper {
    margin: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.spinner-big {
    font-size: 4rem;
    --track-width: .25rem;
}

.spinner-medium {
    font-size: 2rem;
    --track-width: .20rem;
}

.spinner-small {
    font-size: 1.25rem;
    --track-width: .15rem;
}

.spinner-mini {
    font-size: 1rem;
}

/************************************/
/* END of SPINNER
/************************************/

/************************************/
/* ANIMATIONS
/************************************/

@keyframes blink-1 {
    to {
        visibility: hidden;
    }
}

@keyframes blink-2 {
    50% {
        opacity: 0;
    }
}

@keyframes gradient {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes border-dance {
    0% {
        background-position: 0 0, 300px 116px, 0 150px, 216px 0;
    }
    100% {
        background-position: 300px 0, 0 116px, 0 0, 216px 150px;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2023-9-27 16:8:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    5% {
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    9% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    17% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }
    24% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

/**
 * ----------------------------------------
 * animation pulsate-bck
 * ----------------------------------------
 */
@keyframes pulsate-bck {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.9);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck
 * ----------------------------------------
 */
@keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 1em;
        transform: translateZ(400px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

/************************************/
/* END of ANIMATIONS
/************************************/

body {
    margin: 0;
    background: var(--sl-color-neutral-0);
}

header {
    position: sticky;
    top: 0;
    padding: .5rem;
    display: flex;
    justify-content: center;
    z-index: 10;
    background: var(--sl-color-neutral-0);
}

nav {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

main {
    display: flex;
    justify-content: center;
}

.clickable {
    cursor: pointer;
}

.cmp {
    width: 100%;
    max-width: 1400px;
}

.access-denied {
    width: 100%;
    height: calc(100vh - 64px);
    background: top center / cover no-repeat;
    overflow: hidden;
}

.access-denied sl-icon {
    color: var(--sl-color-orange-500);
}

.access-denied-content {
    padding: 5rem 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 5rem;
    font-weight: 700;
    color: var(--sl-color-primary-500);
    text-shadow: 2px 2px var(--sl-color-neutral-1000);
    white-space: nowrap;
    animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.access-denied-content div:nth-child(1) {
    display: flex;
    align-items: center;
}

.access-denied-content div:nth-child(2) {
    font-size: 2.5rem;
    text-align: center;
    color: var(--sl-color-gray-100);
}

.access-denied-content div:nth-child(3) {
    font-size: 2rem;
    text-align: center;
    color: var(--sl-color-gray-200);
}

.logo-wrapper {
    display: flex;
    gap: .5rem;
    align-items: center;
    white-space: nowrap;
}

.logo-wrapper h1 {
    display: none;
}

.logo {
    height: 3rem;
}

.user-avatar-wrapper {
    display: none;
}

menu {
    display: none;
}

.nav-drawer {
    --size: 75vw;
}

.menu-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav-menu,
.lang-menu {
    padding: 1rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: flex-end;
    list-style: none;
}

.lang-menu {
    padding: 0;
}

.menu-item {
    width: 100%;
    padding: 1rem .75rem;
    display: block;
    border-radius: var(--sl-border-radius-large);
    color: var(--sl-color-anthracite-700);
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--sl-color-primary-500);
    color: var(--sl-color-neutral-0);
}

sl-menu-item:hover::part(base),
sl-menu-item:focus-visible::part(base) {
    background-color: var(--sl-color-primary-500);
}

.user-menu-item {
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--sl-color-anthracite-100);
}

.inline-menu-item {
    color: inherit;
    text-decoration: none;
}

.eco-info-wrapper {
    min-height: 15rem;
    margin: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
}

.eco-info-bg {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.eco-info-left {
    padding: 1.5rem;
    background: var(--sl-color-primary-600);
}

.eco-info-right {
    position: relative;
    padding: 1.5rem;
    background: var(--sl-color-primary-700);
}

.eco-info-right:after {
    content: "eco info";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 900;
    font-size: 5rem;
    text-transform: uppercase;
    line-height: 1;
    color: #38a164;
}

.eco-info-title {
    position: relative;
    color: var(--sl-color-anthracite-900);
    z-index: 1;
}

.eco-info-text {
    position: relative;
    color: var(--sl-color-neutral-0);
    z-index: 1;
}

.eco-info-icon {
    position: relative;
    z-index: 1;
}

svg.eco-info-icon path {
    fill: var(--sl-color-anthracite-700);
}

.eco-desc-icon {
    width: 18rem;
    height: 18rem;
    position: absolute;
    right: 0;
    transform: translate(1rem, -2.5rem);
}

svg.eco-desc-icon path,
svg.eco-structure-icon path {
    fill: var(--sl-color-gray-250);
}

.eco-structure-icon {
    width: 40rem;
    height: 40rem;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(10rem, 6rem);
}

.info-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.installations {
    display: flex;
    flex-direction: column;
}

.installation-wrapper {
    margin: 1rem;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
}

.installation-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.card-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--sl-border-radius-large);
    background: var(--sl-color-gray-150);
}

.card-content {
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: var(--sl-border-radius-large);
    border-bottom-right-radius: var(--sl-border-radius-large);
    background: var(--sl-color-gray-200);
}

.card-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-content sl-badge {
    text-transform: uppercase;
}

.card-row-desc,
.card-row-desc-stats {
    color: var(--sl-color-anthracite-100);
}

.card-row-desc-stats {
    margin: 0 0 2rem 0;
}

.animated-gradient {
    width: 100%;
    height: 2px;
    margin: 2rem 0 1rem 0;
    background: repeating-linear-gradient(to right, var(--sl-color-green-500) 0%, var(--sl-color-blue-700) 50%, var(--sl-color-green-500) 100%);
    background-size: 200% auto;
    background-position: 0 100%;
    animation: gradient 2s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.card-title-wrapper {
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.card-title-wrapper h2 {
    margin: 0;
}

.icon-production,
.icon-production-zero {
    height: 2rem;
    animation: heartbeat 3s ease-in-out infinite both;
}

.icon-production-zero {
    animation: none;
}

.icon-power {
    height: 2rem;
    animation: pulsate-bck 4s ease-in-out infinite both;
}

.icon-today,
.icon-month,
.icon-year {
    height: 2rem;
}

.circle-value-zero {
    color: var(--sl-color-danger-600);
}

.installation-desc {
    width: 100%;
    position: relative;
    max-width: 35rem;
    padding: 1.5rem 1.25rem;
    margin: 2rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--sl-color-gray-200);
    box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
}

.installation-desc *:not(svg) {
    z-index: 1;
}

.installation-desc-row {
    color: var(--sl-color-anthracite-900);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.installation-buttons-row {
    margin: 2rem 0 1rem 0;
    display: flex;
    gap: 1rem;
}

.error-wrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.installation-error {
    line-height: var(--sl-line-height-looser);
}

.installation-error strong {
    color: var(--sl-color-danger-500);
}

.structure-wrapper {
    width: 100%;
    max-width: 35rem;
    padding: 2rem;
    margin: 2rem 0 0 0;
    position: relative;
    background: var(--sl-color-gray-200);
    box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
    border-radius: var(--sl-border-radius-large);
    overflow: hidden;
}

.structure-wrapper *:not(svg) {
    position: inherit;
    z-index: 1;
}

.tree-with-lines {
    --indent-guide-width: 1px;
    --indent-guide-color: var(--sl-color-gray-500);
}

sl-tree-item::part(item--selected) {
    height: 3rem;
    background-color: rgba(65, 70, 81, .15);
    color: var(--sl-color-anthracite-900);
    border-radius: var(--sl-border-radius-large);
}

.skeleton-avatars sl-skeleton {
    display: inline-block;
    width: 100%;
    height: 20rem;
    margin-right: 0.5rem;
    --border-radius: var(--sl-border-radius-medium);
}

.user-wrapper {
    padding: 3rem 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.avatar-label {
    position: relative;
    border-radius: var(--sl-border-radius-circle);
}

.avatar-label *:not(sl-avatar) {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
}

.avatar-label:hover .avatar-icon-wrapper {
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
}

.avatar-label:hover .avatar-icon {
    opacity: 1;
}

.avatar {
    --size: 7rem;
    border-radius: var(--sl-border-radius-circle);
}

sl-avatar.avatar::part(icon) {
    border-radius: var(--sl-border-radius-circle);
}

.avatar-icon-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--sl-border-radius-circle);
    transition: all ease-in-out .3s;
}

.avatar-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--sl-color-neutral-0);
    transition: all ease-in-out .3s;
}

.user-avatar-input {
    display: none;
}

.user-form {
    padding: 3rem 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-form-item {
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.user-form-button {
    width: fit-content;
    margin: 2rem 0 0 0;
}

.map {
    height: 500px;
}

.notifications-wrapper {
    margin: 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.notification-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.notifications-reason-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.notifications-row {
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.measurements-wrapper {
    margin: 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.measurement {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.graph-wrapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.graph {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.graph-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.graph-item-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.icon-with-value {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.icon-value {
    color: var(--sl-color-neutral-600);
}

.value-above {
    position: absolute;
    top: -2rem;
}

.graph-icon {
    width: 4rem;
    height: 4rem;
}

.sun {
    color: var(--sl-color-yellow-400);
    animation: rotate 7s linear infinite;
}

.wire-v-on {
    height: 4.5rem;
    width: 4px;
    background: none, none, linear-gradient(0deg, var(--sl-color-primary-400) 50%, transparent 50%);
    background-repeat: repeat-y;
    background-size: 0 0, 0 0, 4px 15px;
    animation: border-dance 5s infinite linear;
    transform: rotate(180deg);
}

.wire-h-on {
    height: 4px;
    width: 4rem;
    background: linear-gradient(90deg, var(--sl-color-primary-400) 50%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 15px 4px;
    animation: border-dance 7s infinite linear;
}

.wire-v-off {
    height: 4.5rem;
    width: 4px;
    background: none, none, linear-gradient(0deg, var(--sl-color-neutral-500) 50%, transparent 50%);
    background-repeat: repeat-y;
    background-size: 0 0, 0 0, 4px 15px;
    transform: rotate(180deg);
}

.wire-h-off {
    height: 4px;
    width: 4rem;
    background: linear-gradient(90deg, var(--sl-color-neutral-500) 50%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 15px 4px;
}

.wire-transformed {
    transform: rotate(180deg) translateY(-.25rem);
}

.measurements-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.measurements-info h2 {
    margin-bottom: 0;
    white-space: nowrap;
}

.options-buttons-wrapper {
    display: flex;
    gap: 1rem;
}

.charts {
    width: 100%;
    overflow: auto;
}

.chart {
    padding-bottom: 3rem;
}

.chart-settings {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.date-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.date-wrapper input {
    width: 100%;
    padding: .5rem;
    font-size: 1rem;
    border: 1px solid var(--sl-color-neutral-300);
    border-radius: var(--sl-border-radius-large);
}

.chart-settings-buttons-wrapper {
    width: 100%;
    display: flex;
    gap: .5rem;
}

.chart-settings-adds {
    display: none;
}

.apexcharts-toolbar {
    z-index: 0 !important;
}

sl-radio-group::part(form-control-input) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.params-form {
    max-height: 25vh;
    overflow: auto;
}

.hide-submit + sl-button {
    display: none;
}

.history-wrapper {
    margin: 3rem 1rem;
}

.history-content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.charts-wrapper {
    width: 100%;
}

table {
    width: 100%;
    margin: 0 0 2rem 0;
    border-collapse: collapse;
}

thead tr th,
tbody tr td {
    padding: 1rem;
    border-bottom: 1px solid var(--sl-color-gray-200);
    color: var(--sl-color-anthracite-300);
}

thead tr th {
    text-align: left;
    border-bottom: 1px solid var(--sl-color-gray-400);
}

tbody tr:hover {
    background: var(--sl-color-gray-200);
}

.dashboard-main {
    height: 100%;
    background: top center / cover no-repeat;
    position: relative;
}

.carousel {
    width: 100%;
    height: 100%;
    padding-top: 1rem;
}

sl-carousel::part(pagination) {
    padding-bottom: 2rem;
}

.dash-item {
    height: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    overflow: auto;
}

.dash-item * {
    color: var(--sl-color-neutral-0);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.dash-row-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

sl-carousel::part(pagination-item) {
    box-shadow: 1px 1px var(--sl-color-neutral-1000);
}

sl-carousel::part(pagination-item--active) {
    background-color: var(--sl-color-primary-500);
}

.dash-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dash-tile {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    border-radius: var(--sl-border-radius-large);
    background: rgba(21, 21, 21, 0.5);
    backdrop-filter: blur(4px);
}

.fs-exit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--sl-color-neutral-0);
    z-index: 1;
}

.tile-icon {
    margin: 5rem 0 2rem 0;
    height: 10rem;
}

.dash-value-integer {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--sl-color-yellow-300)
}

.dash-value-fraction {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--sl-color-yellow-300)
}

.dash-unit {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--sl-color-neutral-0);
    text-transform: initial;
}

.dash-title {
    font-size: 1.3rem;
    text-align: center;
}

.dash-title + div {
    text-align: center;
}

.dash-tile-desc {
    color: var(--sl-color-gray-500);
}

.battery-pulse {
    animation: blink-1 2s steps(5, start) infinite;
}

.battery-pulse-2 {
    animation: blink-2 1.5s step-start 0s infinite;
}

.battery-pulse-3 {
    animation: blink-2 1s step-start 0s infinite;
}

.dashboard-balancing {
    padding: 1rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.balancing-points-wrapper {
    margin: 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.balancing-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.balancing-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.balancing-tile {
    height: initial;
}

.balancing-value-integer {
    font-size: 5rem;
}

.balancing-value-fraction {
    font-size: 4rem;
}

.balancing-installation {
    margin: 1rem 0;
    background: rgba(0, 89, 40, .4);
}

.balancing-item,
.balancing-item-empty {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--sl-color-gray-200);
    border-radius: var(--sl-border-radius-large);
}

.balancing-item-empty {
    background: none;
    border: 1px solid var(--sl-color-gray-200);
}

.balancing-item:hover,
.balancing-item:hover *,
.balancing-item-empty:hover,
.balancing-item-empty:hover * {
    background: var(--sl-color-primary-500);
    color: var(--sl-color-neutral-0);
}

.bolded {
    color: var(--sl-color-gray-600)
}

.balancing-add-new {
    width: 100%;
    min-height: calc(2rem * 2 + .67em * 2 + 2em + 1.5rem + 2rem + 3rem + 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.balancing-add-new-button {
    font-size: 3rem;
    border: 1px solid var(--sl-color-gray-300);
    border-radius: var(--sl-border-radius-medium);
}

.balancing-add-new-button:hover {
    border-color: transparent;
}

sl-icon-button.balancing-add-new-button:hover::part(base) {
    background-color: var(--sl-color-primary-500);
    color: var(--sl-color-neutral-0);
}

.balancing-checkbox {
    padding: .5rem 0;
}

.balancing-unit {
    font-size: 5rem;
}

.dash-overall-wrapper {
    text-align: center;
}

/************************************/
/* MEDIA QUERIES
/************************************/
@media all and (min-width: 576px) {
    .nav-drawer {
        --size: 50vw;
    }

    .date-wrapper {
        flex-wrap: initial;
    }

    .logo-wrapper h1 {
        display: initial;
    }

    .access-denied {
        height: calc(100vh - 84.81px);
    }
}

@media all and (min-width: 768px) {
    form.date-wrapper {
        margin: 0;
    }

    .access-denied-content {
        font-size: 10rem;
    }

    .access-denied-content div:nth-child(2) {
        font-size: 5rem;
    }

    .balancing-wrapper {
        width: 100%;
        height: initial;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: center;
    }

    .balancing-installation {
        margin: initial;
    }

    .balancing-tile {
        width: initial;
    }

    .balancing-tile:first-child {
        width: 100%;
    }
}

@media all and (min-width: 944px) {
    .menu-button {
        display: none;
    }

    .structure-wrapper {
        margin-right: initial;
    }

    .installation-desc {
        padding: 2rem;
        margin: 0;
    }

    .notifications-row {
        flex-direction: row;
        align-items: center;
    }

    .user-menu-item {
        display: none;
    }

    .measurement,
    .graph-wrapper,
    .charts {
        display: initial;
    }

    .graph-wrapper {
        width: 40%;
        position: sticky;
        top: 7rem;
        float: left;
    }

    .charts {
        width: 60%;
        float: left;
    }

    .eco-info-right:after {
        font-size: 7.5rem;
    }

    .eco-info-left,
    .eco-info-right {
        width: 50%;
    }

    .eco-info-wrapper,
    .installation-content {
        flex-direction: row;
    }

    .hide-inline {
        display: none;
    }

    .user-avatar-wrapper {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .history-entries-wrapper {
        width: 100%;
    }

    .history-content {
        flex-direction: row;
    }

    .dash-item {
        padding: 3rem;
    }

    .dash-row {
        height: 100%;
        flex-direction: row;
    }

    .balancing-form {
        width: 50%;
    }

    .balancing-value-integer,
    .balancing-unit {
        font-size: 8rem;
    }

    .balancing-value-fraction {
        font-size: 7rem;
    }

    .balancing-installation {
        padding: 3rem;
    }

    .balancing-list {
        grid-template-columns: 1fr 1fr;
    }

    .balancing-points-wrapper {
        flex-direction: row;
        gap: 3rem;
    }
}

@media all and (min-width: 1200px) {
    .inline-menu-wrapper {
        display: flex;
        gap: 1rem;
    }

    menu {
        display: flex;
        list-style: none;
        white-space: nowrap;
    }
}

@media all and (min-width: 1296px) {
    .installation-content {
        justify-content: space-between;
    }

    .installation-desc {
        width: 20rem;
    }

    .eco-desc-icon {
        transform: translate(2rem, -2.5rem);
    }

    .chart-settings {
        flex-wrap: initial;
        justify-content: space-between;
    }

    .date-wrapper,
    .chart-settings-buttons-wrapper {
        width: initial;
    }

    .settings-button {
        width: initial;
    }

    .balancing-value-integer,
    .balancing-unit {
        font-size: 12rem;
    }

    .balancing-value-fraction {
        font-size: 10rem;
    }

    .balancing-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media all and (min-width: 2100px) {
    .dash-item * {
        font-size: 1.5rem;
    }

    .dash-value-integer {
        font-size: 4rem;
    }

    .dash-value-fraction {
        font-size: 3rem;
    }

    .dash-title {
        font-size: 2rem;
    }

    .dash-unit {
        font-size: 4rem;
    }

    .balancing-value-integer,
    .balancing-unit {
        font-size: 15rem;
    }

    .balancing-value-fraction {
        font-size: 13rem;
    }
}

/************************************/
/* END of MEDIA QUERIES
/************************************/