

[data-umbraco-forms] button,
[data-umbraco-forms] select,
[data-umbraco-forms] input[type=submit],
[data-umbraco-forms] input[type=reset],
[data-umbraco-forms] input[type=button],
[data-umbraco-forms] input[type=checkbox],
[data-umbraco-forms] input[type=range],
[data-umbraco-forms] input[type=radio] {
  cursor: pointer;
}

[data-umbraco-forms] button,
[data-umbraco-forms] input[type=button],
[data-umbraco-forms] input[type=reset],
[data-umbraco-forms] input[type=submit] {
  color: white;
  background-color: #46166B;
  font-weight: bold;
  padding: 15px 32px;
  border: 1px solid white;
  border-radius: 20px;
  outline: none;
}

[data-umbraco-forms] button:hover,
[data-umbraco-forms] input[type=button]:hover,
[data-umbraco-forms] input[type=reset]:hover,
[data-umbraco-forms] input[type=submit]:hover {
  background: #310D4D;
}


[data-umbraco-forms] input:not([type=checkbox], [type=radio]),
[data-umbraco-forms] textarea,
[data-umbraco-forms] select {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid #c5c5cd;
  border-radius: 20px;
}
[data-umbraco-forms] input[type=file] {
  padding: 12px 15px;
}

[data-umbraco-forms] input[type=checkbox],
[data-umbraco-forms] input[type=radio] {
  transform: translateY(2px);
  width: 1rem;
  aspect-ratio: 1;
}

[data-umbraco-forms] input:focus,
[data-umbraco-forms] select:focus,
[data-umbraco-forms] button:focus,
[data-umbraco-forms] textarea:focus {
  outline: 2px solid #000;
}
[data-umbraco-forms] input:disabled,
[data-umbraco-forms] select:disabled,
[data-umbraco-forms] button:disabled,
[data-umbraco-forms] textarea:disabled {
  cursor: not-allowed;
  background-color: #c5c5cd;
}

[data-umbraco-forms] select {
  appearance: none;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
  background: white url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
  background: white var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
  padding-right: 35px;
}

.umbraco-forms-form {
  max-width: 375px;
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  accent-color: #310D4D;
}

.umbraco-forms-page,
.umbraco-forms-container,
.umbraco-forms-field,
.umbraco-forms-field-wrapper {
  display:flex;
  flex-direction: column;
  gap: 32px;
}

.umbraco-forms-container {
  gap: 20px;
}

legend:not(.umbraco-forms-legend) {
  font-weight: bold;
  margin-bottom: 32px;
}

.umbraco-forms-field,
.umbraco-forms-field-wrapper {
  gap: 6px;
}

.umbraco-forms-field-wrapper :where(h1,h2,h3,h4,h5,h6) {
  margin-top: 32px;
}

.umbraco-forms-field-wrapper .field-validation-error {
  grid-column: span 2;
}

.umbraco-forms-field-wrapper .checkboxlist,
.umbraco-forms-field-wrapper .radiobuttonlist  {
  grid-column: span 2;
}

.umbraco-forms-field-wrapper:has(input[type=checkbox], input[type=radio]),
.umbraco-forms-field-wrapper .checkboxlist div,
.umbraco-forms-field-wrapper .radiobuttonlist div {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: baseline;
  gap: 6px;
}

.umbraco-forms-field-wrapper .checkboxlist.checkboxlist-horizontal,
.umbraco-forms-field-wrapper .radiobuttonlist.radiobuttonlist-horizontal  {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 0;
}

.umbraco-forms-label,
.umbraco-forms-legend {
  cursor: pointer;
  line-height: 24px;
  font-weight: bold;
  color:#310D4D;
  font-size: 15px;
}

[data-umbraco-forms] :where(h1,h2,h3,h4,h5,h6) {
  font-size: 18px;
  line-height: 26px;
  font-weight: bold;
}

@media (min-width: 768px) {
  [data-umbraco-forms] :where(h1,h2,h3,h4,h5,h6) {
    font-size: 24px;
  }
}

[data-umbraco-forms] .field-validation-valid {
  display: none;
}

[data-umbraco-forms] .field-validation-error {
  justify-self: flex-start;
  align-self: flex-start;
  color: white;
  background-color: #dc2626 !important;
  font-weight: bold;
  font-size: 13px;
  line-height: 1rem;
  padding: 1px 4px;
  border-radius: 4px;
}

[data-umbraco-forms] input[type=hidden],
[data-umbraco-forms] [aria-hidden=true],
[data-umbraco-forms] .umbraco-forms-hidden,
[data-umbraco-forms] [data-lastpass-icon-root] {
    display: none !important;
}

body:has([data-umbraco-forms]) .pika-prev{
  order: -1 !important;
}

body:has([data-umbraco-forms]) .pika-next{
  transform: scale(1) !important;
}
