.financeGrid {
    display: grid;
    grid-template-columns: 20px 20px 1fr 100px;	   /* #  X  Item   Amount */

    //width: 1100px;
    //margin: 0px auto;   /* top/bottom  right/left */
    padding: 5px 0px;   /* top/bottom right/left */

    grid-template-areas:
	"number     times          item           amount"
        "message    message        message        message"
	"box        .              boxMsg         boxMsg"
	"totalArea  totalArea      totalArea      totalAmtArea";
}


/*
 * Define the grid areas
 */
.numberArea {
    grid-area: number;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    color: var(--color-dark-lighter);
}

.timesArea {
    grid-area: times;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    color: var(--color-dark-lighter);
}

.itemArea {
    grid-area: item;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    color: var(--color-dark-lighter);
}
.itemSubText {
    line-height: 1.2;
    font-size: 14px;
    font-style: italic;
    color: var(--color-dark);
}
.totalText {
    font-size: 24px;
    color: var(--color-dark);
}

.amountArea {
    grid-area: amount;

    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    color: var(--color-dark-lighter);

    text-align: right;
}

.messageArea {
    grid-area: message;

    line-height: 1;
    font-size: 14px;
    font-style: italic;
    color: var(--color-dark-lighter);
}

.boxArea {
    grid-area: box;
}

.boxMsgArea {
    grid-area: boxMsg;
}

.totalArea{
    grid-area: totalArea;

    font-family: "Nunito Sans", sans-serif;
    font-size: 24px;
    color: var(--color-dark-lighter);
} 

.totalAmtArea {
    grid-area: totalAmtArea;

    text-align: right;
    font-family: "Nunito Sans", sans-serif;
    font-size: 24px;
    color: var(--color-dark-lighter);
} 



.warningBox {
    border: 2px solid var(--color-pink);
    padding: 10px;
}