@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Saira+Stencil+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Saira+Stencil+One&display=swap");
*, *::before, *::after {
  padding: 0px;
  margin: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: Barlow;
}

img {
  display: block;
}

[role=button], [role=link] {
  cursor: pointer;
}

[role=grabber] {
  cursor: n-resize;
}

.form.whitePadding {
  background-color: #fff;
  padding: 30px;
  border: 1px solid #e5e5e5;
  position: relative;
}

.sideBySideForms {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sideBySideForms .image a {
  outline: 1px solid red;
}
.sideBySideForms .image a img {
  width: 100%;
}

.framer iframe {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border: 1px solid #fff;
}

.formWrap {
  display: -ms-grid;
  display: grid;
  gap: 1em;
  height: 100%;
  -ms-grid-rows: -webkit-min-content 1em 1fr;
  -ms-grid-rows: min-content 1em 1fr;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr;
}
.formWrap > h2 {
  font-weight: 300;
}
.formWrap .tabLabel {
  background-color: #fff;
  color: #fff;
  padding-inline: 0.5em;
  padding-block: 0.25em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid #e5e5e5;
  border-bottom: 0px;
  display: none;
}

.form {
  display: -ms-grid;
  display: grid;
  gap: 1em;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
.form h2.title {
  border-bottom: 1px solid #e5e5e5;
}
.form.max640 {
  max-width: 640px;
}
.form.max768 {
  max-width: 768px;
}
.form[disabled=disabled] .button {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.form > .fields {
  display: -ms-grid;
  display: grid;
  gap: 20px;
}
.form > .fields .hGroupFlex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.form > .fields .hGroupFlex.right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.form > .fields .hGroup {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form > .fields .hGroupTightLeft {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: -webkit-max-content 20px 1fr;
  -ms-grid-columns: max-content 20px 1fr;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  gap: 20px;
}
.form > .fields .hGroupTightRight {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px -webkit-max-content;
  -ms-grid-columns: 1fr 20px max-content;
  grid-template-columns: 1fr -webkit-max-content;
  grid-template-columns: 1fr max-content;
  gap: 20px;
}
.form > .fields .hGroup.scab {
  -ms-grid-columns: 1fr -webkit-max-content 1fr;
  -ms-grid-columns: 1fr max-content 1fr;
  grid-template-columns: 1fr -webkit-max-content 1fr;
  grid-template-columns: 1fr max-content 1fr;
}
.form > .fields .field {
  display: -ms-grid;
  display: grid;
  gap: 0.25em;
}
.form > .fields .field label {
  text-wrap: pretty;
}
.form > .fields .field label span.small {
  font-size: 12px;
}
.form > .fields .field input[type=text], .form > .fields .field input[type=date], .form > .fields .field input[type=password], .form > .fields .field input[type=file], .form > .fields .field textarea {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  width: 100%;
  padding-inline: 1em;
  padding-block: 0.6em;
  color: #000;
  font-size: 16px !important;
  letter-spacing: 0.04em;
  font-family: "Roboto", sans-serif;
}
.form > .fields .field input[type=text].invalid, .form > .fields .field input[type=date].invalid, .form > .fields .field input[type=password].invalid, .form > .fields .field input[type=file].invalid, .form > .fields .field textarea.invalid {
  outline: 2px solid red;
}
.form > .fields .field textarea {
  padding-inline: 0.8em;
  resize: vertical;
}
.form > .fields .field select {
  background-color: #fff;
  border: 1px solid #e3e3e3;
  width: 100%;
  padding-inline: 1em;
  padding-block: 0.6em;
  padding-right: 30px;
  color: #000;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.04em;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
  background-image: url("/images/icons/angle-down-sharp-solid.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 12px;
}
.form > .fields .field.validationMessage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.form > .fields .field.validationMessage.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.form > .fields .field.validationMessage img {
  height: 1.4em;
}
.form > .fields .field.stretch {
  outline: 1px solid red;
}
.form > .fields .nameValueTable {
  width: 100%;
}
.form > .fields .nameValueTable table tr td:first-child {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
.form > .fields .nameValueTable table tr td:last-child {
  width: 100%;
}
.form > .fields .nameValueTable table tr td {
  padding: 10px;
  border-bottom: 1px solid #f3f3f3;
}

.link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5em;
}
.link img {
  height: 1em;
}

* [role=button] {
  cursor: pointer;
}

.button {
  padding-block: 0.7em;
  padding-inline: 0.75em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5em;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.button.stretch {
  width: 100%;
}
.button.small {
  font-size: 14px;
  padding: 0.5em;
}
.button.backgroundWhite {
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.button.backgroundBlack {
  background-color: #000;
}
.button.backgroundBlue {
  background-color: #1a73e8;
}
.button.backgroundGrey {
  background-color: #f3f3f3;
}
.button.textBlue {
  color: #1a73e8;
}
.button.textWhite {
  color: #fff;
}
.button.textBlack {
  color: #000;
}
.button img {
  height: 1.2em;
}

html {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f3f3f3;
  height: 100%;
  font-weight: 400;
}
body > .centerPanel {
  padding: 30px;
  display: -ms-grid;
  display: grid;
  gap: 20px;
  width: 420px;
}
body > .centerPanel > .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  mix-blend-mode: darken;
}
body > .centerPanel > .logo img {
  width: 150px;
}
body > .centerPanel > .panel {
  border: 1px solid #999;
  padding: 0px;
  background-color: #fff;
}
body > .centerPanel > .panel > .form {
  border: 0px;
  padding: 30px;
}
body > .centerPanel > .panel > .form .field a {
  width: 100%;
}