.button-table {
    margin: auto;
    border-collapse: collapse;
    width: auto;
    border-spacing: 0;
    border-collapse: collapse;
    border: none;

}

.button-table td {
    padding: 0;
    margin: 0;
}

.button-table button {
    width: 100%;
    padding: 10px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease, filter 0.3s ease;
    border-radius: 0;
}

/*
#button1 {
    border-top-left-radius: 30px;
}

#button2 {
    border-top-right-radius: 30px;
}

#button3 {
    border-bottom-left-radius: 30px;
}

#button4 {
    border-bottom-right-radius: 30px;
}
*/
#Actual {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#Actual {
    border-right: 2px solid transparent;
    /* We make the actual border transparent */
    border-image: linear-gradient(to right, #d3d3d3, #878282, #d3d3d3) 1 100%;
    /* This is where the gradient is applied */
}

#Daily {


    border-right: 2px solid transparent;
    /* We make the actual border transparent */
    border-image: linear-gradient(to right, #d3d3d3, #878282, #d3d3d3) 1 100%;
    /* This is where the gradient is applied */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#Weekly {
    border-right: 2px solid transparent;
    /* We make the actual border transparent */
    border-image: linear-gradient(to right, #d3d3d3, #878282, #d3d3d3) 1 100%;
    /* This is where the gradient is applied */
}


#Monthly {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.active {
    opacity: 1;
    background-color: #028f52;
    color: white;
    box-shadow: 0 0 4px #03d47a;
}

.inactive {
    opacity: 0.5;
    background-color: #015430;
    color: white;
}



.energy-table {
    margin: auto;
    max-width: 80vh;
    border-collapse: separate;
    border-spacing: 15px;

}

.energy-box {
    /*background-color: #292c33;*/
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 150px;
    border: 1px solid #292c33;
}

.icon-green {
    color: #39ff14;
    font-size: 2rem;
}

.icon-purple {
    color: #8e44ad;
    font-size: 2rem;
}

.icon-yellow {
    color: #f1c40f;
    font-size: 2rem;
}

.icon-orange {
    color: #e67e22;
    font-size: 2rem;
}

.energy-value {
    font-size: 1.5rem;
    margin: 10px 0;
}

.energy-label {
    font-size: 0.875rem;
    color: #b0b3b8;
}

.energy-values {
    margin: auto;
    width: 80%;
}

.energy-values table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    left: 7px;
}

.energy-values td {
    padding: 0;
}

.in-label {
    color: green;
    font-size: 12px;
    padding-right: 5px;
    vertical-align: middle;
}

.out-label {
    color: red;
    font-size: 12px;
    padding-right: 5px;
    vertical-align: middle;
}

.energy-value {
    font-size: 16px;
    vertical-align: middle;
}

.rightAlign {
    text-align: right;
}

.big-number {
    font-size: 24px;
    font-weight: bold;
}

.small-text {
    font-size: 12px;
}

.energy-label {
    font-size: 14px;
    color: gray;
}


.align-cell {
    vertical-align: middle;
    /* Ensures content is vertically centered */
}

.align-cell .energy-box {
    min-height: 126px;
    vertical-align: middle;
}


@media (max-width: 600px) {
    .energy-table {
        max-width: 100%;
        width: 100%;
    }

    .energy-box {
        padding: 15px;
        box-sizing: border-box;
    }

    .icon-green,
    .icon-purple,
    .icon-yellow,
    .icon-orange {
        font-size: 1.5rem;
    }

    .energy-value {
        font-size: 1.25rem;
    }

    .energy-label {
        font-size: 0.75rem;
    }

    .energy-table {
        width: 100%;
    }

    .align-cell .energy-box {
        min-height: 160px;
        vertical-align: middle;
    }
}

.green {
    color: #65bb6a;
}

.red {
    color: #fe2929;
}