:root{
  --c-orange-500: #E87722;
  --c-orange-25: #FFF8F3;

  --c-grey-800: #3D3D3D;
  --c-grey-700: #525252;
  --c-grey-300: #A3A3A3;
  --c-grey-100: #CCCCCC;
  --c-grey-50: #E0E0E0;

  --c-blue-500: #0E4194;
  --c-blue-300: #1F6CEA;
  --c-blue-50: #ABC8F7;
  --c-blue-25: #DAE7FB;

  --c-error-800: #BC1010;
  --c-error-500: #ED2A2A;
  --c-error-25: #FFDCDC;

  --c-white: #FFF;
  --c-background: #F9F9F9;
  --radius: 25px;
}

h1, h2, h3, h4, h5, h6{
  font-family: "Inter", sans-serif;
}

.public-header{
  background-color: none;
  color: black;
  font-family: sans-serif;
  transition: background-color 0.8s;
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
  height: 140px;
  padding: 35px;
  position: unset;
}

.public-header ul.menu li a {
  color: black;
}

div.container{
  max-width: calc( 664px + 0.8rem );
  margin: 0 auto;
  padding: 0 0.8rem;
}

.fieldset label{
  font-weight: 800;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.fieldgroup{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: end;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  border: 0;
  /* These styles are !important because foundation is overriding them */
  box-shadow: none !important;
  background-color: var(--c-white) !important;
  border-bottom: 1px solid var(--c-grey-50);
  padding: 1rem 0;
  font-weight: 400;
  color: var(--c-grey-800);
}

input[type="text"]::placeholder {
  color: var(--c-grey-300);
}

input[type="checkbox"]{
  all: unset;
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 1.5H1.5V12.5H12.5V1.5ZM1.5 0H12.5H14V1.5V12.5V14H12.5H1.5H0V12.5V1.5V0H1.5Z' fill='%23525252'/%3E%3C/svg%3E%0A");
  cursor: pointer;
  height: 14px;
  width: 14px;
}

input[type="radio"]{
  all: unset;
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 1.5H1.5V12.5H12.5V1.5ZM1.5 0H12.5H14V1.5V12.5V14H12.5H1.5H0V12.5V1.5V0H1.5Z' fill='%23525252'/%3E%3C/svg%3E%0A");
  cursor: pointer;
  height: 14px;
  width: 14px;
}

input[type="radio"]:checked{
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5V12.5H12.5V1.5H1.5ZM0 0H1.5H12.5H14V1.5V12.5V14H12.5H1.5H0V12.5V1.5V0ZM10.5312 5.53125L6.53125 9.53125L6 10.0625L5.46875 9.53125L3.46875 7.53125L2.9375 7L4 5.96875L4.53125 6.5L6 7.96875L9.46875 4.46875L10 3.9375L11.0312 5L10.5 5.53125H10.5312Z' fill='%230E4194'/%3E%3C/svg%3E%0A");
}

input[type="checkbox"]:checked{
  content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5V12.5H12.5V1.5H1.5ZM0 0H1.5H12.5H14V1.5V12.5V14H12.5H1.5H0V12.5V1.5V0ZM10.5312 5.53125L6.53125 9.53125L6 10.0625L5.46875 9.53125L3.46875 7.53125L2.9375 7L4 5.96875L4.53125 6.5L6 7.96875L9.46875 4.46875L10 3.9375L11.0312 5L10.5 5.53125H10.5312Z' fill='%230E4194'/%3E%3C/svg%3E%0A");
}

.checkbox input[type="radio"]{
  margin-bottom: 0;
}

.fieldset input,
.select-wrapper {
  margin-bottom: 1.5625rem;
}

.select-wrapper + .errorbox {
  margin-top: -1rem;
}

.select-wrapper select{
  all: unset;
  color: var(--c-grey-800);
  /* This needs to have the important flag due to foundation CSS */
  background-color: var(--c-white) !important;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  width: 100%;
  text-transform: initial;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-grey-50);
}

.select-wrapper select:has(> option[value=""]:checked) {
  color: var(--c-grey-300);
}

.select-wrapper select:hover{
  cursor: pointer;
}

.select-wrapper{
  position: relative;
}

.select-wrapper::after{
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  height: 14px;
  width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.5 409c9.4 9.4 24.6 9.4 33.9 0l200-200c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-183 183-183-183c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l200 200z'/%3E%3C/svg%3E");
  transform: translateY(-50%);
  pointer-events: none;
}

div.field.error{
  color: var(--c-error-500);
}

div.field.error input,
div.field.error .select-wrapper select{
  border-bottom-color: var(--c-error-500);
  color: var(--c-error-500);
}

div.field.error input::placeholder {
  color: var(--c-error-500);
}

/* checkbox styles */

div.checkbox{
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
}

div.checkbox input[type="checkbox"]{
  margin: 0;
}

div.checkbox label{
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  padding: 0;
}