/* Custom CSS for aligning the <th> elements */
.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.my-table .highlight-cell1 {
    background-color: #45eb52;
    /* Set the desired background color */
}

.my-table .highlight-cell2 {
    background-color: #e65411;
    /* Set the desired background color */

    color: white;
    /* Set the font color to white */
}

.my-table .highlight-cell3 {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #e65411;
    color: white;
}



@keyframes flash {
    0% {
        background-color: yellow;
    }

    50% {
        background-color: orange;
    }

    100% {
        background-color: yellow;
    }
}


@keyframes flashgreen {
    0% {
        background-color: rgb(0, 255, 0);
    }

    50% {
        background-color: rgb(0, 125, 0);
    }

    100% {
        background-color: rgb(0, 255, 0);
        ;
    }
}

@keyframes flashred {
    0% {
        background-color: rgb(255, 0, 0);
    }

    50% {
        background-color: rgb(125, 0, 0);
    }

    100% {
        background-color: rgb(255, 0, 0);
        ;
    }
}


.gradient-animation {
    animation: gradient 5s infinite;
}

.flash-animation {
    animation: flash 1s infinite;
}


.flashgreen-animation {
    animation: flashgreen 1s infinite;
}


.flashred-animation {
    animation: flashred 1s infinite;
}


.my-table .sticky-left {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #9193ee;
    color: white;
    /* Set the font color to white */
}

.my-table .sticky-left-nocolor {
    position: sticky;
    left: 0;
    z-index: 1;
}

.my-table .center {
    text-align: center;
    /* Center content horizontally */
    vertical-align: middle;
    /* Center content vertically */
}



table {
    width: 100%;
    border-collapse: collapse;

}

td,
th {
    border: 1px solid black;
    padding: 5px;
    /* Increased padding for better visibility */
    white-space: nowrap;
    text-align: center;
    /* Centering all text inside <th> and <td> by default */
    vertical-align: middle;
    /* Ensures vertical centering */
}

.wrap-td {
    border: 1px solid black;
    padding: 0px;
    word-wrap: break-word;
}
