@import url("css/classes-form.css?x=3.4.9a");
/* *******************************************
   OVERALL STRUCTURE...
******************************************* */

/* outside app colour */
html, body {background-color: white !important;}

/* xs<576 sm<768 md<992 lg<1200 xl>1200 */

/* sm and xs */
@media screen and (max-width: 768px) {
	.container_form {max-width: none !important; } /* make the form fit the screen so no wobbling around */
	.modal_body {padding: 2.0rem 0.2rem 2.0rem 0.2rem !important;}
	.row_subheading_payment {border-radius: 0px;}
}

/* xs */
@media screen and (max-width: 576px) {
	.col_input_icon {display:none;} /* hide the action icons on the left */
	#c_header_image {padding-left:0px !important; padding-right:0px !important; }
	#c_header_image img {-webkit-box-shadow: none;box-shadow: none;}
	#c_header_image {padding-left:0px !important; padding-right:0px !important; }
    #a_activity_description img {border-radius: 5px;}
}
/* 420px */
@media screen and (max-width: 420px) {
	.col_action_left {display:none;} /* hide the action icons on the left */
}

/* *******************************************
   DESCRIPTION AREA
******************************************* */

/* remove margin from bottom of paragraphs */
#a_activity_description p{margin-bottom:0;}

/* All images - 100% width, box shadow, rounded corner, clear floated stuff above, max width 100% */
#a_activity_description img {
    clear:both !important;-webkit-box-shadow: 5px 5px 5px    var(--c_right3);box-shadow: 5px 5px 5px    var(--c_right3);
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    margin-top: 0.5rem; /* this aligns it with the text */
}
	
#a_activity_descriptionz blockquote {
	clear:both !important;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	max-width: 40%;
	height: auto;
	float: right; 
	margin: 0.0rem 0 0.5rem 1.0rem !important;
	font-size: 120px!important;
	font-weight: 300 !important;
	font-style:italic;
	text-align: right;
	background-color: #ffffff;
	color: var(--c_right7) !important;
	border-right: 5px solid var(--c_right3)!important;
	background-color:#fbfaf9;
	border-radius: 10px 0 0 10px!important; /* tl, tr, br, bl */
	-webkit-box-shadow: 5px 5px 5px    var(--c_right1);
	        box-shadow: 5px 5px 5px    var(--c_right1);
	
	}
	
	#a_activity_description blockquote {

	font-size: 120px!important;

	
	}


/* h2 h3 */
#a_activity_description h2 {font-size: 1.5rem!important; clear:both !important; margin-bottom: 0px!important;}
#a_activity_description h3 {font-size: 1.2rem!important; clear:both !important; margin-bottom: 0px!important;}
@media screen and (max-width: 576px) { /* xs, sm */
#a_activity_description h2 {font-size: 1.3rem!important; clear:both !important; margin-bottom: 0px!important;}
#a_activity_description h3 {font-size: 1.1rem!important; clear:both !important; margin-bottom: 0px!important;}
}

/* Floated image margins - use the note-float-left/right class */
#a_activity_description img.note-float-left  {margin-right: 1.5rem !important;}
#a_activity_description img.note-float-right {margin-left: 1.5rem !important;}

/* main clears  any final  floated images in the description */
main {clear:both !important;}

/* *******************************************
   INPUTS...
******************************************* */

/* 0.25, 0.5, 1, 1.5, 3 rem */

/* ALL INPUTS MUST BE AT LEAST 1.0REM TO NOT ZOOM IN WHEN TEXT IS ENTERED ON A MOBILE */

input                {border: 1px solid var(--c_right3)!important;}

.input_form          {font-size: 1.0rem; padding-left:0.5rem; padding-right:0.5rem; border: 1px solid var(--c_right3); text-align: left; border-radius: 5px !important;	}
.input_form:disabled {background-color: var(--c_right1) !important;	color: var(--c_right8) !important;	}
@media screen and (max-width: 576px) { /* xs, sm */
.input_form          {font-size: 1.0rem;	 padding-left:0.25rem; padding-right:0.25rem;	} /* must be at least 1.0rem */
}	

.input_select          {font-size: 1.0rem; padding-left:0.5rem; padding-right:0.5rem; border: 1px solid var(--c_right3); text-align: left; border-radius: 5px !important;	}
.input_select:disabled {background-color: var(--c_right1) !important;	color: var(--c_right8) !important;	}
@media screen and (max-width: 576px) { /* xs, sm */
.input_select          {font-size: 1.0rem;	 padding-left:0.25rem; padding-right:0.25rem;	}
}	

.label_input         {font-size: 0.8rem; color: var(--c_right6); font-weight: bold; margin-top: 0px; margin-bottom: 3px; padding: 0px 0px 0px 0.5rem; }
@media screen and (max-width: 576px) { /* xs, sm */
.label_input         {font-size: 0.9rem; padding: 0px 0px 0px 0.25rem; }
}	
	
/* ---------------------------------- */

.row_sub_heading {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
	border-bottom: 1px solid #d8d8d8;
    /*color: #eeeeee;
     background-color: #c9d6de; */
    padding-top: 8px;
    padding-bottom: 1px}
	

.col_input_icon {
  padding-top: 32px}
  


.text_help {
    padding-left: 13px}


.icon_field {
    font-size: 1.2rem;
    /* color: #a8c8db; */
	color: var(--c_right4);
	}
	
.icon_help {
    font-size: 1.1rem;
    color: #bab8b8}


.row_input {
    margin-top: 0px;
    padding-top: 10px}
	
.admission_free {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}


.container_debug {
    background-color: #212020;
    padding-top: 5px;
    padding-bottom: 5px}


.text_debug_red {
    font-size: 0.7rem;
    color: #f56363;
    margin-bottom: 0px}

.text_debug_blue {
    font-size: 0.7rem;
    color: #a5aafc;
    margin-bottom: 0px}


.text_error {
    color: #d61c1c}


.icon_green {
    font-size: 18px;
    color: #1ea338;
    padding-top: 6px;
    padding-right: 3px}


.icon_orange {
    font-size: 20px;
    color: #e08f12;
    padding-top: 5px;
    padding-left: 4px}

.modal_header_success {
    background-color: #36a155;
    padding-top: 7px;
    padding-bottom: 7px}


.p_purchasing_total {
  font-weight: bold;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;}



.form_text_detail{line-height:1.3;font-size: 0.75rem;font-style: italic;color: #999999;padding-left:50px;padding-right:45px;}


.textarea_comments{width: 100%}
@media screen and (max-width: 576px) { /* xs, sm */
.textarea_comments{font-size: 1.0rem; width: 100%}
}

.quantity_selector{
    width: 50px}

.icon_error{
    text-align: left}

.style29{
    background-color: #F9F9F7;
}


.row_card_details{
    background-color: #fff;
    color: #c7c5c5;
    
}


.input_required {
    /* border: 1px solid var(--c_red1) !important; */
	 outline:none; -webkit-box-shadow: 0px 0px 4px 1px   var(--c_red1) !important; box-shadow: 0px 0px 4px 1px   var(--c_red1) !important;
}