.oc__block.oc__block__form-layout label,
.oc__block.oc__block__form-layout legend {
  color: var(--oc--color--navy-text);
  font-family: var(--oc--font-family--base);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.28px;
  line-height: 140%;
}

.oc__block.oc__block__form-layout label + div,
.oc__block.oc__block__form-layout legend + div {
  margin-top: var(--oc--spacing--05);
}

.oc__block.oc__block__form-layout input[type='text'],
.oc__block.oc__block__form-layout input[type='email'],
.oc__block.oc__block__form-layout select,
.oc__block.oc__block__form-layout textarea {
  width: 100%;

  margin-bottom: var(--oc--spacing--05);
  padding: var(--oc--spacing--10) var(--oc--spacing--08);

  background-color: var(--oc--color--light-blue-60-tint);
  border-radius: 8px;
  border: 1px solid var(--oc--color--light-blue-60-tint);

  color: var(--oc--color--navy-text);
  font-family: var(--oc--font-family--base);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: normal;
}

.oc__block.oc__block__form-layout input[type='text'],
.oc__block.oc__block__form-layout input[type='email'],
.oc__block.oc__block__form-layout select {
  max-width: 350px;
}

.oc__block.oc__block__form-layout .oc__block__form-layout__select-container {
  position: relative;

  max-width: 350px;
  width: 100%;
}

.oc__block.oc__block__form-layout .oc__block__form-layout__select-container::after {
  content: '';
  display: block;

  position: absolute;
  top: 7px;
  right: 6px;

  width: 10px;
  height: 10px;
  padding: 20px;

  pointer-events: none;

  background-color: white;
  border-radius: 8px;

  background-size: 10px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M8.82082 2L5 5.71005L1.17918 2L0 3.14496L5 8L10 3.14496L8.82082 2Z' fill='%230E4C8C'/%3E%3C/svg%3E");
}

.oc__block.oc__block__form-layout select {
  appearance: none;
  padding-right: 36px;
}

.oc__block.oc__block__form-layout select:hover {
  cursor: pointer;
}

.oc__block.oc__block__form-layout textarea {
  appearance: none;
  outline: none;
}

.oc__block.oc__block__form-layout input[type='text']:hover,
.oc__block.oc__block__form-layout input[type='email']:hover,
.oc__block.oc__block__form-layout select:hover,
.oc__block.oc__block__form-layout textarea:hover {
  border: 1px solid var(--oc--color--new-blue);
}

.oc__block.oc__block__form-layout input[type='text']:focus,
.oc__block.oc__block__form-layout input[type='email']:focus,
.oc__block.oc__block__form-layout select:focus,
.oc__block.oc__block__form-layout textarea:focus {
  background: var(--oc--color--light-blue-84-tint);
  border: 1px solid var(--oc--color--new-blue);
}

.oc__block.oc__block__form-layout input[type='text']::placeholder,
.oc__block.oc__block__form-layout input[type='email']::placeholder {
  color: var(--oc--color--navy-text);
  opacity: 0.6;
}

.oc__block.oc__block__form-layout input[type='checkbox'],
.oc__block.oc__block__form-layout input[type='radio'] {
  width: 16px;
  height: 16px;

  accent-color: var(--oc--color--navy-blue);
}

.oc__block.oc__block__form-layout input[type='checkbox'] + label,
.oc__block.oc__block__form-layout input[type='radio'] + label {
  position: relative;
  top: -2.5px;

  color: var(--oc--color--navy-text);
  font-family: var(--oc--font-family--base);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
