:root{
 --flat-black:#1D1d1d;
 --flat-white:#ECECEC;
 --data-table-row-text-size:20px;
 --data-table-header-text-size:22px;
 --data-table-text-font:'Roboto', sans-serif;
 --bright-white:white;
 --accent-color: #CF291d;
  
}



#data-table-container-1 > .data-table-header {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr) );
    justify-items: center;
    color:var(--flat-white);
    background-color: var(--flat-black);
    text-transform: uppercase;
    padding:10px;
    font-family: var(--data-table-text-font);
    font-size: var(--data-table-header-text-size);
}

#data-table-container-1 > .data-table-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    justify-items: center;
    color:var(--flat-black);
    background-color: var(--bright-white);
    font-size: var(--data-table-row-text-size);
    font-family: var(--data-table-text-font);
    font-weight: 400;
    align-items: center;
    padding:5px;
    animation-name: rowupdate;
    animation-duration: 1s;
}

#data-table-container-1 > .data-table-row:nth-child(odd){
    background-color:  rgb(255, 227, 226);
}

#data-table-container-1 > .data-table-row:hover{
    background-color: var(--accent-color);
    color:#ECECEC;
}



.data-table-row-buttongroup{
    display: grid;
    grid-template-columns: repeat(4, minmax(50px,1fr));
    border-left-style:solid ;
    border-right-style:solid ;
    border-left-color: #CF291d ;
    border-right-color:#CF291d;
    font-size: var(--data-table-row-text-size);
}

.data-table-row-buttongroup button{
    background-color: inherit;
    align-items: center;
    text-align: center;
    justify-items: center;
    font-size: var(--data-table-row-text-size);
}
.data-table-row-buttongroup button:hover{
    background-color: inherit;
    align-items: center;
    text-align: center;
    font-size: var(--data-table-row-text-size);
    color:var(--bright-white)
}
/* 
.data-table-row-buttongroup-button-icon-add:hover {
    color:white;
}

.data-table-row-buttongroup-button-icon-remove:hover {
    color:white;
}

.data-table-row-buttongroup-button-icon-edit:hover {
    color:white;
}
.data-table-row-buttongroup-button-icon-refresh:hover {
    color:white;
}

.data-table-row-buttongroup-button-icon:hover{
    color: white;
}

.data-table-row-buttongroup-button-icon:hover{
    color: white;
}

.data-table-row-buttongroup-button{
    margin: 3px;
}
.data-table-row-buttongroup-button:hover{
    cursor: pointer;
} */

/* 
.data-table-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    justify-items: center;
    color:black;
    background-color: white;
    padding:5px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    align-items: center;
    animation-name: rowupdate;
    animation-duration: 2s;
} */


/* .data-table-row-buttongroup {
    display: grid;
    grid-template-columns: repeat(4, minmax(50px,1fr));
    padding:2px;
    justify-items: center;

} */

.data-table-row-buttongroup-button{

}

@keyframes rowupdate {
    from {
        background-color: #CF291d;
        color:white}
    to {
        background-color: white;
        color:black;
    }
  }


.data-table-row:nth-child(even){
    background-color: #ECECEC;
}

.data-table-row:hover{
    background-color: #CF291d;
    color:#ECECEC;
}

/* .data-table-row-cell{
    padding-top:7px;
    padding-bottom:7px;
} */
/*
.data-table-container{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
*/

/* .data-table-header {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr) );
    justify-items: center;
    color:#ECECEC;
    background-color: #1D1D1D;
    text-transform: uppercase;
    padding:10px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
} */