@keyframes growAndShrinkUpdated {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}


.updated {
    color: #efe63bb6;
    animation: growAndShrinkUpdated 0.2s ease-in-out;
}



/*Energy price BANDING*/
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.7);
    }
}

@keyframes neon {
    from {
        text-shadow: 0 0 6px rgba(202,228,225,0.92), 0 0 30px rgba(202,228,225,0.34), 0 0 12px rgba(30,132,242,0.52), 0 0 21px rgba(30,132,242,0.92), 0 0 34px rgba(30,132,242,0.78), 0 0 54px rgba(30,132,242,0.92);
    }

    to {
        text-shadow: 0 0 6px rgba(202,228,225,0.98), 0 0 30px rgba(202,228,225,0.42), 0 0 12px rgba(30,132,242,0.58), 0 0 22px rgba(30,132,242,0.84), 0 0 38px rgba(30,132,242,0.88), 0 0 60px rgba(30,132,242,1);
    }
}

.current-time-slot {
    /*animation: glow 2s infinite;*/
    animation: neon .02s ease-in-out infinite alternate;
    font-weight: bold;
    color: #c6e2ff;
    font-size: 16px;
}

    .current-time-slot td {
        padding-left:10px !important;
    }

    .bandingTd {
        padding-left: 5px;
    }

.pbGolden {
   border-left: cornflowerblue 7px solid; /* Background color for prices less than 0 */
}

.pbGreen {
    border-left: yellowgreen 7px solid; /* Background color for prices between 0 and 15 */
}

.pbAmber {
    border-left: orange 7px solid; /* Background color for prices between 15 and 20 */
}

.pbRed {
    border-left: red 7px solid; /* Background color for prices 20 and above */
}

.data-cell {
    background: linear-gradient(to right, #84848426 var(--bar-width), transparent var(--bar-width));
    background-repeat: no-repeat;
}





#battery-svg {
    position: relative;
    width: 100%;
    height: 100%;
}

canvas {
    display: block;
}

#chargeTextContainer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 20px;
}

.shimmer {
    display: inline-block;
    background: linear-gradient( 90deg, rgba(128, 0, 128, 0) 25%, /* Transparent purple */
    rgba(255, 105, 180, 0.5) 50%, /* Semi-transparent pink */
    rgba(128, 0, 128, 0) 75% /* Transparent purple */
    );
    background-size: 200% 100%;
    animation: shimmerEffect 9s infinite;
    color: inherit; /* Keeps the text color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 105, 180, 0.8);
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
}

/* Power flow */

.card-smooth {
    transition: all 1s ease-out;
}

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

    100% {
        background-position: -200% 0;
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translateX(-20px);
        opacity: 0;
    }
}

.power-flow {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* IMPORTING (Red, moving right) */
.import {
    color: #white;
}

.arrow-import {
    animation: slideRight 1.2s infinite;
    display: inline-block;
    margin: 0 2px;
}

    .arrow-import:nth-child(2) {
        animation-delay: 0.2s;
    }

    .arrow-import:nth-child(3) {
        animation-delay: 0.4s;
    }

/* EXPORTING (Green, moving left) */
.export {
    color: white;
}

.arrow-export {
    animation: slideLeft 1.2s infinite;
    display: inline-block;
    margin: 0 2px;
}

    .arrow-export:nth-child(2) {
        animation-delay: 0.2s;
    }

    .arrow-export:nth-child(3) {
        animation-delay: 0.4s;
    }