/*
 * The outer box for each camper
 */
.summaryCamperBox {
    position: relative;

    background-color: #EEEEEE;
    margin-bottom: 50px;

    border-color: var(--color-blue);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
}



/*
 * The 1- or 2-column layout inside the box
 */
.summaryCamperBoxGrid {
    display: grid;
    grid-template-columns: 20px 450px 1fr 150px;

    padding: 20px;

    grid-template-areas:
	"camperName    camperName    .             actionLinks"
	".             summaryLeft   summaryRight  summaryRight";
}
@media screen and (max-width: 1200px) {
    .summaryCamperBoxGrid {
	grid-template-areas:
	    "camperName    camperName    .            actionLinks"
	    ".             summaryLeft   summaryLeft  summaryLeft"
	    ".             summaryRight  summaryRight summaryRight";

	grid-template-columns: 20px 400px 1fr 110px;
    }
}
@media screen and (max-width: 700px) {
    .summaryCamperBoxGrid {
	grid-template-columns: 10px 230px 1fr 90px;
    }
}
@media screen and (max-width: 400px) {
    .summaryCamperBoxGrid {
	grid-template-columns: 10px 170px 1fr 90px;
    }
}


.camperName {
    grid-area: camperName;

    font-size: 18px;
}
@media screen and (max-width: 700px) {
    .camperName {
	font-size: 16px;
    }
}

.actionLinks {
    grid-area: actionLinks;

    padding-right: 20px;
    text-align: right;
}
@media screen and (max-width: 700px) {
    .actionLinks {
	font-size: 14px;
	padding-right: 10px;
    }
}
/*
 * Make text for Delete a little smaller so don't hit by accident!
 */
.deleteText {
    font-size: 12px;
}

.summaryLeft {
    grid-area: summaryLeft;

    font-size: 14px;
}

.summaryRight {
    grid-area: summaryRight;

    font-size: 14px;
}

/*
 * The check/fix and collapse/expand buttons that go on the box border
 */
.checkfixButtonPosition {
    position: absolute;
    top: -15px;
    right: -15px;
}

.expandcollapseButtonPosition {
    position: absolute;
    bottom: -18px;
    margin-left: 50%;
}
.expandcollapseButtonPosition:hover {
    transform: scale(1.2);
}

.fixErrorsColor {
    color: var(--color-red);
}




/*
 * The 2-column rows in the left and right side of the box (labels & content)
 */
.summaryContentArea {
    display: grid;
    grid-template-columns: 150px 10px 1fr;

    grid-template-areas:
	"summarySection  summarySection  summarySection"
	"summaryLabel    .               summaryContent"
	"summaryFullLine summaryFullLine summaryFullLine";;
}
/*
 *
@media screen and (max-width: 700px) {
    .summaryContentArea {
	grid-template-areas:
	    "summarySection  summarySection  summarySection"
	    "summaryLabel    .               summaryLabel"
	    "summaryContent  .               summaryContent"
	    "summaryFullLine summaryFullLine summaryFullLine";

	grid-template-columns: 1fr 1fr;
    }
}
 *
 */


.summarySection {
    grid-area: summarySection;

    padding: 10px 0px;;
    text-decoration: underline;
    font-size: 16px;

    //text-underline-position: under;
}

.summaryLabel {
    grid-area: summaryLabel;

    padding-bottom: 5px;
}

.summaryContent {
    grid-area: summaryContent;

    padding-bottom: 5px;

    font-size: 15px;
    font-weight: bold;
}

.summaryFullLine {
    grid-area: summaryFullLine;

    padding-bottom: 5px;

    font-size: 14px;
    font-weight: bold;
}