:root {
  --primary-crud-table-header-color: rgb(30, 126, 52);
  //border color decided over here
}

.crud-table-wrapper{
    //learning grid layout 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 100%;
    height: 70%;
    margin-top: 1rem;
    margin-bottom: 1rem;

    
    .table-header-wrapper {
        display: flex;
        width: 100%;

        .table-header{
            border: 1px solid white; //adjust border color to shade of white try #4f4b4b
            background-color: var(--primary-crud-table-header-color);
            color: white;
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            height: 3rem;
            font-weight: 600;

            .header-label {
                padding: 0.5rem;
            }
        }
    }

    .table-row{
        width: 100%;
        display: flex;

        //change this and have fade effect like react table on no results found
        .table-body-no-results{
            display: flex;
            width: 100%;
            border: 0.5px solid #4f4b4b;
            justify-content: center;
        }
    }

    .table-cell {
        display: flex;
        border: 1px solid white; //adjust border color to shade of white try #4f4b4b
        background-color: #eee;
        justify-content: center;
        align-items: center;
        // padding: 0.25rem;
        // height: 3rem;
    }
}