/* roboto-regular - latin */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*:before,
*:after {
  box-sizing: border-box;
}

#container {
  margin: 0;
  width: 100%;
}

#logo,
#header,
#footer {
  display: none;
}

.wufoo {
  font-family: Roboto, sans-serif, arial;
}
.wufoo ul {
  display: flex;
  flex-direction: column;
}
.wufoo li {
  width: 100%;
  padding: 0;
  margin-top: 1rem;
}
.wufoo li.single {
  margin-top: 1.4rem;
}
.wufoo li.focused {
  background: none !important;
}
.wufoo fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.wufoo fieldset legend {
  padding: 0;
  margin-bottom: 0.5em;
}
.wufoo ul:after,
.wufoo li:after,
.wufoo li div:after {
  display: none;
}

form.wufoo li.section {
  margin: 1rem 0 0;
}
form.wufoo li.section h3 {
  padding-left: 0;
  padding-right: 0;
  border: none;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  margin-bottom: 1rem;
}
form.wufoo li.section div {
  padding-left: 0;
  padding-right: 0;
  font-size: 1rem !important;
}

form li.complex div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
form li.complex div span.left,
form li.complex div span.right {
  width: 50%;
  width: calc(50% - 10px);
}

form li.likert {
  padding-left: 0;
  padding-right: 0;
  margin-top: 1rem;
}

legend.desc {
  width: auto;
  padding: 0 0.5rem;
}

input[type='text'],
input[type='number'],
input[type='email'],
input[type='date'],
input[type='phone'],
input[type='password'],
input[type='tel'],
input[type='url'],
textarea.textarea,
select,
select.select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
  background-color: white;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 1.25;
  color: #131313;
  border-width: 1px;
  border-color: #b1b3b6;
}
input[type='text']:hover,
input[type='number']:hover,
input[type='email']:hover,
input[type='date']:hover,
input[type='phone']:hover,
input[type='password']:hover,
input[type='tel']:hover,
input[type='url']:hover,
textarea.textarea:hover,
select:hover,
select.select:hover {
  border-color: black;
}
input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='date']:focus,
input[type='phone']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='url']:focus,
textarea.textarea:focus,
select:focus,
select.select:focus {
  border-color: black;
  outline: 1px dotted #999;
}

select {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIvPjxwYXRoIGZpbGw9IiMxMzEzMTMiIGQ9Im0xMi4xNjcgMTMuMzk2IDUuNTM5LTMuMjI5LTUuNTM5IDYtNS41MzgtNnoiLz48L2c+PC9zdmc+);
  background-position: 98% 50%;
  background-repeat: no-repeat;
}

.single,
.multiple > div > span,
.multiple > span {
  position: relative;
}

.multiple label {
  margin-bottom: 1rem;
  padding: 0;
}

/*
default label styles
*/
.multiple > div label,
.multiple > span label,
.single > label {
  font-family: Roboto, sans-serif, arial;
  position: absolute;
  top: 0;
  left: 0.25rem;
  font-weight: 400;
  transition: 0.15s ease-in;
  transition-property: font-size, top;
  transform: translate(0, -50%);
  background-color: white;
  color: #999999;
  padding: 0 0.5rem;
  width: auto;
}

.date span:last-child {
  width: 3em !important;
  height: 3em !important;
  background: url('data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjAiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGhlaWdodD0iMWVtIiB3aWR0aD0iMWVtIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04ODAgMTg0SDcxMnYtNjRjMC00LjQtMy42LTgtOC04aC01NmMtNC40IDAtOCAzLjYtOCA4djY0SDM4NHYtNjRjMC00LjQtMy42LTgtOC04aC01NmMtNC40IDAtOCAzLjYtOCA4djY0SDE0NGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJ2NjY0YzAgMTcuNyAxNC4zIDMyIDMyIDMyaDczNmMxNy43IDAgMzItMTQuMyAzMi0zMlYyMTZjMC0xNy43LTE0LjMtMzItMzItMzJ6bS00MCA2NTZIMTg0VjQ2MGg2NTZ2Mzgwek0xODQgMzkyVjI1NmgxMjh2NDhjMCA0LjQgMy42IDggOCA4aDU2YzQuNCAwIDgtMy42IDgtOHYtNDhoMjU2djQ4YzAgNC40IDMuNiA4IDggOGg1NmM0LjQgMCA4LTMuNiA4LTh2LTQ4aDEyOHYxMzZIMTg0eiI+PC9wYXRoPjwvc3ZnPgo=');
  background-size: cover;
  background-repeat: no-repeat;
}
.date span:last-child:hover {
  opacity: 0.5;
}
.date span:last-child img {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.multiple {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 5px;
  column-gap: 5px;
}
.multiple > label {
  width: 100%;
}
.multiple .symbol {
  align-self: center;
}
.multiple > span {
  margin: 0;
}
.multiple > span:not(.symbol) {
  width: 100px;
}
.multiple > span:not(.symbol) select {
  margin: 0 !important;
  width: 100% !important;
}

.name {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.name > label {
  width: 100%;
}
.name > span {
  flex-grow: 1;
}

form li.buttons {
  padding-left: 0;
  padding-right: 0;
}

input.btTxt {
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  align-items: flex-end;
  justify-content: center;
  white-space: nowrap;
  border-width: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: trade-gothic-next-condensed, sans-serif, arial;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  border-color: #3b7cc0;
  background-color: #3b7cc0;
  color: white;
}
input.btTxt:hover {
  background-color: black;
}

/* File upload */
.wufoo .file {
  position: relative;
}
.wufoo .file label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 150px;
  padding: 20px 20px;
  border-radius: 10px;
  border: 1px dashed #b1b3b6;
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.wufoo .file label:hover {
  background: #eee;
  border-color: #111;
}
.wufoo .file input[type='file'] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}
.wufoo .file input[type='file']::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #3b7cc0;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.wufoo .file input[type='file']::file-selector-button:hover {
  background: black;
}
