@charset "utf-8";
/* CSS Document */

/*
.rowIndent {
	padding-left: 1.5em;
}
.formRowLine {
	border-bottom: 1px solid #C0C0C0;
}

form  div.rowDetail {
  clear: both;
  overflow: hidden;
  margin-top: 2px;
  padding-bottom: 2px;
}
form  div.rowDetail > fieldset > div > div {
  margin: 0 0 5px 0;
}
form  div.rowDetail > label,
legend {
  width: 40%;
  float: left;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
form  div.rowDetail > div,
form  div.rowDetail > fieldset > div {
  width: 60%;
  float: right;
  font-size: 90%;
}
form  div.rowDetail > fieldset label {
  font-size: 90%;
}
fieldset {
  border: 0;
  padding: 0;
}

input[type=submit] {
	padding: 9px;
	background-color: #000;
	color: #FFF;
	border: 0;
	width: 25%;	
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
  padding: 6px;
  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
  border: solid 1px #E5E5E5;
  font-family: 'Open Sans',Helvetica,Arial,sans-serif;
  font-size: 1em;
}

textarea {
	width: 97%
}

input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: auto;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #C9C9C9;
}
*/
.rowDetail {
	margin-bottom: 12px;
}

.rowIndent {
	margin-left: 1.0em;
	margin-right: 0.5em;
}

.input_container {
	border: 1px solid #39364f;
	padding: 2px 5px;
	margin-bottom: 12px;
	background-color: #fff;
    display: flex;
    flex-direction: column-reverse;	
}

.input_container label {
	line-height: 1.25em;
	padding-left: 6px;
	color: #36454F;
	font-size: 0.9em;
}

.multi_inputs, .discount_code, .paymentType {
	display: flex;
}

.multi_inputs > .input_container, .discount_code > .input_container {
	margin-right: 24px;
}

.paymentBullet {
	width: 30%;
}
.paymentRest {
	width: 70%;
	padding-top: 6px;
}

input:focus + label {
    color: blue;
}

select,
input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=password] {
	color: #000;
	width: auto; /* 98%*/
	height: 28px;
	padding-left: 6px;	
	outline: none; /* so blue focus lines don't show on chrome*/
	border: none;
	font-size: 1em;	
}

textarea {
	color: #000;
	width: 98%;
	margin-left: 6px;	
	outline: none; /* so blue focus lines don't show on chrome*/
	border: 0px solid #CCC; 
	font-size: 1em;
	font-family: 'Open Sans',Helvetica,Arial,sans-serif;
	font-weight: 400;	
	margin-top: 3px;
}

.surveyqs select,
.surveyqs input[type=text],
.surveyqs input[type=email],
.surveyqs input[type=number],
.surveyqs input[type=url],
.surveyqs input[type=password] {
	height: 44px;
	margin-top: 3px;	
}

input[type=text].inline, select.inline {
	width: auto;
	border: 1px solid #39364f;
	padding-left: 2px;	
	height: 36px;
	padding: 6px;
	font-size: 1.1em;
	margin-top: 3px;	
}

input.donation[type="text"]{
	width: auto;
	padding: 6px 4px;
}


.multiChoices {
	margin: 3px 0px;	
    display: flex
}

.multiChoicesBox {
	width: 28px;
}

.multiChoicesText {
	flex: 1;
	margin-top: 9px;
}

.radioButton {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #fff;
	 margin-top: 6px;
     top: 3px;
     height: 18px;
     width: 18px;
	 border: 1.5px solid #808080 !important;
     border-radius: 50px;
     cursor: pointer;     
     outline: none;	
} 

.radioButtonBox {
	border-radius: 2px;
	top: 5px;	
}

.choiceHideBox {
	border-radius: 2px;
	top: -1px;
}

.radioButton:checked::before {
     position: absolute;
     font: 16px/1 'Open Sans', sans-serif;
     left: 5px;
     top: 0px;
     content: '\02143';
     transform: rotate(40deg);
}
.radioButton:hover {
     background-color: #ececec;
}
.radioButton:checked {
     background-color: #0a2c4f;
}


#tickets input[type=checkbox], /* for register_add.php */
#tickets input[type=radio] {
	width: 25px;
	height: 25px;   	
	appearance: none;
    background-color: #fff;
    border: 1.5px solid #808080;
    border-radius: 3px;
    cursor: pointer;
	position: relative; /* Ensures pseudo-elements are positioned correctly */
}

#tickets input[type=checkbox]:checked::before, /* for register_add.php */
#tickets input[type=radio]:checked::before {
     font: 20px/1 'Open Sans', sans-serif;
     left: 7px; 
     position: absolute;
     top: 0px;
     content: '\02143';
     transform: rotate(40deg);	
	 color: white; /* Ensure visibility of the checkmark */
}

#tickets input[type=checkbox]:checked, /* for register_add.php */
#tickets input[type=radio]:checked {
     background-color: #0a2c4f;
	 /*border-color: #0a2c4f; /* Optional: Change border to match */
}


::placeholder {
  color: #39364f;
  font-style: italic;
  font-size: 0.9em; 
}

.choiceHideBox {
	border-radius: 2px;
	top: -1px;
}

.checkboxError {
	font-size: 0.7em;
	line-height: 1.25em;
	padding-left: 6px;
	color: red;
	font-weight: bold;
}

.fieldDirection {
	color: blue;
	font-size: 0.8em;
	font-weight: normal;
}

label.error {
	color: red !important;
	font-size: 0.7em !important;
}

div.errorMessage > span {
	color: red;	
}

@media screen and (max-width: 800px) { /* only do this if the screen size becomes less than 990px */
 
  .multi_inputs, .paymentType {
	  display: block;
  }
  
  .multi_inputs > .input_container {
	  margin-right: 0px;
  }

  .paymentBullet {
	  width: 100%;
  }
  .paymentRest {
	  width: 95%;
	  margin-left: 1.75em;
  }

  input[type='checkbox'],
  input[type='radio'] {
	  width: 20px;
	  height: 20px;        
  }

  input.donation[type="text"]{
	  width: 4em;
	  padding: 6px 4px;
  }
  
  select { min-width: 3.5em } /* so can see list of items on tablet */
	
 
}


@media (max-width: 500px) {
  form  div.rowDetail {
    margin: 0 0 6px 0; 
  }
  form  div.rowDetail > label,
  legend {
	  width: 100%;
      float: none;
      margin: 0 0 5px 0;
  }
  form  div.rowDetail > div,
  form  div.rowDetail > fieldset > div {
      width: 100%;
      float: none;
  }
  
  form  div#paymentinfo > div.rowDetail > div {
      padding-left: 2em;
	  width: 100%;
      float: none;
  }  
  
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
      width: 99%; 
  }
  .formRowLine {
	border-bottom: none;
  }
  .rowIndent {
	  margin-left: 0.5em;
  }  
}