/* confirmation page */
.confirmsummary {max-width:700px;padding:0.5em;border:1px solid green}

/* main page */
.paperforms {text-align:center;width:100%;display:flex;flex-wrap:wrap;justify-content: space-around;}
.paperforms span {display:inline-block;margin:0.5em 1em;}

  /* online booking form */
td {padding:0.25em 0.5em}
.summary td:last-child {text-align:right}
.buttonrow {
	margin:0.25em 0;
	button {
	    font-size: 1.1em;
	    font-weight: bold;
	}
}
div.msg, div.err {
    color: white;
    background-color: green;
    text-align: center;
    font-size: 1.1rem;
    padding: 0.25rem;
}
div.err {background-color:red}

div.msg:empty, div.err:empty {
    padding: 0;
}

.left {text-align:left}
select.err,input.err {border:1px solid red}
.center, .centre {text-align:center}
.bcmonly, .traonly, .otconly, .noattendees .attonly {display:none}

.bcm .bcmonly {display:inherit}
.tra .traonly {display:inherit}
.otc .otconly {display:inherit}

ul ul {margin-top:0.25em;margin-bottom:0.25em}

.bookingform {
	#grecaptchadiv {border:none;width:fit-content;margin:0.5em auto;padding:0.5em}
	.attendeenames .formrow.first {display:none}
	.attendeenames.first formrow.first {display:inherit}
	button:disabled {color:grey}
	input.attendeename {
	    border: none;
	    background-color: unset;
	    margin: 0.5em;
	    width: fit-content;
	}
	fieldset {
		padding:0.25em;
		margin-bottom:0.5em;
		margin-top:0.25em;
		border:1px solid black;
		legend {margin: 0.25em 1em;font-weight: bold;padding: 0 0.5em;}
		input[type=radio] {margin-right: 0.5em;}
	}
	.formrow, .buttonrow {
		margin:0.25em 0;
		label {width:50%;display: inline-block;text-align: left;font-weight:bold}
		input {}
	}
	.buttonrow {display:flex;justify-content:space-around;align-items: center; button {font-weight:bold;font-size:1.1em;margin:0.25em}}
	p {margin-top:0}
	.attendeedetails {border-bottom:2px dashed grey}
	label:has(+ input:required):after {content: ' *';color: red;}
	
	
	div.msg, div.err {
	    color: white !important;
	    background-color: green !important;
	    text-align: center;
	    font-size: 1.1rem;
	    padding: 0.25rem;
	}
	
	div.err{background-color:red !important;}
	
	div.err:empty, div.msg:empty {
	    padding: 0;
	}
	
	div.accordion {
	  background-color: #eee;
	  color: #444;
	  cursor: pointer;
	  padding: 0.5em;
	  /*width: 100%;*/
	  text-align: left;
	  border: none;
	  outline: none;
	  transition: 0.4s;
	  font-weight: bold;
	  font-size: 1.25em;
	}
	.active, .accordion:hover {
	  background-color: #ccc;
	}
	.accordioncontent {
	  padding: 0 1em;
	  background-color: white;
	  max-height: 0;
	  overflow-y: hidden;
	  transition: max-height 0.2s ease-out;
	}
	
	.accordion:after {
	  content: '\02795'; /* Unicode character for "plus" sign (+) */
	  font-size: 13px;
	  color: #777;
	  float: right;
	  margin-left: 5px;
	}
	.noattendees .accordion:not(#which):not(#who):after {content:'(Enter Attendee details first)';color:red}
	.notypeselected .accordion:not(#which):after {content:'(Select booking type first)';color:red}
	
	.active:after {
	  content: "\2796"; /* Unicode character for "minus" sign (-) */
	}
	
	span.radios {
	    display: inline-flex;
	}
	.radiopair , .radios input[type=radio], .radios label {
	    display: inline-block;
	    vertical-align:middle;
	}
	
	.radios label {
	    width: fit-content;
	    padding: 0.25em 1em 0.25em 0;
	}
	
	table {
	    width: 100%;
	    display:table;
	    border-collapse:collapse;
	    margin:0.5em auto;
	    td, th {text-align:center;border-right: 1px solid grey;}
	    td {vertical-align:middle;}
	    tr {border-bottom: 1px solid grey;}
	    tbody tr:last-child {border-bottom:none}
	    td:last-child, th.brn {border-right:none}
	}
		
	input[type="checkbox"], input[type="radio"] {
	    font-size: 1.5em;
	    height: 1em;
	    width: 1.5em;
	}
	table.maincontact, table.summary {
	    width: auto;
	    td, th {padding:0.25em;text-align:left;}
	    
	}
	table.summary {
		border:1px solid grey;
		td:last-child {text-align: right;}
		td,th,tr {border:none;}
	}
	div.confirm {
	    margin: auto;
	    border: 2px solid orange;
	    padding: 0.5rem;
	    width: max-content;
	    max-width: calc(100vw - 5em);
	    display: flex;
	    align-items: center;
	}
	
	label[for="confirm"] {
	    padding: 0.25rem;
	    /* display: inline-block; */
	}
}

.modal {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    z-index: 100;

	.background {
	    position: fixed;
	    top:0;
	    left:0;
	    height:100%;
	    width:100%;
	    min-height:100vh;
	    min-width:100vw;
	    background-color: white;
	    z-index: 98;
	    opacity: 0.8;
	}
	.content {
		position:absolute;
		z-index:101;
		padding:0.5em;
		min-width: 320px;
		border:2px solid black;
		box-shadow:5px 5px 5px;
		background-color:white;
	}
	.title {
		background-color:navy;
		font-size: 1.5em;
		color: white;
		text-align: center;
		padding: 0.25em;
		.xinabox:after {content:"X";position: absolute;font-size: inherit;padding: 0 0.25em;border: 1px solid white;right: 0.75rem;cursor: pointer;}
	}
}

.formarea {
	.content {
		background-color: white;
		width: fit-content;
		max-width: min(100vw,var(--max-width));
		position:relative;
		z-index:100;
		left: 50%;
		transform: translate(-50%,0);
		padding:0.5rem;
		border:2px solid darkgrey;
		background-color:#EEFFFF;
		/*width:600px*/
	}
	.buttonrow {justify-content:space-evenly}
	h1 {width:100%}
	input,  select {font-size:1em;height:1.45em;}
	.inline, span.months {display:inline-block}
	span.months label {
		width: fit-content;
		font-weight: normal;
	}
	#Postcode {text-transform:uppercase;}
	#errmsg {color:white;background-color:red;padding:0.25em;text-align:center}
	#errmsg:empty {display:none}
	.title {
	    margin-top: 0;
	    text-align: center;
	    color: white;
	    background-color: navy;
	    padding: 0.25em;
	}
}
.formarea {width:max-content;max-width:min(100vw, var(--max-width));margin:auto; }

#merchandise td, #merchandise th {padding:0.25em}
.bcm #which:after {content:'BMW Club Member'}
.tra #which:after {content:'Trader'}
.otc #which:after {content:'Other bike club member'}

@media screen and (max-width:570px) {
	.bookingform .formrow label {width:100%}
	.bookingform .formrow.radios label {width: fit-content;}
}

#merchandise {
	.content {min-width:400px;max-width:100vw};
	#order, #selection {
	    width: max-content;
	    max-width: 90%;
	    min-width: 310px;
	    margin: auto;
	}
	.mug .pick, .cap .pick, .beanie .pick, .tshirt .pick, .polo .pick {display: none;}
	span.pick {color: grey;}
	#basket {font-size: min(1em, 3vw);}
	span.onlyone, .tshirtonly, .poloonly, .caponly, .beanieonly {display:none}
	.polo .poloonly, .always, .tshirt .tshirtonly, .beanie .beanieonly, .cap .caponly, .mug .mugonly {display:flex}
	.formrow {display:flex;flex-wrap:wrap;min-height:1.5em}
	.unused button {display:none}
	label {width:8em}
	.sizehelp, .colourhelp {text-align: center;font-size:0.9em;color:navy}
}
@media screen and (max-width:400px) {
	#merchandise { #order, #selection {width:75%} }
}
#basket td {cursor: pointer;}

#sizehelp {
	table {margin:0 auto;display:inline-block}
	td,th {text-align:center;padding:0.25em 0.5em;}
	tbody tr:nth-child(odd) {background-color:aliceblue;}
	@media screen and (max-height:800px) {.content {top:0;left:0;transform:none}}
}
.sizehelp button {font-weight:bold;}