/* for all action buttons */
.actionBtn{
    border-radius: 50px;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px var(--primary-shadow-300);
    width: 6.7rem;
    height: 30px;
    font-weight: 700;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
.actionBtn:hover{
    transform: translateY(-2px);
    background-color: white;
}

/* button container*/
.btnContainer{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 10px 0px;
}

/* submit & add button*/
.submitBtn, .addBtn{
    color: rgb(0, 78, 0);
    background-color: var(--primary-green-200);
}
.submitBtn:hover, .addBtn:hover{
    color: green;
    border-color: var(--primary-green-500);
    box-shadow: 0 0 8px green;
}

/* delete & cancel btn */
.cancelBtn, .delBtn{
    color: white;
    background-color: var(--primary-red-400);
}
.cancelBtn:hover, .delBtn:hover{
    color: var(--primary-red-500);
    border-color: var(--primary-red-500);
    box-shadow: 0 0 8px var(--primary-red-500);
}

/* edit button */
.editBtn, .backBtn{
    color: var(--primary-yellow-600);
    background-color: var(--primary-yellow-100);
}
.editBtn:hover, .backBtn:hover{
    color: var(--primary-yellow-600);
    border-color: var(--primary-yellow-500);
    box-shadow: 0 0 8px var(--primary-yellow-500);
}

.backBtn{
    width: 130px;
}