.sectionLayout{
    display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.align-title h2{
color: black; 
padding-top: 30px; 
padding-right: 10px; 
color: #34495e;
}
.card {
background: #ffffff;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
color: #34495e;
border: 1px solid transparent; 
transition: border-color 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; 
font-size: 1rem; 
font-family: inherit; 
}

.card:hover {
border-color: #34495e;
box-shadow: 0 4px 8px var(#b4b4b4); 
}

.bgAccept{
/* background-color: rgb(99, 236, 110); */
color: rgb(105, 170, 0);
font-weight: bold;

}
.bgAccept:hover {
border-color: rgb(105, 170, 0);
box-shadow: 0 4px 8px rgba(105, 170, 0, 0.089); 

}
.bgReject{
/* background-color: rgb(236, 99, 99); */
color: rgb(170, 0, 0);
font-weight: bold;

}
.bgReject:hover {
border-color: rgb(170, 0, 0);
box-shadow: 0 4px 8px rgb(170, 0, 0, 0.089); 

}
.bgPending{
/* background-color: rgb(236, 154, 99); */
color: rgb(255, 102, 0);
font-weight: bold;

}
.bgPending:hover {
border-color: rgb(255, 102, 0);
box-shadow: 0 4px 8px rgb(255, 102, 0, 0.089); 

}

.bgAcceptAfterSolution{
    /* background-color: rgb(236, 154, 99); */
    color: rgb(86, 0, 94);
    font-weight: bold;
    
    }
    .bgAcceptAfterSolution:hover {
    border-color: rgb(86, 0, 94);
    box-shadow: 0 4px 8px rgb(86, 0, 94, 0.089); 
    
    }

    .bgdelay{
        /* background-color: rgb(236, 154, 99); */
        color: rgb(219, 197, 0);
        font-weight: bold;
        
        }
        .bgdelay:hover {
        border-color: rgb(219, 197, 0);
        box-shadow: 0 4px 8px rgb(219, 197, 0, 0.089); 
    
        }

        .bgDependOnYou{
            /* background-color: rgb(236, 154, 99); */
            color: rgb(0, 219, 146);
            font-weight: bold;
            
            }
            .bgDependOnYou:hover {
            border-color: rgb(0, 219, 146);
            box-shadow: 0 4px 8px rgb(0, 219, 146, 0.089); 
            
            }

            
.bgOff{
/* background-color: rgb(180, 180, 180); */
color: rgb(114, 114, 114);
font-weight: bold;

}
.bgOff:hover {
border-color: rgb(114, 114, 114);
box-shadow: 0 4px 8px rgb(114, 114, 114, 0.089); 

}
.bgSend:hover{
border-color: rgb(0, 150, 170);
box-shadow: 0 4px 8px rgb(0, 150, 170, 0.089); 
}
.borderColor:hover{
border-color: #849aa8;
box-shadow: 0 4px 8px rgba(133, 155, 168, 0.089); 
}


.extra-padding{
padding-top: 10px;
}
