/*for spinner*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/*
.fa.fa-spin.fa-spinner {
  display: flex;
  width: fit-content;
  margin: auto;
  Xheight: 44px;
}
*/


body {
  color: #000;
  background: #fff;
  font: normal 14pt/1.5 Arial, Helvetica, sans-serif;
}

/*even though the civi-webform If-You-Are-Not is disabled, it is still displayed if the conact has no first/last name (email only)*/
.webform-civicrm-prefix.contact-known {
  display: none;
}

input.form-autocomplete, 
input.form-text,
input.form-file,
textarea.form-textarea,
select.form-select {
  width: calc(100% - 6px);
  /*margin: 0 10px;*/
}

fieldset .fieldset-legend {
  line-height: 1.2;
}

.webform-component-fieldset.webform-component--civicrm-2-contact-1-fieldset-fieldset.form-wrapper {
  /*padding: 0;*/
  margin-top: 0;
}

.form-item.webform-component--parent-message {
  margin: 15px 0;
}

label {
  line-height: 1.3;
}

div.webform-component.webform-component--status {
  font-size: 16px;
  padding: 8px;
  margin: 8px 8px 0 8px;
  background-color:#f8fff0;
  border: 1px solid #be7;
}

.hidden {
    display: none;
}

#header {
    display: none;
}

.breadcrumb {
    display: none;
}

div.meta.submitted {
    display: none;
}

div#footer-wrapper {
    display: none;
}

#webform-client-form-176 > div > div.webform-progressbar > div > span:nth-child(4) > span.webform-progressbar-page-label {
  margin-left: -2em;
  margin-right: 0;
}

#wf-crm-billing-items td + td {
  white-space: nowrap
}

.form-item {
  margin: 0;
}

.filter-wrapper .form-item, div.teaser-checkbox .form-item, .form-item .form-item {
  padding: 0;
}

.webform-component--event-choice div.description {
  font-size: 18.667px;  
  font-weight: 700;
}

.webform-component--civicrm-1-contact-1-fieldset-fieldset.form-wrapper {
  background-color: #ffd;
}

.webform-component--civicrm-2-contact-1-fieldset-fieldset.form-wrapper {
  background-color: rgb(234, 255, 221);
}

.webform-component--emergency-contact.form-wrapper {
  background-color: #fef;
}

.webform-component--permissions.form-wrapper {
  background-color: rgb(221, 230, 255);
}

fieldset.webform-component--payment-section.form-wrapper {
  padding: 1em 0;
  background-color: rgb(231, 255, 221);
}

.webform-component--civicrm-1-contact-1-contact-existing {
  padding: 0;
}

#privacy {
  font-style: italic;
  font-size: 16px;
}

div.webform-component--cancellation-policy {
  font-size: 15px;
}

.webform-component--price-description .text1 {
  font-size: 0.923em;
}

div.webform-component--cancellation-policy h3 {
  font-size: 1.0em;  
}

/*
#page {
    height: 0%;
    min-width: 480px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

#page-wrapper {
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
    width: unset;
}

div.form-item.webform-component.webform-component-civicrm_contact.static.webform-component--civicrm-1-contact-1-fieldset-fieldset--civicrm-1-contact-1-contact-existing {
    display: none;
}

fieldset .fieldset-wrapper {
    padding: 20px 13px 13px 15px;
}

Xdiv.webform-component {
    padding: 0;
}

.form-item label {
    font-size: 12px;
}

.form-actions {
    margin: 0;
}

#Xprivacy {
    margin-top: 0;
    padding: 10px;
    font-size: 14px;
}

#privacy p {
    margin-top: 0;
    padding: 0px 10px 0 10px;
    font-size: 14px;
}

#footer1 img {
    width: 92%;
    max-width: 300px;
    height: auto;
}
*/

/*2nd content div, parent of form*/
/*
div.content div#node-117.node.node-webform.clearfix div.content {
    margin-right: 430px;
    min-width: 300px;
    padding-left: 10px;
    position: relative;
}
*/

form {
    border: 3px solid #73AD21;
    display: block;
    padding: 10px;
    max-width: 500px;
    margin: auto;
}


input[disabled=""] {
  background: lightgrey;
}


div.webform-component.webform-component--status {
  padding-left: 40px;
}

input.form-submit.disabled_button {
  pointer-events: none;
  background: #00000080;
}

@media only screen and (max-width: 1px) {


  /*text block*/
  Xhtml.js body.html.not-front.not-logged-in.no-sidebars.page-node.page-node-.page-node-117.node-type-webform div#page div#content.clearfix div.region.region-content div#block-system-main.block.block-system div.content div#node-117.node.node-webform.clearfix div.content div.field.field-name-body.field-type-text-with-summary.field-label-hidden {
    min-width: 300px;
    position: relative;
  }




  /*Submit button*/

  input.webform-submit.button-primary.form-submit {
      margin-left: 10px;
  }

  
  

  Xfieldset.webform-component-fieldset.webform-component--civicrm-1-contact-1-fieldset-fieldset.form-wrapper {
      border: none;
      margin: 0;
      padding: 0;
  }


  /*Progress bar*/
  div.field.field-name-pgbar-default.field-type-pgbar.field-label-above {
      display: block;
      position: absolute;
      right: -430px;
      top: 0;
      width: 330px;
      margin: 10px 20px 0px 0px;
      padding: 0px 10px 0px 10px;
      border: 3px solid #0000FF;
      background-color: #F0F0FF;
  }


  /*Progress bar background color*/

  .pgbar-bg {
      background-color: #ffE0E0;
  }

  div.field.field-name-pgbar-default.field-type-pgbar.field-label-above div.field-label {
      display: none;
  }


  .petition-text {
      border: 2px solid;
      border-radius: 30px;
      background-color: #E0FFE0;
      padding: 10px;
      max-width: 640px;
      margin: auto;
  }

  textarea.form-textarea {
    font-size: 15px;
  }

}

/*.webform-component-markup.webform-component--logo-bottom p b img {*/
.logo {
  max-width: 300px;
  margin-right: 10px;
  width: 92%;
  height: auto;
}

XXX.content .field .field-items {
  padding-left: 7px;
  padding-right: 7px;
}



form {
  padding-left: 13px;
  padding-right: 13px;
}

/*fieldset .fieldset-wrapper {
  padding-left: 13px;
  padding-right: 13px;
}*/


@media only screen and (max-width: 360px) {
  form {
    padding-left: 4px;
    padding-right: 4px;
  }

  fieldset .fieldset-wrapper {
    padding-left: 4px;
    padding-right: 4px
  }
}

/* body text 
#node-176 > div.content > div > div > div {}

div.field-name-body div.field-items div.field-item {
  padding: 150px;
}
*/

/*
Xdiv.field.field-name-body.field-type-text-with-summary.field-label-hidden div.field-items div.field-item.even p span img {
  max-width: 480px;
  margin-right: 10px;
  width: 92% !important;
  height: auto !important;
}

*/

#top-centered {
  width: auto;
  margin: 0 auto;
}

#header1 {
  margin: 0 auto;
  width: max-content;
  vertical-align:middle;
}

#logo1 {
  display:inline-block;
  padding-right: 14px;
  vertical-align: middle;
}

#title {
  display:inline-block; 
  line-height:1.8rem;
  text-align:center;
  vertical-align:middle;
  width: auto;
  max-width: calc(100vw - 156px);
}

#tagline {
  text-align: justify;
  max-width: 520px;
  margin: 25px auto;
  font-size: 20px;
  font-weight: 600;  
  padding: 0 10px;
}

@media only screen and (max-width: 580px) {
  #intro {
    margin-left: 0rem;
    margin-right: 0rem;
  }
}  

@media only screen and (max-width: 1px) {
  img.top_image1 {
    max-width: 100%;
    padding-left: 0;
  }

  div.field.field-name-pgbar-default.field-type-pgbar.field-label-above {
    right: -400px;
  }

  div.content div#node-117.node.node-webform.clearfix div.content {
    margin-right: 400px;
  }

  form {
    right: -400px;
  }
}

.form-item.webform-component--civicrm-1-participant-1-participant-fee-amount > .description {
  color: black;
}

.form-item.webform-component--civicrm-1-participant-1-participant-fee-amount > .description > :nth-child(1) {
  padding: 10px 0;
}

.webform-component--payment-section--test-mode-notice {
  background: rgb(255, 231, 231);
  border: 2px solid red;
  margin: 20px;
  padding: 11px;
  font-size: 15px;
}

/*
X.form-item.webform-component--civicrm-1-participant-1-participant-fee-amount > .description::before {
  color: red;
  content: "<div class='test1'><p>The cost to participate in the camp is $55000.</p></div>&lt;br /&gt;";
  //content: "HELLO";
}

X.form-item.webform-component--civicrm-1-participant-1-participant-fee-amount > .description::after {
  color: red;
  content: " - Remember this";
}
*/


/* IMPORTANT: WITHOUT THIS, THE SUBMIT BUTTON DOESN'T WORK ON SOME iPHONE DEVICES -- CAUSE IS NOT UNDERSTOOD
   This effectively changes the button margin from {0 20.104px 0 20.104px} to {0 5.026px 0 5.206px}
   margin-right is the critical one, and must be no more than 15.8px on iPhone 6s.
   Problem is a function of the botton location -- if Submit button wraps under Previous Page button rather than
   next to it, the problem does not occur. Also, in landscape mode the problem does not occur.
   No such problem was noted on the Previous / Next buttons.
   Can be observed using the xCode iPhone 6s simulator runing Safari on iOS 14.4.
*/
input.form-submit, a.button {
  margin: 0.25em;
}