body {
    display: grid;
    grid-template: auto 1fr auto / 150px 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "sidebar header"
        "sidebar content"
        "sidebar footer";
    min-height: 100vh;
    /* background-color: #F7F4E9; */
}

#sidebar {
    grid-area: sidebar;
}

#header {
    grid-area: header;
}

#footer {
    grid-area: footer;
}

#content {
    grid-area: content;
}

:root, [data-theme="light"] {

    /* typography */
    --bulma-family-primary: 'Montserrat', Helvetica, Arial, sans-serif;
    --bulma-family-secondary: 'Open Sans', Helvetica, Arial, sans-serif;

    /* colors */
    --bulma-primary-h: 103deg;
    --bulma-primary-s: 83%;
    --bulma-primary-l: 26%;
    --bulma-danger-h: 354deg;
    --bulma-danger-s: 70%;
    --bulma-danger-l: 54%;
    --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --bulma-primary-rgb: 43, 122, 11;
    --bulma-info-h: 175deg;
    --bulma-info-s: 70%;
    --bulma-info-l: 40%;
    --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1);
    --bulma-info-rgb: 43, 122, 11;

    /* links */
    --bulma-link-h: 103deg;
    --bulma-link-s: 83%;
    --bulma-link-l: 26%;
    --bulma-link-on-scheme-l: var(--bulma-link-l);

    /* --bulma-scheme-main: */
    --bulma-radius: 0.2rem;
    --bulma-radius-medium: 0.2rem;
}

/* sidebar menu */
aside#sidebar .menu {
    --bulma-menu-item-radius: 0px;
}

aside#sidebar .menu-list {
    --bulma-menu-item-h: 103deg;
    --bulma-menu-item-s: 83%;
    --bulma-menu-item-l: 26%;
    --bulma-menu-item-background-l: var(--bulma-menu-item-selected-background-l);
    --bulma-menu-item-color-l: var(--bulma-menu-item-selected-color-l);

    a.is-active{
        background-color: #226209;
    }
}

/* utils */

.has-height-100 {
    height: 100%;
}

.has-height-fit-content {
    height: fit-content;
}

.has-width-100 {
    width: 100%;
}

/* specific */

table#locations-table,
table#measurement-points-table,
table#load-data-table,
table#bill-template-table,
table#battery-calculation-table,
table#calculation-scenarios-comparison-table,
table#scenario-list,
table#pv-systems-table,
table#battery-systems-table,
table#pv-calculation-scenario-list,
table#combined-scenario-comparison-list
{
    border-radius: var(--bulma-radius);
    border-style: hidden;
    box-shadow: 0 0 0 1px var(--bulma-border);

    & thead {
        background-color: #fafafa;
    }

    & thead:first-child tr:first-child {
        background-color: #fafafa;
        border: var(--bulma-border) solid #f1f1f1;
    }

    & thead:first-child tr:first-child th:first-of-type {
        border-top-left-radius: var(--bulma-radius);
    }

    & thead:first-child tr:first-child th:last-of-type {
        border-top-right-radius: var(--bulma-radius);
    }

    & .dropdown button {
        box-shadow: none;
        border-color: rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
        transition: none;
    }

    & .dropdown button:active {
        background-color: rgba(0, 0, 0, 0);
        color: var(--bulma-link);
        transition: none;
    }

    & .dropdown button:hover {
        background-color: rgba(0, 0, 0, 0);
        color: var(--bulma-link);
        transition: none;
    }

    td {
        vertical-align: middle;
    }
}


/* tabs */
.tab-content {
    display: none;
    animation: fadeEffect 0.15s;

    &.is-active {
        display: block;
    }
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* loader */
.spinner {
    width: 32px;
    height: 32px;
    border: 5px solid var(--bulma-primary-60);
    border-bottom-color: var(--bulma-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.spinner-big {
    width: 64px;
    height: 64px;
    border: 8px solid var(--bulma-primary-60);
    border-bottom-color: var(--bulma-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.spinner-small {
    width: 24px;
    height: 24px;
    border: 4px solid var(--bulma-primary-60);
    border-bottom-color: var(--bulma-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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

.htmx-indicator{
    transition: opacity 500ms ease-in;
    display:none;
}
.htmx-request .htmx-indicator{
    display:block;
}
.htmx-request.htmx-indicator{
    display:block;
}


@media screen and (min-width: 1408px) {
    .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: 1600px;
    }
}

/* plotly spinners */
.chart-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3273dc;
    animation: spin 1s linear infinite;
}

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

.is-hidden {
    display: none !important;
}

/* Apply the custom info color */
.is-info {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

.has-text-info {
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

.is-info.is-light {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), 90%) !important;
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), 25%) !important;
}

.button.is-info {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
    border-color: transparent;
    color: #fff;
}

.button.is-info:hover, .button.is-info:focus {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) - 5%));
    border-color: transparent;
    color: #fff;
}

.button.is-info.is-light {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), 90%);
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), 25%);
}

.button.is-info.is-light:hover, .button.is-info.is-light:focus {
    background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), 85%);
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), 25%);
}

/* tabulator styles */

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title
{
    white-space: normal !important;
    text-overflow: clip !important;
}

.tabulator .tabulator-calcs-holder {
    margin:0px !important;
    border:none !important;
}
.tabulator .tabulator-footer {
    padding: 0px !important;
}

.tabulator .tabulator-row.tabulator-selected{
    background-color: transparent !important;
}

.tabulator .tabulator-row.tabulator-selected:hover {
    background-color: transparent !important;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {
    stroke: #fff !important;

    &.tabulator-responsive-collapse-toggle-open,
    &.tabulator-responsive-collapse-toggle-close {
        width:15px !important;
    }
}

div#pv-systems-table-container .tabulator-row.tabulator-selectable {
    & .tabulator-cell:not(:first-child):not(:nth-child(18)) {
        cursor: grab;
    }

    & .tabulator-cell:nth-child(18) svg {
        transform: scale(1.2);
    }
}

div#pv-systems-table-container .tabulator-row.tabulator-moving {
    cursor: grabbing !important;
    background-color: var(--bulma-primary-90);
}

div#pv-systems-table-container input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.2);
}

.tabulator-tooltip{
	font-size:20px !important;
}

div#scenario-simulation-results-table .tabulator-row {
    cursor: default !important;

    & .tabulator-editable {
        cursor: pointer !important;
    }
}

.tabulator-col-title{
    font-size: 15px !important;
}