/* color to replace buttons #e70327 borders #000000 */

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Economica:wght@700&display=swap');


body {
	font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
	font-size: 14px;
	color: #fff;
	background-color: #000;
	margin: 0;
}

form a, a {
	color: #e71c26;
}

h1, h2, h3, h4, h5, .PartyTitle, #title  {
	font-family:'Economica',Helvetica,Arial,Lucida,sans-serif!important;
}

#Title {
	text-align: center;
	font-weight: bold;
	font-size: 160%;
	padding: 10px;
	margin: auto;
}


input[type="submit"] { 
	background:  #e70327;
	border: none;
	border-radius: 10px;
	padding: 10px 20px;
	color: #FFFFFF;
	font-size: 110%;
	font-weight: bold;
	margin: 10px;
	}
	

/* Page Header Styles ------------------------------------------------------------------------------------*/	

.CountdownTimer {
	float:left;
	padding: 5px;
	width: 60px;
	text-align: center;
	margin-right: -15%;
	font-weight: bold:
	
}


#LanguageContainer {
	text-align: right;
	margin-right: 15%;
}

#StepContainer {
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	clear: both;
}

#StepContainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#StepContainer li {
    display: inline-block;
	padding: 5px 10px;
	color: #ccc;
}

#StepContainer a{
	text-decoration: none;
	color: #666;
}

#StepContainer li.selected {
	color: #e70327;/*button*/
}

#ContentWrapper {
	Border: none; /*Border*/
	margin:0 auto; 
	background: #000;
}

#ContentWrapper::before {
	content: "Total Ninja Westown, SHONGWENI, DURBAN.";
	color: #ffffff;
	background-color: #0762ea;
	width: 100%;
	display: block;
	margin: 0 15px 0 0;
	padding: 20px;
	text-align: center;
	font-weight: 900;
	font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
	font-size: 1.4em;
	
}

.PartyPackage {
	border: 1px solid #fff;
	Padding: 15px;
	max-width: 875px;
	margin:0 auto; 
}

.SubTitle {
	font-weight: bold;
	text-align: center;
}


/*Errors -----------------------------------------------------------------------------------------------*/
.Error,
.required {
	color: #ff0000; 
	display: none;
	font-weight: bold;
}

p.Error {
	text-align: center;
	background-color: #ffd6d6;
	padding: 10px;
	border-top: 1px solid #ff0000;
	border-bottom: 1px solid #ff0000;
	width: 95%;
	max-width: 800px;
	margin: auto;
	color: #fff;
}

/* Footer ----------------------------------------------------------------------------------------------------*/

#Footer {
	text-align: center;
	margin: 20px auto auto auto;
	padding-top: 20px;
	width: 100%;
	max-width: 800px;
}

#Footer a {
	display: block;
	padding: 10px;
	
}

.StartOver {
	margin: auto;
	font-weight: bold;
	font-size: 120%;
	text-decoration: none;
	float: left;
	color: #e70327;/*Button*/
}

.PoweredBy {
	font-weight: bold;
	color: #333;
	text-decoration: none;
	margin:auto;
	width: 300px;
	clear: both;
}



/* Step 1 Styles ------------------------------------------------------------- */

.Step1Message {
	text-align: center;
	font-size: 130%;
	padding: 10px;
	color: white;
	font-weight: bold;
}


.PartyPackage {
	margin: 30px auto;
	text-align: right;
}

.PartyTitle {
		text-align: center;
		font-weight: bold;
		font-size: 160%;
		padding-bottom: 20px;
	}

.PartyNotes a {
	color: #ffffff;
}

.PartyDescription {
		text-align: left;
		float: left;
		width: 60%;
	}

.PartyDuration {}

.PartyExtraGuest{
	text-align: right;
}


.PartyPackage img { 
	text-align: right;
	max-width: 300px;
	width: 38%;
}

.PartyPackage input[type="submit"] {
	float: right;
}

.PartyExtraGuest {
	font-weight: bold;
	padding: 3px;
	clear: right;
}

.PartySizeForm
{
	text-align: center;
	Margin-bottom: 0;
}

.PartyOption, 
.PartySize,
.PartyAdultSize {
	padding: 5px;
	text-align: right;
}

.PartyOption select, 
.PartySize select,
.PartyAdultSize select {
	width: 100px;
	margin-left: 10px;
	font-weight: bold;
}

.PartyOption label,
.PartySize label,
.PartyAdultSize label {
	width: auto;
	display: inline-block;
	text-align: right;
	font-weight: bold;
}

.PartyNotes
{
	padding: 10px;
	clear: both;
	text-align: center;
}

/*Custom styles for selected party package */
.SelectedPackage,
.SelectedPackage .PartyTitle,
.SelectedPackage .PartySizeForm,  
.SelectedPackage .PartyNotes {
	background-color: #0762EA;
}

.SelectedInstructions {
	text-align: center;
	background-color: #0762EA;
	padding: 10px;
	font-size: 130%;
	border-top: 1px solid #f7e971;
	border-bottom: 1px solid #f7e971;
}


/*Step 2 Styles -------------------------------------------------------------------------*/

#CalendarWrapper {
	text-align: center;
	Border: 1px solid #fff;
	border-radius: 0px;
	margin: 30px auto;
	max-width: 600px;
}

table#CalendarTable {
	margin: auto;
	border-collapse: collapse;
	margin-top: 20px;
	width: 95%;
	max-width: 800px;
}

#CalendarHeading{
	padding: 1%;
	font-size: 120%;
}

.ArrowPrevious {
	display: none;
}

.ArrowSmall {
	color: #e70327;
	padding: 3px 15px;
	font-size: 120%;
	text-decoration: none;
}

#DaysOfWeek>td {
	font-weight: bold;
	font-size: 120%;
}

table#CalendarTable td {
	text-align: center;
	padding: 2% 0%;
	border: none;
	font-size: 120%;
}

table#CalendarTable td>a {
	text-decoration: none;
	color: inherit;
	font-weight: bold;
}

td.actday {
	background: #eee;
	color: #e70327;
}

td.unavailable {
	opacity: 0.4;
}

td.tddisplay:hover, 
td.actday:hover {
	background-color:rgb(0,0,0,0.05);
}

#UnavailableDates {
	padding: 10px;
	font-weight: bold;
}

#PartyTimesWrapper {
	margin: 10px auto 20px auto;
	width: 95%;
	max-width: 800px;
	text-align: center;
}

.PartyTime {
	width: 100%;
	max-width: 600px;
	margin: 1% auto;
	display: inline-block;
	padding: 1%;
	border: none;
	background-color: #E70327;
	text-align: left;
	font-weight: bold;
}



.PartyTime input[type="radio"] {
	vertical-align: middle;
	margin-right: 10px;
}

.PartyTime label {
	cursor: pointer;
	vertical-align: middle;
}

/* Step 3 Styles -------------------------------------------------------------------------*/


#PasswordContent {
	margin: 10px auto auto auto;
	padding-top: 20px;
	width: 100%;
	max-width: 800px;
}

#ReturningCustomerInstructions {
	margin-bottom: 10px;
}


#PasswordIncorrectInstructions {
	text-align: center;
	margin-bottom: 10px;
	color: #red;
}

#PasswordEmailMessage {
	text-align: center;
}

#ProductWrapper {
	text-align: center;
	width: 100%;
	max-width: 840px;
	margin: auto;
	display: grid;
	grid-template-columns: auto auto ;
}

.Product {
	width: 100%;
	max-width: 360px;
	display:inline-block;
	vertical-align: top;
	margin: 10px 0;
	padding: 10px 0;
	box-shadow: 0px 0px 5px #777;
	text-align: center;
}

.ProductName {
	font-weight: bold;
	
}

.ProductPrice {
}

.Product img {
	padding: 10px 0;
	width: 80%;
}

.ProductDescription {}

/*Step 4 5 & 6 Styles ------------------------------------------------------------------------------------------*/

fieldset {
	margin: auto;
	width: 100%;
	max-width: 800px;
	text-align: left;	
	border: 1px solid rgb(127,127,127,0.3);
	margin-bottom: 20px;
	padding: 0 0 10px 0;
	
}

legend {
	float: left;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
	background: rgb(127,127,127,0.1);
	padding: 0;
	padding: 5px 0;
	font-weight: bold;
	}

fieldset input[type="text"],
fieldset input[type="password"],
select#ChildGender {
	min-width: 213px;
}

fieldset select {
	margin-right: 10px;
}

fieldset label {
	width: 40%;
	display: inline-block;
	text-align: right;
	margin: 5px;
	vertical-align: top;
	font-weight: bold;
}

fieldset label::after {
	content: ":";
}

.FormSubmit {
	text-align: center;
}

.FormSubmit input[type="submit"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	min-width: 150px;
	padding: 10px;

}

.FormInstructions {
	text-align: center;
	padding: 10px 2% 20px 2%;
}

.OrderSummaryDetail {
	display: inline-block;
	margin: 5px;
	width: auto;
	min-width: 200px;
}

.OrderSummaryDetail a {
	display: inline;
	margin-left: 5px;
	opacity: 1;
}
	
.OrderSummaryDetail ul {
	list-style-position: inside;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.OrderSummaryDetail li {
}

#OnlineBookingNotes {
	margin-top:10px;
}

.Step6LogoImage {
	width: 100%;
	text-align: center;
}


@media only screen and (max-width: 800px){
	
	.CountdownTimer,
	#LanguageContainer	{
		display: block;
		float: none;
		width: 98%;
		margin: auto;
		text-align: center;
	}
	
	#LanguageContainer {
		margin-top: 10px;
	}
	
	#PackageWrapper {
		grid-template-columns: auto auto;
	}
	
	#ProductWrapper {
		display:block;
	}
	
	#PartyTimesWrapper {
		width: 95%;
		padding: 0;
	}
	
	.PartyTime {
	display: block;
	width: 95%;
	margin: 5px 0;
	padding: 2%;
	border: 1px solid #ddd;
	}
	
	.PartyTime:nth-child(even) {
	margin-left: 0;
	margin-right: 0;
	}
}

@media only screen and (max-width: 600px) {
	
	.PartyDescription {
	width: 100%;
	}
	
	body {
	font-size: 12px;
}
	
	#StepContainer li {
		display: inline-block;
		padding: 5px;
	}
	
	.Error,
	.required {
		margin-left:2%;
	}	
	
	.StartOver {
		float: none;
	}
	
	#PackageWrapper,
	#ProductWrapper	{
		display: block;
	}
		
	.PartyPackage {
		width: 92%;
		display: inline-block;
		margin: 2%;
		padding: 2%;
	}
	
	.PartyPackage img {
		width: 96%;
		max-width: 400px;
		margin: 4% 2%;
	}
	
	.PartyOption, .PartySize, .PartyAdultSize {
		text-align: center;
		display: block;
		padding: 3px;
	}
	
	.PartyOption label, .PartySize label, .PartyAdultSize label {
		display: inline-block;
		width: 30%;
		max-width: 100px;
	}
	
	.PartyPackage input[type="submit"] {
		float: none;
	}
	
	.PartyExtraGuest{
		text-align: center;
	}
	
	table#CalendarTable td {
		padding: 3% 0;
	}
	
	fieldset label {
		width: auto;
		display: block;
		text-align: left;
		margin: 4% 0 0 2%;
	}
	
	fieldset button {
		margin: 5px 0 2% 2%;
	}
	
	fieldset input[type="text"],
	fieldset input[type="password"],
	select#ChildGender {
		margin: 0 2%;
		width: 96%;
	}
	
	select#ChildBirthdayMonth {
		margin: 0 0 0 2%;
		width: 48%;
		
	}
	
	select#ChildBirthdayDay,
	select#ChildBirthdayYear {
		margin: 0 0 0 2%;
		width: 22%;
	}
	
	.OrderSummaryDetail {
		margin-left: 4%;
	}
	
	textarea {
		margin: 0 2%;
		width: 96%;
	}
	
	
	
	
	
}