/**
 * Form formatting
 */
.c4-basic-form {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 5rem; /* Margin @ bottom needed because idfive theme, footer was overlapping */
}

/**
 * Required formatting
 */
.c4-basic-form .webform-required {
  color: #b10009;
  text-align: right;
  font-style: italic;
  font-size: .9em;
}
.c4-basic-form .form-required:after {
  color: #b10009;
  content: "*";
}

/**
 * General formatting
 */
.c4-basic-form .form-item {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding-top: 1.253rem;
}
.c4-basic-form label {
  box-sizing: border-box;
  display: block;
  width: 100%;
  background-color: transparent;
  margin: 0 0 .1rem;
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 600;
}
.c4-basic-form input {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem .4rem;
  background-color: #fff;
  border: 1px solid #666;
  font-size: 1.1rem;
}
.c4-basic-form textarea {
  box-sizing: border-box;
  width: 100%;
  height: 8.5rem;
  padding: .25rem .15rem;
  background-color: #fff;
  border: 1px solid #666;
  font-size: 1.1rem;
}
.c4-basic-form select {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem .4rem;
  background-color: #fff;
  border: 1px solid #666;
  font-size: 1.1rem;
}
.c4-basic-form fieldset.webform-select-other .form-item {
  padding-top: 0;
}
.c4-basic-form fieldset.webform-select-other .form-item.webform-select-other-input {
  padding-top: .53rem;
}

/**
 * Basic fieldset
 */
.c4-basic-form fieldset.webform-type-fieldset {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-type-fieldset legend {
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 600;
}
.c4-basic-form fieldset.webform-type-fieldset .fieldset-wrapper {
  padding: 0 .75rem;
}

/**
 * Checkbox & select formatting
 */
.c4-basic-form fieldset.webform-select-other,
.c4-basic-form fieldset.webform-type-checkboxes,
.c4-basic-form fieldset.webform-checkboxes-other {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-select-other legend,
.c4-basic-form fieldset.webform-type-checkboxes legend,
.c4-basic-form fieldset.webform-checkboxes-other legend {
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 600;
}
.c4-basic-form fieldset.webform-type-checkboxes .fieldset-wrapper,
.c4-basic-form fieldset.webform-checkboxes-other .fieldset-wrapper {
  padding: 0 .75rem;
}
.c4-basic-form .form-type-checkbox {
  display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}
.c4-basic-form .form-type-checkbox label {
  display: inline-block;
  flex: 1 1 auto;
  width: auto;
  line-height: 1.4rem;
  font-weight: 400;
}
.c4-basic-form .form-type-checkbox input {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
}
.c4-basic-form .webform-options-display-two-columns,
.c4-basic-form .webform-options-display-three-columns {
  margin-top: 0;
  max-width: unset;
}

/**
 * Form buttons formatting
 * (ie. Buttons: Submit, Previous, Next)
 */
.c4-basic-form .form-actions {
  padding-top: 1.253rem;
  text-align: center;
}
.c4-basic-form .form-actions .button {
  display: inline-block;
  width: auto;
  padding: 0.3625rem 1.25rem 0.4875rem 1.25rem;
  color: #000;
  font-size: 1.25rem;
  line-height: 2.0625rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #0078B9;
  border-radius: 2.875rem;
  transition: all 0.2s ease-out;
}
.c4-basic-form .form-actions .button:hover {
  color: #fff;
  background-color: #0078B9;
  transition: all 0.2s ease-out;
}

/**
 * Element description formatting
 */
.c4-basic-form .webform-element-description {
  font-size: .85rem;
  padding: .2rem 0;
  color: #616161;
}

/**
 * Form Progress Tracker
 */
.c4-basic-form .progress-marker::before {
  z-index: 10; /* Adjustment needed because idfive theme has a sticky header @ z-index of 11 */
}
.c4-basic-form .progress-marker::after {
  top: 13px;
  z-index: 9; /* Adjustment needed because idfive theme has a sticky header @ z-index of 11 */
}
.c4-basic-form .webform-progress .webform-progress-tracker .progress-step .progress-marker::before {
  padding: 15px;
  font-weight: 600;
  background-color: #666;
}
.c4-basic-form .webform-progress .webform-progress-tracker .progress-step.is-active .progress-marker::before {
  color: #000;
  background-color: #0db14b;
  box-shadow: rgb(13, 177, 75) 0px 0px 0px 2px;
}
.c4-basic-form .progress-step.is-complete .progress-marker::before,
.c4-basic-form .progress-step.is-progress .progress-marker::before {
  background-color: #fff !important;
  color: #0db14b;
  box-shadow: rgb(13, 177, 75) 0px 0px 0px 2px;
}
.c4-basic-form .webform-progress-tracker .progress-step .progress-text {
  color: #666;
}

/**
 * Custom composite elements
 */
/* Basic table settings */
.c4-basic-form .webform-multiple-table table {
  border-collapse: collapse;
}
.c4-basic-form .webform-multiple-table table thead {
  font-weight: 700;
  font-size: .9rem;
  text-align: left;
}
.c4-basic-form .webform-multiple-table table tbody :nth-child(odd) td {
  background-color:#fff;
}
.c4-basic-form .webform-multiple-table table tbody td {
  padding: .5rem .25rem;
  vertical-align: center;
}
.c4-basic-form .webform-multiple-table .js-form-item {
  padding-top: 0;
}
.c4-basic-form .webform-multiple-table--operations .image-button {
  opacity: .5;
}

/* Add more items section */
.c4-basic-form .webform-multiple-add {
  display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;

  padding: .25rem 0;
  border-top: 1px solid #000;
}
.c4-basic-form .webform-multiple-add .button {
  flex: 0 0 auto;
  width: auto;
  padding: 0.3625rem 1.25rem 0.4875rem 1.25rem;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  background-color: #0078B9;
  border:0;
  border-radius: 2.875rem;
  transition: background 0.2s ease-out;
}
.c4-basic-form .webform-multiple-add .button:hover {
  background-color: #0e4c6f;
  transition: background 0.2s ease-out;
}
.c4-basic-form .webform-multiple-add .form-item {
  display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;

  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.c4-basic-form .webform-multiple-add .form-number {
  flex: 0 0 auto;
  width: auto;
}
.c4-basic-form .webform-multiple-add .field-suffix {
  flex: 0 0 auto;
  width: auto;
}

/**
 * Basic telephone
 */
.c4-basic-form fieldset.webform-type-webform-telephone {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-type-webform-telephone legend {
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 600;
}
.c4-basic-form fieldset.webform-type-webform-telephone .fieldset-wrapper {
  display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;

  padding: 0;
}
.c4-basic-form fieldset.webform-type-webform-telephone .form-type-select  {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  font-size: 1.1rem;
}
.c4-basic-form fieldset.webform-type-webform-telephone .form-type-tel {
  display: inline-block;
  flex: 1 1 auto;
  width: auto;
}
.c4-basic-form fieldset.webform-type-webform-telephone .form-item {
  padding-top:.1rem;
}

/**
 * Basic datetime
 */
.c4-basic-form .form-type-datetime .container-inline {
  display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}
.c4-basic-form .form-type-datetime .form-item {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  padding-top:.1rem;
}

/**
 * Basic name
 */
.c4-basic-form fieldset.webform-type-webform-name {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-type-webform-name.webform-composite-hidden-title {
  maring: 0;
}
@media(min-width:550px) {
  .c4-basic-form .webform-type-webform-name .fieldset-wrapper {
    display: -webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
  }
  .c4-basic-form .webform-type-webform-name .form-item {
    display: inline-block;
    flex: 2 2 auto;
    width: auto;
    padding-top:.1rem;
  }
}

/**
 * Basic address
 */
.c4-basic-form fieldset.webform-type-webform-address {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-type-webform-address.webform-composite-hidden-title {
  maring: 0;
}
/**
 * Basic address
 */
.c4-basic-form fieldset.webform-type-webform-address {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.253rem 0 0;
  padding: 0;
  border: 0;
}
.c4-basic-form fieldset.webform-type-webform-address.webform-composite-hidden-title {
  margin: 0;
}
.c4-basic-form fieldset.webform-type-webform-address .fieldset-wrapper {
  display: grid;
  grid-template-areas:
  'address address address'
  'city state zip';
  gap:5px;
}
.c4-basic-form fieldset.webform-type-webform-address .c4-basic-address-address,
.c4-basic-form fieldset.webform-type-webform-address .form-item-address-address {
  grid-area: address;
}
.c4-basic-form fieldset.webform-type-webform-address .c4-basic-address-city,
.c4-basic-form fieldset.webform-type-webform-address .form-item-address-city {
  grid-area: city;
}
.c4-basic-form fieldset.webform-type-webform-address .c4-basic-address-state-province,
.c4-basic-form fieldset.webform-type-webform-address .form-item-address-state-province {
  grid-area: state;
}
.c4-basic-form fieldset.webform-type-webform-address .c4-basic-address-postal-code,
.c4-basic-form fieldset.webform-type-webform-address .form-item-address-postal-code {
  grid-area: zip;
}

/**
 * Processed text (ie. Advanced HTML/Text)
 * NOTE: This stuff is all part of _typography.scss and
 * I don't understand why it's not loading
 */
/* Paragraph */
.c4-basic-form .form-item p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  margin: 1rem 0;
}

 /* Unordered lists */
.c4-basic-form .form-item ul {
  margin: 1.25rem 0;
  padding: 0 1.5rem;
  list-style-type: none;
}
.c4-basic-form .form-item ul li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  left: -1.25rem;
  top: 0.5625rem;
}
.c4-basic-form .form-item ul li:first-child {
  margin-top: 0;
}
.c4-basic-form .form-item ul li {
  position: relative;
}
.c4-basic-form .form-item ul li {
  font-size: 1.125rem;
  line-height: 1.625rem;
  margin: 1.25rem 0;
  margin-top: 1.25rem;
}
.c4-basic-form .form-item ul li > ul {
  list-style: none;
}
.c4-basic-form .form-item ul ul,
.c4-basic-form .form-item ul ol {
  margin: 1.25rem 0;
}
.c4-basic-form .form-item ul {
  margin: 1.25rem 0;
  padding: 0 1.5rem;
}
.c4-basic-form .form-item ul li > ul > li::before {
  background-color: transparent;
  border: solid 0.125rem #000;
  position: absolute;
}
.c4-basic-form .form-item ul li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  left: -1.25rem;
  top: 0.5625rem;
}