.blue-border {
  background: var(--gardient---dark-blue, linear-gradient(180deg, var(--bg-brand-missional, #006680) 0%, var(--ui-blue-700, #0D82A8) 100%)) !important;
}

.blue-border .content {
  border-radius: 24px;
  border: 1px solid #CCC;
  background: #FFF;
}

.contact-form-component .form-container {
  margin: 0 auto;
}

.contact-form-component .form-container .form-control,
.contact-form-component .form-container .form-select {
  width: 100%;
}

.contact-form-component .form-container .form-type-textfield,
.contact-form-component .form-container .form-item-agree-terms,
.contact-form-component .form-container .form-type-email {
  margin-bottom: 24px !important;
}


.contact-form-component .form-item-first-name label,
.contact-form-component .form-item-last-name label,
.contact-form-component .form-item-email label,
.contact-form-component .form-item-message label,
.contact-form-component .form-item-campus label,
.contact-form-component .form-item-user-type label {
  font-weight: 500;
}

.contact-form-component .form-item-subscribe-newsletter,.form-item-subscribe-newsletter label{
  font-weight: 400;
}
.contact-form-component .form-item-message,.form-item-subscribe-newsletter,.form-item-subscribe-newsletter {
  margin-bottom: 24px !important;
}

.contact-form-component .form-container label {
  color: #1A1A1A;
  font-family: 'Avenir', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
  margin-bottom: 8px;
}

.contact-form-component .form-container .form-submit {
  width: auto;
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #E76127;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-bottom: 0 !important;
  height: 48px;
  line-height: normal;
  color: #fff !important;
}


.contact-form-component  .form-check-label:after {
  display: none !important;
}

.contact-form-component label.error:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-55%);
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM8 3C8.19891 3 8.38968 3.07902 8.53033 3.21967C8.67098 3.36032 8.75 3.55109 8.75 3.75V8.25C8.75 8.44891 8.67098 8.63968 8.53033 8.78033C8.38968 8.92098 8.19891 9 8 9C7.80109 9 7.61032 8.92098 7.46967 8.78033C7.32902 8.63968 7.25 8.44891 7.25 8.25V3.75C7.25 3.55109 7.32902 3.36032 7.46967 3.21967C7.61032 3.07902 7.80109 3 8 3ZM8 13C8.26522 13 8.51957 12.8946 8.70711 12.7071C8.89464 12.5196 9 12.2652 9 12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13Z" fill="%23EF4444"/></svg>');
  background-size: cover;
}

.contact-form-component label.error {
  position: relative;
  padding-left: 28px;
  color: #DC2626;
  font-family: 'Avenir', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-top: 8px;
}

.contact-form-component .form-item-agree-terms label[for=edit-agree-terms], .contact-form-component .form-item-subscribe-newsletter label[for=edit-subscribe-newsletter]  {
  margin-top: -20px;
  margin-bottom: 0!important;
}
.contact-form-component #agree_terms-error, .contact-form-component #subscribe_newsletter-error {
  order:1;
  margin-left: -27px;
}
.contact-form-component .form-item-agree-terms input, .contact-form-component .form-item-subscribe-newsletter input {
  margin-left: -25px;
}
.contact-form-component .form-actions {
  margin-bottom: 0 !important;
}
.contact-form-component .form-item-agree-terms, .contact-form-component .form-item-subscribe-newsletter {
  display: flex;
  flex-direction: column;

}

.contact-form-component .form-container input.error {
  box-shadow: 0px 0px 0px 0px #FFF inset, 0px 0px 0px 1px #FCA5A5 inset;
  overflow: hidden;
  color: #7F1D1D;
  text-overflow: ellipsis;

  /* input/input */
  font-family: 'Avenir', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;


}

.contact-form-component .form-container input[type="checkbox"].error{
  border: none !important;
}

.contact-form-component .form-container textarea.error {
  box-shadow: 0px 0px 0px 0px #FFF inset, 0px 0px 0px 1px #FCA5A5 inset;
  overflow: hidden;
  color: #7F1D1D;
  text-overflow: ellipsis;

  /* input/input */
  font-family: 'Avenir', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}


.contact-form-component .form-container .form-submit:hover {
  background: #C74E1F !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
  border-color: #C74E1F !important;
}

/* legend {
 display: none;
} */

/* Responsive layout for first name and last name fields - only when user_type or campus fields are shown */
@media (min-width: 768px) {
  .contact-form-component.show-user-type .form-container .form-item-first-name,
  .contact-form-component.show-campus .form-container .form-item-first-name {
    display: inline-block;
    width: calc(50% - 12px);
    margin-right: 24px;
    vertical-align: top;
  }
  
  .contact-form-component.show-user-type .form-container .form-item-last-name,
  .contact-form-component.show-campus .form-container .form-item-last-name {
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top;
  }
  
  /* Ensure the container allows inline-block elements */
  .contact-form-component.show-user-type .form-container form,
  .contact-form-component.show-campus .form-container form {
    font-size: 0; /* Remove whitespace between inline-block elements */
  }
  
  .contact-form-component.show-user-type .form-container form > *,
  .contact-form-component.show-campus .form-container form > * {
    font-size: 14px; /* Reset font size for form elements */
  }
}