/* See Redefining Grid Areas with media Queries: https://gridbyexample.com/examples/example13/ */


/*
 * For the header (navigation buttons, 2-page layout,...)
 */
.regForm {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 200px;

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

    grid-template-areas:
	"regTitles  regTitles   regTitles regTitles"
	"leftTab     .          .         rightTab"
	"navigation navigation navigation navigation"
	"leftPage   leftPage   rightPage  rightPage"
	"summary    summary    summary    summary"
	"footer     footer     footer     footer";
}
@media screen and (max-width: 1200px) {
    .regForm {
	grid-template-areas:
	    "regTitles  regTitles  regTitles  regTitles"
	    "leftTab     .          .           rightTab"
	    "navigation navigation navigation navigation"
	    "leftPage   leftPage   leftPage   leftPage"
	    "rightPage   rightPage rightPage  rightPage"
	    "summary    summary    summary    summary"
	    "footer     footer     footer     footer";
	width: 600px;
    }
}
@media screen and (max-width: 700px) {
    .regForm {
	width: 400px;
    }
}
@media screen and (max-width: 400px) {
    .regForm {
	width: 100%;
	grid-template-columns: 150px 1fr 1fr 150px;
    }
}


.regTitles {
    grid-area: regTitles;
}


/*
 * Define the "leftTab" area:
 * e.g.
 *    Camper 1: Camper Name
 */
.leftTabArea {
    grid-area: leftTab;
    position: relative;
}

.whiteLine {
    position: absolute;
    bottom: -2px;
    left: 2px;
    width: 196px;
    height: 2px;
    background-color: var(--color-white);
}
@media screen and (max-width: 400px) {
    .whiteLine {
	width: 146px;
    }
}

.camperArea {
    height: 30px;
    padding: 10px;
    background-color: var(--color-white);

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border-radius: 10px 10px 0px 0px;
    border-width: 2px;
    border-style: solid solid none solid;   /* top right bottom left */
    border-color: var(--color-blue);
}

.summaryTabArea {
    height: 46px;
    background-color: var(--color-white);
    padding: 2px 2px 0px 2px;    /* top right bottom left */

    border-radius: 10px 10px 0px 0px;
    border-width: 2px;
    border-style: solid solid none solid;   /* top right bottom left */
    border-color: var(--color-blue);
}
.summaryTabInnerArea {
    height: 100%;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: var(--color-white);

    text-align: center;
    line-height: 3;   /* this is a hack because vertical-align: middle does not seem to work on the text */

    background-color: var(--color-blue);
    border-radius: 10px 10px 0px 0px;
    border-width: 2px;
}


/*
 * Define the "rightTab" area:
 * e.g.
 *    Go to camper summary
 */
.rightTabArea {
    grid-area: rightTab;

    justify-self: end;
    align-self: flex-end;
}

.summaryButtonArea {
    grid-area: summaryButtonArea;

    margin-bottom: 20px;
}

.summaryButton {
    background-color: var(--color-blue);
    color: var(--color-light);

    border: 3px;
    border-style: solid;
    border-color: var(--color-light);
    //outline: var(--color-light);
    border-radius: 20px;

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;

    padding: 10px 15px;
}


/*
 * Define the chevron navigation area: Personal, Musical, Accommodation, Other buttons
 */

.navigation {
    grid-area: navigation;
}

.navigationArea {
    //position: relative;		/* needed for positioning NEXT button */

    border-radius: 0px 10px 0px 0px;
    border-width: 2px;
    border-style: solid solid none solid;   /* top right bottom left */
    border-color: var(--color-blue);

    padding: 10px;
    background-color: var(--color-white);
    text-align: center;
}


/*
 * Define the left side of the registration form
 */

.leftPage {
    grid-area: leftPage;
}

.leftPageArea {
    height: 100%;
    position: relative;

    padding: 0px 40px 50px 40px;	/* top right bottom left */
    background-color: var(--color-white);
    color: var(--color-dark);

    border-width: 2px;
    border-style: none none none solid;   /* top right bottom left */
    border-color: var(--color-blue);

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: var(--color-dark);
}
@media screen and (max-width: 1200px) {
    .leftPageArea {
        border-style: none solid none solid;   /* top right bottom left */
    }
}

/*
 * Define the right side of the registration form
 */

.rightPage {
    grid-area: rightPage;
}

.rightPageArea {
    height: 100%;
    position: relative;		/* needed for positioning NEXT button */

    padding: 0px 40px 50px 40px;	/* top right bottom left */
    background-color: var(--color-white);
    color: var(--color-dark);

    border-width: 2px;
    border-style: none solid none none;   /* top right bottom left */
    border-color: var(--color-blue);

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    color: var(--color-dark);
}
@media screen and (max-width: 1200px) {
    .rightPageArea {
        border-style: none solid none solid;   /* top right bottom left */
    }
}


/*
 * Define the summary page
 */
.summary {
    grid-area: summary;
    position: relative;		/* needed for positioning NEXT button */
}

.summaryPageArea {
    padding: 0px 100px 50px 100px;;
    background-color: var(--color-white);

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

    border-width: 2px;
    border-style: none solid none solid;   /* top right bottom left */
    border-color: var(--color-blue);
}
@media screen and (max-width: 1200px) {
    .summaryPageArea {
	padding: 0px 20px 50px 20px;;
    }
}


/*
 * Define the footer
 * (mostly blank - it's just here to get the rounded corners at the bottom but also used to hold the Submit button)
 */
.footer {
    grid-area: footer;
    //position: relative;
}

.footerSubmitArea {
    padding: 30px;
    background-color: var(--color-white);

    border-color: var(--color-blue);
    border-radius: 0px 0px 10px 10px;
    border-width: 2px;
    border-style: none solid solid solid;   /* top right bottom left */

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


/*
 * Used throughout registration form.......
 */

.wcamsButton {
    background-color: var(--color-blue);
    color: var(--color-light);

    border: none;
    border-radius: 10px;

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: bold;

    padding: 10px 30px;
}
.wcamsButtonINV {
    background-color: var(--color-white);
    color: var(--color-blue);

    border: none;
    border-radius: 10px;

    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: bold;

    padding: 10px 30px;
}


/*
 * Used for positioning "Add Camper" or "Add Instrument"
 */
.addButton {
    display: flex;
    align-items: center;

    cursor: pointer;

    font-size: 18px;
}

/*
 * class to disable clicking on a button
 */
.disableClick {
    pointer-events: none;
    background-color: var(--color-grey);
}


/*
 * class to make sure text is unselectable
 */
.nonSelectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}